@charset "utf-8";

/* CSS Document */
	
	/* Eric Meyer's CSS reset style sheet
	http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
	*/
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
sub {
	text-transform: none;
}
/* remember to define focus styles! */
	:focus {
	outline:none;
}
a:focus {
	outline:dotted thin;
}
a:active {
	outline:none;
}
/* remember to highlight inserts somehow! */
	ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
	table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
/*	background:#20668e; */
     background: #666666;
	margin: 0 auto; /* t/b, l/r */
	text-align: center; /* required to center body in IE5 PC */
	font-family:Helvetica, sans-serif;
	font-size: .8em; /* specify base font size in em's, all others in % */
	color: #000;
	line-height:160%;
	width:1000px;
}
/********* Layout styles ************/

#wrapper {
	text-align:left;
	width:1000px;
}
#header {
	background:url(../ui/header-bg.jpg) top left repeat-x;
	height:133px;
	position:relative;
}
#double #wrapper #content #images, .double-ideal, #double-ideal, #double-data, #class1 #content, .nowrap {
	min-width:810px;
	
}
#nav {
	position:absolute;
	top:101px;
	left:135px;
	height:15px;
}
#logo {
	background:url(../ui/hazecam-header-bg.jpg) top left no-repeat;
	height:96px;
}
#main {
	background:#454545;
}
#sidebar {
	background:#454545;
	width:120px;
	float:left;
	min-height:415px;
	padding:15px 10px;
}
#content {
	background:#FFF;
	position:relative;
	/*left:141px;*/
	min-height:395px;
	padding:25px;
	max-width:820px;
	margin-left:140px;
	
}
#footer {
	background:url(../ui/footer-bg.jpg) top left repeat-x;
	clear:both;
	text-align:center;
	min-height:84px;
}
#footer div {
	width:1000px;
}
.offscreen {
	position:relative;
	left:-999px;
	display:none;
}
.new-england {
	position:relative;
	top:10px;
	left:10px;
}
.logo {
	position:absolute;
	top:23px;
	left:140px;
}
.blue {
	color:#8097B0;
}
.right {
	float:right;
}
.bar-wide {
	width:468px;
	height:23px;
	padding:7px 10px;
	background:#216a93;
	margin-bottom:10px;
}
.bar-med {
	width:149px;
	height:19px;
	background:#216a93;
	padding:5px 10px;
	margin-bottom:10px;
}
.bar-small {
	width:105px;
	height:32px;
	background:#216a93;
	border:5px solid white;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	font-style:italic;
	font-weight:lighter;
}
.wide-container {
	width:488px;
}
#image_main {
    background-color:#333333;
    width:500px;
    height:300px;
    padding: 0px 250px;
}
#image_main_left, #image_main_right {
    width:500px;
    height:250px;
    margin:0px;
}
#pollution {
	width:169px;
	float:left;
	text-align:center;
	position:relative;
	left:0px;
}

#pollution-single {
	width:169px;
	float:left;
	text-align:center;
	position:relative;
	left:120px;
}

#photos {
	float:left;
}
#photos table {
	font-style:italic;
}
#photos table tr td {
	padding:5px 15px;
	vertical-align:middle;
}
#photos table tr td.time {
	font-weight:bold;
	font-size:160%;
}
#temperature {
	width:450px;
	position:relative;
	margin-bottom:25px;
	float:left;
	left:175px;
	top:-165px;
	
}
#temperature table td {
	vertical-align:middle;
	text-align:center;
}

#temperature-single {
	width:488px;
	position:relative;
	margin-bottom:25px;
	float:left;
	left:-5px;
	top:0px;
	
}
#temperature-single table td {
	vertical-align:middle;
	text-align:center;
}

img.arrow {
	position:absolute;
	top:10px;
	left:350px;
}
.more-info {
	position:absolute;
	top:30px;
	left:380px;
	text-align:center;
}
#pollution-level {
	width:292px;
	float:left;
	margin:0px 10px;
	text-align:center;
}
#pollution-level img {
	border:1px solid #24577F;
	padding:5px;
}
.clean-level {
	margin-left:30px;
}

.ideal-image {
    width:500px;
    height:auto;
    margin: 0px 150px;
    }
