/* ========= WSC Framework stylesheet pulled 20070913 ========= */
/* ========= Note that some styles are changed in custom ====== */

/*     * html is used for properties that only MSIE6 can understand.      */           
* html .picleft, * html .picright {
	margin-top: 20px;
}

/*------------   Image styles, alignment styles    ----------*/
/*------------   Turn off borders on all images (you will not need border=0 on images)   ----------*/
img {
		border: none;
}

/*----  Center an image horizontally, on its own line  ----*/
.imgcenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*-------  To center an object   --------*/
.center {
	text-align: center;	
}

/*------------   Vertically align an element in the middle    ----------*/
.middle {
	vertical-align: middle;
}

/*------------   Vertically top-align contents in a table cell    ----------*/
td {
		vertical-align: top;
}	

/*------------   General layout styles    ----------*/

/*----  ID, settings  for the main page table  ----*/
#contenttable {
	width: 100%;
	clear: both;
}

/*---  Styles to set up a left and right content area (about 1/2 the width of the #mainbody content area). Using tables is an alternative to this. Needed to add clear:both to the leftside style as without a clear then when a window is expanded wide enough, the right side would appear below the left side.   ----------*/
.leftside {
	float: left;
	width: 48%;
	clear: both;
}

.rightside {
	float: right;
	width: 48%;
}

/*-------------------------------------------------------------*/
/*------------   General hyperlink styles    ----------*/
a:link {
		color: #1144ff;
		text-decoration: underline;
}
	
a:visited {
		color: purple;
		text-decoration: underline;
}
	
a:hover, a:active {
		text-decoration: none;
}

/*------------   General text-formatting styles    ----------*/
.alignleft {
	text-align: left;
}

.alignright {
	text-align: right;
}

/*------------   To create smaller text, bold text, italicize text    ----------*/
.smaller  {
		font-size: 90%;
}
.larger  {
		font-size: 120%;
}
.bold {
	  font-weight: bold;
}

.italics {
	  font-style: italic;
}

/*------------------------------------------------------------------------------------------------------*/
/*------    Top navigation bar styles (generally the black topics bar)    ------------*/
#topnav {
	background-color: #222222;
	width: 100%;
	padding-top: 4px;
	padding-bottom: 5px;
	margin-bottom: 25px;
	font-weight: bold;
	font-size: .9em;
	clear: both;
}
	
#topnav img {
		padding-left: 5px;
}
	
#topnav a:link, #topnav a:visited {
		color: white;
		margin-right: 8px;
		text-decoration: none;
}
	
#topnav a:hover, #topnav a:active {
		color: orange;
		text-decoration: underline;
		margin-right: 8px;
}
	
/*------    Top sub-navigation bar styles (generally the grey topics bar)    ------------*/
#subnav {
	background-color: #666666;
	font-weight: bold;
	font-size: .9em;
	width: 100%;
	padding-top: 4px;
	padding-bottom: 5px;
	margin-top: -25px;
	margin-bottom: 25px;
}
	
#subnav a:link, #subnav a:visited {
		color: white;
		margin-right: 8px;
		text-decoration: none;
		margin-left: 5px;
}
	
#subnav a:hover, #subnav a:active {
		color: orange;
		margin-right: 8px;
		margin-left: 5px;
		text-decoration: underline;
}

/*---------   Left side bar styles   ----------*/
/*---------   These link styles must be in the order as shown here.   ----------*/
#leftbar a:visited  {
		text-decoration: none;
		color:blue;
}	
		
#leftbar a:hover, #leftbar a:hover, #leftbar ul li a:hover, #leftbar ul li a:active, #leftbar ul li ul li a:hover, #leftbar ul li ul li a:active {
		text-decoration: underline;
}

/*---------   General styles for the left side area, and for paragraphs, and for the H2 level headings    ----------*/
#leftbar {
	border-right: 1px solid gray;
	font-size: .9em;
	margin-left: 5px;	
	margin-right: 20px;
	padding-right: 15px;
	margin-bottom: 20px;
   	width: 200px;
}

#leftbar p {
		margin-top:.5em;
		margin-bottom:.5em
}

/*---------   This is the default leftbar header, which is the gradient blue, with white text. If you change to a different color JPG, also change the background color to match.    -------*/
#leftbar h2 {
		background-color: #004499;
		font-size: 100%;
		padding: 4px;
		font-weight: bold;
		color: #ffffff;
		margin-top: 12px;
		margin-bottom: 10px;
}

