@charset "UTF-8";

@import url("navigation.css");

@import url("fonts.css");


/* CSS Document */

/* 
     
	| Tristel at home
	| 
	|
	| Base
	|
*/



/* General
----------------------------------------------- */


* {
	margin: 0;
	}
	
html, body {
	height: 100%;
	}

body {
	background: #fff;
	font-family:Arial, Helvetica, sans-serif;
	color: #333;
	margin-bottom: 1px;
	}

.mainWrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -112px;
	width: 900px;
	background-image:url( )
	}

.footer, .push {
	height: 112px;
	margin: 0 auto;
	}

.push {
	clear: both;
}

.footer {
	width: 900px;
	background: url(../images/gen/footer_bg.gif) repeat-x;
	color: #fff;
	clear: both;
	}

a {
	text-decoration: none;
	color: #725fab;
}

a:hover {
	color: #B3D337;
}


ul {
	padding: 0;
}

img {
	border: 0;
}

/* Layout
----------------------------------------------- */

.logoBar {
	width: 900px;
	height: 60px;
	background: #fff;
}

.navBar {
	width: 900px;
	height: 27px;
	background: #7260AC;
	padding-top: 1px;
}

.checkOut {
	width: 900px;
	height: 30px;
	background: #fff;
	padding-top: 16px;
}

.checkOutLeft {
	width: 650px;
	float: left;
}

.checkOutRight {
	width: 250px;
	float: left;
}

.contentWrap{
	width: 900px;
	float: left;
}

.colOne, .colTwo, .colThree, .colFour {
	width: 207px;
	float: left;
	margin: 0 9px;
}

.colFour {
	padding-top: 10px;
}

.colCentre {
	width: 432px;
	float: left;	
	margin: 0 9px;
}

.productColTwo, .productColThree {
	width: 207px;
	float: left;
}

.productColTwo {
	margin-left: 9px;
	padding-right: 9px;
}

.productColThree {
	padding-left: 9px;
	margin-right: 9px;
}

#stories .colCentre img {
	margin-bottom: 10px;
}




/* Forms
----------------------------------------------- */


input.quant {
	width: 30px;
	height: 19px;
	border: 1px #ccc solid;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}

input.basket {
	background: url(../images/gen/add_to_basket.gif) no-repeat;
	height: 21px;
	width: 102px;
	border: 0;
	vertical-align: middle;
}

input.basket:hover {
	cursor: pointer;
	background: url(../images/gen/add_to_basket.gif) no-repeat 0 -32px;
}

.contactFormWrap {
	width: 432px;
	float: left;
	clear: both;
	background: #ebe7f3;
}

.contactColLeft {
	width: 98px;
	float: left;
	height: 27px;
	padding: 10px 0 0 4px;
}

.contactColRight {
	width: 317px;
	float: left;
	padding-top: 6px;
}


.contactFormWrap  input {
	border: 0;
	height: 17px;
	width: 308px;
	padding: 4px;
	font-size: 13px;
	color: #666;
}

.contactFormWrap  textarea {
	border: 0;
	height: 80px;
	width: 308px;
	font-size: 13px;
	color: #666;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

.contactFormWrap p {
	margin-bottom: 0;
	color: #7260ac;
}

input.submit {
	height: 23px;
	width: 56px;
	background: url(../images/gen/submit.gif) no-repeat;
	margin: 4px 0 12px 4px;
}

input.submit:hover {
	background: url(../images/gen/submit.gif) no-repeat 0 -50px;
	cursor: pointer;
}


/* Home
----------------------------------------------- */

#homepage .mainWrap {
	background:url(../images/gen/background1.gif) repeat-y;
	}
	
#homepage .colTwo, #homepage .colThree {
	border-top: 12px solid #7260ac;
}

#homepage .colFour h3 a {
	color: #fff;
	border-bottom: 1px dotted #e8f2c2;
}

#homepage .colFour h3 a:hover {
	color: #333;
}
	
	
/* Deeper Clean
----------------------------------------------- */

#deeperClean .mainWrap {
	background:url(../images/gen/background2.gif) repeat-y;
	}
	
#deeperClean .colCentre {
	border-top: 12px solid #725fab;
}	


#deeperClean .productColTwo, #deeperClean .productColThree {
	border-top: 12px solid #725fab;
}


/* Protect
----------------------------------------------- */

#protect .mainWrap {
	background:url(../images/gen/background3.gif) repeat-y;
}
	
#protect .colCentre {
	border-top: 12px solid #725fab;
}	

#protect .productColTwo, #protect .productColThree {
	border-top: 12px solid #725fab;
}

#protect h4 a {
	background: url(../images/gen/family_arrow2.gif) no-repeat  right 0;
}

#protect h4 a:hover {
	background: url(../images/gen/family_arrow2.gif) no-repeat  right -80px;
}


/* How to use
----------------------------------------------- */

#howToUse .mainWrap {
	background:url(../images/gen/background4.gif) repeat-y;
}
	
.threeColWrap {
	float: left;
}
	
