/* __________________________________________________________________ ERIC MEYER'S RESET.CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* __________________________________________________________________ GENERIC STUFF */ strong { font-weight: bold; } em { font-style: italic; } a { color: #366; text-decoration: none; } a:hover { text-decoration: underline; } p#card-logos { text-indent: -9999px; height: 24px; width: 181px; line-height: 24px; background: url(/sitefiles/42/design/cards.jpg) 50% 0 no-repeat; margin: 0; position: absolute; left: 6px; bottom: 65px; clear: both; } body { font-size: 62.5%; _font-size: 10px; font-family: "Lucida Grande", Arial, Tahoma, "Bitstream Vera Sans", sans-serif; background: #EBF3F7 url(/sitefiles/42/design/body-bg.gif) 9px 1px repeat; color: #699; line-height: 1.5; } #container { width: 970px; margin: 60px auto; } #top, #col-wrap { float: left; width: 100%; clear: both; } #top h1 { width: 196px; height: 86px; float: left; margin: 0 8px 0 0; } #top h1 a { display: block; width: 196px; height: 86px; text-indent: -9999px; outline: none; background: url(/sitefiles/42/design/logo.png) 0 0 no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/sitefiles/42/design/logo.png", sizingMethod="scale"); cursor: pointer; } #top #top-right { background: url(/sitefiles/42/design/top-right.gif) 0 0 no-repeat; float: left; width: 730px; height: 86px; padding: 0 20px 0 16px; } #cols-top, #cols-y, #cols-bottom { width: 970px; float: left; clear: both; } #cols-top { height: 6px; background: url(/sitefiles/42/design/cols-top.png) 0 0 no-repeat; } #cols-y { background: url(/sitefiles/42/design/cols-y.gif) 0 0 repeat-y; width: 970px; position: relative; padding: 10px 0 75px 0; } #cols-bottom { height: 10px; background: url(/sitefiles/42/design/cols-bottom.png) 0 0 no-repeat; } #left-col { width: 181px; float: left; padding: 0 23px 0 6px; } #left-col-bottom-borders { height: 40px; background: #3E797A; border-bottom: 15px solid #8BE6FA; width: 181px; clear: both; float: left; position: absolute; bottom: 0; _bottom: -1px; left: 6px; } #main-col { float: left; width: 730px; padding: 0 20px 0 10px; } #main-col h2#auto-title { color: #FFF; font-weight: bold; font-size: 1.6em; text-transform: uppercase; background: #669A99; padding: 0.5em 1em 0.3em 1em; border-bottom: 7px solid #8BE6FA; margin: 0 0 0.5em 0; } #footer { height: 40px; background: #669A99; border-bottom: 15px solid #8BE6FA; width: 750px; clear: both; float: left; position: absolute; right: 10px; bottom: 0; _bottom: -1px; } /* __________________________________________________________________ MENU: TOP LEVEL PRODUCT CATEGORIES HORIZONTAL */ ul#main-product-categories { float: left; width: 440px; padding: 45px 0 0 0; } ul#main-product-categories li { float: left; display: inline; padding: 0 1em 0 0; } ul#main-product-categories li a { display: block; float: left; color: #FFF; text-transform: uppercase; font-size: 1.1em; padding: 0 1em 0 0; border-right: 2px solid #366; line-height: 1.5; font-weight: bold; } ul#main-product-categories li.last a { border: none; padding: 0; } ul#main-product-categories li.active a { color: #033; } /* __________________________________________________________________ MENU: FULL PRODUCT MENU */ ul#product-menu { width: 181px; float: left; clear: both; margin: 0 0 40px 0; } ul#product-menu li a { text-transform: uppercase; padding: 0 20px; display: block; line-height: 1.75; } ul#product-menu li li { padding: 0; } ul#product-menu li li a { color: #4D4D4D; } ul#product-menu li li a.active { background: url(/sitefiles/42/design/product-menu-active.gif) 0 50% no-repeat; color: #FFF; } ul#product-menu li li a:hover { background: url(/sitefiles/42/design/product-menu-hover.gif) 0 50% no-repeat; color: #4D4D4D; text-decoration: none; } ul#product-menu li a.top-level { font-size: 1.2em; font-weight: bold; } ul#product-menu ul.expanded { padding: 0 0 0.5em 0; border-bottom: 2px solid #8DE6F9; margin: 0 0 0.5em 0; } ul#product-menu li.expanded { font-size: 1.1em; } /* __________________________________________________________________ MENU: BREADCRUMBS */ ul#breadcrumbs { float: left; width: 730px; clear: both; line-height: 1; text-transform: uppercase; letter-spacing: -0.05em; word-spacing: 0.05em; margin: 0 0 1em 0; } ul#breadcrumbs li { float: left; display: inline; margin: 0 0.5em 0 0; } ul#breadcrumbs li.hide { display: none; } ul#breadcrumbs li.back { padding: 0 0.5em 0 0; border-right: 1px solid #366; } /* __________________________________________________________________ MENU: BOTTOM LINKS */ ul#bottom-links { float: left; width: 540px; padding: 10px 20px 0 20px; } ul#bottom-links li { display: inline; float: left; text-transform: uppercase; line-height: 1.2; font-size: 1.1em; padding: 0 0.5em 0 0; border-right: 1px solid #FFF; margin: 0 0.5em 0 0; } ul#bottom-links li.last { padding: 0; border: 0; margin: 0; } ul#bottom-links li a { float: left; color: #FFF; } /* __________________________________________________________________ PRODUCT TEMPLATE: PRODUCT DETAILS */ #product { width: 730px; float: left; clear: both; background: url(/sitefiles/42/design/product-border.gif) 0 0 repeat-y; } #product-left { float: left; width: 400px; margin: 0 30px 0 0; } #product-left #main-pic { height: 400px; } #product-left #more-pics { margin: 1em 0 0 0; } #product-left #more-pics p.helptext { text-transform: uppercase; font-size: 0.9em; margin: 0; color: #366; } #product-left #more-pics table { border: 0; border-collapse: collapse; } #product-left #more-pics table td { padding: 0 8px 0 0; height: 72px; width: 72px; text-align: center; vertical-align: middle; line-height: 72px; } #product-left #more-pics a { display: block; width: 66px; height: 66px; line-height: 66px; padding: 3px; background: url(/sitefiles/42/design/extra-pic-border.gif) -72px 0 no-repeat; } #product-left #more-pics a:hover, #product-left #more-pics a.active { background-position: 0 0; } #product-left #more-pics table td a img { vertical-align: middle; } #product-right { float: right; width: 270px; } #product-right #producer-logo { width: 270px; float: left; clear: both; margin: 0 0 2em 0; } #product-right #producer-logo img { visibility: hidden; } #product #product-right h2 { text-transform: uppercase; font-size: 2.1em; font-weight: bold; letter-spacing: 0.05em; color: #366; margin: 0 0 0.5em 0; } #product #product-right h2 span { font-size: 9px; display: block; letter-spacing: 0; } #product #product-right dl { float: left; width: 270px; clear: both; font-size: 1.1em; } #product #product-right dl dt { color: #366; text-transform: uppercase; } #product #product-right dl dd { color: #000; margin: 0 0 1em 0; } #product #product-right form, #product #product-right form ul { float: left; width: 270px; clear: both; } #product #product-right form ul li { float: left; clear: both; width: 270px; margin: 0 0 1em 0; color: #000; } #product #product-right form ul li.half { float: left; width: 135px; clear: none; } #product #product-right form ul li.price { text-transform: uppercase; } #product #product-right form ul li.price span.price { font-size: 1.6em; color: #366; font-weight: bold; letter-spacing: 0.05em; } #product #product-right form ul li.price span.price em.strike { font-weight: normal; text-decoration: line-through; } #product #product-right form ul li.price span.price strong.discounted { color: #E41B00; } #product #product-right form ul li label { font-size: 1.1em; text-transform: uppercase; color: #366; display: block; } #product #product-right form ul li.half input { width: 2.5em; padding: 2px; border: 1px solid #366; text-align: center; } #product #product-right form ul li.half select { width: 115px; padding: 1px; border: 1px solid #366; } #product #product-right form ul li input#buy-button { width: 106px; height: 29px; cursor: pointer; background: url(/sitefiles/42/design/buy-now.gif) 0 0 no-repeat; border: 0; padding: 0; } /* __________________________________________________________________ PRODUCT TEMPLATE: PRODUCT LISTING 4 x 2 + PAGINATION */ .product-listing { float: left; clear: both; width: 730px; position: relative; padding: 0 0 35px 0; } .product-listing .product { width: 172px; float: left; margin: 0 14px 14px 0; color: #366; } .product-listing .last { margin: 0 0 14px 0; } .product-listing .product img { border: 1px solid #699; padding: 3px; background: #FFF; margin: 0 0 0.25em 0; } .product-listing .product h3 { font-size: 1.2em; text-transform: uppercase; margin: 0 15px; } .product-listing .product p.price { text-transform: uppercase; font-size: 1em; margin: 0 15px; } .product-listing .product p.price span { font-weight: bold; font-size: 1.2em; } .product-listing .product p.price span em.strike { font-weight: normal; text-decoration: line-through; } .product-listing .product p.price span strong.discounted { color: #E41B00; } .prodcut-nav { position: relative; float: left; width: 730px; clear: both; } .product-nav-inner { position: absolute; width: 530px; padding: 0 100px; left: 0; bottom: 0; height: 25px; line-height: 25px; text-align: center; font-size: 1.1em; font-weight: bold; } .product-nav-inner span { padding: 0 2em 0 0; text-transform: uppercase; } .product-nav-inner a { padding: 0 0.25em; font-weight: normal; } .product-nav a.next, .product-nav a.prev { display: block; width: 100px; height: 25px; outline: none; text-indent: -9999px; position: absolute; bottom: 0; } .product-nav a.next { right: 0; background: url(/sitefiles/42/design/product-next.gif) 100% 0 no-repeat; } .product-nav a.prev { left: 0; background: url(/sitefiles/42/design/product-prev.gif) 0 0 no-repeat; } /* __________________________________________________________________ PRODUCT FOCUS BANNERS */ .banners { width: 730px; clear: both; float: left; } .banner { float: left; margin: 0 10px 10px 0; } .banner-236 { margin: 0 11px 11px 0; } .banner-730 { margin: 0 0 10px 0; clear: both; width: 730px; } .right { margin: 0 0 10px 0; float: right; clear: right; } .banner a { display: block; width: 100%; float: left; } .banner a img { float: left; } /* __________________________________________________________________ CART TEMPLATE: SMALL SHOPPING CART */ #top #shopping-cart { float: right; width: 200px; color: #FFF; height: 16px; padding: 48px 0 22px 50px; background: url(/sitefiles/42/design/cart.gif) 0 30px no-repeat; } #top #shopping-cart p { font-size: 1.2em; text-transform: uppercase; font-weight: bold; line-height: 1.2; } #top #shopping-cart p span.count { padding: 0 0.3em 0 0; border-right: 2px solid #366; margin: 0 0.3em 0 0; } #top #shopping-cart p a { color: #FFF; } /* __________________________________________________________________ CART TEMPLATE: MAIN COUNTER */ #counter, #counter .line { float: left; width: 730px; clear: both; } #counter .product { width: 216px; float: left; padding: 10px; border: 1px solid #ADD; margin: 0 8px 8px 0; } #counter .right { margin: 0 0 8px 0; } #counter h3 { color: #366; font-size: 1.5em; font-weight: bold; text-transform: uppercase; margin: 0 0 0.3em 0; } #counter .product img { float: left; margin: 0 20px 15px 0; } #counter .product ul { float: right; width: 100px; } #counter .product ul li { line-height: 2; padding: 0 0 0.4em 0; color: #366; } #counter .product ul li.price { text-transform: uppercase; line-height: 1.4; padding: 0.5em 0 0 0; } #counter .product ul li.price span { float: left; clear: left; color: #4D4D4D; margin: 0.4em 0.5em 0 0; } #counter .product ul li.price strong { font-size: 1.5em; font-weight: bold; float: left; clear: right; } #counter .product ul li label { width: 100px; text-transform: uppercase; font-size: 1.1em; float: left; clear: both; } #counter .product select { border: 1px solid #699; color: #4D4D4D; width: 100px; padding: 1px; } #counter .product input.refresh { border: 0; padding: 0; cursor: pointer; width: 23px; height: 22px; background: url(/sitefiles/42/design/refresh.gif) 0 0 no-repeat; } #counter .product input.product-count { width: 22px; height: 19px; text-align: center; color: #4D4D4D; padding: 3px 0 0 0; margin: 0 0.2em 0 0; border: none; background: url(/sitefiles/42/design/count.gif) 0 0 no-repeat; float: left; clear: left; } #counter .product a.remove-product { float: left; clear: left; text-transform: uppercase; font-size: 1.1em; font-weight: bold; background: url(/sitefiles/42/design/remove-line.gif) 0 50% no-repeat; padding: 0 0 0 15px; } #counter #summary { width: 722px; border: 1px solid #699; float: left; clear: both; padding: 3px; text-transform: uppercase; } #counter #summary table { width: 730px; } #counter #summary table td, #counter #summary table th { padding: 5px 15px 2px 15px; font-weight: bold; border-right: 2px solid #699; line-height: 1; } #counter #summary table td.to-checkout { border: 0; text-align: right; vertical-align: middle; } #counter #summary table th { font-size: 1.4em; } #counter #summary table td { font-size: 1.3em; } #counter #summary table td span.price { font-size: 1.6em; } #counter #summary table td span.dark { color: #366; } #counter #summary .to-checkout a { font-weight: bold; text-decoration: none; color: #366; text-transform: uppercase; font-size: 2em; display: block; vertical-align: middle; background: url(/sitefiles/42/design/to-checkout.gif) 100% 50% no-repeat; padding: 0 35px 0 0; } #counter #summary table td.meta { border: 0; vertical-align: middle; font-size: 1em; padding: 25px 15px 5px 15px; } #counter #summary table td.meta a { color: #366; padding: 0 0 0 35px; background: url(/sitefiles/42/design/back.gif) 0 50% no-repeat; font-size: 2.2em; text-transform: uppercase; display: block; float: left; } #counter #summary table td.meta strong { float: right; clear: right; line-height: 2.2; } /* __________________________________________________________________ CHECKOUT */ #checkout-left { width: 460px; float: left; } #checkout-right { width: 250px; float: right; } #checkout, #checkout ul, #checkout ul li { width: 460px; float: left; clear: both; } #checkout fieldset { padding: 0 0 1.5em 0; } #checkout legend { color: #366; font-weight: bold; font-size: 1.3em; } #checkout ul li { line-height: 2; padding: 0 0 0.2em 0; } #checkout ul li.input-alone { width: 325px; padding: 0 0 0.2em 135px; _padding: 0 0 .2em 138px; } #checkout ul li label { float: left; width: 125px; cursor: pointer; margin: 0 10px 0 0; font-size: 1.1em; color: #699; } #checkout ul li input, #checkout ul li textarea, #checkout ul li select { border: 1px solid #ADD; padding: 2px; color: #366; font-family: Arial, Tahoma, "Bitstream Vera Sans", sans-serif; font-size: 1.1em; } #checkout ul li input:focus, #checkout ul li textarea:focus, #checkout ul li select:focus { border-color: #699; } #checkout ul li input.radio { float: left; clear: left; margin: 3px 10px 0 0; border: 0; padding: 0; } #checkout ul li .group select, #checkout ul li .group span { display: block; float: left; margin: 0 .5em 0 0; } #checkout ul li .group span { font-size: 1.2em; } #checkout ul li .group a { color: #669A99; font-style: italic; text-decoration: underline; padding: 0 0 0 3em; font-size: 1.1em; } #checkout-right .payment-info { width: 228px; float: right; padding: 10px 10px 0 10px; border: 1px solid #669A99; } #checkout-right .payment-info img { display: block; clear: both; margin: 15px auto 25px auto; } #checkout-right .payment-info .infobox1 { width: 228px; float: left; clear: both; } #checkout-right .infobox1 p { font-size: 1em; } #checkout .cod-accept { float: left; } #checkout .cod-accept input { float: left; margin: 3px 10px 0 0; border: 0; } #checkout .cod-accept label { width: auto; } #checkout #totalsum { padding: 15px 0 0 0; float: right; clear: right; width: 250px; } #checkout #totalsum span#sum { padding: 0.3em 0.6em; font-weight: bold; font-size: 1.4em; float: left; } #checkout p.disclaimer { font-size: 1.1em; padding: .5em 0 0 0; width: 460px; float: left; clear: both; line-height: 1.2; } #checkout input#formSubmitBtn { float: left; clear: left; background: #3E797A; color: #FFF; text-transform: uppercase; font-size: 1.2em; font-weight: bold; padding: .3em .4em .25em .4em; border: 0; margin: 23px 0 0 0; cursor: pointer; } /* __________________________________________________________________ BLOG */ #entries { width: 730px; clear: both; } #entries .entry { width: 730px; float: left; clear: both; padding: 0 0 1.5em 0; border-bottom: 1px dotted #8cb3b2; margin: 0 0 1.5em 0; } #entries .entry h3 { font-size: 1.8em; font-weight: normal; text-transform: uppercase; line-height: 1; } #entries .entry p.meta { font-size: 1.1em; margin: 0 0 1em 0; color: #9dc4c4; } #entries .entry p.ingress { line-height: 1.5; font-size: 1.1em; } #entry h2 { font-size: 2.2em; font-weight: normal; text-transform: uppercase; line-height: 1; color: #366; } #entry p#meta { font-size: 1.1em; margin: 0 0 1em 0; color: #9dc4c4; } #entry p#ingress { font-size: 1.2em; font-weight: bold; line-height: 1.5; margin: 0 0 1.5em 0; } /* __________________________________________________________________ GENERIC TYPOGRAPHY */ .infobox1 h1, .infobox2 h1 { font-weight: normal; font-size: 2.6em; margin: 0 0 0.25em 0; } .infobox1 h2, .infobox2 h2 { font-weight: normal; font-size: 2.2em; margin: 0 0 0.25em 0; } .infobox1 h3, .infobox2 h3 { font-weight: bold; font-size: 1.8em; margin: 0 0 0.25em 0; } .infobox1 h4, .infobox2 h4, #entry #text-body h4 { font-weight: bold; font-size: 1.4em; margin: 0 0 0.25em 0; } .infobox1 h5, .infobox2 h5 { font-weight: bold; font-size: 1.1em; margin: 0 0 1em 0; } .infobox1 p, .infobox2 p, #entry #text-body p, .infobox1 ul, .infobox2 ul, #entry #text-body ul, .infobox1 ol, .infobox2 ol, #entry #text-body ol, .infobox1 dl, .infobox2 dl, #entry #text-body dl, .infobox1 table, .infobox2 table, #entry #text-body table { font-size: 1.1em; line-height: 1.7; margin: 0 0 1.7em 0; } .infobox1 ul, .infobox2 ul, #entry #text-body ul { list-style-type: square; padding: 0 0 0 1.3em; } .infobox1 ol, .infobox2 ol, #entry #text-body ol { list-style-type: decimal; padding: 0 0 0 1.5em; } .infobox1 dl dt, .infobox2 dl dt, #entry #text-body dl dt { font-weight: bold; } .infobox1 dl dd, .infobox2 dl dd, #entry #text-body dl dd { padding: 0 0 0.5em 2em; } /* __________________________________________________________________ PRODUCT SEARCH */ #product-search { width: 151px; padding: 5px 15px 15px 15px; float: left; clear: both; } #product-search input#search-q { border: 1px solid #AADCF2; border-right: 0; padding: 1px 3px; width: 120px; float: left; margin: 1px 0 0 0; line-height: 16px; } #product-search input#search-submit { width: 23px; height: 22px; cursor: pointer; background: url(/sitefiles/42/design/search-submit.gif) 0 0 no-repeat; border: 0; _margin: 0 0 0 -3px; } /* __________________________________________________________________ BOX WITH EXTRAORDINARY TYPOGRAPHY */ .nice-typo-box { width: 730px; float: right; clear: both; color: #3E797A; margin: 15px 0; overflow: visible; } .nice-typo-box .rules-top { width: 710px; *position: relative; *right: 0; *top: 0; float: right; margin: 0 -10px 0 0; background: url(/sitefiles/42/design/hr.gif) 0 0 repeat-x; } .nice-typo-box .rules-bottom { width: 690px; float: left; clear: both; background: url(/sitefiles/42/design/hr.gif) 0 100% repeat-x; padding: 20px 20px 20px 0; } .nice-typo-box .text-wrap { float: left; } .nice-typo-box .image-wrap { float: right; } .nice-typo-box h2 { font-weight: bold; color: #669A99; text-transform: uppercase; font-size: 3em; line-height: 1; letter-spacing: 0.05em; margin: 0 0 0.25em 0; } .nice-typo-box h3 { font-weight: normal; color: #000; font-size: 1.5em; line-height: 1; margin: 0 0 1.25em 0; } .nice-typo-box h4 { font-size: 1.1em; font-weight: bold; margin: 0 0 0.25em 0; color: #366 } .nice-typo-box p, .nice-typo-box ul, .nice-typo-box ol, .nice-typo-box dl, .nice-typo-box table { font-size: 1.1em; line-height: 1.7; margin: 0 0 1.7em 0; } .nice-typo-box ul { list-style-type: square; padding: 0 0 0 1.3em; } .nice-typo-box ol { list-style-type: decimal; padding: 0 0 0 1.5em; } .nice-typo-box dl dt { font-weight: bold; } .nice-typo-box dl dd { padding: 0 0 0.5em 2em; } #container #col-wrap .nice-typo-box a { color: #3E797A; text-decoration: underline; font-style: italic; } #container #col-wrap .nice-typo-box a:hover { color: #366; text-decoration: none; } .nice-typo-box .bottom-line { float: left; width: 690px; clear: both; padding: 15px 0 0 0; } .nice-typo-box .bottom-line p, .nice-typo-box .bottom-line ul { line-height: 1; margin: 0; } .nice-typo-box .bottom-line p.back { float: left; clear: left; } #container #col-wrap .nice-typo-box .bottom-line p.back a { text-transform: uppercase; text-decoration: none; font-style: normal; font-size: 1.1em; } .nice-typo-box .bottom-line ul { float: right; clear: right; } .nice-typo-box .bottom-line ul li { float: left; display: inline; font-size: 1.1em; padding: 0 1em 0 0; } .nice-typo-box .bottom-line ul li.last { padding: 0; } .nice-typo-box .bottom-line ul li.title { font-weight: bold; text-transform: uppercase; color: #366; } /* __________________________________________________________________ ORDER RECEIPT */ #order-receipt { width: 400px; padding: 80px 330px 0 0; float: left; clear: both; background: url(/sitefiles/42/design/kremmar.png) 451px 40px no-repeat; text-align: center; } #order-receipt h3 { text-transform: uppercase; color: #3E797A; font-size: 2.4em; font-weight: bold; word-spacing: 0.25em; } #order-receipt p { color: #020202; font-size: 1.1em; margin: 0 0 1.5em 0; } #order-receipt p#intro { font-size: 1.1em; color: #3E797A; margin: 0 0 2em 0; } #order-receipt p#thank-you { text-transform: uppercase; font-size: 1.4em; color: #3E797A; font-weight: bold; margin: 0 0 2em 0; } #order-receipt p#to-front a { color: #FFF; text-transform: uppercase; background: #3E797A; padding: 0.65em 1.25em; font-weight: bold; border: 1px solid #3E797A; } #order-receipt p#to-front a:hover { background: #669A99; text-decoration: none; } /* __________________________________________________________________ BOTTOM LOGOS */ #bottom-logos { width: 958px; padding: 15px 6px 0 6px; } #bottom-logos li { float: left; display: inline; height: 25px; background: 0 0 no-repeat; margin: 0 25px 0 0; } #bottom-logos li a { float: left; display: block; height: 25px; text-indent: -9999px; outline: none; cursor: pointer; position: relative; } /* __________________________________________________________________ PNG FIXES */ * html #cols-top, * html #cols-bottom { background-color: #ccc; back\ground-color: transparent; background-image: url(space.gif); overflow: hidden; } * html #cols-top { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/sitefiles/42/design/cols-top.png", sizingMethod="scale"); } * html #cols-bottom { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/sitefiles/42/design/cols-bottom.png", sizingMethod="scale"); } /* LIGHTBOX – LEAVE UNCHANGED ============================ */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox a img { border: none; } #outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer { padding: 10px; } #loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav { left: 0; } #hoverNav a { outline: none; } #prevLink, #nextLink { width: 49%; height: 100%; background: transparent url(/sitefiles/42/js/Lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left; } #nextLink { right: 0; float: right; } #prevLink:hover, #prevLink:visited:hover { background: url(/sitefiles/42/js/Lightbox/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/sitefiles/42/js/Lightbox/nextlabel.gif) right 15% no-repeat; } #imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% } #imageData { padding: 0 10px; color: #666; } #imageData #imageDetails { width: 70%; float: left; text-align: left; } #imageData #caption { font-weight: bold; } #imageData #numberDisplay { display: block; clear: left; padding-bottom: 1em; } #imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0; } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }