/* import CSS for compliant browsers */
@import url(reset.css);
@import url(typography.css);
@import url(970.css);
@import url(tabs.css);
@import url(jquery.fancybox.css);

html, body {
	margin:0;
	padding:0;
}

body {
	background:#f6f6f6;
	overflow-x: hidden;
}

body#home {
	background: url(../img/display/water.jpg) #f6f6f6 no-repeat 50% 50px;
}

.wrapper {
	width: 970px;
	margin: 0 auto;
}


/***************************************
Header
****************************************/
#header {
	background: url(../img/display/header-x.gif) transparent repeat-x center top;
	height: 120px;
	position: relative;
	top: -9px;
	overflow: visible;
	border-bottom: 1px solid #fff;
}

#header .wrapper {
	position: relative;
}

#logo {
	background: url(../img/display/logo.png) transparent no-repeat 0 0;
	width: 175px;
	height: 180px;
	text-indent: -999em;
	position: absolute;
	left: 50%;
	top:-50px;
	top:-10px;
	margin-left: -113px;
	margin-bottom: 0;
	z-index: 2;
}

/***************************************
Navigation
****************************************/
#nav {
	width: 770px;
	margin: 0 auto;
	height: 67px;
	padding-top: 53px;
	background: url(../img/display/header.png) transparent no-repeat 49% 0;
}

#nav li {
	float: left;
	display: block;
	text-align: center;
	margin-left: 25px;
	position: relative;
}

#nav .sub { 
	position: absolute; 
	top: 30px; 
	left: 0;
	z-index: 3; 
	opacity: 0;  
}
#nav .sub ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	width: 160px; 
	display: inline; 
	float: left; 
}
.sub ul li { 
	float: none; 
	display: block; 
	padding: 0; 
	-moz-box-shadow: 0 1px 3px 3px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 0 1px 3px 3px rgba(0, 0, 0, 0.1); 
	-o-box-shadow: 0 1px 3px 3px rgba(0, 0, 0, 0.1); 
	box-shadow: 0 1px 3px 3px rgba(0, 0, 0, 0.1);
}
.sub ul li a {
	color: #fff;
	background: url(../img/display/nav-gradient.gif) #000 repeat-x 0 0;
}

#nav li:first-child {
	margin-left: 0;
}

#nav li a {
	display: block;
	padding:1px 8px 5px 8px;
	color: #eee;
	vertical-align: middle;
	-moz-border-radius: 8px;
	-webkit-border-radius:8px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

#nav li a:hover, #nav li a:focus, #nav li a:active,
body#home #nav li a[rel="home"],
body#about #nav li a[title="About DuoMax"],
body#products #nav li a[title="View the DuoMax product range"], 
body#single_product #nav li a[title="View the DuoMax product range"],
body#the_science #nav li a[title="We have the science"],
body#media #nav li a[title="Download DuoMax information and videos"],
body#contact #nav li a[title="Contact the DuoMax team"] {
	color: #fff;
	background: url(../img/display/nav-gradient.gif) #000 repeat-x 0 0;
}

#nav li a[title="View the DuoMax product range"] {
	margin-right: 190px;
}

#nav li a[href="/the-science/"] {

}

/***************************************
Content global
****************************************/
#content {
/* 	margin-top: 70px; */
	margin-top: 5%;/*Relative to screen size, improves document flow*/
}

#bulk {
	position: relative;
	left: -10px;
}

#aside {
	position: relative;
}

/***************************************
Pre-Footer
****************************************/
#pre_footer {
	margin-top: 60px;
	margin-bottom: 40px;
	position: relative;
}

#pre_footer h3 {
	font-size: 24px;
	line-height: 20px;
	color: #cf5d2c;
}

#pre_footer h3 > span {
	display: block;
	line-height: 20px;
}

#pre_footer p {
	margin-top: 20px;
	padding-right: 10px;
}

body#about #pre_footer {
	margin-bottom: 0;
}

body#about #pre_footer .g4 {
	position: relative;
	padding-top: 140px;
}

body#about #pre_footer h3 {
	position: absolute;
	margin-top: -46px;
	color: #85ad50;
}

body#products #pre_footer  {
	margin-top: 60px;
}

body#products #pre_footer h3 {
	position: relative;
	right: 0;
}

body#products #pre_footer h3, 
body#products #pre_footer span,
body#products #pre_footer p {
	text-align: right;
	padding-right: 0;
}

body#products #pre_footer sub {
	vertical-align: baseline;
	font-size: 14px;
	text-align: right;
}

