/**************************************************************************************
*   
*   ZOES BOOKS/SAGE PRESS NEW WEBSITE TO LAUNCH SEPTEMBER 2008: BLACKANDWHITEPIXELS DESIGN
*
***************************************************************************************/

* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt ;
	line-height: 1.5em;
	}
	
a, span {font-size: 1em;}
span {color: inherit;}
strong {font-weight:400;}

html {  min-height: 100%; margin-bottom: 1px;}

body	{
		background: url('illustratio.jpg') repeat;
		padding: 0px 0px 3em;
		font-family: Verdana, Tahoma, Arial, sans-serif;
		color: #fff;
		}

#root {
	width: 894px; 
	margin: 0 auto; 
	}
	
td, li, ul, ol, h1, h3, h4, h5, h6, blockquote, textarea, input, div, span  { font-family: Verdana, Tahoma, Arial, sans-serif; }

div, form, legend, table, td, ul, li, h1, h3, h4, caption
		{
		margin: 0px;
		padding: 0px;
		border: 0px;
		list-style: none;
		}
		
.hide
		{
		display: none;
		}


.clear {overflow: hidden; clear: both; height: 0; font-size: 1px;}

.clearfloats { clear: both; margin: 0px; padding: 0px; }

ul ul
		{
		font-size: 1em;
		}

a:link, a:visited, a:hover, a:active
		{
		color: #fff;
		}
a:hover
		{
		text-decoration : underline;
		}
a img
		{
		border: 0px;
		}	

/*------------Header------------ */

#header {
		position: relative;
		background: url(top.jpg) top center no-repeat;
		height:235px;
		width: 100%;
		margin-top: 0px;
		margin-bottom: 0px;
		}
		
#coverimage h1 {
		text-indent: -999px;
		overflow:hidden;
		position: relative;
		float: left;
		width: 454px;
		height: 190px;
		margin-top: 33px;
		left: 37px;
		background: url('bookflying.jpg') no-repeat center;
		}
		
.logo 	{
		height: 235px;
		width: 390px;
		float: right;
		}
		
.menu   {
		position: relative;
		height: 26px;
		margin-left: 0px;
		background: #fff;
		}	
		
#nav {
  clear:both;
  font-weight:bold;
  color:#666;
  margin-left: 10px;
  float:left;
  list-style-type:none;	
  padding-bottom:0px;
}

#nav li{
  list-style-type:none;
  float:left;
  margin:0 0 0 5px;
  padding:0px 0px 5px 20px;
  background:url(tabgrey.gif) #c0c0c0 top left no-repeat;
}

#nav li a{
  color:#002200;	
  background:url(tabgrey.gif) transparent top right no-repeat;
  text-decoration:none;
  display:block;
  padding:5px 20px 0px 0px;
  font: 0.97em Arial, Helvetica, sans-serif;
}

#nav li.cur, #nav li.over, #nav li:hover, #nav li strong a {
  	background:url(tabblue.gif) top left no-repeat;

	}

#nav li strong,
#nav li.current a,
#nav li.over a
{
  display:block;
  color:#fff;
  padding: 3px 20px 0 0;
  text-decoration:none;
  background:url(tabblue.gif) transparent top right no-repeat;
}

#nav li:hover a {
  display:block;
  color:#fff;
  padding: 5px 20px 0 0;
  text-decoration:none;
  background:url(tabblue.gif) transparent top right no-repeat;
}
		
#main
		{
		position: relative;
		background: #fff;
		margin: 0px auto;
		width: 850px;
		height: auto;
		margin-top: 0px;
		}
		
#textpanel 
		{
		background:url(mainbg.jpg) center repeat-y;
		margin: 0px auto;
		width: 820px; 
		border-bottom: 20px solid #fff;
		}	
		
		
#left {
		float: left;
		padding-bottom: 30px;
		width: 467px;
		}
#left_shop {
		float: left;
		padding-bottom: 30px;
		width: 867px;
		}		
		
#leftmain p {
		width: 362px;
		margin: 0px auto;
		margin-bottom: 40px;
		text-align: justify;
		}		
		
#leftmain {
		width: 400px;
		margin: 0px auto;
		}
#leftmain_shop {
		width: 800px;
		margin: 0px auto;
		}		
		