.ideal-left, .ideal-right {
    width:400px;
    height:auto;
    }

/* Dual-image site name bar */

#double-header {
	background:url(../ui/long-bar-bg.jpg) top left repeat-y;
	width:980px;
	min-height:40px;
	padding:10px;
	margin-bottom:5px;
}

#double-header ul {
	color:#fff;
	list-style:disc;
	font-size:110%;
	margin-right:15px;
	position:relative;
	bottom:5px;
	font-weight:bold;
}
#double-header ul li {
	list-style:disc;
	float:right;
	margin:0 10px;
}
#double-header ul li.first {
	list-style:none;
}

    
/* Single-image site name bar */
#single-header {
	background:url(../ui/long-bar-bg.jpg) top left repeat-y;
	width:458px;
	min-height:10px;
	padding:15px;
}
#single-header ul {
	color:#fff;
	list-style:disc;
	font-size:110%;
	margin-right:15px;
	position:relative;
	bottom:5px;
	font-weight:bold;
}
#single-header ul li {
	list-style:disc;
	float:right;
	margin:0 10px;
}
#single-header ul li.first {
	list-style:none;
}

.camsite-datatable th, .camsite-datatable td {
    border: 5px solid #ffffff;
    text-align:center;
    vertical-align:middle;
    }
    
.camsite-datatable thead {
	background:url(/ui/long-bar-bg.jpg) top left repeat-y;
	background-color:#224466;
	height:40px;
	width:784px;
	font-size:100%;
	font-weight: bold;
	color:#ffffff;
}
.camsite-datatable thead td {
    height:40px;
    color:#ffffff;
}

.camsite-datatable .col2 {
    width:350px;
    }

.camsite-datatable th {
    background-color:#216a93;
    color:#ffffff;
    font-weight:normal;
    font-style:italic;
    }
    
#camsite-data tr  {
    height:30px;
    }
#camsite-data .time {
    width: 170px;
    font-size:140%;
    font-weight:bold;
    }
#camsite-data .archive-pics {
    
    }
#camsite-data .pollution {
    width:170px;
    }
#camsite-data .pollutionimage {
    width:170px;
    height:20px;
    }
#camsite-data .weather {
    width:135px;
    }

#camsite-data .datalinks {
    font-weight:bold;
    }
#camsite-data #moreinfolink {
    text-decoration:none;
    color:#be1e2d;
    }
#camsite-data #moreinfoimage {
    text-decoration:none;
    vertical-align:middle;
    height:20px;
    width:auto;    
    }
#camsite-data #moreinfotext {
     text-decoration:underline;
     }
    
.bar-full {
	background:url(../ui/long-bar-bg.jpg) top left repeat-y;
	min-height:20px;
	width:784px;
	padding:10px;
	position:relative;
	margin-bottom:10px;
}
#home #photos {
	float:left;
	padding-right:0px;
}
#home #pollution {
	float:left;
	padding-right:40px;
}
#home #temperature {
	float:left;
}
.double-ideal, #double-ideal {
	clear:both;
	position:relative;
}
.double-ideal div, #double-ideal div, #ideal-left, #ideal-right {
	float:left;
	padding-right:5px;
	position:relative;
	top:-100px;
}
.ideal 
{
    clear:both;
	position:relative;
}


/********* Navigation styles ************/
	
/********* Heading styles ************/

h2 {
	font-family:"Times New Roman", Times, serif;
	color:#FFF;
	font-style:italic;
	font-weight:bold;
	font-size:250%;
	margin-bottom:8px;
}
#content h2 {
	background:url(../ui/title-bg-large.png) top left no-repeat;
	width:740px;
	height:27px;
	padding:25px;
	
}
h3 {
	font-family:"Times New Roman", Times, serif;
	color:#555;
	font-style:italic;
	font-weight:bold;
	font-size:155%;
	margin-top: 3em;
	margin-bottom: 1em;
}
h4 {
	font-family:Arial, Helvetica, sans-serif;
	color:#049;
	font-size:120%;
	margin-top:3em;
	margin-bottom:0.5em;
}
h4.air-pollution {
	float:right;
	position:relative;
	right:30px;
}
h4.temp, h4.wind {
	float:left;
	margin-right:30px;
}

