/* Credits

Style by Myjive / www.myjive.net

-----------------------------------------------------------*/


/* Main Containers
-----------------------------------------------------------*/
html, body, table {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}

body {
	text-align: center;
	padding: 0;
	margin: 0;
}


#wrapper {
	width: 960px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
}


/* positioning
--------------------------------------------------------*/
.alignLeft { float: left;}
.alignRight {	float: right;}
.textLeft { text-align: left;}
.textRight { text-align: right;}


/* basic typography
--------------------------------------------------------*/
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 17px;
	padding: 0 0 10px 0;
	margin: 0;
}

h2 {
	margin:0 0 10px 0; padding:0;
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 17px;
	letter-spacing:1.5px;
	font-weight: 600;
	line-height: 17px;
	color: #301013;
}

h3 {
	margin:0 0 10px 0; padding:0;
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing:1.5px;
	text-transform:uppercase;
	font-weight: 600;
	line-height: 17px;
	color: #997569;
}

h4 {
	margin:0; padding:0;
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 17px;
	color: #f3dccd;
}

.black { color: #000; font-weight: bold;}
strong.highlight {
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #f3dccd;
	font-weight: normal;
	line-height: 18px;
}

.line { border-bottom: 1px solid #4d2931;}


/* links/images
--------------------------------------------------------*/
a {
	color: #adcae8;
	text-decoration: none;
	border: none;
}

a:hover {
	color: #95BBE1;
	text-decoration: underline;
}

img { padding:0; margin:0; border: none;}

img.resource { margin-bottom: 25px; }


/* default ordered/unordered lists
--------------------------------------------------------*/	

ol, ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	list-style-image: none; 
}

li {
	list-style: none;
	list-style-image: none;
}

ul.inline li {	display: inline;}


/* header
--------------------------------------------------------*/	
#header {
	display: block;
	height: 60px;
	padding: 0;
	margin: 0;
}

#header div.headerLeft { display: block; float: left;}
#header div.logo {
	float: left;
	padding: 0;
	margin: 0 105px 0 205px;
}

#header div.logo a {
	display: block;
	width: 125px;
	height: 60px;
}
#header div.logo a:hover { text-decoration: none;}

#header div.logo p {
	position: absolute;
	left: -9999px;
}

#header div.tabby { float: left; padding:0; margin:0;}

#header div.navi {
	display: block;
	float: right;
	clear: right;
}

#header div.navi ul {
	float: left;
	width: 400px;
	height: 40px;
	padding: 0 10px 10px 0;
	list-style: none;
}

#header div.navi ul li {
	display: inline;
	float: left;
	padding: 0;
	margin: 0;
	z-index: 1;
}

#header div.navi ul li a {
	display: block;
	float: left;
	height: 15px;
	padding: 15px 10px 5px 10px;
	color: #5c6f88;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	background: url(../images/background/navi-over-bkgnd.jpg) repeat-x;
	background-position: left -100px;
	z-index: 1;
}

#header div.navi ul li a:hover {
	color: #f7f0d9;
	text-decoration: none;
	background-position: left 0;
}

#header div.navi ul li.home a { border-left: none;}
#header div.navi ul li.end a { border-right: none;}

#header div.navi ul li div.dropdown { visibility: hidden; position: relative; z-index: 1;}
#header div.navi ul li div.dropdown:hover { visibility: visible;}
#header div.navi ul li div.dropdown div.tabContent { visibility: visible; z-index: 1;}
#header div.navi ul li div.dropdown div.jumper { 
	margin-top: 35px;
	position: absolute; 
	z-index:3; 
	width: 155px;	
	background: #f7f0d9;
}

#header div.navi ul li div.dropdown div.jumper a {
	display: block;
	float: left;
	width: 133px; /* take 2px off for border on sides */ 
	height: 10px; 
	padding: 10px 10px;
	border: 1px solid #bdb291;
	border-bottom: none;
	background: url(../images/background/navi-over-bkgnd.jpg) left -100px repeat-x;
}

#header div.navi ul li div.dropdown div.jumper a.bottom { border-bottom: 1px solid #bdb291;}
#header div.navi ul li div.dropdown div.jumper a:hover { 	background: url(../images/background/navi-over-bkgnd.jpg) top left repeat-x;}
#header div.navi ul li div.dropdown:hover div.tabContent a { background: url(../images/background/navi-over-bkgnd.jpg) top left repeat-x; color: #f7f0d9;}


