/* =Common Elements
----------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
	}

body {
	background: #5b7f1a url('../images/bg.jpg') repeat-x center top;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin: 0px auto;
	}

img, div, table, td {
	behavior: url('iepngfix.htc');
	}

.clearit {
	clear: both;
	font-size: px; /*for IE*/
	height: 0px;
	line-height: 0px;
	margin: 0px;
	padding: 0px;
	}

#header {
	background: url('../images/bg_nav.gif') repeat-x 0px 0px;
	margin: 0px auto;
	width: 100%;
	}
	
#header div {
	margin: 0px auto;
	width: 960px;
	}

#outer {
	margin: 0px auto;
	width: 960px;
	}

p {
	line-height: 16px;
	padding: 0px 0px 15px 0px;
	}
	
.btn {
	background: url('../images/arrow.gif') no-repeat 0px 3px;
	float: left;
	font-size: 10px;
	margin: 0px 15px 0px 0px;
	padding: 0px 0px 0px 13px;
	text-transform: uppercase;
	}
	
.btn a {
	color: #6ab81e;
	text-decoration: none;
	}
	
.btn a:hover {
	color: #4e9e00;
	}
	
.btn2 {
	background: url('../images/arrow2.gif') no-repeat 0px 3px;
	float: left;
	font-size: 10px;
	margin: 0px 15px 0px 0px;
	padding: 0px 0px 0px 13px;
	text-transform: uppercase;
	}
	
.btn2 a {
	color: #333;
	text-decoration: none;
	}
	
.btn2 a:hover {
	color: #000;
	}
	
#container {
	background: url('../images/bg_content.png') no-repeat 0px 0px;
	margin: 48px 0px 0px 0px;
	width: 960px;
	}

#sidebar {
	float: left;
	padding: 27px 30px 30px 30px;
	width: 180px;
	}

#sidebar ul {
	list-style: none;
	margin: 25px 0px 0px 0px;
	}

#sidebar ul li {
	background: url('../images/dotted.gif') repeat-x 0px 0px;
	font-size: 13px;
	padding: 5px 0px 5px 0px;
	}

#sidebar ul li.first {
	background: none;
	}

#sidebar ul li a {
	background: url('../images/arrow.gif') no-repeat 0px 3px;
	color: #ccc;
	padding: 0px 0px 0px 13px;
	text-decoration: none;
	}

#sidebar ul li a:hover {
	color: #fff;
	}

#head {
	}
	
#pageContent {
	float: left;
	padding: 30px;
	width: 660px;
	}

#pageContent h1 {
	font-size: 21px;
	font-weight: normal;
	height: 40px;
	margin: 0px 0px 30px 0px;
	padding: 30px 0px 0px 0px;
	}

#content h2, #contentFixed h2 {
	font-size: 15px;
	font-weight: normal;
	margin: 0px 0px 5px 0px;
	}

#content h3, #contentFixed h3 {
	font-size: 13px;
	font-weight: normal;
	margin: 0px 0px 5px 0px;
	}

#contentFixed {
	height: 400px;
	}

#content a, #contentFixed a {
	color: #5b7f1a;
	}

#content a:hover, #contentFixed a:hover {
	color: #666;
	}

#visuals {
	float: right;
	margin: 0px 0px 15px 20px;
	width: 192px;
	}

#visuals .visual {
	background-color: #fff;
	border: 1px solid #e7e7e7;
	padding: 5px;
	}

#visuals .visual img {
	width: 180px;
	}

#visuals p {
	font-size: 11px;
	line-height: 13px;
	margin: 10px 0px 0px 0px;
	}

.swatch {
	float: left;
	margin: 0px 11px 15px 0px;
	text-align: center;
	}

.swatch img {
	height: 55px;
	margin: 0px 0px 5px 0px;
	width: 55px;
	}

#contactInfo {
	float: left;
	width: 230px;
	}



/* =Nav
----------------------------------------------- */

ul#nav {
	height: 40px;
	list-style: none;
	margin: 0px auto;
	}

