/*
Theme Name: NuWhirl Systems
Theme URI: http://nuwhirl.com/
Description: Custom designed and developed theme for NuWhirl
Version: 1.0
Author: Thom Meredith
Author URI: http://thommeredith.com/
*/

@import"css/reset.css";

/* Colors */

/*********************/
/** COLOR USAGE **/
/*********************/
#footer {
	background-color: #acc2df;}
	
#footer p, #footer a, #footer h1, #collections h2 a, .products #section2 h2 {
	color: #ffffff;}

/* yellow */	
.more a, #mnav li:hover a, #snav a:hover, #systems a:hover, #group h6:hover, #collections .currind a, #breadcrumb .selected a:hover, #breadcrumb a:hover, #collections h2 a:hover, #collections .currind h2 a, .page a:hover {
	color: #f7c208}

/* blue */	
#mnav .selected a, #snav .selected .selected a, #snav .current_page_item a, #breadcrumb .selected, td a, .products #section2 a:hover, .products #product1 h2, #productnav .selected a, #skuform label, #getsku span.set, .page a {
	color: #6799c8;}
	
.slide .desc h2, .mainsection .desc h2, #mnav a, #mnav li li:hover a, #mnav li:hover li:hover a, #snav .selected a, #group p, #group h3, #breadcrumb a, table, td a:hover, .products #section2 a, .products h6, #lightbox h6, #productnav h3, #productnav li a:hover, .products .rightCol #product2 .col1 .selected a, .products .rightCol #product2 #specs li, .products .rightCol #product2 #specs p, .products .rightCol #product2 #installation li, .products .rightCol #product2 #installation p, .products .rightCol #product2 #additional-info li, .products .rightCol #additional-info #installation p, #group h6,  .page h1, .page h2  {
	color: #717073;}

/* 50% K */
.slide .desc p, .mainsection .desc p, .textbox h3, #mnav li:hover li a, #mnav li li a, #systems h3 a, #snav a, #snav .selected li a, p, li, #productnav li a, .products .rightCol #product2 .col1 li a, .products .rightCol #product2 .col2 a, #getsku h3, #getsku span, .removelightbox {
	color: #939598;}
	
.leftCol {
	background-color: #e6e7e8;}
	

/*********************/
/** TYPOGRAPHY **/
/*********************/
body {
	font-family: Arial, Univers, Helvetica, sans-serif;}
	
p, #skuform label {
	font-size: 1.2em;
	line-height: 1.333em;}
	
p a {
	font-size: 1em;
	line-height: 1.333em;}
	
a {
	text-decoration: none;}
	
.more {
	font-weight: bold;}

#mnav li {
	font-size: 1.3em;}
	
#mnav li li {
	font-size: .857em;}
	
#footer h1 {
	font-size: 1.6em;}
	

.slide .desc h2, .mainsection .desc h2, #collections h2, #snav a, #systems h3, #group h3, .tableCol1, .tableCol2, .tableCol3, .tableCol4, .page h1, .page h2 {
	font-size: 2.5em;
	line-height: 1em;}
	
#snav li li a, #productnav li a {
	font-size: 1.2em;
	line-height: 1.2em;}
	
.products #section2 h2, .products #product1 h2, #productnav h3, #getsku h3, .hasjs .products #product2 .col2 #getsku span {
	font-size: 2.5em;
	line-height: 1.2em;}
	
.hasjs .products #product2 .col2 #getsku span { 
	list-style: none;}

#getsku span, .removelightbox {
	text-transform: uppercase;}
	
.slide .desc p, .mainsection .desc p {
	font-size: 1.1em;
	line-height: 1.272727em;}
	
.slide .desc a, .mainsection .desc a {
	font-size: 1.27272727em;}
	
.textbox h3 {
	font-size: 1.5em;
	line-height: 1.375em;}
	
.textbox .more {
	font-size: 1.4em;}
	
#pnav a, td, .products .rightCol #product2 .col1 li a, .removelightbox {
	font-size: 1.2em;}
	
#breadcrumb li {
	font-size: 1.1em;}
	
#breadcrumb li a {
	font-size: 1em;}
	
h6 {
	font-size: 1.2em;
	font-weight: bold;}
	
.products h6, #lightbox h6 {
	font-weight: normal;}
	
.products #colors li p, #lightbox p{
	font-size: 1.0em;
	line-height: 1.2em;}
	
.hasjs .products #product2 .col2 li {
	font-size: 1.2em;
	list-style-type: disc;
}

.hasjs .products #product2 .col2 #installation li {
	list-style-type: decimal;
}


/*********************/
/** STRUCTURE **/
/*********************/

/* General */
.clearfloat{
	clear: both;}