/* main
--------------------------------------------------------*/	
#main { display: block; float: left; width: 960px;}

#main.camMain { background: url(../images/background/liveCams-bkgnd-main.jpg) left top no-repeat; margin-bottom: 5px;}
#main.weather { background: url(../images/background/weather-main.jpg) left top no-repeat; height: 300px; width: 930px; color: #997569; padding: 80px 0 0 30px;}
#main.weather p { color: #997569;}
#main.weather h3 { margin: 0; }

#main div.temp {
	display: block; 
	float: left; 
	width: 960px;
	height: 496px;
	background: url(../images/background/cam360-main.png) left top no-repeat;
}

#main div.aboutMain { float: left; margin-bottom: 5px;}

#main div.hide {
	display: block; 
	float: left; 
	width: 960px;
	height: 485px;
	background: url(../images/background/about-main.png) top left no-repeat;
}

#main div.hide p {
	position: absolute;
	top: auto;
	left: -9999px;
}

#main div.nonFlashWrapper {
	padding: 160px 30px 0 30px;
	height: 285px;
	background: url(../images/home-logo-mobile.png) left top no-repeat;
}

#main div.nonFlashWrapper div.nonFlashLeft {
	float: left;
	width: 650px;
	padding: 0;
	margin: 0;
}

#main div.nonFlashWrapper div.nonFlashRight {
	float: right;
	width: 243px;
	padding: 144px 0 0 0;
	margin: 0;
}

#main div.nonFlashWrapper div.nonFlashRight a.homeInvovled {
	display: block;
	height: 30px;
	width: 127px;
	padding: 0;
	margin: 0;
	background: url(../images/home-involved.png) left top no-repeat;
	text-align: left;
	text-indent: -9000px;
}

#main div.nonFlashWrapper div.nonFlashRight a.homeInvovled:hover { background-position: left -30px;}

#main div.nonFlashWrapper div.nonFlashLeft ul { padding-bottom: 5px;}

#main div.nonFlashWrapper div.nonFlashLeft ul li {	padding: 0 5px 0 0;}

#main p { color: #5c6f88;}

#main div.videoRight {
	display: block;
	float: right;
	width: 580px;
	padding: 0;
	margin: 0px 0 0 0;
	text-align: right;
	z-index: 0;
}

#main div.videoFeed {
	float: left;
	width: 337px;
	height: 325px;
	padding: 152px 0 0 43px;
	background: url(../images/background/liveCams-video-bkgnd.jpg) 28px 112px no-repeat;
}

#main div.missing { width:960px; height: 439px; background:url(../images/background/missing-main.jpg) left top no-repeat; padding: 75px 0 0 30px;}

#main div.missing a { color: #694437; text-decoration:none;}
#main div.missing a:hover { color: #997569; text-decoration:underline;}

#main div.leftWeather {
	display: block;
	float: left;
	width: 500px;
	padding: 0;
}

#main div.rightWeatherWrapper {
	float: right;
	width: 395px;
	padding: 0;
}

#main div.weatherPic { float: left; width: 250px;}
#main div.temperature { float: right; width: 250px;}
#main div.temperature p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 135px; color: #f7f0d9; line-height: 80px;}
#main div.temperature p span.degrees {
	color: #9da2ad;
	font-size: 35px;
	vertical-align: super;
}

#main div.rightWeather {float: right; padding: 0; margin:0;}
#main div.rightRightWeather {float: right; padding: 0 30px 19px 0;}
#main div.leftRightWeather {float: left;}
#main div.rightRightWeather, div.leftRightWeather {width: 175px;}
#main div.rightRightWeather img, div.leftRightWeather img {	width: 125px; height: 90px;}

#main div.location {
	display: block;
	clear: both;
	width: 279px;
	float: right;
	height: 58px;
	padding: 42px 0 0 23px;
	margin: 0;
	background: url(../images/background/weather-location-bkgnd.jpg) right top no-repeat;
}

#main p span.temperatureLittle {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 25px;
	color: #f3dccd;
}



/* Cam Navigation
--------------------------------------------------------*/	
#main div.camNavigation {
	float: right;
	height:130px;
	width: 580px;
	padding: 356px 0 0 0;
}

#main div.camNavigation ul { 
	float: right; 
	width: 408px; 
	padding:0; 
	margin:0;
}
#main div.camNavigation ul li {
	display:inline; 
	float:left;
	width: 82px;
	padding: 0; 
	margin: 0;
}
#main div.camNavigation ul li a {
	display:block;
	outline:none;
	height:20px;
	width: 82px;
	text-align: left;
	text-indent: -9009px;
	margin:0;
}

