@charset "utf-8";
/* Resets */
@import url("reset.css");
/* Web Fonts */
@import url("https://fonts.googleapis.com/css?family=Holtwood+One+SC");


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #424242;

	min-width: 775px;
	background-color: #402b20;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
body:before {
	content: '';
	z-index: 2;
	display: block;
	width: 100%;
	height: 40px;
	position: fixed;
	top: 290px;
	background-image: url(../img/nav_tex.png);
	background-repeat: repeat-x;
	box-shadow: 0 0 8px #000;
}
body:after {
	content: '';
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 330px;
	background-image: url(../img/bg_bark.jpg);
}
/* fog canvas */
#fog_canvas {
	position: fixed;
	top: 130px;
	width: 100%;
	height: 160px;
}

/* quick format, alignment and float access */
.hide {display: none;}
.bold {font-weight: bold;}
.italics {font-style: italic;}
.underline {text-decoration: underline;}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.float_l {float: left;}
.float_r {float: right;}
.clear {clear: both;}
.clear_l {clear: left;}
.clear_r {clear: right;}
.clear_fix:after {
	content: '';
	display: block;
	clear: both;
}

/** CONTENT CONTAINER **/
#content_wrap {
	position: relative;
	z-index: 5;
	padding: 0 40px;
	margin: 175px auto 0;
	max-width: 1280px;
}
#footer_nested {
	padding: 0 60px;
	margin: 0 auto;
	max-width: 1240px;
}
@media only screen and (max-width: 880px) {
	#content_wrap {padding: 0;}
	#footer_nested {padding: 0 20px;}
}
#content_body {
	background-color: #e6d9d1;
	background-image: url(../img/bg_tex.png);
	padding: 0px 20px 20px;
	box-shadow: 0 5px 5px rgba(0,0,0,.65);
}

/* Main Content */
#article_wrap {
	background-color: #f3ece8;
	margin-left: 220px;
	padding: 30px 20px;
	overflow: visible;
	box-shadow: 0 5px 5px rgba(0,0,0,.3);
}
#article_wrap:after {
	content: '';
	display: block;
	clear: both;
}
/* links */
#article_wrap a:link {
	color: #c66227;
	text-decoration: none;
}
#article_wrap a:hover {
	color: #682d0a;
	text-decoration: underline;
}
#article_wrap a:visited {color: #682d0a;}
/* text */
#article_wrap h1 {
	font-size: 2em;
	margin-bottom: 30px;
}
#article_wrap h2 {
	font-size: 1.75em;
	margin-bottom: 24px;
}
#article_wrap h3 {
	font-size: 1.4em;
	margin-bottom: 16px;
}
#article_wrap>h2 {border-bottom: 1px solid #424242;}
#article_wrap>p {
	line-height: 1.5em;
}
#article_wrap>p+p, #article_wrap>figure+p {
	margin-top: 20px;
}
#article_wrap>h2, #article_wrap>h3 {
	margin-top: 40px;
}
#article_wrap>p+ul {margin-top: 20px;}
#article_wrap ul {margin-left: 50px;}
#article_wrap li+li {margin-top: 4px;}

/* figures */
p + figure {margin-top: 20px;}
figure {
	text-align: center;
	margin-bottom: 20px;
}
figure.float_r {
	margin-left: 20px;
}
figure.float_l {
	margin-right: 20px;
}
figure img, figure.normal img {
	width: 100%;
	height: auto;
	max-width: 680px;
	box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
figure figcaption, figure.normal figcaption {
	padding-top: 10px;
	font-size: .75em;
	line-height: 1.75em;
	color: #555;
	max-width: 680px;
	margin: 0 auto;
}
figure.small img, figure.small figcaption {max-width: 400px;}
figure.large img, figure.large figcaption {max-width: 800px;}
figure.float_r img, figure.float_r figcaption, figure.float_l img, figure.float_l figcaption {
	width: auto;
	max-width: none;
	text-align: left;
}
figcaption .source {
	color: #777;
	font-style: italic;
	float: right;
	display: block;
	height: 1em;
	margin-left: 20px;
}
figcaption .source:before {content: 'Source: ';}
figcaption .source+span {
	display: block;
	text-align: left;
}


/* yellowstone header */
#content_head {
	height: 59px;
	background-color: rgba(0,0,0,.5);
	padding: 8px 20px;
	color: #f3ece8;
}
#content_head h1 {
	font-size: 40px;
	letter-spacing: 3px;
	line-height: 59px;
	float: left;
	padding-right: 20px;
	margin-right: 20px;
	border-right: 1px solid #f3ece8;
}
#content_head>div {
	float: left;
	font-size: 18px;
	font-weight: bold;
}
#content_head>div>span {
	display: block;
	padding: 6px 0;
}
#content_head .location {
	font-size: 16px;
	font-weight: normal;
}
#content_head #nps_logo {
	display: block;
	float: right;
}

