/*  ******************************************  

********  THEME NAME: "Water"
********  Description: The background image used for this theme is a picture of
water running in the bathroom upstairs in my house for the first time in three years. 
Serene is how I would describe it.

********  
********  Author: David VanThournout
********  Author URI: http://www.oneskygate.net/
********  
********  The CSS, XHTML and design unless otherwize stated is released under Creative Commons              license  Attribution 3.0  United States:http://creativecommons.org/licenses/by/3.0/us/
********  
********  You can tweak this css all you like. It would be great if you would publish under a    

           creative commons license.

********  There are probably more handles in the xhtml than I need. But that's better            

          than not having enough!
***********************************************

*/
html { 
	padding:0px;
	margin:0px;
}

body {
	background: url('images/waterbk.jpg') repeat top right fixed;
	background-color: #B6D2F2;
	font-family: Verdana, Arial, Sans-Serif, Georgia;
	font-size: 70.5%;
	color:#000000;  
	text-align:left;
}

#skip a, #skip a:hover, #skip a:visited 
{ 
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
} 

#skip a:active 
{ 
	position:static; 
	width:auto; 
	height:auto; 
}

p {
	color: #000000;
	font-size: .8em;
	margin:0px 5px 5px 0px;
}

p.c1 { 
	font-size: 0.9em;
	color:#000000; 
	padding-right: 0px;
	text-align: right;
}

p.c2 { 
	font-size: 1.1em;
    color:#000000; 
    margin-left: 5px;
    margin-right: 0px;

	text-align: right;
}

/*  *************   p.c3, p.c4, .comment and p.note are all for either commenting in nice boxes
or for coding examples  *************  */ 

p.c3 {
	font-family: Courier New, Courier, Monospace;
	color: red;
	font-size: 1.3em;
	margin: 0em 2.5em 0em 0em;
	display: block;
	
}

p.c4 {
	font-family: Courier New, Courier, Monospace;
	color: red;
	font-size: 1.3em;
	margin: 0em 0em 0em 3em;
	display: block;
}

.comment {
	width:40em;
	height: auto;
	margin: 1em 2em 1em 2em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	background-color: #F5F0DD;
	border: 1px solid #000000;
}

p.note {
	font-family: Courier New, Courier, Monospace;
	font-size: 1.1em;
	background-color: #F5F0DD;
	line-height: 1em;
	margin: 1em 0em 1em 1em;
}

em {
	color: green;
	font-size: 1.1em;
	padding-right: 0.4em;
	line-height: 1em;
}

em.code  {
	color: black;
	font-size: 1.0em;
	line-height: 1em;
}

span.blk {
	font-family: Courier New, Courier, Monospace;
	color: black;
	font-size: 1.0em;
	margin-left: 0.5em;
	
}

/*  *********** end of comment styling  **********  */
p.c5 { 
	font-size: 1.1em;
        color:#000000; 
	text-align: right;
}

p.right { 

	font-size: 1.1em;
    color:#000000; 
	line-height: 1.2em;
	margin: 2.0em 0em 2.0em 0em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: left;
	border-left: 1px solid #04449A;
	border-right: 1px solid #04449A;
}

h1 {
	font-size:1.33em;
	padding: 0.3em 0.3em 0.3em 0.3em;
	text-transform:none;
	color: #14367C;
	background-color: #B2E4EE;


}

h2 {
	font-size:1.3em;
	padding-left:10px;
	padding-top:5px;
	color: #14367C;
	background-color: #B2E4EE;
	}
h3 {
	background: url('images/waterfootshade.jpg') repeat-y top left;
	background-color: #96D3EA;
	font-size:1.1em;
	color: #14367C;
	padding: 0.2em 0.2em 0.2em 0.4em;
	margin: 1.0em 0em 0em 0em;
	text-align: right;

}

h4 {
	font-size:1.1em;
	padding-left:10px;
	color: #14367C;
	background-color: transparent;
}

h5 {
	color: #14367C;
	font-size:1.1em;
}