#main div.camNavigation ul li.roverNav a { background: url(../images/navigation/cam1.jpg) 1px 0 no-repeat;}
#main div.camNavigation ul li.seekerNav a { background: url(../images/navigation/cam2.jpg) 1px 0 no-repeat;}
#main div.camNavigation ul li.cabinNav a { background: url(../images/navigation/cam3.jpg) 1px 0 no-repeat;}
#main div.camNavigation ul li.powdercatNav a { background: url(../images/navigation/cam4.jpg) 1px 0 no-repeat;}

#main div.seeker {	background:url(../images/background/seeker-bkgnd.png) left 1px no-repeat;}
#main div.powdercat {	background:url(../images/background/powdercat-bkgnd.png) left 1px no-repeat;}
#main div.cabin {	background:url(../images/background/cabin-bkgnd.png) left 1px no-repeat;}
#main div.rover {	background:url(../images/background/rover-bkgnd.png) left 1px no-repeat;}


/* secondary
--------------------------------------------------------*/	
#secondary {
	clear: both;
	float: left;
	display: block;
	width: 960px;
	padding: 0;
	margin: 0;
}

#secondary.homeSecondary { padding-top: 30px; background: url(../images/background/home-secondary.gif) left top no-repeat;}
#secondary.immersion { padding-top: 30px; background:url(../images/background/cam360-secondary.gif) left top no-repeat;}
#secondary.liveCam { background: url(../images/background/liveCams-secondary.jpg) left top no-repeat;}
#secondary.weatherSecondary { background: #fff; float: left; color: #321219; padding-top: 30px;}
.weatherSecondary a {color: #5c6f88;}
.weatherSecondary a:hover {color: #4f5f75;}
.weatherSecondary h2.line {border-bottom: 1px solid #dccec9;}

.rightCol {
	display: block;
	float: right;
	width: 585px;
	padding: 0;
	padding-right: 30px;
	margin: 0;
}

.leftCol, .leftRightCol, .rightRightCol {
	display: block;
	float: left;
	width: 270px;
	padding: 0 0 30px 30px;
	margin: 0;
}

.leftRightCol { padding: 0 0 30px 0;}

.leftColWide {
	display: block;
	float: left;
	width: 585px;
	min-height: 260px;
	padding: 30px 30px 0 30px;
	margin: 0;
}

#secondary.weatherSecondary div.leftColWide {
	padding: 0 30px 0 30px;
}

#secondary div.leftColWide ol {
	padding: 20px 0 30px 45px;
	margin: 0;
	list-style: decimal;
	font-size: 12px;
}

#secondary div.leftColWide ol li {
	list-style: decimal;
	padding: 0 0 10px 0;
}

#secondary div.rightRightCol {float: right;}

div.aboutDescription {
	display: block;
	float: right;
	width: 380px;
	padding: 25px 30px 0 30px;
	background: url(../images/background/about-secondary.jpg) top left repeat-y;
}

#secondary div.mapWrapper {
	float: right;
	width: 270px; 
	padding: 30px 30px 0 0;
	margin: 0;
}

#secondary.weatherSecondary div.mapWrapper {padding: 0 30px 0 0;}

#secondary div.dateWrapper {
	float: right;
	width: 270px; 
	padding: 30px 30px 0 0;
	margin: 0;
}

#secondary div.mapWrapper div.map {
	float: left;
	border: 5px solid #2a1117;
	width: 260px; /* 5px adjust for the border on the map*/
	margin: 0;
}

#secondary div.mapWrapper a.mapLink { float: left; display: block; padding: 5px 0 0 5px; margin:0;} 

#secondary a.involved { float: right; height: 30px; width: 96px; background: url(../images/btn-involved.gif) left top no-repeat; text-align: left; text-indent: -9000px; margin-bottom: 30px;}
#secondary a.buckle { float: right; height: 30px; width: 88px; background: url(../images/btn-buckle.gif) left top no-repeat; text-align: left; text-indent: -9000px;}
#secondary a.about { float: right; height: 30px; width: 88px; background: url(../images/btn-about.gif) left top no-repeat; text-align: left; text-indent: -9000px;}
#secondary a.buckle:hover, #secondary a.involved:hover, #secondary a.about:hover { background-position: 0 -30px}

