/* ========= WSC Framework stylesheet pulled 20070913 ========= *
/* ========= Edited and modified for OWQ ========= */
/* ========= 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;
}


/*------------   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: .85em;
	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;
}
	

/*---------   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 h2 h3 are redefined in owq custom.css 
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://www2.usgs.gov/frameworkfiles/images/icons/dotblue7.gif');
}
.listdotcyan {
	list-style-image: url('http://www2.usgs.gov/frameworkfiles/images/icons/dotcyan7.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;
}



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


/*--------------------------------------   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).   */
.backbluedark {
	background-color: #114499;}
.backbluemedium {
	background-color: #88aaee;}
.backbluelight {
	background-color: #bbd6fa;}

/*     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;}

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


/* --- 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; }