body#products #pre_footer img {
	position: relative;
	display: block;
	top:-20px;
	border: 3px solid white;
	-moz-box-shadow:0 3px 3px #ddd;
	-webkit-box-shadow:0 3px 3px #ddd;
	z-index: 1;
}

body#about #pre_footer {
	background: url(../img/display/tree.png) transparent no-repeat bottom left;
	height: 300px;
	min-height: 300px;
}

body#single_product #pre_footer ul {
	position: relative;
	display: block;
}

body#single_product #pre_footer li {
	margin-bottom: 20px;
}

body#single_product #pre_footer li.pull {
	position: absolute;
	left:-400px;
	width: 320px;
}

body#single_product #pre_footer li:before {
	background: url(../img/display/numbers.gif) transparent no-repeat 0 0;
	height: 60px;
	width: 40px;
	position: absolute;
}

body#single_product h3 {
	position: relative;
	left: 250px;
	display: block;
	width: 200px;
}


/***************************************
Footer
****************************************/
#footer {
	color:#555;
	text-shadow: 0 1px 0 #000;
	font-size: 11px;
	height: 80px;
	min-height: 80px;
	background: url(../img/display/footer.gif) #323232 repeat-x top center;
	border-top: 3px solid #fff;
}

body#about #footer {
	background: url(../img/display/enviro-footer.gif) #323232 repeat-x top center;
	border-top: 0;
}

#footer .wrapper {
	position: relative;
	padding-top: 35px;
}

body#about #footer .wrapper {
	padding-top: 40px;
}

#footer li {
	display: inline;
}

#footer .legal {
	position: absolute;
	right: 0;
	top:35px;
}

body#about #footer .legal {
	top:40px;
}

#footer a {
	color: #aaa;
}

#footer a:hover, #footer a:focus, #footer a:active {
	color: #eee;
}

#footer .cleanround {
	display: block;
	float: left; 
	clear: left;
	position: relative;
	top:-11px;
	left: -14px;
	width: 40px;
	height: 40px;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/display/cleanround-logo.png) transparent no-repeat 0 0;
}

/***************************************
Page specific
****************************************/

/***Home****************/

	body#home #bulk .g3 {
		margin-top: 40px;
		margin-bottom: 60px;
	}
	
	body#home .g3.padl {
		padding-left: 60px;
		width: 170px;
	}
	
	body#home .g3.padl ul {
		display: block;
		position: relative;
		top:1px;
	}
	
	body#home .g3.padl ul li {
		list-style-image: url(../img/display/bullet.gif);
		list-style-position: outside;
	}
	
	body#home .g3.padl h3 {
		color: #85ad50;
		position: relative;
		top:3px;
	}
	
	body#home #aside a {
		background: url(../img/display/brochure.png) no-repeat 0 0;
		height: 382px;
		width: 332px;
		width:inherit;
		position: relative;
		top:-25px;
		right: 50px;
		display: block;
		text-indent: -999em;
	}
	
	body#home .tier {
		margin-bottom: 60px;
		position: relative;
		top:-40px;
	}
	
	body#home .tier .more {
		position: relative;
		left: -5px;
	}
	
	body#home .tier .g6 img {
		border: 1px solid white;
		-moz-box-shadow:0 1px 2px #ddd;
		-webkit-box-shadow:0 1px 2px #ddd;
		display: block;
		position: relative;
		left: -10px;
		overflow: hidden;
	}
	
	body#home .tier .inside img {
		border: 5px solid white;
	}

/***About***************/

	body#about #bulk {
		margin-bottom:40px;
	}
	
	body#about #aside {
		margin-bottom: 80px;
	}
	
	body#about #aside img {
		position: relative;
		display: block;
		left: -40px;
		top:5px;
		border: 3px solid white;
		-moz-box-shadow:0 3px 3px #ddd;
		-webkit-box-shadow:0 3px 3px #ddd;
		z-index: 1;
	}
	
	body#about #content h2 {
		color: #85ad50;
		font-size: 24px;
		margin-top: 40px;
		overflow: visible;
		position: relative;
		padding-bottom: 3px;
		bottom: -3px;
	}
	
	body#about #mid_tier {
		padding-bottom: 10px;
		position: relative;
		left: -12px;
	}
	
	body#about #mid_tier h3 {
		color: #333;
		font-size: 20px;
		margin-top: 34px;
		overflow: visible;
		position: relative;
		padding-bottom: 3px;
		bottom: -6px;
		clear: both;
	}
	
	body#about #mid_tier ul li {
		list-style-image: url(../img/display/bullet.gif);
		list-style-position: outside;
	}
	
	body#about #mid_tier h2.duotech {
		color: #4289CB;
	}
	
	.above {
		position: absolute;
		bottom:0px;
		left: -15px;
		z-index: 2;
	}
	
	.above h4 {
		text-indent: -999em;
		background: url(../img/display/arrows.png) transparent no-repeat 0 0;
		height: 40px;
		width: 160px;
		overflow:hidden;
		display: block;
		position: relative;
		left: -45px;
	}
	
	.above span {
		color: #fff;
		font-size: 14px;
		line-height: 20px;
		width: 60%;
		font-weight: 600;
		display: block;
		text-shadow: 0 1px 1px rgba(0,0,0,0.8);
		position: relative;
		top:-10px;
	}

