/*

	colour.css

	Stylesheet for slide scanning system

	============================================================================
	Author: Alex Wright, © 2019
 */


/*

    Modifiers
    - change colours using classes

     ===========================================================================
*/

.thin {
 	border-top:					2px;
}

.darken {
     filter: brightness(50%);
}


 /*

     Text Colours

     ===========================================================================
 */

.black {
    color:				#000000;
}

.grey {
    color:              #333333;
}

.light {
    color:              #AAAAAA;
}

.white {
    color:				#FFFFFF;
}

.red {
 	color:				#FF8888;
}

.red.dark {
   color:				#DD6666;
}

.orange {
 	color:				#FFAA88;
}

.yellow {
 	color:				#FFFF88;
}

.chartreuse {
 	color:				#AAFF88;
}

.green {
 	color:				#88FF88;
}

.mint {
 	color:				#88FFAA;
}

.cyan {
 	color:				#88FFFF;
}

.sky {
 	color:				#88AAFF;
}

.blue {
 	color:				#8888FF;
}

.purple {
 	color:				#AA88FF;
}

.pink {
 	color:				#FF88FF;
}

.coral {
 	color:				#FF88AA;
}


 /*

     Background Colours

     ============================================================================
 */

 .blackBk {
     background-color:				#000000;
 }

.darkBk {
    background-color:				#333333;
}

.lightBk {
    background-color:				#AAAAAA;
}

.redBk {
 	background-color:				#FF8888;
}

.orangeBk {
 	background-color:				#FFAA88;
}

.yellowBk {
 	background-color:				#FFFF88;
}

.chartreuseBk {
 	background-color:				#AAFF88;
}

.greenBk {
 	background-color:				#88FF88;
}

.mintBk {
 	background-color:				#88FFAA;
}

.cyanBk {
 	background-color:				#88FFFF;
}

.skyBk {
 	background-color:				#88AAFF;
}

.blueBk {
 	background-color:				#8888FF;
}

.purpleBk {
 	background-color:				#AA88FF;
}

.pinkBk {
 	background-color:				#FF88FF;
}

.coralBk {
 	background-color:				#FF88AA;
}


/*

    Background Colours Dark

    ============================================================================
*/

.blackBk.dark {
    background-color:				#000000;
}

.redBk.dark {
    background-color:				#DD6666;
}

.orangeBk.dark {
    background-color:				#DD8866;
}

.yellowBk.dark {
 	background-color:				#DDDD66;
}

.chartreuseBk.dark {
 	background-color:				#88DD66;
}

.greenBk.dark {
 	background-color:				#66DD66;
}

.mintBk.dark {
 	background-color:				#66DD88;
}

.cyanBk.dark {
 	background-color:				#66DDDD;
}

.skyBk.dark {
 	background-color:				#6688DD;
}

.blueBk.dark {
 	background-color:				#6666DD;
}

.purpleBk.dark {
 	background-color:				#8866DD;
}

.pinkBk.dark {
 	background-color:				#DD66DD;
}

.coralBk.dark {
 	background-color:				#DD6688;
}



/*

    Background Colours Darker

    ============================================================================
*/

.redBk.darker {
    background-color:				#AA4444;
}

.orangeBk.darker {
    background-color:				#AA6644;
}

.yellowBk.darker {
 	background-color:				#AAAA44;
}

.chartreuseBk.darker {
 	background-color:				#66AA44;
}

.greenBk.darker {
 	background-color:				#44AA44;
}

.mintBk.darker {
 	background-color:				#44AA66;
}

.cyanBk.darker {
 	background-color:				#44AAAA;
}

.skyBk.darker {
 	background-color:				#4466AA;
}

.blueBk.darker {
 	background-color:				#4444AA;
}

.purpleBk.darker {
 	background-color:				#6644AA;
}

.pinkBk.darker {
 	background-color:				#AA44AA;
}

.coralBk.darker {
 	background-color:				#AA4466;
}



/*

    Mouseover Colours

    ============================================================================
*/

.redHv {
    background-color:				#DD6666;
}

.orangeHv {
    background-color:				#DD8866;
}

.yellowHv {
 	background-color:				#DDDD66;
}

.chartreuseHv {
 	background-color:				#88DD66;
}

.greenHv {
 	background-color:				#66DD66;
}

