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

html, body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-height: 1.2em;
	color: #666666;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background: url(../images/sitebg.gif) repeat; 
}

div, span, object, 
h1, h2, h3, h4, h5, h6, p, blockquote, abbr, acronym, address, big, em, font, img,
dl, dt, dd, ol, ul, li,
fieldset, form, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}


table.borderbottom {
	border-bottom: #E6EBF2 solid 1px;
}



h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	margin: 0px;
	padding: 0px;
	color: #666666;
}

h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	color: #666666;
	margin: 0px;
	padding: 0px;
	text-indent: -3000px;
}

p.trendtitle {
	font-family:Arial, Helvetica, sans-serif;
	color: #666666;
	margin: 0px;
	padding: 0px;
	font-size: 1.6em;
	margin-bottom: 10px;
}

h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #666666;
}

h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #666666;
}

h4.indent{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #333333;
	padding: 5px 10px 0px 10px;
}

a{
 overflow:hidden;
 outline: none;
}

a:link{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;
	overflow:hidden;
	outline: none;
}

a:visited{
 overflow:hidden;
 outline: none;
}

a:hover{
 overflow:hidden;
 outline: none;
}
a:active{
 overflow:hidden;
 outline: none;
}


a.generic:link{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;
}


a.generic:visited{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;
}

a.generic:hover{
	font-size: 1em;
	color: #E71715;
	text-decoration:underline;
}

a.generic:active{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;	
}




a.indent:link{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;
	text-indent: -9999px;
}


a.indent:visited{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;
	text-indent: -9999px;
}

a.indent:hover{
	font-size: 1em;
	color: #E71715;
	text-decoration:underline;
	text-indent: -9999px;
}

a.indent:active{
	font-size: 1em;
	color: #00448A;
	text-decoration:underline;
	text-indent: -9999px;
}






a.index:link{
	font-size: 0.9em;
	color: #000000;
	text-decoration:underline;
}
a.index:visited{
	font-size: 0.9em;
	color: #000000;
	text-decoration:underline;
}

a.index:hover{
	font-size: 0.9em;
	color: #E71715;
	text-decoration:underline;
}

a.index:active{
	font-size: 0.9em;
	color: #000000;
	text-decoration:underline;	
}
/*---Start of structure---*/
/*---Header start---*/

#header {
	position:relative;
	margin-left: auto;
	margin-right:auto;
	width: 900px;
	height:140px;
	background: url(../images/rollertop.gif) bottom no-repeat;
}

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

/*---Content elements start---*/

#contentwrapper { /*vertical brush stroke repeating background here*/
	position:relative;
	width: 900px;
	height: auto;
	overflow:auto;
	margin-left: auto;
	margin-right:auto;
	background: url(../images/rollermiddle.gif) left top repeat-y;
	z-index: 1;
}

#whiteblock { /*spacer between wrapper and content*/
	position:relative;
	width: 92%;
	height: auto;
	margin-left: auto;
	margin-right:auto;
	overflow:auto; 
	padding: 3% 1% 1% 2%;
	background-color: #FFFFFF;
}

#bc_whiteblock { /*breadcrumb container*/
	position:relative;
	width: 92%;
	height: auto;
	margin-left: auto;
	margin-right:auto;
	overflow:auto; 
	padding: 0% 1% 1% 2%;
	background-color: #FFFFFF;
}

#contentholder { /*used on all pages except see below*/
	float: left;
	position:relative;
	width: 77%;
	height: auto;
	margin-right: 1%;
	margin-bottom: 1%;
	padding: 1%;
	border-width: 1px;
	border-style:solid;
	border-color: #ccd6e1;
	background: url(../images/contentgrad.jpg) top left repeat-x;
}

#contentholderlinks { /*used when content contains leftside nav and search*/
	float: left;
	position:relative;
	width: 78%;
	overflow: auto;
	margin-right: 1%;
	margin-bottom: 1%;
	padding: 0;
	border-width: 1px;
	border-style:solid;
	border-color: #ccd6e1;
	background: url(../images/subnavborder.gif) repeat-y left;
	z-index: 5;
}

#cc_contentholder { /*used on colour clinic*/
	float: left;
	position:relative;
	width: 77%;
	height: auto;
	margin-right: 1%;
	margin-bottom: 0%;
	padding: 0% 1% 0% 1%;
	border-width: 1px;
	border-style:solid;
	border-color: #ccd6e1;

}