/***Products***************/

	body#products #gallery {
		width: 800px;
		margin: 30px 0 40px 50px;
		display: block;
	}
	
	body#products #gallery li a {
		display: block;
		opacity:0.8;
		-webkit-transition: all 0.15s ease-out;
	}
	
	body#products #gallery li a img {
		display: block;
		width: 140px;
		margin: 0 auto;
	}
	
	body#products #gallery li a:hover, body#products #gallery li a:focus, body#products #gallery li a:active {
		opacity:1;
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
	}
	
	body#products #bulk ul li {
		list-style-image: url(../img/display/bullet.gif);
	}
	
	.shift {
		position: relative;
		right: -26px;
	}
	
	body#products #aside h3 {
		width: 175px;
		height: 175px;
		text-indent: -999em;
		background: url(../img/display/badge.gif) transparent no-repeat 0 0;
		position: relative;
		top:-10px;
		right: -40px;
	}
	
	body#products .rev {
		position: relative;
		margin-top: -40px;
		margin-bottom: 60px;
	}
	
	body#single_product h1 {
		margin-bottom: 40px;
	}
	
	body#single_product h1 > span {
		display:block;
		line-height:20px;
	}
	
	body#single_product p, body#products #bulk ul {
		padding-left: 40px;
	}
	
	body#single_product #aside img {
		display: block;
		position: relative;
		margin-top:-20px;
		margin-bottom: 40px;
	}
	
	body#single_product #bulk hr {
		width: 460px;
		position: relative;
		left: -80px;
	}
	
	.more {
		display: block;
		position: relative;
		left: 26px;
		text-indent: -999em;
		background: url(../img/display/arrows.png) transparent no-repeat 0 -40px;
		height: 40px;
		width: 160px;
		overflow:hidden;
		margin-top: 28px;
		margin-bottom: 40px;
	}
	
	.more:hover, .more:focus, .more:active {
		background-position: 0 -80px;
	}
	
	#scrobbler {
		margin: 30px 0 100px 0;
		position: relative;
		left: -20px;
		width: 410px;
	}
	
	body#home #scrobbler {
		margin: 0;
		margin-top: 40px;
		left: 0;
		width: 250px;
	}
	
	#scrobbler li a, .galler li a, body#home #scrobbler li a {
		border: 1px solid #eee;
		display: block;
		opacity:0.7;
		-moz-box-shadow:0 1px 2px #ddd;
		-webkit-box-shadow:0 1px 2px #ddd;
		-webkit-transition: all 0.15s ease-out;
	}
	
	body#home #scrobbler li a {
		margin-bottom: 10px;
	}
	
	#scrobbler li a:hover, #scrobbler li a:focus, #scrobbler li a:active, #scrobbler li.current a,
	.galler li a:hover, .galler li a:focus, .galler li a:active {
		opacity:1;
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
	}
	
	#scrobbler li a img, .galler li a img, body#home #scrobbler li a img {
		display: block;
		overflow: hidden;
		width: 68px;
		height: 69px;
	}
	
	#product_info {
		clear: both;
		position: relative;
		top: 20px;
		margin-bottom: 60px;
	}
	
	#container {
		position: relative;
		margin-bottom: 160px;
	}
	
	#container h4 {
		position: relative;
		width:200px;
		color: #4289cb;
		font-size: 22px;
		text-shadow:0 -1px 0 #aaa, 0 1px 0 #fff;
	}
	
	#container li {
		color: #555;
		margin-bottom: 3px;
	}
	
	#container ol {
		list-style-type: none;
	}
	
	#container ol li {
		list-style-image: url(../img/display/bullet.gif);	
	}
	
	