/*---------   Lists in the left bar need lots of reformatting, especially horizontal and vertical spacing, and it has to extend down to 3 nested levels.   ----------*/
#leftbar ul, #leftbar ul li, #leftbar ul li ul li {
		list-style-type: none;
		color: #333333;
		padding-left: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 5px;
}

#leftbar ul {
		margin-bottom: 15px;
}
	
#leftbar ul li a:link {
			text-decoration: none;
}
	
#leftbar ul li ul li {
		list-style-type: disc;
		font-weight: normal;
		line-height: 1.2em;
		color: #333333;
		padding-top: 2px;
		margin-bottom: 1px;
		margin-left: 15px;		
}
	
#leftbar ul li ul li ul li {
			list-style-type: circle;
			margin-left: 10px;	
}
	
#leftbar ul li ul {
			margin-bottom: 0px;
}
	
#leftbar ul li ul li a:link, #leftbar ul li ul li  {
		text-decoration: none;
}

/*-----------------------------------------------------------------------------------------------*/
/*----  Main body styles  - The content pane has an ID of mainbody  ----*/

#mainbody {
	padding-left: 20px;
	vertical-align: top;
}

/*----  Heading styles, generally for #mainbody  ----*/
h1 {
		color: #003388;
		font-size: 140%;
		margin-top: 0px;
}
	
h2 {
		color: #003388;
		font-size: 110%;
		margin-top: 20px;
		margin-bottom: -5px;
}
	
h3 {
		color: #003388;
		font-size: 95%;
		margin-bottom: -5px;
}
	
h4 {
		color: #003388;
		margin-bottom: -5px;
		font-size: 85%;
}
	
h5 {
		color: #003388;
		margin-bottom: -5px;
		font-size: 80%;
}
	
h6 {
		color: #003388;
		margin-bottom: -5px;
		font-size: 80%;
}

/* --- Put a dark  line at the bottom of an object, usually a header -----*/
.bottomborder {border-bottom-color: #333333;  border-bottom-style: solid; border-bottom-width: 1px;}

.bottomborder2 {border-bottom-color: #333333;  border-bottom-style: solid; border-bottom-width: 2px;}

.underlinewrap { margin-bottom: -5px; border-left: 1px solid #999999; border-bottom: 1px solid #999999; padding: 3px;  margin-top: 25px;
}

/*----  General styles for #mainbody  ----*/
#mainbody p {
		margin-bottom: 10px;
}
.underline {
		padding-bottom: 2px;
		border-bottom: 1px solid;
}	
	
/*----  List styles for #mainbody  ----*/
#mainbody ul {
		margin-top: 10px;
}

#mainbody ul, #mainbody ul li, #mainbody ol, #mainbody ol li {
		padding-left: 0px;
		margin-bottom: 0px;
		margin-left: 12px;
}

#mainbody ul ul, #mainbody ul ul li, #mainbody ol ol, #mainbody ol ol li {
		padding-left: 0px;
		margin-bottom: 0px;
		margin-top: 0px;
		margin-left: 12px;
}

#mainbody p + ul, p + ol  {
		margin-top: -8px;
}

/*--------------------------------------------------------------------------------------*/
/* ----- Styles to format list item bullets  --------  */
.listdotblue {
	list-style-image: url('http://www.usgs.gov/frameworkfiles/images/icons/dotblue7.gif');
}
.listdotgreen {
	list-style-image: url('http://www.usgs.gov/frameworkfiles/images/icons/dotgreen7.gif');
}
.listdotbrown {
	list-style-image: url('http://www.usgs.gov/frameworkfiles/images/icons/dotbrown7.gif');
}
.listdotcyan {
	list-style-image: url('http://www.usgs.gov/frameworkfiles/images/icons/dotcyan7.gif');
}
.listdotyellow {
	list-style-image: url('http://www.usgs.gov/frameworkfiles/images/icons/dotyellow7.gif');
}
/*--------------------------------------------------------------------------------------*/
/* ----- Styles to format image/text areas (use in IMG line)  --------  */

/* ----  Use class=picleft/picright to float an image "inside" of a text paragraph. This works for images with captions (see example in some of the Framework files)  --------  */
.picleft  {
	float: left;
	margin-right: 12px;
}

.picright {
	float: right;
	margin-left: 12px;
}

