@charset "UTF-8";
/* CSS Document */

/*-- EUROSTILE BOLD --*/

@font-face {
  font-family: e004045t;
  src: url("/_fonts/e004045tWeb.eot");
}

@font-face {
  font-family: e004045t;
  src: url("/_fonts/e004045tWeb.woff") format("woff");
}

/*-- EUROSTILE REGULAR --*/

@font-face {
  font-family: e004043t;
  src: url("/_fonts/e004043tWeb.eot");
}

@font-face {
  font-family: e004043t;
  src: url("/_fonts/e004043tWeb.woff") format("woff");
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

body
{
    font-family:e004045t, Helvetica, Arial, sans-serif;
    font-size: 65%;
    margin: 0;
    padding: 0;
	background:#5a5853 url(../images/gradient-background.jpg) repeat-y 50% top;
	color:#484848;
}


/*=====================================
         LINKS / FONT STYLES
=====================================*/

a {
	color:#487035;
}

h1 {
	font-family:e004045t, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-size:48px;
	margin-bottom:10px;
	font-weight:normal;
	line-height:41px;
}

h2 {
	font-family:e004045t, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-size:30px;
	font-weight:normal;
	line-height:30px;
}

h3 {
	font-family:e004043t, Helvetica, Arial, sans-serif;
	font-size:20px;
	font-weight:bold;
	line-height:20px;
	margin-bottom:5px;
	}

h4 {
	font-family:e004043t, Helvetica, Arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	line-height:15px;
	margin-bottom:5px;
	}
	
#content ul {
	font-size:13px;
	margin-bottom:8px;
}

#content ul li {
	margin-left:20px;
	padding:4px 0;
}

p {
	font-size:13px;
	margin-bottom:8px;
	line-height:20px;
}

p.caption {
	font-size:11px;
	font-style:italic;
}

p.button {
	background:#e8e8e8;
	border:1px solid #bdbdbc;
	margin-bottom:10px;
	font-family:e004045t, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-size:16px;
	text-align:right;
	width:200px;
}

p.button-wide {
	width:250px;
}

p.button a {
	color: #45423c;
	padding:10px 20px 10px 0;
	margin-right:10px;
	text-decoration:none;
	display:block;
	background:url(../images/left-nav-arrow.png) no-repeat right 50%;
}

p.button a:hover {
	color: #74716c;
}

img.border {
	border-top:1px solid #bdbdbc;
	border-left:1px solid #bdbdbc;
	border-right:1px solid #bdbdbc;
}

/*=====================================
         GENERAL - INTERIOR
=====================================*/

#pattern {
	background:url(../images/pattern-background.png) repeat 0 0;
	min-height:100%;
	min-width:100%;
	position:absolute;
}

#header {
	width:960px;
	height:75px;
	margin:0 auto;
}

#header .logo {
	padding:15px;
	float:left;
}

#header .logo a {
	background:url(../images/pneuscrew-logo.png) no-repeat 0 0;
	display:block;
	width:245px;
	height:42px;
	text-indent:-9000px;
}

#header .secondary-navigation {
	float:right;
	font-family: e004043t, Helvetica, Arial, sans-serif;
	font-size:13px;
}

#header .secondary-navigation ul {
		background:#4b4843 url(../images/pattern-background.png) repeat 0 0;
		overflow:auto;
		padding:5px 10px;
}

#header .secondary-navigation ul li {
	float:left;
	list-style:none;
	margin-right:15px;
}

#header .secondary-navigation ul li a {
	display:block;
	color:#b5b3ac;
	text-decoration:none;
    padding:5px;	
}

#header .secondary-navigation ul li a.where-to-buy {
	color:#fcb31c;
	background:url(../images/secondary-nav-arrow.png) no-repeat 0 50%;
	padding-left:10px;	
}

#header .secondary-navigation ul li a:hover {
	color:#fff;
}

#wrapper {
	background:#dededb url(../images/gray-pattern-background.png) repeat 0 0;
    width:100%;
	position:relative;
	
	-moz-box-shadow:0 6px 12px -4px #000;
	-webkit-box-shadow:0 6px 12px -4px #000;
	box-shadow: 0 6px 12px -4px #000;
}

#container {
	background:url(../images/gradient-background-container.jpg) repeat-y right 0;
	width:960px;
	margin:0 auto;
	position:relative;
	overflow:auto;
}

#container-left {
	width:205px;
	float:left;
	position:relative;
	min-height:100px;
}

#container-left .left-nav {
	padding:30px 10px 0 10px;
}

