@charset "utf-8";
/* CSS Document */

/*---Elements wrapped in #header div start---*/

#logo {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	top:10px;
	left: 10px;
	width: 385px;
	height: 68px;
}

#toplinks {
	position: absolute;
	top:10px;
	right: 35px;
	width:auto;
	height: 20px;
}


/*---Elements wrapped in #header div end---*/

/*---Elements wrapped in #contentholder div start---*/

#homepageimage { /*to contain flash*/
	position: relative;
	width: 441px;
	height: 364px;
	margin-top: 15px;
	padding-bottom: 15px;
	background: url(../images/pictures/homepage_oceanteal.jpg) top left no-repeat;
}

#homepageaboutus { /* for about us text */
	position: relative;
	float: left;
	width: 441px;
	margin-top: 15px;
	margin-left: 10px;
	padding-bottom: 15px;
	color: #00448a;
}

#hpquicklinksholder { /*homepage quicklinks holder*/
	position: relative;
	float: right;
	width: 320px;
	height: auto;
/*	padding: 5px 5px 0px 5px;
	margin:0px;*/
	
}


p.hpquicklinktext { /*changed id to p - Doug*/
	position: relative;
	width:300px;
	height:10px;
	margin-bottom: 5px;
	margin-top: 3px;
	font-size: 0.8em;
	text-align:right;
	text-decoration: underline;
}


#paintswatchblue { /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:96px;
	height:27px;
	top: 25px;
	left: 355px;
	text-indent: -9999px;
	background: url(../images/titles/brushtitle_tropicalbay.png) no-repeat left;
}

.brushtitlesignalred { /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 130px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_signalred.png) top left no-repeat;
	z-index:2;
}


.brushtitlehotcherry{ /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 130px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_hotcherry.png) top left no-repeat;
	z-index:2;
}

.brushtitlefireflower{ /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 130px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_fireflower.png) top left no-repeat;
	z-index:2;
}

.brushtitlecrushedrose{ /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 128px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_crushedrose.png) top left no-repeat;
	z-index:2;
}

.brushtitleantiquecream{ /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 99px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_antiquecream.png) top left no-repeat;
	z-index:2;
}

.brushtitleoatcake{ /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 99px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_oatcake.png) top left no-repeat;
	z-index:2;
}

.brushtitleduckegg{ /*used on images to inform the viewer which colour is used*/
	position: absolute;
	width:100px;
	height:30px;
	top: 128px;
	left: 193px;
	text-align: center;
	background: url(../images/titles/brushtitle_duckegg.png) top left no-repeat;
	z-index:2;
}

.genericimage { 
	position: relative;
	float: left;
	width: 255px;
	height: 220px;
	margin-left:7px;
	margin-right:15px;
	padding-top: 7px;
	padding-bottom: 15px;
	background: url(../images/image_shad255px.gif) left bottom no-repeat;
	z-index:1;
}

#productholder { 
	position: relative;
	float: left;
	width: 95%;
	height: 220px;
	margin-left:7px;
	margin-right:5px;
	padding-top: 7px;
	padding-bottom: 15px;
}

#locatorholder { 
	position: relative;
	float: left;
	width: 90%;
	height: 270px;
	margin-left:2%;
	margin-right:2%;
	padding-top: 7px;
	padding-bottom: 10px;
}

/*colour clinic*/
#cc_productholder { position: relative; float: right; width: 30%; height: 250px; margin-left:10px; margin-right:5px; margin-bottom:10px; padding-top:20px;}
#cc_email_address {
	position:absolute;
	width:230px;
	height:118px;
	background-color:#fff;
	left: 230px;
	top: 76px;
	text-align:center;
}
.cc_text_heads {font:Arial, Helvetica, sans-serif; color:#003399; font-weight:bold; text-align:center;}

p.cc_introtext{ float: left; width: 65%; padding: 0px 0px 0px 10px; margin-bottom:20px;}
 /*END OF colour clinic*/
 
 
 
#quicklinksmallholder { /*main sections quicklink holder*/
	position: relative;
	float: left;
	width: 342px;
	height: auto;
	margin-left:10px;

}
 
p.introtext{ padding: 5px 10px 0px 10px; margin-bottom:20px;}

