/* CSS Document for New Default style of 
histrionicdowns.com. This stylesheet is (c) Chris Tinniswood 2008, apart from various techniques I
learnt from Eric Meyers, Chris Coyier and many, many more diamond geezers! Thanks, guys!*/

/*We begin, as they say, at the beginning. Here's a little global reset (not the most popular one
these days, but one that seems to serve me well...) */

* {margin: 0; padding: 0;}

body { color: #663300; background-image:url(red_leather.png);}

/* BACKGROUND IMAGES...
It's nice to be able to work on a fully functional background, so here are the Background illustration images
as a starter for ten. In the HTML, they're at the foot of the page, after all the important stuff...*/


#bgd00 {background-image:url(portrait_bottom.png);
		background-repeat:no-repeat;
		width:550px; height:30px;
		clear:left;
		position:relative;
		top:30px; left:0px;}
		
#alt_bgd00 {background-image:url(landscape_bottom.png);
		background-repeat:no-repeat;
		width:790px; height:30px;
		clear:left;
		position:relative;
		top:30px; left:0px;}
		
#bgd01 {background-image:url(leather_case.png);
		background-repeat:no-repeat;
		width:160px; height:520px;
		position:absolute;
		top:10px; left:10px;
		z-index:2;}

#bgd02 {background-image:url(pen.png);
		background-repeat:no-repeat;
		background-position: 0 30px;
		width:35px; height:140px;
		clip:rect(30px, auto, auto, auto);
		position:absolute;
		top:30px; left:20px;
		z-index:3;}

#bgd02:hover {background-position: 0;
				clip:auto;}

div#bgd02 {background-position: 0;
				clip:auto;}

#bgd03 {background-image:url(brush.png);
		background-repeat:no-repeat;
		background-position: 0 30px;
		width:25px; height:140px;
		clip:rect(30px, auto, auto, auto);
		position:absolute;
		top:30px; left:55px;
		z-index:3;}
		
#bgd03:hover {color: white; background-position: 0;
				clip:auto;}

div#bgd03 {background-position: 0;
					clip:auto;}

#bgd04 {background-image:url(pencil.png);
		background-repeat:no-repeat;
		background-position: 0 30px;
		width:30px; height:140px;
		clip:rect(30px, auto, auto, auto);
		position:absolute;
		top:30px; left:85px;
		z-index:3;}

#bgd04:hover {background-position: 0;
				clip:auto;}	

div#bgd04 {background-position: 0;
			clip:auto;}

#bgd05 {background-image:url(whistle.png);
		background-repeat:no-repeat;
		background-position: 0 30px;
		width:35px; height:140px;
		clip:rect(30px, auto, auto, auto);
		position:absolute;
		top:30px; left:120px;
		z-index:3;}
				
#bgd05:hover {background-position: 0;
				clip:auto;}	

div#bgd05 {background-position: 0;
			clip:auto;}
		
#bgd06 {background-image:url(landscape_top.png);
		background-repeat:no-repeat;
		width:790px; height:20px;
		position:absolute;
		top:45px; left:120px;
		z-index:0;}

#alt_bgd06 {background-image:url(landscape_top.png);
		background-repeat:no-repeat;
		width:790px; height:20px;
		position:absolute;
		top:45px; left:120px;
		z-index:1;}
				
#bgd07 {background-image:url(landscape_bgd.png);
		background-repeat:repeat-y;
		width:790px; height:540px;
		position:absolute;
		top:65px; left:120px;
		z-index:0;}
				
#bgd08 {background-image:url(landscape_bottom.png);
		background-repeat:no-repeat;
		width:790px; height:20px;
		position:absolute;
		top:600px; left:120px;
		z-index:0;}
				
#bgd09 {background-image:url(portrait_bgd.png);
		background-repeat:repeat-y;
		width:550px; height:550px;
		position:absolute;
		top:60px; left:180px;
		z-index:0;}
				
#bgd10 {background-image:url(portrait_bottom.png);
		background-repeat:no-repeat;
		width:550px; height:30px;
		position:absolute;
		top:610px; left:180px;
		z-index:0;}
		
#bgd12 {background-image:url(portrait.png);
		background-repeat:no-repeat;
		width:155px; height:177px;
		position:absolute;
		top:380px; left:690px;
		z-index:0;}	
		
