/******************** STYLE.css @author Anthony Macali @updated 15/09/2009 ********************/ body { margin:0; font-size:12px; background:#FFF url(/images/background.jpg); } /* reset */ a { text-decoration:none; } img { border:0; } h1, h2, h3 { margin:0; padding:0; font-size:100%; } p, ul, li { margin:0; padding:0; list-style:none; } img { border:0; } form, input { margin:0; padding:0; line-height:1px; } table { border-collapse:collapse; border:0; } /******************** GLOBAL ********************/ .clear { clear:both; height:1px; line-height:1px; } .right { float:right; } .left { float:left; } /******************** CONTAINER ********************/ .container { width:950px; margin:24px auto 0 auto; background-color:#FFF; border:1px solid #655B53; } .container { min-height:700px; height:auto !important; height:700px; } /******************** BANNER ********************/ #banner { background-color:#fff; } #banner h1 { height:118px; text-indent:-5000px; background:url(/images/logo.gif) 14px center no-repeat; width:369px; float:left; } .facebook { background:url(/images/facebook.gif) right no-repeat; padding:4px 71px 4px 0; display:block; width:98px; color:#333 !important; } .twitter { background:url(/images/twitter.gif) right no-repeat; padding:4px 71px 4px 0; display:block; width:98px; color:#333 !important; margin-bottom:6px; } .sponsor img { float:left; margin:20px 0 0 44px; } .notification { width:546px; float:right; margin:4px 10px 0 0; padding:8px;} .notification img { border:1px solid #e9e9e9; padding:4px; margin-left:8px; } .notification .info { padding:6px 8px; float:left; border:1px dashed #ccc; width:382px; font:1em Arial; line-height:1.4em; background-color:#f5f5f5; display:none; } /******************** MENU ********************/ #menu { background-color:#FFF; height:34px; border-top:1px dashed #999; border-bottom:1px dashed #999; } #menu ul { margin:0; padding:0; list-style:none; margin-left:16px; } #menu li { float:left; margin-right:12px; } #menu li a { display:block; height:34px; text-indent:-5000px; outline:0; } /** background **/ #menu li a { background-repeat:no-repeat; background-image:url(/images/menu.gif); } #menu li a:hover { background-image:url(/images/menu.hover.gif); } #menu li.index a { width:66px; background-position:3px center; } #menu li.news a { width:61px; background-position:-74px center; } #menu li.products a { width:91px; background-position:-145px center; } #menu li.stockists a { width:92px; background-position:-245px center; } #menu li.aboutus a { width:92px; background-position:-347px center; } #menu li.contact a { width:82px; background-position:-451px center; } #menu li.testimonials a { width:126px; background-position:-831px center; } #menu li.viewcart { width:122px; float:right; margin-top:6px; padding-right:16px; } #menu li.viewcart form { margin:0 } #menu a { display:block; height:36px; text-indent:-5000px; } /* submenu */ #menu li ul.submenu { margin-left:0; background-color:#fff; } #menu li ul.submenu li { margin:0; font:1em Georgia; } #menu li ul.submenu a { height:24px; line-height:24px; width:160px; background:none; text-indent:12px; color:#000; border:1px dashed #999; border-top:0; } #menu li ul.submenu a:hover { color:#999; background:url(/images/icons/joliepetitechose.gif) 135px center no-repeat; } ul.submenu li.h a { font-weight:bold !important; text-indent:10px !important; } /******************** HOVER LINKS ********************/ ul.dropdown { position:relative; } ul.dropdown li.hover { position:relative; } ul.dropdown ul { visibility:hidden; position:absolute; top:100%; left:0; } ul.dropdown ul li { font-weight:normal; float:none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { width:100%; display:inline-block; } ul.dropdown ul ul { left:100%; top:0; } ul.dropdown li:hover > ul { visibility: visible; } /******************** CONTENT ********************/ .content { padding:10px 0; margin:0 20px; font:1.2em Arial; } .content p { line-height:1.2em; margin-bottom:12px; } /* home */ #page-index .container { background: #FFF url(/images/photos/stamp.jpg) 540px 188px no-repeat; } #page-index .content h2, #page-index .content p { text-indent:-5000px; } #page-index .content img { float:left; margin:10px 20px 0 10px; } /* news */ #page-news .content h3 { margin:20px 0 10px 0; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; padding:6px 2px 4px 4px; } #page-news .content h4 { margin:0; margin-bottom:4px; font-size:1.1em; } #page-news .content img { margin-right:12px; padding:5px; background-color:#FFF; border:1px solid #ccc; float:left; } #page-news .content p { margin-bottom:4px; padding-right:10px; } #page-news .content a { color:blue; } #page-news .content a:hover { text-decoration:underline; } #page-news .content br.clear { margin-bottom:4px; } /* products */ #page-products .container { background:url(/images/photos/products.jpg) center 50px; } #page-products .content a { display:block; width:150px; height:245px; text-indent:-5000px; } #page-products .content { padding-top:240px; padding-left:202px; } #page-products a.mobiles { float:left; margin-right:174px; } #page-products a.cushions { float:left; } /* stockists */ #page-stockists .content h3 { margin:20px 0 14px 0; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; padding:6px 2px 4px 4px; } #page-stockists .content img { margin-right:12px; padding:10px; background-color:#FFF; border:1px solid #ccc; float:left; } #page-stockists .content p { margin-bottom:8px; } #page-stockists .content a { color:blue; } #page-stockists .content a:hover { text-decoration:underline; } /* testimonials */ #page-testimonials p.testimonial { border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; padding:6px 2px 4px 4px; } #page-testimonials p.testimonial span { color:#548dd4; font-style:italic; font-weight:bold; } #page-testimonials p.grey { color:#999; } #page-testimonials p.quote { padding-left:40px; } /* about us */ #page-aboutus .content h2, #page-aboutus .content p { text-indent:-5000px; } #page-aboutus .container { background:url(/images/photos/notebook.jpg) center 50px; } /* contact */ #page-contact .content h3 { margin-bottom:4px; font-size:1.2em; } #page-contact .content p { line-height:1.4em; margin-bottom:6px; } #page-contact .content a { color:#f47a6d; } #page-contact .content strong { color:#f47a6d; } #page-contact .content img.right { margin-left:10px; } /******************** HEADINGS ********************/ .content h2 { text-indent:-5000px; margin-bottom:4px; height:48px; background-position:left -8px; background-repeat:no-repeat; } #page-news h2 { background-image:url(/images/headings/news.gif); } #page-stockists h2 { background-image:url(/images/headings/stockists.gif); } #page-testimonials h2 { background-image:url(/images/headings/testimonials.gif); } #page-contact h2 { background-image:url(/images/headings/contact.gif); } #page-contact h2.faqs { background-image:url(/images/headings/faqs.gif); height:62px; } #page-privacy h2 { background-image:url(/images/headings/privacy.gif); height:62px; } #page-terms h2 { background-image:url(/images/headings/terms.gif); height:62px; } /* products */ #page-mobiles h2 { background-image:url(/images/products/mobiles.gif); } #page-cushions h2 { background-image:url(/images/products/cushions.gif); } #page-quilts h2 { background-image:url(/images/products/quilts.gif); } /******************** PRODUCTS ********************/ .product-index { border:1px solid #999; background-color:#dedbd6; width:892px; } /* mobiles */ .product-index table { border-collapse:collapse; margin:8px auto; } .product-index table td div { padding:8px; background-color:#FFF; } .product-index table td a { display:block; width:190px; height:190px; text-indent:-5000px; } /* borders */ td.elephants { padding:0 8px 8px 0; border-right:1px dashed #a2d7e2; border-bottom:1px dashed #a2d7e2; } td.fairies { padding:0 8px 8px 8px; border-right:1px dashed #a2d7e2; border-bottom:1px dashed #a2d7e2; } td.bird-cage { padding:0 8px 8px 8px; border-bottom:1px dashed #a2d7e2; } td.birds-clouds { padding:0 0 8px 8px; border-left:1px dashed #a2d7e2; border-bottom:1px dashed #a2d7e2; } td.birds-trees { padding:8px 8px 8px 0; border:1px dashed #a2d7e2; border-left:0; } td.pink-birds { padding:8px 8px 8px 8px; border:1px dashed #a2d7e2; } td.peppermint-owl { padding:8px 8px 8px 8px; border:1px dashed #a2d7e2; } td.blue-elephants { padding:8px 0 8px 8px; border:1px dashed #a2d7e2; border-right:0; } td.blushing-rose-owls { padding:8px 8px 0 0; border-right:1px dashed #a2d7e2; border-top:1px dashed #a2d7e2; } /* images */ td.elephants a { background:url(/images/products/mobiles/elephants/elephants.jpg); } td.fairies a { background:url(/images/products/mobiles/fairies/fairies.jpg); } td.bird-cage a { background:url(/images/products/mobiles/bird-cage/bird-cage.jpg); } td.birds-clouds a { background:url(/images/products/mobiles/birds-clouds/birds-clouds.jpg); } td.birds-trees a { background:url(/images/products/mobiles/birds-trees/birds-trees.jpg); } td.pink-birds a { background:url(/images/products/mobiles/pink-birds/pink-birds.jpg); } td.peppermint-owl a { background:url(/images/products/mobiles/peppermint-owl/peppermint-owl.jpg); } td.blue-elephants a { background:url(/images/products/mobiles/blue-elephants/blue-elephants.jpg); } td.blushing-rose-owls a { background:url(/images/products/mobiles/blushing-rose-owls/blushing-rose-owls.jpg); } /* hover */ td.elephants a:hover { background:url(/images/products/mobiles/elephants/elephants.hover.jpg); } td.fairies a:hover { background:url(/images/products/mobiles/fairies/fairies.hover.jpg); } td.bird-cage a:hover { background:url(/images/products/mobiles/bird-cage/bird-cage.hover.jpg); } td.birds-trees a:hover { background:url(/images/products/mobiles/birds-trees/birds-trees.hover.jpg); } td.pink-birds a:hover { background:url(/images/products/mobiles/pink-birds/pink-birds.hover.jpg); } td.peppermint-owl a:hover { background:url(/images/products/mobiles/peppermint-owl/peppermint-owl.hover.jpg); } td.birds-clouds a:hover { background:url(/images/products/mobiles/birds-clouds/birds-clouds.hover.jpg); } td.blue-elephants a:hover { background:url(/images/products/mobiles/blue-elephants/blue-elephants.hover.jpg); } td.blushing-rose-owls a:hover { background:url(/images/products/mobiles/blushing-rose-owls/blushing-rose-owls.hover.jpg); } /* cushions */ #page-cushions .product-index { width:445px; } td.peppermint-owl-cushion { padding:0 8px 0 8px; border-right:1px dashed #a2d7e2; } td.frosty-pink-owl { padding:0 8px 0 8px; } td.peppermint-owl-cushion a { background:url(/images/products/cushions/peppermint-owl/peppermint-owl.jpg); } td.frosty-pink-owl a { background:url(/images/products/cushions/frosty-pink-owl/frosty-pink-owl.jpg); } td.peppermint-owl-cushion a:hover { background:url(/images/products/cushions/peppermint-owl/peppermint-owl.hover.jpg); } td.frosty-pink-owl a:hover { background:url(/images/products/cushions/frosty-pink-owl/frosty-pink-owl.hover.jpg); } /* quilts */ #page-quilts .product-index { width:445px; } td.peppermint-quilt { padding:0 8px 0 8px; border-right:1px dashed #a2d7e2; } td.pink-and-grey-quilt { padding:0 8px 0 8px; } td.peppermint-quilt a { background:url(/images/products/quilts/peppermint-quilt/peppermint-quilt.jpg); } td.pink-and-grey-quilt a { background:url(/images/products/quilts/pink-and-grey-quilt/pink-and-grey-quilt.jpg); } td.peppermint-quilt a:hover { background:url(/images/products/quilts/peppermint-quilt/peppermint-quilt.hover.jpg); } td.pink-and-grey-quilt a:hover { background:url(/images/products/quilts/pink-and-grey-quilt/pink-and-grey-quilt.hover.jpg); } /******************** TAGS ********************/ .product h2 { height:70px; background-position:left top; } /* headings */ div.elephants h2 { background-image:url(/images/products/mobiles/elephants/elephants.heading.gif) !important; } div.fairies h2 { background-image:url(/images/products/mobiles/fairies/fairies.heading.gif) !important; } div.bird-cage h2 { background-image:url(/images/products/mobiles/bird-cage/bird-cage.heading.gif) !important; } div.birds-clouds h2 { background-image:url(/images/products/mobiles/birds-clouds/birds-clouds.heading.gif) !important; } div.birds-trees h2 { background-image:url(/images/products/mobiles/birds-trees/birds-trees.heading.gif) !important; } div.pink-birds h2 { background-image:url(/images/products/mobiles/pink-birds/pink-birds.heading.gif) !important; } div.peppermint-owl h2 { background-image:url(/images/products/mobiles/peppermint-owl/peppermint-owl.heading.gif) !important; } div.blue-elephants h2 { background-image:url(/images/products/mobiles/blue-elephants/blue-elephants.heading.gif) !important; } div.blushing-rose-owls h2 { background-image:url(/images/products/mobiles/blushing-rose-owls/blushing-rose-owls.heading.gif) !important; } div.peppermint-quilt h2 { background-image:url(/images/products/quilts/peppermint-quilt/peppermint-quilt.heading.gif) !important; width:250px; } div.pink-and-grey-quilt h2 { background-image:url(/images/products/quilts/pink-and-grey-quilt/pink-and-grey-quilt.heading.gif) !important; } /* price */ div.elephants .price { background-image:url(/images/products/mobiles/elephants/elephants.tag.jpg); } div.fairies .price { background-image:url(/images/products/mobiles/fairies/fairies.tag.jpg); } div.bird-cage .price { background-image:url(/images/products/mobiles/bird-cage/bird-cage.tag.jpg); } div.birds-clouds .price { background-image:url(/images/products/mobiles/birds-clouds/birds-clouds.tag.jpg); } div.birds-trees .price { background-image:url(/images/products/mobiles/birds-trees/birds-trees.tag.jpg); } div.pink-birds .price { background-image:url(/images/products/mobiles/pink-birds/pink-birds.tag.jpg); } div.peppermint-owl .price { background-image:url(/images/products/mobiles/peppermint-owl/peppermint-owl.tag.jpg); } div.blue-elephants .price { background-image:url(/images/products/mobiles/blue-elephants/blue-elephants.tag.jpg); } div.blushing-rose-owls .price { background-image:url(/images/products/mobiles/blushing-rose-owls/blushing-rose-owls.tag.jpg); } div.peppermint-quilt .price { background-image:url(/images/products/quilts/peppermint-quilt/peppermint-quilt.tag.jpg); } div.pink-and-grey-quilt .price { background-image:url(/images/products/quilts/pink-and-grey-quilt/pink-and-grey-quilt.tag.jpg); } /* cushions */ div.peppermint-owl-cushion h2 { background-image:url(/images/products/cushions/peppermint-owl/peppermint-owl.heading.gif) !important; } div.frosty-pink-owl h2 { background-image:url(/images/products/cushions/frosty-pink-owl/frosty-pink-owl.heading.gif) !important; } div.peppermint-owl-cushion .price { background-image:url(/images/products/cushions/peppermint-owl/peppermint-owl.tag.jpg); } div.frosty-pink-owl .price { background-image:url(/images/products/cushions/frosty-pink-owl/frosty-pink-owl.tag.jpg); } /******************** PRODUCT DETAIL ********************/ .product { float:left; width:394px; padding-top:4px; margin-top:12px;} .product .desc { height:196px; } /* photo */ .photo { float:left; display:block; width:484px; margin-right:12px; margin-top:12px; } /* dimensions */ .product table { border-collapse:collapse; font:10px Arial; color:#666; width:160px; margin-left:86px; } .product table td, .product table th { border:1px dashed #ccc; text-align:center; width:75px; } /* price tag */ .product .price { text-indent:-5000px; height:115px; background-repeat:no-repeat; background-position:right center; margin:20px 0 20px 0; } .product .buttons { border:1px dashed #ccc; padding:10px 10px 4px 10px; width:141px; margin-left:86px; } .product form { margin-bottom:6px; } .lead-time { margin-left:42px; margin-top:12px; font-size:0.9em; color:#cc0000; } /* div.buttons { display:none; } li.viewcart { display:none; } p.lead-time { display:none; } */ /******************** FOOTER ********************/ .footer { padding-top:2px; text-align:right; font:0.8em Arial; color:#FFF; margin-bottom:12px; } .footer div { width:950px; margin:auto; color:#FFF; } .footer div ul { list-style:none; margin:0; padding:0; margin-left:6px; } .footer div ul li { float:left; margin-right:4px; } .footer div ul li a { color:#FFF; } .footer a:hover { text-decoration:underline; }