/* font size adjustment */
#font_size {
	height: 40px;
	line-height: 40px;
	text-align: right;
	font-size: 16px;
}
#font_size span {cursor:pointer;}
#font_size_small {
	color: #757575;
	font-size: 14px;
	font-weight: normal;
}
#font_size_reg {
	color: #424242;
	font-size: 16px;
	font-weight:bold;
}
#font_size_large {
	color: #757575;
	font-size: 20px;
	font-weight: normal;
}

/* Did You Know */
#dyk {
	margin-top: 30px;
	margin-left: 220px;
	overflow: auto;
}
#dyk h2 {
	font-size: 1.25em;
	margin-bottom: 12px;
}
#dyk img {
	float: left;
	border: 1px solid #bbb;
	margin-right: 20px;
}
#dyk_fact {
	color: #555;
	font-size: .875em;
	font-style: italic;
	line-height: 1.65em;
}

/* footer */
footer {
	height: 40px;
	margin: 40px 0;
	background-image: url(../img/nav_tex.png);
	background-repeat: repeat-x;
	box-shadow: 0 0 8px #000;
	position: relative;
	z-index: 5;
}
footer #footer_links, footer #footer_links a {
	font-family: 'Holtwood One SC', serif;
	text-decoration:none;
	color: #f3cba8;
	font-size: 20px;
	line-height: 40px;
	text-shadow: 0 -2px 2px rgba(0,0,0,.65);
}
@media only screen and (max-width: 960px) {
	footer #footer_links, footer #footer_links a {font-size: 17px;}
}
footer #footer_links a {
	-webkit-transition: color .3s, text-shadow .3s;
	-moz-transition: color .3s, text-shadow .3s;
	-ms-transition: color .3s, text-shadow .3s;
	-o-transition: color .3s, text-shadow .3s;
	transition: color .3s, text-shadow .3s;
}
footer #footer_links a:hover {
	color: #f3e0cf;
	text-shadow: 0 0 5px rgba(243,236,232,.75);
}
/* social buttons */
footer #social_btns {
	float: right;
	height: 40px;
	padding: 4px 0;
}
footer #social_btns a {
	display: block;
	width: 32px;
	height: 32px;
	float: left;
	padding-right: 10px;
	font-size: 0;
	background-image: url(../img/social_sprite.png);
	background-repeat: no-repeat;
	border-radius: 4px;

	-moz-background-clip: content;
	-webkit-background-clip: content;
	background-clip: content-box;

	-webkit-transition: background-color .3s, width .3s;
	-moz-transition: background-color .3s, width .3s;
	-ms-transition: background-color .3s, width .3s;
	-o-transition: background-color .3s, width .3s;
	transition: background-color .3s, width .3s;
}
footer #social_btns a:hover {
	width: 172px
}
footer #facebook_btn {background-position: -174px 0px;}
footer #facebook_btn:hover {
	background-color: rgba(30,52,97,.75);
	background-position: 0px 0;
}
footer #twitter_btn {background-position: -174px -32px;}
footer #twitter_btn:hover {
	background-color: rgba(30,67,96,.75);
	background-position: 0px -32px;
}
footer #social_btns #youtube_btn {
	background-position: -174px -64px;
	padding-right: 0;
}
footer #social_btns #youtube_btn:hover {
	background-color: rgba(97,30,30,.75);
	background-position: 0px -64px;
}

footer #bottom_txt {
	clear: both;
	margin-top: 6px;
	color: #a47d5a;
	font-size: .7em;
	text-align: left;
	text-shadow: 0 2px 2px black;
}
footer #bottom_txt span {
	float:right;
}

/* Planning side navigation */
#content_nav {
	float: left;
	width: 200px;
}
#content_nav h2 {
	font-size: 1.25em;
	position: relative;
	top: -14px;
}
#content_nav ul {
	border-top: 1px solid rgba(0,0,0,.25);
	border-bottom: 1px solid rgba(255,255,255,.5);
	overflow: hidden;
}
#content_nav a {
	display: block;
	padding: 8px 0;
	padding-right: 20px;
	color: #424242;
	line-height: 20px;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.25);

	-webkit-transition: background-color .3s, padding-left .3s, padding-right .3s;
	-moz-transition: background-color .3s, padding-left .3s, padding-right .3s;
	-ms-transition: background-color .3s, padding-left .3s, padding-right .3s;
	-o-transition: background-color .3s, padding-left .3s, padding-right .3s;
	transition: background-color .3s, padding-left .3s, padding-right .3s;
}
#content_nav a:hover {
	background-color: rgba(255,255,255,.35);
	padding-left: 20px;
	padding-right: 0;
}
#content_nav a:before {
	content: '';
	display: block;
	float: left;
	margin-left: -20px;
	margin-top: 2px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-left: 14px solid #424242;
	border-bottom: 8px solid transparent;
}
#content_nav a.long_text:before {
	margin-top: 12px;
}



