/* ********* FONTS *******/


/* ***********************  BODY ***************/

body {
	background-color: #606060;
	margin: 0;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	overflow:hidden;/*to fix issue with dash being wider than page on firefox - because of different handling of client width?*/
}
/****** mobile redirect */
@media screen and (min-width: 0px) and (max-width: 900px) {
  #mobileredirect {
		display: block;
		position:absolute;
		top: 0px;
		left: 0px;
		width:100%;
		background-color:#0F1A21;
		color:#FFF;
		text-align:center;
		z-index:200;
	}  /* show it on small screens */
  #mobileredirectcont {
	  position:relative;
		top:33%;
		left:0;
		padding:30px;
	}
}

/****************************  HEADER   ******************************************************8*/
#header {
	background-color: #0F1A21;
	height: 45px;
	width: 100%;
	border-bottom: 6px solid #0088FF;
	font-size: 15px;
}

#title_top{
	width:20%;
	height:45px;
	position:absolute;
	top:0px;
	left:2px;
}
#title a{
  color:#E6E6E6;
  text-decoration-line:none;
}
#title a:link{
  color:#E6E6E6;
  text-decoration-line:none;
}
#title_top_image{
	height:43px;
  width:43px;
	position:absolute;
	top:1px;
	left:1px;
	text-align:center;
}
#title_top_main{
	height:35px;
	position:absolute;
	top:0px;
	left:58px;
  width:calc(100% - 58px);
	font-size:27px;
	line-height:35px;
  color:#E6E6E6;
}
#title_top_under{
	height:10px;
	position:absolute;
	top:33px;
	left:60px;
  width:calc(100% - 60px);
	font-size:10px;
	line-height:10px;
}
#title_bottom{
	width:100%;
	height:43px;
	position:absolute;
	top:51px;
	left:0px;
}

#openabout {
	position: absolute;
	top: 14px;
	right: 55px;
	cursor:pointer;
}
#openmob {
	position: absolute;
	top: 14px;
	right: 15px;
	cursor:pointer;
}
#opensupport {
	position: absolute;
	top: 14px;
	right: 110px;
}
#openwxcharts {
	position: absolute;
	top: 14px;
	right: 110px;
}
/* BURGER */
#burger{ /*this is slightly narrower than the other selection divs as it has no right border */
	position:absolute;
	left:5px;
	top:51px;
	width:40px;
	height:45px;
	cursor:pointer;
	z-index:100;
	background-color:#253C48;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.burger-bun-top,
.burger-bun-bot,
.burger-filling {
  position: absolute;
  display: block;
  height: 3px;
  width: 24px;
	left:8px;
  background:	#C2C2C2;
}