#bgd13 {width:170px; height:130px;
		position:absolute;
		top:250px; left:690px;
		z-index:5;}		
			
/* LOGO...
The Logo is an image replacement for H1 text, hence the display: none attribute. I may change this to
text indent: -9999px in the near future. I may not...*/

div#logo {background-image:url(logo.png);
		 background-repeat:no-repeat;
		 width:95px; height:95px;
		 position:absolute;
		 top:180px; left:35px;
		 z-index:4;}
		 
span.logotext{display:none;}

div#book {background-image:url(../site_images/nostradormouselogo.png);
		 background-repeat:no-repeat;
		 width:200px; height:23px;
		 position:relative;
		 top:10px; left:130px;
		 padding-bottom: 30px;
		 z-index:4;}
		 
div#band {background-image:url(../site_images/woodsmith/woodsmithlogo.png);
		 background-repeat:no-repeat;
		 width:292px; height:49px;
		 position:relative;
		 top:10px; left:80px;
		 padding-bottom: 30px;
		 z-index:4;}

		 
span.booklogotext{display:none;}

/* MENUS...

1. MAIN MENU.
More image replacement techniques are at work here, using an ul. I've also implemented
a CSS-only rollover image technique. 

Firstly, some general settings for the list itself...*/

span.menuitem {display:none;}

ul.mainmenu {list-style: none;
			position:absolute;
			top:10px; left: 180px;
			width:550px; height: 45px;
			z-index:1;}

ul.mainmenu li {float:left;}
	
/* HOME */
		
li.home {display:block;
		background-image:url(home.png);
		background-repeat:no-repeat;
		background-position: 0 -45px;
		width:120px; height:45px;}
		
a#home {display:block;
		background-image:url(home.png);
		background-repeat:no-repeat;
		width:120px; height:45px;}
		
#home:hover {background-position: 0 -45px;}	

/* CV */

li.cv {display:block;
		background-image:url(cv.png);
		background-repeat:no-repeat;
		background-position: 0 -45px;
		width:60px; height:45px;}	

a#cv {display:block;
	  background-image:url(cv.png);
	  background-repeat:no-repeat;
	  width:60px; height:45px;}

#cv:hover {background-position: 0 -45px;}

/* BLOG */

li.blog {display:block;
		background-image:url(blog.png);
		background-repeat:no-repeat;
		background-position: 0 -45px;
		width:70px; height:45px;}

a#blog {display:block;
	  background-image:url(blog.png);
	  background-repeat:no-repeat;
	  width:70px; height:45px;}

#blog:hover {background-position: 0 -45px;}

/* PODCASTS */

li.podcasts {display:block;
		background-image:url(podcasts.png);
		background-repeat:no-repeat;
		background-position: 0 -45px;
		width:110px; height:45px;}

a#podcasts {display:block;
	  background-image:url(podcasts.png);
	  background-repeat:no-repeat;
	  width:110px; height:45px;}

#podcasts:hover {background-position: 0 -45px;}

/* CONTACT */

li.contact {display:block;
		background-image:url(contact.png);
		background-repeat:no-repeat;
		background-position: 0 -45px;
		width:100px; height:45px;}

a#contact {display:block;
	  background-image:url(contact.png);
	  background-repeat:no-repeat;
	  width:100px; height:45px;}

#contact:hover {background-position: 0 -45px;}

/* LINKS */

li.links {display:block;
		background-image:url(links.png);
		background-repeat:no-repeat;
		background-position: 0 -45px;
		width:90px; height:45px;}

a#links {display:block;
	  background-image:url(links.png);
	  background-repeat:no-repeat;
	  width:90px; height:45px;}

#links:hover {background-position: 0 -45px;}

/* 2. CREATIVE MENU...
Similar image replacement/rollover techniques used here. 

General settings... */

ul.creativemenu {list-style: none;
			width:100px; height:160px;
			position:absolute;
			top:290px; left:40px;
			z-index: 4;}
			
/* WRITER */			

li.writer {display:block;
		  background-image:url(writer.png);
		  background-repeat:no-repeat;
		  background-position: -100px 0 ;
		  width:100px; height:40px;}

a#writer {display:block;
		  background-image:url(writer.png);
		  background-repeat:no-repeat;
		  width:100px; height:40px;}

