@charset "UTF-8";
/* CSS Document */



/* blinds.css
------------------------------------------------------------------------------

Author:  			Peter Richman
E-mail:				peter@plugandplaydesign.co.uk
Company: 			Plug and Play Design
Date:				14/08/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%;
margin-top:			0px;
background:			url(images/backgroundGradients.gif) top repeat-x;
}

.viewPort{
overflow:			hidden;
position:			relative;
height:				580px;
width:				1200px;
margin-left:		-82px;
}

.brochure{
background:			none;
}

.brochure .greyFooter{
background:			none;
}

img{
border:				none;
}

h1, h2, h3, h4, h5, h6{
font-family:		Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}


.centre p strong{
color:				#000;
}


a {
	color:#235aa6;
text-decoration:	none;
outline:none;
}
a:active
{
  outline: none;
}

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

.clear{
clear:				both;
}

strong{
color:				#000;
}

.contactForm{
list-style:			none;
}

.contactForm label{
float:				left;
}

.contactForm li{
padding:            7px;
}



/* 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:			1.2em;
line-height:		2em;
}

p a{
text-decoration:	none;

}

p img{
margin:				10px;
padding:            0px;

}

p a:hover{
text-decoration:	underline;	
}

q{
font-family:		Georgia, "Times New Roman", Times, serif;
color:				#572600;
margin:				0px 15px;
font-size:			1.2em;
line-height:		1.6em;
}

a:hover{
text-decoration:	underline;	
}

/* REMOVES HORIZONTAL SCROLL BARS */
html{
overflow-x:			hidden;
}

.logo{
margin:				0px;
padding:            0px;
}

.logo a{
background:			url(../images/logo.gif) top left no-repeat;
width:				150px;
height:				122px;
text-indent:        -3000px;
margin:				20px 0px 0px 52px;
display:			block;
}

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


#pscroller1{
width: 240px;
height: 220px;
}

/* =WRAPPER
------------------------------------------------------------------------------*/

.wrapper{
width:				800px;
padding:            20px;
background-color:	#FFF;
margin-left:		auto;
margin-right:		auto;
margin-top:			30px;
position:			relative;
top:				1px;
}


/* =TOP
------------------------------------------------------------------------------*/

.top{
margin-bottom:		20px;
}

.top .logo{
height:				136px;
width:				392px;
background:			url(images/logo.gif) top left no-repeat;
text-indent:        -4000px;
float:				left;
}

.top p span{
color:				#235aa6;
font-size:			2.6em;
}

.top p{
float:				right;
margin:				50px 15px 0px 0px;
}

.top p a{
color:				#868686;
font-size:			1.4em;
line-height:		1.8em;
}

/* =MAIN MENU
------------------------------------------------------------------------------*/

.mainMenu{
float:				left;
list-style:			none;
padding:            0px 0px 0px 0px;
margin:             4px 0px 17px 0px;
border-right:       2px solid #cacaca;
height:				427px;
}

.mainMenu li{
text-align:			right;
}

.mainMenu li a{
color:				#000;
font-size:			1.2em;
display:			block;
padding:            4px 15px 4px 0px;
width:				160px;
}

.mainMenu li a:hover{
background-color:	#e6f6ff;
text-decoration:	none;
}

.mainMenu .selected a{
background-color:	#e6f6ff;
}

/* =IMAGE MAP
------------------------------------------------------------------------------*/

.imageMap{
list-style:			none;
float:				right;
width:				600px;
margin:             0px;
padding:            0px;
}


.imageMap li{
float:				left;
padding:            3px 5px 3px 5px;
position:			relative;
left:				1px;
}

.imageMap li a{
display:			block;
height:				137px;
width:				137px;
}

.imageMap li a span{
display:			none;
}

.imageMap li a:hover span{
display:			block;
position:			absolute;
top:				10px;
left:				-270px;
z-index:			99;
background:			#E6F6FF;
padding:            20px;
color:				#000;
font-size:			1.4em;
line-height:		1.8em;
width:				500px;
}