#home #leftmain h2
		{
		background: url(zoewelcome.gif) no-repeat left top;
		margin-top: 25px;
		margin-left: 10px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 10px;
		float: left;
		}
		
#casestudies #leftmain h2
		{
		background: url(casestudies.gif) no-repeat top left;
		margin-top: 25px;
		margin-left: 15px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 20px;
		float: left;
		}		
	
#thankyou #leftmain h2
		{
		background: url(thankyou.gif) no-repeat top left;
		margin-top: 25px;
		margin-left: 15px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 20px;
		float: left;
		}
		
#error #leftmain h2
		{
		background: url(errorheader.gif) no-repeat top left;
		margin-top: 25px;
		margin-left: 15px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 20px;
		float: left;
		}					
		
#selfpublishingkent #leftmain h2
		{
		background: url(aboutselfpublishing.gif) no-repeat;
		margin-top: 25px;
		margin-left: 10px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 10px;
		float: left;
		}		

#aboutzoesbooks #leftmain h2
		{
		background: url(aboutzoe.gif) no-repeat;
		margin-top: 25px;
		margin-left: 10px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 10px;
		float: left;
		}
		
#services #leftmain h2
		{
		background: url(services.gif) no-repeat;
		margin-top: 25px;
		margin-left: 10px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 10px;
		float: left;
		}
		
#news #leftmain h2
		{
		background: url(news.gif) no-repeat;
		margin-top: 25px;
		margin-left: 10px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 10px;
		float: left;
		}						
	
#shop #leftmain h2
		{
		background: url(shop.gif) no-repeat;
		margin-top: 25px;
		margin-left: 10px;
		width: 360px;
		height: 32px;
		text-indent: -999px;
		overflow: hidden;
		padding-bottom: 10px;
		float: left;
		}	
	
#right
		{
		float: right;
		width: 350px;
		text-align: justify;
		}
		
.homeimagepanel 
		{
		width: 280px;
		margin: 0px auto;
		margin-top: 30px;
		margin-bottom: 20px;
		}	
		
.homeimage {
		height: 190px;
		width: 280px;
		}
		
.aboutzoeimage {
		height: 220px;
		width: 280px;
		}
	
.casestudyimage {
		height: 262px;
		width: 180px;
		margin: 0px auto;
		margin-bottom: 30px;
		}
		
.selfpublishingimage {
		height: 424px;
		width: 300px;
		margin: 0px auto;
		margin-bottom: 10px;
		border: 0px solid #fff;
		}
		
.contactimage {
		height: 290px;
		width: 200px;
		margin: 0px auto;
		margin-bottom: 5px;
		border: 1px solid #fff;
		}			
		
.spkimagelinks {
		background: #fff;
		color: #000;
		width: 169px;
		}
		
.spkimagelinks p {
		font-size: 0.8em;
		text-align: center;
		padding-bottom: 10px;
		padding-top: 10px;
		}		
		
.imagelinks {
		background: #fff;
		color: #000;
		width: 280px;
		}
		
.imagelinks p {
		font-size: 0.8em;
		text-align: center;
		padding-bottom: 10px;
		padding-top: 10px;
		}
		
.imagelinks a {
		color: #003300;
		}
	
.contactimagelinks {
		background: #fff;
		margin: 0px auto;
		color: #000;
		width: 200px;
		border: 1px solid #fff;
		}
		
.contactimagelinks p {
		font-size: 0.8em;
		text-align: center;
		padding-bottom: 10px;
		padding-top: 10px;
		}
		
.contactimagelinks a {
		color: #000;
		}	
		
.servicelist {
		width: 275px;
		height: 320px;
		margin: 0px auto;
		}
.servicelist_rhs {
		width: 275px;
		height: 320px;
		margin: 0px auto;
		padding-top: 65px;
		}		

.servicelist p{
		font-size: 85%;
		}
.servicelist_rhs p{
		font-size: 95%;
		}		
		
.servicelist h2 {
		background: url(headertext.gif) no-repeat top left;
		height: 35px;
		width: 270px;
		margin-top: 30px;
		text-indent: -9999px;
		overflow: hidden;
		}			
		
.servicelistinset {
		height: auto;
		background: #000;
		text-align: justify;
		}

.servicelist ul {
		padding-top: 5px;
		padding-left: 1.5em;
		}
	
