/* ===================================================
CSS for Stephen Wessel - v1.0

Author: 		whitespacedesign
Contact: 		emily@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		30.09.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% Century Gothic, arial, helvetica, sans-serif; /* reset font size to 12px; */
	text-align: center;
	background: #A1A5A8 url(../graphics/global_bg.gif) center 0 repeat-y;
	}

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

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

ul,ol {list-style:none;}

address {font-style: normal;}

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

.clearfix: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 {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: 880px;
	margin: 0 auto;
	text-align: left; /* reset */
	display:block;
	background: transparent url(../graphics/emblem.gif) 550px 0 no-repeat;
	}

#header {
	float:left;
	display:inline;
	width: 880px;
	height: 190px;
	position: relative;
	}
	
#title {
	float: left;
	display:inline;
	margin: 45px 0 0 49px;
	}
	
div#content {
	width: 780px;
	margin: 0 0 0 50px;
	padding: 0 0 30px 0;
	float: left;
	display:inline;
	border-top: 1px solid #79A4BF;
	background: transparent url(../graphics/rule_2col.gif) 0 bottom no-repeat;
	}
#bodyHome div#content {background: transparent url(../graphics/rule_1col.gif) 0 bottom no-repeat;}

div.rightCol,
div.leftCol {
	float: left;
	display:inline;
	width: 380px;
	border-top: 1px solid #79A4BF;
	}
div.rightCol {
	margin-left: 20px;
	}
#bodyHome div.rightCol,
#bodyHome div.leftCol {
	border-top: none;
	}

div.wideCol,
div.rightCol,
div.leftCol {
	padding-top:20px;
	}




/**********************{     nav     }************************/

#mainNav ul {
	width: 480px;
	margin: 26px 0 0 50px;
	float: left;
	display:inline;
	}
	
#mainNav ul li {
	float: left;
	margin-top: 2px;
	}

#mainNav ul li#nav2,
#mainNav ul li#nav3,
#mainNav ul li#nav4,
#mainNav ul li#nav6,
#mainNav ul li#nav7,
#mainNav ul li#nav8 {
	padding-left:33px;
	background: #F5F8F4 url(../graphics/bullet.gif) 13px 0 no-repeat;
	}

#mainNav ul li a {
	display: block;
	height: 20px;
	text-indent: -5000px;
	background-image: url(../graphics/nav_1.gif);
	}

#mainNav ul li#nav1 a {
	width: 128px;
	background-position: 0 0;
	}
#mainNav ul li#nav2 a {
	width: 103px;
	background-position: -134px 0;
	}
#mainNav ul li#nav3 a {
	width: 75px;
	background-position: -244px 0;
	}
#mainNav ul li#nav4 a {
	width: 58px;
	background-position: -325px 0;
	}
#mainNav ul li#nav5 a {
	width: 69px;
	background-position: -388px 0;
	}
#mainNav ul li#nav6 a {
	width: 56px;
	background-position: -464px 0;
	}
#mainNav ul li#nav7 a {
	width: 122px;
	background-position: -526px 0;
	}
#mainNav ul li#nav8 a {
	width: 60px;
	background-position: -652px 0;
	}

#mainNav ul li#nav1 a:hover {background-position: 0 -20px;}
#mainNav ul li#nav2 a:hover {background-position: -134px -20px;}
#mainNav ul li#nav3 a:hover {background-position: -244px -20px;}
#mainNav ul li#nav4 a:hover {background-position: -325px -20px;}
#mainNav ul li#nav5 a:hover {background-position: -388px -20px;}
#mainNav ul li#nav6 a:hover {background-position: -464px -20px;}
#mainNav ul li#nav7 a:hover {background-position: -526px -20px;}
#mainNav ul li#nav8 a:hover {background-position: -652px -20px;}

#bodyFlute #mainNav ul li#nav1 a {background-position: 0 -40px;}
#bodyEndorsements #mainNav ul li#nav2 a {background-position: -134px -40px;}
#bodyQuestions #mainNav ul li#nav3 a {background-position: -244px -40px;}
#bodyGallery #mainNav ul li#nav4 a {background-position: -325px -40px;}
#bodyOrdering #mainNav ul li#nav5 a {background-position: -388px -40px;}
#bodyService #mainNav ul li#nav6 a {background-position: -464px -40px;}
#bodyMaker #mainNav ul li#nav7 a {background-position: -526px -40px;}
#bodyContact #mainNav ul li#nav8 a {background-position: -652px -40px;}
	
