/*------------------------------------------------------ CSS Created: 14/06/2007 CSS Author: Jon Thompson email: jon@2pixelsout.com website: www.2pixelsout.co.uk ------------------------------------------------------*/ * { margin: 0; padding: 0; } body { background-color: #666; } #home #navigation .home a, #profile #navigation li.profile a, #portraits #navigation li.portraits a, #weddings #navigation li.weddings a, #commercial #navigation li.commercial a, #products #navigation li.products a, #contacts #navigation li.contacts a { cursor: default; } #home #navigation li.home a { background-image: url(../images/top/navigation/home_02.gif); } #profile #navigation li.profile a { background-image: url(../images/top/navigation/profile_02.gif); } #portraits #navigation li.portraits a { background-image: url(../images/top/navigation/portraits_02.gif); } #weddings #navigation li.weddings a { background-image: url(../images/top/navigation/weddings_02.gif); } #commercial #navigation li.commercial a { background-image: url(../images/top/navigation/commercial_02.gif); } #products #navigation li.products a { background-image: url(../images/top/navigation/products_02.gif); } #contacts #navigation li.contacts a { background-image: url(../images/top/navigation/contacts_02.gif); } img { border: none; } acronym, abbr { border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #666; cursor: help; } ul { list-style: none; } #content, #footer { width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #header { width: 998px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 155px; } .hidden { display: none; } /* ------------------ HEADER STYLES ------------------ */ #top { background-image: url(../images/top/top_bg.jpg); background-repeat: repeat-x; background-color: #000; } #header h1 { float: left; background-image: url(../images/top/company_logo.jpg); background-repeat: no-repeat; } #header h1 a { height: 134px; width: 184px; display: block; } #header h1 a span { display: none; } #navigation { float: left; height: 155px; width: 814px; } #navigation ul { width: 566px; padding-top: 76px; float: right; } #navigation li { float: left; padding-right: 20px; background-repeat: no-repeat; } #navigation li a { height: 32px; display: block; } #navigation li a span { display: none; } #navigation li.home { background-image: url(../images/top/navigation/home_02.gif); } #navigation li.home a { width: 46px; background-image: url(../images/top/navigation/home_01.gif); } #navigation li.home a:hover { background-image: url(../images/top/navigation/home_02.gif); } #navigation li.profile { background-image: url(../images/top/navigation/profile_02.gif) } #navigation li.profile a { width: 66px; background-image: url(../images/top/navigation/profile_01.gif) } #navigation li.profile a:hover { background-image: url(../images/top/navigation/profile_02.gif) } #navigation li.portraits { background-image: url(../images/top/navigation/portraits_02.gif); } #navigation li.portraits a { width: 88px; background-image: url(../images/top/navigation/portraits_01.gif); } #navigation li.portraits a:hover { background-image: url(../images/top/navigation/portraits_02.gif); } #navigation li.weddings { background-image: url(../images/top/navigation/wedding_02.gif); } #navigation li.weddings a { width: 85px; background-image: url(../images/top/navigation/wedding_01.gif); } #navigation li.weddings a:hover { background-image: url(../images/top/navigation/wedding_02.gif); } #navigation li.commercial { background-image: url(../images/top/navigation/commercial_02.gif); } #navigation li.commercial a { width: 108px; background-image: url(../images/top/navigation/commercial_01.gif); } #navigation li.commercial a:hover { background-image: url(../images/top/navigation/commercial_02.gif); } #navigation li.products { background-image: url(../images/top/navigation/products_02.gif); } #navigation li.products a { width: 86px; background-image: url(../images/top/navigation/products_01.gif); } #navigation li.products a:hover { background-image: url(../images/top/navigation/products_02.gif); } #navigation li.contacts { background-image: url(../images/top/navigation/contact_02.gif); } #navigation li.contacts a { width: 75px; background-image: url(../images/top/navigation/contact_01.gif); } #navigation li.contacts a:hover { background-image: url(../images/top/navigation/contact_02.gif); } /* ------------------ CONTENT STYLES ------------------ */ #middle { background-color: #00B1B0; } #content { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #content p { line-height: 20px; padding-bottom: 15px; } #content h2 { padding-bottom: 15px; background-repeat: no-repeat; } #content h2 span, #content h3 span { display: none; } /* ------------------ CONTENT PAGE BACKGROUND STYLES ------------------ */ #home-content { float: left; width: 920px; height: 517px; padding-top: 30px; padding-left: 40px; background-repeat: no-repeat; background-image: url(../images/middle/home/content_bg_01.jpg); } /* ------------------ HOME PAGE STYLES ------------------ */ #home-content ul { width: 420px; float: left; padding-bottom: 15px; } #home-content ul li { float: left; padding-right: 5px; padding-bottom: 5px; } #home-content ul li a { background: #FFF; height: 90px; width: 90px; padding: 5px; display: block; } #home-content ul li a:hover { background: #CCC; } #home-content ul li a:active { background: #00B1B0; } #home-content p.p1, #home-content p.p2, #home-content p.p3 { width: 416px; padding-bottom: 15px; background-repeat: no-repeat; } #home-content p.p1 { height: 83px; background-image: url(../images/middle/home/intro_01.gif); } #home-content p.p2 { height: 62px; background-image: url(../images/middle/home/intro_02.gif); } #home-content p.p3 { height: 57px; background-image: url(../images/middle/home/intro_03.gif); } #home-content p span { display: none; } #home-content p.click-to-enlarge { height: 20px; width: 168px; background-image: url(../images/middle/home/click_to_enlarge_01.gif); background-repeat: no-repeat; } /* ------------------ ABOUT PAGE STYLES ------------------ */ #profile-content { float: left; width: 960px; padding-top: 25px; padding-bottom: 25px; } #profile-content .intro { padding: 25px; background-color: #FFF; background-image: url(../images/middle/profile/intro_bg.jpg); background-repeat: no-repeat; background-position: right bottom; } #profile-content .intro h2 { padding-bottom: 15px; background-repeat: no-repeat; background-image: url(../images/middle/profile/h2_bg.gif); height: 26px; } #profile-content .intro p { width: 600px; } #profile-content .intro .p1 { font-weight: bold; } #profile-content .intro .p3, #profile-content .intro .p6, #profile-content .intro .p-img { padding-bottom: 0px; } #profile-content .intro a { color: #00B1B0; text-decoration: none; padding: 3px; } #profile-content .intro a:hover { background-color: #CCEFEF; } /* ------------------ ABOUT PAGE STYLES ------------------ */ /* ------------------ GALLERY PAGE STYLES ------------------ */ #portrait-content, #wedding-content { float: left; width: 960px; padding-top: 25px; padding-bottom: 25px; } #portrait-content .intro, #wedding-content .intro { padding-top: 25px; padding-bottom: 25px; margin-bottom: 20px; background-repeat: no-repeat; } #portrait-content .intro { background-color: #FFF; color: #000; padding-left: 400px; padding-right: 25px; background-image: url(../images/middle/portrait/intro_bg.jpg); } #wedding-content .intro { background-color: #000; color: #FFF; padding-right: 350px; padding-left: 25px; background-image: url(../images/middle/wedding/intro_bg.jpg); background-position: right top; } #wedding-content .intro h2, #portrait-content .intro h2 { padding-bottom: 15px; background-repeat: no-repeat; } #portrait-content .intro h2 { height: 26px; background-image: url(../images/middle/portrait/h2_bg.gif); } #wedding-content .intro h2 { height: 33px; background-image: url(../images/middle/wedding/h2_bg.gif); } #portrait-content .intro .p1, #wedding-content .intro .p1 { font-weight: bold; } #portrait-content .intro a, #wedding-content .intro a { color: #00B1B0; text-decoration: none; padding: 3px; } #wedding-content .intro a:hover { background-color: #003535; } #portrait-content .intro a:hover { background-color: #CCEFEF; } #portrait-content .gallery, #wedding-content .gallery { padding-bottom: 15px; } #portrait-content .gallery h2, #wedding-content .gallery h2 { background-image: url(../images/middle/gallery/h2_bg.gif); height: 33px; padding-bottom: 15px; background-repeat: no-repeat; background-position: 25px 15px; } #portrait-content .gallery { border: 1px solid #000; } #wedding-content .gallery { border: 1px solid #FFF; } /* ------------------ / GALLERY PAGE STYLES ------------------ */ /* ------------------ PRODUCT PAGE STYLES ------------------ */ #product-content { float: left; width: 960px; padding-top: 25px; padding-bottom: 25px; } #product-content .intro { margin-bottom: 20px; background-color: #000; color: #FFF; padding-top: 25px; padding-right: 400px; padding-bottom: 25px; padding-left: 25px; background-image: url(../images/middle/products/products_intro_img.jpg); background-repeat: no-repeat; background-position: right bottom; } #product-content .intro h2 { padding-bottom: 15px; background-repeat: no-repeat; background-image: url(../images/middle/products/h2_products.gif); height: 26px; } #product-content .intro .p1 { font-weight: bold; } #product-content dl { background-color: #FFF; background-repeat: no-repeat; padding: 25px; line-height: 20px; } #product-content dt { padding-bottom: 15px; height: 24px; background-repeat: no-repeat; } #product-content dt span { display: none; } #product-content dd { } #product-content .col-ab { float: left; width: 960px; margin-bottom: 20px; background-image: url(../images/middle/products/two_col_bg.gif); background-repeat: repeat-y; } #product-content .col-ab dl { padding-top: 320px; } #product-content .col-a { float: left; width: 470px; padding-right: 20px; } #product-content .col-b { float: left; width: 470px; } #product-content dl.wedding-alb { background-image: url(../images/middle/products/wedding_albums.jpg); } #product-content dl.gallery-range { background-image: url(../images/middle/products/gallery_range.jpg); } #product-content dl.box-frames { margin-bottom: 20px; background-image: url(../images/middle/products/box_frame.jpg); background-repeat: no-repeat; background-position: right bottom; padding-right: 450px; padding-bottom: 70px; } #product-content dl.canvas-blocks { background-image: url(../images/middle/products/canvas_blocks.jpg); } #product-content dl.perspex { background-image: url(../images/middle/products/perspex.jpg); } #product-content dl.wedding-alb dt { background-image: url(../images/middle/products/h3_wedding_alb.gif); } #product-content dl.gallery-range dt { background-image: url(../images/middle/products/h3_gallery_range.gif); } #product-content dl.box-frames dt { background-image: url(../images/middle/products/h3_box_frames.gif); } #product-content dl.canvas-blocks dt { background-image: url(../images/middle/products/h3_canvas_blocks.gif); } #product-content dl.perspex dt { background-image: url(../images/middle/products/h3_perspex.gif); } /* ------------------ / PRODUCT PAGE STYLES ------------------ */ /* ------------------ CONTACT STYLES ------------------ */ #contact-content { float: left; width: 960px; padding-top: 25px; } #contact-content h3 { padding-bottom: 15px; background-repeat: no-repeat; } #contact-content .col-a { float: left; width: 350px; } #contact-content .col-b { float: left; width: 610px; } #contact-content .address-element { padding: 20px; width: 300px; margin-bottom: 20px; float: right; } #contact-content .address-element { background-color: #000; color: #FFF; line-height: 18px; } #contact-content .address-element h3 { background-image: url(../images/middle/contact/h3_contact_details.gif); background-repeat: no-repeat; height: 19px; } #contact-content .address-element a { color: #FFF; text-decoration: none; } #contact-content .address-element a:hover { color: #FFF; text-decoration: underline; } #contact-content .address-element span { color: #00B1B0; font-weight: bold; } #contact-content .flash-img-element { width: 600px; height: 500px; float: right; background-color: #CC0000; } #contact-content .form-element { padding: 20px; width: 298px; border: 1px solid #FFF; } #contact-content .form-element h3 { background-image: url(../images/middle/contact/h3_enquiry_form.gif); background-repeat: no-repeat; height: 24px; } #contact-content .form-element dl { padding-bottom: 5px; line-height: 20px; } #contact-content .form-element dt { font-weight: bold; } #contact-content .form-element dt span { font-weight: normal; } #contact-content .large-input-box, #contact-content .address-box, #contact-content .medium-input-box, #contact-content .comment-box { font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 2px; color: #00B1B0; } #contact-content .large-input-box { width: 298px; } #contact-content .address-box { width: 298px; height: 70px; } #contact-content .medium-input-box { width: 200px; } #contact-content .comment-box { width: 298px; height: 100px; } #contact-content .checkbox { width: auto; vertical-align: middle; } #contact-content .submit-button { font-weight: bold; padding: 4px; color: #00B1B0; } /* ------------------ / CONTACT STYLES ------------------ */ /* ------------------ LEGAL STYLES ------------------ */ #legal-content { float: left; width: 960px; padding-top: 25px; padding-bottom: 25px; } #legal-content .text-area { padding: 25px; background-color: #FFF; } #legal-content .text-area h3 { padding-bottom: 15px; height: 24px; background-repeat: no-repeat } #legal-content .text-area h3.copyright { background-image: url(../images/middle/legal/h3_copyright.gif); } #legal-content .text-area h3.privacy { background-image: url(../images/middle/legal/h3_privacy.gif); } #legal-content .text-area h3.terms { background-image: url(../images/middle/legal/h3_terms.gif); } #legal-content .text-area h4 { font-size: 14px; color: #00B1B0; margin-bottom: 5px; padding-bottom: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; } #legal-content .text-area .p1 { font-weight: bold; } #legal-content .text-area a { color: #00B1B0; text-decoration: none; padding: 3px; } #legal-content .text-area a:hover { background-color: #CCEFEF; } /* ------------------ / LEGAL STYLES ------------------ */ /* ------------------ FOOTER STYLES ------------------ */ #bottom { background-color: #666; background-image: url(../images/bottom/bottom_bg.jpg); background-repeat: repeat-x; } #footer { height: 80px; padding-top: 15px; } #address-container { float: left; width: 360px; height: 32px; } #address { width: 360px; height: 32px; background-image: url(../images/bottom/address.gif); background-repeat: no-repeat; position: relative; } #address span { display: none; } #address a { position: absolute; height: 15px; width: 156px; top: 0px; display: block; left: 136px; } #legal { float: left; width: 600px; } #legal a { color: #CCC; text-decoration: none; } #legal a:hover { color: #FFF; text-decoration: underline; } #legal ul { width:auto; float: right; line-height: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; } #legal ul li { float: left; padding-right: 10px; padding-left: 10px; background-image: url(../images/bottom/link_divider.gif); background-repeat: no-repeat; background-position: right center; } #legal ul li.last-link { padding-right: 0px; background-image: none; } .green-txt { color: #00B1B0; } .grey-txt { color: #666; }