/* ------------  Body CSS   ------------ */

body {margin: 10px; padding: 0; width: 970px; background: #ccc url(images/darkgradient.png)  0 0 repeat-x;}
h1 {margin-top:  -20px; color: #933;}

#payloom-header h2 {color: #663300;}
#payloom-wrapper .viewcart_button {display: none;}
.payloom-show-details-link {display:none;}
#payloom-footer a {color:#fff;}
#payloom-footer a:hover {color:#fff;}
#payloom-wrapper #staff_hand #color {position: absolute; top: 10%; right: 7%;}
#payloom-wrapper #staff_hand #brass {position: absolute; bottom: 2%; right: 2%;}
#payloom-wrapper #model_image {float: right;}

rapidsearch-header h2 {color: #663300;}

/* ------------  Header CSS  ------------ */

#header-wrapper {width: 100%;-moz-border-radius-topleft: 8px;  -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;}
#header {width: 100%; margin:  0; padding: 0; }
#slogan {width: 100%; height: 56px; margin: 10px auto 0; padding: 15px 0; text-indent: -5000px; background: url(images/HA_Slogan.jpg) 50% 50% no-repeat ; z-index: 101;}

#body-wrapper {position: relative; width: 100%; background-color: #ffffcc; border:  1px solid red; }

/* ------------  Sidebar and Navigation CSS   ------------ */

#sidebar {float:left; padding: 0 10px 0 10px; width: 180px;background-color: #FFFFCC;}

#navigation {
	width: 150px;
	margin: 20px 0 20px 10px;
	padding: 120px 10px 10px;
	line-height: 2.0em;
	font: bold 100% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	background: #0F6F0F  url(images/hikeamerica_logo.png) 50% 2% no-repeat;
	position: relative;
	z-index: 101;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	behavior: url(http://www.hikeamerica.com/Assets/PIE.htc);  /* Add Rounded Corners to IE6-8 */
}

#navigation li#products, #navigation li#new_products {margin: 12px 0 0 0; font-variant: small-caps; font-size: large; font-weight: bolder; letter-spacing: 2px; color: #fff;}
#navigation li#map_search, #navigation li#mail_order {margin: 20px 0 0; }

ul#navmenu {margin: 0; padding: 0; width: 150px; list-style:none;}
ul#navmenu  a  {
background-position: 0 0;
width: 150px;
height: 30px;
display: block;
margin: 6px 0;
text-indent: -5000em;
}

li#home a  {background: url(images/Buttons/Home_Btn.png) no-repeat 0 0;}
li#medallions a  {background: url(images/Buttons/Medallions_Btn.png) no-repeat 0 0;}
li#staffs a  {background: url(images/Buttons/Staffs_Btn.png) no-repeat 0 0;}
li#posters a  {background: url(images/Buttons/Posters_Btn.png) no-repeat 0 0;}
li#tshirts a  {background: url(images/Buttons/Tshirts_Btn.png) no-repeat 0 0;}
li#map_search a  {background: url(images/Buttons/MapSearch_Btn.png) no-repeat 0 0;}
li#text_search a  {background: url(images/Buttons/TextSearch_Btn.png) no-repeat 0 0;}
li#new2012 a  {background: url(images/Buttons/Newin2012_Btn.png) no-repeat 0 0;}
li#new2011 a  {background: url(images/Buttons/Newin2011_Btn.png) no-repeat 0 0;}
li#new2010 a  {background: url(images/Buttons/Newin2010_Btn.png) no-repeat 0 0;}
li#new2009 a  {background: url(images/Buttons/Newin2009_Btn.png) no-repeat 0 0;}
li#mail_order a  {background: url(images/Buttons/MailOrder_Btn.png) no-repeat 0 0;}
li#about a  {background: url(images/Buttons/About_Btn.png) no-repeat 0 0;}
li#contact a  {background: url(images/Buttons/Contact_Btn.png) no-repeat 0 0;}

ul#navmenu a:hover {background-position: 0px -30px;}
ul#navmenu a:active,  ul#navmenu li.current a {background-position: 0px -60px;}

/* ------------  Content CSS  ------------ */

#content-wrapper {background-color: #FFFFCC; margin: 0; padding: 0;width: 100%;}
#content {float: right ;margin-right: 0; padding: 0; width: 770px; }

/* ------------ Footer CSS - Start   ------------ */

#footer-wrapper {clear: both; width: 970px; background-color: #0f6f0f;  height: 16px; text-align: center;-moz-border-radius-bottomleft: 8px;  -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }

#footer {clear: both;width: 970px; background-color: #0f6f0f;  height: 16px; color: #999;text-align: center;-moz-border-radius-bottomleft: 8px;  -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }

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

		Footer / Hike America
		
	----------------------------------------- 
*/
footer {
  width: 970px;
  height: 72px;
	margin: 0; /*  0 -10px -10px; */
	padding:0;
	color: white;
	background-color: #0f6f0f;
	/* Bottom Round Corners - uses PIE for IE */
	-moz-border-radius-bottomleft: 8px;  /* FF1+ */
	-moz-border-radius-bottomright: 8px; 
	-webkit-border-bottom-left-radius: 8px; /* Saf3-4 */
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px; /* Opera 10.5, IE 9, Saf5, Chrome */
	border-bottom-right-radius: 8px;
	behavior:url(PIE.htc); /* IE 6-8 via PIE */
	}

.push {height: 72px; clear:both; }


/* footer nav  */

.footer_nav {

   margin: -16px auto 0 280px;
   padding: 0;
   }
.footer_nav li {
   list-style: none;
   float: left;
   }
.footer_nav li a {
   display: block;
   padding: 3px 0px;
   text-transform:capitalize;
   /* font-variant: small-caps; */
   text-decoration: none; 
   color: #fff;
   font-size: 0.8em;
   
   }
.footer_nav li a:hover {
   font-weight: bold;
   }
   
/*  End footer nav  */

#sitemap_link a:link,
#sitemap_link a:visited,
#sitemap_link a:hover,
#sitemap_link a:active {
	color: #fff;
	text-decoration: none;
}
.footer_overview {
	margin-left: 10px;
}
.footer_overview p {
	color:#fff;
	clear: both;
	font-size: 0.7em;
	text-align: center;
	padding-top: 2px;
}
.footer_copyright {
	margin: -11px 0 0 0;
	padding:  0px 0;
	background-color:transparent;
}
.footer_copyright p {
	margin: 0;
	padding: 0;
	text-align:center;
	color: #fff;
}
.footer_copyright a[href^="http"] {
	font-weight:normal;
	color:#fff;
	text-decoration: none;
	padding-right: 0;
	background:none;
	content:normal;
}

.footer_copyright a:link,
.footer_copyright a:visited,
.footer_copyright a:hover,
.footer_copyright a:active {
	color: #fff;
	}
	
.footer_copyright a:hover {
	font-weight: bold;
	}
/* End Footer  */



/* -------------------- Overlay CSS ---------------------------------- */

/* -------------------- Free Shipping Overlay -------------------- */

a.fs_trigger {position: absolute; right: 40px; top: 214px; }
.offer_details {margin-left: -18px; }

	/* the overlayed element */

.fs_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#ddd;
	
	width:500px;	
	min-height:300px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;
	box-shadow: 0 0 90px #000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

}