.burger-bun-top {
  top: 15px;
}
.burger-bun-bot {
  bottom: 15px;
}
.burger-filling {
  top: 21px;
}
/*  ********** MAP CONTAINER ***********/
		#map-containter{
			position: relative;
		}

		#map_canvas{
			width: 100%;
		}


		#anni{
			position:absolute;
			top: 8px;
			height: 20px;
      left:310px;
		}
    .anniHour{
      position:relative;
      float:left;
      height:100%;
      width:45px;
      background-color: #0F1A21;
      border:2px solid #253C48;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px; /* future proofing */
      color:#E6E6E6;
      text-align:center;
      margin:2px;
      cursor:pointer;
      font-size:13px;
      line-height:20px;

    }
    .anniHour:hover{
      background-color:#e0e0e0;
      color:#0F1A21;
      font-weight:bold;
    }
    .anniHourSelected{
      border:2px solid #ffff00;
      color:#ffff00;
    }
    .anniTimeStamp{
      width:250px;
      height:20px;
      cursor:default;
    }
    .anniTimeStamp:hover{
      background-color: #0F1A21;
      color:#E6E6E6;
      font-weight:normal;
    }

		/* ********* mapleft *********** */

		#mapleft {
			position: absolute;
			top: 51px; /*height of header + header border and canvas top border*/
			left: 0;
			width: 300px;
			/*background-color: #0F1A21*/;
			border-right: 2px solid #000000;
			visibility:visible;
			padding:0;
			margin:0;
			min-height:400px;
		}
		#markersel,#searchsel,#toptensel,#settingssel{
			position:relative;
			float:right;
			width:59px;
			height:45px;
			cursor:pointer;
			border-left: 3px solid #000000;
		}
		#burger-container{ /*this is slightly narrower than the other selection divs as it has no right border */
			position:relative;
			float:right;
			width:52px;
			height:45px;
			cursor:pointer;
		}
		#toptenimg{
			position: relative;
			top:8px;
			left:	17px;
			height:30px;
			width:30px;
		}
		#searchimg{
			position: relative;
			top:10px;
			left:	16px;
			height:30px;
			width:30px;
		}
		#markerimg{
			position: relative;
			top:7px;
			left:	16px;
			height:32px;
			width:30px;
		}
		#settingsimg{
			position: relative;
			top:7px;
			left:	16px;
			height:30px;
			width:30px;
		}
		.toptenimgactive{
			background:#0F1A21 url(../images/list_white.png) no-repeat center;
		}
		.toptenimgpassive{
			background: #253C48 url(../images/list_grey.png) no-repeat center;
		}
		.searchimgactive{
			background:#0F1A21 url(../images/search_white.png) no-repeat center;
		}
		.searchimgpassive{
			background: #253C48 url(../images/search_grey.png) no-repeat center;
		}
		.settingsimgactive{
			background:#0F1A21 url(../images/settings_white.png) no-repeat center;
		}
		.settingsimgpassive{
			background:#253C48 url(../images/settings_grey.png) no-repeat center;
		}
		.markerimgactive{
			background:#0F1A21 url(../images/marker_white.png) no-repeat center;
		}
		.markerimgpassive{
			background:#253C48 url(../images/marker_grey.png) no-repeat center;
		}
		.activecontrol{
			background-color: #0F1A21;
			border-bottom: 3px solid #0F1A21;
		}
		.passivecontrol{
			color: #0F1A21;
			background-color: #253C48;
			border-bottom: 3px solid #000000;
		}
		#marker,#search,#topten,#settings{
			position: absolute;
			width: 281px;
			top:48px;
			bottom:0px;
			background-color: #0F1A21;
			overflow-y:auto;
			padding:10px;
			opacity:0.95;

		}
		#addressholder{
			position: relative;
			top:5px;
		}
		#address{
			height:30px;
			width:268px;
			padding-left:10px;
			border:1px solid #0066CC;
			font-family:Tahoma;
			font-weight:bold;
			color:#000000;
			font-size:13px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px; /* future proofing */
		}
		#markernum {
			position: absolute;
			bottom: 0px;
			left: 0;
			height: 20px;
			width: 300px;
  		color:#E6E6E6;
			background-color: #0F1A21;
			border-right: 2px solid #000000;
			border-top: 3px solid #383838;
			text-align:center;
		}
		#mapad {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 0px;
			width: 300px;
			background-color: #0F1A21;
			border-right: 2px solid #000000;
			border-top: 3px solid #383838;
		}
		/* **************** hoverbox *********** */
		#hoverbox{
			background-color: #0F1A21;
			height: 20px;
			width:100px;
			cursor:default;
			color:#FFFFFF;
			position: absolute;
			opacity:0.8;
			text-align:center;
			font-size:13px;
			line-height:20px;
			z-index: 9;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px; /* future proofing */
			border: 2px solid #000000;
		}

		/* **************** infobox *********** */
		#infobox{
			width: 345px;
			background-color: #0F1A21;
			height: 350px;
			overflow-y:auto;
			cursor:default;
			color:#FFFFFF;
			position: absolute;
			z-index: 10;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px; /* future proofing */
			border: 2px solid #000000;
		}
		#infoboxheader{
			width: 345px;
			height: 78px;
			overflow:auto;
			position: absolute;
			z-index: 10;
			top:0;
			left:0;
		}
		#infoboxcontent{
			width: 345px;
			height: 250px;
			overflow:auto;
			position: absolute;
			z-index: 10;
			top:75px;
			left:0;
			background: url(../images/infoboxloader.gif) 50% no-repeat; /*got from http://www.ajaxload.info/ */
		}
		#infoboxfooter{
			width: 345px;
			height: 22px;
			position: absolute;
			z-index: 10;
			top:328px;
			left:0;
			color: #c2c2c2;
			background-color: #253C48;
			cursor:pointer;
			text-align:center;
		}
		#infoboxarrow{
			position: absolute;
			z-index: 10;
		}
		#about{
			width:500px;
			position: absolute;
			z-index: 10;
			top:51px;
			right:0;
			padding: 7px;
			color: #FFFFFF;
			background-color:#0F1A21;
			cursor:default;
			text-align:left;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 0 0 0 8px; /* future proofing */
			border: 2px solid #000000;
			overflow-y:auto;
		}
		#aboutclose{
			position: absolute;
			top:5px;
			right:10px;
			color:red;
		}