/* ----  Text styles for text when enclosed in a picleft/picright DIV (intended for Captions)   --------  */
.picleft p, .picright p {
	font-size: 75%;
	margin-bottom: 15px;
	line-height: 1.2em;
	margin-top: 2px;
	text-align: left;
}

/* ----  Had to use many special cases to get pictures/text to format consistently below H-level headings  --------  */
h2 + .picleft, h3 + .picleft, h4 + .picleft, h5 + .picleft  {
	float: left;
	margin-right: 12px;
	margin-top: 20px;
}

h2 + .picright, h3 + .picright, h4 + .picright, h5 + .picright  {
	float: right;
	margin-left: 12px;
	margin-top: 20px;
}

/*-----------------------------------------------------------------*/
/* -------------   Boxheading styles    ------------------- */

.boxheading {
	border-bottom: 1px solid #999999;
	margin: 0px;
	padding: 2px;
	font-size: 100%;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-bottom: 8px;
}

.boxsection {
	width: 98%;
	border: 1px solid #999999;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 30px;
}

.boxsection p {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: -8px;
	margin-top: 8px;
}
.boxsection ul li {
	padding-bottom: 2px;
	padding-right: 10px;
}

.boxsection ul li ul li{
	margin-left: -15px;
}

.boxsection ul li ul li ul li{
	margin-left: -15px;
}

/*------------------------------------------------------------------------------------------------*/
/* ----------   Paragraph Indenting (i.e.: For a table of contents)  -------------- */
           
.indent1{
        margin-left: 3em; text-indent: -1em; margin-top: .10em; margin-bottom: 0em
}     
.indent2{
        margin-left: 6em; text-indent: -2em; margin-top: 0.1em; margin-bottom: 0em
}  
.indent3{
        margin-left: 9em; text-indent: -3em; margin-top: 0.1em; margin-bottom: 0em
}     
.indent4{
        margin-left: 12em; text-indent: -4em; margin-top: .10em; margin-bottom: 0em
} 
.indent5{
        margin-left: 15em; text-indent: -5em; margin-top: .10em; margin-bottom: 0em
} 

/*-------------------------------------------------------------*/
/*---------   Footer navigation styles  Change marginbottom to 0 when new 2007 templates apply --------------*/

#linksfooterbar {
	width: 100%;
	background-color: #cccccc;
	padding-top: 2px;
	padding-bottom: 3px;
	clear: both;
	margin-bottom: -20px;
}

#linksfooterbar a:link, #linksfooterbar a:visited {
	margin-left: 4px;
	margin-right: 32px;
	color: #111111;
	text-decoration: none;
}

#linksfooterbar a:hover {
	margin-left: 4px;
	margin-right: 32px;
	color: #ffffff;
	text-decoration: underline;
}

#linksfooterbar a:active {
	margin-left: 4px;
	margin-right: 32px;
	color: #111111;
	text-decoration: none;
}

/*-------------------------------------------------------------------*/
/* ---------------    Miscellaneous styles    --------------- */

/* ---- To clear the flow from other elements (use to start next element below any other elements)   ------ */
.clear {
	clear: both;
}


