/* ===================================================
CSS for Clive Heath - v1.0

Author: 		Emily Heath
Contact: 		emily@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		17.03.08


=================================================== */

/******************{ universals }*********************/

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,table,td,tr,th
	{margin:0; padding:0 }
	
body {
	font: 75% arial, helvetica, sans-serif; /* reset font size to 12px; */
	text-align: center;
	color: #533119;
	background-image: url(../graphics/bg_texture1.jpg); 
	}

h1,h2,h3,h4,h5,h6,pre,code,input,textarea {font-size:1em;font-weight: normal;}

a img,:link img,:visited img {border:none;}

:link,:visited {text-decoration:none;}

ul,ol {list-style:none;}

address {font-style: normal;}

.screenreader {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}
	
.imageReplace {text-indent: -9000px;}

.clearfix:after,
#content:after { /* makes float container block clear floated blocks inside it */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

/* Hides from IE-mac \*/
* html .clearfix,
* html #content:after {height: 1%;} /* fix for about clearfix for IE PC */
/* End hide from IE-mac */


a:active {outline: none;}
:focus {-moz-outline-style: none;}


/******************{ structure }*********************/
   

#global {
	width: 808px;
	margin: 0px auto;
	text-align: left; /* reset */  
	background: url(../graphics/bg_page.gif) repeat-y ; 
	padding: 0px 29px 0px 29px;
	} 
	
#header {  
	margin-right: 20px;
	padding: 48px 0px 23px 5px;
	background: url(../graphics/musical_note.jpg) right 5px no-repeat;       
}  
	
#exFooter {
	width: 866px;
	margin: 0px auto;
	background:  url(../graphics/border_bottom1.gif) no-repeat top left; 
	height: 4px;
}    

#header span {
	display: block;
	background: url(../graphics/cliveheathmusic1.gif); 
	height: 30px;
	width: 409px;
} 


#content,
#footer {
	background: url(../graphics/footer_rules.gif) bottom right no-repeat; 
	width: 800px; 
	padding-bottom: 18px;   
}

#content .leftCol {
	width: 390px;
	float: left;
	}
	
#content .rightCol {
	width: 400px;
	float: left;
	}

.rightCol .imageLeft {
	width: 180px;
	padding: 0px 0px 20px 10px;
	}
	
.rightCol .imageWide {
	width: 390px;
	padding: 0px 0px 20px 10px;
	}  
	#home .rightCol .imageWide {
		padding: 0px 0px 10px 10px;
		}
	
.rightCol .imageLeft span,
.rightCol .imageWide span {
	padding-top: 5px;
	display: block;
	}
		
/************************{   main navigation   }******************/

#menu {
	width: 800px;
	height: 50px;
	background: url(../graphics/nav_rules.gif);
}           

#menu ul {
	float: left;
	display:inline; 
	width: 800px; 
	} 

#menu ul li {
	float: left;  
	margin-top: 17px;
	} 
#menu ul li.menu1 {width: 14%;}   
#menu ul li.menu2 {width: 13%;}                           
#menu ul li.menu3 {width: 13%;}
#menu ul li.menu4 {width: 14%;}
#menu ul li.menu5 {width: 23%;}
#menu ul li.menu6 {width: 23%;}

#menu ul li a {
	display: block;
	text-align:center;
	color: #94817E;
	text-transform:uppercase;
	font-size: 1.4em;
	/*height: 17px;
	text-indent: -5000px;
	background-image: url(../graphics/main_navigation.gif);
	margin-right: 32px;*/
	}
#menu ul li a span {text-transform:lowercase;}
#menu ul li a:hover {color: #3D1B18;}
/*
#menu ul li.menu1 a {
	width: 60px;
	background-position: 0 0;
	margin-left: 5px;
	}   
	
 #menu ul li.menu2 a {
	width: 210px;
	background-position: -60px 0;
	}                           

 #menu ul li.menu3 a {          
	width: 57px;               
	background-position: -569px 0 ;	
	}	                            
 #menu ul li.menu4 a {          
	width: 156px;               
	background-position: -269px 0 ;
	}                           
	                            
 #menu ul li.menu5 a {          
	width: 144px;               
	background-position: -425px 0 ;
	margin-right: 0px; 
	}                           
 
  
#menu ul li.menu1 a:hover {background-position: 0 -17px;}
#menu ul li.menu2 a:hover {background-position: -60px -17px;}
#menu ul li.menu3 a:hover {background-position: -569px -17px;} 
#menu ul li.menu4 a:hover {background-position: -269px -17px;}
#menu ul li.menu5 a:hover {background-position: -425px -17px;}  
  
#home #menu ul li.menu1 a {background-position: 0 -17px;}
#transcriptions #menu ul li.menu2 a {background-position: -60px -17px;}
#tapes #menu ul li.menu3 a {background-position: -569px -17px;} 
#otherthings #menu ul li.menu4 a {background-position: -269px -17px;}
#inmemoriam #menu ul li.menu5 a {background-position: -425px -17px;}
*/


/************************{   subnav   }******************/

#subnav {
	float: left;
	display:inline; 
	width: 800px;
	}

