/* ---------------------------------------------------------------------------------------------------- * Peerless * * Colours: * * #005195 - Pantone 301C - PerfectMount * #ffa200 - Pantone 137C - Paramount * #a33038 - Pantone 1807C - TruVue * #3b3b3c ? Hexachrome Black C at 92% - Slimline * ---------------------------------------------------------------------------------------------------- */ body { background-color: #000; } #header, #intro, #content, #footer, #base { background-repeat: repeat-x; background-position: top; } .centre { width: 940px; padding: 0 10px; margin: 0 auto; position: relative; } .centre:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header { height: 140px; background-color: #fff; background-image: url('images/header.png'); } #logo { display: block; width: 240px; height: 98px; overflow: hidden; } #nav { display: block; height: 42px; width: 940px; position: relative; left: -10px; } #nav li { display: block; float: left; height: 42px; } #nav a { display: block; float: left; height: 29px; padding: 13px 10px 0 10px; } #nav .selected a { border-left: 1px solid #777; border-right: 1px solid #777; background-image: url('images/nav-selected.png'); background-repeat: repeat-x; } #topbar { position: absolute; width: 600px; top: 0; right: 10px; height: 40px; background-image: url('images/topbar.png'); } #topbar ul { position: absolute; top: 11px; left: 12px; } #topbar li { display: block; float: left; height: 14px; border-right: 1px solid #999; padding: 0 5px 0 0; margin: 0 5px 0 0; } #topbar li a { position: relative; display: block; } #topbar .last { border: 0; padding: 0; margin: 0; } #search { position: absolute; width: 250px; top: 0; left: 350px; } #criteria { position: absolute; top: 8px; left: 4px; border: 0; color: #333; font-size: 11px; line-height: 20px; height: 20px; padding: 0 2px; width: 146px; } #criteria:focus { outline: none; } #submit { position: absolute; top: 8px; right: 10px; width: 70px; height: 20px; border: 0; outline: none; background-image: url('images/submit.png'); background-position: top left; } #submit:hover { background-position: bottom left; cursor: pointer; } #secondary { background-image: url('images/secondary.png'); background-repeat: repeat-x; height: 36px; } #secondary ul { display: block; position: absolute; top: 0; padding: 10px 0 0 0; background-image: url('images/secondary.png'); background-repeat: repeat-x; height: 36px; } #secondary li { display: block; float: left; height: 16px; border-right: 1px solid #bbb; margin: 0 6px 0 0; padding: 0 6px 0 0; } #secondary a { } #secondary .last { border: 0; padding: 0; margin: 0; } #secondary .selected { background-color: #ccc; margin: -5px 6px 0 0; height: 25px; padding: 0 0 0 7px; border: none; background-image: url('images/secondary-selected.png'); background-position: top left; } #secondary .selected a { float: left; display: block; height: 25px; padding: 0 7px 0 0; background-image: url('images/secondary-selected.png'); background-position: top right; } #secondary .noborder { border: none; margin: 0; } #carousel-table { display: none; } #carousel { height: 310px; position: relative; background-image: url('images/carousel.png'); background-repeat: repeat-x; } #carousel .centre { height: 310px; background-image: url('images/carousel-glow.jpg'); background-position: center; background-repeat: no-repeat; } #carousel-wrapper { overflow: hidden; width: 940px; height: 310px; position: relative; } #carousel-children { z-index: 10; display: block; position: absolute; top: 100px; height: 200px; } #carousel-children canvas { padding: 0 1px; position: relative; } #carousel-children li { display: block; position: absolute; width: 160px; height: 160px; cursor: pointer; } #carousel-children img { border: 1px solid #333; cursor: pointer; position: relative; } #carousel-children .label { z-index: 30; position: absolute; top: 130px; padding: 10px 0 5px 0; width: 160px; text-align: center; color: #ddd; text-decoration: none; } #carousel-children li:hover .label { color: #fff; } #carousel-mask-left { display: none; z-index: 20; position: absolute; left: 0; top: 0; width: 100px; height: 310px; background-image: url('images/carousel-mask.png'); background-position: 0 0; } #carousel-mask-right { display: none; z-index: 20; position: absolute; right: 0; top: 0; width: 100px; height: 310px; background-image: url('images/carousel-mask.png'); background-position: 100px 0; } #carousel-show { z-index: 0; position: absolute; top: 0; left: 0; width: 940px; height: 310px; } #carousel-show .background { width: 940px; height: 310px; background-image: url('images/carousel.png'); background-repeat:repeat-x; } #carousel-show a { color: #fff; text-decoration: none; font-size: 20px; } #carousel-show ul { width: 170px; position: absolute; top: 35px; left: 250px; } #carousel-show li { text-align: right; width: 160px; height: 28px; padding: 0 20px 0 0; background-image: url('images/arrows.gif'); background-position: 170px -22px; background-repeat: no-repeat; } #carousel-show img { border: 1px solid #333; position: absolute; left: 90px; top: 0; } #carousel-show .back { cursor: pointer; position: absolute; left: 0; top: 50px; color: #fff; font-size: 14px; width: 50px; height: 16px; padding: 2px 2px 2px 15px; background-image: url('images/arrows.gif'); background-position: 0 3px; background-repeat: no-repeat; } #carousel-show .all { width: 410px; height: 160px; position: absolute; top: 100px; left: 270px; } #carousel-show .label { position: absolute; width: 160px; text-align: center; left: 90px; top: 130px; color: #fff; font-size: 14px; padding: 10px 0 0 0; } #intro { height: 170px; background-color: #333; background-image: url('images/intro.png'); background-repeat:repeat-x; background-position: top; } #intro-content { z-index: 10; display: block; position: absolute; top: 30px; width: 500px; } #intro-lifestyle { display: block; width: 400px; height: 170px; position: absolute; top: 0; right: 10px; z-index: 1; } .intro-paragraph { position: absolute; left: 10px; top: -110px; width: 510px; z-index: 10; /* reset from text-editor view */ background: none !important; padding: 0px !important; } #toplevel { height: 190px; background-color: #333; background-image: url('images/intro.png'); background-repeat:repeat-x; background-position: top; } #toplevel-lifestyle { display: block; width: 940px; height: 190px; position: absolute; top: 0; right: 10px; } h1.toplevel { display: block; height: 30px; position: relative; top: -10px; margin: 0 !important; line-height: 30px; padding: 25px 0; color: #fff; text-align: center; background-image: url('images/titlebar.png'); } #textarea img { border: 1px solid #ccc; } #breadcrumbs-inline { display: block; margin: 0 0 15px 0; width: 100%; height: 30px; border-bottom: 1px dashed #c5c5c5; } #breadcrumbs-inline li { float: left; margin: 0 5px 0 0; } #breadcrumbs-inline .last { margin: 0; } #content { padding: 10px 0; background-color: #fff; background-image: url('images/content.png'); } #editable { width: 700px; float: left; } #aside { width: 220px; float: right; } .aside-button { background-color: #e51937; overflow: hidden; background-image: url('images/aside-button.png'); background-position: 0 0; height: 33px; width: 210px; padding: 17px 0 0 0; margin: 0 0 20px 0; font-size: 18px; color: #fff !important; text-decoration: none !important; display: block; text-align: center; } #sidemenu { display: block; width: 210px; font-size: 11px; padding: 0 0 8px 0; margin: 0 0 20px 0; background-image: url('images/smenu.png'); background-position: bottom; } #sidemenu li { zoom: 1; display: block; position: relative; background-color: #eee; border-top: 1px solid #bbb; border-left: 1px solid #bebebe; border-right: 1px solid #bebebe; } #sidemenu .head { text-align: center; border: none; overflow: hidden; background-image: url('images/smenu.png'); background-position: 0 0; } #sidemenu .second { text-align: center; border: none; overflow: hidden; background-image: url('images/smenu.png'); background-position: 0 -50px; } #sidemenu .sub { zoom: 1; display: block; position: relative; background-color: #d5d5d5; } #sidemenu .sub li { display: block; position: relative; background-color: #d5d5d5; border-left: none; border-right: none; padding: 0 0 0 10px; } #sidemenu a { display: block; text-decoration: none; height: 20px; padding: 5px 10px 0 10px; color: #333; } #sidemenu .sub a { padding: 5px 10px 5px 10px; height: auto !important; min-height: 15px; _height: 15px; line-height: 15px; } #sidemenu .head a { font-size: 16px; padding: 19px 0 0 0; height: 31px; border: none; color: #fff; } #sidemenu .second a { font-size: 12px; padding: 11px 10px 0 10px; height: 24px; font-weight: bold; border: none; color: #fff; } #sidemenu .selected > a { font-weight: bold; } #sidemenu .updown { display: block; cursor: pointer; width: 25px; height: 25px; line-height: 0; position: relative; float: right; top: 0; right: 0; background-image: url('images/updown.png'); background-repeat: no-repeat; background-position: 0 0; } #sidemenu .up { background-position: 0 -25px; } #breadcrumbs { height: 60px; position: relative; background-image: url('images/breadcrumbs.png'); background-repeat: repeat-x; } #breadcrumbs ul { position: absolute; top: 27px; } #breadcrumbs li { display: block; float: left; margin: 0 10px 0 0; padding: 0 20px 0 0; background-image: url('images/crumb.png'); background-repeat: no-repeat; background-position: center right; } #breadcrumbs .start { background: none; padding: 0; margin: 0; width: 100px; } #breadcrumbs .last { background: none; padding: 0; margin: 0; } #breadcrumbs { color: #fff; } #breadcrumbs .start { color: #e51937; text-transform: uppercase; font-weight: bold; font-size: 10px; } #footer { padding: 30px 0 20px 0; position: relative; background-color: #46413f; background-image: url('images/footer.png'); } #footer li { display: block; min-height: 20px; _height: 20px; } #footer .col { display: block; min-height: 220px; _height: 220px; float: left; padding: 0 20px 0 0; margin: 0 20px 0 0; background-image: url('images/footer-line.png'); background-repeat: repeat-y; } #footer .col-a { width: 140px; background-position: 158px 0; } #footer .col-b { width: 260px; background-position: 278px 0; } #footer .col-c { width: 80px; margin: 0; padding: 0; background-image: none; } #base { position: relative; height: 40px; padding: 20px 0 0 0; background-image: url('images/base.png'); } #copyright { position: absolute; left: 10px; } #webdesign { position: absolute; right: 10px; } #mount-finder-footer #footer { display: none !important; } /* ---------------------------------------------------------------------------------------------------- * Template Specfic * ---------------------------------------------------------------------------------------------------- */ #home { padding: 5px 0 0 0; } .TruVue .aside-button { background-position: 0 -50px; } .Paramount .aside-button { background-position: 0 -100px; } .PerfectMount .aside-button { background-position: 0 -150px; } .Slimline .aside-button { background-position: 0 -200px; } .Paramount a, .Paramount a:link, .Paramount a:visited, .Paramount a:active { color: #ffa200; } .Paramount h1 a, .Paramount h2 a, .Paramount h3 a, .Paramount h4 a, .Paramount h5 a, .Paramount h6 a { color: #ffa200; } .Paramount h2, .Paramount h3, .Paramount h4, .Paramount h5, .Paramount h6 { color: #ffa200; } .Paramount .mounts-grid-header { background-color: #ffa200; } .Paramount .mounts-grid-label strong { color: #ffa200; } .Paramount .product-info-table-header { background-color: #ffa200; } .TruVue a, .TruVue a:link, .TruVue a:visited, .TruVue a:active { color: #a33038; } .TruVue h1 a, .TruVue h2 a, .TruVue h3 a, .TruVue h4 a, .TruVue h5 a, .TruVue h6 a { color: #a33038; } .TruVue h2, .TruVue h3, .TruVue h4, .TruVue h5, .TruVue h6 { color: #a33038; } .TruVue .mounts-grid-header { background-color: #a33038; } .TruVue .mounts-grid-label strong { color: #a33038; } .TruVue .product-info-table-header { background-color: #a33038; } .PerfectMount a, .PerfectMount a:link, .PerfectMount a:visited, .PerfectMount a:active { color: #005195; } .PerfectMount h1 a, .PerfectMount h2 a, .PerfectMount h3 a, .PerfectMount h4 a, .PerfectMount h5 a, .PerfectMount h6 a { color: #005195; } .PerfectMount h2, .PerfectMount h3, .PerfectMount h4, .PerfectMount h5, .PerfectMount h6 { color: #005195; } .PerfectMount .mounts-grid-header { background-color: #005195; } .PerfectMount .mounts-grid-label strong { color: #005195; } .PerfectMount .product-info-table-header { background-color: #005195; } .Slimline a, .Slimline a:link, .Slimline a:visited, .Slimline a:active { color: #3b3b3c; } .Slimline h1 a, .Slimline h2 a, .Slimline h3 a, .Slimline h4 a, .Slimline h5 a, .Slimline h6 a { color: #3b3b3c; } .Slimline h2, .Slimline h3, .Slimline h4, .Slimline h5, .Slimline h6 { color: #3b3b3c; } .Slimline .mounts-grid-header { background-color: #3b3b3c; } .Slimline .mounts-grid-label strong { color: #3b3b3c; } .Slimline .product-info-table-header { background-color: #3b3b3c; } /* ---------------------------------------------------------------------------------------------------- * Forms * ---------------------------------------------------------------------------------------------------- */ .contact-form { width: 700px; } .contact-form .layout-table td { padding: 10px; } .contact-form label { width: 150px; display: block; float: left; font-style: italic; } .contact-form .field { border: 1px solid #bbb; width: 300px; float: left; padding: 5px; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; } .contact-form textarea { border: 1px solid #bbb; width: 500px; height: 150px; float: left; padding: 5px; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; } .contact-form input:focus, .contact-form textarea:focus { border: 1px solid #e51937; outline: none; } .contact-form .checklist { list-style: none !important; display: block; width: 300px; float: left; margin: 0 20px 20px 0 !important; } .contact-form .checklist li { padding: 5px; font-size: 10px; margin: 0 !important; border-bottom: 1px dashed #c5c5c5; } .contact-form .checklist .indent { padding-left: 20px; } .contact-form .checklist .field { width: 200px; } .contact-form .noborder { border: 0 !important; } .contact-form .btn { height: 40px; width: 150px; text-align: center; font-size: 12px; color: #fff; line-height: 16px; padding: 0 0 0 0; border: none; outline: none; background-image: url('images/contact-btn.png'); background-color: #000; }