h4.precip {
	float:left;
	margin-left:30px;
}

.bar-full h4 {
	float:left;
	position:absolute;
}
.bar-full h4.double-air {
	left:250px;
}
.bar-full h4.double-temperature {
	left:400px;
}
.bar-full h4.double-wind {
	left:530px;
}
.bar-full h4.double-precip {
	left:620px;
}
h5 {
	color:#fff;
	font-style:italic;
	font-weight:lighter;
}

 #double-ideal h5 {
	font-weight:bold;
	font-size:110%;
	position:absolute;
	left:10px;
	top:35px;
}


.ideal h4 {
	color:#fff;
	font-style:italic;
	position:absolute;
	font-size:200%;
	left:10px;
	font-family:"Times New Roman", Times, serif
}
.ideal h5 {
	font-weight:bold;
	font-size:110%;
	position:absolute;
	left:10px;
	top:35px;
}

/********* Text styles ************/

p {
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:15px;
}

.caption {
    font-weight: bold;
    font-size: 110%;
    text-align:center;
    color:#049;
    margin:0.5em;
    }
.subcaption {
    font-weight:bold;
    font-size:100%;
    color:#333333;
    margin:5px 0px 10px 0px;
}
#content .standard  {
    margin:0px 25px;
    }

.alert {
    font-style:italic;
     color:#be1e2d;
     }

.note {
    font-style:italic;
    }

#nav ul {
	background:url(../ui/nav-bg.png) top left repeat-x;
	height:26px;
	width:791px;
	position:relative;
	top:-34px;
	left:40px;
}
#nav ul li {
	float:left;
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:70%;
	font-weight:bold;
	line-height:120%;
	width:93px;
	padding:0px 10px;
	padding-top:3px;
	text-align:center;
}
#footer ul {
	position:relative;
	left:350px;
	color:#216a93;
	font-weight:bold;
	font-size:90%;
	width:500px;
}
#footer ul li {
	float:left;
	display:block;
	list-style:disc;
	margin:8px 0px;
	margin-right:5px;
	padding-left:10px;
	background:url(../ui/dot.png) no-repeat center left;
}
#footer ul li.first {
	background:none;
}
p.updated {
/*not in use(?)*/
	float:right;
	font-size:90%;
	color:#FFF;
	font-weight:bold;
	position:relative;
	top:8px;
}
#pollution p {
	margin-bottom:5px;
}
.more-info p {
	color:#be1e2d;
	line-height:100%;
	font-style:italic;
	text-decoration:underline;
}
#class1 p {
	color:#216A93;
	width:auto;
	font-family:Arial, Helvetica, sans-serif;
	/*margin-left:30px;*/
}
#class1 .clean-level p {
	background:url(../ui/clean-bg.png) top left no-repeat;
	width:292px;
	height:20px;
	margin:0;
}
#class1 .moderate-level p {
	background:url(../ui/moderate-bg.png) top left no-repeat;
	width:292px;
	height:20px;
	margin:0;
}
#class1 .hazy-level p {
	background:url(../ui/hazy-bg.png) top left no-repeat;
	width:292px;
	height:20px;
	margin:0;
}


#class1 #pollution-level p {
	margin-bottom:10px;
	color:#fff;
	font-size:120%;
	font-weight:bold;
	font-style:italic;
	padding:10px 0;
	text-transform:uppercase;
}


#idealdiv .piclabel {
	color:#fff;
	position:absolute;
	font-size:150%;
	margin-top:10px;
	left:30px;
	font-family:"Times New Roman", Times, serif
}
#idealdiv #rightpiclabel {
left: 435px;
}


 .ideal-single .piclabel {
	color:#fff;
	font-style:italic;
	position:absolute;
	font-size:200%;
	left:100px;
	padding-left: 150px;
	font-family:"Times New Roman", Times, serif
}

/********* Link styles ************/

a {
	color:#0f5f8c;
	font-style:italic;
}
a:hover, .map a:hover {
	color:#a9c7db;
}
.map a {
	color:#FFF;
	text-decoration:none;
}
#nav a {
	text-decoration:none;
	color:#FFF;
	width:93px;
	height:26px;
	display:block;
}
#sidebar a {
	color:#FFF;
	text-decoration:none;
	font-style:normal;
}
#nav a:hover {
	color:#8097B0;
}
#sidebar a:hover {
	color:#a9c7db;
}