.darkGreenHv {
 	background-color:				#44AA44;
}

.mintHv {
 	background-color:				#66DD88;
}

.cyanHv {
 	background-color:				#66DDDD;
}

.skyHv {
 	background-color:				#6688DD;
}

.blueHv {
 	background-color:				#6666DD;
}

.purpleHv {
 	background-color:				#8866DD;
}

.pinkHv {
 	background-color:				#DD66DD;
}

.coralHv {
 	background-color:				#DD6688;
}

.greyHv {
    background-color:              #333333;
}






.redHv:hover {
 	background-color:				#FF8888;
}

.orangeHv:hover {
 	background-color:				#FFAA88;
}

.yellowHv:hover {
 	background-color:				#FFFF88;
}

.chartreuseHv:hover {
 	background-color:				#AAFF88;
}

.greenHv:hover {
 	background-color:				#88FF88;
}

.darkGreenHv:hover {
    background-color:               #66DD66;
}

.mintHv:hover {
 	background-color:				#88FFAA;
}

.cyanHv:hover {
 	background-color:				#88FFFF;
}

.skyHv:hover {
 	background-color:				#88AAFF;
}

.blueHv:hover {
 	background-color:				#8888FF;
}

.purpleHv:hover {
 	background-color:				#AA88FF;
}

.pinkHv:hover {
 	background-color:				#FF88FF;
}

.coralHv:hover {
 	background-color:				#FF88AA;
}

.greyHv:hover {
    background-color:              #555555;
}

/*

    Borders

    ============================================================================
*/

.redBorder {
	border:					5px solid #FF8888;
}

.orangeBorder {
	border:					5px solid #FFAA88;
}

.yellowBorder {
	border:					5px solid #FFFF88;
}

.chartreuseBorder {
	border:					5px solid #AAFF88;
}

.greenBorder {
	border:					5px solid #88FF88;
}

.mintBorder {
	border:					5px solid #88FFAA;
}

.cyanBorder {
	border:					5px solid #88FFFF;
}

.skyBorder {
	border:					5px solid #88AAFF;
}

.blueBorder {
	border:					5px solid #8888FF;
}

.purpleBorder {
	border:					5px solid #AA88FF;
}

.pinkBorder {
	border:					5px solid #FF88FF;
}

.coralBorder {
	border:					5px solid #FF88AA;
}




.redBdr {
	border:					2px solid #FF8888;
}

.orangeBdr {
	border:					2px solid #FFAA88;
}

.yellowBdr {
	border:					2px solid #FFFF88;
}

.chartreuseBdr {
	border:					2px solid #AAFF88;
}

.greenBdr {
	border:					2px solid #88FF88;
}

.mintBdr {
	border:					2px solid #88FFAA;
}

.cyanBdr {
	border:					2px solid #88FFFF;
}

.skyBdr {
	border:					2px solid #88AAFF;
}

.blueBdr {
	border:					2px solid #8888FF;
}

.purpleBdr {
	border:					2px solid #AA88FF;
}

.pinkBdr {
	border:					2px solid #FF88FF;
}

.coralBdr {
	border:					2px solid #FF88AA;
}



/*

    Border Tops

    ============================================================================
*/

.redTop {
	border-top:					5px solid #FF8888;
}

.orangeTop {
	border-top:					5px solid #FFAA88;
}

.yellowTop {
	border-top:					5px solid #FFFF88;
}

.chartreuseTop {
	border-top:					5px solid #AAFF88;
}

.greenTop {
	border-top:					5px solid #88FF88;
}

.mintTop {
	border-top:					5px solid #88FFAA;
}

.cyanTop {
	border-top:					5px solid #88FFFF;
}

.skyTop {
	border-top:					5px solid #88AAFF;
}

.blueTop {
	border-top:					5px solid #8888FF;
}

.purpleTop {
	border-top:					5px solid #AA88FF;
}

.pinkTop {
	border-top:					5px solid #FF88FF;
}

.coralTop {
	border-top:					5px solid #FF88AA;
}


/*

    Scroll Bars

    ============================================================================
*/

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #444444;
}

/* Handle */
::-webkit-scrollbar-thumb {
    /*background: #DD6666;
    border: 2px solid #DD6666;*/
    background: #555555;
}

/* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
    /*background: #FF8888;*/
    background: #666666;
}