/* close button positioned on upper right corner */

.fs_overlay .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}
/* styling for elements inside overlay */
	#fs_details {
		position:absolute;
		top:10px;
		left:30px;
		font-size:20px;
		line-height:1.15em;
		color:#663300;
		width:440px;
}
	#fs_details h1 {
		color:#fff;
		background-color: #993300;
		font-size:24px;
		text-align:center;
		padding: 8px 0;
		margin: 0;
}

/* container for external content. uses vertical scrollbar, if needed */

	div.fs_contentWrap {
		height:300px;
		overflow-y:auto;
}

/* -------------------- Apply Medallions Slide Ot -------------------- */

	/*a.am_trigger {position: absolute; right: 20px; top: 0; } */

	/* the overlayed element */

.slide-out-div {
	
	/* must be initially hidden 
	display:none;*/
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#ddd;
	
	width:600px;	
	min-height:600px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;
	box-shadow: 0 0 90px #000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

/* close button positioned on upper right corner */

/*.slide-out-div .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
} */
/* styling for elements inside overlay */
	.slide-out-div {
		/* position:absolute;
		top:10px;
		left:10px;*/
		padding: 0 30px;
		font-size:20px;
		line-height:1.3em;
		color:#663300;
		width:540px;
}
	.slide-out-div h2 {
		width:  100%;
		color:#fff;
		background-color: #993300;
		text-align:center;
		margin-top: 10px;
		padding: 8px 0;
		
}
	.slide-out-div h3 {
		color:#993300;
		margin-left:20px;
		line-height:1.1em;
}
/* -------------------- Find Medallions Overlay -------------------- */

a.fm_trigger {position: absolute; right: 20px; top: 0; }

	/* the overlayed element */

.fm_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#ddd;
	
	width:600px;	
	min-height:250px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;
	box-shadow: 0 0 90px #000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

/* close button positioned on upper right corner */

.fm_overlay .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}
/* styling for elements inside overlay */
	#fm_details {
		position:absolute;
		top:10px;
		left:10px;
		padding-left: 30px;
		font-size:20px;
		line-height:1.15em;
		color:#663300;
		width:540px;
}
	#fm_details h2 {
		color:#fff;
		background-color: #993300;
		text-align:center;
		padding: 8px 0;
		margin-left:-20px;
}
	#fm_details h3 {
		color:#993300;
		margin-left:20px;
		line-height:1.1em;
}