#container-left .left-nav ul li {
	background:#e8e8e8 url(../images/gray-pattern-background.png) repeat 0 0;
	border:1px solid #bdbdbc;
	list-style:none;
	margin-bottom:10px;
	font-family:e004045t, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-size:16px;
	text-align:right;	
	
}

#container .left-nav ul li a {
	color: #45423c;
	padding:10px 20px 10px 0;
	margin-right:10px;
	text-decoration:none;
	display:block;
	background:url(../images/left-nav-arrow.png) no-repeat right 50%;
}

#container .left-nav ul li a:hover {
	color: #74716c;
}

#content {
	background:url(../images/interior-content-background.jpg) repeat-y 0 0;
	width:715px;
	min-height:350px;
	float:left;
	padding:20px;
	overflow:hidden;
}

#content #feature-image {
	margin:-20px -40px 10px -20px;
	position:relative;
}

#content #feature-image img {
	border:6px solid #4b4843;
}

#content #feature-image .no-border {
	border:none;
}

#content #feature-image .feature-headline {
	position: absolute;
	bottom: -308px;
	left: 5px;
	z-index: 1000;
	color: #fff;
	width: 698px;
	
}

#content #feature-image .feature-headline h1 {
	background:url(../images/interior-h1-background.png) repeat-x 0 0;
	float:left;
	height:46px;
	padding:11px;
	
}

#content #feature-image .feature-headline .headline-end {
	background:url(../images/interior-h1-angle-end.png) no-repeat 0 0;
	float:left;
	display:block;
	height:68px;
	width:21px;	
}

#content #product {
	overflow:auto;
	padding-bottom:10px;
	margin:20px 0;
	border-bottom:2px dashed #cecece;
}

#content #product .product-image {
	width:230px;
	height:200px;
	float:right;
	background:#bebebe;
	padding:2px;
	border:4px solid #d9d9d9;
	margin:0 0 10px 10px;
}

.yellow-line-divider {
	background:url(../images/bottom-lines.png) repeat-x 0 0;
	width:100%;
	height:65px;
	position:relative;
	margin-bottom:20px;
	overflow:auto;
	z-index:-1;
}

#footer-wrapper {
	background:#423f39 url(../images/pattern-background.png) repeat 0 0;
	width:100%;
	color:#fff;
	text-align:center;
	padding:20px 0;
	bottom:0;
	position:absolute;
}

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

#footer a {
	color:#fcb31c;
}

/*=====================================
               TABLES
=====================================*/

.no-left-nav table tbody tr.fifteen-degree {
	background:#fff8e6;
}

.no-left-nav table tbody tr.twenty-twenty-two-degree {
	background:#f8e7ea;
}

.no-left-nav table tbody tr.thirty-four-degree {
	background:#e4f6f6;

}

.no-left-nav table {
	border:1px solid #666;
	text-align:center;
}

.no-left-nav table tr th {
	font-family:e004043t, Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#fff;
	background:#636464;
	font-size:13px;
	padding:8px 0;
	width:80px;
}

.no-left-nav table tr td {
	padding:10px 5px;
	vertical-align:top;
	border-right:1px dotted #999;
}

.no-left-nav table tr td.image {
	vertical-align:middle;
	padding:10px;
}

.no-left-nav table tr.no-border td {
	padding:0;
	border-right:none;
}

/*=====================================
        INTERIOR - NO LEFT NAV
=====================================*/

.no-left-nav #content {
	background:url(../images/interior-content-no-left-nav.jpg) repeat-y 0 0;
	width:920px;
	padding:20px;
}

/*=====================================
               HOMEPAGE
=====================================*/

.home #wrapper {
	height:570px;
}

.home #container {
	height:530px;
	overflow:visible;
	
	-moz-box-shadow:
        inset -8px 0 6px -6px #000;
    -webkit-box-shadow:
        inset -8px 0 6px -6px #000;
    box-shadow:
        inset -8px 0 6px -6px #000;

}

.home #container-left {
	height:570px;
}

.home #container-left .screw {
	background:url(../images/feature-screw.png) no-repeat 0 0;
	width:61px;
	height:445px;
	position:absolute;
	top:-25px;
	left:60px;
}

.home #container-left .screw-them-out {
	background:url(../images/screw-them-out.png) no-repeat 0 0;
	width:59px;
	height:340px;
	position:absolute;
	bottom:0;
	right:20px;
}

.home #container-left .drive-them-in {
	background:url(../images/drive-them-in.png) no-repeat 0 0;
	width:43px;
	height:179px;
	position:absolute;
	top:0;
	left:10px;
}

.home #container-left .heads {
	position: absolute;
	bottom: 20px;
	left: 13px;
}

.home #container-left .heads .degree {
	width:75px;
	height:75px;
	display:block;
	text-indent:-9000px;
	float:left;
	margin-right:20px;
}