#sidebar h4 {
     margin-top:1em;
     color:#FFF;
}
#sidebar h4 a {
	color:#FFF;
}
#footer a {
	color:#216a93;
	font-style:normal;
}
#footer a:hover {
	color:#8097B0;
}
/********* Rule styles ************/
	
/********* List styles ************/

#content .standard ol li {
    list-style-type: decimal;
    margin-left:2em;
    margin-bottom:15px;
    }

#content .standard ul li {
    list-style-type: disc;
    margin-left:2em;
    margin-bottom:15px;
    }

#content .standard dt {
    font-weight:bold;
    }
#content .standard dd {
    margin:0em 0em 15px 2em;
    }

#sidebar ul li {
	list-style:disc;
	margin-left:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFF;
}
#pollution ul {
	margin-left:7px;
}
#pollution ul li {
	float:left;
	display:block;
	margin-right:15px;
}
#pollution ul li.medium {
	margin-right:30px;
}
#photos ul, .archive-weather {
	list-style:disc;
	color:#216a93;
	margin-left:25px;
	font-size:140%;
	line-height:120%;
	font-style:italic;
	margin-top:50px;
	margin-bottom:20px;
	
}
#archive-weather {
	clear:both;
	text-align:center;
	position:absolute;
	width:500px;
	left:325px;
	top:225px;
}
.no-bullet {
	list-style:none;
	
}

#content ul {
    margin:1.2em;
    list-style:disc;
    }
    
 #mainsitelist li{
    margin-bottom: 2px;
}    
/********* Form styles ************/
.country {
    display: none;
    }
	
/********* Clearfix styles ************/
	
.clearfix:after {
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* start commented backslash hack \*/
	* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* stop commented backslash hack */

/********* generic styles ************/

.hidden {
    display: none;
    }

/* get rid of margins when the item is the first in its group */
.topitem {
    margin-top:0;
    }

.indent {
    margin-left:1em;
    }
    
 .callout {
    float:right;
    margin:15px;
    border: 1px solid #999999;
    text-align:center;
    }
 .labeltable td {
    vertical-align:middle;
    padding:10px;
    }
/********* Page-specific styles ************/
/*acadia NPS block on acadia pages*/

.AcadiaNPS {
    margin: 50px auto 10px auto;
    }
    


/*homepage*/
#homepage .header h2 {
	background:none;
	width:auto;
	height:auto;
	padding:0px;
}
#homepage #content p {
    padding: 0px 0px 0px 0px;
    }
#homepage #content-right {
	width:472px;
	position:absolute;
	left:362px;
}
#homepage #content-right .header {
	background:url(../ui/right-title-bg.jpg) top left repeat-y;
	padding:10px 0;
	padding-left:15px;
}
#homepage #content-right .text p img {
	margin-right:5px;
}
#homepage #content-right .text p.right {
	margin-top:19px;
}
#homepage #content-left {
	width:307px;
	background:#F2F2F2;
	border:1px solid black;
	position:absolute;
	margin-right:25px;
}
#homepage #content-left .text {
	min-height:310px;
	padding:15px;
	color:#4d86a7;
	line-height:130%;
	font-size:100%;
}
#homepage #content-left .header {
	background:url(../ui/left-title-bg.jpg) top left repeat-y;
	text-align:center;
	padding:10px 0;
}

#homepage #content-right .text p {
	margin-bottom:0;
}
#homepage #content-right .map p {
	position:absolute;
	top:0;
	color:#fff;
	font-weight:bold;
	font-size:110%;
}
#homepage #content-right .map p.moosehorn {
	top:100px;
	right:58px;
}
#homepage #content-right .map p.burlington {
	top:120px;
	right:192px;
}
#homepage #content-right .map p.acadia {
	top:118px;
	right:82px;
}
#homepage #content-right .map p.mtwash {
	top:147px;
	left:325px;
}
#homepage #content-right .map p.boston {
	top:185px;
	left:347px;
}
#homepage #content-right .map p.bluehill {
	top:200px;
	left:352px;
}
#homepage #content-right .map p.newark {
	top:236px;
	right:215px;
}
#homepage #content-right .map p.nyc {
	top:230px;
	left:290px;
}