.topCol {
	width: 666px;
	height: 160px;
	margin: 0 0 0 9px;
	padding-bottom: 12px;
	border-top: 12px solid #725fab;
	background: #fff url(../images/in_use/family.gif) 0 12px no-repeat;
}

#howToUse .colFour h4{
	margin-bottom: 20px;
}

#howToUse .colFour h4 a {
	background: url(../images/gen/family_arrow2.gif) no-repeat  right 0;
	margin-bottom: 20px;
}

#howToUse .colFour h4 a:hover {
	background: url(../images/gen/family_arrow2.gif) no-repeat  right -80px;
}


#howToUse .colFour p a {
	color: #fff;
}

#howToUse .colFour p a:hover {
	color: #000;
} 

#howToUse .colTwo, #howToUse .colThree {
	padding-top: 10px;
}

#howToUse .colFour h3 {
	color: #fff;
}

#howToUse .colTwo p, #howToUse .colThree p, #howToUse .colFour p, #howToUse .colTwo h2, #howToUse .colThree h2, #howToUse .colFour h2, #howToUse .colTwo h4, #howToUse .colThree h4, #howToUse .colFour h4 {
	padding-left: 4px;
	padding-right: 4px;
}

#howToUse .colTwo h4 a, #howToUse .colThree h4 a {
	color: #000;
	background: url(../images/gen/family_arrow3.gif) no-repeat  right 0;
	padding-right: 55px;
}

#howToUse .colTwo h4 a:hover, #howToUse .colThree h4 a:hover {
	color: #b2d234;
	background: url(../images/gen/family_arrow3.gif) no-repeat  right -80px;
}

.useInfo {
	clear: both;
	width: 663px;
	background: #fff;
	padding: 12px 0 2px 12px;
}


/* Stories
----------------------------------------------- */

#stories .mainWrap {
	background:url(../images/gen/background3.gif) repeat-y;
	}

#stories .colCentre  h2 {
	padding-top: 12px;
	padding-bottom: 12px;
}


#stories  .colCentre p {
	padding-left: 100px;
	margin-bottom: 12px;
}

#stories .colCentre {
	border-top: 12px solid #725fab;
}

/* Superbugs
----------------------------------------------- */

#superbugs .mainWrap {
	background:url(../images/gen/background5.gif) repeat-y;
	}

#superbugs .colCentre {
	border-top: 12px solid #725fab;
}

#superbugs .colFour{
	border-top: 12px solid #b3d335;
}

#superbugs .colCentre p, #superbugs .colCentre h3,  #superbugs .colCentre h2 {
	padding-left: 4px;
	padding-right: 4px;
}

#superbugs .colCentre h3 {
	background: #725fab;
	padding-top: 4px;
	padding-bottom: 4px;
}

#superbugs .colFour h3 strong {
	color: #333;
}

#superbugs .colFour h3 {
	color: #b3d335;
}

#superbugs .colCentre h3  a{
	color: #fff;
	background: url(../images/in_use/bugs_small_arrow.gif) no-repeat 0 7px;
	padding-left: 12px;
}

#superbugs .colCentre h3  a:hover {
	color: #b3d335;
	background: url(../images/in_use/bugs_small_arrow.gif) no-repeat 0 -43px;
}

#superbugs .colFour h3  a strong {
	font-weight: bold;
	color: #b3d335;
}

#superbugs .colFour h3  a:hover strong {
	color: #725fab;
}

#superbugs .colFour h3  a{
	color: #b3d335;
	background: url(../images/in_use/products_small_arrow.gif) no-repeat 0 7px;
	padding-left: 12px;
	display: block;
}

#superbugs .colFour h3  a:hover {
	color: #725fab;
	background: url(../images/in_use/products_small_arrow.gif) no-repeat 0 -143px;
}

#superbugs .colCentre  h2 {
	padding-top: 12px;
	padding-bottom: 12px;
}

li.bugs {
	margin-left: 12px;
}

.bugListWrap {
	float: left;
}

.bugListCol {
	width: 216px;
	float: left;
}
	
/* Tristel in hospitals
----------------------------------------------- */

#tristel .mainWrap {
	background:url(../images/gen/background2.gif) repeat-y;
} 

.tristelProductsWrap {
	float: left;
	width: 432px;
	height: 144px;
	clear: both;
	background: #c0bacf;
	margin-bottom: 2px;
}

.tristelProductsWrap p {
	color: #333;
}


.tristelProductsWrap  em {
	font-style: normal;
	color:  #fff;
}
	
.tristelProductsLeft {
	width: 220px;
	float: left;
}	

.tristelProductsRight {
	width: 212px;
	float: left;
}	

#tristel .colCentre p, #tristel .colCentre h3,  #tristel .colCentre h2 {
	padding-left: 4px;
	padding-right: 4px;
}

#tristel .colCentre {
	border-top: 12px solid #725fab;
}

.topCol#hospital {
	height: 473px;
	background: #fff url( ) 0 12px no-repeat;
}

#hospital .mainWrap {
	background:url(../images/gen/background6.gif) repeat-y;
}