body 
{
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; 
	color: #000000;
	font-size: 1em;
	margin: 0;
	text-align:center;
		
	background: url(../images/background.jpg);
}

h1
{

}

h2
{
	margin-left: 30px;
}

h3
{
	margin-left: 20px;
}

a
{
color: red;
}

p
{
font-size: 0.7em;
}
/* ////////////////////////////////////////////////////////////////////

			PAGE CORNER SHADING CSS

This is used to add the faded effect on each corner of the page. 
It works by putting the contents of all the page within a container
and then setting the background of divs which surround the container
with the faded background image - a similar method to how people use
the rounded corners on divs

////////////////////////////////////////////////////////////////////*/

.roundcont 
{
	width: 100%;
	height: 100%;
	text-align:left;
	color: #fff;
	z-index: 1;
}

.roundcont p 
{
	margin: 0 10px;
}

.roundtop 
{ 	
	background: url(../images/dim2.jpg) no-repeat top right; 
	z-index: 1;
}

.roundbottom 
{	
	background: url(../images/dim3.jpg) no-repeat top right; 
	z-index: 1;
}

img.corner 
{	
   	width: 418px;
   	height: 414px;
   	border: none;
   	display: block !important;
	z-index: 1;
}



/* ////////////////////////////////////////////////////////////////////

			PAGE DECORATION

The vector images that are used at the top, the book cover, the book 
pages (left and right), navigation tabs

////////////////////////////////////////////////////////////////////*/

.vectors
{
	position: relative;
	z-index: 8;
	width:960px;
	padding:0px;
	text-align:left;
	height: 1000px;
	margin-top: -400px;
	margin-bottom: -900px;
	background: url(../images/VEC1.png) no-repeat;
}




.book
{
	position: relative;
	z-index: 10;
	width:960px;
	height: 672px;
	margin-top: -300px;
	margin-bottom: -300px;
	margin-right:auto;
	margin-left:auto;
	padding:0px;
	text-align:left;
	background: url(../images/covertop.jpg) no-repeat;
	background-color: #000000;

}

.bottomcover
{
	position: relative;
	z-index: 11;
	margin-right:auto;
	margin-left:auto;
	margin-top: 300px;
	margin-bottom: -300px;
	width:960px;
	height: 30px;
	background: url(../images/coverbottom.png) no-repeat;
}

.leftnav
{
	float: left;
	height: 650px;
	width:22px;
	background: #cccccc; 
	color: #000000;
	background: url(../images/leftnav.jpg) right no-repeat;
}



.leftpage
{
	float: left;
	height: 650px;
	width:424px;
	background: #ffffff; 
	color: #000000;
	background: url(../images/leftpage.jpg) no-repeat;
}

.binding
{
	position:relative;
	margin-bottom:-20px;
	float: left;
	height: 650px;
	width:64px;
	background: url(../images/binding.jpg) no-repeat;

}

.rightpage
{
	float: left;
	margin-top: 4px;
	_margin-top: 1px;
	margin-left: -6px;
	height: 643px;
	width:422px;
	color: #000000;
	background: #ffe4b6; 
	background: url(../images/rightvec.gif) right no-repeat;
}

.rightnav
{
	
	float: left;
	height: 650px;
	width:22px;
	background: #cccccc; 
	color: #000000;
	background: url(../images/rightnav.jpg) left no-repeat;
}

/* ////////////////////////////////////////////////////////////////////

				LOGOS

Any logos which are used on the page

////////////////////////////////////////////////////////////////////*/

.bindlogo
{
	margin-top:-55px;
	margin-left:25px;
	height: 130px;
	width: 218px;
	background: url(../images/bindlogo.png) no-repeat;
	z-index: 12;
	position: relative;
}

.dovecraftlogo
{	
	position: relative;
	margin-top:-55px;
	_margin-top:-706px;
	margin-left:785px;
	height: 34px;
	width: 159px;
	background: url(../images/dovecraft.png) no-repeat;
	z-index: 13;
}	

.zutterlogo
{
	background: url(../images/dovecraft.png) no-repeat;
}

/* ////////////////////////////////////////////////////////////////////

			LEFT NAVIGATION

The links used on the left hand page

////////////////////////////////////////////////////////////////////*/


.home-tab a
{
	background: url(../images/hometab.jpg);
	display: block;
	float: left;
	height: 113px;
	width: 23px;
	margin-bottom: 5px;

}

.products-tab a
{
	background: url(../images/productstab.jpg);
	display: block;
	float: left;
	height: 113px;
	width: 23px;
	margin-bottom: 5px;
}

.projects-tab a
{
	background: url(../images/projecttab.jpg);
	display: block;
	float: left;
	height: 113px;
	width: 23px;
	margin-bottom: 5px;
}

