/* HTML */

body
{
	background-color: #fff;
	background-image: url(../images/body-bg-x.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666;
}

a img {border: none;}
input, select, textarea {font-family:Tahoma, Verdana, Arial, "sans serif";}
/* CLASSES */

.clear {clear: both;}
.bold {font-weight: bold;}
.bright {border-right: 1px solid #ccc;}
.bleft {border-left: 1px solid #olsccc;}
.right {float: right; margin: 0px 0px 10px 10px;}
.tright {text-align: right;}
.teleft {text-align: left;}
.left {float: left; margin: 0px 10px 10px 0px;}
.input {border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 130px; color: #666;}
	.input:focus {color: #333;}
.input-big {border: 1px solid #ccc; -moz-border-radius: 8px; -webkit-border-radius: 8px; width: 250px; color: #666; height: 40px; font-size: 25px; line-height: 40px;}
	.input-big:focus {color: #333;}
.input-long {border: 1px solid #ccc; -moz-border-radius: 8px; -webkit-border-radius: 8px; width: 220px; color: #666;}
	.input-long:focus {color: #333;}
.close {float: right; margin: 10px 10px 0px 0px; cursor: pointer;}
.submit {background-image: url(../images/right-nav.gif); background-repeat: no-repeat; background-position: -20px -40px; border-right: 1px solid #005176; border-left: 1px solid #005176; border-top: 0px; border-bottom: 1px solid #005176; color: #fff; text-shadow: 0px 1px #006; height: 25px; line-height: 25px; font-weight: bold; font-size: 12px;}
.submit-big {background-image: url(../images/right-nav.gif); background-repeat: no-repeat; background-position: -20px -40px; border-right: 1px solid #005176; border-left: 1px solid #005176; border-top: 0px; border-bottom: 1px solid #005176; color: #fff; text-shadow: 0px 1px #006; height: 40px; line-height: 40px; font-weight: bold; font-size: 25px;}
.small {font-size: 11px;}

/* CONTAINER */

#container
{
	width: 980px;
	padding: 25px 10px 10px 10px;
	margin: auto;
	position: relative;
	background-color: #fff;
}
#header {width: 980px; height: 65px;}
#logo {float: left;}
#telno 
{
	margin: 0px 0px 10px 0px; 
	padding: 0px 0px 0px 29px; 
	background-image: url(../images/phone-icon.gif); 
	background-repeat: no-repeat; 
	background-position: left top; 
	line-height: 33px; 
	float: right; 
	display: block;
	color: #006699;
	font-size: 20px;
}

/* FORMS */

#homepageforms {z-index: 100; font-size: 12px;}
#homepageforms form {margin: 0px; padding: 0px; position: absolute; top: 136px; left: 10px; width: 752px; height: 313px; display: none; z-index: 100; background-color: #fff; background-image: url(../images/form-gradient.gif); background-repeat: repeat-x; background-position: top; overflow: hidden; border: 1px solid #ccc;}
#homepageforms form p {padding: 0px 10px 0px 10px;}
#homepageforms form h2 {font-size: 16px; color: #073362; font-weight: normal; margin: 5px 10px 0px 10px; padding: 0px; line-height: 30px; text-align: left;}
#homepageforms form h3 {padding: 0px 10px 0px 10px; font-size: 12px; text-align: right; margin: 8px 0px 8px 0px; line-height: 20px;}
#homepageforms form label {float: left; width: 110px;}
#homepageforms form div {float: left; width: 230px; height: 283px; padding: 0px 5px 0px 5px; position: relative;}
#homepageforms form div.form p {clear: both; line-height: 20px; margin: 8px 0px 8px 0px; padding: 0px; text-align: right;}
#homepageforms form .input {width: 110px;}
#homepageforms form textarea {border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 215px; color: #666;}
	#homepageforms form textarea:focus {color: #333;}
#homepageforms form div.desc {width: 240px; padding-left: 10px;}
#homepageforms form div.desc p {text-align: left; line-height: 120%;}
#homepageforms form div.desc p.tright {text-align: right;}

#homepageforms form#dealer {background-image: url(../images/form-gradient-small.gif); background-repeat: repeat-x; width: 400px; height: 110px; left: 362px; top: 260px;}
#dealer .dealertext {margin-right:190px;}

#homepageforms form#call {background-image: url(../images/form-gradient2.gif); background-repeat: no-repeat;}

/* NAV */

#nav 
{	
	clear: both;
	list-style: none;
	background-image: url(../images/nav-bg.jpg);
	background-repeat: no-repeat;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 5px;
	width: 980px;
	height: 36px;
	font-size: 13px;
}

#nav li {display: block; float: left;}
#nav li:hover {background-image: url(../images/nav-hover-bg.jpg); background-repeat: repeat-x;}
	#nav li:hover a {color: #fff;}
#nav li a {display: block; text-decoration: none; color: #0082bd; padding: 0px 25px 0px 25px; line-height: 36px; font-weight: bold;}

#nav li ul {position: absolute; display: none; list-style: none; z-index: 200; width: 220px; margin: 0px; padding: 1px; background-color: #0376ab; font-size: 11px; line-height:26px;}
#nav li ul li {z-index: 200; width: 220px; display: block; border: none;}
#nav li ul li a {z-index: 200; width: 210px; display: block; padding: 0px 5px 0px 5px;}
	#nav li ul li a:hover {background-image: url(../images/nav-bg.jpg); background-repeat: repeat-x; background-position: -20px -1px; color: #073362;}

/* RIGHT HAND SIDE */
#rhs {float: right; width: 216px; font-size: 13px;}

/* FORM NAV */

#contact-nav
{
	width: 216px;
	padding: 0px;
	margin: 0px;
	list-style: none;
}

#contact-nav li 
{
	display: block; 
	height: 40px; 
	margin: 0px 0px 9px 0px; 
	position: relative;
	cursor: pointer;
	float: left;
}
		
	#contact-nav li a, .body-button
	{
		background-image: url(../images/right-nav.gif); 
		background-repeat: no-repeat; 
		display: block; 
		width: 206px; 
		color: #0082bd;  
		text-decoration: none; 
		font-weight: normal;
		line-height: 40px; 
		height: 40px;
		padding: 0px 7px 0px 7px; 
		z-index: 20;
		text-shadow: 0px 1px #ccc;
		cursor: pointer;
	}
	
	.body-button {margin-bottom: 5px;}
	.body-button-large {background-image: url(../images/bbl.gif); background-repeat: no-repeat; display: block; width: 263px; color: #0082bd; text-decoration: none; font-weight: normal; line-height: 40px; height: 40px; padding: 0px 7px 0px 7px; z-index: 20; text-shadow: 0px 1px #ccc; cursor: pointer;}
	#contact-nav li a:hover, .body-button:hover, .body-button-large:hover {background-position: 0px -40px; color: #fff; text-shadow: 0px 1px #006; line-height: 40px; padding: 0px 7px 0px 7px; height: 40px; z-index: 20;}

	#contact-nav li p 
	{
		display: block; 
		padding: 5px;
		margin: 0px; 
		background-color: #fff;
		border: 1px solid #999999; 
		-moz-border-radius: 4px; -webkit-border-radius: 4px;
		font-size: 11px; 
		z-index: 30; 
		position: absolute; top: 40px; left: 0px; 
		width: 206px;  
		color: #333; 
		display: none; 
		min-height: 29px;
		font-family:Tahoma, Verdana, Arial, "sans serif";
	}
	#contact-nav li p a {color: #073362;}
	#contact-nav li p strong {display: block; margin-bottom: 5px;}

/* RIGHT CONTENT */
#right-content
{
	color: #000;
	width: 206px;
	padding: 0px 7px 0px 7px;
	margin: 10px 0px 0px 0px;
}

#right-content h2 {color: #0082bd; font-size: 14px; padding: 0px; margin: 0px 0px auto 0px; font-weight: normal;}
#right-content a {margin-right: 20px;}

/* SCROLLING BLOCK */
#sideblock
{
	background-image: url(../images/sideblock-bg.gif);
	background-repeat: no-repeat;
	color: #666;
	width: 216px;
	height: 290px;
	margin: 22px 0px 10px 0px;
}
	#sideblock h2 {color: #073362; font-size: 20px; margin: 10px 10px 0px 10px; padding: 10px 0px 0px 0px; font-weight: normal;}
	#sideblock-anims div {padding: 10px;}
	
/* MAIN CONTENT */
#maincontent
{
	
	padding-bottom: 15px;
	width: 754px;
	float: left;
}

#maincontent h1, #cf h1 {font-size: 14px; color: #333; font-weight: normal; margin-top: 10px 0px auto 0px; padding: 0px;}
#maincontent h2 {font-size: 14px; color: #333; font-weight: normal; margin-top: 10px 0px auto 0px; padding: 0px;}
#maincontent h2#mh {font-size: 20px; color: #333; font-weight: normal; margin: 0px 0px auto 0px; padding: 0px;}
#maincontent p, #maincontent ul, #maincontent ol {line-height: 160%; font-size: 13px;}
#maincontent a {color: #0082bd;}
#maincontent a:hover {color: #000;}
#maincontent a.body-button:hover, #maincontent a.body-button-large:hover {color: #fff;}

	/* MAIN IMAGE - SLIDESHOW (HOMEPAGE) */
	#mainimage
	{
		width: 754px;
		height: 235px;
		margin: 0px 0px 10px 0px;
		z-index: 10;
	}
	#mainimage img {z-index: 10;}
	
	/* BREADCRUMB */
	p#breadcrumb {font-size: 10px; color: #999;}
	p#breadcrumb a {color: #0082bd; text-decoration: none;}
	p#breadcrumb a:hover {color: #073362;}
	
	/* BUTTONS */
	p#buttons {margin: 0px; padding: 0px;}
	#buttons a
	{
		position: relative;
		color: #000;
		text-decoration: none;
		height: 143px;
		display: block;
		float: left;
		margin: 0px 1px 0px 0px;
		padding: 0px;
	}
	
		#buttons a.big {width: 256px;}
		#buttons a.small {width: 244px;}
		#buttons a.big strong {width: 246px;}
		#buttons a.small strong {width: 234px;}
	
	#buttons a strong 
	{
		font-size: 11px;
		font-family:Tahoma, Verdana, Arial, "sans serif";
		color: #000;
		background-color: #fff;
		display: none;
		position: absolute;
		bottom: 0px; 
		left: 0px;
		padding: 5px;
		font-weight: normal;
		line-height: 140%;
	}
	
	/* COLUMN LAYOUT */
	#maincontentleft {float: left; width: 369px; padding: 0px 10px 0px 0px; border-right: 1px solid #ccc;}
	#maincontentright {float: left; padding: 0px 0px 0px 10px; width: 350px; margin-left: -1px; border-left: 1px solid #ccc;}
	
		#maincontentright img {float: left; margin: 0px 10px 10px 0px;}
		#maincontentright h2 {}
		
		.foot-products {width: 340px; padding: 10px; float: left; margin-right: 10px;}
		.foot-products img {float: left; margin: 10px 10px 10px 0px;}
		
		.foot-flash {clear: both; margin: 0px 0px 10px 40px;}
		.foot-flash span {float: left;}
		.foot-flash p {margin: 0px 0px 0px 160px;}
	
	/* SPECS */
	#specs span {line-height: 31px; clear: both; display: block; margin-bottom: 5px; font-size: 16px;}
	#specs span img {float: left; margin-right: 5px;}
	
	/* BENEFITS */
	#maincontent .benefit {width: 355px; padding: 5px; height: 120px; overflow: hidden; margin: 10px 10px 0px 0px; float: left; display: block;}
	#maincontent .benefit img {float: left; padding-right: 10px;}
	#maincontent .benefit p, #maincontent .benefit ul, #maincontent .benefit ol {margin-left: 130px; font-size: 12px;}
	#maincontent .benefit h2 {margin: 0px 0px 5px 130px; font-weight: bold;}
	
	/* SPECIAL OFFER */
	#special {width: 416px; height: 461px; background-image: url(../images/special-offers-bg.gif); background-repeat: no-repeat; padding: 20px; text-align: center; color: #000; margin-left: 149px;}
	#special h2 {font-size: 20px; font-weight: bold; margin-top: 0px;}
	#special p {margin: 0px 0px 10px 0px;}
	#special p.small {font-size: 11px;}	
	#special strong {color: #a41010;}
	
	/* KINETICO DIFFERENCE & PRODUCTS */
	#maincontent div.kd {clear: both; margin-bottom: 15px;}
	#maincontent div.kd img {float: left;}
	#maincontent div.kd h2 {font-weight: bold;}
	#maincontent div.kd p, #maincontent div.kd h2 {margin: 0px 0px 0px 57px;}
	#maincontent div.grey p, #maincontent div.grey h2 {color: #555555}
	#maincontent div.pink p, #maincontent div.pink h2 {color: #e90189}
	#maincontent div.red p, #maincontent div.red h2 {color: #b52c33}
	#maincontent div.orange p, #maincontent div.orange h2 {color: #ce6f1b}
	#maincontent div.lilac p, #maincontent div.lilac h2 {color: #716eb1}
	#maincontent div.blue p, #maincontent div.blue h2 {color: #0083c4}
	#maincontent div.green p, #maincontent div.green h2 {color: #007889}
	
	/* PRODUCT POINTS */
	#maincontentleft .pp {clear: both;}
	#maincontentleft .pp img {float: left;}
	#maincontentleft .pp p, #maincontentleft .pp h2 {margin-left: 129px;}
	#maincontentleft .pp p, #maincontentleft .pp ul {font-size: 11px;}
	#maincontentleft .pp ul {margin-left: 149px; padding: 0px;} 

	/* DEALER LAYOUT */
	#maincontent .dealer 
	{
		width: 736px;
		padding: 5px;
		border: 4px solid #d0f0ff;
		position: relative;
		height: 220px;
		margin: 36px 0px 0px 0px;
		font-size: 11px;
	}
	
	#maincontent .dealer h2 {margin: 0px; padding: 0px 5px 0px 5px; background-color: #d0f0ff; color: #0082bd; line-height: 25px; height: 25px; display: block; float: left; position: absolute; top: -29px; left: 0px; font-weight: bold;}
	#maincontent .dealer .col {float: left; width: 220px; height: 210px; padding: 0px 10px 10px 10px;}
	#maincontent .dealer .col p {line-height: 20px; font-size: 12px; color: #333;}
		#maincontent .dealer textarea {border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 215px; color: #666;}
			#maincontent .dealer textarea:focus {color: #333;}
		#maincontent .dealer .col p label {text-align: left; padding-left: 5px; float: left; width: 50px;}
	#maincontent .dealer .partno
	{
		position: absolute;
		bottom: 1px;
		left: 1px;
		padding: 0px 5px 0px 5px;
		line-height: 25px;
		height: 25px; display: block;
		background-color: #efefef;
		color: #073362;
	}
	
	#maincontent .dealersearch 
	{
		width: 736px;
		padding: 5px;
		border: 4px solid #efefef;
		position: relative;
		margin: 10px 0px 10px 0px;
	}
	
	#maincontent .dealersearch p {margin: 0px; padding: 0px;}

/* FOOTER */

#footer
{
	background-image: url(../images/footer-bg-top.jpg);
	background-repeat: no-repeat;
	background-position: top;
	padding: 75px 0px 0px 0px;
	width: 980px;
	clear: both;
}

	#footer ul {margin: 0px; padding: 0px 0px 0px 10px; float: left; font-size: 11px; width: 185px; line-height: 20px; min-height: 160px;}
	#footer ul li {display: block;}
	#footer ul li a {color: #999; text-decoration: none;}
	#footer ul li a:hover {color: #666;}

#footer-bottom
{
	clear: both;
	background-image: url(../images/footer-bg-bottom.jpg);
	background-repeat: no-repeat;
	background-position: top;
	width: 980px;
	height: 50px;
	padding: 80px 0px 0px 0px;
	color: #666;
	font-size: 11px;
}
#footer-bottom a {color: #666;}