/* *************** END OF MAP CONTAINER *************** */
/*  ********** DASH CONTAINER ***********/
    #dash-container {
			width: 100%;
			background-color:#253C48;
		}

		/* ********* dashleft *********** */

		#dashleft {
			position: absolute;
			top: 51px; /*height of header + header border and canvas top border*/
			left: 0;
			width: 300px;
			/*background-color: #0F1A21*/;
			border-right: 2px solid #000000;
			visibility:visible;
			padding:0;
			margin:0;
		}
		#dashgraphsel{
			position:relative;
			float:left;
			width:197px;
			height:45px;
			cursor:pointer;
			border-left: 3px solid #000000;
		}
		#backsel{
			position:relative;
			float:left;
			width:100px;
			height:45px;
			cursor:pointer;
		}
		#dashgraphimg{
			position: absolute;
			top:4px;
			left:	20px;
			height:32px;
			width:30px;
		}
		#dashgraphtxt{
			position: absolute;
			top:9px;
			left:	65px;
			height:32px;
			width:30px;
			color:#FFFFFF;
			font-size:24px;
		}
		#dashbackimg{
			position: relative;
			top:2px;
			left:	30px;
			height:40px;
			width:40px;
			background-color:#253C48;
			background: url(../images/earth_grey.png);
			background-repeat: no-repeat;
		  background-position: center;
		}
		#dashgraph{
			position: absolute;
			width: 280px;
			top:48px;
			bottom:0px;
			background-color: #0F1A21;
			overflow-y:auto;
			padding:10px;
			opacity:0.95;

		}
		#dashaddressholder{
			position: relative;
			top:5px;
		}
		#dashaddress{
			height:30px;
			width:268px;
			padding-left:10px;
			border:1px solid #0066CC;
			font-family:Tahoma;
			font-weight:bold;
			color:#000000;
			font-size:13px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px; /* future proofing */
		}
		#dashad {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 0px;
			width: 300px;
			background-color: #0F1A21;
			border-right: 2px solid #000000;
			border-top: 3px solid #383838;
		}
		/* ********* dashright *********** */
    #dashright{
		position: absolute;
			background-color: #0F1A21;
			left:302px
		}
    #stat-cont{
			position:absolute;
			left:0;
			width:30%;
			height:40%;
			background-color: #0F1A21;
		}
			#stat{
				position:absolute;
				left:0;
				top:0;
				border-right: 3px solid #000000;
			}
				#statcontent{
					overflow-y:auto;
					height:0;
				}
    #text-cont{
			position:absolute;
			right:0;
			width:70%;
			height:40%;
			background-color: #0F1A21;
			padding-bottom:10px

		}
			#text{
				position:absolute;
				left:0;
				top:0;
			}
      #decodecontent{
				position:relative;
				top:0;
				height:150px;
				overflow:auto;
			}
    #graph-cont{
			position:absolute;
			left:0;
			top:40%;
			width:70%;
			height:60%;
			background-color: #0F1A21;
		}
    #graph{
			position:absolute;
			left:0;
			top:0;
			border-right: 3px solid #000000;
			border-top: 3px solid #000000;
		}
    #rose-cont{
			position:absolute;
			right:0;
			top:40%;
			width:30%;
			height:60%;
			background-color: #0F1A21;
		}
    #rose{
			position:absolute;
			right:0;
			top:0;
			border-top: 3px solid #000000;
		}
    #graphselect{
			position:absolute;
			left:6%;
			top:3%;
			z-index:10;
			border: 1px solid #0F1A21;
			height:20px;
		}

/* *************** END OF DASH CONTAINER *************** */
/* **************** Table ********************** */
table{
	color: #E6E6E6;
	text-align:left;
	table-layout:fixed;
	width:100%;
	background-color:#0F1A21;
	padding:0;
	margin:0;
	/*display: block*/;
  border-collapse:collapse;
}
table.dashselect{
	color: #E6E6E6;
	text-align:center;
	table-layout:fixed;
	width:60%;
	background-color:#0F1A21;
	margin-left:20%;
	margin-right:20%;
}
tr.dashselecttab{

}
tr.dashselecttab td{
	font-size:25px;
		line-height:25px;
	padding:5px;
	margin-top:10px;
	background-color:#253C48;
		border: 2px solid #000000;
}
tr.dashselecttab td:hover{
	color: #0088FF;
}
	th
{
  padding:0px;
  font-size:15px;
	line-height:20px;/*line height forces brosers to keep same spacing around fonts -otherwise they differ*/
  color:#FFFFFF;
  border-bottom: 1px solid #253C48;
  cursor:default;
}
td
{
  padding:0px;
  font-size:12px;
  margin:0;
	line-height:14px;
}
th.toptenleft{
	width:200px;
}
td.toptenright{
	width:80px;
	text-align:center;
	cursor:default;
}
th.toptenright{
	cursor:pointer;
	text-align:center;

}
td.contour{
	font-size:9px;
	padding-left:20px;
}
caption{
	caption-side:top;
  color:#FFFFFF;
	font-weight:bold;
}