/* container for external content. uses vertical scrollbar, if needed */

	div.am_contentWrap {
		height:600px;
		overflow-y:auto;
}
	div.fm_contentWrap {
		height:300px;
		overflow-y:auto;
}


/* -------------------- Start of Page Specific CSS ------------------- */

/*  ------------ Home Page CSS ------------ */

div.announce_banner {position: absolute; right: 20px; top: -30px; }

/* .announce_banner {margin:  -5px 0 0 0; } */
.announce_banner img {
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-o-transition: all 1s ease;
		-ms-transition: all 1s ease;		
		transition: all 1s ease;
		}
.announce_banner:hover img {
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
		-o-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		transform:rotate(360deg);								
		}


div.secureordering {position: absolute; right: 20px; top: 150px; }
div.secureordering p {margin-bottom: -1px; color: #993300;}
		
/* div#navigation {width: 150px; height: 540px; margin: 20px 0 200px 10px;} */

div#introduction {margin: 0 20px 0 0; text-align: justify;}	
		
div.HA_address {margin-top: -20px; text-align: center; font-size: 18px; font-weight: bold;}

div#contentFooter {float :left; padding:10px 20px;}
				
div#carousel {margin:0 auto 0 0px; width:490px; height:206px; padding:0; overflow:scroll; border:2px outset #0f6f0f;}
div#carousel ul {position: relative; width: 1920px; margin: 0; padding: 0; list-style-type: none;}
div#carousel li {display: inline; float: left;}
.textholder {font: 12px Arial, Helvetica, sans-serif; color: #000; background-color: transparent; text-align: center; padding: 2px 4px 0 4px; -moz-border-radius: 4px 4px 0 0;}
				
span.offer_details {font-size: 14px; color: #933;}

/* --------------- the overlayed element ------------------ */

.external_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#bbb;
	
	width:600px;	
	min-height:600px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */

.external_overlay .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}
/* styling for elements inside overlay */
	#details {
		position:absolute;
		top:10px;
		left:30px;
		font-size:20px;
		line-height:1.15em;
		color:#663300;
		width:540px;
}
	#details h2 {
		color:#fff;
		background-color: #993300;
		padding: 8px 0;
		margin: 0;
}
	#details h3 {
		margin-left:20px;
}

/* container for external content. uses vertical scrollbar, if needed */

	div.contentWrap {
		height:600px;
		overflow-y:auto;
}
		
