/* -------------------------------------------------------------- Boilerplate Screen Styles * Version: 0.5 (2007-11-19) -------------------------------------------------------------- */ @import "lib/reset.css"; @import "lib/typography.css"; @import "lib/forms.css"; /*@import "lib/plugins.css";*/ /* Site -------------------------------------------------------------- */ #page { margin:0 auto; width:960px; background:url(../web-images/page-back.gif) repeat-y top left; border-right: 1px solid #ccc; } #header { margin-left: 130px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } #body { clear: both; margin-left: 130px; } #footer { clear:both; padding-left: 130px; background-color: #fff; } /* Header */ #h1a { background: #f26522 url(../web-images/modulari-by-razortooth.gif); width: 520px; height: 73px; float: left; } #h1b-top { float: left; width: 310px; height: 37px; border-bottom: 1px solid #ccc; } .h1b-thirds { width: 120px; float: left; height: 37px; text-align: center; padding-top: 8px; } .h1b-thirds-divider { background:url(../web-images/h1-thirds-divider.gif); float:left; width: 2px; height: 37px; } #h1b-bottom { float: left; width: 310px; height: 35px; background-color: #ececec; } #h1b-bottom-long { float: left; width: 210px; text-align: center; padding-top: 8px; } #h1b-bottom-short { float: left; width: 100px; text-align: center; padding-top: 4px; } #h2 { width: 100%; float: left; border-top: 1px solid #ccc; border-left: 1px solid #ccc; } .h2-nav-item { width: 138px; float: left; text-align: center; background: url(../web-images/nav-item-bg.gif) top no-repeat; height: 27px; padding-top: 10px; } /* Body */ .vertical-container { width: 829px; border-left: 1px solid #ccc; padding-bottom: 5px; } .vertical-top { background: url(../web-images/home-vertical-top-bg.gif) top left no-repeat; height:43px; } .vertical-top-content { padding: 4px 15px 0; } #modular-room-screens { background:url(../web-images/modular-room-screens.jpg) top left no-repeat; height: 277px; text-align: right; position: relative; } #modular-lights { background:url(../web-images/modulari-lights.jpg) top left no-repeat; height: 277px; text-align: right; position: relative; } #modular-custom-objects { background:url(../web-images/modulari-custom-objects.jpg) top left no-repeat; height: 277px; text-align: right; position: relative; } .home-shop-link { padding: 250px 10px 0 0; } /* Body Sub-Footer */ #sub-foot{ border: 1px solid #ccc; border-right: 0; text-align: center; padding: 15px 0 5px 0; } /*Footer */ .footer-nav-item { width: 118px; float: left; text-align: center; background: url(../web-images/footer-item-bg.gif) top no-repeat; height: 27px; padding-top: 10px; } .vertical-link { position: absolute; top: 5px; left: 5px; width: 815px; height: 240px; background-color: transparent; } /* In The Verticals */ .vertical-page-container { width: 829px; border-left: 1px solid #ccc; padding-bottom: 5px; } .vertical-page-top { background: url(../web-images/vertical-page-header.gif) top left no-repeat; height:59px; border-bottom: 1px solid #b5b5b5; } .vertical-page-top-content { padding: 4px 15px 0; } /* Screens */ #modular-screens-bg { width: 829px; height: 394px; background:url(../web-images/modular-screens-bg.jpg) top left no-repeat; padding-bottom: 25px; border-bottom: 1px solid #ccc; margin-top: 1px; } .vertical-page-below-text { padding: 15px 10px 0 30px; } .gall-link-spacing { margin-left: 10px; } #before-how-to { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px 10px 10px; } #how-buy-link { text-align: right; margin-top: -15px; } #how-to-one { padding: 15px 10px 0 20px; height: 260px; } #breadcrumbs { float: left; width: 100%; } #how-to-one-a { width: 175px; margin-left: 10px; padding-top: 25px; float: left; } #how-to-one-a img { margin-top: 125px; } #how-to-one-b { width: 270px; float: left; text-align: center; } #how-to-one-c { width: 74px; float: left; text-align: center; padding-top: 100px; } #how-to-one-d { width: 270px; float: left; text-align: center; } #how-to-two { padding: 15px 10px 0 20px; height: 170px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } #how-to-two-a { width: 50%; margin-left: 20px; text-align: center; } #how-to-two div { float: left; } #how-to-two img { margin-bottom: 5px; } #how-to-two-b { width: 40%; text-align: left; margin-left: 10px; padding-top: 10px; } #bottom-details { padding: 0 10px 0 20px; margin-top: 3px; height: 190px; } #bottom-details-a { float: left; margin-left: 10px; border-right: 1px solid #ccc; width: 380px; height: 190px; } #bottom-details-b { float: left; width: 380px; height: 190px; margin-left: 25px; } /* Lights */ #modular-lights-bg { width: 829px; height: 394px; background:url(../web-images/modular-lights-bg.jpg) top left no-repeat; padding-bottom: 25px; border-bottom: 1px solid #ccc; margin-top: 1px; } #modular-lights-bg img { float: right; } #how-to-lights { padding: 15px 10px 0 20px; height: 580px; } #how-to-lights-a { width: 180px; float: left; text-align: center; padding-top: 10px; } #how-to-lights-a img { margin-top: 3px; margin-bottom: 20px; } #how-to-lights-a p { text-align: left; padding-left: 12px; } #how-to-lights-b { width: 180px; float: left; text-align: center; padding-top: 10px; padding-right: 13px; border-right: 1px solid #ccc; } #how-to-lights-b img { margin: 3px 0 15px; } #how-to-lights-c { width: 394px; float: left; padding-top: 75px; margin-left: 30px; } #how-to-lights-c div { text-align: center; float: left; margin: 0 13px 60px; } #how-to-lights-c div img { margin-top: 3px; } /* Buy Universal */ #buy-top-container { height: 552px; border-bottom: 1px solid #ccc; } #buyimage { width: 470px; float: left; margin-top: 1px; } .buy-select-style { width: 60px; border-right: 1px solid #ccc; float: left; margin-top: 1px; } #buy-product-flicker { height: 34px; border-bottom: 1px solid #ccc; margin-top: 10px; } #flicker-desc { width: 205px; float: left; } #flicker-controls { width: 315px; float: left; } #flicker-right { width: 307px; float: left; text-align: right; } #flicker-right img { margin-left: 5px; } #buy-product-box { height: 175px; padding: 15px 10px 0 20px; } #buy-box-desc { width: 400px; float: left; height: 155px; } #buy-box-select-1 { width: 185px; float: left; padding-top: 30px; } #buy-box-select-2 { width: 60px; float: left; padding-top: 30px; } #buy-box-submit { width: 140px; float: left; text-align: right; padding-top:45px; } /* Buy Screens */ .buy-screen-style-tab { height: 137px; border-bottom: 1px solid #ccc; } .buy-screen-style-tab div { padding: 10px 0 0 5px; color: #999; line-height: 16px; } .buy-select-style a.selected { text-shadow: 1px 1px 5px #eee; } .buy-screen-style-tab-selected { height: 137px; border-bottom: 1px solid #ccc; border-right: 4px solid #f26522; } .buy-screen-style-tab-selected div { padding: 10px 0 0 5px; color: #999; line-height: 16px; } #buy-right-icons { width: 297px; margin-top: 1px; float: left; } #buy-right-icons-s-big { padding-left: 25px; padding-top: 20px; } #buy-right-icons-s-text { padding-left: 25px; } #buy-right-icons-s-small { padding-left: 10px; height: 125px; } #buy-right-icons-s-small-1 { float: left; width: 48%; text-align: center; } #buy-right-icons-s-small-2 { float: left; width: 48%; text-align: center; } /* Buy Lights */ .buy-lights-style-tab { height: 68px; border-bottom: 1px solid #ccc; } .buy-lights-style-tab div { padding: 10px 0 0 5px; color: #999; line-height: 16px; } .buy-lights-style a.selected { text-shadow: 1px 1px 5px #eee; } .buy-lights-style-tab-selected { height: 68px; border-bottom: 1px solid #ccc; border-right: 4px solid #f26522; } .buy-lights-style-tab-selected div { padding: 10px 0 0 5px; color: #999; line-height: 16px; } #buy-right-icons-external { width: 297px; margin-top: 1px; float: left; } #buy-right-icons-external p { line-height:16px; margin: 0 0 0.5em; } .external-wide { padding-left: 55px; padding-top: 80px; } .external-wide img { margin-bottom: 45px; } .external-slim { padding-left: 75px; padding-top: 10px; } .external-slim img { margin-bottom: 10px; } .buy-box-desc-duo { float: left; width: 180px; } /* Gallery Universal */ #gallery-top-container { height: 551px; border-bottom: 1px solid #ccc; } #galleryimage { width: 510px; float: left; margin-top: 1px; } #gallery-text { width: 319px; float: left; margin-top: 1px; } #gallery-spacer { height: 41px; border-bottom: 1px solid #ccc; margin-top: 4px; } #gallery-buy-link { text-align: right; margin-top: -28px; margin-right: 13px; } .gallery-flicker { height: 126px; padding: 15px 10px 0 20px } .gallery-flicker img { margin-top: 14px ; margin-right: 14px; border-bottom: 4px solid #fff; } .gallery-flicker a.selected img { border-bottom: 4px solid #f26522; } /* About, etc. */ .about { margin-top: 1px; } .about img { padding-bottom: 1px; border-bottom: 1px solid #ccc; } .about div { padding: 35px 50px 0 30px; } .etal { } .etal img { padding-bottom: 1px; border-bottom: 1px solid #ccc; } .etal div { padding: 35px 50px 0 30px; } .etal div div { float: left; width: 290px; } /* Press */ .press { } .press-row { height: 505px; padding: 35px 20px 30px 25px; } .press-item { float: left; width: 229px; margin: 0 45px 0 0; } /* MODIFIERS */ .nobg { background: #fff; } .nobotpad { padding-bottom: 0; } .light-left { border-left: 1px solid #ccc; }