/* Author: Keith O'Sullivan Creation Date: 18th Dec 2006 Last modified by: Paul Sturrs Modification Date: 18th Mar 2008 What does this file do?: This file contains all styles used for the Tescodiets.com homepage. Table of contents: */ /* importing promos for the homepage */ @import "promos.css"; /* end promos */ h1#welcomeNote { margin-left: -5000px; margin-bottom: -25px; visibility: hidden; } #pledgeBtn{float:left; width:296px; height:63px; margin-left:12px; display:inline;} #tdfemale #pledgeBtn{background:transparent url(/images/pledgeAbBtn.gif) no-repeat;} #tdmale #pledgeBtn{background:transparent url(/images/pledgeAbBtn_m.gif) no-repeat;} #pledgeBtn a{float:left; width:140px; height:56px; padding:7px 10px 0 145px;} fieldset {border:none; margin:0px;} #poweredLoginCon {float:right; padding-right: 25px; width: 60%;} .loginButCon {width: 125px; height:18px; float:left;} #promoContainer { width: 613px; height: 346px; background: url(/images/homepage/promoCtr_bg.jpg) no-repeat; padding: 5px; } #tdfemale #promoContainerInner { background: #F1F5FA url(/images/homepage/promoCtr_inner.jpg) right bottom; width: 613px; } #tdmale #promoContainerInner { background: #f4f4f4 url(/images/homepage/promoCtr_inner.jpg) right bottom; width: 613px; } #promoContainerInner .promoText p.survBtn{position:absolute; margin-top:10px;} #promoContainerInner .promoText p.survBtn a{text-indent:-10000px; overflow:hidden; width:258px; height:77px;display:block; margin:0; padding:0;} #tdfemale #promoContainerInner .promoText p.survBtn a{background:#fff url(/images/homepage/survGuideBtn.png) no-repeat;} #tdmale #promoContainerInner .promoText p.survBtn a{background:#fff url(/images/homepage/survGuideBtn_m.png) no-repeat;} #HPLeftCol {float:left; width:560px; margin-right:0px; display: inline;} #mainImageLink{width:235px; height:200px;float:left;text-indent:-10000px;overflow:hidden;} /*Value Pledge*/ #valuePledge{ float:left;position:relative; width:370px; margin:0 0 30px 0; padding:10px 10px 10px 240px;} #valuePledge p{line-height:1.3em; margin-bottom:5px;} #tdfemale #valuePledge{background:#EEF3F9 url(/images/homepage/valuePledge.gif) no-repeat 10px 20px;} #tdmale #valuePledge{background:#f4f4f4 url(/images/homepage/valuePledge_m.gif) no-repeat 10px 20px;} /*----*/ #homereasons li h5 img{float:left; padding-bottom:4px;} #homereasons li h5 span{float:left; margin:5px 0 0 5px;} #homereasons li p{clear:both;} /*#qsb { float:left; position: relative; left: 20px; width:180px; } .HPfreeDietProfileCon{ float: left; width: 200px;} .HPfreeDietProfileConInner { width: 180px; margin: 0; } */ /* FDP box colors - you may need to change these when you change bg image */ /*#main-intro .HPfreeDietProfileCon p, #main-intro .HPfreeDietProfileCon strong { color: #333; } .HPfreeDietProfileCon h3 { margin-bottom:10px; color:#559ccc; font-size: 1em; padding-right: 10px; } .HPfreeDietProfileCon h3 span { font-weight: normal; } .HPfreeDietProfileCon p {margin-bottom:6px;} .HPfreeDietProfileCon strong {font-size:0.85em;} .HPfreeDietProfileCon label { display: block; clear: both; } #age_pos, #sex_pos { width: 60px; float: left; color: #333; } #submit_btn {position:relative; clear:both; margin: 10px 0 0 0;} #submit_btn input { border: 0; } #wt_st, #wt_lb, #htft, #htin, #gender {width: 65px;} */ #HPnewsCon {float:left; width:180px;} #HPnewsCon a{float:left;} #HPnewsCon a:hover{text-decoration:underline;} #HPnewsCon h2{float:left;font-size:1.3em;color:#fff;font-weight:700;height:23px;padding:5px 0 0 10px;} #HPnewsCon h3{color: #333; float:left; padding: 5px;} #newsTicker{float:left; position: relative; width: 335px; overflow: hidden; margin:10px 0 0 5px;; padding: 0; } #newsScroller{ position: relative; position/**/: relative; height: 50px; white-space: nowrap;width:1410px;} #newsScroller li{list-style-type:none; float: left; margin: 0; } #newsScroller li a{color:#333; text-decoration:none; line-height:30px; font-size:.9em;margin-left:15px;} #newsScroller li a:hover { color: #45531C; text-decoration: underline; } #HPnewsCon div.boxNews{float:left; width:180px; color: #000; margin-bottom: 10px; } #HPnewsCon div.boxNews h4 a {font-size:.9em;font-weight:700;padding:4px;display: block; width: 172px; color: #4DA0CE;} #HPnewsCon div.boxNews h4 a:hover { text-decoration: none; } #HPnewsCon div.boxNews a:hover { color: #333; } #HPnewsCon div.boxNews p{margin:4px;} #HPnewsCon div.boxNews p a.readNews { margin: 0 5px 5px 0; color: #4DA0CE;} #HPnewsCon div.boxNews p a:hover.readNews { text-decoration: none; } p.btnMore a { color: #fff; background:url(../images/btn_green.jpg) no-repeat left bottom; float:left; width:180px; padding: 0; margin: 0 0 20px 0; line-height: 37px; text-align:center; color: #fff; text-decoration: underline; } p.btnMore a:hover { text-decoration: none; } p.avarageDisc{margin-top:10px; float:left; font-size:.9em; font-style:italic;} #HPrhtCon {float:right; width:180px;} #HPrhtCon img {border:0;} #homeProgrammes { background: url(/images/measuring_tape.jpg) no-repeat bottom; float: left; height: 280px; margin: 20px 0 0 20px; width: 220px; } #homeProgrammes ol { margin-left: 25px; font-size: 11px; } #homeBreakingNews { width: 623px; height: 45px; clear: both; position: relative; left: -10px; } #homeBreakingNews p { float: left; width: 222px; color:#fff; font-size: 1em; font-weight: bold; padding: 15px 0 0 15px; } #tdfemale #homeBreakingNews { background: url(/images/homepage/breaakingNewsBg_f.jpg) no-repeat; } #tdmale #homeBreakingNews { background: url(/images/homepage/breaakingNewsBg_m.jpg) no-repeat; } .blueTxt { color: #53A3CF; } /*** Promotion Container - added by PS 18 March 2008 ***/ #promoContainerInner.hpPromo { background: #E6EEC1 url(/images/promo_bg.jpg) repeat-y bottom; width: 624px; height: 336px; } #promoContainerInner h2 { display: none; } #promoContainerInner.promocarousel li p { background: #97B53B url(/images/promo_btn_off.jpg) left no-repeat; border-bottom: 1px solid #AECB57; font-weight: 12px; } #promoContainerInner #dietplansInfo .tabset_tabs li a {background: #97B53B;} /************** Homepage Splash Styling **************/ .hpPromo img { border: 0; } .promoImage { width: 293px; float: left; } .promoText { width: 258px; height: 296px; float: left; border-left: 1px solid #fff; padding: 20px 30px; } .promoText p { color: #000; margin-bottom: 10px;} .promoText p a { font-weight: bold; text-decoration: none; } .promoText p a:hover { text-decoration: underline; } .promoText h1 { font-size: 1.4em; margin-bottom: 10px; line-height: 26px; margin-top: 0px; } .promoText h1 a { color: #000; text-decoration: none; } .promoText h1 a:hover { color: #000; } .promoText h4 { color: #fff; font-size: 20px; font-weight: normal; line-height: 24px; margin-bottom: 15px; } .promoForm h3 { color: #000; margin-top: 30px; } .marTop10 { margin-top: 10px; } .marTop20 { margin-top: 20px; } /************** Homepage Splash Styling **************/ #hpPromoInf { width: 560px; float: left; } .promocarousel ol { position: relative; float: left; list-style:none; } .promocarousel li p { margin-left:293px; width: 267px; font-size: 11px; } .promocarousel li p a { display:block; width:227px; height: 106px; color:#fff; text-decoration: none; padding: 5px 15px 0 25px; } .promocarousel li.dy a { color:#fff; } .promocarousel li p a:hover, .promocarousel li p a.active { background: #C1D578 url(/images/promo_btn_over.jpg) left no-repeat; color:#333; text-decoration:none; } .promocarousel li img, .promocarousel li div { position:absolute; border: 0; top:0; left: 0; float:left; width:293px; height:336px; } .promocarousel li a:hover img,.promocarousel li.one img,.promocarousel li.dy img, .promocarousel li a:hover div, .promocarousel li.one div, .promocarousel li.dy div { color: #000; z-index: 100; } .promocarousel h3 { color: #000; } #btnPromo { width: 100%; margin-bottom: 20px; height: 49px; text-align: center; clear: both; } #btnPromo a { background: #fff url(/images/homepage/promoCtr_bottom.jpg) no-repeat bottom; color: #333; font: 16px Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none;line-height: 50px; display: block; } #btnPromo a:hover { color:#C27C14; } /*.hpDietPromo { background: #fff; border: 1px solid #D6E1E8; width:560px; height: 264px; float: left; } .hpDietPromo h2 { font-size: 14px; color: #333; width: 180px; padding: 5px; font-weight: bold; } .promocarouse2 ol { position:relative; height:264px; list-style:none; width:180px; background: #97B53B; } .promocarouse2 li p { background: url(/images/homepage/promoCtr_lines.jpg) repeat-x bottom; width: 180px; } .promocarouse2 li p div p { background: #fff; width: 250px; } .promocarouse2 li p a { display:block; width:247px; height: 56px; color:#fff; text-decoration: none; padding: 5px 10px 0 10px; } .promocarouse2 li.dy a { color:#fff; } .promocarouse2 li p a:hover { background: #C1D578 url(/images/homepage/dietplans_btn_over.jpg) repeat-x right; color:#333; text-decoration:none; } .promocarouse2 li div { background: #fff; position:absolute; border: 0; top:0; left:-5000px; float:left; visibility:hidden; width:293px; height:275px; } .promocarouse2 li a:hover div,.promocarouse2 li.one div,.promocarouse2 li.dy div { visibility:visible; left:180px; color: #333; background: #fff; }*/ #homeBanners { width: 560px; color: #ccc; font-size: 11px;/* border-top: 1px dotted #666; */margin-top: 10px; } #homeBanners p { display: block; clear: both; padding: 10px 0; } #homeBanners img { float: left; border: 0; margin-right: 5px;} #ctrMiddle { width: 560px; clear:both; margin-bottom: 20px; } #dietplansInfo { position: relative; left: -10px; width: 550px; height: 290px; background: url(/images/dietplans_homeBG.jpg) no-repeat; padding: 0 10px; margin: 0 0 20px 0; } #dietplansInfo h2 { clear: right; font-size: 12px; font-weight: bold; color: #333; width: 175px; padding: 5px 0 5px 5px; background: #F2F7DF; margin: 10px 0 0 0; } #dietplansInfo h2 a { font-size: 14px; color: #333; } #dietplansMenu {width: 180px; float: left; } .tabset_tabs { float: left; width: 180px; } .tabset_tabs ul { margin: 0; padding: 0; background: #F2F7DF; } .tabset_tabs li { list-style:none; margin: 0; padding: 0; border-bottom:1px solid #F2F7DF; border-left:1px solid #F2F7DF; } .tabset_tabs li a { width: 125px; height: 60px; display: block; text-decoration: none; color: #45531C; margin: 0; padding: 0 0 0 55px; line-height: 61px; } .tabset_tabs li:hover a, .tabset_tabs .active { background: url(/images/homepage/dietplans_btn_over.jpg); color: #000; margin: 0; } #tabset_div { float: left; width: 360px; height: 273px; } .js .tabset_content { display: none; } .js .tabset_content_active { float: left; display: block; margin-top: 10px; } .tabset_content_active img { float: left; width: 100px; margin: 0 5px 0 0; padding: 0; height: 254px; } .tabset_content_active h4 { float: left; clear: right; color: #6D993A; font-size: 14px; padding: 10px 5px 0 5px; width: 253px; text-decoration: none; } .tabset_content_active h4 a { text-decoration: underline; color: #6D993A; font-size: 14px; } .tabset_content_active h4 a:hover { text-decoration: none; color: #6D993A; font-size: 14px; } .tabset_content_active h5 { font-size: 12px; font-weight: bold; color: #6D993A; padding: 10px 5px 0 5px; width: 253px; margin-top: 10px; } .tabset_content_active p, .tabset_content_active li { float: left; clear: none; width: 220px; padding: 5px 5px 0 5px; list-style-type: none; } #tab1 { background: url(/images/homepage/mealplan_lftImg_lightChoices.jpg) no-repeat 0 10px; width: 254px; height: 300px; padding-left: 115px; float: left; z-index: 100; } #tab2 { background: url(/images/homepage/mealplan_lftImg_gi.jpg) no-repeat 0 10px; width: 254px; height: 300px; padding-left: 115px; float: left; } #tab3 { background: url(/images/homepage/mealplan_lftImg_med.jpg) no-repeat 0 10px; width: 254px; height: 300px; padding-left: 115px; float: left; } #tab4 { background: url(/images/homepage/mealplan_lftImg_other.jpg) no-repeat 0 10px; width: 254px; height: 300px; padding-left: 115px; float: left; } #tab_lChoices a { background: #fff url(/images/homepage/btn_lc_logo.jpg) no-repeat 10px 10px; } .tabset_tabs li#tab_lChoices a:hover, .tabset_tabs li#tab_lChoices .active { background: url(/images/homepage/dietplans_lcbtn_over.jpg) no-repeat right; color: #000; } .tabset_tabs li#tab_gi a { background: #fff url(/images/homepage/btn_gi_logo.jpg) no-repeat 10px 10px; } .tabset_tabs li#tab_gi a:hover, .tabset_tabs li#tab_gi .active { background: url(/images/homepage/dietplans_gibtn_over.jpg) no-repeat right; color: #000; } .tabset_tabs li#tab_med a { background: #fff url(/images/homepage/btn_med_logo.jpg) no-repeat 10px 10px; } .tabset_tabs li#tab_med a:hover, .tabset_tabs li#tab_med .active { background: url(/images/homepage/dietplans_medbtn_over.jpg) no-repeat right; color: #000; } .tabset_tabs li#tab_other a { background: #fff url(/images/homepage/btn_other_logo.jpg) no-repeat 10px 10px; } .tabset_tabs li#tab_other a:hover, .tabset_tabs li#tab_other .active { background: url(/images/homepage/dietplans_otherbtn_over.jpg) no-repeat right; color: #000; } #promoLeft { float: left; } #promoRight { float: right; } .hpStatement { text-align:center; } /*.leftJoinBtn { background: url(/images/leftbtnHome.jpg) no-repeat; text-align: center; width: 555px; height: 50px; padding: 10px 0; } .leftJoinBtn a { color: #000; line-height: 30px; font-size: 16px; font-weight: bold; text-decoration: none; display: block; } .leftJoinBtn a:hover { color: #C27C14; }*/ #HPsubLinks { width: 955px; float: none; clear: both; border-left: 1px #f5f5f5 solid; border-right: 1px #f5f5f5 solid; padding-top: 13px;} #HPsubLinks ul { background: #fff url(/images/homepage/hp_fullpg_dot.gif) repeat-y -3px 0; padding: 0; list-style: none; width: 935px; margin: 0 9px; clear: both; display:block; border-top: 5px #fff solid;} #HPsubLinks li { background: transparent; width: 155px; float: left; margin-bottom: 10px;} #HPsubLinks li.firstSubLink, #HPsubLinks li.lastSubLink { border: 0;} #HPsubLinks li.lastSubLink { width: 90%; clear: both; float: none;} #HPsubLinks ul ul { background: transparent; margin: 0; padding: 0; list-style: none; width: 99%; } #HPsubLinks li li { background: transparent; width: 90%; margin:5% 0 0 5%; overflow: hidden; border: 0; } #HPsubLinks h5, #HPsubLinks h5 a { font-size: 0.9em; width: 90%;} #HPsubLinks h5 a { text-decoration: none;} #HPsubLinks h5 a:hover { text-decoration: underline;} #HPsubLinks p, #HPsubLinks p a { font-size: 0.9em; color: #333; text-decoration: none; width: 90%;} #HPsubLinks p a:hover { color: #333; text-decoration: underline;} #tdfemale #HPsubLinks{ background: #fff url(/images/homepage/ABTest/gradient_H_5x290_blueWhite.jpg) repeat-x left top; } #tdfemale #HPsubLinks h5, #tdfemale #HPsubLinks h5 a { color:#4DA0CE; font-size: 0.9em; width: 90%;} #tdmale #HPsubLinks { background: #fff url(/images/homepage/gradient_H_5x290_greyWhite.jpg) repeat-x left top; } #tdmale #HPsubLinks h5, #tdmale #HPsubLinks h5 a { color:#cc0000; font-size: 0.9em; width: 90%;} /*----*/ #tescoActive{float:left; width:287px; height:120px; margin:0 0 15px 2px; border:4px solid #CCE7B4; background:#EBF5E2 url(/images/homepage/tescoActivehomeBg.jpg) no-repeat;} #tescoActive p a{float:left; padding:66px 10px 0 95px; color:#333; font-weight:700;} #eatSmart{float:left; width:180px; height:135px; padding:5px 5px 5px 105px; margin:13px 0 30px 0; border:4px solid #E1EAF4; background:#EEF3F9 url(/images/homepage/eatSmarthHomeBg.jpg) no-repeat 0px 5px;} #eatSmart h3 a{font-weight: normal; font-size:1.5em; margin-bottom:5px;} #eatSmart p{text-align:left; line-height:1.3em; margin:0 0 3px 0;} #eatSmart p a{float:right;font-weight:700; font-size:1em; width:118px; margin-top:10px;} #calorieCounter{float:left; width:167px; height:135px; padding:5px 5px 5px 110px; margin:20px 20px 0 0; border:4px solid #E1EAF4; background:#EEF3F9 url(/images/homepage/calorieCounterHomeBg.jpg) no-repeat 2px 5px;} #calorieCounter h3 a{float:left; font-weight: normal; font-size:1.5em; margin-bottom:5px;} #calorieCounter p{text-align:left; line-height:1.3em; margin:0 0 3px 0; float:left; clear:left;} #calorieCounter p a{float:right;font-weight:700; font-size:1em; width:167px; margin-top:0px;} .asterix { font-size: 10px; }