/** MAIN NAVIGATION **/
#nav_main li {
	display: block;
	height: 40px;
	width: 14.2857%;
	float: left;
	font-size: 20px;
}
/*#nav_geo a, #nav_bio a {
	font-size: .8em;
}
#nav_hist a, #nav_gal a {
	font-size: .9em;
}*/
#nav_main a {
	display:block;
	width:100%;
	height:100%;
	font-family: 'Holtwood One SC', serif;
	text-align: center;
	text-decoration:none;
	color: #f3cba8;
	line-height: 40px;
	text-shadow: 0 -2px 2px rgba(0,0,0,.65);

	-webkit-transition: color .3s, text-shadow .3s;
	-moz-transition: color .3s, text-shadow .3s;
	-ms-transition: color .3s, text-shadow .3s;
	-o-transition: color .3s, text-shadow .3s;
	transition: color .3s, text-shadow .3s;
}
@media only screen and (max-width: 960px) {
	#nav_main li {font-size: 17px;}
}
#nav_main a:hover {
	color: #f3e0cf;
	text-shadow: 0 0 5px rgba(243,236,232,.75);
}

#nav_main_wrap {
	height: 40px;
	width: 100%;
	min-width: 775px;
	padding: 0 40px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background-image: url(../img/nav_tex.png);
	background-repeat: repeat-x;
	box-shadow: 0 0 8px #000;
	position:fixed;
	top: 0;
	z-index: 6;
}

/* active tabs */
#nav_main .current>a {
	background-image: url(../img/nav_tex.png);
	background-position: 0 -40px;
	background-repeat: repeat-x;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	color: rgba(22,15,12,.75);
}
#nav_main .current:before {
	content:'';
	display: block;
	background-image:url(../img/cut_bark.png);
	width: 20px;
	height: 40px;
	float: left;
	position: absolute;
	margin-left: -9px;
}
#nav_main .current:after {
	content:'';
	display: block;
	background-image:url(../img/cut_bark.png);
	background-position: -20px 0;
	width: 20px;
	height: 40px;
	float: right;
	position: relative;
	left: 9px;
	top: -40px;
}



/* Form Styling */
label, input, form .text {
	display: block;
	float: left;
	margin-bottom: 6px;
}
input.text, select {height:30px;}
form .text, select {
	border:1px solid rgba(66,66,66,.5);
	-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 #fff;
	box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 #fff;
	padding:4px;
	font-size: 1em;
	background-color: #fff;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:border-color 300ms, background-color 300ms;
	-moz-transition:border-color 300ms, background-color 300ms;
	-o-transition:border-color 300ms, background-color 300ms;
	-ms-transition:border-color 300ms, background-color 300ms;
	transition:border-color 300ms, background-color 300ms;
}
form .text:focus, select:focus {
	border-color:rgba(66,66,66,1);
	background-color: rgba(255,255,255,1);
	-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 #fff;
	box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 #fff;
	outline:none;
}
label {
	line-height:30px;
}
input[type=submit] {
	clear:both;
	height: 30px;
	width: 160px;
}
form .invalid {
	border-color:#F66;
}
form .invalid:focus {
	border-color:#A00;
	-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(200,0,0,.75);
	box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(200,0,0,.75);
}

.err_bubble {
	border:1px solid #bc0000;
	border-radius:8px;
	box-shadow:inset 0 1px rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.5);
	position:absolute;
	max-width:300px;
	padding:4px 10px;
	color:#fff;
	text-align:center;
	text-shadow:0 -1px 0 rgba(0,0,0,.5);
	pointer-events:none;
	opacity:0;

	background: #bc0000; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff2323 0%, #bc0000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff2323), color-stop(100%,#bc0000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff2323 0%,#bc0000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff2323 0%,#bc0000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff2323 0%,#bc0000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff2323 0%,#bc0000 100%); /* W3C */
}
.err_bubble:after {
	content:'';
	display:block;
	width:0;
	height:0;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:8px solid #bc0000;
	position:absolute;
	margin-top:4px;
	left:30%;
}
@media only screen and (min-width: 480px) {.err_bubble {max-width:400px;}}