/***Science***************/
	#the_science {
		background: url(../img/display/science.jpg) #f6f6f6 no-repeat 70% -60px;
	}

	#science {
		clear: both;
	}
	
	#science h1 {
		margin-bottom: 40px;
	}
	
	#science #sub_nav {
		display: block;
		position: relative;
		left: -5px;
		top:-4px;
	}
	
	#science #sub_nav li {
		font-size: 18px;
		margin-bottom: 2px;
		padding-bottom: 1px;
	}
	
	#science .last li  {
		background: url(../img/display/pdf.png) transparent no-repeat 0 -2px;
		text-indent: 20px;
		margin-bottom: 2px;
	}
	
	#science img {
		border: 1px solid white;
		-moz-box-shadow:0 1px 2px #ddd;
		-webkit-box-shadow:0 1px 2px #ddd;
		display: block;
	}
	
	#science .inside img {
		border: 5px solid white;
	}
	
	.tier {
		margin-top: 11px;
		clear: left;
	}
	
	.tier.last {
		margin-top: 40px;
		margin-bottom: 60px;
	}
	
	.tier.col {
		margin-bottom: 80px;
		padding-left: 89px;
		border-left: 1px solid #ddd;
	}
	
	.tier.col h3 {
		color: #85ad50;
		font-size: 26px;
		line-height: 20px;
		margin-bottom: 40px;
		position: relative;
		left: 18px;
	}
	
	body#the_science .col .g3 {
		width:200px;
		padding:0 10px;
	}
	
	.unit {
		position: relative;
	}
	
	.unit span {
		background: url(../img/display/power.gif) transparent no-repeat 0 0;
		display: block;
		position: absolute;
		z-index: 3;
		height: 200px;
		width: 280px;
		left: -50px;
		top:-40px;
	}
	
	.unit table {
		font-size: 12px;
		display: block;
	}
	
	.unit table td {
		width:220px;
		padding: 2px 3px;
		text-indent: 5px;
		color:#555;
		text-shadow: 0 1px 1px #fff;
	}
	
	/*define in jquery for IE but this is our fallback*/
	.unit table tr:nth-child(2n+1) {
		background: #dae7f5;
	}
	
	body#the_science .unit table tr:last-child {
		background: #fbbb83;!important
	}
	
	.unit table tr.top {
		background: #ddd;
	}
	
	.unit table tr.top td {
		padding: 5px 10px;
		text-indent: 0;
		font-weight: normal;
		font-weight: 600;
	}
	

/***Media***************/
	
	body#media #aside a {
		background: url(../img/display/brochure.gif) no-repeat 0 0;
		height: 382px;
		width: 332px;
		width:inherit;
		position: relative;
		top:-50px;
		display: block;
		text-indent: -999em;
	}
	
	body#media #bulk hr {
		width: 80%;
		margin-top: 30px;
		clear: both;
		position: relative;
		left:-60px;
	}
	
	body#media #bulk h2, body#media #bulk h3, body#media div#pre_footer h4 {
		color: #85ad50;
		font-size: 20px;
		margin-top: 40px;
		overflow: visible;
		position: relative;
	}
	
	body#media #bulk h3 {
		margin-top: 30px;
		clear: both;
	}
	
	body#media #bulk li {
		background: url(../img/display/pdf.png) transparent no-repeat 0 -2px;
		text-indent: 20px;
		margin-bottom: 2px;
	}
	
	body#media div#pre_footer {
		margin-bottom: 80px;
		position: relative;
		top:-40px;
	}
	
	body#media div#pre_footer .galler li {
		margin-bottom: 10px;
	}
	
	body#media div#pre_footer h4 {
		position: relative;
		left: 40px;
		top:40px;
		z-index: 4;
		text-indent: -999em;
		background: url(../img/display/arrows.png) transparent no-repeat 0 -120px;
		height: 40px;
		width: 160px;
		overflow:hidden;
	}
	
	body#media .vid {
		height: 210px;
		background: url(../img/display/movie-holder.png) transparent no-repeat 0 0;
		text-indent: -999em;
	}
	
	body#media #bulk .last {
		margin-bottom: 60px;
	}
	