.servicelist ul li {
		padding-top: 5px;
		font-size: 85%;
		list-style-image: url(0158_tick.png);
		padding-left: 1em;
		}
.servicelist_rhs ul {
		padding-top: 5px;
		padding-left: 1.5em;
		}
	
.servicelist_rhs ul li {
		padding-top: 5px;
		font-size: 85%;
		list-style-image: url(0158_tick.png);
		padding-left: 1em;
		}							
.selfpublishing {
		margin: 0px auto; 
		font-size: 85%; 
		padding-left: 30px; 
		padding-right: 30px; 
		padding-bottom: 10px;
}		
.quote {
		width: 280px;
		color: #002200;
		background: #fff url(bubblebottom.jpg) bottom center no-repeat;
		height: auto;
		top: 30px;
		padding-bottom: 40px;
		margin: 0px auto;
		}		
		
.quote p {
		
		width: 250px;
		margin-left: 15px;
		text-align: justify;
		font-size: 90%;
		}	
		
.quote h2 {
		background:url(bubbletop.jpg) no-repeat top center;
		height: 40px;
		width: 280px;
		text-indent: -999px;
		overflow: hidden;
		}
		
.quote2 {
		width: 280px;
		color: #002200;
		background: #fff url(bubblebottom.jpg) bottom center no-repeat;
		height: auto;
		top: 30px;
		padding-bottom: 40px;
		margin: 0px auto;
		}
		
.quote2 p {
		
		width: 250px;
		margin-left: 15px;
		text-align: justify;
		font-size: 90%;
		}	
		
.quote2 h2 {
		background:url(bubbletop2.jpg) no-repeat top center;
		height: 50px;
		width: 280px;
		text-indent: -999px;
		overflow: hidden;
		}	
		
.extracts {
		margin: 0px auto;
		width: 180px;
		height: 30px;
		border: 1px solid #fff;
		background: #fff;
		color: #002200;
		margin-bottom: 10px;
		}	
		
.extracts p {
		text-align: center;
		font-size: 70%;
		margin-top: 9px;
		}									

.extracts2 {
		margin: 0px auto;
		width: 180px;
		height: 30px;
		border: 1px solid #fff;
		background: #fff;
		color: #002200;
		}	
		
ul.could
		{	
		padding-left: 10px;
		text-align: left;
		margin-top: 0px;
		margin-bottom: 20px;
		}
		
ul.could li
		{
		color: #fff;
		background: url(tick.gif) no-repeat;
		margin-left: 40px;
		padding-left: 25px;
		list-style-type: none;
		}
		
#centraltext {
		background: #003300;
		width: 430px;
		}
		
#centraltext p {
		margin-left: 40px;
		color: #fff;
		width:385px;
		text-align: justify;
		font-size: 0.8em;
		}
		
#bookbar
		{
		
		margin: 0px auto;
		width: 350px;
		/*background: #004400;*/
		}
		
#bookbar h2
		{
		background: url(sage3.gif) no-repeat;
		margin-top: 0px;
		margin-left: 0px;
		width: 350px;
		height: 50px;
		text-indent: -9999px;
		overflow: hidden;
		padding-left: 0px;
		}
		
#bookbar p
		{
		margin-left: 10px;
		margin-right: 10px;
		}		
		
#bookbarinset {
		width: 350px;
		/*margin: 0px auto;*/
		padding-left:10px;
		padding-right:10px;
		padding-bottom:10px;
		}
		
#bookbar .coversfirst
		{
		float: left;
		margin-top: 10px;
		margin-bottom: 20px;
		height: 217px;
		width: 150px;
		background: #002200;
		}
		
#bookbar .covers
		{
		float: left;
		margin-top: 10px;
		margin-left: 20px;
		height: 217px;
		width: 150px;
		background: #002200;
		}
#bookbar .coversmiddle
		{
		float: left;
		margin-top: 10px;
		margin-left: 100px;
		margin-right: 100px;
		height: 217px;
		width: 150px;
		background: #002200;
		}		

		
/*-------------Specific to contact Page------------- */

#contactus fieldset {	
	border: 0px;
	padding-bottom: 0px;
	margin-left: 43px;
	}
	
#contactus fieldset p {
	padding-bottom: 5px;
	text-align: left;
	}	
	