tr.decode td{
  font-size:12px;
	text-align:center;
	min-width:500px;
}
td.vthin{

	min-width:100px;
}
td.thin{
	width:6%;
}
td.medwide{
	width:8%;
}
td.wide{
	width:10%;
}
td.vwide{
	width:18%;
}

tr.huge td,td.huge{
  font-size:28px;
	line-height:34px;
}
tr.shuge td,td.huge{
  font-size:24px;
	line-height:30px;
}
tr.vlarge td,td.vlarge{
  font-size:21px;
	line-height:25px;
}
tr.large td,td.large{
  font-size:17px;
	line-height:21px;
}
tr.med td,td.med{
  font-size:14px;
	line-height:19px;
}
tr.small td,td.small{
  font-size:12px;
	line-height:16px;
}
tr.vsmall td{
  font-size:10px;
	line-height:13px;
}
tr.tiny td,td.tiny{
  font-size:9px;
	line-height:11px;
	padding-top:1px;
}
tr.lrpad td{
	padding: 0 5px;
}
tr.left td,td.left{
  text-align:left;
}
tr.center td,td.center{
  text-align:center;
}
td.right{
  text-align:right;
}
tr.blueborder td{
	border-bottom: 6px solid #0088FF;
}
td.select{
  background-color: #0F1A21;
	border-bottom: 2px solid #0F1A21;
	padding: 3px;
	cursor:pointer;
}
td.unselect{
	color: #c2c2c2;
  background-color: #253C48;
  border-bottom: 2px solid #000000;
	padding: 3px;
	cursor:pointer;
}
td.borderleft{
	border-left: 2px solid #000000;
}
tr.borderbottom td,td.borderbottom{
	border-bottom: 1px solid #253C48;
}
tr.dashlink td{
	color: #c2c2c2;
  background-color: #253C48;
	cursor:pointer;
	border-top: 2px solid #000000;
}
tr.pad td{
	padding: 2px;
}
tr.bpad td{
	padding-bottom: 4px;
}
td.close{
	height:25px;
	width:20px;
	color:red;
	font-weight:bold;
	cursor:pointer;
}
tr.metar td{
	height: 50px;
}
tr.taf td{
	height: 152px;
}
td.red {
	color:red;
}

/* **************** CLASSES ******************** */
.yes{
	padding:5px;
	background-color:#0088FF;
	cursor:pointer;
	border-radius: 3px;
	border-color:#000000;
}
.no{
	padding:5px;
	cursor:pointer;
	border-radius: 3px;
	border-color:#000000;
}
a:link,a:visited {
    color:#FFFFFF;
	  text-decoration:none;
}
.small{
	font-size:12px;
}

.text{
	padding-left:10px;
  color:#E6E6E6;
	cursor:pointer;
}
.nopointer{
	cursor:default;
}
.textselect{
  color:#0088FF;
	padding-left:15px;
}
.text:hover{
  color:#FFFFFF;
}
.share{
	cursor:pointer;
	position:absolute;
	height:40px;
	right:5px;
	bottom:15px;
	width:40px;
	font-size:15px;
	color:#FFFFFF;
	background: url(../images/share.png);
}
.facebookshare{
	cursor:pointer;
	position:absolute;
	height:40px;
	right:50px;
	bottom:15px;
	width:40px;
	font-size:15px;
	color:#FFFFFF;
	background: url(../images/facebookshare.png);
}
.arrow-right { /*css arrow made by just showing one side of an oversized border with size of internal div set to 0 */
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 25px solid #000000;
}

.arrow-left {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right:25px solid #000000;
}
.arrow-up {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 25px solid #000000;
}

.arrow-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top:25px solid #000000;
}

/* **************TOGGLE SELECTOR**************** */

.onoffswitch {
    position: relative; width: 64px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 6px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 11px; padding: 0; line-height: 11px;
    font-size: 11px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 11px;
    background-color: #0088FF; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 11px;
    background-color: #253C48; color: #C2C2C2;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 11px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 49px;
    border: 2px solid #999999; border-radius: 6px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}