p.introtextsmall{ padding: 10px 5px 0px 5px; font-size:0.7em; line-height: 1em; color:#999999;}


.quicklinksmall {
	position: relative;
	float: left;
	display:inline;
	margin: 0px 25px 20px 0px;
	width: 155px;
	height: 55px;
}


#breadcrumbs {position:relative; width: 100%; height: 10px; margin-bottom:11px; margin-top:5px;background-color: #FFF; color:#000; font-size:11px;} /* also in ie conditional css*/
#breadcrumbs a{color:#000; font-size:11px;}
#breadcrumbs a:hover{color:#000; text-decoration:underline;}

#cwallcontent {
	position: absolute;
	overflow: auto;
	width: 125px;
	height: 320px;
	padding: 5px;
	top: 30px;
	left:17px;
	font-size: 0.9em;
	color: #666666;
}


#cwallcontent a{
	font-size: 0.9em;
	color: #FF0000;
	text-decoration: underline;
}

#cwallcontent a:hover{
	font-size: 0.9em;
	color:#E1312A;
	text-decoration: underline;
}

.cwall hr{
	display: none;
}

.cwall {
	background: url(../images/smallhr.gif) center no-repeat;
	height:10px;
	margin: 8px 0px 8px 0px;
}

#vp_text_block{
	width: 100%;}

#vp_flash {/*holds FLASH on virtual Painter*/
	width: 649px;
	height: 425px;
}

#iconrangeholder { /*holds range icons on colour page*/
	position: relative;
	float: left;
	width: 309px;
	height: auto;
	margin: 20px 0px 5px 0px;
	padding: 25px 0px 5px 0px;
	text-indent: -9999px;
	background: url(../images/titles/title_colourrange.gif) top left no-repeat;
}


#iconschemeholder { /*holds scheme icons on colour page*/
	position: relative;
	float: left;
	width: 309px;
	height: auto;
	margin: 20px 0px 5px 5px;
	padding: 25px 0px 5px 0px;
	background: url(../images/titles/title_colourschemes.gif) top left no-repeat;
	text-indent:-9999px;
}

#colourdevider { /*seperates the colour schemes and ranges*/
	position: relative;
	float: left;
	margin: 25px 0px 10px 0px;
	width: 2px;
	height: 270px;
	background: url(../images/colourdevider.gif) top no-repeat;
	
}

#calculatorholder { /*calculator*/
	position: relative;
	float: left;
	margin: 0% 2% 0% 0%;
	width: 98%;
	height:auto;
}

#calculatorresult { /*calculator*/
	position: relative;
	float: left;
	margin: 0% 0% 0% 0%;
	width: 25%;
	height: auto;
}

.calculator {/*calculator*/
	float: left;
	color: #000000;
	font-size: 0.9em;
	padding-right: 0%;
	margin-right: 3%;
	border-right:#cfd7e0 1px dashed;
	border-right:#cfd7e0 1px dashed;

}

.calculator td{
	height: 20px;
}

.calculator tr{
	padding: 0px;
	
}

table td.painttyperow {
	padding-bottom: 50px;
}

table td.ranges {
	padding-bottom: 10px;
}

table td.schemes {
	padding-bottom: 20px;
}

.toolchecklist th{
	color: #666666;
	text-align: left;
	height: 20px;
	font-size: 12px;
	background-color: #e6ebf2;
	padding: 5px;
}

.toolchecklist td,
.toolchecklist tr{
	height: 20px;
	text-align: left;
	padding-bottom:5px;
	padding: 5px;
	border-bottom: #e6ebf2;
}

tr.toolchecklistbg {
	background-color: #f4f6f9;
}

td.lefttable{
	width: 20%;
}

td.righttable{
	width: 40%;
}

.toolchecklist li{
	margin-bottom: 15px;
	list-style-image: url(../images/bullet_2.gif);
	list-style-position: outside;	
}


.result {
	float: left;
	color: #000000;
	font-size: 0.9em;
	background-color:#F5F6FA;
	margin-bottom: 20px;
	padding:1%;
	border-top:#cfd7e0 1px dashed;
	border-bottom:#D7DFE8 1px dashed;
}

.result td{
	height: 20px;
	padding:2%;
}

.textalign{
	text-align: right;
}

.converter {
	float: left;
	color: #000000;
	font-size: 0.9em;
	padding: 0px;
	margin-right: 3%;
	border-left:#cfd7e0 1px dashed;
	border-right:#cfd7e0 1px dashed;
}

.converter td{
	height: 20px;	
}