/***Contact***************/
	
	body#contact #header {
		-moz-box-shadow:0 3px 3px #222;
		-webkit-box-shadow:0 3px 3px #222;
		z-index: 2;
	}
	
	body#contact #content {
		margin-top: 30px;
		margin-bottom: 60px;
	}
	
	#google-map {
		height:25%;
		z-index:0;
		top:-5px;
		position: relative;
		border-bottom: 1px solid #fff;
	}
	
	#google-map .gmnoprint ul li {
		font-size: 12px;
		color: #555;
	}
	
	body#contact h3 {
		font-size: 22px;
		margin-top: 40px;
	}
	
	#contact-wrapper {
		border:1px solid #e2e2e2;
		background:#f1f1f1;
		padding:20px;
		position: relative;
		left: -20px;
	}
	
	#contact-wrapper div {
		clear:both;
		margin:1em 0;
	}
	
	#contact-wrapper label {
		display:block;
		float:none;
		font-size:14px;
		width:auto;
		color: #1a1a1a;
	}
	
	form#contactform input {
		border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
		border-style:solid;
		border-width:1px;
		padding:5px;
		font-size:16px;
		color:#333;
		width: 95%;
	}
	
	form#contactform textarea {
		font-family:Arial, Helvetica, sans-serif;
		font-size:100%;
		border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
		border-style:solid;
		border-width:1px;
		width: 95%;
		padding:5px;
	}
	
	form#contactform input[type="submit"] {
		width:160px;
		padding: 10px;
		background: #333;
		color: #eee;
		border: 0;
		cursor: pointer;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}
	
	form#contactform input[type="submit"]:hover {
		background: #1a1a1a;
	}
	
	body#contact #aside {
		padding-top: 70px;
	}
	
	#contact_ways {
		display: block;
		margin-bottom: 40px;
	}
	
	#contact_ways li {
		display: block;
		font-size: 12px;
		padding: 3px;
		margin-bottom: 10px;
		position: relative;
		clear: left;
	}
	
	#contact_ways li cite {
		display: block;
		height: 24px;
		width: 24px;
		margin-right: 12px;
		float: left;
		position: relative;
		top: -4px;
	}
	
	.address cite, .email cite, .skype cite, .phone cite {
		background: url(../img/display/icons.png) transparent no-repeat 0 -999em;
	}
	
	.address cite {background-position: 0 0;}
	.email cite {background-position: 0 -25px;}
	.phone cite {background-position: 0 -50px;}
	.skype cite {background-position: 0 -75px;}

/***Partners***************/	
	
	body#partners h1 > span {
		display: inline;
	}
	
	#partnerss {
		margin-top: 40px;
	}
	
	#partnerss li {
		padding: 10px 0;
		margin-bottom: 19px;
		border-bottom: 1px solid #ddd;
	}
	
	#partnerss li ol li, #partnerss ul li {
		padding: 0;
		margin-bottom: 0;
		border-bottom: 0;
		list-style-type: disc;
	}
	
	#partnerss h2 {
		font-size: 26px;
		list-style: 20px;
		padding-top: 3px;
		margin-bottom: 10px;
	}
	
	#partnerss h4 {
		font-size: 18px;
		margin-bottom: 5px;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	
	#partnerss .site {
		display: block;
		margin-bottom: 10px;
	}


/*******Tooltips************************/

#tooltip{
	position:absolute;
	background:rgb(255,255,255);
	background:rgba(255,255,255,.96);
	padding:1em;
	font-size: 12px;
	line-height: 16px;
	color:#666;
	text-align: center;
	display:none;
	text-transform: uppercase;
	font-weight: 800;
	border: 1px solid #ddd;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow:0 3px 3px #ddd;
	-webkit-box-shadow:0 3px 3px #ddd;
}


/***************************************
Useful tit-bits
****************************************/

.last {
	margin-right: 0;
}

.height_fix {
	height: 1%;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.relative {
	position: relative;
}

.clear_left {
	clear:left;
}

hr {
	height: 0;
	border: 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #fff;
	clear:both;
}

/***************************************
Housekeeping
****************************************/

#skipLink {
	display:block;
	position:absolute;
	top:0;
	left:-999px;
	height:20px;
	padding:10px 20px;
	background:white;
}

#skipLink:focus, #skipLink:active {
	left: 0;
}

/*Nice jquery fade in. Class added in global.js*/
.none {
	display:none;
}

html {
	image-rendering: -moz-crisp-edges;
}


img  { 
	image-rendering: optimizeQuality;  -ms-interpolation-mode: bicubic; 
}

/* applies to GIF images only */
img[src$=".gif"] { 
	image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor; 
}

a {
	overflow: hidden;
}


/************Intrinsic ratios for video*/

.videoWrapper {
	position: relative;
	height: 0;
}

* html .videoWrapper {
	margin-bottom: 45px;
	margin-bot\tom: 0;
}

.videoWrapper div,
.videoWrapper embed, 
.videoWrapper object {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.wideScreen {
  padding-bottom: 56.25%;
}

.fourBYthree {
  padding-bottom: 75%;
}

.chrome_25 {
  padding-top: 25px;
}

.chrome_35 {
  padding-top: 35px;
}