/* =BANNER
------------------------------------------------------------------------------*/

.banner{
height:				226px;
width:				606px;
text-indent:        -3000px;
float:				right;
margin:				5px 0px 0px 0px;
}

#venetian{
background:			url(images/bannerVenetian.jpg) top left no-repeat;
}

#woodVenetian{
background:			url(images/bannerWoodVenetian.jpg) top left no-repeat;
}

#roller{
background:			url(images/bannerRoller.jpg) top left no-repeat;
}

#virticles{
background:			url(images/bannerVirticles.jpg) top left no-repeat;
}

#conservatory{
background:			url(images/bannerConservatory.jpg) top left no-repeat;
}

#commercial{
background:			url(images/bannerCommercial.jpg) top left no-repeat;
}

#awnings{
background:			url(images/bannerAwnings.jpg) top left no-repeat;
}

#pinolium{
background:			url(images/bannerPinolium.jpg) top left no-repeat;
}

#about{
background:			url(images/bannerAbout-Us.jpg) top left no-repeat;
}

#contact{
background:			url(images/bannerContact.jpg) top left no-repeat;
}

#testimonials{
background:			url(images/bannerTestimonials.jpg) top left no-repeat;
}

/* =HEADERS
------------------------------------------------------------------------------*/

.textArea .pageHeader{
color:				#1d56a4;
font-size:			2.1em;
font-weight:		lighter;
}

/* =TEXT AREA
------------------------------------------------------------------------------*/

.textArea{
margin:				0px 0px 0px 0px;
width:				440px;
float:				right;
}

.textArea p{
width:				450px;
}

.textArea li {
	font-size:12px;
	margin-bottom:8px;
}

h4{
color:			    #1D56A4;
font-size:			1.3em;
/* font-weight:		lighter; */
/* font-style:			italic; */
/* text-decoration:	underline;	 */
}

.textArea p.contact {
	background-color:#eee;
	border:1px solid #ddd;
	padding:10px;
	width:420px;
}


/* =VENETIAN BOXES
------------------------------------------------------------------------------*/

.rightArea{
width:				146px;
min-height:         100px;
float:				right;
margin:				20px 0px 0px 20px;
}


/* =MINI IMAGE MAP
------------------------------------------------------------------------------*/

.miniImageMap{
list-style:			none;
padding:            0px;
margin:				0px;
float:				left;
width:				150px;
}

.miniImageMap li{
float:				left;
margin:				2px;
}

.miniImageMap a{
display:			block;
}

.miniImageMap a span{
position:			absolute;
display:			none;
}

.miniImageMap a:hover span{
display:			block;
top:				140px;
left:				140px;
padding:            20px;
background-color:	#E6F6FF;
}


/* =TESTIMONIALS
------------------------------------------------------------------------------*/

blockquote{
font-size:			1.2em;
line-height:		1.6em;
font-style:			italic;
}

blockquote span{
font-style:			normal;
}

/* =FOOTER
------------------------------------------------------------------------------*/

#footer {
	background-color:#fff;
	border-top:1px solid #eee;
	margin:20px auto 0;
	margin-left:-20px;
	padding:10px 20px 0;
	width:800px;
}

#footer p {
	color:#aaa;
	font-size:10px;
	line-height:1.5em;
	margin-bottom:10px;
}

.greyFooter{
height:				400px;
background:			url(images/greyFooter.gif) top left repeat-x #f0f0f0;
margin-top:			-300px;
}

.footerMenu{
padding:            0px;
margin:             30px 0px 0px 0px;
list-style:			none;
width:				800px;
margin-left:		auto;
margin-right:		auto;
float:				right;
}


* .footerMenu{
* position:			relative;
* top:				40px;
}

.footerMenu li{
float:				right;
color:				#666;
}

.footerMenu li a{
color:				#666;
}