#subnav {
	position: absolute;
	top: 120px;
	left: 670px;  
	}
	
	#subnav li { 
		list-style: none;
		margin-bottom: 5px;
	}
#subnav li a {
	display: block;
	height: 30px;
	width: 160px;
	text-indent: -5000px;
	}
	
	#subnav li#ferretLink a  {
		background: transparent url(../graphics/ferret_button.gif) 0 0 no-repeat;	
	} 

	#subnav li#complexLink a  {
		background: transparent url(../graphics/pronomos_button.gif) 0 0 no-repeat;	
	}
		 #subnav li#ferretLink  a:hover,
		 #subnav li#complexLink  a:hover {
			background-position: 0 -30px;
			}




/**************************{ c o n t e n t }************************/

img.splashImage {margin: 36px 0 36px 0;}
	
h1 {
	width: 540px;
    height: 33px;
    margin: 12px 0 10px 0;
   	background: transparent no-repeat 0 0;
	text-indent: -5000px;
	}

#bodyHome h1 {position: absolute;left: -9000px;top: -9000px;}
#bodyFlute h1 {background-image: url(../graphics/h1_flute.gif);}
#bodyEndorsements h1 {background-image: url(../graphics/h1_endorsements.gif);}
#bodyQuestions h1 {background-image: url(../graphics/h1_questions.gif);}
#bodyGallery h1 {background-image: url(../graphics/h1_gallery.gif);}
#bodyOrdering h1 {background-image: url(../graphics/h1_ordering.gif);}
#bodyService h1 {background-image: url(../graphics/h1_service.gif);}
#bodyContact h1 {background-image: url(../graphics/h1_contact.gif);}
#bodyFerret h1 {background-image: url(../graphics/h1_ferret.gif);}	
#body404 h1 {background-image: url(../graphics/h1_pagenotfound.gif);}
#bodyMaker h1 {background-image: url(../graphics/h1_flute_maker.gif);}
#bodyComplex h1 {background-image: url(../graphics/h1_complex.gif);}

h2 {
	color:#457796;
	font-size: 1.3333em;/* 16px */ 
	line-height: 1.125em;/* 18px */ 
	margin: 1.125em 0 .75em 0;
	width: 380px;
	}

#bodyEndorsements h2 {
	float: left;
	width: 380px;
	}
		
h2 span {
	display: block;
	float: left;
	font-size: .75em;/* 16px */ 
	line-height: 1.5em;/* 18px */ 
	margin: 0;
	width: 380px;
	}
	
.rightCol h2,
h2.no1,
#bodyComplex h2 {
	margin-top: 0;
	}

.leftCol ul {
	list-style-type: disc;
	padding-left: 20px;
	}

#bodyHome .rightCol p {
	width: 380px;
	}
#bodyHome .leftCol p {
	width: 370px;
	padding-right: 10px;
	}

p, 
.leftCol ul,
.leftCol ol {
	line-height: 1.5em;/*18px*/
	color: #49555C;
	margin-bottom: 1em;
	}

p#intro {
	background-image: url(../graphics/splash_text.gif);
	width: 754px;
	height: 108px;
	margin-bottom: 0px;
	}
	
p a,
.leftCol li a {
	color: #DC4B1E;
	}
	
p a:hover,
.leftCol li a:hover {
	color: #669EC2;
	text-decoration: none;
	} 
	
p.paginate span {
	border-top: 1px solid #88B6D3;
	width: 150px;
	padding-top: 10px;
}
	
.previousPage {
	float: left;
	}

.nextPage {
	float: right;   
	text-align: right;
	}	
	
.rightCol.withIllustration {
	text-align: right;
	}
	
.rightCol p.xLink {
	width: 180px;
	margin: 30px 0 0 200px;
	border-top: 1px solid #88B6D3;
	}
	
.rightCol p.xLink,
.rightCol p.xLink a {
	color: #669EC2;
	text-decoration: none;
	}
	
.rightCol p.xLink a:hover {
	text-decoration: underline;
	}
	
.rightCol p.xLink p span {
	font-size: 1.2em;
	}