#secondary div.leftCol object#newsletterFlash { padding-top: 7px;} /* 2px adjust for lineheight */


/* backyard
--------------------------------------------------------*/	
#backyardWrapper { display: block; width: 960px; clear: both;}
#backyardRight { display: block; width: 525px; float: right;}
#backyardLeft {display: block; width: 435px; float: left; clear: left;}
#backyardLeft p { color: #5c6f88;}

#backyardRight div.blueBox {
	display: block;
	float: right;
	width: 435px;
	height: 125px;
	padding: 475px 30px 0 60px;
	margin: 0;
	background: url(../images/background/backyard-right.png) top left no-repeat;
}


#backyardLeft div.community {
	display: block;
	float: left;
	width: 370px;
	height: 117px;
	padding: 75px 35px 0 30px;
	margin: 0;
	background: url(../images/background/backyard-main.jpg) 0px 19px no-repeat;
}

#backyardLeft div.contact {
	display: block;
	float: left;
	width: 375px;
	padding: 50px 30px 0 30px;
	min-height: 405px;
	background: url(../images/background/backyard-secondary.jpg) 0 top no-repeat;
}
div.contact div.contactLeft {
	float: left;
	width: 70px;
}

div.contact div.contactRight {
	float: right;
	width: 275px; 
	margin-left: 5px;
}

div.contact div.formContainer dd { float: right; background: #291218;	padding: 8px;}
div.contact div.formContainer dd.submit { background: none; float: right; padding: 8px 0;}
div.contact div.formContainer dt {
	width: 70px;
  margin: 0; 
	padding: 16px 0 0 0;
	height: 30px;
}


/* footer
--------------------------------------------------------*/	
#footer {
	display: block;
	clear: both;
	float: left;
	width: 880px;
	height: 50px;
	padding: 15px 30px 30px 50px;
	margin: 15px 0 0 0;
	color: #8b6050;
	background: url(../images/background/footer-bkgnd.png) no-repeat;
}

#footer a { color: #5c6f88; }
#footer a:hover { color: #7992b3; }

#footer div.alignRight {
	float: right;
	width: 380px;
	text-align: right;
}

#footer div.alignLeft {
	display: block;
	float: left;
	width: 380px;
	text-align: left;
}


/* forms
--------------------------------------------------------*/	
form { padding: 0; margin:0;}

input, select, textarea {
	height: 18px;
	padding: 4px;
	padding-top: 8px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	background: #5d3f3d;
}

div.formContainer div.block { 
	padding: 10px;
	margin: 0 0 12px 0;
}

div.formContainer dl { margin: 0; padding: 0; }

div.formContainer dt {
  width: 70px;
	font-size: 11px;
  margin: 4px 8px 0 0; 
	padding: 5px 0;
  text-align: right;
  white-space: nowrap;
  float: left;
	color: #f3dccd;
}

div.formContainer dd {
  margin: 0;
  font-size: 11px;
}

div.formContainer dt.required label { font-weight: bold; }

div.formContainer dd input, div.formContainer dd textarea {
	display: block;
	width: 258px;
	vertical-align: middle;
}
div.formContainer dd textarea { min-height: 100px; }

div.formContainer dd.submit input#submit {
	clear: both;
	width: 60px; 
	padding: 2px;
	margin-bottom: 15px;
	text-align: center;
	background: #5c6f88;
	color: #f3dccd;
	border: none;
}

#main form { float: left;}

#main div.location input, #main div.location select {
	float: left;
	height: 18px;
	padding: 4px;
	padding-top: 8px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	background: #9da2ad;
}

#main div.location input#submit{
	float: left;
	height: 30px;
	width: 35px;
	margin-left: 2px;
	padding: 4px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #fff;
}

div.location label {
	float: left;
	clear: both;
	width: 275px;
	font-size: 10px;
	color:#9da2ad;
	margin-top: 5px;
}

div.location label.error {
	float: left;
	clear: both;
	width: 275px;
	font-size: 10px;
	color:#ff0000;
	margin-top: 5px;
}

#message {
	margin: 0;
	padding: 10px;
	font-size: 11px;
	font-weight: bold;	
}

#message.errors {
	color: #990000;
	clear: both;
}

#message.errors strong { color: #990000; }

#message.errors a { color: #990000; text-decoration: underline; }
#message.errors a:hover { text-decoration: none; }


.error { color: #990000; }