/* Global */
body {
	background: #ffffff url(img/basic/nwbg.gif) repeat-x center 100px;}
	
#rap, #footerrap {
	margin: 0 auto;
	width: 960px;
	min-height: 400px;}

#rap {
	margin-bottom: 60px;}
	
#header {
	padding:34px 40px 60px 28px;
	height: 84px;}

#logo, #tagline {
	float: left;
	display: inline;}
	
#logo {
	margin-right: 16px;}
	
#tagline a {
	display: block;
	text-indent: -999em;
	background: transparent url(img/basic/tag.gif) no-repeat top left;
	height: 26px;
	width: 144px;
	margin-top: 20px;}
	
#searchform, #mnav, #pnav {
	display: block;
	float: right;}
	
#searchform .searchbox {
	background-color: #ffffff;
	border: 1px solid #939598;
	height: 12px;
	width: 120px;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	color: #717073;
	padding: 1px 3px 2px;
	float: left;
	display: inline;
	margin-right: 4px;}
	
/*\*/
html>body*.searchbox {padding: 3px 3px 2px; height: 11px;}
/**/
	
.searchbtn {
	float: left;
	display: inline;
	width: 21px;}
	
#searchform {
	margin-top: 20px;}
	
#mnav {
	clear: both;
	position: relative;
	z-index: 99;
	margin-top: 6px;}
	
#mnav ul, #pnav ul {
	float: right;}
	
#mnav li {
	float: left;
	display: block;
	margin-left: 21px;
	position: relative;
	padding-bottom: 10px;}

#mnav ul .subnav {
	display: block;
	width: 90px;
	position: absolute;
	left: -999em;
	top: 22px;}
	
#mnav ul ul {
	width: 100px;
	margin-left: -10px;
	padding: 0px 0px 14px;
	background: transparent url(img/basic/slidebg.png) repeat top left;}
	
#mnav ul li:hover .subnav {
	left: 0px;}
	
#mnav ul ul li {
	padding: 3px 0px 3px 12px;
	width: 88px;
	margin-left: 0px;}
	
#mnav ul ul li:first-child {
	padding: 17px 0px 3px 12px;
	background: transparent url(img/basic/bar.gif) no-repeat 12px top;}	
	
#body {
	min-height: 493px;
	padding: 0px 0 0px 30px;
	width: 930px;}	
	
#footerrap{
	display: block;
}

#footerrap .container {
	padding:12px 35px 34px 45px;
	}
	
#pnav {
	margin-bottom: 42px;}
	
#pnav li {
	float: left;
	margin-left: 14px;}
	
#footer h1 {
	margin-bottom: 20px;}
	
#marketing, #catalog-download {
	float: left;
	display: inline;}
	
#marketing {
	width: 459px;
	margin-right: 133px;}
	
#catalog-download {
	width: 200px;}
	
#footer p {
	margin-bottom: 16px;}

#downloads td{
border-bottom: 1px solid #f1f1f1;
margin-bottom: 10px;
padding: 10px;
}

/* secondary pages*/

#breadcrumb {
	float: left;
	margin-top: -30px;
	}

#breadcrumb ul {
	border-left: 2px solid #f7c208;
	background-color: #ffffff;
	padding: 2px 10px 5px 13px;
	overflow: auto;
	margin-bottom: 12px;}
	
#breadcrumb li {
	float: left;
	display: inline;
	margin-right: 3px;}
	
#breadcrumb li:after {
	content: " /";}
	
#breadcrumb li:last-child:after {
	content: "";}
	
.leftCol, .rightCol {
	float: left;
	display: inline;}
	
.leftCol {
	clear: left;
	width: 160px;
	margin-right: 22px;
	padding: 11px 15px 11px 12px;
	min-height: 558px;
	margin-bottom:30px;}
	
.rightCol {
	width: 690px;
	padding-top: 11px;}
	
/* home */

#slider, #texts, #main, #collections {
	margin-left: 15px;}

.slide {
	clear: both;
	position: relative;
	width: 880px;
	height: 296px;
	margin-bottom: 21px;}
	
.slide .img, .slide .desc {
	position: absolute;}
	
.slide .img {
	top: 0px;
	left: 0px;}
	
.slide .desc {
	top: 25px;
	right: 25px;
	width: 243px;
	height: 210px;
	padding: 18px 20px 20px;
	background: transparent url(img/basic/slidebg.png) repeat top left;}
	
.slide .desc h2 {
	margin-bottom: 15px;}
	
.slide .desc p {
	margin-bottom: 15px;}
	
#texts {}
	
.textbox {
	float: left;
	padding-top: 16px;
	background: transparent url(img/basic/bar.gif) no-repeat top left;
	width: 256px;
	height: 160px;
	margin-right: 40px;
	position: relative;}
	
#texts .last {
	margin-right: 0px;}
	