a.calculatorresult {
	font-size: 0.9em;
	color: #FF0000;
	text-decoration: underline;
}

a.calculatorresult:hover{
	font-size: 0.9em;
	color:#E1312A;
	text-decoration: underline;
}


select.arealong {
	width:99%;
}

input.dimensionslong {
	width:30px;
}





/*---Elements wrapped in #contentholder div end---*/



/*---site class's start---*/
.floatright {
	float: right;
	margin-left: 1%;
}

.floatleftgeneric {
	float: left;
	margin-right: 1%;
	width:65%;
}


.floatleft {
	float: left;
	position: relative;
	margin-right: 1%;
	margin-bottom: 2%;
	border-right:1px #FFFFFF;
}

.white {
	font-size: 0.8em;
	color: #FFFFFF;
}

.textpadding {
	padding: 2%;
}

.textindent{
	padding: 5px 10px 0px 10px;
}
.headertextholderfleft { /*--Holds/wraps text/headers on swatch pages--*/
	position: relative;
	float: left;
	width: 74%;
	height: 20%;
	padding: 2% 3% 3% 2%;
}


.headertextholderfright{ /*--Holds/wraps text/headers on subnav pages--*/
	position: relative;
	float: right;
	width: 75%;
	height: 20%;
	padding: 2% 2% 3% 2%;
}

.headertextholderfrighttypes{ /*--Holds/wraps text/headers on subnav in paint types--*/
	position: relative;
	float: right;
	width: 73%;
	height: 20%;
	padding: 2% 2% 3% 2%;
}

#productshot{ 
	position: relative;
	float: left;
	width: 151px;
	height: 133px;
	padding-left: 0px;
	padding-top: 50px;
	margin: 0px;
}

#productswatchholder{ /*--Holds/wraps text/headers on subnav pages--*/
	position: relative;
	float: right;
	width: 75%;
	height: 20%;
	padding: 2% 2% 3% 2%;
	border-top: #E6EDF4 solid 1px;
}


.pictureswatchholder{ /*--Holds/wraps images/swatches on subnav and search pages--*/
	position: relative;
	float: right;
	width: 74%;
	padding: 1% 3% 3% 2%;
}

.pictureswatchholder img { 
	position: relative;
	float: left;
}

.faqsholder{ /*--Holds/wraps text on faq page--*/
	position: relative;
	float: left;
	width: 93%;
	padding: 1% 0% 3% 1%;
}

.faqsholder img { 
	position: relative;
	float: right;
	margin-left: 3%;
	margin-bottom:10%;
	padding-bottom: 15px;
	background: url(../images/image_shad300px.gif) left bottom no-repeat;
}
	
.pictureswatch { 
	position: relative;
	float: right;
	width: 170px;
	margin-bottom: 8px;
}

.pictureswatch p { 
	position: relative;
	text-align: left;
	line-height: 15px;
	font-size: 11px;
}

.pictureswatchtrend { 
	position: relative;
	float: left;
	width: 120px;
	height: 60px;
	margin-bottom: 8px;
}

.pictureswatchtrend img { 
	float: left;
}

.pictureswatchtrend p { 
	float: left;
	font-size: 10px;
}


.medium hr{
	display: none;
}

.medium {
	position: relative;
	clear: both;
	background: url(../images/mediumhr.gif) no-repeat center;
	height:7px;
	margin-top: 0px;
}


.swatchholder { /*--Holds/wraps database swatches--*/
	position: relative;
	float: left;
	width: 75%;
	margin: 1% 0% 2% 1%;
}


.pictureborderfright {
	float: right;
	width:255px;
	height: 220px;
	padding-bottom: 15px;
	margin-left:10px;
	background: url(../images/image_shad255px.gif) left bottom no-repeat;

}

.pictureborderfrightdouble {
	float: left;
	width:255px;
	height: 220px;
	padding-bottom: 15px;
	padding-right: 20px;
	margin-left:10px;
	background: url(../images/image_shad255px_double.gif) left bottom no-repeat;
}

.pictureborder {
	width:300px;
	height: 240px;
	padding-bottom: 15px;
	background: url(../images/image_shad300px.gif) left bottom no-repeat;
}


.picturebordertall {
	width:300px;
	height: 350px;
	padding-bottom: 15px;
	background: url(../images/image_shad300px.gif) left bottom no-repeat;
}

