/* A script in the HTML will change this to black if scripting is enabled. 
That means this is the color of the "no script" page. To change the color 
of the actual weather display page, set the ".bodyBackground" class color below */
body {background-color:#FFFFFF;} 

/* No HTML page elements have these styles. Styles exist only so scripts can 
read and apply the colors (making CSS the only place you need to define colors). */
.bodyBackground  {color:#000000;} /* Once we receive data, the body background will be changed to this color via script. */
.ghostData {color:#202020;} /* The almost invisible text used in place of empty data fields */
.windBackground {color:#000000;} /* Outer color of wind dial */
.windHighlight {color:#0000C0;} /* The center of the wind dial */
.windGridLine {color:#0000FF;} /* The outer circle and degree ticks */
.windRunway {color:#808080;} /* Color of the runway */
.windRunwayText {color:#C0C0C0;} /* Color of the runway numbers */
.windSpanArc {color:#00FF00;} /* Color of the wind span arc (if the AWOS Net sends wind span data) */
.windVariableArc {color:#FFFF00;} /* Color of the variable wind arc (if the AWOS Net reports variable winds) */
.windText {color:#FFFF00;} /* The wind pointer and speed/direction text */

/* The splash screen defaults to display:block but is set 
by script to display:none as soon as data arrives */
.splash {display:block; font-size:20px; text-align:center; color:#C0C0C0;}

/* The "extra" items will be set to display:none or display:block for 
each element based on whether needed RMM data is received. */
.extraSection {display:none; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid;}
.extraFrame {color:#808080;}
.extraTextBox {text-align:left;}
.extraLabel {font-size:75%; font-family:Arial, Sans-serif; font-weight:normal; color:#008000; text-align:left; padding-left:10px;}
.extraData {font-size:75%; font-family:Arial, Sans-serif; font-weight:bold; color:#909000; text-align:left; padding-left:10px;}
.helpText {font-size:75%; font-family:Arial, Sans-serif; font-weight:bold; color:#909000; text-align:left; padding-left:0px;}

/* Everything below here is set to display:none, but will 
be display:block when weather data arrives */
.dataColumns {display:none; text-align:center; column-fill:balance; /* balance or auto */ -webkit-column-width:300px; column-width:300px; -webkit-column-count:5; column-count:5;} /* Chrome won't display more than three columns. */
.topRowData {display:none; font-size:200%; font-family:Arial, Sans-serif; font-weight:bold; color:#9090FF;}
.stayTogether {display:none; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid;}
.weatherLabel {display:none; text-align:center; font-size:100%; font-family:Arial, Sans-serif; font-weight:normal; color:#00A000; padding-bottom:2px;}
.weatherData {display:none; text-align:center; font-size:200%; font-family:Arial, Sans-serif; font-weight:bold; color:#FFFF00; padding-bottom:10px;}
.metarData {display:none; font-size:150%; font-family:Arial, Sans-serif; font-weight:bold; color:#FFFF00;}
.separators {display:none; color:#808080;}
.phoneNumber {display:none; font-size:75%; font-family:Arial, Sans-serif; font-weight:normal; color:#CCCCCC;}