html,body,h1, h2, h3, h4, h5, h6 {margin:0;padding:0;}

body {
	margin:0; 
	padding:0; 
	font: 100.01% "Trebuchet MS", Arial, sans-serif; 
	background: url(h2o-images/background.jpg);
	behavior:url(css/csshover.htc);}
	
div#mainwrapper {
			
			width:868px; 
			margin-left:auto; 
			margin-right:auto; }
	
div#container {
			position:relative; }
			
div#topnav {
	width:868px; 
	margin-left:auto; 
	margin-right:auto;
	background: url(nav-img/nav-bg.gif) repeat-x;
	position:fixed;
	top:0px;
	z-index:9;}
		
div#topnav p{  padding:0; margin-left:auto; margin-right:auto; margin-top:0; text-align:center;}
	
div#topnav img { border:0;}

div#header {margin-top: 40px;
			width: 864px;
			height:117px; 
			position:relative;
			text-align:center; }     /*styles for header - text-align centers graphic */

div#header div#logo {
	position: absolute;
	top:34px;
	left: 57px;
	z-index: 8;
}
				
div#header div#title { position: absolute; top:50px; left: 452px;}

div#content {
	float:left;
	width: 432px;
	padding: 0px;
	clear: both; }
	
#photoimage{
	width:430px;
	}
	
	
	
.center {text-align: center;} 	
	

			
div#content div#mainimage { margin:0; }
div#content div#mainimage p {
	text-align:center;
	font-size:0.7em;
	margin:0 0 0 -5px;
	color: #046380;  } 

div#content p {font-family: Trebuchet, Arial, sans-serif; font-size:.95em; line-height: 1.5em; margin:0 15px; padding: 6px 6px; color:#046380;}	
				
div#content li {font-size:.9em;}
div#content a:link { color:#046380;
				text-decoration:none; }

div#content a:hover {
	color:  #9e9b80;
	text-decoration:none;
}

div#photos h4 { font-size: 1em; font-family:"Trebuchet MS", Tahoma, sans-serif;  margin:3px 15px; padding:0; color: #046380;}	
	
div#photos p {font-family: "Trebuchet MS", Arial, sans-serif; font-size:.9em; line-height: 1.5em; margin:0 15px; padding:0; color:#046380;}


div#rightcolumn {
	float:left;
	width:432px;
	top:0px;
	right:0px;
	padding:10;
}


				
div#rightcolumn p {
	font-family: "Trebuchet MS", Arial, sans-serif; 
	font-size:.95em; 
	line-height: 1.5em; 
	margin:0 15px; 
	padding: 6px 6px; 
	color:#046380;}
	
div#rightcolumn h2 {
	font-size:1.5em;
	line-height: 1.75em;
	margin:0 15px;
	padding: 0 6px;
	color:#046380;
	font-family: "Trebuchet MS", Tahoma, sans-serif }
	
div#rightcolumn h3 {font-size:1.3em;  margin:10px 15px 0px 15px; padding: 0 6px; font-family:"Trebuchet MS", Tahoma, sans-serif; color:#046380;}

div#rightcolumn h4 {
	font-size:1em;
	line-height: 1.2em;
	margin:10px 15px 0px 15px;
	padding: 0 6px;
	color:#046380;
	font-family: "Trebuchet MS", Tahoma, sans-serif; }
	
div#rightcolumn p.italic {text-align:center; margin-top:5px; font-size:.7em; font-style:italic;}

div#rightcolumn img {
	text-align:center;
	margin-top:10px;
	background: url(h2o-images/photobg.jpg); repeat: repeat y; }
	
#slideshowback { position:relative;
				margin-top:50px;}	

#slideshow { position:absolute;
			top:40px; left:33px;
			width:362px;
			z-index:5}

ol {font-size:0.9em;
	line-height: 1.45em;
	margin:0 35px;
	padding: 4px 6px;
	font-family:"Trebuchet MS", Tahoma, sans-serif;
	color: #046380;
	list-style: decimal; }