#writer:hover {background-position: -100px 0 ;}

/* ARTIST */

li.artist {display:block;
		  background-image:url(artist.png);
		  background-repeat:no-repeat;
		  background-position: -100px 0;
		  width:100px; height:40px;}
  
a#artist {display:block;
		  background-image:url(artist.png);
		  background-repeat:no-repeat;
		  width:100px; height:40px;}

#artist:hover {background-position: -100px 0;}

/* DESIGNER */

li.designer {display:block;
		  background-image:url(designer.png);
		  background-repeat:no-repeat;
		  background-position: -100px 0;
		  width:100px; height:40px;}

a#designer {display:block;
		  background-image:url(designer.png);
		  background-repeat:no-repeat;
		  width:100px; height:40px;}

#designer:hover {background-position: -100px 0;}

/* MUSICIAN */

li.musician {display:block;
		  background-image:url(musician.png);
		  background-repeat:no-repeat;
		  background-position: -100px 0;
		  width:100px; height:40px;}	  	

a#musician {display:block;
		  background-image:url(musician.png);
		  background-repeat:no-repeat;
		  width:100px; height:40px;}

#musician:hover {background-position:  -100px 0;}	  			

/* MAIN CONTENT AREA...
Including p, h1, h2, h3, a, and form styling. */

#container {background-image:url(portrait_bgd.png);
				background-repeat:repeat-y;
				color:#660000;
				width:550px;
				position:absolute;
				top:55px; left:180px;
				z-index:1;}

#maincontent { color:#660000;
				width:705px; 
				position:relative;
				top:0px; left:0px;
				margin: 20px auto;
				z-index:1;}
				
#alt_container {background-image:url(landscape_bgd.png);
				background-repeat:repeat-y;
				color:#660000;
				width:790px;
				position:absolute;
				top:55px; left:120px;
				z-index:1;}

#alt_maincontent { color:#660000;
				width:600px; 
				float: left;
				position:relative;
				top:0px; left:50px;
				margin: 20px auto;
				padding: 0 0 0 45px;
				z-index:1;}
				
#work { color:#660000;
				width:460px;
				float:left; 
				position:relative;
				top:0px; left:40px;
				z-index:1;}	
				
#alt_work { color:#660000;
				width:450px;
				float:left; 
				position:relative;
				top:0px; left:0px;
				z-index:1;}
									
#worklinks { color:#660000;
				width:150px; 
				position:relative;
				top:50px; 
				float:right;
				text-indent: 0;
				z-index:1;}	

#alt_worklinks { color:#660000;
				width:200px; 
				position:relative;
				top:50px; left:50px;
				float:right;
				z-index:1;}	
				
ul.worklinks {font-family:Georgia, "Times New Roman", Times, serif;
				font-size:1em;
				line-height: 1.8em;
				letter-spacing: 0.025em;
				text-align:left;
				list-style:none;}

ul.alt_worklinks {font-family:Georgia, "Times New Roman", Times, serif;
				font-size:0.7em;
				line-height: 1.8em;
				letter-spacing: 0.025em;
				text-align:left;
				list-style:none;
				text-indent: 0;}
				
ul.read {list-style: none;
		  text-indent: 2em;
		  padding: 5px;}
		  
		  
																				