.home #container-left .heads .fifteen {
	background:url(../images/15-degree.png)
}

.home #container-left .heads .twenty-one {
	background:url(../images/21-degree.png)
}

.home #content {
	background:url(../images/content-background.jpg) repeat-y 0 0;
	width:380px;
	height:530px;
	padding-right:50px;
}

.home #content .probuilder {
	margin:0 auto;
	width:165px;
	padding-top:15px;
}

.home #ad-right {
	background:url(../images/pattern-background.png) repeat 0 0;
	width:305px;
	height:570px;
	float:right;
	position:relative;
	
	-moz-box-shadow:
        inset 8px 0 6px -6px #000;
    -webkit-box-shadow:
        inset 8px 0 6px -6px #000;
    box-shadow:
        inset 8px 0 6px -6px #000;
}

.home #ad-right h2 {
	font-family: e004043t, Helvetica, Arial, sans-serif;
	font-weight:normal;
	color:#fff;
	padding:12px 40px;
	line-height:25px;
	font-size:25px;
	width:200px;
	text-transform:none;
}

.home #ad-right .fastening-revolution {
	background:url(../images/fastening-revolution.png) no-repeat 0 0;
	width:342px;
	height:401px;
	position:absolute;
	bottom:0;
	right:0;
	text-indent:-9000px;
}

.home .homelink {
	display:none;
}

/*=====================================
              NAVIGATION
=====================================*/

#navigation-wrapper {
	background:url(../images/navigation-wrapper-background.jpg) repeat-x 0 0;
	width:100%;
	position:static;
	height:55px;
}

#navigation {
	font-family:e004043t, Helvetica, Arial, sans-serif;
	font-size:1.4em;
	position:relative;
	width:960px;
	margin:0 auto;
	z-index:1;
}

ul.topnav {
	float:right;
}  

ul.topnav li {    
	float:left;
	position:relative;
	list-style:none;
	
}

ul.topnav li :hover{
	-moz-box-shadow:0 0 10px -2px #000000 inset;
	-webkit-box-shadow:0 0 10px -2px #000000 inset;
	box-shadow: 0 0px 10px -2px #000000 inset;
}  

ul.topnav li a {
	height:37px;
	width:auto;	
	padding:18px 10px 0 10px;
	display:block;
	font-weight:bold;
	text-decoration:none;
	color:#fcb31c;
}

ul.topnav li .slash {
	padding-left:5px;
}

ul.topnav li .slash {
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

ul.topnav li a:hover {
	color:#fff;  
}

ul.topnav li ul.subnav {  
	list-style: none;  
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
	left: 0; 
	background: #4b4843 url(../images/pattern-background.png) repeat 0 0;  
	margin: 0; padding: 0;     
	width: 200px;
	display:none;
	text-align:left;
	
	-moz-box-shadow:0 6px 6px -2px #000000;
	-webkit-box-shadow:0 6px 6px -2px #000000;
	box-shadow: 0 6px 6px -2px #000000;
	
}  

ul.topnav li ul.subnav li{  
	margin: 0; padding: 0;  
	float:left;
}
 

ul.topnav li ul.subnav li a {  
	float: left;  
	padding: 7px 20px;
	width:160px;
	font-weight:normal;
	height:auto;
} 

/*=====================================
             VIDEO GALLERY
=====================================*/

.video-wrapper {
	float:left;
	width:195px;
	padding:10px;
	text-align:center;
	background:#e1e1e1;
	border:1px solid #bdbdbc;
	margin:20px 20px 0 0;
}

.video-wrapper img {
	border:5px solid #f6f6f6;
}

.video-wrapper h2 {
	font-size:1.7em;
	font-family:e004043t, Helvetica, Arial, sans-serif;
	line-height:1.3em;
	text-transform:none;
}

.video-wrapper p.button {
	width:100px;
	margin:0 auto;
	text-align:left;
	margin-top:15px;
}

.video-wrapper p.button a {
	padding:5px 10px;
}


/*=====================================
               SITEMAP
=====================================*/

.sitemap .column {
	float:left;
	width:50%;
}

.sitemap #content ul .heading {
	font-weight:bold;
	text-transform:uppercase;
}

.sitemap #content ul .heading ul {
	text-transform:none;
	font-weight:normal;
}

.sitemap #content ul .heading ul a {
	text-decoration:none;
}

.sitemap #content ul li {
	padding:3px 0;
}


