@import "layout.css";

/* html reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, figure, dl, dd, dt, table, tr, td, input, hr { margin: 0; padding: 0 } 

/* html5 support (shim) */
article, section, nav, figure, caption, aside, header, hgroup, footer { display: block }

/* default styles & classes */
body { font-family: Arial, "Times New Roman", sans-serif; font-size: 12px; color: #333 }
ul, ol { list-style: none  } 
a { color: #0e5ee7; text-decoration: none  } 
a:hover { text-decoration: underline } 
p { margin-bottom: 10px; line-height: 1.5em  } 
h2 { margin-bottom: 5px } 
h3 { margin-bottom: 10px; font-size: 1em; font-weight: normal } 
h4 { margin-bottom: 5px; font-size: 1.5em } 
h5 { margin-bottom: 3px; font-size: 1.3em; color: #676767 }
h6 { margin-bottom: 5px; font-size: 1.1em; color: #0d5fe7 }

.wrapper { margin: 0 auto; clear: both; overflow: hidden }
.title { margin-bottom: 40px; overflow: visible; }
.dotted { display:inline-block; border-bottom-style: dotted; border-bottom-width: 1px;}
.link { background: url( img/right-arrow-blue.png) left 5px no-repeat; display: inline-block; padding-left: 7px;}
.indent { overflow:hidden; position: relative; padding: 0 0 0 65px }
.indent > img { position: absolute; left: 0  }

/* colors */
.orange { color: #ff6701 } 
.blue { color: #0e5ee7 } 
.green { color: #42b443 } 
.black {color: #000 }
.gray { color: #666 }

/* sizes */
.larger { font-size: 1.2em }

/* font style */
.bold { font-weight: bold } 
.italic { font-style: italic } 

/* positions & alignments */
.align-left { float: left } 
.align-right { float: right } 
.text-center { text-align: center }
.text-right { text-align: right }
.right { position: absolute; right: 0; top: 0 } 
.left { position: absolute; left: 0; top : 0 } 
.on-right { position: absolute; right: 0; top: 0 } 
.on-left { position: absolute; left: 0; top : 0 } 

/* columns */
.column { float: left; width: 100%; margin-left: 50px; position: relative }
.first { margin-left: 0 } 
.w960 { width: 960px }
.w660 { width: 660px }
.w560 { width: 560px }
.w530 { width: 530px }
.w350 { width: 350px }
.w320 { width: 320px }
.w250 { width: 250px }
.w200 { width: 200px }

/* breadcrumbs */
#breadcrumbs { margin: 20px 0; font-size: .9em }

/* pagination */
.pagination { overflow: hidden; font-size: 11px }
.pagination span { text-align: center; display: inline-block; border: 1px solid #d0d0d0 }
.pagination span a { color:#333; padding: 2px 7px; display: block; }
.pagination span.next { background: url( img/right-arrow-blue.png) 65% center no-repeat }
.pagination span.next a:hover { text-decoration: none }
.pagination span.active { border: none; font-weight: bold; }
.pagination span.ellipses { border: none; }

/* section closers/dividers */
.section-divider { height: 20px; width: 100%; background: url( img/section-closer.png) left center repeat-x; margin: 30px 0; }
.section-line { height: 1px; background-color: #e2e2e2; width: 100%; }

/* gray shadowy flex boxes */
.flex-box { background: #fafafa url( img/flex-box-bottom.png ) center bottom no-repeat; padding: 0 0 30px 0 }
.flex-box .columnal { background: url( img/column-bg.jpg ) center top no-repeat; font-size: .9em }
.flex-box-content { position: relative; border: 1px solid #e2e2e2; border-bottom: none; padding: 20px; /*overflow: hidden*/ }
.flex-box-content .col { float: left; overflow: hidden; width: 25% }
.flex-box-content .col section { margin: 0 15px 0 62px; color: #666 }
.flex-box-content .col span.sprite { float: left; width:55px; height:55px }
.flex-box-content .col span.sprite.community { background: url( img/footer-sprite.jpg ) 0 0 no-repeat }
.flex-box-content .col span.sprite.warranties { background: url( img/footer-sprite.jpg ) 0 -55px no-repeat }
.flex-box-content .col span.sprite.contact { background: url( img/footer-sprite.jpg ) 0 -110px no-repeat }
.flex-box-content .col span.sprite.news { background: url( img/footer-sprite.jpg ) 0 -165px no-repeat }
.flex-box-content .clear-right { margin-right: 450px }
.flex-box-content .flex-box-title { font-size: 1.2em; margin-bottom: 10px; display: block; font-weight: bold }

/*/* rating boxes
.rating-box { margin: 20px 0 }
.rating-box #slider-holder{ width: 280px; overflow: hidden; font-size: .9em; padding: 0 15px }
.rating-box #slider-holder ol#legend { width: 255px; display: block; overflow: hidden }
.rating-box #slider-holder ol#legend li { width: 33%; float: left }
.rating-box #slider-holder .ui-slider {  width: 251px; margin:12px 0 10px 0; position: relative; height: 3px; background: url( img/rating/rating-bg.png) left center repeat-x; border: 1px solid #373938; border-radius: 3px; box-shadow: 0 0 10px 0 #888 }
.rating-box #slider-holder .ui-slider-range-min { height: 3px; background: url( img/rating/progress.png) left center repeat-y }
.rating-box #slider-holder .ui-slider-handle { margin: -7px 0 0 -10px; position: absolute; top:0; width: 18px; height: 18px; outline: 0; background: url( img/rating/handle.png) center center no-repeat }
.rating-box #slider-holder ol#steps { margin: -10px 0 0 0; display: block; overflow: hidden; font-size: .8em;}
.rating-box #slider-holder ol#steps li { width: 9%; float: left; background: url( img/rating/li-bg.png) top left no-repeat; }
.rating-box #slider-holder ol#steps li span { display: block; padding: 10px 0 0 0 }
*/
/* buttons */
.blue-button { display: inline-block; position: relative; color: #fff; font-size: 12px; background: url( img/buttons/blue-right.png ) right center no-repeat; font-weight: bold }
.blue-button img { float: left; margin: 0 5px 0 0; border: none }
.blue-button:hover { cursor: pointer }
.blue-button span { background: url( img/buttons/blue-left.png ) left center no-repeat; display: block; padding: 10px }
.white-button { display: inline-block; color: #0e5ee7; font-size: 12px; background: url( img/buttons/white-right.png ) right center no-repeat; font-weight: bold }
.white-button:hover { cursor: pointer }
.white-button span { background: url( img/buttons/white-left.png ) left center no-repeat; display: block; padding: 10px }
.white-button img { border: none }

/* announcement boxes */
.announcement { background-color: #f3f8fe; padding: 30px; margin-bottom: 40px; overflow: hidden }
.help { padding: 20px 50px 20px 20px; margin:10px 0 0; background-color:#f3f3f3; overflow: hidden; border-radius: 10px }
.alert { overflow: hidden; border-radius: 10px; background: #f3f8fe url(img/alert-bg.png) left center repeat-x; box-shadow: inset 0 0 25px #e8f2fb; padding: 20px 0 20px 20px; margin-bottom: 20px; }
.alert img { margin: 0 20px 0 0  } 
.alert .left-side { width:610px;}
.alert .right-side { width: 180px; text-align:center; border-left: 1px solid #daedfc; box-shadow: -1px 0 0 #fff; padding: 20px }

/* collapsables */
dt { margin: 5px 0; font-weight: bold }
dt.arrow  { background: url( img/collapsed.png) left 3px no-repeat; padding-left: 15px; }
dt.minus a { background: url( img/minus.png) left 3px no-repeat; padding-left: 15px; }
dt.arrow.expanded { background: url( img/expanded.png) left 3px no-repeat; padding-left: 15px }
dd { display: block }
dd.collapsed { display: none }
dd ol { padding: 5px 0 0 20px; margin: 0 0 0 10px; list-style: decimal;}
dd ol li { margin: 5px 0 }

/* main horizontal navigation */
nav { background: url( img/nav-bg.png ) top left repeat-x }
nav ul { width: 960px; margin: 0 auto; padding: 0 0 15px 0; overflow: hidden }
nav ul li { overflow: hidden; float: left; margin: 0; line-height: 1em }
nav ul li a { display: block; overflow: hidden; color: #323232; font-weight: bolder; text-shadow: #fff 1px 1px 0 }
nav ul li a span { background: url( img/li-bg.png ) right bottom no-repeat; display: block;  line-height: 58px; margin-bottom: 12px; padding: 0 22px 0 20px  }
/*nav ul li a:hover { background: #ffffd1 url( img/li-hover-bg.png) left top repeat-x; }*/
nav ul li a:hover span { margin-bottom: -1px }
nav ul li a.active { background: url( img/arrow-down.png ) center bottom no-repeat; color: #000 }
nav ul li a.active span { background: #fef694 url( img/li-active-bg.png ) left top repeat-x }
nav ul li a.active:hover { background: url( img/arrow-down.png ) center bottom no-repeat; color: #000 }
nav ul li a.active:hover span { margin-bottom: 12px }

/* left hand navigation */
.left-hand-nav { background: url( img/left-hand-nav-bottom.jpg) center bottom repeat-x; margin: 0 0 20px 0; }
.left-hand-nav ul { border: 1px solid #f2f2f2 ;}
.left-hand-nav ul li { border-top: 1px solid #d9d9d9; margin:0; line-height: 1em}
.left-hand-nav ul li:hover { background-color: #ffffcf; }
.left-hand-nav ul li:first-child { border-top: none; }
.left-hand-nav ul li.header { background: #f0f0f0 url( img/right-arrow.png ) 92% center no-repeat; font-weight: bold;}
.left-hand-nav ul li a { padding: 15px 10px; display: block; color: #333; }

/* bullets */
/*ul { margin-bottom: 20px }
ul li { line-height: 1.5em; margin: 4px 0 }*/
ul.bullet > li { padding-left : 10px; background: url( img/bullet.png ) left 6px no-repeat  }
ul.plus > li { padding-left : 20px; background: url( img/plus.png ) left center no-repeat;  }
ul.zip > li { padding-left : 30px; background: url( img/zip.png ) left 0 no-repeat;  }
ul.pdf > li { padding-left : 30px; background: url( img/pdf.png ) left 0 no-repeat;  }
ul.pdf a { margin: 0 5px  }
ul.pdf a:first-child { margin-left: 0  }
footer ul.bullet { margin: 0 }
footer ul.bullet li { margin: 0 }

/* tabular overview */
.tabular-overview {}
.tabular-overview .row { padding: 15px 20px; margin: 0 0 3px 0; line-height: 1.5em; }
.tabular-overview .row.even { background: #fafafa url( img/row-bg-even.png ) left top repeat-x }
.tabular-overview .row.odd { background: url( img/row-bg-odd.png ) left top repeat-x }
.tabular-overview .row .product { width: 180px; vertical-align: top; display: inline-block }
.tabular-overview .row .icon { width: 30px; text-align: center; vertical-align: top; display: inline-block }
.tabular-overview .row .compatibility { width: 400px; vertical-align: top; display: inline-block }

/* product sheet grid  */
.grid dt { padding:10px 0 5px 0; margin: 0; background: url(img/grid-div.png) 220px top repeat-y  }
.grid dt:first-child { background: none;  }
.grid table { border-spacing: 0; border-collapse: collapse; display: block; width: 100%; }
.grid table tbody {  display: block; width: 100% }
.grid table tr {  display: block; width: 100%; background: url(img/grid-div.png) 220px top repeat-y }
.grid table td { padding: 7px  }
.grid table td:first-child { text-align: right; width: 180px; padding-right: 50px  }
.grid table tr.odd { background-color: #f6f6f8; }