#subnav li {
	float: left;  
	}

#subnav li a {
	display: block;
	padding: 0px 12px 0px 10px;
	font-size: 1.167em;
	background: url(../graphics/vertical_line.gif) right 50% no-repeat;
	color: #6c3e20;
	} 
	
#subnav li a:hover,
.zero #subnav li a.menu0,
.one #subnav li a.menu1,
.two #subnav li a.menu2,
.three #subnav li a.menu3,
.four #subnav li a.menu4,
.five #subnav li a.menu5,
.six #subnav li a.menu6,
.seven #subnav li a.menu7, 
.eight #subnav li a.menu8, 
.nine #subnav li a.menu9,
.ten #subnav li a.menu10,
.eleven #subnav li a.menu11, 
.twelve #subnav li a.menu12
.thirteen #subnav li a.menu13
.fourteen #subnav li a.menu14
.fifteen #subnav li a.menu15
.sixteen #subnav li a.menu16
.seventeen #subnav li a.menu17{
	color: #af3017;
} 
	
#subnav li a.menu11 {
	padding-left: 0px;
}

#subnav li a.menu0 {
	background: none;
}

/************************{   text   }******************/

h1 {
	margin: 1em 0px .75em 0px;
	font-size:2em;   /* 24px */  
	color: #7c6141;
	letter-spacing: .1em;   
	line-height: .75em;
}  
 
h2, h3, h4, h5 {
	color: #6c3e20;    
	letter-spacing: .1em;     
} 

h2 {
	font-size:1.333em; /* 16px */
	line-height: 1.125em; 
	margin: 0em 0px 1.125em 0px;   
} 

h3 {
	font-size:1.167em;   /* 14px */  
	line-height: 1.286em; 
	margin: 1.286em 0px 1.286em 0px; 
}   
  
h4 {
	font-weight: bold;
}
    
#content p, #content ul, #content ol, #content table {
	margin: 0px 0px 1.385em 0px;  
	font-size:1.083em;
	line-height: 1.385em;
}

.seven #content table {
	margin: 0px;  

}

#content p {
	width: 600px
	}
	
#content .leftCol p {
	width: 380px
	}

#otherthings #content p {
	width: 470px
	}

#content p a,
#footer p.copyright a {
	color: #533119;
	background-color: #F4E3CD;
	border-bottom: 1px solid #AE9C8E;
	} 
	#content p a:hover,
	#footer p.copyright a:hover {
		color: #AF3017;
		border-bottom: 1px solid #AF3017;
		}
	
/************************{   tracklists   }******************/

.imageRight {
	float: right;
	}
	
.imageLeft {
	float: left;
	}
	
.item {
	clear: both;
	
	}

.item h2.accordion_toggle {
	float: left;
	margin-bottom: 0px;
	}
	
.artistCol .trackNo {
	display: block;
	width: 30px;
	float: left;
	}
	
.artistCol .title {
	display: block;
	width: 200px;
	float: left;
}

#transcriptions.five .title {
	display: block;
	width: 300px;
	float: left;
}

.seven .col1 {
	width: 20px;
	text-align: center;
	}
		
td, th {
	padding: 0px 10px 0px 0px;
	}
	
.player {
	padding: 18px 0px;
	}
	
/************************{   accordian   }******************/
	
.accordion_content {
	padding: 0 10px 0px 30px;
	overflow: hidden;
	clear: both;
	}
	
#content .accordion_content p {
	padding: 0 10px 10px 0;
	overflow: hidden;
	}
		
#content h2.accordion_toggle {
	display: block;
	font-size: 1em; /*12px*/
	line-height: 1.5em;
	cursor: pointer;
	font-weight: bold;
	}

h2.accordion_toggle_active,
h2.accordion_toggle:hover {
	color: #af3017;
	}
	
/************************{   footer   }******************/
	
 
#footer {
	background: url(../graphics/made_in_england.gif) top right no-repeat;  
	height: 48px;   
	padding: 0 0 18px 0;
	}

	#footer p {
		font-size: .917em; 
	}
p.copyright {
	float: left;
	}  

p.credit {  
	padding-top: 35px; 
	padding-right: 12px;
	float: right;
	} 
	p.credit a {
		color: #AF3017; 
		}

/************************{   footer   }******************/


form {width: 365px;}

#content form p,
#content form ul {padding: 0;}

form ul li {
	clear: left;
	margin-bottom: 10px;
	width: 375px;
	}
	
form label {
	display: block;
	float: left;
	width: 100px;
	clear: left;
	}
form label span {
	color: #af3017;
	font-size: .9em;
	}
	
form input,
form textarea {
	width: 255px;
	border: none;
	background-color: #FFF;
	font: 1em helvetica;
	padding: 3px 3px 1px 5px;
	border: 1px solid #E0E0DC;
	color: #7A7873;
	}

form input.send {
	width: auto;
	width: 50px;
	height: 24px;
	color: #333;
	font-size: 1.1em;
	float: right;
	padding: 0;
	cursor: pointer;
	margin-right: 10px;
	}
form input.send:hover,
.formResponse {color: #af3017;}

. formResponse