.bio { width:430px;
	padding:0px;}
	
.bio h2{font-size:1.5em;  margin:0; font-family:"Trebuchet MS", Tahoma, sans-serif; color:#046380;}	
	
.bio p {font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:.9em;
	       padding:0;}
	
.bio img { float:left;
margin:5px 10px 0px 5px; }	

#lyrics {
	float:left;
	width: 430px;
	padding: 0px; }
	
#lyrics div#mainimage { padding-left:-10; }	

div#Lyrics div#mainimage p {
	text-align:center;
	font-size:0.7em;
	
	color: #046380;  } 

#lyrics p {
	font-size:0.9em;
	line-height: 1.45em;
	margin:0 15px;
	padding: 4px 6px;
	font-family:Trebuchet, Arial, sans-serif;
	color: #046380;
}

#lyrics h4 { font-size: 1em; font-family:"Trebuchet MS", Tahoma, sans-serif;  margin:0; padding:inherit; color: #046380;}




.info { font:Trebuchet, Tahoma, sans-serif; font-size:.875em; line-height: 1.4em; font-style: oblique;}
.info2 { font:Trebuchet, Tahoma, sans-serif; font-size:.8em; line-height: 1.4em; }

#rightlyrics {
	float:left;
	width: 417px;
	padding: 0 -15px 0 10px;
}
#rightlyrics  div#mainimage { margin:5px -27px; padding:-15px;}

#rightlyrics p {
	font-size:0.9em;
	line-height: 1.45em;
	margin:0 15px;
	padding: 4px 6px;
	font-family:"Trebuchet MS", Arial, sans-serif;
	color: #046380;
}

#rightlyrics h4 { font-size: 1em; font-family:"Trebuchet MS", Tahoma, sans-serif;  margin-left:0px; padding:inherit; color: #046380;}

.forgetmenot {float:right; margin-right:40px}
.right {float:right;}
.left {text-align:left;}

.product {width:866px;
		position: relative;
		margin:0px;
		padding:0px;
		clear: both;}
		
.productphoto {width:360px;
		float:left;
		margin:0px;
		padding:20px 0px 20px 70px;}
		
.poster {width:420px;
		float:left;
		margin:0px;
		padding:20px 0px 20px 10px;}		
		
.productinfo {width:420px;
		float:right;
		margin:0px;
		padding:20px 0px;
		color:#046380;}	
		
.productinfo li {font-size:.85em;
		line-height:1.3em;}					

.2 {font-size:.75em;}
a:link {
color:#046380;
text-decoration:none;
}
a:visited {
color:#046380;
text-decoration:none;}
a:hover {
color: #9e9b80;
text-decoration: underline;
}

/*footer styles*/
div#footer {clear: both;
			width:864px;  
 			padding:4px 0; /* pushes the links away from top and bottom of the div */
			
			}
#email	{font-family: "Trebuchet MS", Tahoma, sans-serif;
		font-size: .9em; 
		Color: #046380;} 		
			
div#footer p {margin:0 ;
			font-size:.8em;
			color: #b8a68e;
			line-height:1.45em;
			text-align: right;}	
			
div#footer h4{margin:0 15px ;
			font-size:1.1em;
			color: #046380;
			line-height:1.45em;
			text-align: left;}					
			
			
 /* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

/* Tan Hack feeds only to IE browsers */

* html p{margin-top: 20px;}	

* html body {font-size: 97%;}


/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */



* html  #nav ul li ul li ul { 

  left:9.85em; 

  voice-family: "\"}\""; 

  voice-family:inherit;

  left:10em;

  }


/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */



/* the first-level drop stays open for 100px below the bottom but at least it works */



/* this can be reduced to as little as 22px if you don't have pop-outs */



/* the pop-out menu stays open for 22px below the bottom but at least it works */



@media all and (min-width: 0px){

   body #nav ul li ul {padding-bottom:70px;}



   body #nav ul li ul li ul {padding-bottom:22px;}



   body #nav ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */

/* end of hack zone */