/*------------------------------------------------------------------------------ Site: Hills SVL (http://www.hillssvl.com.au/) Author: Digital Tsunami (http://www.digital-tsunami.com/) ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ DEFAULT GLOBAL ------------------------------------------------------------------------------*/ * { padding: 0; margin: 0; border: 0 none; outline: 0; vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; } body { font: 62.5% Arial, Helvetica, sans-serif; color: #333333; background: #b2b2b2 url(../img/bg-page.jpg) 0 0 repeat-x; } p { margin: 0 0 1em 0; } a { color: #0053a0; text-decoration: none; cursor: pointer; } a:hover { color: #e2383f; } a:focus { outline: none; } embed, object { position: relative; z-index: 0; } table, td, th { vertical-align: top; text-align: left; font-size: 1em; } ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { font-size: 2.2em; color: #0053a0; margin: 0 0 0.7em 0;; } h2 { font-size: 2.2em; color: #0053a0; margin: 0 0 0.7em 0; } h3 { font-size: 1.9em; color: #0053a0; margin: 0 0 0.7em 0; } h4 { font-size: 1.7em; color: #000000; margin: 1em 0 0.5em 0; font-weight: bold; } h5 { font-size: 1.4em; color: #000000; margin: 1em 0 0.5em 0; font-weight: bold; /*text-transform: uppercase;*/ } h6 { font-size: 1.2em; color: #000000; margin: 0 0 0.5em 0; font-weight: bold; /*text-transform: uppercase;*/ } strong, b { font-weight: bold; } em, i { font-style: italic; } /*------------------------------------------------------------------------------ UTILITY ------------------------------------------------------------------------------*/ a[href$=".pdf"], a[href$=".PDF"], a.pdf { padding: 2px 2px 2px 20px; background: url(../img/icons/page_white_acrobat.png) no-repeat left center; } a[href$=".doc"], a[href$=".DOC"], a.doc { padding: 2px 2px 2px 20px; background: url(../img/icons/page_word.png) no-repeat left center; } a[href$=".xls"], a[href$=".XLS"], a.xls { padding: 2px 2px 2px 20px; background: url(../img/icons/page_excel.png) no-repeat left center; } a[href$=".gz"], a[href$=".GZ"], a[href$=".gzip"], a[href$=".GZIP"], a[href$=".zip"], a[href$=".ZIP"], a.archive { padding: 2px 2px 2px 20px; background: url(../img/icons/page_white_zip.png) no-repeat left center; } a[href$=".exe"], a[href$=".EXE"], a.application { padding: 2px 2px 2px 20px; background: url(../img/icons/application.png) no-repeat left center; } .smaller { font-size: 0.9em; } .smallest { font-size: 0.8em; } .larger { font-size: 1.2em; } .largest { font-size: 1.4em; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .top { vertical-align: top; } .middle { vertical-align: middle; } .bottom { vertical-align: bottom; } .float-left { float: left; } .float-right { float: right; } .strong { font-weight: bold; } .em { font-style: italic; } .hide { display: none; } .block { display: block; } .inline { display: inline; } .none { display: none; } .pointer { cursor: pointer; } .strikethrough { text-decoration: line-through; } .absolute { position: absolute; } .relative { position: relative; } .cap { text-transform: capitalize; } .ucase { text-transform: uppercase; } .lcase { text-transform: lowercase; } .clear { position: relative; width: 100%; clear: both; line-height: 0; height: 0; display: block; } hr { margin: 1em 0 1em 0; background: #cccccc; width: 100%; height: 1px; color: #cccccc; border: none; clear: both; } .hr { margin: 1em 0 1em 0; border-top: 1px dotted #cccccc; } .hr hr { display: none; } .img-left { margin: 0 20px 10px 0; } .img-right { margin: 0 0 10px 30px; } .img-center { margin: 0 auto; display: block; } .img-left-bordered { margin: 0 20px 10px 0; border: 1px solid #cccccc; } .img-right-bordered { margin: 0 0 10px 20px; border: 1px solid #cccccc; } .img-bordered { border: 1px solid #cccccc; margin: 0 10px 10px 0; } .bordered { border: 1px solid #cccccc; margin: 0; } .caption { color: #999999; font-size: 0.9em; font-style: italic; text-align: left; display: block; } a.fancybox img { margin: 15px 0 0 15px; } a.fancybox .zoom { position: absolute; top: 0; left: 0; width: 30px; height: 30px; z-index: 10; background: url(../img/icons/img-zoom.png) 0 0 no-repeat; } .half { float: left; width: 48%; padding: 0 2% 0 0; } .third { float: left; width: 31%; padding: 0 2% 0 0; } .twothird { float: left; width: 63%; padding: 0 4% 0 0; } .quarter { float: left; width: 23%; padding: 0 2% 0 0; } .fifth { float: left; width: 18%; padding: 0 2% 0 0; } .threequarter { float: left; width: 70%; padding: 0 5% 0 0; } /*------------------------------------------------------------------------------ FORMS ------------------------------------------------------------------------------*/ input, textarea, select { color: #666666; padding: 2px 3px 2px 3px; background: #ffffff; width: 300px; border: 1px solid #bbbbbb; } input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus { border: 1px solid #e2383f; } .action { background: #0053a0; width: auto; color: #ffffff; padding: 3px 5px 3px 5px; border: 1px solid #0053a0; margin: 10px 0 10px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .action:hover, .action:focus { background: #e2383f; color: #ffffff; border: 1px solid #e2383f; cursor: pointer; } textarea { overflow: auto; height: 100px; } select { padding: 0; width: 308px; } .FormHeading { color: #0053a0; font-size: 1.3em; font-weight: bold; margin: 1em 0 1em 0; border-bottom: 1px solid #cccccc; text-transform: uppercase; } fieldset { margin: 1em 0 0 0; padding: 10px; border: 1px solid #cccccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } label { font-weight: bold; } label.required, label.error { font-weight: bold; color: #e2383f; float: right; } ul.optionset label { font-weight: normal; } .message { font-weight: bold; color: #e2383f; } .middleColumn { margin: 0 0 5px 0;} input.checkbox, input.radio, .checkbox input { width: auto; border: 0; } .Actions { float: right; margin: 0; text-align: right; } .fieldgroupField label { display: block; } .widget-form fieldset { margin: 0; padding: 0; border: 0; } .widget-form input { width: auto; } .widget-form .Actions { float: none; margin: 0; text-align: left; } .widget-form #Remember, .widget-form #ForgotPassword { font-size: 0.9em; } .widget-form #MemberLoginForm_LoginForm_action_dologin, .widget-form #CustomLoginForm_LoginForm_action_dologin { float: right; } .widget-form #ForgotPassword { float: left; } /*------------------------------------------------------------------------------ STRUCTURE ------------------------------------------------------------------------------*/ #page-wrap { position: relative; width: 1000px; margin: 0 auto; } #header { position: relative; width: 1000px; height: 170px; background: transparent url(../img/bg-header.png) 0 100% no-repeat; z-index: 40; } h1#logo { position: absolute; top: 25px; left: 30px; background: transparent url(../img/logo-hillssvl.gif) 0 0 no-repeat; } h1#logo a { display: block; width: 216px; height: 81px; } h1#logo a span { display: none; } #phone-number { position: absolute; top: 30px; right: 280px; font-size: 2em; font-weight: bold; color: #999999; padding: 0 0 0 30px; line-height: 23px; background: transparent url(../img/bg-phone.gif) 0 0 no-repeat; } #locations { position: absolute; top: 25px; right: 280px; width: 200px; height: 50px; overflow: hidden; font-size: 1em; background: url(../img/bg-locations.gif) 0 0 no-repeat; } #locations li { width: 200px; height: 50px; margin: 0 0 0 55px; background-color: #fdfdfd; } #SearchForm_SearchForm, #header #SearchForm_MultiSearchForm { position: absolute; top: 25px; right: 20px; width: 230px; /*height: 22px; overflow: hidden;*/ background: transparent url(../img/bg-search-box.gif) 0 0 no-repeat; } #SearchForm_SearchForm fieldset, #header #SearchForm_MultiSearchForm fieldset { position: relative; border: 0; margin: 0; padding: 0; } #Search, #Search .middleColumn, #ProductName, #ProductName .middleColumn, #DistributorTxt, #DistributorTxt .middleColumn, #searchType, #searchType .middleColumn { display: inline; } #SearchForm_SearchForm_Search, #header #SearchForm_MultiSearchForm_Search { border: 0; background: none; width: 180px; padding: 5px 5px 0 5px; height: 17px; color: #999999; } #SearchForm_SearchForm_action_results, #header #SearchForm_MultiSearchForm_action_MultiResults { position: absolute; top: 0; left: 190px; border: 0; width: 40px; height: 22px; padding: 0; margin: 0; background: none; line-height: 100px; text-indent: -5000px; } #header #SearchForm_MultiSearchForm #searchType ul { margin: 5px 0 0 60px; } #header #SearchForm_MultiSearchForm #searchType li { display: inline; } #header #SearchForm_MultiSearchForm #searchType label { font-weight: normal; } #main { float: left; width: 100%; background: transparent url(../img/bg-main.png) 0 0 repeat-y; } #main-inner { float: left; width: 960px; padding: 10px 20px 0 20px; background: transparent url(../img/bg-main-inner.png) 0 0 no-repeat; } #banner { position: relative; width: /*960px*/700px; height: 350px; /*background: #000000 url(../img/bg-banner.gif) 0 0 repeat-x;*/ overflow: hidden; margin: 0 0 15px 0; } /* #banner-bottom { width: 960px; height: 15px; background: transparent url(../img/bg-banner-bottom.gif) 0 0 no-repeat; margin: 10px 0 0 0; } #banner-curves { position: absolute; top: 0; left: 0; width: 265px; height: 350px; background: transparent url(../img/banner-curves.png) 0 0 no-repeat; z-index: 10; } #banner-corner-tr { position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: transparent url(../img/banner-corner-tr.png) 0 0 no-repeat; z-index: 10; } */ #banner-thumbs { position: absolute; /*top: 15px; left: 10px; width: 200px; height: 320px; overflow: hidden;*/ z-index: 20; bottom: 0px; left: 0px; } #banner-thumbs li { float: left; /*height: 60px; margin: 0 0 5px 0;*/ overflow: hidden; width: 25px; height: 22px; } #banner-thumbs a { display: block; width: 25px; height: 22px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: transparent url(../img/bg-banner-thumbs.png) 0 0 no-repeat; } #banner-thumbs a:hover, #banner-thumbs a.activeSlide { background: transparent url(../img/bg-banner-thumbs.png) -25px 0 no-repeat; } #banner-thumbs img { /*float: left; width: 50px; height: 50px; border: 5px solid #ffffff;*/ width: 0; height: 0; } #banner-thumbs a:hover img, #banner-thumbs a.activeSlide img { /*border: 5px solid #0053a0;*/ } #banner-thumbs .title { float: left; width: 130px; font-size: 1.1em; color: #ffffff; margin: 10px 0 0 10px; } #banner-thumbs a .title { color: #ffffff; } #banner-thumbs a:hover .title, #banner-thumbs a.activeSlide .title { color: #0053a0; } #banners { position: absolute; top: 0; right: 0; background: #ffffff; width: 700px; height: 350px; overflow: hidden; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #banners img { width: /*720px*/700px; height: 350px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #banner2 { width: 700px; height: 275px; /*background: transparent url(../img/bg-banner2-bottom.gif) 0 100% no-repeat;*/ } #banner2 div { height: 250px; overflow: hidden; } #banner2 img { width: 700px; height: 250px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #sidebar { float: left; width: 240px; min-height: 350px; /*background: transparent url(../img/bg-sidebar.gif) 100% 0 no-repeat;*/} .widget-outer { width: 210px; margin: 10px 0 0 0; padding: 7px 7px 7px 6px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #d9d9d9; } .widget { width: 210px; background: transparent url(../img/hd-widget.gif) 0 0 no-repeat; } .widget .inside { padding: 5px 0 25px 10px; font-size: 1.1em; color: #666666; /*background: transparent url(../img/bg-widget.gif) 0 100% no-repeat;*/ } .widget-form .inside { padding: 0 0 15px 10px; } .widget h4 { color: /*#0053a0*/ #ffffff; font-size: 1.6em; /*font-weight: bold;*/ /*text-transform: uppercase;*/ height: 30px; line-height: 30px; padding: 0 0 0 45px; margin-top: 0; } .widget h4.no-indent { padding: 0 0 0 15px; } #widget-news h4 { background: transparent url(../img/hd-widget-news.gif) 15px 5px no-repeat; } #widget-training h4 { background: transparent url(../img/hd-widget-training.gif) 15px 3px no-repeat; } #widget-knowledge h4 { background: transparent url(../img/hd-widget-knowledge.gif) 20px 2px no-repeat; } #widget-support h4 { background: transparent url(../img/hd-widget-support.gif) 15px 3px no-repeat; } #widget-solutions h4 { background: transparent url(../img/hd-widget-solutions.gif) 15px 3px no-repeat; } #widget-clearance h4 { background: transparent url(../img/hd-widget-clearance.gif) 18px 4px no-repeat; } .widget a { color: #333333; } .widget a:hover { color: #e2383f; } .widget ul { list-style: square; padding: 0 0 0 15px; } .widget li { padding: 0 0 0.5em 0; } #content #widget-news { font-size: 0.833em; line-height: normal; margin: 0 0 10px 50px; } #content { float: right; width: 700px; padding: 10px 10px 20px 0; font-size: 1.2em; line-height: 1.5em; } #content p { line-height: 1.4em; } #content ul { list-style: square; margin: 0 0 1em 1.5em; line-height: normal; } #content ul li { margin: 0 0 0.4em 0; } #content ol { margin: 0 0 1em 1.5em; } #content ol li { margin: 0 0 0.2em 0; } #content form { font-size: 0.9em; } #content form ul.optionset { margin: 0.5em 0 1em 0; list-style: none; } #content form ul.optionset li { background: none; padding: 0; } #breadcrumbs { margin: 0 0 20px 0; font-size: 0.9em; color: #999999; } #page-buttons { clear: both; margin: 20px 0 20px 0; padding: 20px 0 0 0; background: transparent url(../img/bg-banner2-bottom.gif) 0 0 no-repeat; } .page-button { float: left; margin: 0 13px 13px 0; } .page-button img { width: 210px; /*height: 140px;*/ } #brands-wrap { position: relative; width: 670px; height: 60px; margin: 0 0 30px 0; overflow: hidden; background: transparent url(../img/bg-brands-wrap.gif) 0 0 no-repeat; } #brands { position: absolute; width: 600px; height: 35px; overflow: hidden; margin: 13px 0 0 35px; } #brands ul { margin: 0; padding: 0; } #brands li { list-style: none; margin: 0; padding: 0; } #brands li a { display: block; width: 150px; height: 35px; background-position: 0 0; background-repeat: no-repeat;} #brands li a:hover { background-position: 0 -35px; } #brands li a span {display: none;} #brands-wrap .prev { position: absolute; top: 21px; left: 10px; width: 8px; height: 17px; background: transparent url(../img/brands-prev.gif) 0 0 no-repeat; cursor: pointer; } #brands-wrap .next { position: absolute; top: 21px; right: 10px; width: 8px; height: 17px; background: transparent url(../img/brands-next.gif) 0 0 no-repeat; cursor: pointer; } #brands-wrap .prev:hover, #brands-wrap .next:hover { background-position: -12px 0; } #sitemap-list li { font-weight: bold; text-transform: uppercase; margin: 0 0 1em 0 !important; } #sitemap-list li a { color: #e2383f; } #sitemap-list li a:hover { color: #000000; } #sitemap-list li ul { margin: 0.5em 0 0.5em 0.1em; } #sitemap-list li li { font-weight: normal; text-transform: none; margin: 0 0 0.3em 0 !important; } #sitemap-list li li a { color: #666666; } .clearances { width: 100%; margin: 2em 0 2em 0; border-color: #e0e0e0; border-style: solid; border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; } .clearances th { color: #0053a0; font-weight: bold; background: #e0e0e0; white-space: nowrap; } .clearances th, .clearances td { margin: 0; padding: 3px 5px; border-color: #e0e0e0; border-style: solid; border-width: 1px 1px 0 0; } .clearances a.fancybox img { margin: 0; } .media-item { float: left; width: 31%; padding: 0 2% 10px 0; height: 250px; overflow: hidden; font-size: 0.9em; } .media-item img { width: 215px; height: 120px; } #footer { float: left; width: 100%; margin: 20px 0 0 0; background: transparent url(../img/bg-footer.gif) 0 100% no-repeat;} #footer-inner { float: left; width: 100%; min-height: 200px; background: transparent url(../img/bg-footer-inner.png) 0 0 no-repeat; } .footer-links { float: left; width: 175px; padding: 25px 7px 20px 10px; font-size: 1.1em; color: #666666; } .footer-links a { color: #666666; } .footer-links a:hover { color: #000000; } .footer-links h5 { font-size: 1.2em; color: #0053a0; /*text-transform: uppercase;*/ margin: 0 0 0.5em 0; } .footer-links ul { list-style: square; margin: 0 0 0 1.5em; } .footer-links li{ margin: 0 0 0.2em 0; } #subfooter { float: left; width: 100%; color: #777777; font-size: 1em; background: transparent url(../img/bg-subfooter.png) 0 0 no-repeat; padding: 30px 0 20px 0; } #subfooter a { color: #777777; } #subfooter a:hover { color: #000000; } #copyright { float: left; padding: 10px 0 10px 50px; background: transparent url(../img/mark-hillssvl.gif) 20px 0 no-repeat; } #dt { float: right; padding: 10px 20px 10px 0; } #random-footer-links { float: left; clear: both; padding: 10px 20px 10px 50px; } /*------------------------------------------------------------------------------ PRODUCT TABS ------------------------------------------------------------------------------*/ /* root element for tabs */ ul.tabs { list-style: none; margin: 0 0 1em 0 !important; padding: 0; border-bottom: 1px solid #818181; height: 30px; } /* single tab */ ul.tabs li { float: left; text-indent: 0; padding: 0; margin: 0 !important; list-style: none; list-style-image: none !important; } /* link inside the tab. uses a background image */ ul.tabs a { background: url(../img/tabs-blue.gif) no-repeat -420px 0; font-size: 11px; display: block; height: 30px; line-height: 30px; width: 134px; text-align: center; color: #444444; padding: 0; margin: 0; position: relative; top: 1px; } ul.tabs a:active { outline:none; } /* when mouse enters the tab move the background image */ ul.tabs a:hover { background-position: -420px -31px; color: #ffffff; } /* active tab uses a class name "current". it's highlight is also done by moving the background image. */ ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { background-position: -420px -62px; cursor: default !important; color: #000000 !important; } /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */ /* width 1 */ ul.tabs a.s { background-position: -553px 0; width: 81px; } ul.tabs a.s:hover { background-position: -553px -31px; } ul.tabs a.s.current { background-position: -553px -62px; } /* width 2 */ ul.tabs a.l { background-position: -248px -0px; width: 174px; } ul.tabs a.l:hover { background-position: -248px -31px; } ul.tabs a.l.current { background-position: -248px -62px; } /* width 3 */ ul.tabs a.xl { background-position: 0 -0px; width: 248px; } ul.tabs a.xl:hover { background-position: 0 -31px; } ul.tabs a.xl.current { background-position: 0 -62px; } /* initially all panes are hidden */ div.panes div.pane { display:none; } /*------------------------------------------------------------------------------ MAIN NAV ------------------------------------------------------------------------------*/ #nav { position: absolute; top: /*82px*/ 120px; /*right: 20px;*/ left: 20px; width: /*730px*/960px; height: 30px; background: transparent url(../img/bg-nav.gif) 0 0 no-repeat; border-bottom: 1px solid #f9f9f9; z-index: 40; } /* ESSENTIAL STYLES */ .nav { line-height: 1em; margin: 0 0 0 15px; } .nav ul { position: absolute; top: -999em; width: 16em; } .nav li { float: left; position: relative; width: auto; } .nav li li { width: 100%; } .nav a { display: block; } .nav li:hover ul, ul.nav li.sfHover ul { left: 0; top: 31px; } .nav li:hover li ul, .nav li.sfHover li ul { top: -999em; } .nav li li:hover ul, ul.nav li li.sfHover ul { left: 16em; top: 0; } .superfish li:hover ul, .superfish li li:hover ul { top: -999em; } /* ACTUAL SKIN */ .nav { float: left; } .nav ul { padding: 0 0 10px 0; background: #0053a0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; } .nav li { font-size: 1.1em; font-weight: bold; text-transform: uppercase; background: transparent url(../img/nav-divider.gif) 100% 0 no-repeat; text-shadow: -1px -1px 1px #0053a0; } .nav li a { color: #ffffff; padding: 0 1.05em 0 1.05em; line-height: 30px; } .nav li:hover, .nav li.sfHover, .nav li a:hover { color: #ffffff; background: #0053a0 url(../img/nav-divider.gif) 100% 0 no-repeat; } .nav li li { font-size: 1em; font-weight: normal; text-transform: none; background: #0053a0; text-shadow: none; } .nav li li a { color: #ffffff; padding: 0.4em 1em 0.4em 1em; width: 14em; line-height: 1.3em; } .nav li li:hover, .nav li li.sfHover, .nav li li a:hover { color: #ffffff; background: #80a9d0; } /*------------------------------------------------------------------------------ SECONDARY NAV -----------------------------------------------------------------------------*/ .subnav { } .subnav li a { display: block; font-weight: bold; font-size: 1.1em; color: #0053a0; } * html .subnav li a { display: inline-block; width: 185px; } .subnav li a:hover, .subnav li .current, .subnav li .section { color: #000000; } .subnav li li a { padding: 3px 0 3px 0; font-weight: bold; font-size: 1em; color: #0053a0; } * html .subnav li li a { width: 170px; } .subnav li li a:hover, .subnav li li .current, .subnav li li .section { color: #000000; } .subnav li li li a { padding: 3px 0 3px 0; font-weight: normal; font-size: 1em; } * html .subnav li li li a { width: 155px; } .subnav li li li a:hover, .subnav li li li .current, .subnav li li li .section { color: #000000; }