/* Gday Chef Stylesheet Created by Anagramme September 2009 */ body{margin: 0; padding: 20px 0 0 0; font-family: Arial, Helvetica, sans-serif; background: url(../images/bg/bg_3.jpg) 0 0 repeat;} form{margin: 0; padding: 0;} a:active{outline: none;} a:focus{-moz-outline-style: none;} /* Centre Page ********** */ #pageWrap{width: 920px; margin: 0 auto; padding: 0;} #wrapTop{ width: 920px; height: 19px; margin: 0; float: left; background: url(../images/bg/bg_wrap_top.png) 0 0 no-repeat;} #wrap{width: 900px; margin: 0 auto; padding: 0 0 0 20px; background: url(../images/bg/bg_wrap.png) 0 0 repeat-y; float: left;} #logo{ float: left; width: 450px; background: url(../images/logo.gif) 0 5px no-repeat; padding: 0 0 10px 0; margin: 5px 0 0 10px;} #logo h1{ font: 190% Arial, Helvetica, sans-serif; color: #B34E53; font-weight: normal; margin: 0 0 0 55px; padding: 0; line-height: 130%; } #logo h1 strong{ font-weight: normal; color: #99131A;} #logo h1 a{ text-decoration: none; color: #B34E53; } #logo h2{ font-size: 80%; color: #B34E53; font-weight: normal; margin: 0 0 0 55px; padding: 0; line-height: normal;} #logo h2 a{ text-decoration: none; color: #B34E53; } .pin{ height: 20px; width: 20px; background: url(../images/icons/icon_nail.gif) 0 0 no-repeat;} .pin.right{ float: right; margin: 0 20px 0 0;} .pin.left{ float: left;} /* ************************************************************* FLAGS ************************************************************* */ #flags{ float: right; width: 200px; text-align: right; margin: 15px 20px 0 0; clear: right; } #flags a{ margin: 0 0 0 3px; float: right; width: 25px; height: 25px;} #flags a.EN, #flags a.US, #flags a.FR, #flags a.GE, #flags a.IT, #flags a.PO, #flags a.SP { background-image: url(../images/icons/icon_flags.png); background-repeat: no-repeat;} #flags a.EN{background-position: 0 -25px;} #flags a.EN:hover, #flags a.EN.active{ background-position: 0 0;} #flags a.FR{ background-position: -54px -25px;} #flags a.FR:hover, #flags a.FR.active{ background-position: -54px 0;} #flags a.GE{ background-position: -81px -25px;} #flags a.GE:hover, #flags a.GE.active{ background-position: -81px 0;} #flags a.IT{ background-position: -108px -25px;} #flags a.IT:hover, #flags a.IT.active{ background-position: -108px 0;} #flags a.PO{ background-position: -270px -25px;} #flags a.PO:hover, #flags a.PO.active{ background-position: -270px 0;} #flags a.SP{ background-position: -240px -25px;} #flags a.SP:hover, #flags a.SP.active{ background-position: -240px 0;} /* ************************************************************* TOP Navigation ************************************************************* */ #topNav{ width: 880px; height: 40px; float: left; clear: both; margin: 7px 0 0 0; background: url(../images/bg/bg_topNav.gif) 0 0 no-repeat; } #topNav ul { float: left; width: 875px; margin: 13px 0 0 5px; padding: 0; list-style: none;} #topNav li { float: left; margin: 0; padding: 0; font-size: 85%;} #topNav li a{ color: #fff; font-weight: bold; letter-spacing: 0; line-height: 80%; text-decoration: none; padding: 2px 8px; display: block; border-left: 1px dotted #D90000; border-right: 1px dotted #000; cursor: pointer; white-space: nowrap;} #topNav li a:hover, #topNav li a.active{ color: #FFCC00;} #topNav li a.active.home{ border-left: none;} /* ************************************************************* HEADER ************************************************************* */ #header{ width: 876px; height: 196px; float: left; clear: both; padding: 2px; margin: 10px 0 0 0; background: url(../images/bg/bg_header.png) 0 0 no-repeat;} #header h1{ float: left; margin: 30px 0 0 30px; color: #990000; font-size: 110%; width: 450px; line-height: 130%;} #header h2{ float: left; margin: 30px 0 0 30px; color: #990000; font-size: 130%; width: 450px; line-height: 130%;} #header p{ float: left; margin: 5px 0 0 30px; color: #000; font-size: 100%; width: 450px; clear: left; line-height: 130%;} #header_flash{ width: 882px; height: 200px; float: left; clear: both; padding: 0; margin: 10px 0 0 0px; } #social_links{ float: left; width: 150px; margin: 23px 0 0 50px; } #social_links p{ float: left; font-size: 65%; text-transform: uppercase; width: 145px; padding: 0; margin: 0 0 5px 2px; color: #900; } #social_links a{ float: left; margin: 0 10px 0 0; } #social_links img{ float: left; } /* ************************************************************* MAIN CONTENT AREAS ************************************************************* */ #contentWrap{width: 880px; float: left; text-align: left; margin: 10px 0 0 0; padding: 0; background: url(../images/bg/bg_contentWrap_main.gif) 0 0 repeat-y;} #contentWrap #top{ float: left; background: url(../images/bg/bg_contentWrap_top.gif) 0 0 no-repeat; height: 5px; width: 880px;} #contentWrap #btm{ float: left; background: url(../images/bg/bg_contentWrap_btm.gif) 0 0 no-repeat; height: 5px; width: 880px;} #contentWrap2{ float: left; background: url(../images/bg/bg_contentWrap.gif) 0 0 repeat-x; width: 856px; margin: 0 0 0 2px; padding: 10px;} /* HALF WIDTH ********** */ #mainContent {width: 540px; float: left; text-align: left; margin: 0 0 0 5px; padding: 0; display: inline;} /* WIDE FULL PAGE ********** */ #mainContent2{width: 856px; float: left; text-align: left; margin: 10px 0; padding: 0; display: inline;} #mainContent h1, #mainContent2 h1{font-size: 180%; margin: 0 0 0 0; padding: 0; clear: both; color: #AA0000; font-weight: normal; float: left; width: 100%; letter-spacing: -0.05em; } #mainContent h2, #mainContent2 h2{font-size: 130%; margin: 20px 0 0 0; padding: 0; clear: both; color: #990000; font-weight: normal; line-height: 130%; float: left; width: 100%;} #mainContent h3, #mainContent2 h3{font-size: 100%; padding: 0; margin: 5px 0 0 0; font-weight: normal; color: #C00; float: left; width: 100%;} #mainContent p, #mainContent2 p{font-size: 75%; padding: 0; margin: 10px 0 0 0; color: #663300; line-height: 140%; clear: both; float: left; width: 100%; text-align:justify;} #mainContent a.more{ color: #990000; background: url(../images/icons/icon_arrow-continue.gif) 0 4px no-repeat; padding: 0 0 0 18px; text-decoration: none; margin-left:5px;} #mainContent a.more:hover{ color:#FF6600; text-decoration: underline;} #mainContent p a, #mainContent2 p a{ color: #FF6600; text-decoration: underline;} #mainContent p a:hover, #mainContent2 p a:hover{ color: #000; text-decoration: underline;} #mainContent2 h1 a{ float: right; font-size: 55%; font-style: normal; letter-spacing: normal; color: #000; background:url(../images/icons/icon_arrow-back.gif) 0 0 no-repeat; padding: 1px 0 3px 23px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin: 0 0 0 0;} #mainContent2 h1 a:hover{ color: #FF6600;} #mainContent ul{ float: left; width: 450px; padding: 0; margin: 20px 0 0 20px; list-style: none;} #mainContent li{font-size: 75%; padding: 0 0 0 12px; margin: 0; color: #8C4600; line-height: 160%; clear: both; background: url(../images/icons/icon_arrow_red.gif) 0 6px no-repeat; width: 450px;} #mainContent li a{ color: #900; } #mainContent li a:hover{ color: #000; } /*#mainContent dl{ float: left; width: 350px; padding: 10px; margin: 0 0 20px 0; border: 1px solid #ccc; background-color: #fff;} #mainContent dt, #mainContent dd{ float: left; padding: 0; margin: 0 0 0 0; font-size: 75%; line-height: 170%;} #mainContent dt {width: 120px; clear: both; color: #000;} #mainContent dd {width: 200px; color: #666;}*/ #mainContent .separation-thin{ width: 600px; float: left; margin: 0; padding: 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #E5E5E5; height: 1px; font-size: 0; clear: both; line-height: 0;} .image{ float: left; margin: 0 10px 0 0;} .imageLeft{ float: left; margin: 15px 10px 20px 0; padding: 2px; border: 1px solid #ccc;} #mainContent .image, #mainContent2 image{ float: left; margin: 0 10px 0 0; clear: both;} /* ************************************************************* CATALOGUE + NEWSLETTER ARCHIVES ************************************************************* */ #catalogue{ float: left; width: 435px; height: 141px; background: url(../images/bg/bg_catalogue.jpg) 0 0 no-repeat;} #catalogue h2{ font-size: 100%; color: #CC0000; margin: 40px 0 0 20px; padding: 0; float: left; width: 180px; } #catalogue p{ color: #663300; font-size: 90%; float: left; width: 160px; clear: both; margin: 10px 0 0 20px; padding: 0 0 0 35px; background: url(../images/icons/icon_pdf.png) 0 0 no-repeat; } #catalogue p a{color: #663300; text-decoration: none;} #catalogue p a:hover{color: #C00; text-decoration: underline;} #newsletter_archives{ float: left; width: 435px; height: 141px; background: url(../images/bg/bg_newsletter.jpg) 0 0 no-repeat; margin: 0 0 0 10px; } #newsletter_archives h2{ color: #58391D; font-size: 100%; float: left; width: 200px; margin: 25px 0 0 15px; padding: 0; } #newsletter_archives p{ color: #58391D; font-size: 90%; float: left; width: 240px; margin: 2px 0 0 15px; padding: 0; clear: both; } #newsletter_archives .text{ float: left; width: 140px; clear: both; font: 80% Arial, Helvetica, sans-serif; margin: 2px 0 3px 0; padding: 2px; color: #8C6640; border: 1px solid #D5B786;} #newsletter_archives .btn_submit{ margin: 4px 0 0 7px;} #newsletter_archives p a{ color: #663300; font-size: 75%; text-transform: uppercase; background: url(../images/icons/icon_email.png) 0 3px no-repeat; padding: 0 0 0 25px; text-decoration: none; } #newsletter_archives p a:hover{ color: #900; text-decoration: underline; } /* ************************************************************* HOMEPAGE ************************************************************* */ #homepage_promo{ float: left; width: 880px; margin: 10px 0 0 0; clear: both; } #mainContent.homepage{ width: 400px;} #mainContent.homepage h2{ font-size: 100%; margin: 10px 0 0 0; padding: 0; } #mainContent.homepage h3{ background: url(../images/icons/icon_tick.png) 0 0 no-repeat; font-weight: bold; color: #58391D; font-size: 95%; margin: 20px 0 0 0; padding: 0 0 0 20px; } #mainContent.homepage p{ margin: 5px 0 0 0;} /* VIDEO ************************** */ #video_hp{ float: right; margin: 10px 10px 25px 0; background: #000; width: 420px; } /* Video Wrap */ #video_hp a.videoWrap_hp{ float: left; width: 99px; height: 70px; margin: 0 0 5px 5px;} /* play button */ #video_hp a.videoWrap_hp img{ margin: 20px 0 0 35px; border: 0px; float: none; } /* ************************************************************* ADD THIS ************************************************************* */ .addthis_toolbox{ margin-top: 10px; float: left; } /* ************************************************************* PROMO BLOCK ************************************************************* */ .promo_block{ float: left; background: #F3EBDE url(../images/bg/bg_promo_block_hp.png) 0 0 no-repeat; width: 270px; margin: 10px 10px 2px 7px; padding: 10px 0 0 0; height: 200px; } .promo_block_btm{ float: left; clear: both; width: 270px; height: 4px; background: url(../images/bg/bg_promo_block_btm.png) 0 0 no-repeat; margin: 5px 0 0 0; } .promo_block h2{ font-size: 120%; color: #990000; font-weight: normal; padding: 5px 0 10px 0; margin: 0 0 10px 15px; width: 241px; float: left;} .promo_block p{ font-size: 70%; float: left; margin: 0 0 0 15px; padding: 0; width: 240px; color: #663300; clear: both; text-align: justify; line-height: 140%; } .promo_block p a{ color: #99774C; margin: 0;} .promo_block a{color: #F60; text-decoration: none; cursor: pointer;} .promo_block .text{ width: 220px; border: 1px solid #D1C5A0; padding: 3px; float: left; color: #663300; font: Arial, Helvetica, sans-serif; } .promo_block img{ float: left;} .promo_block h3{font-size: 70%; padding: 0; margin: 5px 0 0 0; font-weight: normal; color: #C00; float: left; width: 100%;} .promo_block h4{font-size: 90%; padding: 0; margin: 0 0 5px 0; font-weight: normal; color: #C00; float: left; width: 100%;} /* TESTIMONIALS BLOCK ************************** */ .promo_block.testimonial h2{ background: url(../images/bg/bg_title_testimonial.png) 0 0 no-repeat; } .promo_block.testimonial h3{ color: #990000; margin-left: 15px; float: left; width: 240px; } /* NEWS BLOCK ************************** */ .promo_block.news h2{ background: url(../images/bg/bg_title_actualite.png) 0 0 no-repeat; } .promo_block.news #news-container{ width: 240px; height: 120px; margin: 0 0 0 15px; float: left; overflow: hidden; position: relative;} .promo_block.news #news-container ul{ padding: 0; margin: 0; list-style: none; position: absolute;} .promo_block.news #news-container li { padding: 0; margin: 0 0 10px 0; clear: both; float: left; } .promo_block.news a.news_thumb{ width: 50px; height: 50px; float: left; overflow: hidden; background-repeat: no-repeat; background-position: center; } .promo_block.news h3{ font-size: 75%; font-weight: bold; float: left; width: 180px; margin: 0 0 0 10px; } .promo_block.news h3 a{ color: #663300; } .promo_block.news img{ margin: 0 8px 0 0;} .promo_block.news p{ color: #99774C; margin: 5px 0 10px 15px; display: inline; } .promo_block.news p a{color: #99774C; text-decoration: underline; background: url(../images/icons/icon_arrow.png) 0 4px no-repeat; padding: 0 0 0 8px;} /* QUICK SEARCH ************************** */ .promo_block.quickSearch{ margin-right: 0; } .promo_block.quickSearch h2{ background: url(../images/bg/bg_title_search.png) 0 0 no-repeat; } .promo_block.quickSearch p{ font-size: 75%; margin: 0 0 2px 15px; float: left; } /* DOWNLOADS ************************** */ .promo_block.downloads{ margin-right: 0; } .promo_block.downloads h2{ background: url(../images/bg/bg_title_downloads.png) 0 0 no-repeat; } .promo_block.downloads p{ font-size: 75%; margin-bottom: 5px; } .promo_block.downloads .text{ width: 205px; font: 75% Arial, Helvetica, sans-serif; margin-left: 15px; } .promo_block.downloads .btn{ float: left; margin: 3px 0 0 5px; } .promo_block.downloads .promo_block_btm { margin-top: 15px;} /* NEWSLETTER ************************** */ .promo_block.newsletter h2{background: url(../images/bg/bg_title_newsletter.png) 0 0 no-repeat;} .promo_block.newsletter p{ margin-bottom: 5px;} .promo_block.newsletter p a{color: #99774C; text-decoration: underline; background: url(../images/icons/icon_arrow.png) 0 4px no-repeat; padding: 0 0 0 8px;} .promo_block.newsletter .text{ width: 200px; font: Arial, Helvetica, sans-serif 100%; } .promo_block.newsletter .btn_submit{ float: left; margin: 3px 0 0 5px; } /* ************************************************************* SUB CONTENT ************************************************************* */ #subContent{width: 280px; padding: 0; margin: 0 0 0 0; float: right; text-align: left; } #subContent .promo_block{ height: auto; margin: 10px 0 15px 0; background: #F3EBDE url(../images/bg/bg_promo_block.png) 0 0 no-repeat; } #subContent .promo_block.quickSearch{background: #F3EBDE url(../images/bg/bg_promo_block_search.png) 0 0 no-repeat; height: auto; } /* ************************************************************* PRODUCT NAVIGATION ************************************************************* */ #productNavListWrap{ border: 1px solid #E7D7BD; float: right; width: 212px;} #productNavList{ float: right; width: 180px; border: 1px solid #fff; padding: 15px 15px 5px; margin: 0 0 0 0; background: #F1E7D7 url(../images/bg/bg_productNav.png) bottom left repeat-x;} #productNavList h2{ font-size: 100%; color: #9F0F0F; font-weight: normal; margin: 0; padding: 0; float: left; width: 100%;} #productNavList ul{ float: left; margin: 10px 0 0 0; padding: 0; width: 100%; clear: both; list-style: none;} #productNavList li{ float: left; color: #663300; font-size: 70%; border-top: 1px dotted #CC997F; padding: 8px 0; width: 100%; margin: 0; line-height: 150%;} #productNavList li a{ padding: 0 0 0 15px; background: url(../images/icons/icon_arrow_small_brown.png) 0 6px no-repeat; text-decoration: none; color: #663300; float: left; display: block; width: 170px;} #productNavList li a:hover, #productNavList li a.active{ color:#C00; background-position: 3px -23px;} #productNavList li a.active{ font-weight: bold;} #productNavList ul ul{ float: left; margin: 5px 0 0 10px; padding: 0; width: 175px; clear: both; list-style: none;} #productNavList li li { font-size: 100%; border-top: none; padding: 3px 0;} #productNavList li li a{color: #C00; background: url(../images/icons/icon_arrow_small_brown.png) 0px -23px no-repeat; width: 160px;} #productNavList li li a:hover, #productNavList li li a.active{color: #000; background-position: 3px 6px;} /* ************************************************************* TELL A FRIEND ************************************************************* */ #tellAFriend{width: 460px; margin-left:10px;} #tellAFriend h1{background: url(images/icon_titleCategory.gif) 0 0 no-repeat; padding: 5px 0 0 35px; margin: 0 0 10px 10px; font-size: 130%; color: #FF0000; display: inline; float: left; width: auto;} #tellAFriend h2{padding: 5px 0 0 15px; margin: 20px 0 10px 0; font-size: 100%; text-transform: capitalize; color: #000;} #tellAFriend fieldset{margin-bottom: 20px; font-size: 70%;} #tellAFriend legend{ color: #FF0000; font-size: 100%; margin: 0;} #tellAFriend label{width: 200px; float: left; marging-right: 0.5em; padding: 0; display: block;} /* ************************************************************* BUTTONS ************************************************************* */ .btnContinue { background: url(../images/btn_continue.gif) 0 0 no-repeat; width: 103px; height: 33px; display: block;} /* ************************************************************* CAROUSEL ************************************************************* */ #carousel{ float: left; width: 490px; height: 110px; background: url(../images/bg/bg_carousel.png) 0 0 no-repeat; margin: 5px 0 0 0;} /* ************************************************************* SITEMAP ************************************************************* */ #sitemap { margin: 0 0 20px 20px; float: left;} #sitemap h2{ font-size: 80%; font-weight: normal; background: url(../images/icons/icon_greenArrowBullet.gif) 0 10px no-repeat; padding: 0 0 0 15px; margin: 10px 0 0 0;} #sitemap h2 a{color: #666; border-bottom: none; line-height: 200%;} #sitemap p{margin: 0 0 0 15px; padding: 0; line-height: 180%;} #sitemap p a{background: url(../images/icon_circle.gif) 0 4px no-repeat; padding: 0 0 0 15px; text-decoration: none; color: #000;} /* ************************************************************* Miscellaneous ************************************************************* */ .line{padding: 0; margin: 20px 0; border-top: 1px dotted #D1C5A0; width: 100%; line-height: 0px; font-size: 0; clear: both; float: left;} .clearSpace{ float: left; clear: both; width: 200px; font-size: 0; height: 20px;} #noBG{background-image: none;} hr {border: none 0; border-top: 1px dotted #CCC; width: 100%; height: 1px; margin: 0 0 20px 0; clear: both;} /************************************************************** CONTACT FORM **************************************************************/ #contactForm {width: 290px; float: left; margin: 20px 0 0 10px; } #contactForm h1{font-size: 130%; color: #663300; margin: 5px 0 5px 0; padding: 0; font-weight: normal; float: left;} #contactForm h2{font-size: 100%; color: #900; margin: 20px 0 10px 0; padding: 0; font-weight: normal; text-transform: capitalize; float: left;} #contactForm p{ margin: 2px 0 0 0; height: auto; float: left; width: 100%; color: #8C4600; font-size: 75%;} #contactForm p label{float: left; width: 100px;} #contactForm input{float: left;} #contactForm .text{border: 1px solid #D1C5A0; font: 100% Georgia, "Times New Roman", Times, serif; color: #000; padding: 3px; width: 175px; background-color: #F8F2EA;} #contactForm select{border: 1px solid #ccc; font-size: 100%; color: #8C4600;} #contactForm textarea{border: 1px solid #ccc; font: 100% Arial, Helvetica, sans-serif; color: #666; padding: 3px; width: 250px;} #contactForm .submit{ background: url(../images/btn_send.gif) 0 0 no-repeat; width: 89px; height: 33px; border: none; cursor: pointer;} #contactForm p.footnote{font-size: 60%; text-transform: lowercase; margin: 10px 0 0 0; color: #D1C5A0;} #contactForm p a{ color: #FF6600; text-decoration: underline;} #contactForm p a:hover{ color: #000; text-decoration: underline;} /************************************************************** CONTACT PAGE **************************************************************/ #mainContent.contact h2{margin: 0; padding: 0; width: 360px; clear: left; line-height: 100%;} #mainContent.contact h3{padding: 0; margin: 5px 0 0 0; width: 360px; clear: left;} #mainContent.contact h3 img{ float: left; margin: -2px 3px 0 0;} #mainContent.contact p{margin: 5px 0 0 0; width: 360px; clear: left;} #mainContent.contact .photo{float: right; padding: 1px; border: 1px solid #D1C5A0;} /************************************************************** ACCESS MAP **************************************************************/ #access_map{ float: left; width: 310px; background: #F7F0E6 url(../images/bg/bg_access_map.png) 0 0 repeat-x; } #access_map img{ float: left; clear: both;} #access_map h2{ float: left; width: 310px; margin: 0 0 0 10px; padding: 0; font-size: 90%; color: #663300; text-align: center; background: url(../images/bg/bg_title_access_map.png) center 3px no-repeat; text-transform: uppercase; } #access_map h3{ float: left; width: 285px; margin: 10px 0 0 15px; color: #663300; font-size: 100%; font-weight: normal; text-transform: uppercase; } #access_map h4{ float: left; width: 285px; margin: 5px 0 5px 15px; color: #CC0000; font-size: 80%; font-weight: normal; } #access_map p{ float: left; width: 285px; margin: 2px 0 0 15px; font-size: 75%; color: #92784C; } #googleMapWrap{ float: left; border: 1px solid #DDC7A2; padding: 2px; margin: 10px 0 0 10px; background: #FFF; } #googleMap{ float: left; width: 284px; height: 400px; padding: 0; margin: 0; } /*----------------------------Suggest Styles--------------------------*/ .suggest_link {background-color: #FFFFFF; padding: 2px 6px 2px 6px;} .suggest_link_over {background-color: #3366CC; padding: 2px 6px 2px 6px;} #search_suggest {position: absolute; background-color: #FFFFFF; text-align: left; border: 1px dashed #CCC;} /*----------------------------End Suggest Styles------------------------*/ /* ************************************************************* DISTRIBUTORS ************************************************************* */ #mainContent.distributors h2 img{ float: left; margin: 1px 5px 0 0;} #mainContent.distributors ul{ float: left; width: 500px; padding: 0; margin: 20px 0 0 0; list-style: none;} #mainContent.distributors li{font-size: 75%; padding: 0; margin: 0 0 5px 0; color: #8C4600; line-height: 160%; clear: none; width: 165px; background: none; float: left;} #mainContent.distributors li a{ color: #900; } #mainContent.distributors li a:hover{ color: #000; } #mainContent.distributors li img{ float: left; margin: -2px 8px 0 0;} /* ************************************************************* TESTIMONIALS ************************************************************* */ #mainContent.testimonials h4{font-size: 90%; padding: 0; margin: 5px 0 0 0; font-weight: normal; color: #C00; float: left; width: 100%;} #mainContent.testimonials .line{ margin-bottom: 10px;} #mainContent.testimonials h4 a{font-size: 100%; padding: 0; margin: 5px 0 0 0; font-weight: normal; color: #F60; float: left; width: 100%;} /* ************************************************************* FAQ ************************************************************* */ #mainContent.faq h2{padding: 20px 0 0 0 ; margin: 20px 0 0 0; border-top: 1px dotted #D1C5A0; font-size: 110%;} #mainContent.faq #listWrap{ border: 1px solid #E7D7BD; float: left; width: 500px; margin: 20px 0 20px 0;} #mainContent.faq #listWrap ul{ float: left; width: 468px; border: 1px solid #fff; padding: 15px; margin: 0 0 0 0; background: #F1E7D7 url(../images/bg/bg_productNav.png) bottom left repeat-x;} #mainContent.faq li{ line-height: 200%; background-position: 0 8px;} #mainContent.faq li a{ text-decoration: none; border-bottom: 1px dotted #900;} #mainContent.faq li a:hover{ text-decoration: none; border-bottom: 1px dotted #000;} /* ************************************************************* TAB SYSTEM ************************************************************* */ div.panes div {display:none; height:auto;} div.panes div.pane { display:none; } ul#tabs a.current, ul#tabs a.current:hover, ul#tabs li.current a {color:#000;} /* ************************************************************* Footer ************************************************************* */ #contact{ float: left; width: 360px; background: url(../images/icons/icon_contact.png) 0 0 no-repeat; padding: 0 0 0 70px; margin: 25px 0 0 20px;} #contact h2{ color: #CC0000; font-weight: bold; font-size: 90%; margin: 0; padding: 0; text-transform: uppercase; } #contact ul{ float: left; width: 180px; margin: 5px 0 0 0; padding: 0; list-style-type: none; } #contact li{ color: #663300; float: left; width: 130; margin: 0 0 3px 0; padding: 0 0 0 30px; font-size: 80%; } #contact li.phone{ background: url(../images/icons/icon_phone.png) 8px 4px no-repeat;} #contact li.fax{ background: url(../images/icons/icon_fax.png) 7px 1px no-repeat;} #contact li.email{ background: url(../images/icons/icon_email.png) 0 4px no-repeat;} #contact p{color: #663300; margin: 0 0 3px 0; padding: 0; font-size: 75%;} #contact a{ color: #663300;} #contact a:hover{ color: #F60;} #contact #address{ float: left; width: 180px;} #map{ float: left; width: 420px; background: url(../images/pics/pic_map_footer.png) 0 0 no-repeat; margin: 25px 0 0 0; height: 105px; } #map h2{ color: #CC0000; font-weight: bold; font-size: 90%; margin: 0; padding: 0; text-transform: uppercase; width: 200px; float: right; } #map p{ color: #663300; font-size: 80%; margin: 15px 0 0 0; padding: 0; width: 200px; float: right; clear: both;} #subscribe{float: right; width: 300px; background: url(../images/icons/icon_subscribe.png) 0 0 no-repeat; padding: 0 0 0 70px; margin: 25px 40px 0 0;} #subscribe h2{color: #663300; font-weight: normal; font-size: 110%; margin: 0; padding: 0; } #subscribe p{ font-size: 70%; color: #8C4600; margin: 5px 0 0 0; padding: 0;} #subscribe form{ float: left; margin: 10px 0 0 0;} #subscribe .text{ font: 90% "Times New Roman", Times, serif; float: left; margin: 0 5px 0 0; width: 180px; border: 1px solid #D1C5A0; color: #8C6640;} #footer{width: 920px; height: auto; margin: 0 0 30px 0; padding: 22px 0 30px 0; background: url(../images/bg/bg_footer.png) 0 0 no-repeat; text-align: center; float: left;} #footer ul{list-style: none; width: 820px; text-align: center; padding: 0; margin: 0 0 0 80px; float: left;} #footer li{margin: 0 10px 0 0; padding: 0 10px 0 0; display: inline; font-size: 70%; border-right: 1px dotted #960; color: #9B774F; line-height: 140%; float: left;} #footer li a{color: #9B774F; text-decoration: none;} #footer li a:hover{color: #FF6600; text-decoration: underline;} #footer li.title{ color: #0099FF; font-size: 75%;} #footer li.title a{ color: #0099FF;} /* ************************************************************* PAGE NAVIGATION ************************************************************* */ #products_result{background: url(../images/bg/bg_productResults.png) 0 0 no-repeat; padding: 0; margin: 20px 0 0 0; text-align: left; float: left; clear: both; width: 100%; height: 30px;} #mainContent #products_result p{color: #885F34; font-size: 70%; line-height: 100%; float: left; width: 200px; margin: 10px 0 0 10px; padding: 0;} #pageNav { float: right; width: 200px; padding: 0; margin: 7px 0 0 0; color: #666; display: inline; } #mainContent #pageNav form{ float: right; width: auto; text-align: right; padding: 0; margin: 0 5px 0 0; color: #666; display: inline;} #mainContent #pageNav select{ font-size: 70%; margin: 0 5px; float: left; display: inline;} #mainContent #pageNav a{padding: 0; margin: 1px 0 0 0; color: #666; line-height: 150%; text-decoration: none; float: left;} #mainContent #pageNav img{ float: left; padding: 0; margin: 0;} /* PAGE VIDEOS ************************** */ #videos{ float: left; margin: 10px 0 25px 0;} /* Video Wrap */ #videos .videoWrap{ float: left; width: 410px; margin: 0 15px 15px 0;} #videos .videoWrap p{ float: left; width: 390px; margin: 0; padding: 5px 10px; background-color: #E8D8BE; } #videos a.myPlayer { display:block; width: 408px; height:240px; text-align: center; margin: 0; float:left; border:1px solid #E8D8BE;} #videoPopup{ float: left; margin: 5px 0 5px 0; z-index:10;} #videoPopup #player{display:block; width:640px; height:450px; z-index:10;} /* play button */ #videos a.myPlayer img { margin-top:70px; border:0px; float: none; } /* when container is hovered we alter the border color */ #videos a.myPlayer:hover { border:1px solid #000;} /* ************************************************************* NEWS LISTING ************************************************************* */ .list, .list2{ width: 500px; float: left; margin: 1px 0 0 0; padding: 15px 10px; display: inline; border-bottom: 1px solid #E8D8BE;} .list{background-color: #FBFAF3;} .list2{background-color: #F2EDDA;} .list .text, .list2 .text{ float: left; margin: 0 0 0 5px; padding: 0;} #mainContent .text h3{ float: left; width: 100%; margin: 0; padding: 0; font-size: 90%;} #mainContent .text p{ float: none; margin: 0; width:100%; padding: 0; font-size: 70%; display: inline;} #featured_news{ float: left; width: 500px; margin: 10px 0 0 0; padding: 10px 10px 20px 10px; background: url(../images/bg/bg_intro.gif) 0 0 no-repeat; border-bottom: 1px solid #E8D8BE; } .featured_image_mask{float: left; margin: 0 10px 0 0; width: 200px; height: 200px; padding: 2px; border: 2px solid #E8D8BE;} .featured_image_mask a{ float: left; width: 200px; height: 200px; background-position: center; background-repeat: no-repeat; } #featured_news .text { width: 100%; margin: 0;} #featured_news .text h3{ float: none; width: 100%; margin: 0 0 5px 0; padding: 0; font-size: 100%; font-weight: bold;} #featured_news .text p{ float: none; line-height: 120%; width: 100%; margin: 0; padding: 0; font-size: 70%; display: inline;} .current_news .text{ width: 100%; margin: 0; float: none;} #mainContent .current_news .text h3{ float: none; width: 100%; margin: 0; padding: 0; font-size: 90%; } #mainContent .current_news .text p{ float: none; width: 100%; margin: 0; padding: 0; font-size: 70%; display: inline;} .current_image_mask{float: left; margin: 0 10px 0 0; width: 125px; height: 125px; padding: 2px; border: 2px solid #E8D8BE;} .current_image_mask a{ float: left; width: 125px; height: 125px; background-position: center; background-repeat: no-repeat; } /* #mainContent .gallery ul{ float: none; list-style: none; margin: 0 ; padding: 0; clear: none; } #mainContent .gallery li { padding: 0; margin: 0; float: left; width: auto; background: none; clear: none; line-height: 100%; font-size: 70%;} */ #mainContent .gallery li a{ color: #666; text-decoration: none;} #mainContent .gallery .img_mask{ float: left; width: 50px; height: 50px; padding: 2px; margin: 15px 10px 0 0; border: 2px solid #E8D8BE;} #mainContent .gallery a{ float: left; width: 50px; height: 50px; background-position: center; background-repeat: no-repeat; } /* ************************************************************* DOWNLOADS LISTING ************************************************************* */ .text dl{ float: left; width: 450px; margin: 5px 0 0 0; padding: 0;line-height:40px; } .text dt{ font-size: 70%; color: #C00; float: left; width: 350px; line-height:20px; margin: 0 0 3px 0; padding: 0; font-weight:bold;} .text dt span{ font-weight:normal;color: #000; float: left; width: 350px; margin: 0 0 3px 0; padding: 0; } .text dd{ color: #663300; font-variant:small-caps; float: left; width:auto; margin: 0 0 3px 0; padding: 0 0 0 10px; font-size: 75%;border-left:1px solid #663300;} .text dd a{ text-decoration: none; border-bottom: 1px dotted #900; color:#663300;} .text dd a:hover{ text-decoration: none; border-bottom: 1px dotted #000;} /* ************************************************************* POPUP NEWSLETTER ************************************************************* */ #contactPopup { float: left; width: 560px; padding: 0; margin: 0; overflow: auto;} #contactPopup h2{font-size: 130%; margin: 5px 0 10px 15px; background: url(../images/icons/icon_accountTitle.gif) 0 2px no-repeat; padding: 0 0 0 25px; clear: both; color: #663300; font-weight: normal;} #contactPopup .lines{ border-top: 1px solid #99CC00; border-bottom: 1px solid #CCE57F; height: 1px; width: 515px; float: left; margin: 5px 0; font-size: 0; clear: both;} #contactPopup p{ float: left; width: 500px; font-size:70%; margin: 0 0 0 15px; padding: 0; line-height: auto; display: inline;} #contactPopup form h4{background-position: 0 2px; margin: 15px 0 5px 15px; display: inline; font-size: 90%;} #contactPopup form p{ float: left; width: 260px; font-size:70%; margin: 0 0 0 15px; padding: 0; line-height: 220%; display: inline;} #contactPopup form label{ width: 100px; float: left} #contactPopup form textarea { font: 110% Arial, Helvetica, sans-serif; width: 520px; height: 100px;} #contactPopup form .submit { background: url(images/btn_searchBar_go.gif) 0 0 no-repeat; border: none; width: 100px; height: 30px; width: 130px; cursor: pointer; clear: both; float: left; margin: 5px 0 0 15px;} #contactPopup form .submit:hover{background: url(images/btn_searchBar_go.gif) 1px 1px no-repeat; height: 31px; width: 131px;} #contactPopup h4{ font-size: 100%; color: #996600; font-weight: normal; padding: 0 0 0 15px; margin: 20px 0 5px 0; float: left; font-weight: normal; background: url(../images/icons/icon_arrow_brown.gif) 0 3px no-repeat; clear: both; width: 320px;} #replaceme, #sackdata{ float: left; width: 280px; padding: 0; margin: 0 0 0 0;} #contactPopup #replaceme p, #contactPopup #sackdata p{ float: left; width: 260px; margin: 0; padding: 10px; display: inline; color: #FF6600; font-size: 70%; background-color: #FFF; line-height: 130%;} /* the overlayed element */ .apple_overlay { /* initially overlay is hidden */ display:none; z-index: 10000; /* growing background image */ background-image:url(../img/overlay/white.png); /* width after the growing animation finishes height is automatically calculated */ width:600px; height:300px; /* some padding to layout nested elements nicely */ padding:35px; } /* default close button positioned on upper right corner */ .apple_overlay div.close { background-image:url(../js/jquerytools/images/close.png); position:absolute; right:5px; top:5px; cursor:pointer; height:35px; width:35px; } /* use a semi-transparent image for the overlay */ #overlay { background-image:url(../js/jquerytools/images/transparent.png); height:300px; } /* container for external content. uses vertical scrollbar, if needed */ .contentWrap4 { height:300px; overflow-y:auto; }