.textbox .more {
	position: absolute;
	left: 0px;
	bottom: 0px;}
	
/* collections */
.mainsection {
	position: relative;
	width: 880px;
	height: 296px;
	margin-bottom: 6px;}
	
.mainsection .img, .mainsection .desc {
	position: absolute;}
	
.mainsection .img {
	top: 0px;
	left: 0px;}
	
.mainsection .desc {
	top: 25px;
	right: 25px;
	width: 243px;
	height: 210px;
	padding: 18px 20px 20px;
	background: transparent url(img/basic/slidebg.png) repeat top left;}
	
.mainsection .desc h2 {
	margin-bottom: 15px;}
	
.mainsection .desc p {
	margin-bottom: 15px;}
	
#collections {
	width: 890px;
	margin-top: -12px;}
	
#collections .section {
	position: relative;
	float: left;
	display: inline;
	margin-right: 5px;
	width: 290px;
	padding-top: 12px;}
	
#collections .currind {
	background: transparent url(img/basic/collections-arrow.png) no-repeat top center;}
	
#collections .img {
	overflow: hidden;
	width: 290px;
	height: 215px;}
	
#collections .img img {
	width: 290px;}
	
#collections h2 {
	position: absolute;
	top: 24px;
	left: 12px;}
	
/* groups + systems */
.systems #rap {
	margin-bottom: 40px;}
	
.groups #rap {
	margin-bottom: 35px;}

#systems li {
	float: left;
	display: inline;
	width: 166px;
	margin: 0px 6px 20px 0px;}
	
#group h3 {
	margin-bottom: 15px;
	clear: left;}
	
#systems h3 {
	clear: left;}
	
#systems h3 img {
	margin-top: 12px;}
	
#snav li {
	padding-bottom: 10px;
	background: transparent url(img/basic/bar-sm.gif) no-repeat bottom left;
	margin-bottom: 10px;
	width: 162px;
	padding-right: 20px;}
	
#snav li ul {
	padding-top: 6px;}

#snav li li{
	padding-bottom: 0px;
	background: none;
	margin-bottom: 0px;}
	
#group li {
	float: left;
	display: inline;
	width: 224px;
	margin-right: 6px;
	margin-bottom: 25px;}

#group .desc {
	padding: 5px 0px;
	background-color: #ffffff;
	display: block;
	}
	
#group h6 {
	padding-bottom: 9px;
	background: transparent url(img/basic/bar-sm.gif) no-repeat bottom left;
	margin-bottom: 11px;
	line-height: 16px;}
	
/* Products + Kits */
.products #section1 {
	background: transparent url(img/basic/section1-bg.gif) repeat-y top left;
	margin-bottom: 15px;
	clear :left;}
	
.products #section2 {
	background: transparent url(img/basic/required-bg.gif) repeat-y top left;}

.products .leftCol {
	width: 165px;
	margin-right: 0px;
	padding-right: 30px;}
	
#productnav ul {
	margin-top: 14px;}
	
#productnav li {
	margin-top: 9px;
	padding-bottom: 3px;
	display: block;
	background: transparent url(img/basic/bar-sm.gif) no-repeat bottom left;}
	
.groups #snav .selected a, #productnav .selected a, .service #snav .selected a, #snav .current_page_item a {
	background: transparent url(img/basic/leftnav-arrow.png) no-repeat right 7px;
	width: 172px;
	padding-right: 10px;
	display: block;}
	
#productnav .selected a {
	width: 177px;}
	
.groups #snav .selected li a, .products #snav .selected li a {
	background-image: none;}
	
.products .rightCol {
	width: 685px;
	padding-top: 0px;}
	
.products .rightCol #product1 {
	margin-bottom: 15px;
	background-color: #ffffff;}
	
.products .rightCol .col1, .products .rightCol .col2 {
	float: left;
	display: inline;}
	
.products .rightCol #product1 .col1 {
	width: 175px;
	padding: 11px 15px;}

.products .rightCol  #product1 .col2 {
	width: 480px;}
	
.products .rightCol  #product1 .col1 p {
	margin-top: 14px;} 

.products .rightCol #product2 {
	background: transparent url(img/basic/spec-bg.gif) repeat-y top left;}
	
.products .rightCol #product2 .col1 {
	width: 186px;
	padding: 15px 15px;}
	
.products .rightCol #product2 .col1 li {
	background: transparent;
	padding-bottom: 17px;
	margin-bottom: 16px;
	background: transparent url(img/basic/bar-sm.gif) no-repeat bottom left;
	width: 197px;}
	
.products .rightCol #product2 .col1 li a {
	display: block;}
	
.products .rightCol #product2 #specs, .products .rightCol #product2 #additional-info {
	margin-left: 12px;}
	