a.c1 { 

	color: #5C2718;
	font-size: 1.1em;
	background-color:transparent;
	text-decoration: none; 

}
a.c1:visited { 
	text-decoration: none; 
	color: #5C2718;

	
}

a.c1:hover, a.c1:active { 
	background: url('images/menubackpaper.jpg') repeat-x top right;
	text-decoration: none; 
	color: #CB1313;
	background-color: #96D3EA;
	text-decoration: underline;
}

a.c2 { 
	color: #6A6044;
	font-size: 1.1em;
	background-color:transparent;
	text-decoration: none; 
}

a.c2:visited { 
	text-decoration: none; 
	color: #6A6044;
	}

a.c2:hover, a.c2:active { 
	background: url('images/menubackpaper.jpg') repeat-x top right;
	text-decoration: none; 
	color: #CB1313;
	background-color: #96D3EA;
	text-decoration: underline;
}


a.c3 { 
	color: #5C2718;
	font-size: 1.1em;
	background-color:transparent;
	text-decoration: none; 
	text-align: right;
}

a.c3:visited { 
	text-decoration: none; 
	color: #5C2718;
	text-align: right;
}

a.c3:hover, a.c3:active { 
	background: url('images/menubackpaper.jpg') repeat-x top right;
	text-decoration: none; 
	color: #CB1313;
	background-color: #96D3EA;
	text-decoration: underline;
}


a.right { 
	color: #5C2718;
	font-size: 1.1em;
	background-color:#B2E4EE;
	text-decoration: none; 

}

a.right:visited { 
	text-decoration: none; 
	text-decoration: line-through;
	color: #5C2718;

}

a.right:hover, a.right:active { 
	background: url('') repeat-x top right;
	background-color: #F8F8DA;
	text-decoration: none;
	color: #CB1313;
}

a.b2 { 
	color: #000000;
	font-size: 1.0em;
	padding: 0em 0em 0em 3.0em;
	text-decoration: none; 
	display: block;
	width: 10em;
	border: 1px solid #000000;
	background-color: white;

}

a.b2:visited { 
	text-decoration: none; 
	color: #000000;

	
}

a.b2:hover, a.b2:active { 
	background-color:#000000;
	text-decoration: none;
	color: #FFFFFF;
	border: 1px solid #000000;
} 

pre { 

	font-size: 1.23em;
	background-color:transparent;
	font-family: Courier, Monaco, Monospace;
}


span {
	font-size: 1.0em;
}


#navigation, #navigation ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 11em;
	}
	
	#navigation li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#navigation li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 11.05em;
		margin-top : -1.35em;
	}
	
	#navigation li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#navigation li a {
		width: 11em;
		w\idth : 10em;
		display : block;
		color : black;
		font-weight : bold;
		text-decoration : none;
		background-color : #76ADC2;
		border: 1px solid #A2C6F6;
		
		padding : 0 0.5em;
	}
	
	#navigation li a:hover {
		color : #14367C;
		background-color : #A2C6F6;

	}
	
	#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {
		left: -999em;
	}
	
	#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	

#navigation li:hover, #navigation li.hover {
    position: static;
}



#box {
	width:63.5em;
	height: auto;
	margin: 0px auto;
	padding-left: 3.0em;
	text-align:left;
	float: left;
	background-color:transparent;
}

#header {
	background: url('images/waterlogo.gif') no-repeat top left;
	background-color:transparent;
	width:63.5em;
	height: 8.1em;
	margin-right: 0em;
	padding-top: 0em;
	padding-right:0em;
	float:left;

}



#header h1 {
	font-size: 1.1em;
	text-transform:uppercase;
	text-align: right;
	color: #564b47;
	background-color:transparent;
	padding:0.3em 0em;
}

#subheader {
	background: url('images/watersubhead.jpg') repeat-y top left;
	width:63.3em;
	height: 4.3em;
	padding-left:0em;
	float:left;
	border-top: 1px groove #426978;
	border-bottom: 1px groove #2A5666;
	border-right: 2px solid #426978;
	border-left: 1px solid #D0EAF4;
	background-color:#7B8F97;
}

.printhead  {
	width: 29.5em;
	display: none;

}

