/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display:block;}
audio, canvas, video {display:inline-block; *display:inline; *zoom:1;}
audio:not([controls]) {display:none;}
[hidden] {display:none;}


/* =============================================================================
   Base
   ========================================================================== */

html {font-size:100%; overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body {margin:0; font-size:13px; line-height:1.231;}
body, button, input, select, textarea {font-family:sans-serif;}

::-moz-selection {background:#a3d1f1; color:#2b2b2b); text-shadow:none;}
::selection {background:#a3d1f1; color:#2b2b2b; text-shadow:none;}


/* =============================================================================
   Links
   ========================================================================== */

a {color:#3490d4; text-decoration:none;}
a:visited {color:#3490d4;}
a:hover {color:#257bbb; text-decoration:underline;}
a:focus {outline:0;}
a:hover, a:active {outline:0;}


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] {border-bottom:1px dotted;}
b, strong {font-weight:bold;}
blockquote {margin:1em 40px;}
dfn {font-style:italic;}
hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
ins {background:#ff9; color:#000; text-decoration:none;}
mark {background:#ff0; color:#000; font-style:italic; font-weight:bold;}
pre, code, kbd, samp {font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size:1em;}
pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word;}
q {quotes:none;}
q:before, q:after {content:""; content:none;}
small {font-size: 85%;}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol {margin:0; padding:0;}
dd {margin:0 0 0 40px;}
nav ul, nav ol {list-style:none; list-style-image:none; margin:0; padding:0;}


/* =============================================================================
   Embedded content
   ========================================================================== */

img {border:0; -ms-interpolation-mode:bicubic; vertical-align:middle;}
svg:not(:root) {overflow:hidden;}
figure {margin:0;}


/* =============================================================================
   Forms
   ========================================================================== */

form {margin:0;}
fieldset {border:0; margin:0; padding:0;}
legend {border:0; *margin-left:-7px; padding:0;}
button, input, select, textarea {font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle; -webkit-appearance:none;}
button, input {line-height:normal; *overflow:visible;}
table button, table input {*overflow:auto;}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer; -webkit-appearance:button;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box;}
input[type="search"] {-webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
textarea {overflow:auto; vertical-align:top; resize:vertical;}
input:valid, textarea:valid {  }
input:invalid, textarea:invalid {background-color:#d15454;}


/* =============================================================================
   Tables
   ========================================================================== */

table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}


/* ==========================================================================
   Page Styles 
   ========================================================================== */

body {min-width:1024px; background:url(../images/page-bg.jpg) 0 0 repeat; position:relative; overflow:hidden;}

header {min-width:1024px; max-width:1400px; height:501px; margin:0 auto 0 auto; background:url(../images/header-bg.jpg) center 0 no-repeat; position:relative;}
	#text-position {width:1024px; position:relative; margin:0 auto 0 auto;}
		#header-text-area {width:420px; padding:70px 10px 10px 10px; background:#000; background:rgba(0, 0, 0, 0.7); color:#fff; position:relative; top:120px; left:10px;}
			#header-text-area p {margin:10px 0 0 0;}
			#header-logo {width:350px; height:120px; background:url(../images/css-sprites.png) -560px -20px no-repeat; position:absolute; top:-60px; left:35px; z-index:20;}
			#header-title {width:420px; height:100px; background:url(../images/css-sprites.png) -580px -165px no-repeat; z-index:10;}
	#bottom-arch {width:1400px; height:15px; margin:0 0 0 -700px; background:url(../images/css-sprites.png) center 0 no-repeat; position:absolute; bottom:-14px; left:50%; z-index:15;}

#ssc-icons {width:980px; margin:25px auto 0 auto;}
	#ssc-icons ul {list-style:none;}
	#ssc-icons ul.icons li {width:160px; height:160px; margin:0 30px 10px 50px; background:url(../images/css-sprites.png) 0 -20px repeat; float:left;}
		#ssc-icons ul.icons li#video {background:none; border-radius:0; box-shadow:none;}
	#ssc-icons ul.captions li {width:220px; margin:0 0 10px 20px; text-align:center; float:left; color:#fff;}
		#simple {width:160px; height:50px; margin:55px 0 0 0; background:url(../images/css-sprites.png) -160px -20px no-repeat;}
		#safe {width:160px; height:50px; margin:55px 0 0 0; background:url(../images/css-sprites.png) -160px -70px no-repeat;}
		#clean {width:160px; height:50px; margin:55px 0 0 0; background:url(../images/css-sprites.png) -160px -120px no-repeat;}
	#ssc-icons ul.icons li#video {background:url(../images/css-sprites.png) -320px -20px no-repeat;}
	
section {width:1000px; margin:50px auto 15px auto; padding:35px 0 10px 0; border:1px solid #2a1d0e; box-shadow:inset 0 0 3px #000; -moz-box-shadow:inset 0 0 3px #000; -webkit-box-shadow:inset 0 0 3px #000; box-shadow:0 0 4px #35230c; -moz-box-shadow:0 0 4px #35230c; -webkit-box-shadow:0 0 4px #35230c; position:relative; background:url(../images/main-bg.jpg) 0 0 repeat; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

	.title-banner {width:560px; height:45px; position:absolute; top:-20px; left:217px; background:url(../images/css-sprites.png) 0 -190px no-repeat; color:#fff; line-height:40px; text-align:center; z-index:15;}
		#how-title {width:560px; height:45px; margin:0; padding:0; background:url(../images/css-sprites.png) 0 -235px no-repeat;}
		#safer-title {width:560px; height:45px; margin:0; padding:0; background:url(../images/css-sprites.png) 0 -280px no-repeat;}
		#buy-title {width:560px; height:45px; margin:0; padding:0; background:url(../images/css-sprites.png) 0 -325px no-repeat;}
	.opening-text {width:780px; margin:0 auto 0 auto;}


	.step-box {width:430px; height:145px; margin:0 0 0 50px; position:relative;}
		.step-number {width:65px; height:125px; margin:10px 0 10px 0; float:left;}
			#n-one {background:url(../images/css-sprites.png) -1020px -20px no-repeat;}
			#n-two {background:url(../images/css-sprites.png) -1020px -165px no-repeat;}
			#n-three {background:url(../images/css-sprites.png) -1020px -310px no-repeat;}
		.step-box p {width:170px; height:145px; display:table-cell; vertical-align:middle;}
		.diagram {width:175px; height:145px; position:absolute; right:0; top:0;}
			#d-one {background:url(../images/css-sprites.png) -1085px -20px no-repeat;}
			#d-two {background:url(../images/css-sprites.png) -1085px -165px no-repeat;}
			#d-three {background:url(../images/css-sprites.png) -1085px -310px no-repeat;}

	.magnifier {width:500px; height:450px; position:absolute; right:0; bottom:0; background:url(../images/magnifier.jpg) 0 0 no-repeat;}
		.magnifier-caption {width:325px; position:absolute; right:140px; bottom:30px; z-index:10;}


.safety-comparison {width:840px; margin:0 auto 5px auto; border-collapse:separate; border-spacing:1px;}
	.safety-comparison tr {}
	.safety-comparison td {padding:10px 20px 10px 80px;}
		.safety-comparison td.img {padding:0; background:none;}
		.safety-comparison td.tw {background:url(../images/css-sprites.png) -1320px -70px no-repeat;}
		.safety-comparison td.tn {background:url(../images/css-sprites.png) -1320px -20px no-repeat;}	


.vendors {width:740px; margin:0 auto 0 auto;}
	.vendors ul {margin:25px 0 0 0; list-style:none;}
	.vendors li {width:216px; height:100px; margin:0 0 15px 20px; background:url(../images/vendors.jpg) 0 top no-repeat; border:2px solid #79a121; float:left;}
	.vendors .left-bump {margin:0 0 0 108px;}
	.vendors li:hover {border:2px solid #000; cursor:pointer;}
		.vendors li a {width:100%; height:100%; display:block;}	
			.vendors li#one {background-position-y:0;}
			.vendors li#two {background-position-y:-100px;}
			.vendors li#three {background-position-y:-200px;}
			.vendors li#four {background-position-y:-300px;}
			.vendors li#five {background-position-y:-400px;}
			.vendors li#six {background-position-y:-500px;}	


footer {width:100%; height:35px; margin:25px auto 0 auto; position:relative; background:rgba(0,0,0,0.4); border-top:1px solid #000;}
	footer p {width:100%; margin:0; padding:0; line-height:35px; position:absolute; bottom:0; text-align:center; color:#fff;}

.button {margin:15px 0 15px 0; padding:10px 20px 10px 20px; position:relative; top:22px; outline:none; cursor:pointer; text-align:center; font-size:16px; font-family:sans-serif; text-transform:uppercase; border:1px solid #261809; background-color:#78a121; color:#e6e4ce; text-shadow:0 1px 1px #706f64;
		-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
		-moz-box-shadow:inset 0 0 3px #333; -webkit-box-shadow:inset 0 0 3px #333; box-shadow:inset 0 0 3px #333;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dbe56', endColorstr='#78a121');
		background: -webkit-gradient(linear, left top, left bottom, from(#9dbe56), to(#78a121));
		background: -moz-linear-gradient(top, #9dbe56, #78a121);}
		
	.button:visited {color:#e6e4ce;}
	.button:hover {color:#fff; text-shadow:0 1px 1px #706f64; text-decoration:none;}
	.button:active {color:#fff; text-shadow:0 -1px 1px #706f64; border:1px solid #333333;
		-moz-box-shadow:inset 0 0 2px #646464; -webkit-box-shadow:inset 0 0 2px #646464; box-shadow:inset 0 0 2px #646464;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#78a121', endColorstr='#9dbe56');
		background: -webkit-gradient(linear, left top, left bottom, from(#78a121), to(#9dbe56));
		background: -moz-linear-gradient(top, #78a121, #9dbe56);}



/* ==========================================================================
   Non-semantic helper classes
   ========================================================================== */

/* For image replacement */
.ir {display:block; border:0; text-indent:-999em; overflow:hidden; background-color:transparent; background-repeat:no-repeat; text-align:left; direction:ltr;}
.ir br {display:none;}

/* Hide from both screenreaders and browsers */
.hidden {display:none !important; visibility:hidden;}

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden {border:0; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility:hidden;}

/* Contain floats */ 
.clearfix:before, .clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;}


/* ==========================================================================
   Print styles
   ========================================================================== */
 
@media print {
  * {background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important;}
  a, a:visited {text-decoration:underline;}
  a[href]:after {content:" (" attr(href) ")";}
  abbr[title]:after {content:" (" attr(title) ")";}
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: "";}
  pre, blockquote {border:1px solid #999; page-break-inside:avoid;}
  thead {display:table-header-group;}
  tr, img {page-break-inside:avoid;}
  img {max-width:100% !important;}
  @page {margin:0.5cm;}
  p, h2, h3 {orphans:3; widows:3;}
  h2, h3 {page-break-after:avoid;}
}