@charset "utf-8";
html, body 
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: black;
    font-family: 'Open Sans', sans-serif;
} 

#startUpImageTable
{
	width: 100%;
	height: 100%;
}

#startUpImageTable #startUpImage
{
	display: none; /* initial value */
}

#startUpImageTable #startUpLabel
{
	color: #444444;
	font-size: 20px;
	font-weight: bold;
}

#thorMobileContainer
{
	width: 100%;
	height: 100%;
	display: none; /* initial value */
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer
{
	width: 100%;
	height: 100%;
	display: none;
    text-align: center;
}

#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer
{
	width: 100%;
	height: 100%;
	display: none;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #displayNameTimeStampBg
{
	width: 100%;
	height: 6%;
	color: #00FFFF;
	background: #555; /* for non-css3 browsers */
	text-shadow: 1px 1px #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}


#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxdisplayNameTimeStampBg
{
	width: 100%;
	height: 6%;
	color: #00FFFF;
	background: #555; /* for non-css3 browsers */
	text-shadow: 1px 1px #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}


#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #detailsContainer
{
	width: 100%;
	height: 3%;
	color: #00FFFF;
	background: #555; /* for non-css3 browsers */
	text-shadow: 1px 1px #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}

#thorMobileContainer #radarDisplayContainer #thorBox #wxDisplayContainer #wxdetailsContainer
{
	width: 100%;
	height: 6%;
	color: #00FFFF;
	background: #555; /* for non-css3 browsers */
	text-shadow: 1px 1px #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #displayNameTimeStampTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #displayNameTimeStampBg #displayNameTimeStampTable #displayNameLabel
{
	color: Yellow;
	font-weight: bold;
}
#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxdisplayNameTimeStampTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}

#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxdisplayNameTimeStampBg #wxdisplayNameTimeStampTable #wxdisplayNameLabel
{
	color: Yellow;
	font-weight: bold;
}

#detailsLabel
{
	color: Yellow;
	font-weight: bold;
}

#detailsTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}

#wxdetailsLabel
{
	color: Yellow;
	font-weight: bold;
}

#wxdetailsTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}


#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #displayNameTimeStampBg #displayNameTimeStampTable #timeStampLabel
{
	cursor: pointer;
	display: none;
	color: #CCC;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #displayNameTimeStampBg #displayNameTimeStampTable #liveStatusLabel
{
	cursor: pointer;
	color: #CCC;
}
#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxdisplayNameTimeStampBg #wxdisplayNameTimeStampTable #wxtimeStampLabel
{
	cursor: pointer;
	display: none;
	color: #CCC;
}

#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxdisplayNameTimeStampBg #wxdisplayNameTimeStampTable #wxliveStatusLabel
{
	cursor: pointer;
	color: #CCC;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #energyBarContainer
{
	width: 100%;
	height: 1%;
}
#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #energyBarContainer2
{
	width: 100%;
	height: 1%;
}
#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #energyBarContainer3
{
	width: 100%;
	height: 1%;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #energyBarContainer img
{
	width: 0%; /* initial value */
	height: 100%;
	vertical-align: bottom;
}
#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #energyBarContainer2 img
{
	width: 0%; /* initial value */
	height: 100%;
	vertical-align: bottom;
}
#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #energyBarContainer3 img
{
	width: 0%; /* initial value */
	height: 100%;
	vertical-align: bottom;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #thorStatusDisplayBg
{
	width: 100%;
	height: 40%;
}

#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxStatusDisplayBg
{
	width: 100%;
	height: 20%;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #thorStatusDisplayBg #thorStatusDisplayTimeStatus
{
	width: 100%;
	height: 10%;
}
#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxStatusDisplayBg #wxStatusDisplayTimeStatus
{
	width: 100%;
	height: 10%;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #thorStatusDisplayBg #thorStatusDisplayTable
{
	width: 100%;
	height: 80%;
	font-size: 90px;
}
#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxStatusDisplayBg #wxStatusDisplayTable
{
	width: 100%;
	height: 80%;
	font-size: 90px;
}

#thorMobileContainer #radarDisplayContainer #thorBox #thorDisplayContainer #thorStatusDisplayBg #thorStatusDisplayTimeLabel
{
	width: 100%;
	height: 10%;
}
#thorMobileContainer #radarDisplayContainer #weatherBox #wxDisplayContainer #wxStatusDisplayBg #wxStatusDisplayTimeLabel
{
	width: 100%;
	height: 10%;
}

#lightningDistBox {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  height: 22.5%;
} 

#thorMobileContainer #radarDisplayContainer
{
	width: 100%;
	height: 100%;
	display: none; /* initial setting */
}

#thorMobileContainer #radarDisplayContainer #map_canvas
{
	width: 100%;
	height: 100%;
	float: right;
	border: #000 1px;
}

#thorMobileContainer #radarDisplayContainer #thorBox
{
	width: 20%;
	height: 100%;
	display: inline-block;
	overflow: hidden;
	border: #000 1px;
	background: rgba(0,0,0,.67);
}

#thorMobileContainer #radarDisplayContainer #weatherBox
{
	width: 20%;
	height: 100%;
	display: inline-block;
	overflow: hidden;
	border: #000 1px;
	background: rgba(0,0,0,.67);
}


#thorMobileContainer #radarDisplayContainer #bottomBar #hourCast
{
	display: none;
}
#thorMobileContainer #radarDisplayContainer #bottomBar
{
	height: 12.5%;
	width: 60%;
	background: rgba(0,0,0,.67);
	vertical-align: middle;
	color: #EEE;
	text-shadow: 1px 1px #000;
	text-align: center;
	padding-top: 5px;
}
#thorMobileContainer #radarDisplayContainer #bottomBar #tgLegend
{
	display: none;
	vertical-align: top;
}
#thorMobileContainer #radarDisplayContainer #bottomBar #wxLegend
{
	display: none;
	vertical-align: top;
}
.hourCastBoxes
{
	width: 13%;
	display: inline-block;
	padding-left: 1%;
	padding-right: 1%;
	vertical-align: top;
}
.legendBoxes
{
	width: 26%;
	display: inline-block;
	padding-left: 1%;
	padding-right: 1%;
	vertical-align: top;
}
.bottomTitles
{
	writing-mode: vertical-rl;
	text-orientation: upright;
	width: 13%;
	display: inline-block;
	vertical-align: top;
	padding-left: 1%;
	padding-right: 1%;
}

#thorMobileContainer #radarDisplayContainer #tg360Header
{
	display: none;
	height: 12.5%;
	width: 60%;
	background: rgba(0,0,0,.67);
	vertical-align: middle;
	color: #EEE;
	text-shadow: 1px 1px #000;
}

#thorMobileContainer #radarDisplayContainer #tg360Header #tgLogo
{
	width: 33%;
	display: inline-block;
	text-align: center;
}
#thorMobileContainer #radarDisplayContainer #tg360Header #viewControls
{
	width: 33%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin: 0;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
#thorMobileContainer #radarDisplayContainer #tg360Header #viewControls img
{
	width: 36px;
	height: 36px;
	cursor: pointer;
	padding: 4px;
}
#thorMobileContainer #radarDisplayContainer #tg360Header #radarTime
{
	width: 33%;
	display: inline-block;
	text-align: center;
	margin: 0;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-weight: bold;
	font-size: 16px;
	vertical-align: middle;
}

#forceTableDiv
{
	width: 40%;
	height: 22.5%;
	border-top: solid 1px Black;
	color: white;
	text-shadow: 1px 1px #000;
	float:left;
}

#forceTableDiv #forceTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}
#wxTempTableDiv
{
	width: 50%;
	height: 15%;
	border-top: solid 1px Black;
	color: white;
	text-shadow: 1px 1px #000;
	float:left;
}

#wxTempTableDiv #wxTempTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}
#wxHeatTableDiv
{
	width: 50%;
	height: 15%;
	border-top: solid 1px Black;
	color: white;
	text-shadow: 1px 1px #000;
	float:left;
}

#wxHeatTableDiv #wxHeatTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}
#lightningTableDiv
{
	width: 60%;
	height: 22.5%;
	border-top: solid 1px Black;
	color: white;
	text-shadow: 1px 1px #000;
	float: right;
}

#lightningTableDiv #lightningTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}
#windTableDiv
{
	width: 100%;
	color: white;
	text-shadow: 1px 1px #000;
	float: right;
}

#windTableDiv #windTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}
#wxTableDiv
{
	width: 100%;
	height: 20%;
	color: white;
	text-shadow: 1px 1px #000;
}

#wxTableDiv #wxTable
{
	width: 100%;
	height: 100%;
	font-size: 20px;
}

#thorMobileContainer #radarDisplayContainer #viewControlsContainer #radarTableBg
{
	width: 100%;
	height: 7%;
	color: #DDD;
	text-shadow: 1px 1px #000;
}

#thorMobileContainer #radarDisplayContainer #viewControlsContainer #radarTableBg #radarTable
{
	width: 100%;
	height: 100%;
}

#thorMobileContainer #radarDisplayContainer #viewControlsContainer #radarTableBg #radarTable .tbody .tr .td
{
	width: 100%;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
}

#thorMobileContainer #radarDisplayContainer #viewControlsContainer #radarTableBg #radarTable .tbody .tr .td .header
{
	text-decoration: underline;
}

#thorMobileContainer #radarDisplayContainer #viewControlsContainer #radarTableBg #radarTable .tbody .tr .td .value
{
	padding-left: 0px;
}

.table
{
	display: table;
	text-align: center;
}

.table .tbody
{
	display: table-row-group;
}

.table .tbody .tr
{
	display: table-row;
}
.table .tbody .tr5
{
	vertical-align: middle;
	display: table-row;
	height: 5%;
}
.table .tbody .tr2
{
	vertical-align: middle;
	display: table-row;
	height: 2%;
}
.table .tbody .tr30
{
	vertical-align: middle;
	display: table-cell;
	height: 100%;
}
.table .tbody .tr30w
{
	display: table-cell;
	height: 100%;
}

.table .tbody .tr .td
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.table .tbody .tr .tdb
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.table .tbody .tr .tdfl
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.table .tbody .tr .tdflv
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	height: 150px;
}
.table .tbody .tr .tdflw
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.table .tbody .tr .tdl
{
	display: table-cell;
	vertical-align: top;
	text-align: left;
}

.table .tbody .tr .tdr
{
	display: table-cell;
	vertical-align: top;
	text-align: right;
}

.bicubic
{
	-ms-interpolation-mode: bicubic;
}

.tgTime
{
	color: #333;
	font-size: 12px;
	text-align: center;
	left: 50%;
	text-shadow: none;
	vertical-align: middle;
}
.tgContactLabeling
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.blue_gradient
{
	padding: 0px;
	display: table;
	height: 33%;
	width: 100%;
}

.blue_gradient_long
{
	padding: 0px;
	display: table;
	height: 33%;
	width: 100%;
}

.grey_gradient
{	
	color: #FFFF00;
	text-shadow: 1px 1px #000;
	text-align: center;
	width: 80%;
	border: 1px solid #000;
	background: #666; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888', endColorstr='#222'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#222)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #888,  #222); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #888, #222); /* for IE 10+ */
}

.gradient_title
{	
	width: 33%;
	height: 6%;
	color: Yellow;
	background: #555; /* for non-css3 browsers */
	text-shadow: 1px 1px #000;
	border-bottom: 1px solid #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}

.hourcast_gradient
{	
	text-shadow: 1px 1px #000;
	text-align: center;
	height: 5%;
	width: 100%;
	color: #FFFF00;
	background: #333; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}

.hourcast_gradient_long
{	
	text-shadow: 1px 1px #000;
	text-align: center;
	height: 5%;
	width: 100%;
	color: #FFFF00;
	background: #333; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #888); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #222, #888); /* for IE 10+ */
}

.lightningLabels
{
	color: #FFF;
	text-shadow: 1px 1px #000000;
	text-align: left;
	vertical-align:middle;
}
.lightningValues
{
	color: #CCCCCC;
	text-shadow: 1px 1px #000000;
	text-align: left;
	vertical-align:middle;
}
.lightningValuesWhite
{
	color: #FFF;
	text-shadow: 1px 1px #000000;
	text-align: left;
	vertical-align:middle;
}

.lightningSubLabels
{
	color: #999;
	text-shadow: 1px 1px #000000;
	text-align: left;
	vertical-align:middle;
}

.wxSubLabels
{
	color: #999;
	text-shadow: 1px 1px #000000;
	text-align: left;
	vertical-align:top;
}

.tempText
{
	color: #FFFFFF;
	text-shadow: 1px 1px #000000;
	text-align: center;
}

.wxText
{
	color: #CCCCCC;
	text-shadow: 1px 1px #000000;
	text-align: center;
}

.wBoxes
{
	width: 20%;
	height: 80%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.dText
{
	color: #FFF;
	text-shadow: 1px 1px #000000;
	text-align: left;
}

.dBoxes
{
	width: 25%;
	height: 20%;
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}
.vBoxes
{
	width: 25%;
	height: 20%;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}

.labelText
{
	color: Yellow;
	font-weight: bold;
	text-align: center;
}
.wlabelText
{
	color: #CCC;
	font-weight: bold;
	text-align: center;
}
.plabelText
{
	color: #999;
	font-weight: bold;
	text-align: center;
}
.labelTextGreyBig
{
	color: #CCC;
	font-weight: bold;
	text-align: center;
}
.labelTextGreenBig
{
	color: #00FF00;
	font-weight: bold;
	text-align: center;
}
.labelTextGreen2Big
{
	color: #00CC00;
	font-weight: bold;
	text-align: center;
}
.labelTextGrey
{
	color: #CCC;
	text-align: center;
}
.labelTextGreen
{
	color: #00FF00;
	text-align: center;
}
.labelTextGreen2
{
	color: #00CC00;
	text-align: center;
}
.labelTextWhiteBig
{
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
.labelTextWhite
{
	color: #FFF;
	text-align: center;
}
.labelTextYellowBig
{
	color: #FFFF00;
	font-weight: bold;
	text-align: center;
}
.labelTextBlackBig
{
	color: #333333;
	font-weight: bold;
	text-align: center;
}
.labelTextYellow
{
	color: #FFFF00;
	text-align: center;
}
.labelTextBlack
{
	color: #333333;
	text-align: center;
}
.labelTextOrangeBig
{
	color: #FF6600;
	font-weight: bold;
	text-align: center;
}
.labelTextOrange
{
	color: #FF6600;
	font-weight: bold
	text-align: center;
}
.labelTextRedBig
{
	color: #FF0000;
	font-weight: bold;
	text-align: center;
}
.labelTextRed
{
	color: #FF0000;
	font-weight: bold
	text-align: center;
}
.labelTextDim
{
	color: #CCC;
	font-weight: bold;
}

.tg_loading_status1
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #666; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#666'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#666)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #444,  #666); /* for firefox 3.6+ */ 
	background-image: linear-gradient(to bottom, #444, #666); /* for IE 10+ */
}

.tg_loading_status2
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #777; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666', endColorstr='#888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#888)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #666,  #888); /* for firefox 3.6+ */ 
	background-image: linear-gradient(to bottom, #666, #888); /* for IE 10+ */
}

.tg_allclear_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #00FF00; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#006600'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#006600)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #00FF00,  #006600); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #00FF00, #006600); /* for IE 10+ */
}

.tg_allclear_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #00CC00; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC00', endColorstr='#003300'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#00CC00), to(#003300)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #00CC00,  #003300); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #00CC00, #003300); /* for IE 10+ */
}

.tg_caution_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #FFFFFF; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#666666'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#666666)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FFFFFF,  #666666); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #FFF, #666); /* for IE 10+ */
}

.tg_caution_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #CCCCCC; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#333333'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#333333)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #CCCCCC,  #333333); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #CCC, #333); /* for IE 10+ */
}

.tg_warning_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #FFFF00; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF00', endColorstr='#666600'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFF00), to(#666600)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FFFF00,  #666600); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #FFFF00, #666600); /* for IE 10+ */
}

.tg_warning_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #CCCC00; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCC00', endColorstr='#333300'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#CCCC00), to(#333300)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #CCCC00,  #333300); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #CCCC00, #333300); /* for IE 10+ */
}

.tg_redalert_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #FF0000; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#660000'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#660000)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FF0000,  #660000); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #FF0000, #660000); /* for IE 10+ */
}

.tg_redalert_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #CC0000; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CC0000', endColorstr='#330000'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#CC0000), to(#330000)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #CC0000,  #330000); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #CC0000, #330000); /* for IE 10+ */
}

.tg_failure_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #FFCC00; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFCC00', endColorstr='#FF6600'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFCC00), to(#FF6600)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FFCC00,  #FF6600); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #FFCC00, #FF6600); /* for IE 10+ */
}

.tg_failure_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #FF6600; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6600', endColorstr='#FFCC00'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#FF6600), to(#FFCC00)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FF6600,  #FFCC00); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #FF6600, #FFCC00); /* for IE 10+ */
}

.tg_orange_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #00FFFF; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#006666'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#006666)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #00FFFF,  #006666); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #00FFFF, #006666); /* for IE 10+ */
}

.tg_orange_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #00CCCC; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CCCC', endColorstr='#003333'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#00CCCC), to(#003333)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #00CCCC,  #003333); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #00CCCC, #003333); /* for IE 10+ */
}

.tg_emergency_status1 
{
	color: rgba(255,255,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #333333; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#000'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #222,  #000); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #333, #000); /* for IE 10+ */
}

.tg_emergency_status2 
{
	color: rgba(255,255,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #666666; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#222'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #444,  #222); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #444, #222); /* for IE 10+ */
}

.tg_dataold_status1 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #0000FF; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000FF', endColorstr='#000066'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#0000FF), to(#000066)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #0000FF,  #000066); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #0000FF, #000066); /* for IE 10+ */
}

.tg_dataold_status2 
{
	color: rgba(0,0,0,0.6);
    text-shadow: 3px 3px 3px rgba(255,255,255,0.2);
	background: #0000CC; /* for non-css3 browsers */	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000CC', endColorstr='#000033'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#0000CC), to(#000033)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #0000CC,  #000033); /* for firefox 3.6+ */  
	background-image: linear-gradient(to bottom, #0000CC, #000033); /* for IE 10+ */
}

.flip_up
{
    transform:scale(1,1);
    transition:all 1ms ease; 
}

.flip_up[flip_down]
{
    transform:scale(1,-1);
}

.graphContainer {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
}

.graphPlaceholder {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}
#windArrow{
	position: relative;
	align-items : center;
	justify-content: center;
	width: 100%;
	height: 150px;
	vertical-align: middle;
}
#arrowPointer {
	height: 150px;
	width: 150px;
	position: absolute;
	top: 0px;
	display: none;
}

#windText {
	display : flex;
	align-items : center;
	justify-content: center;
	text-align: center;
	width: 30%;
	float: left;
	height: 150px;
	top: 25%;
}
#windSpeedText {
	display : flex;
	align-items : center;
	justify-content: center;
	text-align: right;
	width: 35%;
	float: left;
	height: 150px;
	top: 25%;
}
#windGustText {
    display : flex;
	align-items : center;
	justify-content: center;
	text-align: left;
	width: 35%;
	float: left;
	height: 150px;
	top: 25%;
}