a:link {text-decoration:none;
		color:#336633;} 
a:hover {text-decoration:underline;}
a:visited {text-decoration:none;}

p, li {font-family:Georgia, "Times New Roman", Times, serif;
	font-size:0.8em;
	line-height: 1.6em;
	letter-spacing: 0.025em;
	text-align:justify;}

h2 {font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	font-weight:bolder;
	text-align:center;
	font-variant:small-caps;
	padding: 5px;
	color:#336633;}
	
h3 {font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	font-weight:bold;
	text-align:left;
	font-variant:normal;
	text-indent:2em;
	color:#336633;}
	
h4 {font-family:Georgia, "Times New Roman", Times, serif;
	font-size:10px;
	text-align:center;
	font-variant:normal;
	color:#336633;}
	
h6 {font-family:Georgia, "Times New Roman", Times, serif;
	font-size:9px;
	text-align:center;
	font-variant:normal;
	color:#336633;}
	
acronym, abbr {color:#0000FF;}

span.cap {float:left;
		width:1em;
		font-size:400%;
		font-family:Georgia, "Times New Roman", Times, serif;
		line-height:75%;
		text-align: center;}

.current {font-style: oblique;}
		
/*img.thumbnail {float:left;
			padding:1.2em;
			vertical-align:text-bottom;}
			
a#default img, a#typewriter img, a#contrast img {height: 0; width: 0; border-width: 0;}

a:hover#default img, a:hover#typewriter img, a:hover#contrast img 
		{position:absolute;
    	 top:20px; left:520px; 
		 height:100px; width:150px;
		 border: 2px solid #336633;}*/
		 
/* CONTACT PAGE FORM... */

div.info, form {border-top: 1px dotted #336633;
			/*border-bottom: 1px dotted #336633;*/
			  padding: 0.6em;}
			  
input.text, textarea.text { background-image:url(bgd_14.jpg);
							font-family:Georgia, "Times New Roman", Times, serif;
							color: #660000;
							border:1px solid #333333;
							padding:0.15em;
							width:90%;
							max-width: 90%;
							max-height: 10em;
							overflow:auto;}	
							
input.buttons {color:#336633;
			   font-family:Georgia, "Times New Roman", Times, serif;
			   margin: 1em 3em 1em 0;}
				
div#buttons { text-align:center;}				
							
input.text:focus, textarea:focus {border: 2px solid #336633;}
		  
label { color:#336633;
		display: block;
  		float: left;
		clear: left;
		width: 40%;
		padding: 0.3em;
		margin: 1em 5px 0 0;}
		
/* BLOG... */

div.blogentry {margin: 10px 0 0 0;
				padding: 5px;}

h3.blogtitle {font-size: 1em;}

div.blogdate {background-image: url(datecal.png);
				background-repeat: no-repeat;
				width: 61px; height: 82px;
				float:right;
				margin:0 0 0 10px;
				z-index: 10;}

p.day {font-size: 2.2em;
		font-weight: bold;
		margin: 0;
		text-align: center;
		line-height: 1.4em;}
				
p.month {font-size: 0.5em;
		margin: 0;
		font-weight: bold;
		text-align: center;
		line-height: 1.3em;}
		
p.year {font-size: 0.5em;
		margin: 0;
		font-weight: bold;
		text-align: center;
		line-height: 1.3em;}

/* SIDEBAR...
Mainly used for lists of links etc. especially in the blog. */

div#bgd11 {width:150px; height:600px;
			position:absolute;
			top:80px; left:735px;
		 	z-index:5;
		 	text-align: center;}
		 	
ul.styles {list-style:none;}

img.rss {border:none;}

/*miscallaneous styles */

p.signoff {text-align:right;}

p.quote {font-style: oblique;}

p.verse {text-align: center;}

p.chorus {text-align: center;
		  font-style: oblique;}

p.embed {text-align: center;}	

div.illustration {padding: 0 0 0 20px;
				  float: right;}
				  
div.alt_illustration {padding: 0 20px 0 0 ;
				  float: left;}
				  
div.caption {padding: 0;
			 color:#336633;
			 width: 150px;
			 margin: auto;
			 font-weight: bold;
			 font-size:0.8em;}	

img {border:none;}

img.icon {padding: 5px 20px 5px 0px;
			vertical-align: middle;}

div#flashPlayer {position:relative;
				margin:auto;
				text-align:center;}

div#slab {	background-image: url(../site_images/woodsmith/slab.png);
			background-repeat: no-repeat;
			width: 342px; height: 258px;
			position:relative;
			margin:auto;
			text-align:center;}

div.comingsoon {background-image: url(../site_images/comingsoon.png);
				background-repeat: no-repeat;
				background-position: center;}


q:hover {color:#336633;
		cursor: help;}

div#twitter_div {	border-top: 1px dotted #336633;
					}

ul#twitter_update_list {padding: 10px 30px;}

h2.sidebar-title {padding-top: 15px;}

a#twitter-link {display:block;
				text-align:center;
				font-family:Georgia, "Times New Roman", Times, serif;
				font-size:0.8em;}

ul#twitter_update_list {	list-style:none;}

#bookwidget {position:relative;
			margin:auto;
			text-align:center;}