#menu {
	background: url('images/waterfootshade.jpg') repeat-y top left;
	position: fixed;
    top: 14.1em;
    width: 12em;
	left: 3.7em;
	background-color: #76ADC2;
	border-right: 2px solid #426978;
	border-bottom: 2px solid #426978;
	border-left: 1px solid #D0EAF4;
}





#content {
	background: url('images/waterfootshade.jpg') repeat-y top right;
	width:45.5em;
	height: auto;
	margin: 1.0em 0em 0em 1.0em;
	padding: 2.0em 1.5em 6.0em 2.0em;
	float:right;
	background-color: #5691E2;
	border-right: 2px solid #426978;
	border-bottom: 2px solid #426978;
	border-left: 1px solid #D0EAF4;

}

#content ul {
	margin: 6.0em 0em 6.3em 11.0em;
	}
	
#content li {
	background: url('') no-repeat top right;
	line-height: 0.8em; 
	list-style-type: none;
	display: block; 
	padding-top: 0em;
	padding-left: 0em; 
	padding-bottom: 0em;
	margin-left: 0em;
	
	}


#footer {
	background: url('images/waterfootshade.jpg') repeat-y top left;
	width:48.5em;
	height: 12.0em;
	margin-left: 0em;
	margin-top: 2.0em;
	padding-top: 1.0em;
	padding-right:0.5em;
	float: right;
	background-color: #76ADC2;
	border-right: 2px solid #426978;
	border-bottom: 2px solid #426978;
	border-left: 1px solid #D0EAF4;
	border-top: 1px groove #2A5666;

}

/* *********** Image and form handling containers ***********     */

.searchbox {
	width: 26em;
	margin: 1.0em 0em 0em 4.0em;
	padding: 1em 1em 1em 1em;



}

#searchresults {
	width: 40em;
	height: auto;
	margin: -2em 0em 0em -1em;
	padding: 0.5em 0.5em 0.5em 0.5em;
	background-color: #EEEEEE;
	float: left;
}

.musicplayer  {
	width: 27.5em;
	padding: 0em 0em 0em 1.5em;
	float: left;

}

.formfloat  {
	float: left;
	width: 8.0em;
	margin-left: 4.0em;
	padding-top: 3.0em;

}


.floatstudio
{
	float: right;
	width: 12.0em;
	padding-right: 0em;
	padding-top: 3.0em;
}


.floatmusic
{
	float: left;
	width: 12.0em;
	padding-right: 0em;
	padding-top: 0em;
}

.floatnav
{
	float: left;
	width: 10.0em;
	padding-right: 0em;
	padding-top: 3.0em;
}

.floatfooter
{
	float: right;
	width:8.3em;
	padding: 1.0em 0.5em 0em 0em;
	margin-top: 1px;
}

.floatright
{
	float: right;
	width: 31.5em;
	padding-right: 0.5em;
}

.floatleft
{
	float: right;
	width: 31.5em;
	padding-right: 0.5em;
}

.floatindex
{
	float:left;
	width:27.0em;
	padding-left:3.0em;
}



#formbox {
	background: url('') repeat-y top center;
	width:27.0em;
	height: 25.0em;
	margin-top: 2.0em;
	margin-left: 0.1em;
	padding-top: 0em;
	padding-right: 0em;
	float:left;
	background-color:transparent;

}

/* **************** the extra div contains comments specific to each style sheet each only visible when that particular style sheet is loaded  *******************   */


#extradiv1  {
	position:absolute;
	left:44.8em;
	top:10.0em;
	width: 30em;


}

#zskin {
	width: 10em;
	display: none;
}

#yskin {
	width: 10em;
	display: none;
}

#xskin {
	width: 20em;
	display: none;
}

#wskin {
	width: 20em;
	display: none;
}

#vskin {
	width: 10em;
	display: none;
}

#uskin {
	width: 20em;
	display: none;
}

#tskin {
	width: 20em;
	display: none;
}

#sskin {
	width: 20em;
	display: none;
}

#water {
	width: 20em;
	
}

#space {
	width: 10em;
	display: none;
}

#printing {
	width: 10em;
	display: none;
}