.retail-tab a
{
	background: url(../images/retailtab.jpg);
	display: block;
	float: left;
	height: 113px;
	width: 23px;
	margin-bottom: 5px;
}

.video-tab a
{
	background: url(../images/videotab.jpg);
	display: block;
	float: left;
	height: 113px;
	width: 23px;
	
}

.contact-tab a
{
	background: url(../images/contacttab.jpg);
	display: block;
	float: left;
	height: 113px;
	width: 23px;
	margin-top: 480px;
	margin-left: 5px;
	
}
.home-tab a:hover, .products-tab a:hover, .projects-tab a:hover, .retail-tab a:hover, .video-tab a:hover, .contact-tab a:hover    
{
	background-position: 23px 113px;

} 

.no-text
{

display:none;

}

/* ////////////////////////////////////////////////////////////////////

				FOOTER

The footer on the site, links within it etc

////////////////////////////////////////////////////////////////////*/

.footer
{	
	position: relative;
	background: url('../images/vec2.png') left no-repeat;
	margin-top: 275px;
	padding-top: 30px;
	width: 960px;
	height: 200px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	
}

.footer p
{	
	color: #fff;
	font-size: 0.7em;
}


/* ////////////////////////////////////////////////////////////////////

				INDEX 

The torn piece of paper image on the index page which has navigation
links, the polaroids, vector on the right page and anything else
relating to content on the index page.

////////////////////////////////////////////////////////////////////*/

.indexnavigation
{	
	/*position: relative;*/
	background: url('../images/indexpaper.png') left no-repeat;
	margin-left:20px;
	width: 40412:44 31/10/2007px;
	height: 217px;
	z-index: 20px;
	
	
}



.indexlinks
{
	padding: 66px 0 0 80px;
}

.indexlinks img
{
	margin-bottom: 11px;
}

.indexwelcome
{
	
}

.indexwelcome img
{
	margin-left: 70px;
}

.indexwelcome p
{	
	margin-left: 60px;
	margin-bottom: 10px;
	width: 80%;
	font-size: 0.8em;
}

.indexwelcome form
{
	font-size: 0.8em;
	margin-top: 60px;
	margin-left: 60px;
}

.polaroids
{	position: relative;
	z-index: 15;
	background-color: transparent;
	
}

.p1
{
	position: absolute;
	/*margin-left: 100px;*/
	margin-top: -30px;
	z-index: 15;
	border: 0;
}

.p1 img
{
border: 0;
}

.p1:hover
{
	z-index: 16;
	position: absolute;
}

.p2
{
	
	position: absolute;
	margin-left: 100px;
	margin-top: 40px;
	z-index: 14;
	border: 0;
}

.p2 img
{
border: 0;
}

.p2:hover
{
	z-index: 16;
}

.p3
{
	
	position: absolute;
	margin-left: 250px;
	margin-top: -20px;
	z-index: 13;
	border: 0;

}	

.p3 img
{
border: 0;
}

.p3:hover
{
	z-index: 16;
}

.indexvector
{
	margin-top: 255px;
	margin-left: 0px;
	width: 318px;
	height: 239px;
	background: url('../images/indexvector.png');
}

.indexfindstore
{
	position: relative;
	z-index: 13;
	margin-top: -220px;
	margin-left: 225px;
	width: 194px;
	height: 178px;
	background: url('../images/indexfindstore.png');
}

.indexfindstore p
{
	position: relative;
	padding-left: 5px;
	padding-top: 50px;
	font-size: 0.7em;
	width: 80px;
}

.indexfindstore a
{
	z-index: 20;
	color: red;
}

.difcursor
{
	cursor:hand;
} 

.indexfoot
{
	position: relative;
	margin-top: -22px;
	margin-left: -25px;
	z-index: 1;
	height: 218px;
	width: 448px;
	_width: 444px;
	background: url('../images/indextornpaper.png');
}

.indexfootlatest
{
	padding-left: 30px;
	padding-top: 40px;
	width: 300px;
}

.indexfootlatest img
{
	float: left;
	
}

.indexfootlatest p
{
	
	float: left;
	width: 120px;	
	font-size: 0.7em;
}

/* ////////////////////////////////////////////////////////////////////

				PRODUCT PAGES

The positioning of product images on product pages, thumbnails and all
else related.

////////////////////////////////////////////////////////////////////*/

.productimg
{
	z-index: 12;
	margin-top: -40px;
	margin-left:50px;
}

.productthumbs
{
	
	
	border: 0px;
	z-index: 25;
	margin-left:50px;
	margin-top: -30px;
	_margin-top: 0px;
	
}