ul#nav li {
	float: right;
	}

ul#nav li a {
	border-top: 8px solid #666;
	color: #666;
	display: block;
	height: 27px;
	padding: 13px 0px 0px 0px;
	text-align: center;
	text-decoration: none;
	}

ul#nav li a:hover {
	color: #fff;
	}

ul#nav li.about a {
	border-top: 8px solid #07aaf7;
	width: 92px;
	}

ul#nav li.aboutFix a {
	background-color: #07aaf7;
	border-top: 8px solid #07aaf7;
	color: #fff;
	width: 92px;
	}

ul#nav li.about a:hover {
	background-color: #07aaf7;
	}

ul#nav li.products a {
	border-top: 8px solid #b736d8;
	width: 89px;
	}

ul#nav li.productsFix a {
	background-color: #b736d8;
	border-top: 8px solid #b736d8;
	color: #fff;
	width: 89px;
	}

ul#nav li.products a:hover {
	background-color: #b736d8;
	}

ul#nav li.colors a {
	border-top: 8px solid #ffae01;
	width: 120px;
	}

ul#nav li.colorsFix a {
	background-color: #ffae01;
	border-top: 8px solid #ffae01;
	color: #fff;
	width: 120px;
	}

ul#nav li.colors a:hover {
	background-color: #ffae01;
	}

ul#nav li.blog a {
	border-top: 8px solid #deea55;
	width: 64px;
	}

ul#nav li.blogFix a {
	background-color: #deea55;
	border-top: 8px solid #deea55;
	color: #fff;
	width: 64px;
	}

ul#nav li.blog a:hover {
	background-color: #deea55;
	}

ul#nav li.home a {
	border-top: 8px solid #6ab81e;
	width: 82px;
	}

ul#nav li.homeFix a {
	background-color: #6ab81e;
	border-top: 8px solid #6ab81e;
	color: #fff;
	width: 82px;
	}

ul#nav li.home a:hover {
	background-color: #6ab81e;
	}

ul#nav li.contact a {
	border-top: 8px solid #93e4db;
	width: 103px;
	}

ul#nav li.contactFix a {
	background-color: #93e4db;
	border-top: 8px solid #93e4db;
	color: #fff;
	width: 103px;
	}

ul#nav li.contact a:hover {
	background-color: #93e4db;
	}




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

#feature {
	background: url('../images/feature.png') no-repeat right center;
	height: 218px;
	width: 960px;
	}

#homeContainer {
	background: url('../images/bg_home.png') no-repeat 0px 0px;
	padding: 38px 30px 30px 30px;
	width: 900px;
	}

#quad1 {
	color: #ccc;
	float: left;
	height: 130px;
	padding: 40px 30px 0px 0px;
	position: relative;
	width: 256px;
	}

#quad1 h1 {
	background: url('../images/icon_beaker.png') no-repeat 0px 0px;
	font-size: 18px;
	font-weight: normal;
	height: 32px;
	left: 0px;
	line-height: 18px;
	padding: 12px 0px 0px 48px;
	position: absolute;
	top: -10px;
	}

#quad1 h1 a {
	color: #fff;
	text-decoration: none;
	}

#quad1 h1 a:hover {
	color: #ccc;
	}

#quad1 h2 {
	font-size: 15px;
	font-weight: normal;
	}

#quad2 {
	background: url('../images/bg_divider.gif') no-repeat 0px 0px;
	color: #ccc;
	float: left;
	height: 130px;
	padding: 40px 30px 0px 32px;
	position: relative;
	width: 260px;
	}

#quad2 h1 {
	background: url('../images/icon_palette.png') no-repeat 0px 0px;
	font-size: 18px;
	font-weight: normal;
	height: 32px;
	left: 30px;
	line-height: 18px;
	padding: 12px 0px 0px 40px;
	position: absolute;
	top: -10px;
	}

#quad2 h1 a {
	color: #fff;
	text-decoration: none;
	}

#quad2 h1 a:hover {
	color: #ccc;
	}