/*  ------------ Map Search CSS ------------ */

#usa {margin: 0; padding:  0;}
img {margin: 0; padding:  0;}

/* ------------  New for 2012 Page CSS - Start ------------  */


div#new2012 h2 {margin: 30px 0 0 0; padding: 0; text-align: left; font-size: 24px; color: #933; }

div#new2012 ul {margin: 0; padding:0; list-style: none;}
div#new2012 ul li {float: left; margin: 0px 0 0 0; padding: 0;  color: #663300; font-weight: normal;}
div#new2012 ul li a:link {text-decoration:none; color: #663300;}
div#new2012 ul li a:hover {font-weight: bold;  color: #663300; }

#new2012 #medallions li {width:160px; height: 166px; margin: 15px 15px;} /* padding: 0 0 0 20px; */
#new2012 #medallions li img { margin: auto auto;}
#new2012 #posters img {width: 250px; height: 220px; margin: 0; padding: 0;}

#clearfloats {clear: both;}

/* ------------  New for 2012 Page CSS - End  ------------ */

/* ------------  New for 2011 Page CSS - Start ------------  */


div#new2011 h2 {margin: 30px 0 0 0; padding: 0; text-align: left; font-size: 24px; color: #933; }

div#new2011 ul {margin: 0; padding:0; list-style: none;}
div#new2011 ul li {float: left; margin: 0px 0 0 0; padding: 0;  color: #663300; font-weight: normal;}
div#new2011 ul li a:link {text-decoration:none; color: #663300;}
div#new2011 ul li a:hover {font-weight: bold;  color: #663300; }

#new2011 #medallions li {width:160px; height: 166px; margin: 15px 15px;} /* padding: 0 0 0 20px; */
#new2011 #medallions li img { margin: auto auto;}
#new2011 #posters img {width: 250px; height: 220px; margin: 0; padding: 0;}

#clearfloats {clear: both;}

/* ------------  New for 2011 Page CSS - End  ------------ */


/* ------------  New for 2010 Page CSS - Start ------------  */


div#new2010 h2 {margin: 30px 0 0 0; padding: 0; text-align: left; font-size: 24px; color: #933; }

div#new2010 ul {margin: 0; padding:0; list-style: none;}
div#new2010 ul li {float: left; margin: 0px 0 0 0; padding: 0;  color: #663300; font-weight: normal;}
div#new2010 ul li a:link {text-decoration:none; color: #663300;}
div#new2010 ul li a:hover {font-weight: bold;  color: #663300; }

#new2010 #medallions img {width: 160px;  margin: 0; padding: 0 0 0 20px;}
#new2010 #posters img {width: 250px; height: 220px; margin: 0; padding: 0;}

#clearfloats {clear: both;}

/* ------------  New for 2010 Page CSS - End  ------------ */

/* ------------  New in 2009 Page CSS - Start ------------ */


div#new2009 h2 {margin: 20px 0 0 0; padding: 0 0 0 0; color: #663300; text-align: center; line-height: 1.1em; border-bottom: 1px solid #0f6f0f; text-decoration: none;}
div#new2009 h2 a:link {color: #0f6f0f; text-decoration: none;}
div#new2009 h2 a:visited {color: #999999; text-decoration: none;}
div#new2009 h2 a:hover {color: #0f6f0f; font-weight: bold; text-decoration: none;}
div#new2009 ul {float: left;  margin: 5px 0 10px 0; padding: 0;  width: 100%; color: #663300; list-style: none; }
div#new2009 ul li { float: left; margin: 0; padding: 0;  width: 33%; font-weight: normal; color: #663300;}
div#new2009 ul li a:link {text-decoration:none; color: #663300;}
div#new2009 ul li a:visited {text-decoration:none; color: #999999;}
div#new2009 ul li a:hover {font-weight: bold;  color: #663300; }

/* ------------  New in 2009 Page CSS - End  ------------ */

/* ------------ Mail Order Page CSS  ------------ */

