/* Title: Northwest Fence & Supply Author: Timo Brimhall (www.timodesign.com) Updated: February 2 2009 Notes: For Aaron Judkins ---------------------------------------------------------------------------------------------- */ /* Links ----------------------------------------------- */ a { overflow: hidden; /* Firefox: This makes the width of the outline/halo around a focused link that has image replacement w/ text-indent property */ } a:link { color: #135ba3; } a:visited { color: #5f3e4c; } a:hover, a:active { color: #6f2342; } a:active { outline: none; /* Firefox: Removes dotted borders from links In Firefox */ } a:focus { -moz-outline-style: none; /* Firefox: Removes dotted borders from links In Firefox */ } /* Mass Reset ----------------------------------------------- */ /* Thanks to Eric for this reset http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */ html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */ a img, :link img, :visited img {border:none;} /* Common Elements ----------------------------------------------- */ body,ul,ol,dl,td,th,caption,pre,p,blockquote,input,textarea { /* Sets the main font-family, line-height and color. Font size is set by the and #container. */ color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4em; } body { margin: 0; padding: 0; text-align: center; background-color: #244f32; } p { margin: 1em 0 1em; padding: 0; } h1 { color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 200%; font-weight: bold; line-height: 1em; margin: 0; padding: 0 0 10px 0; } h2 { color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 160%; font-weight: bold; line-height: 1.2em; text-transform: uppercase; margin: 0; padding: 0 0 10px 18px; } h3 { color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 130%; font-weight: bold; line-height: 1.2em; margin: 0 0 -5px 0; padding: 0; } h4 { color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 120%; font-weight: bold; line-height: 1.2em; margin: 0 0 0 0; padding: 0; } blockquote { font-style: italic; margin: 0 0 2.5em 0; padding: 1em; padding-left: 50px; border: 1px solid #DDD; background: #EEE url(../images/quote-bg.gif) 0 0 no-repeat; _zoom: 1; } blockquote strong span { display: block; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; font-size: 110%; padding-top: .6em; } abbr, acronym { font-style: normal; cursor: help; border-bottom: 1px dotted #bbb; } em { font-style: italic; } strong { font-weight: bold; } del { color: #999; text-decoration: line-through; } hr { color: #DDDBC7; height: 1px; margin: 1.5em 0 1.5em 0; border: 0; background-color: #DDDBC7; } /* Layout ----------------------------------------------- */ #container { font-size: 100%; text-align: center; background: #fff url(../images/bg-body.gif) 0 0 repeat-x; } #container-inner { background: transparent url(../images/bg-header.jpg) 50% 0 no-repeat; } #header, #wrapper, #cont, #footer #footer-inner { margin: 0 auto; text-align: left; width: 960px; position: relative; } #wrapper { position: relative; padding-top: 40px; } #header { position: relative; height: 88px; } #logo { position: absolute; top: 0; left: 5px; border: none; width: 248px; height: 119px; } #logo img { border: 0; } /*a#logo-link { display: block; position: absolute; top: 16px; left: 31px; width: 252px; height: 43px; background: transparent url(../images/logo-screen.gif) 0 0 no-repeat; }*/ #logo a em { background: url(../images/logo-over.png) 0 0 no-repeat; width: 248px; height: 119px; position: absolute; top: -45px; left: 25px; padding: 0; z-index: 2; display: none; cursor: pointer; } #primary { float: right; width: 685px; } #secondary { float: left; width: 240px; padding-left: 10px; } #footer { clear: left; padding: 101px 0 0 0; background: transparent url(../images/bg-footer.png) 50% 0 repeat-x; height: 200px; } /* Header ----------------------------------------------- */ /* -- Nav -- */ #nav { position: absolute; top: 35px; left: 269px; margin: 0; padding: 0 0 0 60px; width: 650px; list-style: none; } #nav-subfencing { position: absolute; top: 56px; left: 400px; margin: 0; padding: 0; width: 268px; height: 68px; z-index: 100; } #nav-subfencing li { margin: 0; padding: 0; } #nav-subfencing li a { margin: 0; padding: 0; display: block; height: 63px; text-indent: -5000px; } #nav-subfencing li#chain { width: 126px; float: left; } #nav-subfencing li#chain a { width: 126px; background: url(../images/nav-sub-fencing.png) 0 -126px no-repeat; } #nav-subfencing li#chain a:hover { background-position: 0 -189px; } #nav-subfencing li#chain.selected a, #nav-subfencing li#chain.selected a:hover { background-position: 0 0; } #nav-subfencing li#ornam { width: 142px; float: right; } #nav-subfencing li#ornam a { width: 142px; background: url(../images/nav-sub-fencing.png) right 0 no-repeat; } #nav-subfencing li#ornam a:hover { background-position: right -63px; } #nav-subfencing li#ornam.selected a, #nav-subfencing li#ornam.selected a:hover { background-position: right -126px; } /* Lava Lamp */ .lavaLampWithImage { position: relative; height: 29px; width: 421px; padding: 15px; margin: 10px 0; overflow: hidden; z-index: 50; } .lavaLampWithImage li { float: left; list-style: none; margin-right: 20px; } .lavaLampWithImage li.back { background: url(../images/lava.png) no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLampWithImage li.back .left { background: url(../images/lava.png) no-repeat top left; height: 30px; margin-right: 9px; /* 7px is the width of the rounded shape */ } .lavaLampWithImage li a { font: 14px arial; text-decoration: none; color: #e7dfe2; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; line-height: 1em; } .lavaLampWithImage li a:hover, .lavaLampWithImage li.current a { color: #fff; } .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { border: none; } /* -- sub navigation -- */ #subnav-pointer { display: block; position: absolute; z-index: 61; top: 58px; left: 450px; width: 25px; height: 14px; background: url(../images/subnav-pointer.png) 0 0 no-repeat; } #subnav { position: absolute; z-index: 60; top: 70px; left: 345px; background: url(../images/subnav-r.png) right top no-repeat; padding-right: 13px; } #subnav, #subnav ul { width: 605px; height: 43px; } #subnav ul { margin: 0; padding: 0; list-style: none; background: url(../images/subnav-l.png) left top no-repeat; } #subnav li { float: left; margin: 0; padding: 0; padding-top: 7px; } #subnav a { color: #fff; font-size: 15px; text-decoration: none; margin: 0 0 0 10px; height: 25px; line-height: 25px; padding-right: 6px; float: left; display: block; } #subnav a span { padding-left: 12px; padding-right: 8px; } #subnav .selected a, #subnav .selected a:hover { background: url(../images/subnav-bg-r.gif) right top no-repeat; color: #471e2b; } #subnav .selected a span, #subnav .selected a:hover span { background: url(../images/subnav-bg-l.gif) left top no-repeat; display: block; } #subnav a:hover { background: url(../images/subnav-bg-r-o.gif) right top no-repeat; } #subnav a:hover span { background: url(../images/subnav-bg-l-o.gif) left top no-repeat; display: block; } /* Content ----------------------------------------------- */ /* -- home -- */ #home h1 { margin: 0; padding: 46px 0 0 273px; text-align: right; font-weight: normal; font-size: 16px; color: #b699a5; letter-spacing: -.015em; text-indent: 0; width: auto; height: auto; } #home .home-contact { font-size: 110%; } #home .home-contact span { font-size: 140%; } #home .list { margin: 10px 0 40px 0; padding: 12px 0 8px 0; border-top: 1px solid #b6aaa0; border-bottom: 1px solid #b6aaa0; } #slideshow { position: relative; width: 656px; height: 466px; background: transparent url(../images/bg-slideshow.png) 0 0 no-repeat; margin-top: -30px; margin-bottom: 25px; } #slideshow div { position: absolute; top: 49px; left: 44px; } .carousel-wrap { position: relative; width: 614px; height: 212px; margin-left: 20px; margin-bottom: 30px; } .carousel-wrap a.prev, .carousel-wrap a.next { display: block; text-indent: -5000px; width: 36px; height: 36px; } .carousel-wrap a.prev { position: absolute; top: 88px; left: 0; background: transparent url(../images/btn-carousel-prev.gif) 0 0 no-repeat; } .carousel-wrap a.next { position: absolute; top: 88px; right: 0; background: transparent url(../images/btn-carousel-next.gif) 0 0 no-repeat; } .carousel-wrap a:hover.prev, .carousel-wrap a:hover.next { background-position: 0 -36px; } .carousel-wrap span.bracket-l { /* brackets */ display: block; position: absolute; z-index: 20; width: 31px; height: 212px; top: 0; left: 37px; background: transparent url(../images/carousel-bracket-l.gif) 0 0 no-repeat; } .carousel-wrap span.bracket-r { /* brackets */ display: block; position: absolute; z-index: 20; width: 31px; height: 212px; top: 0; right: 37px; background: transparent url(../images/carousel-bracket-r.gif) 0 0 no-repeat; } .carousel { width: 540px; margin-left: 67px; padding-top: 22px; } .carousel ul { margin: 0; padding: 0; } .carousel ul li { margin: 0; padding: 0 5px; } /* -- primary -- */ #primary { position: relative; } #inner-main { padding: 0 10px 0 0; } h1 { text-indent: -5000px; width: 239px; height: 65px; } h1#hdr-fencing { background: transparent url(../images/hdr-fencingproducts.png) 0 0 no-repeat; } h1#hdr-installation { background: transparent url(../images/hdr-installation.png) 0 0 no-repeat; } h1#hdr-about { background: transparent url(../images/hdr-about.png) 0 0 no-repeat; } h1#hdr-contact { background: transparent url(../images/hdr-contact.png) 0 0 no-repeat; } /* -- fencing -- */ .list li { padding-left: 18px; background: transparent url(../images/ico-bullet.png) 0 3px no-repeat; margin-bottom: 10px; } .bg-trans { background-color: #f8f8f8; padding: 4px 22px 15px; border-top: 1px solid #786860; border-bottom: 1px solid #cbbeb6; } .name { font-size: 150%; } /* -- Contact -- */ #tbl-contact td { padding: 0 10px 0; } #tbl-contact .title { color: #5e5d5c; display: block; padding-bottom: 20px; } #contact-info { position: absolute; top: 0; right: 0; width: 250px; } #contact-info p { font-size: 120%; margin-top: 0; } #contact-info p#ops { line-height: 1.3em; } #contact-info p span { font-size: 90%; } #location { padding-left: 10px; } #location h3 { margin-top: .5em; margin-bottom: .5em; } #location h3 span { font-weight: normal; font-size: 90%; } #location img { padding-left: 10px; } #location iframe { border: 2px solid #333; } #location small { display: block; padding-top: 1px; } /* Facilities */ #facilities h4 { margin-left: 5px; padding-bottom: 4px; } #facilities h4.address { font-weight: normal; font-size: 110%; } #facilities h4.address a { font-size: 90%; } /* -- secondary -- */ /* nav side */ #nav-side { margin: 0 0 40px 0; padding: 0; list-style-type: none; } #nav-side li { margin-bottom: 5px; } #nav-side li a { display: block; line-height: 40px; text-decoration: none; font-size: 17px; color: #333; padding-left: 20px; background: #a5958a url(../images/nav-side-bg.gif) 0 0 repeat-x; border-top: 1px solid #d0c5bc; border-bottom: 1px solid #86786f; _zoom: 1; /* IE 6 Hack - fixed the side nave so the above styling is visible */ } #nav-side li a:hover { background: #d8d2cd; border-top: 1px solid #928177; border-bottom: 1px solid #e7e5e3; text-decoration: none; } #nav-side li.selected a, #nav-side li.selected a:hover { color: #fff; background: #6f2342 url(../images/nav-side-selected-bg.gif) 0 0 repeat-x; border-top: 1px solid #621d39; border-bottom: 1px solid #b6a99e; text-decoration: none; } /* -- Thumbnail Styles -- */ #pics { width: 700px; } #pics h3 { padding-bottom: 8px; padding-top: 4px; padding-left: 5px; font-weight: normal; } #pics h3.mainhdr { font-size: 160%; } #pics ul { list-style: none; margin: 5px 0 15px; padding: 0; } #pics ul li { background:#EBEBEB url(../images/pic-bg.gif) repeat-y center top; border-color: #e0e0e0; border-style: solid; border-width: 1px; color: #666666; float: left; margin: 0 9px 9px 0; position: relative; text-align: center; width: 225px; height: 195px; } #pics ul li.last { margin-right: 0; } #pics ul li.blank { background: none; border-color: #fff; } #pics ul li a, #pics ul li a:hover { border:0 none; float: left; padding: 5px 5px 6px; } #pics ul li .descrip { line-height: 1.3em; font-size: 12px; } #pics ul li .descrip em { display: block; font-size: 11px; } #pics .colors { margin-left: 6px; } #pics .colors h4 { font-weight: normal; color: #666666; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; margin-bottom: 5px; margin-top: 4px; padding-left: 2px; } #pics .colors h4.first { border-bottom: 1px solid #a89c94; border-top: 1px solid #a89c94; } #pics .colors h4.second { border-bottom: 1px solid #cbc2bc; border-top: 1px solid #cbc2bc; } #pics .colors ul { margin-left: 2px; } #pics .colors ul li { background: none; border: none; color: #666666; float: left; margin: 0 15px 0 0; text-align: left; width: 100px; height: 27px; padding-left: 0; line-height: 27px; } #pics .colors ul.multi li { margin: 0 15px 5px 0; } #pics .colors ul li.other { width: 300px; } #pics .colors ul li div { background: #EBEBEB; border: 1px solid #333; color: #666666; float: left; margin: 0 10px 0 0; position: relative; text-align: center; width: 25px; height: 25px; } /* Slats */ #slatwrap { position: relative; margin-bottom: 30px; } #slatwrap #slatimg { position: absolute; top: 15px; right: 1px; } #pics .colors.slats h4 span { color: #999; font-size: 11px; padding-left: 36px; } #pics .colors.slats { width: 450px; } #pics .colors.slats ul li div { cursor: pointer; } #pics .colors.slats ul li { width: 120px; _font-size: 90%; /* IE 6 Hack - So that the text doesn't wrap so there aren't three rows */ _width: 122px; /* IE 6 Hack - So that the text doesn't wrap */ } .info { font-size: 11px; font-style: italic; color: #999999; margin: -10px 0 0 10px; } #pics .colors ul li div.color-black { background: #000; } #pics .colors ul li div.color-green { background: #376f39; } #pics .colors ul li div.color-darkgreen { background: #216443; } #pics .colors ul li div.color-brown { background: #6d532b; } #pics .colors ul li div.color-darkbrown { background: #472c28; } #pics .colors ul li div.color-redwood { background: #6f1e2f; } #pics .colors ul li div.color-white { background: #fff; } #pics .colors ul li div.color-beige { background: #cab091; } #pics .colors ul li div.color-silver { background: #bcc0bd; } #pics .colors ul li div.color-blue { background: #1ea7ca; } #pics .colors ul li div.color-tahoeblue { background: #406170; } #pics .colors ul li div.color-desertsand { background: #e5dfd6; } #pics .colors ul li div.color-bronze { background: #473228; } /* Dog Runs */ #dogrun-sizes { padding-left: 3px; } #dogrun-sizes h4 { font-weight: normal; margin-bottom: .3em; } #dogrun-sizes h4 em { font-size: 80%; } #dogrun-sizes table { margin-bottom: 2em; margin-left: 10px; } #dogrun-sizes table td { padding: 3px 40px 3px 0; } /* -- Galleria Styles -- */ .galleria{list-style:none;width:200px} .galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0} .galleria li a{display:none} .galleria li div{position:absolute;display:none;top:0;left:180px} .galleria li div img{cursor:pointer} .galleria li.active div img,.galleria li.active div{display:block} .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto} .galleria li .caption{display:block;padding-top:.5em} * html .galleria li div span{width:400px} /* MSIE bug */ .caption { position: absolute; font-size: 14px; color:#333; text-align: center; bottom: -15px; left: 0; width: 670px; } .demo{ position:relative; } .gallery_demo { width:670px; margin: 0; padding: 0 0 0 27px; } .gallery_demo li { /*width:68px; height:50px;*/ width:110px; height:70px; border: 4px solid #909090; margin: 5px 8px 5px 0; background:#fff; } .gallery_demo li div { left:240px } .gallery_demo li div .caption { font:italic 0.7em/1.4 georgia,serif; } li.active { border-color: #6f2342; } #main_image { margin:0 0 58px 0; height:363px; width:670px; background: transparent url(../images/bg-slide.png) 0 0 no-repeat; position: relative; } #main_image img { margin: 25px 0 10px 28px; } .nav { position: absolute; top: 385px; left: 50%; width: 160px; padding: 0; margin: 0 0 0 -80px; z-index: 99; } .nav li { float: left; width: 80px; } .nav li a { float: left; display: block; width: 80px; height: 31px; text-indent: -5000px; } .nav #btn-prev a { background: transparent url(../images/btn-prev.png) 0 0 no-repeat; } .nav #btn-next a { background: transparent url(../images/btn-next.png) 0 0 no-repeat; } .nav li#btn-prev a:hover, .nav li#btn-next a:hover { background-position: 0 -31px; } /* -- Left Bar Bottom -- */ p#btn-gaq-installation { _padding-bottom: 1em; /* IE6 Hack - Space between buttons*/ } a.btn-getaquote { display: block; margin-top: 2em; width: 218px; height: 61px; text-indent: -5000px; } a:hover.btn-getaquote { background-position: 0 -61px !important; } #btn-gaq-installation a { background: transparent url(../images/btn-getaquote-installation.png) 0 0 no-repeat; } #btn-gaq-doityourself a { background: transparent url(../images/btn-getaquote-doityourself.png) 0 0 no-repeat; } #btn-gaq-doityourself { margin-top: -1em; margin-bottom: 2em; } #social { border: none; padding: 1em 0 1em 40px; height: 48px; margin-left: auto; margin-right: auto; } #logo17yrs { display: block; padding: 1em 0 1em 10px; } #bbbseal { display: block; border: none; width: 90px; height: 147px; margin: 15px 0 5px 60px; } /* -- Get a Quote -- */ #getaquote h2 { text-transform: none; padding-left: 0; } #getaquote form li.error { border: 1px solid #e3baba !important; } /* -- Brochures -- */ .brochures { width: 330px; float: left; margin-right: 15px; } .brochures.last { margin-right: 0; } .brochures h3 { margin-top: 10px; padding-left: 10px; font-weight: normal; _padding-bottom: 1em; /* IE 6 Hack - Fixes the space below the brochure title */ } .brochures ul { margin: 13px 0 0 0; padding: 10px; background: transparent url(../images/pdf-lis-bg.png) 0 0 repeat-x; border-top: 1px solid #928278; } .brochures ul li { background: transparent url(../images/ico-pdf.png) 0 50% no-repeat; margin-bottom: .7em; } .brochures ul li a { padding-left: 20px; } /* Footer ----------------------------------------------- */ #footer #footer-wrap { /*height: 200px;*/ background-color: #244f32; } #footer #copyright { height: 42px; font-size: 12px; color: #fff; text-align: right; margin: 0; padding: 0; width: 500px; position: absolute; right: 30px; top: 40px; } #footer h3 { color: #fff; padding: 40px 0 0 13px; margin: 0 0 -8px 0; } #footer .footer-contact { font-size: 16px; line-height: 1.5em; color: #fff; padding-left: 13px; } #footer a { color: #a7b9ad; text-decoration: none; } #footer a:hover { text-decoration: underline; color: #fff; } /* -- Site Map -- */ #sitemap { padding-bottom: 5em; padding-left: 13px; } #sitemap h3 { margin-bottom: .9em; padding-left: 0; } #sitemap h4 { color: #fff; border-bottom: 2px solid #a7b9ad; font-weight: normal; margin-bottom: .7em; padding-bottom: 2px; } #sitemap h5 { color: #d3dcd6; border-bottom: 1px solid #668470; margin-bottom: .7em; margin-top: .2em; padding-bottom: 1px; } #sitemap ul { list-style: none; margin: 0; padding: 0; } #sitemap ul li { margin: 0 0 .5em 0; padding: 0; } #sm-fp { padding-bottom: 15px; } #sm-fp div { width: 138px; padding-right: 23px; float: left; } #sm-fp div.last { padding-right: 0; } .sm-section { width: 180px; float: left; padding-right: 30px; } /* Forms ----------------------------------------------- */ form { margin: 0; padding: 0; height: 100%; } label { color: #654c38; font-size: 110%; font-weight: bold; margin-right: 8px; } label.sub { font-weight: normal; } .input { width: 280px; margin: 3px 12px 3px 0; padding: 3px 4px 3px 4px; border: 1px solid #8c6f56; background-color: #fff; line-height: normal; } /* Misc ----------------------------------------------- */ .float-l { float: left; } .float-r { float: right; } .clear { clear: both; } .clear-l { clear: left; } .clear-r { clear: right; } .pad-r { padding-right: 20px; } .hide { display: none; } .show { display: block; } .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height:1%;}.clearfix{display:block;}/* End hide from IE-mac */