#quad3 {
	background: url('../images/bg_divider.gif') no-repeat 0px 0px;
	color: #ccc;
	float: left;
	height: 130px;
	padding: 40px 0px 0px 32px;
	position: relative;
	width: 260px;
	}

#quad3 h1 {
	background: url('../images/icon_leaf.png') no-repeat 0px 0px;
	font-size: 18px;
	font-weight: normal;
	height: 32px;
	left: 30px;
	line-height: 18px;
	padding: 12px 0px 0px 45px;
	position: absolute;
	top: -10px;
	}

#quad3 h1 a {
	color: #fff;
	text-decoration: none;
	}

#quad3 h1 a:hover {
	color: #ccc;
	}

#quad3 img {
	float: right;
	margin: 0px 0px 0px 5px;
	}

#about {
	color: #333;
	float: left;
	padding: 30px 30px 0px 0px;
	width: 610px;
	}
	
#about h1 {
	font-size: 18px;
	font-weight: normal;
	line-height: 18px;
	margin: 0px 0px 10px 0px;
	}

#about ul {
	float: right;
	list-style: none;
	margin: 0px 0px 0px 20px;
	width: 150px;
	}

#about ul li {
	background: url('../images/arrow2.gif') no-repeat 0px 3px;
	font-size: 10px;
	padding: 0px 0px 3px 13px;
	text-transform: uppercase;
	}

#about ul li a {
	color: #333;
	text-decoration: none;
	}

#about ul li a:hover {
	color: #000;
	}

#callout {
	background: url('../images/bg_callout.png') no-repeat 0px 0px;
	color: #333;
	float: left;
	padding: 30px;
	width: 260px;
	}

#callout h1 {
	font-size: 18px;
	font-weight: normal;
	line-height: 18px;
	margin: 0px 0px 10px 0px;
	}

#footer {
	background: url('../images/footer.png') repeat-x 0px 0px;
	color: #526728;
	font-size: 11px;
	padding: 15px 0px 0px 0px;
	margin: 20px 0px 30px 0px;
	width: 960px;
	}

#footer a {
	color: #526728;
	text-decoration: none;
	}

#footer a:hover {
	color: #333;
	}



/* =Form Styling
----------------------------------------------- */

form {
	display: inline;
	}

dl.formStyling {
	color: #666;
	font-size: 12px;
	margin: 0px 0px 0px 0px;
	width: 390px;
	}

dl.formStyling dt {
	clear: both;
	float: left;
	margin: 0px 15px 0px 0px;
	padding: 2px 0px 5px 0px;
	width: 120px;
	}

dl.formStyling dd {
	float: left;
	padding: 0px 0px 5px 0px;
	width: 240px;
	}

dl.formStyling dd input.reg {
	border: 1px solid #dcdcdc;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 12px;
	padding: 2px;
	width: 200px;
	}

dl.formStyling dd textarea.reg {
	border: 1px solid #dcdcdc;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 12px;
	padding: 2px;
	width: 200px;
	}

dl.formStyling dd textarea.alt {
	border: 1px solid #dcdcdc;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 12px;
	padding: 2px;
	width: 200px;
	}

textarea.terms {
	border: 1px solid #dcdcdc;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 11px;
	margin: 15px 0px 15px 0px;
	padding: 2px;
	width: 435px;
	}

dl.formStyling dd input.alt {
	border: 1px solid #dcdcdc;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 12px;
	padding: 2px;
	}

dl.formStyling dd select.alt {
	border: 1px solid #dcdcdc;
	color: #666;
	font-family: arial, sans-serif;
	font-size: 12px;
	padding: 2px;
	}

dl.formStyling dd select option {
	padding: 2px 2px 0px 2px;
	}

dl.formStyling dd .hint {
	color: #666;
	font-size: 11px;
	padding: 0px 0px 0px 10px;
	}

dl.formStyling dt .hint {
	color: #666;
	display: block;
	font-size: 11px;
	padding: 0px 0px 0px 0px;
	}