/* Swatches

5793d6 - Blue
e6e6e6 - Header grey text
f1f1f1 - Filter BG
e1e1e1 - Filter hover BG
*/

/* Reset
--------------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, cite, em, img, strong, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
ol,ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
/* Clear Floated Elements
--------------------------------------------------------------------- */
/* http://sonspring.com/journal/clearing-floats */
html body div.clear { background: none;  border: 0;  clear: both;  display: block;  float: none;  font-size: 0;  margin: 0;  padding: 0;  position: static;  overflow: hidden;  visibility: hidden;  width: 0;  height: 0; }
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }


/* General

--------------------------------------------------------------------- */
body { background: #fff; color: #7e7e7e; font: 75%/1 Arial, Helvetica, sans-serif; }

a { color: #5793d6; text-decoration: none; }
a:visited { color: #5793d6; }
a:hover { text-decoration: underline; }

/* SIFR Titles */
h1, h2, h3, h4, h5, h6 { color: #0c0c0c; font-weight: normal; }
h1 { width: 740px; color: #fff; font-size: 34px; line-height: 46px; margin: 24px 0 0; }
h1 a { color: #93c0f1; text-decoration: none; }
h1 a:visited { color: #93c0f1; }
h1 a:hover { color: #fff; text-decoration: underline; }
h2 { color: #fff; font-size: 48px; line-height: 56px; }
h3 { font-size: 18px; line-height: 24px; }
h4 { font-size: 21px; line-height: 25px; margin: 0 0 15px 0; }
h5 { font-size: 26px; line-height: 32px; margin: 0 0 18px; }
h6 { color: #5793d6; font-size: 17px; line-height: 22px; text-transform: uppercase; }


/* Main Layout

--------------------------------------------------------------------- */
#main { width: 100%; background: url(../images/main_BG.gif) 0 0 repeat-x; }
.container { width: 980px; margin: 0 auto; overflow: hidden; }

#header { width: 980px; height: 199px; overflow: hidden; position: relative; background: #5793d6; }

#main-wrap { width: 980px; overflow: hidden; }
#sidebar { width: 248px; float: left; position: relative; }
#content-main { width: 732px; float: right; overflow: hidden; }

#footer { clear: both; width: 100%; overflow: hidden; background: url(../images/footer_BG.gif) 0 0 repeat-x; }
#footer .container { margin: 30px auto; padding: 0 0 24px 0; background: url(../images/footer-dividers.gif) 50% 0 repeat-y; }



/* Header

--------------------------------------------------------------------- */
#header .logo { position: absolute; top: 90px; right: 0; }
#header-contact { position: absolute; top: 15px; right: 0; width: 122px; height: 23px; overflow: hidden; color: #e6e6e6; text-indent: -9999px; background: #5ca1ef url(../images/header-contact.gif) 0 0 no-repeat; }


/* Main Nav
----------------------------------- */
#main-nav { width: 980px; height: 54px; overflow: hidden; margin: 0 0 12px 0; background: url(../images/divider_white.gif) 0 100% repeat-x; }
#nav, #nav li { height: 54px; }
#nav li { display: block; float: left; background: url(../images/nav_divider.gif) 100% 0 no-repeat; }
#nav a { display: block; height: 54px; margin: 0 18px 0 14px; color: #fff; font-size:1px; line-height:1px; text-indent:-9999px; position: relative; }
#nav a:hover { background-position: 0 -54px; }
#nav a.active { background-position: 0 -54px; }

#nav .nav_home a {  margin-left: 0; }
#nav .nav_contact { background: none; }

.nav_home a { width: 42px; background: url(../images/nav_home.gif) no-repeat 0 0; }
.nav_projects a { width: 73px; background: url(../images/nav_projects.gif) no-repeat 0 0; }
.nav_products a { width: 77px; background: url(../images/nav_products.gif) no-repeat 0 0; }
.nav_supply a { width: 167px; background: url(../images/nav_supply.gif) no-repeat 0 0; }
.nav_news a { width: 46px; background: url(../images/nav_news.gif) no-repeat 0 0; }
.nav_contact a { width: 67px; background: url(../images/nav_contact.gif) no-repeat 0 0; }

/* Breadcrumbs
----------------------------------- */
#breadcrumbs { margin: 0 0 46px 0; color: #e6e6e6; font-size: 0.917em; }
#breadcrumbs a { color: #e6e6e6; text-decoration: underline; }
#breadcrumbs a:visited { color: #e6e6e6; }
#breadcrumbs a:hover { color: #e6e6e6; text-decoration: none; }


/* Sidebar

--------------------------------------------------------------------- */
#back-link { width: 236px; overflow: hidden; position: absolute; top: 14px; }
#back-link a { color: #fff; font-size: 1.167em; font-weight: bold; line-height: 20px; text-decoration: none; padding: 2px 0 2px 28px; background: url(../images/arrow_up.gif) 0 50% no-repeat; }
#back-link a:visited { color: #fff; }
#back-link a:hover { color: #fff; text-decoration: underline; }


/* Menu
----------------------------------- */
#menu-wrap { height: 305px; padding: 85px 0 0; margin: 0 0 40px; }
html > body #menu-wrap { height: auto; min-height: 305px; }

#menu-title { margin: 0 12px 10px 6px; color: #5793d6; font-size: 0.917em; line-height: 1.333; text-transform: uppercase; }

#menu { width: 248px; overflow: hidden; border-top: 1px solid #ececec; }
#menu li { display: block; border-bottom: 1px solid #ececec; }
#menu a { display: block; padding: 6px 6px 8px; color: #696969; font-size: 1.167em; line-height: 1.333; }
#menu a:visited { color: #696969; }
#menu a:hover { color: #5793d6; text-decoration: none; }
#menu a.active { padding-left: 18px; background: url(../images/active_menu.gif) 8px 11px no-repeat; color: #5793d6; font-weight: bold; }


/* Brand Image
----------------------------------- */
.brand { width: 136px; margin: 0 0 40px 50px; }
.brand a { display: block; width: 134px; height: 134px; border: 1px solid #f1f1f1; margin: 0 0 12px; }
.brand a:hover { border: 1px solid #e1e1e1; }


/* Filter Menu
----------------------------------- */
.filter-wrap { width: 236px; overflow: hidden; background: #f1f1f1; }
.filter-wrap .desc { margin: 0; padding: 34px 12px 10px; background: #5793d6 url(../images/product-filter_BG.gif) 0 0 no-repeat; color: #fff; font-size: 1em; }
.filter-wrap .title { height: 36px; margin: 0; padding: 0 0 0 42px; background: #5793d6 url(../images/filter-control.gif) 12px 50% no-repeat; color: #fff; font-size: 1.167em; font-weight: bold; line-height: 36px; }
.filter-wrap .spacer { padding-bottom: 20px; }
#sidebar .filter-wrap { padding-bottom: 40px; }

.filter { width: 220px; padding: 30px 8px 15px; background: url(../images/filter_BG.gif) 0 0 no-repeat; }
.sup-content .filter { background: none; }
.filter li { display: block; margin: 0 0 2px 0; }

.filter a { display: block; width: 199px; padding: 2px 4px 3px 17px; background: url(../images/link_arrow.gif) 8px 7px no-repeat; color: #696969; font-size: 0.917em; line-height: 1.333; }
.filter a:visited { color: #696969; }
.filter a:hover { background-color: #e1e1e1; color: #696969; text-decoration: none; }
.filter a.active { background-color: #e1e1e1; color: #696969; font-weight: bold; }

.filter a span { display: block; padding: 0 16px 0 0; background-position: 100% 2px; background-repeat: no-repeat; }

.filter a.active span { background-image: url(../images/filter-selected.gif); }
.multiple-filter a:hover span { background: url(../images/multiple-filter-control.gif) 100% 2px no-repeat; }
.multiple-filter a.active span { background: url(../images/multiple-filter-control.gif) 100% -45px no-repeat; }
.multiple-filter a.active:hover span { background-position: 100% -90px; }


/* Content

--------------------------------------------------------------------- */
.content { width: 708px; overflow: hidden; margin: 40px 0; padding: 0 12px; }
.detail-copy { width: 460px; float: left; }
.sup-content { width: 236px; float: right; display: inline; margin: 0 -12px 0 0; }

.content p { margin: 0 0 1.5em; font-size: 1.167em; line-height: 1.583em; }

/* Blockquotes */
.content blockquote { width: 236px; background: #f1f1f1; }
.content blockquote p { margin: 0; }
.content blockquote .pullquote { padding: 12px 12px 24px; color: #5793d6; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; line-height: 1.5; }

.content blockquote cite { display: block; padding: 30px 12px 12px; background: #5793d6 url(../images/blockquote_BG.gif) 0 0 no-repeat; color: #fff; font-size: 0.786em; font-style: normal; line-height: 1.2; }
.content blockquote cite strong { display: block; font-size: 1.091em; text-transform: uppercase; }


/* Main Content Intro
----------------------------------- */
#main-intro { width: 980px; overflow: hidden; background: #fff; margin: 0 0 35px; }
#main-intro .inner { padding: 12px 12px 0; }


/* Product Header Image
----------------------------------- */
#product-header { width: 732px; height: 390px; overflow: hidden; position: relative; }

#product-header a.btn { display: block; float: left; width: 197px; height: 39px; line-height: 39px; color: #fff; font-size: 1.167em; font-weight: bold; text-indent: 38px; position: absolute; bottom: 12px; z-index: 10; }
#product-header a.btn:visited { color: #fff; }
#product-header a.btn:hover { color: #fff; }
#product-header a.btn1 { left: 12px; background: #5793d6 url(../images/arrow_up.gif) 10px 10px no-repeat; }
#product-header a.btn2 { left: 221px; background: #5793d6 url(../images/arrow_down.gif) 10px 10px no-repeat; }

#product-header #swatch { position: absolute; bottom: 0; right: 0; }


/* Listing
----------------------------------- */
.listing-row { width: 980px; margin: 0 0 12px 0; overflow: hidden; background: url(../images/divider_black.gif) 0 0 repeat-x; }
.listing-row .inner { padding: 12px 0; }

.listing { width: 744px; margin: 0 -12px 0 0; overflow: hidden; float: left; } /* Width includes 12px margin of listing-itme and is hidden with a negative margin */

.listing-info, .listing li { display: block; width: 236px; height: 190px; overflow: hidden; margin: 0 12px 12px 0; float: left; display: inline; position: relative; }

.listing-info { margin: 0 12px 0 0; }
.listing-info p { color: #696969; line-height: 1.333; }

.listing-control { position: absolute; bottom: 0; }
.listing-control a { padding: 3px 0 3px 28px; background: url(../images/control-expand.gif) 0 50% no-repeat; color: #5793d6; font-size: 1.167em; font-weight: bold; line-height: 20px; }
.listing-control a:visited { color: #5793d6; }
.listing-control a:hover { color: #5793d6; }
.listing-control a.collapse { background-image: url(../images/control-collapse.gif); }

.listing-item { width: 236px; height: 190px; overflow: hidden; position: relative; }
.listing-item a { display: block; width: 100%; height: 190px; background: #5793d6; }
.listing-item a img { display: block; }
.listing-item .copy { display: block; padding: 12px 12px 0; color: #fff; font-size: 1.167em; line-height: 1.333; }
.listing-item .copy strong { display: block; margin: 0 0 6px; }

.listing-item a:hover { text-decoration: none; background: #696969; }
.listing-item a:hover .copy { color: #fff; }


/* Content Listing
----------------------------------- */
.content-listing { width: 708px; overflow: hidden; margin: 0 0 35px; padding: 0 12px; }
.content-listing li { width: 708px; padding: 16px 0; background: url(../images/divider_black.gif) 0 100% repeat-x; }
.content-listing p { margin: 0 0 8px; font-size: 1em; line-height: 1.583em; }
.content-listing .title { margin: 0 0 10px; color: #5793d6; font-size: 1.75em; line-height: 1.333;}

a.download { color: #5793d6; font-size: 1.167em; font-weight: bold; line-height: 20px; text-decoration: none; padding: 2px 0 2px 28px; background: url(../images/download_BG.gif) 0 50% no-repeat; }
a.download:visited { color: #5793d6; }
a.download:hover { color: #5793d6; text-decoration: underline; }


/* Form
----------------------------------- */
.form-wrap { width: 732px; overflow: hidden; margin: 0; }
.form-header { width: 732px; height: 48px; overflow: hidden; line-height: 48px; background: #5793d6 url(../images/form-header_BG.gif) 0 0 repeat-x; position: relative; }
.form-header a { float: left; display: inline; margin: 0 0 0 12px; padding: 0 0 0 28px; color: #fff; font-size: 1.167em; }
.form-header a:visited { color: #fff; }
.form-header a.collapse { background: url(../images/form-collapse.gif) 0 50% no-repeat;}
.form-header a.expand { background: url(../images/form-expand.gif) 0 50% no-repeat;}

.form-header p { float: right; display: inline; margin: 0 12px 0 0; color: #fff; font-size: 1.167em; font-weight: bold; text-align: right; }

.form { width: 732px; overflow: hidden; background: #f1f1f1 url(../images/form_BG.gif) 0 0 repeat-x; }
.form-inner { padding: 44px 12px 24px; overflow: hidden; background: url(../images/form-inner_BG.gif) 20px 0 no-repeat; }
.form-col { width: 330px; margin: 0 12px; float: left; display: inline; }

.form .field { width: 330px; margin: 0 0 12px; overflow: hidden; }
.form .field input.text { width: 214px; float: right; }
.form .field textarea { width: 214px; height: 120px; float: right; overflow:auto; }

.form .field label { display: block; width: 88px; float: left; padding: 8px 0 0; }

.form-btn { margin: 0 0 0 100px; }

input.text, textarea { margin: 0; padding: 7px; border: 1px solid #e4e4e4; background: #fff url(../images/input_BG.gif) 0 0 repeat-x; }
select { padding: 3px; border: 1px solid #e4e4e4; }
input, textarea, select { color: #9B9B9B; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 13px; }
option { font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
input.text:focus, textarea:focus, select:focus { border: 1px solid #5793d6; outline: none; }
label { color: #5793d6; font-size: 1.167em; }


/* Slideshow
----------------------------------- */
#slideshow { width: 732px; height: 390px; overflow: hidden; position: relative; }
#slides {width: 732px; height: 390px; overflow: hidden; position: relative; }

#slide-controls { width: 732px; height: 32px; position: absolute; bottom: 0; z-index: 100; }
#slide-controls .captions { width: 618px; height: 32px; overflow: hidden; float: left; }

#slide-controls .captions p { float: right; height: 32px; line-height: 32px; padding: 0 24px; background: #5793d6; color: #fff; font-size: 1.167em; font-weight: bold; }

#slide-controls .slide-nav { width: 114px; height: 32px; float: right; background: #5793d6; position: relative; }
#slide-controls .slide-nav .inner { float: right; padding: 9px 6px 0 0; }
#slide-controls .slide-nav a { display: block; float: left; margin: 0 6px 0 0; width: 22px; height: 15px; overflow: hidden; font-size: 1px; line-height: 1px; text-indent: -9999px; background: #fff; }
#slide-controls .slide-nav a.active,
#slide-controls .slide-nav a:hover { background: #1c518b; }

/* Content Slidshow Dimensions */
#content-header-img #slideshow, #content-header-img #slides { height: 230px; }
#hero #slide-controls { width: 980px; }


/* Homepage

--------------------------------------------------------------------- */
#hero {  background-color: #f1f1f1; width: 980px; height: 390px; overflow: hidden; margin: 0 0 24px; position: relative; }
/* Homepage Slidshow Dimensions */
#hero #slideshow, #hero #slides { width: 980px; }
#hero #slide-controls { width: 980px; }
#hero #slide-controls .captions { width: 810px }
#hero #slide-controls .captions p { width: 278px; float: right; padding: 0 24px 0 12px; }
#hero #slide-controls .slide-nav { width: 170px; }

#slide-controls .captions a { color: #fff; padding: 3px 0 3px 28px; background: url(../images/caption_link.gif) 0 50% no-repeat; }
#slide-controls .captions a:visited { color: #fff; }


/* Highlight
----------------------------------- */
.highlight-row { width: 980px; margin: 0 0 12px 0; overflow: hidden; background: url(../images/divider_black.gif) 0 0 repeat-x; }
.highlight-row .inner { padding: 12px 0; }
.highlight-list { width: 992px; margin: 0 -12px 0 0; }
.highlight-list li { width: 236px; height: 190px; overflow: hidden; margin: 0 12px 12px 0; float: left; display: inline; position: relative; background: #f1f1f1; }

.highlight .title { height: 66px; margin: 12px; }
.highlight p { margin: 0 12px; color: #696969; line-height: 1.417; }
.highlight .link { width: 236px; height: 30px; background: #5793d6; position: absolute; bottom: 0; }

.highlight a { margin: 0 12px; padding: 0 10px 0 0; color: #fff; font-weight: bold; line-height: 30px; background: url(../images/link_arrow_white.gif) 100% 60% no-repeat; text-decoration: none; }
.highlight a:visited { color: #fff; }
.highlight a:hover { color: #fff; text-decoration: underline; }


/* Brand Listing
----------------------------------- */
.brand-listing { margin: 0 0 44px; }
.brand-listing .inner { background: url(../images/divider_black.gif) 0 100% repeat-x; }

.brand-listing .listing-info { height: 150px; }
.brand-listing .listing { width: 745px; overflow: hidden; margin: 12px -13px 0 0; float: left; display: inline; }
.brand-listing .listing li { width: 136px; margin: 0 13px 13px 0; float: left; display: inline; }
.brand-listing .listing li a { display: block; width: 134px; height: 134px; overflow: hidden; border: 1px solid #f1f1f1; }
.brand-listing .listing li a:hover { border: 1px solid #e1e1e1; }


/* Footer

--------------------------------------------------------------------- */
#footer #contact, #footer #about { width: 224px; margin: 1px 12px; float: left; display: inline; }

#footer p { margin: 0 0 1.5em; color: #8f8f8f; font-size: 0.917em; line-height: 1.333; }
#footer .title { margin: 5px 0 18px 0; color: #5793d6; font-size: 1em; font-weight: bold; line-height: 1; }

#footer a.link { color: #5793d6; font-size: 0.917em; font-weight: bold; text-decoration: none; padding: 0 8px 0 0; background: url(../images/link_arrow.gif) 100% 60% no-repeat; }
#footer a.link:visited { color: #5793d6; }
#footer a.link:hover { color: #5793d6; text-decoration: underline; }

#product-listing { width: 472px; margin: 1px 0 1px 12px; float: left; display: inline; }
#product-listing ul { width: 157px; overflow: hidden; float: left; }
#product-listing ul li { width: 125px; margin: 0 24px 0 0; padding: 0 0 0 8px; float: left; display: inline; background: url(../images/footer-listing-arrow.gif) 0 5px no-repeat; }
#product-listing ul li a { color: #8f8f8f; font-size: 0.917em; line-height: 1.333; }
#product-listing ul li a :visited { color: #8f8f8f; }
#product-listing ul li a:hover { color: #8f8f8f; }

/* File input style */
.form .field input.file { margin-left: 12px; }
input.file { margin: 0; padding: 7px; border: 1px solid #e4e4e4; background: #fff url(../images/input_BG.gif) 0 0 repeat-x; }
input.file:focus { border: 1px solid #5793d6; outline: none; }