table {
	width: 380px;
	margin: 0 0 20px 0;
	}
	
table th {
	vertical-align: top;
	color:#457796;
	border-bottom: 1px solid #ccc;
	padding: 0 0 8px 0;
	}
table td {
	vertical-align: bottom;
	border-bottom: 1px solid #ccc;
	padding: 6px 0 8px 0;
	color:#666;
	}
table th.priceCol,
table td.priceCol {
	text-align: center;
	}
	
.portrait img {
	float: left;
	margin: 4px 12px 4px 0;
	}

.rightCol blockquote {
	margin-top: 50px;
	}
	
.rightCol blockquote.top {
	margin-top: 0px;
	}	
	
.rightCol blockquote p {
	color: #587a8c;
	margin: 30px 0 0 200px;
	text-align: left;
	}
	

#bodyMaker .rightCol blockquote p,
#bodyComplex .rightCol blockquote p {
	margin-right: 200px;
	margin-left: 0px;
	}

.rightCol blockquote.top p {
	margin: 0px 200px 0 0px;
	}

.rightCol blockquote p q {
	font-size: 1.5em;
	line-height: 1.11em;
	}
	
.rightCol blockquote p cite {
	display: block;
	text-align: right;
	margin-top: 14px;
	font-style: normal;
	}
	
 .rightCol blockquote q:before {
   content : url(../graphics/ldquo_mark.gif);
 }

 .rightCol blockquote q:after {
   content : url(../graphics/rdquo_mark.gif);
 }
 

/************************{   q u e s t i o n s   }******************/
	
.accordion_content {
	padding: 0 10px 10px 0;
	overflow: hidden;
	}
	
.accordion_content p {
	padding: 0 10px 10px 0;
	overflow: hidden;
	}
		
h2.accordion_toggle {
	display: block;
	cursor: pointer;
	color: #DC4B1E;
	}

h2.accordion_toggle:hover {
	color: #669EC2;
	}

h2.accordion_toggle_active {
	color: #457796;
	}
	

/************************{   g a l l e r y   }******************/

#largeImage {height: 460px;text-align:right;}

/*#largeImage img{float:right;}*/

.leftCol ul.thumbs {
	list-style-type: none;
	padding-left: 0px;
	}
	
ul.thumbs li {
	float: left;
	padding: 0px 20px 20px 0px;
	margin-bottom: 0;
	}
	
ul.thumbs a {
	float: left;
	height: 80px;
	}

ul.thumbs li.no4,
ul.thumbs li.no8,
ul.thumbs li.no12,
ul.thumbs li.no16 {
	padding-right: 0px;
 }
 
p.galleryCaption {height: 20px;}
	
	
 
/**********************{   c o n t a c t   f o r m   }*****************/

#contact_form {
	float: left;
	width: 380px;
	}

#contact_form p,
#contact_form fieldset {
	float: left;
	clear: left;
	width: 380px;
	}

#wideCol p#formNotice {margin-bottom: 0px;}

#contact_form label {
	float: left;
	display: block;
	width: 114px;
	padding: 0 6px 6px 0;
	color: #666;
	}

#contact_form p input,
#contact_form p textarea {
	float: left;
	display: block;
	width: 250px;
	border: 1px solid #ccc;
	margin: 4px 0 4px 0;
	padding: 4px;
	font-family: arial, sans-serif;
	}

#contact_form p#captcha span.notes {display:block;}
#contact_form p#captcha span.notes,
#contact_form p#captcha label {
	padding-left: 120px;
	width: 244px;
	}
#contact_form p#captcha input {float: right;}
	
#contact_form p#submitbutton input {
	float: right;
	clear: left;
	display: block;
	width: 135px;
	background-color: #e1e1e1;
	margin: 4px 0 4px 0;
	padding: 4px;
	font-family: arial, sans-serif;
	color: #DC4B1E;
	}

#contact_form p#submitbutton input:hover {
	cursor: pointer;
	background: #ccc;
	}
	



/***************************{   f o o t e r   }**********************/

#footer {
	float: left;
	display:inline;
	width: 780px;
	margin: 0 0 0 50px;
	}
	
#footer p {
	float: right;
	margin: 0 0 40px 0;
	font-size: .83em; /*10px*/
	}
#footer p,
#footer p a {
	color: #9F9F9F;
	text-decoration:none;
	}