#contactus #left h2
		{
	background: url(contact.gif) no-repeat left;
	margin-top: 25px;
	margin-left: 10px;
	width: 360px;
	height: 32px;
	text-indent: -999px;
	overflow: hidden;
	padding-left: 0px;
	float: left;
		}
		
#contactus #left {
		background: #003300;
		width: 455px;
		float: left;
		padding-bottom: 30px;
		}	
		
#contactus #leftmain p {
		width: 362px;
		margin: 0px auto;
		padding-bottom: 10px;
		padding-top: 10px;
		text-align: justify;
		color: #fff;
		}	
	
#contactus #right
		{
		float: right;
		width: 350px;
		}
		
#contactus #homeimagepanel 
		{
		width: 280px;
		margin: 0px auto;
		margin-top: 30px;
		margin-bottom: 20px;
		}	
		
#contactus #homeimage {
		height: 190px;
		width: 280px;
		}
		
.leftquote {
		width: 347px;
		color: #002200;
		background: #fff url(bubblebottom2.jpg) bottom center no-repeat;
		height: auto;
		top: 30px;
		padding-bottom: 40px;
		margin-left: 40px;
		margin-top: 30px;
		}
		
.leftquote p {
		
		width: 316px;
		margin-left: 25px;
		text-align: justify;
		font-size: 90%;
		}	
		
.leftquote h4 {
		background:url(bubbletop22.jpg) no-repeat top center;
		height: 30px;
		width: 347px;
		text-indent: -999px;
		overflow: hidden;
		}			



/*-------------Footer------------- */


.footer
		{
		margin-left: 14px;
		width: 822px;
		color: #fff;
		height: 70px;
		background: #9ecab9;
		}
		
.footer ul
		{
		margin-left: 10px;
		width: 800px;
		height: 60px;
		font-size: 0.7em;
		line-height: 40px;
		text-align: center;
		background:#003300;
		}
.footer ul li
		{
		display: inline;
		}
.footer ul li a
		{
		padding: 0px 0.2em 0px 0.4em;
		border-left: 1px solid #000;
		color: #fff;
		text-decoration: none;
		}
#footer ul li.first a
		{
		border: none;
		}
#footer ul li a:hover
		{
		color: #fff;
		}

.menu2   {
		position: relative;
		height: 27px;
		background: #fff;
		border-bottom: 10px solid #fff;
		}	
		
#nav2 {
  clear:both;
  font-weight:bold;
  color:#fff;
  margin-right: 300px;
  float:right;
  list-style-type:none;	
  padding-bottom:0px;
}

#nav2 li{
  list-style-type:none;
  float:left;
  margin:0 0 0 5px;
  padding:0px 0px 5px 20px;
  background:url(tabblack.gif) #c0c0c0 top right no-repeat;
}

#nav2 li a{
  color:#fff;	
  background:url(tabblack.gif) transparent top left no-repeat;
  text-decoration:none;
  display:block;
  padding:5px 20px 0px 0px;
  font: 0.97em Arial, Helvetica, sans-serif;
}

#nav2 li.cur, #nav2 li.over, #nav2 li:hover, #nav2 li strong a {
  	background:url(tabgrey2.gif) bottom right no-repeat;

	}

#nav2 li strong,
#nav2 li.current a,
#nav2 li.over a
{
  display:block;
  color:#000;
  padding: 3px 20px 0 0;
  text-decoration:none;
  background:url(tabgrey2.gif) transparent bottom left no-repeat;
}

#nav2 li:hover a {
  display:block;
  color:#000;
  padding: 5px 20px 0 0;
  text-decoration:none;
  background:url(tabgrey2.gif) transparent top right no-repeat;
}

.footer_address {
	color: #000;
	text-align: center;
	font: 0.97em Arial, Helvetica, sans-serif;
	padding-bottom: 10px;
}
a.footer_links{
	color: #000;
	text-align: center;
	font: 0.97em Arial, Helvetica, sans-serif;
	padding-bottom: 5px;
	text-decoration: none;
}
a.footer_links:hover{
	color: #000;
	text-align: center;
	font: 0.97em Arial, Helvetica, sans-serif;
	padding-bottom: 5px;
	text-decoration: underline;
}

/* Form Error Styling */

#mainFormError
{
background-color: #A7D898; 
}

input.mainFormError 
{
background-color: #A7D898;
}

select.mainFormError 
{
background-color: #A7D898;
}