#contentholdervpflash { /*no padding used on virtual painter as it contains flash*/
	float: left;
	position:relative;
	width: 78%;
	height: auto;
	margin-right: 1%;
	margin-bottom: 1%;
	padding: 0;
	border-width: 1px;
	border-style:solid;
	border-color: #ccd6e1;
	
}

#contentholderoomrpainter {
	float: left;
	position:relative;
	width: 78%;
	height: auto;
	/*overflow: auto;*/
	margin-right: 1%;
	margin-bottom: 1%;
	padding-top: 13px;
	border-width: 1px;
	border-style:solid;
	border-color: #ccd6e1;
	background: url(../images/contentgrad.jpg) top left repeat-x;

}

#contentholdervp { /*used on all virtual painter pages except room painter*/
	float: left;
	position:relative;
	width: 78%;
	height: auto;
/*	overflow: auto; */
	margin-right: 1%;
	margin-bottom: 1%;
	padding: 0;
	border-width: 1px;
	border-style:solid;
	border-color: #ccd6e1;
}

#contentholderhome { /*wider div used on homepage only*/
	float: left;
	position:relative;
	width: 98%;
	height: auto;
	margin-right: 1%;
	padding: 0;
}

#contentgrad { /*used on pages with links/search box to add gradient behind content, also in ie conditional css*/
	position: absolute;
	width: 76%;
	top: 27px;
	left:17px;
	height: 24px;
	margin: 0px;
	padding: 0px;
	background: url(../images/contentgrad.jpg) top left repeat-x;
	z-index: 1;
}

#cwallholder{
	float: right;
	position:relative;
	width: 19%;
	height: 400px; 
	background: url(../images/cwallbg_alt.jpg) top left no-repeat;
}


#brandlogos {
	position:relative;
	border-top: 1px solid #ccc;
	width: 98%;
	height: 60px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align:center;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	float:left;
}

#BL1 {
	background: url(../images/logos/johnstones_woodcarelogo.jpg) no-repeat;
	width: 133px;
	height: 75px;
	vertical-align: top;
	float: left;
	cursor:pointer;
	margin: 10px;
}

#BL2 {
	background: url(../images/logos/johnstones_tradelogo.jpg) no-repeat;
	width: 146px;
	height: 55px;
	vertical-align: top;
	float: left;
	cursor:pointer;	
	margin: 10px;
}

#BL3 {
	background: url(../images/logos/johnstones_painttrophylogo.jpg) no-repeat;
	width: 260px;
	height: 45px;
	vertical-align: top;
	float: left;
	cursor:pointer;	
	margin: 10px;
}

#BL4 {
	background: url(../images/logos/johnstones_specialitylogo.jpg) no-repeat;
	width: 133px;
	height: 75px;
	vertical-align: top;
	float: left;
	cursor:pointer;
	margin: 10px;
}

#contentfooter {
	position:relative;
	float: left;
	width: 98%;
	height: 35px;
	padding: 4px;
	margin: 0px 0px 0px 0px;
	background: url(../images/contentfootergrad.jpg) top repeat-x;
}

#logoholder {
	position:relative;
	float: left;
	padding-left: 1%;
}

#footerlinkholder {
	position:relative;
	float: right;
	padding-right: 1%;
	margin-top: 5px;
	width: 200px;
}

#hand {
	position: absolute;
	top:3px;
	right:30px;
	width: 50px;
	height: 52px;
	background: url(../images/hand.png) top no-repeat;
	z-index: 9;

}

#colourcard_calculator {
	width:95%; 
	margin-top:1em; 
	padding:3% 2% 0% 2%; 
	overflow:auto;
	height: auto;
	background: #E5EAF0;
}
#colourcard_calculatorimg {
	background:url(../images/form_bg.jpg) bottom repeat-x; 
	width:95%; 
	height: 40px;
	padding:0% 2% 2% 2%;
}


#colourcard_vpcalculator {/*---used on vp claculator---*/
	width:94%; 
	margin-top:1em; 
	padding:3% 2% 0% 2%; 
	margin-left:1%;
	overflow:auto;
	height: auto;
	background: #E5EAF0;
}
#colourcard_vpcalculatorimg {/*---used on vp claculator---*/
	background:url(../images/form_bg.jpg) bottom repeat-x; 
	width:94%; 
	height: 40px;
	margin-left:1%;
	padding:0% 2% 2% 2%;
}

/*---Content  elements end---*/

/*---footer start---*/

#footer {
	position:relative;
	width: 900px;
	height: 20px;
	margin-left: auto;
	margin-right:auto;
	background: url(../images/rollerbottom.gif) top no-repeat;
}

/*---footer end--*/


#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}