.picturebordertallskinnyl {
	float: left;
	width:225px;
	height: 350px;
	padding-bottom: 15px;
	margin-right: 10px;
	margin-left: 5px;
	background: url(../images/image_shad225px.gif) left bottom no-repeat;
}

.picturebordertallskinnyr {
	float: right;
	width:225px;
	height: 350px;
	padding-bottom: 15px;
	margin-left: 15px;
	background: url(../images/image_shad225px.gif) left bottom no-repeat;
}

.linksholder{
	width: 99%;
	margin-bottom: 2%;
	padding-bottom: 2%;
	border-bottom: #D9E0E7 solid 1px;
}

.linkslogos{
	float: right;
	width: 190px;
	height: 70px;
	margin-left:10px;
}

.psychologyholder{
	position: relative;
	width: 97%;
	height: auto;
	margin-bottom: 6%;
	padding-bottom: 6%;
	border-bottom: #D9E0E7 solid 1px;
}

.psychologypics{
	position: relative;
	float: right;
	width: 255px;
	height: 220px;
	margin-left:10px;
}

.psychologyiconholder{
	position: relative;
	width: 97%;
	height: 27px;
	margin-bottom: 4%;
	padding-bottom: 2%;
	border-bottom: #D9E0E7 solid 1px;
}

.psychologyiconholder p{
	color: #666666;
}

.tipsadviceholder{
	position: relative;
	float: right;
	width: 74%;
	padding: 1% 3% 3% 2%;
}

.tipsadvicepics{
	position: relative;
	float: right;
	width: 150px;
	height: 150px;
	margin-left:10px;
	padding-bottom: 15px;
	margin-left:15px;
	background: #666666 url(../images/image_shad150px.gif) left bottom no-repeat;
}

.linkslogos img{
	border: 0px;
}

.types td{
	font-size: 0.7em;
	color: #666666;
}

table tr.types{
	margin-bottom: 10px;
}

.smallswatch{ 
	position:relative;
	font-size: 0.9em;
	float: left;
	height: 30px;
	width: 65px;
	margin-right: 11px;
}

.smallswatch img{
	float: left;
}


/*---site class's end---*/


ul.products li{
	background-image: url(../images/bullet_2.gif);
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 15px;
	text-indent: 15px;
	list-style-type:none;
}


ul.tipslist {
	width: 90%;
	padding-left:20px;
}

ul.tipslist li{
	margin-bottom: 15px;
	list-style-image: url(../images/bullet_2.gif);
	list-style-position: outside;	
}

ul.stockist {
	float: left;
	width: 40%;
	padding-left:15px;
}

ul.stockist li{
	margin-bottom: 3px;
	list-style-image: url(../images/bullet_2.gif);
	list-style-position: outside;	
}

ul.printlist {
	width: 90%;
	padding-left:0px;
}

ul.printlist li{
	margin-bottom: 15px;
	list-style-image: url(../images/bullet_2.gif);
	list-style-position: outside;	
}

ul.tips li{
	margin-bottom: 15px;
}


.inside {
	list-style-position: inside;
}


li#test{
	list-style-type:none;
	text-indent: -9999px;
}


li#test a.www{
	display: inline;
	float: right;
	width:150px;
	height: 150px;
	background: url(../images/producttins/test.gif) left no-repeat;
}

/*---faqs style start---*/

ul.faqs{
list-style-type:none;
float: left;
width: 45%;
text-indent: 25px;
}

ul.faqs li{
margin: 0px 0px 10px 0px;
list-style-image: url(../images/titles/Q-bold.gif);
list-style-position: outside;
font-size: 0.9em;
}

ul.faqs li.faqsanswer {
margin: 0px 0px 10px 0px;
list-style-image: url(../images/titles/A-bold.gif);
list-style-position: outside;
font-size: 0.9em;
}


/*---faqs style end---*/


/*start shopping list*/
#shoppinglistwrapper{width:98%; margin:0 auto 0 auto;}
th.mycolours {height:18px; width:auto; background-color:#E6EBF2; padding:5px; color:#000;}
a.sl_remove_item {font-style:normal; color:#FF0000;}

ul.otheritems li {margin:1em 0 0 2em; color:#00448A;}

td.mydetails {height:25px; width:auto; background:#E6EBF2; padding:5px; color: #666666; font-size: 9px;}
/*end shopping list*/