#homepage #content-right .map p.frostburg {
	top:266px;
	right:333px;
}
#homepage #content-right .map p.brigantine {
	top:275px;
	left:272px;
}
#homepage #content-right .map p.baltimore {
	top:290px;
	right:265px;
}
#homepage #content-right .map p.boundarywaters {
    display:none;
}

/* camsite pages */
#contenttabmenu {
    background-color:#555555;
    padding:15px 15px 0px 15px;
    border: 0px;
    margin:0px 0px 30px 0px;
}
#contenttabmenu a {
    font-style:normal;
    font-weight:bold;
    font-size:120%;
    color:#ffffff; 
    text-decoration:none; 
    background-color:transparent;
    padding:5px;
    margin:0px 3em 0px 0px;
}

#contenttabmenu a:hover {
color:#a9c7db;
}
#contenttabmenu a.selected {
    color:#336699;
    background-color:#ffffff;
    outline:0px;
    }

#mappicdiv img {
    max-width: 800px;
    }
    
#visconditions {
    margin-left:auto;
    margin-right:auto;
    }
#visconditions td, #visconditions th {
    border: 1px solid #999999;
    text-align: center;
    padding: 5px;
    line-height:110%;
    }
 #visconditions td {
    font-weight:bold;
    font-style:italic;
    }
    
/*allsites page*/
#allsitespage .sitetitle {
    text-align: center;
    font-weight: bold;
    }
#allsitespage .widesite {
    margin-bottom:30px;
    }
#allsitespage .wideimage {
    width: 400px;
    height: auto;
    }
#allsitespage .singlesite {
    margin-bottom:30px;
    width: 50%;
    float:left;
    }
#allsitespage .singleimage {
    width: 375px;
    height: auto;
    }

/* Class1 page */
#class1page  .sitetitle {
    text-align: center;
    font-weight: bold;
    }
#class1page .singlesite {
    margin-bottom: 30px;
    width: 50%;
    float:left;
    }
#class1page .singleimage {
    width: 300px;
    height: auto;
    margin: 0px 30px;
    }
#class1page .hazecond {
    width: 30%;
    float:left;
    margin-right: 3%;
    margin-bottom: 30px;
    }
#class1page  .condtitle {
    text-align: center;
    font-weight: bold;
    }
#class1page .condpic {
    width: 100%;
    height: auto;
    }

/* gallery pages */
    
#gallerypage  .sitetitle {
    text-align: center;
    font-weight: bold;
    }
#gallerypage .singlesite {
    margin-bottom: 30px;
    width: 33%;
    float:left;
    }
#gallerypage .singleimage {
    width: 200px;
    height: auto;
    margin: 0px 30px;
    }

#gallerypage #gallerytable td {
    padding: 10px;
    vertical-align: top;
    }
#gallerypage .title {
    font-weight: bold;
    }
    
/* health page */

#healthpage table {
    margin: 20px 30px 30px 30px;
    }
#healthpage table thead td {
    font-weight:bold;
    }
#healthpage table td {
    padding: 10px;
    text-align: center;
    border: solid 1px #999999;
    line-height:1.2em;
    }
#healthpage #healtheffects td {
    background-color: #dddddd;
    }
#healthpage #healtheffects .selection {
    font-weight: bold;
    }

#healthpage #aqi #good td {
    background-color: #00E400;
    }
#healthpage #aqi #moderate td {
    background-color: #FFFF00;
    }
#healthpage #aqi #unhealthy-sensitive td {
    background-color: #FF7E00;
    }
#healthpage #aqi #unhealthy td {
    background-color: #FF0000;
    }
#healthpage #aqi ul {
    text-align:left;
    }
#healthpage #aqi li {
    margin-bottom: 2px;
    }
    
    /* contact us page */
#contact-table td.rhs {
    text-align:left;
    vertical-align:middle;
    width:350px;
    }
#contact-table td.lhs {
    text-align:right;
    vertical-align:middle;
    }