/* Dynamic Art and Text  
 * last update: August 2017
 * DO NOT CHANGE ANY CLASS NAMES */

/* ====== TEXT colours  - CHANGE Hex values only  */
.col-main     {	color: #000066;}
.col-contrast  { color: #333399;  }
.col-difference { 	color: #006666; }
.col-liftText    { color: #669; }
.col-downplay {color:#bbb;}
.col-darker { color: #930}
.col-bright {color:#E96907;}

/* Best NOT to mess with the following */
.color-black {color: #000000;}
.color-white {color: #FFFFFF;}
.color-alert {color: #DD0000; } /* fireman red */


/* ====== CELL background colours  - CHANGE Hex values only  */
.cellDark {	background-color: #eee5ee;}
.cellLight { background-color: #EEEEEE;}
.cellContrast {	background-color: #5C738A;	}
.cellDifference { color: #99CCFF;	padding: 5px;	background-color: #336699;}
/* Best NOT to mess with the following */
.cellBlack {	background-color: #000;}
.cellWhite { background-color: #FFF;}


/* ===== REDEFINE elements ==== */
.subHead-small { font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; line-height:1;}
.subHead-medium { font-family: Helvetica, Arial, sans-serif; font-size: 1.5em;  line-height:1;}
.subHead-large { font-family: Helvetica, Arial, sans-serif; font-size: 1.75em;  line-height:1;}
.userNavBar  /*horizontal - refer imported CSS */{ margin-top: 5px; clear: both; }
.userNavBar p { color: #FC0; text-align:center; }

/* ===== BOXES - use with DIVs
 * put floating boxes inside DIV-class "frameCenter" */
.box150 { float:left; height:250px; width:250px; padding:10px 5px; margin:20px 7px; box-sizing: border-box; border-right: none; }
/*.box150 p {color:#fff; }*/
.clearUserFloats {clear: both;}

/* ===== INDENTS, Alignments and Padding ==== */
.indent-10 {margin-left:10px;}
.indent-20 {margin-left:20px;}
.indent-40 {margin-left:40px;}
.indent-60 {margin-left:60px;}

.alignC {text-align:center; }
.alignL {text-align:left; }
.alignR {text-align:right; }
.alignJ {text-align:justify; }
.nopadTop {padding-top:0px;}

.padright {padding-right:6px;}
.padleft {padding-left:5px;}
.padtop {padding-top:60px}
.padbottom {padding-bottom:30px}

/** FONT-SIZE ===== LEAVE THESE AS THEY ARE...
 * browsers by default set font size at 16px (aka REM "root EM" equiv to 12pt type when printed) */
.leading-0 {line-height:.9;}

/* ----- REM sizing ------------ */
.rem-08 { font-size: .5rem;  line-height: 1.4;}
.rem-09 { font-size: .5625rem;  line-height: 1.4;}
.rem-10 { font-size: .625rem;  line-height: 1.4;}
.rem-11 { font-size: .6875rem;  }
.rem-12 { font-size: .75rem;  }
.rem-13 { font-size: .8125rem;  }
.rem-14 { font-size: .875rem;  }
.rem-15 { font-size: .9375rem; }
.rem-16 { font-size: 1rem;  }
.rem-18 { font-size: 1.125rem;  }
.rem-20 { font-size: 1.25rem; }
.rem-22 { font-size: 1.375rem;}
.rem-24 { font-size: 1.5rem;}
.rem-28 { font-size: 1.75rem;}
.rem-32 { font-size: 2rem;}
.rem-36 { font-size: 2.25rem;}
.rem-40 { font-size: 2.5rem;}
.rem-48 { font-size: 3rem;}
.rem-56 { font-size: 3.5rem;}

/*  ----- % of EM sizing ------------ */
.perc50 { font-size:50%;} /* 6pt */
.perc58 { font-size: 58%;} /* 7pt */
.perc625 { font-size: 62.5%;} /* 7.5pt */
.perc67 { font-size: 67%;} /* 8pt */
.perc75 { font-size: 75%;} /* 9pt */
.perc83 { font-size: 83%;} /* 10pt */
.perc875 { font-size: 87.5%;} /* 10.5pt */
.perc92 { font-size: 92%;} /* 11pt */
/* 100% = 1em = 16px = 12pt */
.perc108 { font-size: 108%;} /* 13pt */
.perc116 { font-size: 116%;} /* 14pt */
.perc125 { font-size: 125%;} /* 15pt */
.perc133 { font-size: 133%;} /* 16pt */
.perc150 { font-size: 150%;} /* 18pt */
.perc175 { font-size: 175%;} /* 21pt */
.perc200 { font-size: 200%;} /* 24pt */
.perc225 { font-size: 225%;} /* 27pt */
.perc250 { font-size: 250%;} /* 30pt */
.perc300 { font-size: 300%;} /* 36pt */
.perc350 { font-size: 350%;} /* 42pt */