.secureordering2 {float: right; padding-right:  10px;}
.order_form {color: #933; font-weight: bold;}


/* ------------ About Page CSS - Start ------------ */

#about_page {margin: 0 0 0 0; padding: 0 0 0 0;}
#about_page h1 {margin: -20px 0 0 0; padding: 0 0 0 0;}
#about_page h2 {margin: 10px 0 5px 0; padding: 0 0 0 0;}
#about_page p {margin: 0; padding: 0 10px 0 0; font-family: Verdana, Arial, sans-serif; text-align: justify;}
#about_page li {margin: 0 0 0 0; padding: 0 0 0 0; font-family: Verdana, Arial, sans-serif;}
#about_page strong {font-family: Georgia, Times, "Times New Roman", serif; font-size: 18px; color: #0f6f0f;}

#staffproduction {float: right; padding: 0 10px;}
#medallionproduction {float: right; padding: 0 10px;}
.carousel {margin:0 0 0 10px; width:333px; height:212px; padding:0 0 0 10px; overflow:scroll; }
.carousel ul {position: relative; width: 1665px; margin: 0; padding: 0; list-style-type: none;}
.carousel li {display: inline; float: left; }
.textholder {font: 12px Arial, Helvetica, sans-serif; color: #000; background-color: transparent; text-align: center; padding: 2px 4px 0 4px; -moz-border-radius: 4px 4px 0 0;}


#about_page blockquote {margin: 0 3em 0 3em; padding: 0; font-size: 18px; border:none;}

#about_page blockquote .source {text-align:right; font-style: normal; margin: 0em  5em 0 0; color: #933;}

#footer-header {font-family: Verdana, Arial, sans-serif; color: #999;}
#footer {font-family: Verdana, Arial, sans-serif; color: #999;}

/* Attaching Medallions Modal Window CSS */

#content #about_page .poplight {
	display: block; margin-top: -180px; padding: 0;
}

/* ------------ About Page CSS - End ------------ */


/* ------------ Contact Page CSS ------------ */


#contact_info {width: 300px; margin: 0 0 0 10px; padding: 0; }


#commentForm {width: 350px; float:right; margin-top: -170px; margin-right: 30px;}
#commentForm label {margin: 0;font-weight: bold;width: 300px;}
#commentForm input {padding: 0 10px 10px 0; width:300px; font-family: Verdana, Helvetica, sans-serif;}
#commentForm textarea {padding: 0 10px 10px 0; width: 300px; height: 80px; font-family: Verdana, Helvetica, sans-serif; }
#commentForm input.submit-button {margin-left: 210px; margin-top: 10px; padding: 5px 10px; width: 100px; font-weight: normal; background: #933; color: #fff; font-size: small; font-family: Verdana, Helvetica, sans-serif; -moz-border-radius: 8px; -webkit-border-radius: 8px;}
#comment_Form textarea:focus, #contact-ha input:focus {border: 2px solid #ff4f00;}
#commentForm label.error { margin-left: 10px; color: #933;}

/* ------------ Contact Page CSS - End ------------ */


/*  ------------ State Map Pages CSS  ------------  */

#state_map {float: right;}
#park_list_sidebar {float: left; margin: 10px 0 0 40px; }
#park_list_sidebar ul {list-style-type: none; }
#park_list_sidebar li a:link {color: #663300; text-decoration: none; }
#park_list_sidebar li a:hover {color: #663300; font-weight: bold; }

/*  ------------ State Map Pages CSS - End ------------  */



/*  ------------ Top of Page Button CSS  ------------ */

#topofpage {margin-bottom: 2%; }
#topofpage a:link {margin-left: 80%; }
a#pagetop {margin-left: 80%;}

/*  ------------ Footer CSS - Start   ------------ */

#footer-wrapper {clear: both; width: 970px; background-color: #0f6f0f;  height: 16px; text-align: center;-moz-border-radius-bottomleft: 8px;  -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }

#footer {clear: both;width: 970px; background-color: #0f6f0f;  height: 16px; color: #999;text-align: center;-moz-border-radius-bottomleft: 8px;  -moz-border-radius-bottomright: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }

/*  ------------ Footer CSS - End  ------------ */