/*=====================================
        WHERE TO BUY/CONTACT US
=====================================*/
	#htbForm, #conForm {
		font-size:13px;
	}
	
	#HowToBuyControl_tblResults {
		border-spacing:0;
		border-collapse:collapse;
	}
	
	#htbForm .step-image {
		display:none;
	}
	
	#conForm table tbody tr td {
		padding:3px 8px 3px 0;
	}
	
	#HowToBuyControl_tblResults thead tr th {
		text-align:left;
		font-size:1.4em;
		border-bottom:1px solid #bdbdbc;
	}
	
	#HowToBuyControl_tblResults tr td {
		padding:10px 20px 15px 0;
		border-bottom:1px solid #bdbdbc;
		border-spacing:10px 50px;
	}
	
	#htbForm span.product-label {
		font-size:1.3em;
		font-weight:bold;
		padding-bottom:4px;
	}
	
/*=====================================
            SAMPLE REQUEST
=====================================*/
	
.sampleRequest {
	width:680px;
	margin:0 auto;
}

#customForm {
	font-family:'e004043t',Georgia,Times,serif;
	color:#72655A;
	font-size:15px;
	width:680px;
	margin:0 auto;
}

#customForm .field-row, #customForm .field-column, #customForm .field-column-3 {
	padding-top:10px;
}

#customForm .field-row {
    float: left;
    clear: left;
    width: 100%;
}

#customForm .field-column {
    float: left;
	padding-right:10px;
}

#customForm .field-column-3 {
    float: left;
	padding-right:10px;
}

#customForm .field-column-3 #city {
	width:200px;
}

#customForm .field-column-3 #zipcode {
	width:131px;
}

#customForm .field-column #firstname, #customForm .field-column #lastname {
    width: 245px;
}

#customForm .field-row #email {
    width: 245px;
}

#customForm .field-row #company, #customForm .field-row #address  {
    width: 512px;
}

#customForm .field-row #phone  {
    width: 245px;
}
	
/*=====================================
            COST CALCULATOR
=====================================*/
#costcalcform{
	width:100%;
	position:relative;
}
#costcalc{
	padding:0;
	margin:0;
	list-style:none;
}
#costcalc li{
	padding:0 !important;
	margin:0 !important;
}
.costcalccol, .costcalccolnum{
	list-style:none;
	float:left;
}
.costcalccolnum{
	width:15%;
}
.costcalccol.right{
	float:right;
	width:30%;
	text-align:right;
}
.costcalccol.right input{
	float:right;
}
.costcalccol.right.units{
	float:right;
}
.costcalccol.right li{
	height:22px;
}
.costcalccol.right input{
	float:right;
	height: 24px;
	padding:0 0 0 3px;
	margin-top:-4px;
}
.costcalccol.info{
	width:70%;
}
.costcalccol li{
	height: 22px;
    margin: 0 !important;
    padding: 5px 0 0 !important;
}
.costcalccolnum li{
	padding:0 !important;
	margin:0 !important;
	text-align:center;
}
.costcalccolnum li:first-child{
	height: 45px;
    padding: 5px 5px 0 !important;
    text-align: center;
}
.costcalccol{
}
.costcalccol li:nth-child(even){
	background-color:#e9e9e9;
}
.costcalccol li:nth-child(odd){
}
.costcalccolnum li input {
    text-align: center;
    width: 100%;
	height: 21px;
}
.calcsectionheader{
	background-color: #484848;
    font-size: 14px;
    margin:5px 0;
    padding: 5px 0;
    text-align: center;
	color:#FFF;
}
.labelscolnum li:first-child{
	height: 45px;
    padding: 5px 5px 0 !important;
    text-align: center;
}
.labelscolnum li{
	height: 22px;
    margin: 0 !important;
    padding: 5px 0 0 !important;
}
.labelscolnum{
	list-style:none;
	float:left;
	width:40%;
}
.labelscolnum li:nth-child(even){
	background-color:#e9e9e9;
}
#costperfast{
	width:100%;
	clear:both;
}
#twelveoncenter input{
	background-color:#FDFDFD;
	border:1px solid #D6D6D6;
	height: 23px;
}
#sixteenoncenter input{
	background-color:#FDFDFD;
	border:1px solid #D6D6D6;
	height: 23px;
}
.hiddencolumn{
	display:none;
}
#twelveoncenter input.saved{
	background-color:#f6b221;
	border:1px solid #4B4B4B;
}
#sixteenoncenter input.saved{
	background-color:#f6b221;
	border:1px solid #4B4B4B;
}

/*=====================================
            ClEARFIX
=====================================*/
.cf:before, .cf:after { 
	content: ""; 
	display: table; 
}
.cf:after { 
	clear: both; 
}
.cf { 
	zoom: 1; 
}
.clearfix{
	margin:0;
	padding:0;
	height:0;
	line-height:0;
	clear:both;
}