/* ----------------------------------------------------------------------------------- -------------------------------------------------------------------------------------- Domain: sutherland.chicodev.com Stylesheet: /ui/styles/main.php Author: Brent White - ChicoWebDesign.com Version: June 01 2009 -------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------------- RESET ----------------------------------------------------------------------------------- */ * { outline: none; margin: 0; padding: 0; } a { color: #669934; text-decoration: none; } a:hover { color: #669934; text-decoration: underline; cursor: pointer; } img { display: block; } /* ----------------------------------------------------------------------------------- BODY ----------------------------------------------------------------------------------- */ body { min-width: 980px; padding: 15px 0 0; font-family: Arial; font-size: 12px; background: #000000 url(/ui/public/image/layout/body.gif) no-repeat 0 0; } .body { position: relative; width: 960px; } /* ----------------------------------------------------------------------------------- CLEAR ----------------------------------------------------------------------------------- */ .clear { clear: both; } br.clear { display:block !important; height:0 !important; line-height:0 !important; font-size:0 !important; } /* ----------------------------------------------------------------------------------- HEADER ----------------------------------------------------------------------------------- */ #header { background: #000; width: 100%; height: 170px; border: solid #631010; border-width: 1px 0; } #header-logo { position: relative; top: 20px; left: 25px; float: left; background: url(/ui/public/image/layout/sutherland-landscape-logo.gif) no-repeat 0 0; width: 393px; height: 128px; } #header-logo a { display: block; line-height: 128px; text-indent: -9999px; overflow: hidden; } #header_navigation { display: block; float: right; } #header_navigation li { display: block; float: left; padding: 60px 0; color: #fff; } #header_navigation a, #header_navigation span { display: block; float: left; font-size: 20px; line-height: 30px; padding: 10px; } /* ----------------------------------------------------------------------------------- CONTENT ----------------------------------------------------------------------------------- */ #content { width: 960px; } /* ----------------------------------------------------------------------------------- CHECKOUT ----------------------------------------------------------------------------------- */ #checkout { width: 960px; } /* ----------------------------------------------------------------------------------- LEFT COLUMN ----------------------------------------------------------------------------------- */ #left-column { width: 255px; float: left; padding: 40px 10px 0 0; } /* ----------------------------------------------------------------------------------- NAVIGATION ----------------------------------------------------------------------------------- */ #navigation { display: block; width: 240px; padding: 0 0 0 15px; } #navigation li { display: block; display: inline-block; list-style: none; width: 240px; } #navigation a { display: block; display: inline-block; background: url(/ui/public/image/layout/navigation-icon.png) no-repeat 0 0; width: 215px; font-size: 14px; font-weight: bold; text-transform: uppercase; line-height: 16px; color: #fff; padding: 5px 0 4px 25px; } #navigation a:hover { text-decoration: none; color: #669934; } #navigation ul { width: 215px; padding: 0 0 16px 25px; } #navigation ul li { width: 211px; border: solid #631010; border-width: 0 0 0 4px; } #navigation ul li a { background: none; width: 191px; font-weight: normal; text-transform: capitalize; color: #669934; padding: 3px 0 0 20px; } #navigation ul li a:hover { color: #fff; } #navigation ul li.active a { background: url(/ui/public/image/layout/navigation-active.png) no-repeat 0 0; width: 201px; font-weight: bold; padding-left: 10px; color: #669934; cursor: default; } #navigation ul li ul, #navigation ul li ul * { display: none; } /* ----------------------------------------------------------------------------------- DIVIDER ----------------------------------------------------------------------------------- */ .divider { display: block; background: #E48E44 url(/ui/public/image/layout/headings.gif) repeat-x 0 0; width: 255px; height: 10px; margin: 15px 0; } /* ----------------------------------------------------------------------------------- RIGHT COLUMN ----------------------------------------------------------------------------------- */ #right-column { position: relative; background: url(/ui/public/image/layout/right-column.png) repeat-y 0 0; width: 674px; float: left; padding: 40px 0 40px 20px; overflow: hidden; } /* ----------------------------------------------------------------------------------- HEADING ----------------------------------------------------------------------------------- */ #heading { display: block; position: absolute; top: 147px; left: 25px; z-index: 10; background: #000; width: 624px; height: 48px; padding: 0 20px; font-weight: normal; font-size: 28px; line-height: 48px; } p.note { color: #669934; font-size: 10px; } /* ----------------------------------------------------------------------------------- BANNER ----------------------------------------------------------------------------------- */ #banner-wrapper { position: relative; height: 165px; margin: 0 0 20px 0; } #banner-wrapper.home { height: 255px; } #banner { background: #000; width: 664px; height: 150px; overflow: hidden; border: solid 5px #631010; } #banner-wrapper.home #banner { height: 240px; } #banner-loader { display: none; } #banner .banner-link { display: block; } #banner .banner-link img { border: none; } #banner-navigation { position: absolute; bottom: 0; left: 0; background: #631010; width: 674px; height: 3px; border-top: solid 2px #000; } .banner-images { float: right; height: 3px; } .banner-images li { display: block; float: left; background: #000; height: 3px; padding: 0 0 0 5px; } .banner-images li a { display: block; float: left; background: #631010; width: 10px; height: 3px; text-indent: -9999px; overflow: hidden; } .banner-images .selected a { background: #fff; } #banner #caption { position: absolute; background: #000; bottom:10px; left: 5px; width: 624px; height: 20px; padding: 10px 20px; overflow: hidden; } #banner.home #caption { top:5px; left: 440px; width: 190px; height: 200px; padding: 20px; } #banner #caption h1, #banner #caption h2, #banner #caption h3, #banner #caption h4, #banner #caption h5, #banner #caption h6 { font-size: 14px; font-style: italic; font-weight: bold; color: #669934; padding: 0 0 20px 0; } #banner #caption a, #banner #caption p { font-size: 12px; line-height: 18px; color: #fff; } #banner #caption a { font-weight: bold; text-decoration: none; } #banner #caption a:hover { text-decoration: underline; } #banner .pagination { display: none; } /* ----------------------------------------------------------------------------------- RIGHT COLUMN -- HEADINGS ----------------------------------------------------------------------------------- */ #right-column h1, #right-column h2, #right-column h3, #right-column h4, #right-column h5, #right-column h6 { color: #ffffff; font-weight: normal; } #right-column h1 { font-size: 24px; } #right-column h1 span { color: #631010; } #right-column h2 { font-size: 14px; line-height: 24px; } #right-column h3 { font-size: 16px; line-height: 24px; } #right-column h4 { font-size: 14px; line-height: 22px; } #right-column h5 { font-size: 14px; line-height: 22px; } #right-column h6 { font-size: 14px; line-height: 22px; } /* ----------------------------------------------------------------------------------- PARAGRAPH ----------------------------------------------------------------------------------- */ p { color: #ffffff; font-size: 14px; line-height: 18px; padding: 10px 0; } /* ----------------------------------------------------------------------------------- TABLE ----------------------------------------------------------------------------------- */ table { color: #fff; } caption { padding: 5px 0; } col {} thead {} tfoot {} tbody {} tr {} th {} td { padding: 5px; } /* ----------------------------------------------------------------------------------- RIGHT COLUMN -- HOME MODULE ----------------------------------------------------------------------------------- */ #home-module { padding: 30px 0 0 0; } #home-module .home-module-column { position: relative; list-style: none; float: left; width: 192px; min-height: 135px; height: auto !important; height: 135px; padding: 0 0 35px 30px; } #home-module .home-module-column a.view { display: block; position: absolute; bottom: 0; right: 0; background: url(/ui/public/image/layout/view-all.gif) no-repeat 0 0; width: 70px; height: 26px; font-family: Georgia; font-size: 12px; line-height: 26px; color: #ffffff; text-align: right; } /* ----------------------------------------------------------------------------------- CONTENT HEADING ----------------------------------------------------------------------------------- */ #content-heading { display: block; background: #E48E44 url(/ui/public/image/layout/headings.gif) repeat-x 0 0; color: #fff !important; font-size: 18px; line-height: 30px; height: 30px; margin: 0 0 20px 0; padding: 0 20px; } /* ----------------------------------------------------------------------------------- BREADCRUMBS ----------------------------------------------------------------------------------- */ #breadcrumbs { padding: 0 0 10px; } #breadcrumbs li { list-style: none; float: left; font-size: 14px; line-height: 18px; color: #669934; padding: 0 10px 0 0; text-transform: capitalize; } #breadcrumbs a { display: block; float: left; font-size: 14px; line-height: 18px; color: #669934; text-transform: capitalize; font-weight: bold; } #breadcrumbs a:hover { color: #ffffff; text-decoration: none; } /* ----------------------------------------------------------------------------------- PAGINATION ----------------------------------------------------------------------------------- */ .pagination { } .pagination p { float: left; } .pagination ul { float: right; } .pagination li { list-style: none; float: left; font-size: 14px; color: #669934; padding: 0; } .pagination a { display: block; float: left; font-size: 14px; color: #669934; border-right: solid 1px #631010; padding: 0 6px; } .pagination span { color: #631010; } .pagination a:hover { color: #ffffff; text-decoration: none; } .pagination .active a, .pagination li .active { color: #ffffff; cursor: default; } /* ----------------------------------------------------------------------------------- CONTENT -- RIGHT COLUMN -- PRODUCT BROWSE ----------------------------------------------------------------------------------- */ #product-browse { padding: 20px 0; } #product-browse li { list-style: none; float: left; width: 168px; height: 280px; text-align: center; } #product-browse a { display: block; width: 145px; height: 194px; color: #ffffff; font-weight: bold; font-size: 14px; } #product-browse img { background: #631010; padding: 5px; border: none; } #product-browse em { display: block; padding-top: 20px; text-transform: uppercase; font-style: normal; } /* ----------------------------------------------------------------------------------- CONTENT -- RIGHT COLUMN -- PRODUCT DESCRIPTION ----------------------------------------------------------------------------------- */ #product-details { padding: 30px 0 0 0; } /* -------------------------------------------------------------------------------- */ #product-details .left-column { float: left; width: 355px; padding: 0 15px 0 0; } #product-details .left-column #title { color: #631010; font-size: 20px; } #product-details .left-column .value { border: solid #631010; border-width: 1px 0; margin: 0 0 0 0; padding: 0 0 10px ; } #product-details .left-column .value li { clear: both; display: block; display: inline-block; list-style: none; width: 355px; color: #ffffff; } #product-details .left-column .value li strong, #product-details .left-column .value li em { display: block; float: left; width: 172.5px; padding: 0 0 0 5px; font-weight: normal; font-style: normal; } #product-details .left-column .value li span { display: block; border-bottom: solid 1px #631010; height: 18px; font-weight: bold; font-size: 10px; line-height: 18px; text-transform: uppercase; } /* -------------------------------------------------------------------------------- */ #product-details .right-column { float: left; width: 303px; overflow: hidden; } /* -------------------------------------------------------------------------------- */ #product-images li { float: left; padding: 0 10px 10px 0; } #product-images a { display: block; float: left; background: #631010; padding: 5px; overflow: hidden; } #product-images a img { border: none; } /* ----------------------------------------------------------------------------------- CONTENT -- RIGHT COLUMN -- PRODUCT DESCRIPTION ----------------------------------------------------------------------------------- */ #product-description { padding: 20px 0 0 0; } #product-description h3 { font-size: 14px; padding: 20px 0 0 0; } /* -------------------------------------------------------------------------------- */ #product-description .left-column { float: left; width: 259px; padding: 0 10px 0 0; } #product-description .left-column a { display: block; float: left; padding: 10px; background: #523017; } #product-description .left-column a img { border: none; } /* -------------------------------------------------------------------------------- */ #product-description .right-column { float: left; width: 394px; padding: 0 0 0 10px; } #product-description .right-column p { font-size: 14px; margin: 0 0 20px; } #product-description .right-column fieldset, #product-description .right-column legend { border: none; color: #ffffff; font-size: 18px; } #product-description h3, #product-description .right-column fieldset strong { font-size: 14px; } #product-description .right-column fieldset div { padding: 10px 0; } #product-description .right-column fieldset div .input { padding: 3px; border: solid 1px #8e6f5d; } #product-description .right-column fieldset .submit, #product-description .right-column fieldset div a { float: left; margin: 0 20px 0 0; width: 132px; height: 35px; } #product-description .right-column fieldset div a img { border: none; width: 132px; height: 35px; } /* -------------------------------------------------------------------------------- */ #product-description .product-thumbnails li { list-style: none; float: left; width: 131px; } #product-description .product-thumbnails li a { display: block; float: left; padding: 10px; background: #523017; width: 110px; height: 148px; } #product-description .product-thumbnails li a img { border: none; } /* -------------------------------------------------------------------------------- */ #product-description .product-navigation { padding: 40px 0 0 134px; } #product-description .product-navigation li { list-style: none; float: left; background: #E48E44 url(/ui/public/image/layout/headings.gif) repeat-x 0 0; margin: 0 5px 0; width: 110px; height: 30px; } #product-description .product-navigation a { display: block; float: left; width: 110px; height: 30px; line-height: 30px; text-align: center; color: #fff; text-transform: uppercase; } #product-description .product-navigation .prev a { background: url(/ui/public/image/layout/product-prev.gif) no-repeat 24px 50%; } #product-description .product-navigation .next a { background: url(/ui/public/image/layout/product-next.gif) no-repeat 80px 50%; } /* ----------------------------------------------------------------------------------- FOOTER ----------------------------------------------------------------------------------- */ #footer { padding: 100px 0 0 0; } #footer-logo { background: url(/ui/public/image/layout/sutherland-landscape-footer.png) no-repeat 0 0; width: 197px; height: 68px; text-indent: -9999px; overflow: hidden; } #footer ul { padding: 10px 0 0 0; } #footer li { display: inline; list-style: none; color: #669934; font-size: 12px; line-height: 26px; white-space: nowrap; padding: 0 50px 0 0; } #footer strong { color: #ffffff; font-weight: normal; } /* ----------------------------------------------------------------------------------- FORMS ----------------------------------------------------------------------------------- */ .input, .textarea { padding: 3px; border: none; background: #fff; } .required { color: red; } input.long { width: 50%; } textarea.long { width: 50%; } fieldset { border: none; background: none; padding: 5px; color: #fff; } fieldset legend { display: none; } fieldset div { padding: 2px; } fieldset div label { cursor: pointer; float: left; width: 150px; color: #fff; } /* -------------------------------------------------------------------------------- */ .form-status { width: 610px; margin: 0 0 20px; padding: 20px; border: solid 5px #631010; font-size: 14px; line-height: 25px; background: #7B1313; color: #fff; } .form-status { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /* ----------------------------------------------------------------------------------- MANUFACTURERS ----------------------------------------------------------------------------------- */ .manufacturers { padding: 0; margin: 0; } .manufacturers li { list-style: none; float: left; margin: 0; padding: 0 20px 10px 0 !important; height: 50px; line-height: 50px; } .manufacturers a { background-position: 0 -50px; background-repeat: no-repeat; display: block; text-indent: -3000px; font-size: 0; width: 120px; height: 50px; } .manufacturers a:hover { background-position: 0 0; } .manufacturers .allanblock { background-image: url(/ui/public/image/logos/allanblock.gif); } .manufacturers .anchor { background-image: url(/ui/public/image/logos/anchor.gif); } .manufacturers .aquascape { background-image: url(/ui/public/image/logos/aquascape.gif); } .manufacturers .basalite { background-image: url(/ui/public/image/logos/basalite.gif); } .manufacturers .belgard { background-image: url(/ui/public/image/logos/belgard.gif); } .manufacturers .calstone { background-image: url(/ui/public/image/logos/calstone.gif); } .manufacturers .eldorado { background-image: url(/ui/public/image/logos/eldorado.gif); } .manufacturers .keystone { background-image: url(/ui/public/image/logos/keystone.gif); } .manufacturers .landw { background-image: url(/ui/public/image/logos/lwstone.gif); } .manufacturers .pavestone { background-image: url(/ui/public/image/logos/pavestone.gif); } .manufacturers .realstone { background-image: url(/ui/public/image/logos/realstone.gif); } /* ----------------------------------------------------------------------------------- TABS ----------------------------------------------------------------------------------- */ ul.tabs li { float: left; list-style: none; padding: 20px 8px 0 0; } ul.tabs li a { background-image: url(/ui/public/image/layout/calculator.jpg); background-repeat: no-repeat; display: block; height: 34px; background-color: #000; line-height: 34px; padding: 0 10px 0 50px; text-decoration: none; border-style: solid; border-color: #28351c; border-width: 1px 1px 0 1px; width: 70px; } ul.tabs li a:hover, ul.tabs li a.active { background-color: #28351c; } ul.tabs li a.rectangle { background-position: 10px 0; } ul.tabs li a.triangle { background-position: 10px -68px; } ul.tabs li a.circle { background-position: 10px -34px; } ul.tabs li a:hover.rectangle, ul.tabs li a.active.rectangle { background-position: 10px -102px; } ul.tabs li a:hover.triangle, ul.tabs li a.active.triangle { background-position: 10px -170px; } ul.tabs li a:hover.circle, ul.tabs li a.active.circle { background-position: 10px -136px; } #tab-cont { border: 1px solid #28351c; padding: 15px; display: block; float: none; clear: both; } #tab-cont input { padding: 3px; border: none; } #tab-cont span.desc { display: block; clear: left; width: 120px; float: left; } #rectangle { width: 100%; background: url(/ui/public/image/layout/rectangle.jpg) no-repeat 100% 50%; } #circle { width: 100%; background: url(/ui/public/image/layout/circle.jpg) no-repeat 100% 50%; } #triangle { width: 100%; background: url(/ui/public/image/layout/triangle.jpg) no-repeat 100% 50%; } #site_by { width: 133px; height: 30px; display: block; background: url(/ui/public/image/layout/cwd-tag.gif) no-repeat 0 0; text-indent: -3000px; } /* ----------------------------------------------------------------------------------- LIGHTBOX ----------------------------------------------------------------------------------- */ #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightbox-container-image { padding: 10px; } #lightbox-loading { background: url(/ui/public/image/lightbox/loading.gif) no-repeat 50% 45%; position: absolute; height: 100%; width: 100%; } #lightbox-loading img { display: none; } #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left: 0; float: left; } #lightbox-nav-btnNext { right: 0; float: right; } #lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; } #lightbox-container-image-data { padding: 0 10px; color: #666; } #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; }