@charset "UTF-8";

/* CSS Document */
/* design.css
------------------------------------------------------------------------------

Author:  			Peter Richman
E-mail:				peter@plugandplaydesign.co.uk
Company: 			Plug and Play Design
Date:				20/01/2008

Version:			1.0
Designed for:		FireFox 2

CSS file:			Design One

------------------------------------------------------------------------------*/





/* =USUAL SUSPECTS
------------------------------------------------------------------------------*/

body{
font-family:		Trebuchet, Verdana, Arial, Helvetica, sans-serif;
font-size:			62.5%;
color:				#FFF;
background:			#fff url(images/massiveBG.gif) fixed no-repeat 50% 0;}

img{
border:				none;
}

h1, h2, h3, h4, h5, h6{

}


.centre p strong{
color:				#000;
}


a{
text-decoration:	underline;
}

q{
font-style:			italic;
color:				#000;
}

.clear{
clear:				both;
}

strong{
color:				#432201;
}

/* HACK for FIREFOX!! - to always display right hand scroll bars in short pages
this prevents the page bouncing left when changing pages */

html {
overflow: -moz-scrollbars-vertical;
height: 100%;
}

/*Hack over*/

p{
font-size:			1em;
line-height:		1.8em;

}

p a{
color:				#432201;
}

a:hover{
text-decoration:	none;
}

.wrapper{
width:				800px;
margin-left:		auto;
margin-right:		auto;
margin-top:			120px;
min-width:          800px;
max-width:			941px;
}



/* =Background =Wrapper
------------------------------------------------------------------------------*/

.wrapper{
width:				801px;
margin-left:		auto;
margin-right:		auto;
margin-top:			0px;
background:			url(images/backgroundMiddle.jpg) top left repeat-y;
}

.topBar{
height:				25px;
width:				801px;
margin-left:		auto;
margin-right:		auto;
margin-top:			0px;
margin-bottom:		0px;
padding:            0px;
background:			url(images/backgroundTop.jpg) top left no-repeat;
}

.bottomBar{
height:				24px;
width:				801px;
margin-left:		auto;
margin-right:		auto;
margin-top:			0px;
margin-bottom:		0px;
padding:            0px;
background:			url(images/backgroundBottom.jpg) top left no-repeat;
}


.wrapper div{
margin-left:		23px;

}


/* =Top
------------------------------------------------------------------------------*/

.top{
background:			url(images/BannerLogo.jpg) top left no-repeat;
height:				81px;
width:				756px;
}

.top h1{
text-indent:        -3000px;
margin:				0px;
}

.top p{
float:				right;
color:				#432201;
font-size:			1.2em;
margin-top:			20px;
margin-right:		25px;
}


/* =Menu
------------------------------------------------------------------------------*/

.menu{
background-color:	#432201;
color:				#FFF;
width:				168px;
list-style:			none;
padding:            7px 0px 5px 15px;
float:				left;
margin:				7px 0px 0px 0px;
height:				243px;
}


.menu a{
color:				#FFF;
text-decoration:	none;
}

.menu li{
margin:				7px 0px 8px 0px;
padding:            4px 0px 4px 4px;
font-size:			1.2em;
}

.menu strong{
color:              #FFF;
}

/* =Banner
------------------------------------------------------------------------------*/

.banner{
float:				left;
margin-left:		8px;
margin-top:			7px;
margin-bottom:		0px;
}

.bannerMenu{
margin-bottom:		0px;
padding:            0px;
}

/* =Written Content =Footer
------------------------------------------------------------------------------*/

.writtenContent, .footer{
background-color:	#f2e7ca;
width:				757px;
font-size:			1.2em;
line-height:		1.2em;
color:				#432201;
}

div[class="writtenContent"], div[class="footer"]{
margin-top:			7px;
}

*html .writtenContent{
_margin-top:			5px;
}

* div[class="writtenContent"]{
* margin-top:			5px;
* margin-bottom:		10px;
}

.writtenContent p{
padding:            0px 15px 0px 15px;
}
* .writtenContent{
* padding-bottom:        10px;
}

.footer p{
padding:            15px;
}

.writtenContent h1, .writtenContent h2, .writtenContent h3, .writtenContent h4{
padding:            15px;
}

.writtenContent h4, .writtenContent p{
padding:            0px 15px 0px 15px;
}

.writtenContent h4{
padding-top:        15px;
margin-top:			0px;
}


/* =Categories
------------------------------------------------------------------------------*/

div[class="categoryBoxes"]{
margin-top:			5px;
}

*html .categoryBoxes{
margin-top:			5px;
}

.categoryBoxes .category{
float:				left;
width:				184px;
margin:				0px 7px 0px 0px;
}

.category h2{
background-color:	#432201;
width:				176px;
padding:            10px 0px 10px 8px;
font-weight:		lighter;
margin-top:			0px;
margin-bottom:		0px;
height:				34px;
font-size:			16px;
}

*html .category h2{
_font-size:			16px;
_height:				40px;
_margin-top:			-2px;
}

* div[class="categoryBoxes"] h2{
* margin-top:		-3px;
}

.category h2 a{
color:				#FFF;
}

.category h2 a:hover{
color:				#f2e7ca;
}

.category ul{
background-color:	#f2e7ca;
width:				168px;
padding:            10px 8px 10px 8px;
margin-top:			0px;
height:				135px;
}

* .category ul{
* margin-left:		0px;
* margin-bottom:	3px;
}

.category ul li{
margin-top:			5px;
margin-bottom:		5px;
}

.category ul li a{
color:				#432201;
}

.category ul li a:hover{
text-decoration:	underline;
}

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

.footer p{
float:				left;
padding:            0px 15px 0px 15px;
}

.footer .terms{
float:				right;
}


/* =Blox
------------------------------------------------------------------------------*/


body .writtenContent .tripleblock{
float:				left;
width:				740px;
padding-bottom:     20px;
}

*html body .writtenContent .tripleblock{
_margin-left:		0px;

}

.blox{
float:				left;
width:				210px;
height:             200px;
background-color:   #fff;
border:             1px solid #432201;
}

.blox p{
margin-top:			0px;
margin-bottom:		12px;
width:				210px;
padding:            0px;
text-align:			center;
}

.blox img{
margin-top:			10px;
}

.blox h4 a{
color:				#432201;
font-size:			0.9em;
text-decoration:    none;
}

.blox h4 a:hover{
text-decoration:    underline;
}

body .blox h4{
margin-bottom:		0px;
margin-top:			4px;
width:				210px;
padding:            0px;
text-align:			center;
}



/* =PRODUCTS
------------------------------------------------------------------------------*/

.productImageHolder{
float:				right;
margin:				0px 15px 15px 15px;
}

.productImageHolder a{
color:				#432201;
text-decoration: none !important;
}

.productImage{
border:             1px solid #432201;
}