.productthumbs img
{
border: 0px;
}

.productthumbs p
{
	margin-top: 10px;
_margin-top: -5px;
	text-align: center;
	font-size: 0.7em;
}

.productinfo
{

}

.productinfo p
{
	width: 90%;
	margin-left: 30px;
	font-size: 0.7em;
	margin-bottom: 10px;
}

.increasetext
{
	font-size: 1.5em;
}

.productinfo li
{
	font-size: 0.7em;
}

.prodlist
{	width: 90%;
	position: relative;
	z-index: 10;
	margin-left: 20px;
	clear: both;
	/*margin-top:-12px;*/
	_margin-top: -45px;
	
}

.prodlist img
{
	
	margin-top: -45px;	
	_margin-top: -0px;	
	float: left;
	border: 0px;
}

.prodlist h3
{
	_margin-top: 60px;
	font-size: 0.8em;
}

.prodlist p
{
	text-align: left;
	font-size: 0.6em;
}

.prodlistcont
{
	margin-top: 40px;
}

.prodlist a
{
	color: #000000;
}

/* ////////////////////////////////////////////////////////////////////

				VIDEO PAGE

////////////////////////////////////////////////////////////////////*/


.vid
{
position: relative;
float: left;
z-index: 20;
padding-top: 50px;


	_margin-left:20px;
	
}

.vid p
{
font-size: 0.7em;
}

.vid a
{
color: red;
}

.vidpage
{
	padding-left: 26px;	
}

.vidpage p
{
	font-size: 0.8em;
	padding-bottom: 12px;
}

.vidpage a
{
color: red;
}



/* ////////////////////////////////////////////////////////////////////

				PROJECT PAGE

////////////////////////////////////////////////////////////////////*/

.projectleft
{
	padding-left: 20px;
}

.projectleft img
{	
	border: 0;
}

.projectdetails
{
	font-size: 0.7em;
}

.projimgs
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: center;11:43 06/11/2007
}

.projicon
{
	float: left;
	width: 150px;
	margin-left: auto;
	maring-right: auto;
	text-align: center;
	font-size: 0.7em;
}

.projmat
{
	margin-left: 15px;
	font-size: 0.7em;
	background: #fff;
	width: 90%;
	border: 1px dashed #cccccc;
}


/* ////////////////////////////////////////////////////////////////////

			CONTACT US PAGE

////////////////////////////////////////////////////////////////////*/

.contactcont
{
	_margin-top: 20px;
}

.contactcont p
{
	margin-top: 20px;
	margin-left: 20px;
	font-size: 0.7em;
}

.contactleft
{
	_margin-top: 20px;
}

.contactleft h1
{
	margin-left: 45px;
}
.contactleft p
{
	margin-top: 20px;
	margin-left: 50px;
	font-size: 0.7em;
}
.contactFormArea
{
	
	maragin-left: 20px;
	width: 300px;
}

.contactFormArea fieldset 
{
	padding-left: 20px;
	width: 200px;
	border: 0;
}

.contactFormArea form
{
	padding-left: 20px;
	width: 200px;
	border: 0;
}


/* ////////////////////////////////////////////////////////////////////

				LIGHTBOX

////////////////////////////////////////////////////////////////////*/
	

#lightbox
{	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;

}

#lightbox a img
{ 
	border: none; 

}

#outerImageContainer
{	
	position: relative;
	background-color: #fbe6d2;
	width: 250px;
	height: 250px;
	margin: 0 auto;

}

#imageContainer
{
	padding: 10px;

}

#loading
{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;	

}

#hoverNav
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}

#imageContainer>#hoverNav
{ 
	left: 0;
}

#hoverNav a
{ 
	outline: none;
}
#prevLink, #nextLink
{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;	
}

#prevLink { 
	/*left: 0; */
	float: left;
	background: url(../images/prevlabel.gif) left 15% no-repeat; 
}

#nextLink 
{ 
	/*right: 0; */
	float: right;
	background: url(../images/nextlabel.gif) right 15% no-repeat; 

}

#prevLink:hover, #prevLink:visited:hover 
{ 

	background: url(../images/prevlabel.gif) left 15% no-repeat; 

}

#nextLink:hover, #nextLink:visited:hover 
{ 
background: url(../images/nextlabel.gif) right 15% no-repeat; 
}
#imageDataContainer
{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fbe6d2;
	margin: 0 auto;
	/*border: 1px solid #cccccc;*/
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
}
#imageData{	
padding:0 10px; 
color: #666; 
}

#imageData #imageDetails
{ 
width: 70%; 
float: left; 
text-align: left; 
}	

#imageData #caption{ 
font-weight: bold;	
}

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}			
#overlay{	
position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}