.products .rightCol #product2 #installation {
	margin-left: 18px;}
	
.products .rightCol #product2 .col2 li{
	padding-bottom: 6px;}

.products .rightCol  #product2 .col2 {
	width: 469px;} 
	
.products h6 {
	margin: 4px 0 2px;}

.products .rightCol .section {
	padding: 15px 5px;}

#colors li {
	width: 41px;
	margin-right: 10px;
	float: left;
	display: inline;}
	
.products #section1 .leftCol, .products #section2 .leftCol{
	background-color: transparent;
	min-height: 100px;}
	
.products #section2 .leftCol{
	background: transparent url(img/basic/yellow-arrow.gif) no-repeat 195px 56px;}

.products #section2 .rightCol{
	padding-top: 15px;}
	
.products #section2 .rightCol li{
	float: left;
	width: 161px;
	margin-right: 9px;
	padding-bottom: 12px;}
	
.products #section2 .rightCol li .img{
	padding-bottom: 4px;
	}
.products #section2 .rightCol li .img img{
max-width: 161px;
}	
	
/* SKU Form*/
#skuform {
	display: block;
	margin-top: 20px;
	overflow: visible;}
	
#skuform div {
	width: 213px;
	float: left;
	margin-right: 16px;
	display: inline;
	border-top: 1px solid #939598;
	border-bottom: 1px solid #939598;
	padding: 10px 0px 11px;
	margin-top: -1px;}
	
#skuform label, #skuform select {
	float: left;
	display: inline;}
	
#skuform label {
	width: 119px;
	margin-right: 10px;
	padding-top: 1px;}
	
#skuform select {
	width: 81px;}
	
#getsku {
	clear: both;
	padding: 36px 0px 0px;}
	
#getsku h3 {
	display: inline;
	float: left;}
	
#getsku h3 {
	margin-right: 30px;}
	
#getsku span {
float:left;}

#getsku div {
letter-spacing:0.3em;}

/* Service Page */
.tableCol1 {
	width: 131px;
	padding-right: 15px;
	padding-bottom: 15px;
	margin-bottom: 15px;}
	
.tableCol2 {
	width: 176px;
	padding-right: 15px;
	margin-bottom: 15px;}

.tableCol3 {
	width: 209px;
	padding-right: 15px;
	margin-bottom: 15px;}
	
.tableCol4 {
	width: 126px;
	margin-bottom: 15px;}
	
td {
	padding-bottom: 6px;}
	
/* Javascript-enabled */
.hasjs #slider {
	margin-bottom: 21px;}
	
.hasjs #main {
	position: relative;
	width: 880px;
	height: 296px;
	margin-bottom: 5px;}
	
.hasjs #main .mainsection {
	position: absolute;
	top: 0px;
	left: 0px;}
	
.hasjs #group li {
	position: relative;
	overflow: hidden;
	height: 155px;
	width: 224px;}

.hasjs #group #systems li {
	height: 173px;
}
	
.hasjs #group .desc{
	position: relative;
	top: 0;
	left: 0;}
	
.hasjs .products #product2 .col1 li a {
	height: 14px;
	padding-top: 1px;}

.products .rightCol #product2 .col1 .selected a {
	background: transparent url(img/basic/blue-arrow.gif) no-repeat bottom right;}
	
/* lightbox css*/

html, body {
	height: 100%;
}

#lightboxwall {
	height: 100%;
	width: 100%;
	background: transparent url(img/basic/lb.png) repeat top left;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;}

* html div#lightboxwall {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#lightbox {
	position: relative;
	margin: 100px auto 0px;
	padding: 10px 10px 12px;
	height: auto;
	width: 480px;
	overflow: visible;
	background: #ffffff;}
	
.loading {
	display: none;}
	
.removelightbox {
	float: right;
	margin-top: 6px;}
	
#lightbox .desc {
	float: left;
	margin-top: 6px;}
  


.pager {
	color: #939598;
 font-size: 1.2em;
}

.pageNum {
	color: #939598;
 font-size: inherit;
padding: 0 5px;
}

.firstPage {
	padding: 0 0 0 5px;
}


.currentPage {
	font-weight: bold;
}

.lastPage {
	padding: 0 5px 0;
}

.page h1, .page h2 {
	margin-bottom: 15px;
}

.page p {
	margin-bottom: 15px;
}


#attachments a, #sellsheet a, .download {
background: url(img/basic/pdf.png) no-repeat left;
display: block;
padding: 5px 20px;
}

#catalogs {
width: 600px;
overflow: hidden;}

#catalogs div {
width: 140px;
margin-left: 50px;
margin-bottom: 30px;
float: left;
text-align: center;
font-size: 12px;
height: 240px;
}

#catalogs img {
display: block;
margin-bottom: 20px;
}