/* CSS Document */
body {margin:0; padding:0; font-family:Verdana, Arial, Helvetica, Sans-Serif;
  /* Full screen skycam */
  background: url('skycam/cam_1.jpg') no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:rgba(255,255,255, 0.8);
}

#wrapper {
	margin:0 auto;width:1110px;
}

/* Header */
	#main_header {float:left; width:760px; height:165px; background:url('images/clouds_header-small.jpg') repeat-x; font-family:'Trebuchet MS','Lucida Grande', Verdana, Arial, Sans-Serif;}
	#main_header h1 {margin: 20px 15px 0 30px; padding:0; font-size:175%;}
	#main_header h2 {margin:0 0 0 30px; padding:10 0 0 0; font-size:100%; color:#666f73; font-weight:bold}

/* Header Sky Cam */
	#headerSkyCam {
		float:left;
		width: 350px;
	}
	.headerCamContainer {width:350px; height:192px;}
	.headerCamContainer img {width:100%; height: auto;}

/* Navigation */
	#main_topmenu {float:left; width:760px; margin:-27px 0 0 0; font-size:14px; border-top:2px solid #cbcbcb; border-bottom:1px solid #dfdfdf;  background-color:rgba(255,255,255, 1);}
	#homelink {padding-left:22px !important; background:url('images/home_arrow.gif') no-repeat left center}
	#homelink:hover {background:url('images/home_arrow.gif') no-repeat left center !important}

	#dropmenu {float:left; margin:0; padding:0; list-style:none; position:relative; line-height:22px; z-index:2; width:760px; font-weight:bold;} 
	#dropmenu a {display:block; padding:3px 8px; color:#3a4656; text-decoration:none; } 
	#dropmenu ul {margin:0; padding:0; list-style:none; line-height:20px; z-index:3;  font-weight:bold; background:#fff; position:absolute; display:none; top:28px; left:-1px;}
	#dropmenu li {float:left; position:relative;  display:block} 
	#dropmenu li ul {border-top:1px solid #595f68; border-bottom:1px solid #595f68; width:167px;} 


/* Main Content Column */
	#main {
	    float: left;
		width: 760px;
		background-color:rgba(0,0,0, 0.1);
	}
	#main p {padding:0;}

	#UpdateMsg {
		float: left;
		width: 600px;
		height: 24px;
		padding:4px 0 0 5px;
		background-color:rgba(255,255,255, 0.8);
		font-size:75%;
	}

	#RefreshButton {
	    float: left;
	    text-align:right;
		width: 154px;
		height:28px;
		background-color:rgba(255,255,255, 0.8);
	}

/* WeatherLink Weather Data */
	#wxdata {margin:0; padding:0; height:510px;}
	.wxdatabox {width:520px; height:480px; margin-left:auto; margin-right: auto;display: block;}

/* MeteoBlue 7 day Forecast */
	#forecast {
	    margin:0; padding:0;
	    background-color:rgba(0,0,0, 0.3);
	}

/* WeatherLink Weather Data */
	#wxdatasummary {margin:0; padding:0; height:1060px;}

/* SkyCam */
	#SkyCam {margin:0; padding:0;}
	.SkyCamPic {width:1040px; height:603px; margin-left:auto; margin-right: auto;display: block;}
	.SkyCamPic img {width: 100%; height: auto;}

/* WX Data Graphs */
	#Graphs {margin:0; padding:0;}

/* Clear Sky Chart */
	#ClearSky {margin:0; padding:0;}

/* Side Bar Column */
	#side_bar {
	    float: left;
		width: 350px;
		background-color:rgba(255,255,255, 0.7);
	}

/* Weather Alerts */
	#alerts {padding: 3px; border: 3px solid #FF0000; font-size: 90%;min-height:150px}
	#alerts ul {list-style: none;}
	#alerts h3 {margin:0px; padding:2px; font-size:130%; background-color:#FF0000; color:#FFFFFF; font-weight:bold;}
	#alerts h3 a {color:#FFFFFF;}
	#alerts a {text-decoration:none;color:#FF0000;font-weight:bold;}
	.alertmap {width:80px; height:111px;float: left; padding-right:3px;}
	.alertmap img {width: 100%; height: auto;}

/* Air Quality */
	#airquality {padding: 3px; border: 3px solid #0000FF; font-size: 90%;min-height:100px;}
	#airquality ul {list-style: none;}
	#airquality h3 {margin:0; padding:2px; font-size:130%; background-color:#0000FF; color:#FFFFFF; font-weight:bold;}
	#airquality h3 a {color:#FFFFFF;}
	#airquality a {text-decoration:none;color:#0000FF;font-weight:bold;}

/* Addtional Weather Links */
	.boxgroup {width:350px;height:115px;}
	.boxlinks {width:114px; height:114px; float: left; padding:1px;}
	.boxlinks img {width: 100%; height: auto;}

/* Addtional Weather Links */
	.boxgroup2 {width:700px;height:115px;}
	.boxlinks2 {width:114px; height:114px; float: left; padding:1px;}
	.boxlinks2 img {width: 100%; height: auto;}

/* Footer */
	#main_footer {clear:both; background-color:rgba(255,255,255, 0.7);font-size:80%;}

h1, h2, h3 p { margin: 0;}

.SectionTitle {background-color:rgba(255,255,255, 0.7);padding:10px 0 0 5px;margin-top:15px;}
.SectionTitle h1, h2, h3 {font-size:130%; padding:0; margin:0;}
.SectionTitle p {font-size:80%;padding:0 0 15px 0; margin:0;}
.SubTitle {background-color:rgba(255,255,255, 0.7);font-size:100%; padding:0 0 0 5px; font-weight:bolder;}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 900px;
		position: relative;
		margin: 2% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}
	
	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }

.modalDialogr {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialogr:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialogr > div {
		width: 640px;
		position: relative;
		margin: 2% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}.modalDialogr {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialogr:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialogr > div {
		width: 640px;
		position: relative;
		margin: 2% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}