/* ----------- Baseline values */
p, ul, li, h1, h2, h3 {
	margin: 0px;
	padding: 0px;
}
a:link { color: #222601; text-decoration: underline;  font-weight:bold; }   /* text-decoration: none;  */  
a:visited {color: #53594D; }
a:hover{ color:orange;  }
a:active { color:#FF7200;  }  
 
 a img{ 
 border-color: #3E4441;
	border-width: 2px;
	border-style: solid;
 } /* kills the blue border around the images when they're links */
 
#pageLogo a img { 
 	border-style: none;
 }
 
#pageLogoShort a img { 
 	border-style: none;
 }

ul {list-style-type: none; }

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:  .8em; 
	margin: 0px;
/* to center the page */
	padding: 0px;
	text-align: center;
	background-color: #333333;
}

div#centering { width:990px; margin:10px auto; padding:0em;  text-align: left;  background-image: url(background-gradiant.JPG); background-repeat:repeat-x; background-color: #FFF;}    
  /*  background-color: #C4C4A8 is gradient base   */ 
   
div#headerTall {
	padding: 0em;
	height: 410px;
	margin-bottom: 0px;
	background-color: #C4C4A8;
}  

div#headerShort {
	padding: 0em;
	height: 319px;
	margin-bottom: 0px;
	background-color: #C4C4A8;
}  
   

/*div#body_container { clear: both; margin-top:50px; }
 ------------ Common to all pages */

div#indexLogo {
	float: left;
	margin-top: 25px;
	margin-left: 5px;
	height: 248px;
	width: 240px;
	background-image: url(logo/logo240.PNG);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
div#pageLogo {float:left;  margin-top: 5px; margin-left: 5px; height: 248px; width: 240px; }

            
div#masthead {
	float: left;
	height: 210px;
	width: 730px;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border-color: #3E4441;
	border-width: 2px;
	border-style: solid;
	margin-top: 5px;
	margin-left: 5px;
}
div#masthead h1  {
	padding-left: 20px;
	padding-top: 30px;
	font-size: 3.0em;
	font-weight: normal;
	color: #FFF;
}
div#masthead h2  { padding-left: 30px; padding-top: 10px; font-size: 3.0em; font-weight: normal; color: #FFF;}
div#masthead h3  { padding-left: 50px; margin-top: 0px; font-size : 2.0em; font-weight: normal; color: #FFF;}

/* ////////////////////////////// Story Pages \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
#headerStoryPg1 {
		padding: 0em;
	height: 420px;
	margin-bottom: 0px;
	background-color: #C4C4A8;
} 
 
#headerStory {
	padding: 0em;
	height: 150px;
	margin-bottom: 30px;
	background-color: #C4C4A8;
} 
#pageLogoStory {float:left;  margin-top: 5px; margin-left: 5px; height: 130px; width: 240px;  }
#pageLogoStory a img {margin-left:40px; border:none;}
#mastheadStory {
	float: left;
	height: 43px;
	width: 730px;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	margin-top: 5px;
	margin-left: 5px;
}

/* ////////////////////// Story Pages \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
#story { padding-left:20px; padding-right:20px; }

p.storyText { margin-bottom:10px; font-size:1em;}

/* ////////////////////////////// Google Adsense \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
#adsenseLink {
	float: left;
	width: 220px;
	height: 92px;
	margin-left: 20px;
	margin-top: 5px;
	}

#adsense {
	float: right;
	width: 730px;
	height: 92px;
	margin-top: 5px;
}  

#adsenseLinkRp {
	float: left;
	width: 250px;
	height: 92px;
	margin-left: 0px;
	margin-top:250px;
	}

#adsenseBannerRp {
	float: right;
	width: 730px;
	height: 92px;
	margin-top: 5px;
}  

#adsenseColLeft {
	
		margin-top: 15px;
}  


/* /////////////////////////// Index page \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

div#colLeft {
	width:280px;
	float:left;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	margin-left:10px;
	margin-right:10px;
}

div#colLeft h2 {
	font-size: 1.5em;
	margin-top: 30px;
	padding-bottom: 5px;
}

div#colRivers {
	width:320px;
	float:left;
	padding-left:0px;
	margin-right:10px;
	margin-top:10px;
}

div#colRivers ul li {
	margin:5 10 5 10px;	
	padding:5px;
}

/* div#colRivers a img{
    border-color:orange; 
}kills the blue border around the images when they're links */


/* ------------------- Column Headers -----------------------------------*/