/* -----Change table display (used for publications) to show lines between table rows -----*/
.pubstable {border-collapse:collapse }
tr.pubstable {border-bottom: thin #696969 solid ;}

/* ---- Place a line above, below, or both, mainly for a text paragraph    ------ */
.lineabovebelow {
	border-top-width: 1px; 
	border-bottom-width: 1px; 
	border-bottom-style: solid; 
	border-top-style: solid; 
	padding-top: 2px; 
	padding-bottom: 2px; 
	border-color: #aaaaaa;
}

.lineabove {
	border-top-width: 1px; 
	border-top-style: solid; 
	padding-top: 4px; 
	padding-bottom: 4px; 
	border-color: #aaaaaa;
}

.linebelow {
	border-bottom-width: 1px; 
	border-bottom-style: solid; 
	padding-top: 2px; 
	padding-bottom: 2px; 
	border-color: #aaaaaa;
}

.popuptext  {
	border-bottom: dashed; 
	border-bottom-width: 1px;
	cursor: help;
}

.indentfirstline {
	padding-left: -25px;
	text-indent: 25px;
}

.outdent {
	padding-left: 25px;
	text-indent: -25px;
}

.indentbothsides {
	padding-left: 30px;
	padding-right: 30px;
}

.reference {
	  margin-left: 3em;
      text-indent: -3em;
      margin-right: 3em;
}  

.forwebmaster {
	color: green;
	font-size: .9em;
}

/*--------------------------------------   COLORS     ------------------------------------*/
/*---------       Colors for elements, mainly for text     -------*/
.white { color: #fff;}
.black { color: #000;}
.blue {	color: #0033aa;}
.greymed { color: #666666;}
.greydark { color: #414141;}
.red { color: #992255;}
.green { color: #229922;}
.brown { color: #7c4f3f;}
.purple { color: #722072;}
.gold { color: #797909;}

/*     Background colors for elements, such as for table cells. These styles are generally light in shade. These styles are not meant for heading backgrounds (those are further down).   */
.backgreylight {
	background-color: #f6f6f6;}
.backgreymedium {
	background-color: #d4d4d4;}
.backgreydark {
	background-color: #777777;}
.backgreydarker {
	background-color: #4a4a4a;}
.backbrowndark {
	background-color: #a29482;}
.backbrownmedium {
	background-color: #d3c4a5;}
.backbrownlight {
	background-color: #faeac5;}
.backbluedark {
	background-color: #114499;}
.backbluemedium {
	background-color: #88aaee;}
.backbluelight {
	background-color: #bbd6fa;}
.backgreendark {
	background-color: #206528;}
.backgreenmedium {
	background-color: #82d082;}
.backgreenlight {
	background-color: #cff4d8;}
.backtealdark {
	background-color: #405c7a;}
.backtealmedium {
	background-color: #86a3bf;}
.backteallight {
	background-color: #b6c8ff;}
	
/*     Heading colors. These styles are generally meant for colorizing headings, as they add color to the heading text, background area, and add padding around the text.   */
.headblue {
	background-color: #004499; padding: 4px; color: #ffffff;}
.headburgundy {
	background-color: #4c0722; padding: 4px; color: #ffffff;}
.headgreen {
	background-color: #005528; padding: 4px; color: #ffffff;}
.headlightbrown {
	background-color: #905010; padding: 4px; color: #ffffff;}
.headdarkbrown {
	background-color: #4b3520; padding: 4px; color: #ffffff;}
.headgold {
	background-color: #9f8522; padding: 4px; color: #ffffff;}
.headverylightgrey {
	background-color: #d4d4d4; padding: 4px; color: #222222;}
.headlightgrey {
	background-color: #a2a2a2; padding: 4px; color: #222222;}
.headgrey {
	background-color: #747474; padding: 4px; color: #ffffff;}
.headdarkgrey {
	background-color: #444444; padding: 4px; color: #ffffff;}
.headolive {
	background-color: #444411; padding: 4px; color: #ffffff;}
.headpurple {
	background-color: #621062; padding: 4px; color: #ffffff;}
.headtan {
	background-color: #82643c; padding: 4px; color: #ffffff;}
.headteal {
	background-color: #304c6a; padding: 4px; color: #ffffff;}

	
/* -------------   Color slice for background to make gradient bars   ------------------- */
.backgradientblue {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientblue.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #18215c;
}

.backgradientburgundy {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientburgundy.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #540b28;
}

.backgradientgreen {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientgreen.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #081406;
}

.backgradientlightbrown {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientlightbrown.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #57260b;
}

.backgradientdarkbrown {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientdarkbrown.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #322715;
}

.backgradientdarkgrey {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientdarkgrey.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #262626;
}

.backgradientgold {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientgold.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #483701;
}

.backgradientlightgrey {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientlightgrey.jpg');
background-repeat: repeat-x; padding: 4px; color: #222222; background-color: #808080;
}

.backgradientolive {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientolive.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #30300f;
}

.backgradientpurple {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientpurple.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #460046;
}

.backgradienttan {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradienttan.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #573920;
}

.backgradientteal {
background-image: url('http://www.usgs.gov/frameworkfiles/images/icons/backgradientteal.jpg');
background-repeat: repeat-x; padding: 4px; color: #ffffff; background-color: #1d3551;
}

/* --- Headbackground is a generic builder for a header with a colored background. Use it with the color (for text) and bgxxxx colors in the lines above to create your own heading boxes -----*/
.headbackground { width: 98%;  font-size: 110%; padding-left: 5px; padding-bottom: 3px; padding-top: 3px; font-weight: bold; margin-bottom:15px;  margin-top:30px; }