div.colTitle {  height:30px; text-align:center; background-color: #53594D; border-top: solid #6B7463 10px; border-bottom: solid #191D1C 2px; }
div.colTitle h2 {
	font-size: 1.4em;
	color: #C4C4A8;
	padding-top: 5px;
	font-family: Arial, Helvetical, Geneva, sans-serif;
}
 /* div.colTitle a { float:left; display:inline; padding-left: 20px; font-family: Georgia, Sans-Serif, Verdana;   }
div.colTitle a:visited { color: #222601; } 
div.colTitle a:hover, a:active { color: #FFF;  } so links back to home always show the original link color */

/* ------------------- Topics List --------------------------------------------*/

div.topicList {float:left; width:350px; padding-left: 0px;  }   
div.topicList ul { list-style-type: none; margin-top: 0px; padding-left:5px;}           
div.topicList li  { margin-top: 3px; padding-top: 0px; border-bottom: solid #3E4441 2px;   } /*   background-color: #858575; distance between boxes and padding above links */                         
div.topicList a {  font-size: .8em; padding-left: 10px; font-family: Georgia, Sans-Serif, Verdana;  }  
div.topicList p {  font-size: 1em; padding-left:20px; padding-bottom: 5px; padding-right: 10px; line-height: 1.5; }
div.topicList p a { font-size: 1em; } 

/* ------------------- Rivers List */

div.riverList {float:left; width:640px;  padding-left: 0px;  }
div.riverList ul { margin-top: 5px;   } /* background-color: #7F7F7F */
div.riverList li { width: 625px; height: 106px;  margin-bottom: 5px; margin-left: 6px; border: solid #6D7C75 2px; } /* background-color: #292929;  */

div.riverInfo {float: left; width: 185px; height: 106px; background-color: #A1A6A0; }  /*  */
div.riverImgStrip {float:left; width:410px; height: 106px; background-color: #333; padding-left: 15px;  padding-right: 15px; }

div.riverImg {float:left; width: 133px; height: 100px; padding-left: 3px; margin-top: 3px;   } /* wrapper for photos that have lightbox */

p.riverName {padding-left: 10px; padding-top: 0px;  }
/* p.riverSubtitle {padding-left: 15px; padding-top: 3px; font-weight: bold; font-size: 1.1em; color: #AAA;} */
p.riverText {padding-left: 15px; line-height: 1.5; font-weight: normal; font-size: 1em;} /* color: #AAA; */

a.riverLink {  font-size: 1em;  font-weight:bold;} 
a.campSites {  padding-left: 10px;} 
p.gEarth    {  padding-left: 0px;  font-weight:bold; } 


/* /////////////////////////// Topic Pages \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

div.topicText { margin-top: 0px; margin-right: 20px;  }
div.topicText h2 { font-weight: bold; margin-top: 1em; margin-left: 10px; font-size: 1.6em; }
div.topicText h3 { font-weight: bold; margin-top: 1em; margin-left: 10px; font-size: 1.2em; }
div.topicText p {  font-weight: normal; margin-bottom: 1em; margin-left: 20px; line-height: 1.8;}
div.topicText ul {list-style-type: disc; padding-top: 10px; padding-bottom: 10px;  padding-left: 40px;}

div.topicPhotos {float:left; width:990px; padding-bottom: 3px; margin-bottom: 10px; }
div.topicPhotos ul { margin: 0 0 0 18px; padding: 0px;  } 
div.topicPhotos li { display: inline;}

div.topicImg {float:left; width: 133px; height: 100px; padding-left: 3px; margin-top: 3px;  } /* wrapper for photos that have lightbox */

div.topicPhotosVert {float:left; width:990px; padding-bottom: 3px; margin-bottom: 10px; }
div.topicPhotosVert ul { margin: 0 0 0 10px; padding: 0px;  } 
div.topicImgVert {float:left; width: 75px; height: 100px; padding-left: 5px; margin-top: 3px;  } /* wrapper for photos that have lightbox */

div.storyPhotos {float:left; width:965px; padding-bottom: 3px; margin-bottom: 10px; }
div.storyPhotos ul { margin: 0px; padding: 0px;  } 
div.storyPhotos li { display: inline;}

div.storyPhotosVert {float:left; width:965px; padding-bottom: 3px; margin-bottom: 10px; }
div.storyPhotosVert ul { margin: 0px; padding: 0px;  } 
div.storyPhotosVert li { display: inline;}
div.storyImgVert {float:left; width: 75px; height: 113px; padding-left: 4px; margin-top: 3px;  } /* wrapper for photos that have lightbox */


/* /////////////////////////// River Pages \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

#lnkHome {
	font-size: 1.4em;
	margin-top: 20px;
	margin-left: 10px;
	}

/* ------------------- River Page Data column */
div#riverInfoCol {
	float: left;
	width: 520px;
	margin-top: 10px;
	padding-left:0px;
	
}
div#riverInfoCol p {
	font-weight: normal;
	line-height: normal;
	margin-left: 15px;
}
div#riverInfoCol a {font-size: 1em;  } /* font-weight: bold; */
div#riverInfoCol ul {list-style-type: disc; padding: 10px; }
div#riverInfoCol ul li {margin-left: 20px;  }

/* ------------------- River Page photo gallery column */

div#riverPhotosCol { float: right; 	width: 440px; padding-left:25px; } 
div#riverPhotos ul { margin: 0px; padding: 0px;  }
div#riverPhotos ul li {width:410px; margin-left:30px;} 

/* ------------------- River Page google map column
div#riverGmapCol {float:left; width:490px; padding-left:10px; } */
div#gmapContainer {border: 1px solid silver; width: 500px; height: 480px; margin-left:15px; margin-top: 20px;  }
div#riverGmap { height: 100%; }


/* ---------------------- Specific to Google Earth Page */
table.mapRiverList { margin-top: 20px;}
td.showCamps { text-align:center; }
td.showRapids { text-align:center; }
p.whiteText { color: #FFF; }

/* ------------------ Footer */
#footer {clear:both; padding-left: 30px; padding-top: 25px;  background-color: #C4C4A8; height: 40px; margin-top: 3px;} /* */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* slightly enhanced, universal clearfix hack */
.clearfix { display: inline-block; }
 div#footer a { font-weight:bold; } 

/* start commented backslash hack \*/ * html .clearfix { height: 1%; }
.clearfix {
	display: inline;
} /* close commented backslash hack */ 

/* ------------------ Lightbox */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../_images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../_images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }