/* ----------------------------------------------------- Kellogg's Health - The truth about our food custom styles SCREEN style sheet author: mN -> hello@magneticn.co.uk version: 2009.10 ----------------------------------------------------- */ /* Override of main styles ------------------------------------ */ .withSideNav { width:auto; } /* General styles ------------------------------------ */ #taof { margin-top:23px; } #taof h1 { display:block; width:283px; padding-top:112px; height:0 !important; height /**/: 112px; overflow:hidden; background:url(/static/images/health/the-truth-about-our-food/heading.gif) no-repeat; } #taof h2 { font-size:1.6em; font-weight:normal; margin-top:30px; margin-bottom:30px; margin-right:30px; } #taof #intro { width:312px; color:#767272; font-weight:bold; line-height:1.4em; } #taof h3 { color:#D8040C; font-size:1.1em; font-weight:bold; margin:10px 15px 0 15px; } #taof strong { font-weight:bold; } /* SWF player ------------------------------------ */ #vidplayer { margin:53px 0 20px 0; } /* TAOF landing page links (lists) ------------------------------------ */ #taof p.home-intro {margin-top: 20px; font-size: 1.076923em; line-height: 18px;} #taof div#table {width: 749px; height: 152px; background: url(/static/images/health/the-truth-about-our-food/table.jpg); float: left; clear: both;} #taof ul#more-about { height:87px; width:749px; overflow:hidden; clear:both;} #taof ul#more-about li { display:block; height:206px; float:left; } #taof ul#more-about li a { display:block; width:100%; height:100%; text-indent:-9000px; background-color:transparent; background-position:top; background-repeat:no-repeat; background: url(/static/images/health/the-truth-about-our-food/nav.gif); } #taof ul#more-about li a#salt { width:206px; } #taof ul#more-about li a#sugar { width:202px; background-position: -206px 0; } #taof ul#more-about li a#fat { width:341px; background-position: -408px 0;} #taof ul#more-about li a#salt:hover { background-position: 0 -87px;} #taof ul#more-about li a#sugar:hover {background-position: -206px -87px; } #taof ul#more-about li a#fat:hover {background-position: -408px -87px;} #taof ul#pods { height:237px; overflow:hidden; margin:18px 0 25px 14px;} #taof ul#pods li { display:block; float:left; } #taof ul#pods li a { display:block; width:100%; height:100%; text-indent:-9000px; background-color:transparent; } #taof ul#pods li span { display:none; } #taof ul#pods li#our-products { width:351px; height:237px; background:url(/static/images/health/the-truth-about-our-food/pod-product-range.jpg) no-repeat; } #taof ul#pods li#our-products a { background-image:url(/static/images/health/the-truth-about-our-food/pod-product-range_link.gif); background-repeat:no-repeat; background-position:0 0; } #taof ul#pods li#our-products a:hover { background-position:0 -237px; } #taof ul#pods li#webchat { width:349px; height:118px; background-image:url(/static/images/health/the-truth-about-our-food/pod-web-chat.jpg); background-repeat:no-repeat; background-position:0 0; margin:0 0 9px 23px; } #taof ul#pods li#webchat a { background-image:url(/static/images/health/the-truth-about-our-food/pod-web-chat_link.gif); background-repeat:no-repeat; background-position:0 0; } #taof ul#pods li#webchat a:hover { background-position:0 -118px; } #taof ul#pods li#history { width:351px; height:237px; background:url(/static/images/health/the-truth-about-our-food/pod-history-lrg.jpg) no-repeat; margin-left:23px; } #taof ul#pods li#history a { background-image:url(/static/images/health/the-truth-about-our-food/pod-history_link2.gif); background-repeat:no-repeat; background-position:-1px 0; } #taof ul#pods li#history a:hover { background-position:-1px -237px; } /* 'More about...' pages ------------------------------------ */ #taof .text-col { width:342px; float:left; } #taof .right-side-col { width:400px; float:left; } #taof #history { display:block; width:349px; height:118px; background-image:url(/static/images/health/the-truth-about-our-food/pod-history.jpg); background-repeat:no-repeat; background-position:0 0; } #taof #history a { display:block; width:100%; height:100%; text-indent:-9000px; background-color:transparent; background-image:url(/static/images/health/the-truth-about-our-food/pod-history_link.gif); background-repeat:no-repeat; background-position:0 0; } #taof #history a:hover { background-position:0 -109px; } #taof #fact-salt { display:block; width:352px; padding-top:194px; height:0 !important; height /**/: 194px; overflow:hidden; background:url(/static/images/health/the-truth-about-our-food/fact-salt.jpg) no-repeat; margin-top:40px; } #taof #fact-reduced { display:block; width:352px; height: 117px; overflow:hidden; margin-top:40px; margin-bottom: 40px;} #taof #fact-reduced a {display: block;width: 352px; height: 117px;background: url(/static/images/health/the-truth-about-our-food/sodium.jpg) no-repeat; text-indent: -9999px!important; float: left;} #taof #fact-sugar { display:block; width:346px; padding-top:192px; height:0 !important; height /**/: 192px; overflow:hidden; background:url(/static/images/health/the-truth-about-our-food/fact-sugar.jpg) no-repeat; margin-top:40px; } #taof #fact-fat { display:block; width:347px; padding-top:187px; height:0 !important; height /**/: 187px; overflow:hidden; background:url(/static/images/health/the-truth-about-our-food/fact-fat.jpg) no-repeat; margin-top:40px; } /* Webchat page styles ------------------------------------ */ #taof p.webchat-intro {margin-top: 0px; font-size: 0.9230769em; line-height: 18px; } #taof .right-side-col h2 { font-weight:bold; margin:0 15px; color:#333; font-size:1.1em; } #taof .right-side-col h3 {margin-bottom: 0; font-weight: normal;} #taof #webchat-bowl { margin:15px 0 0 120px; width:161px; height:142px; overflow:hidden; background:url(../images/health/the-truth-about-our-food/webchat-bowl.jpg) no-repeat; } #taof #chat-header { clear:both; font-weight:normal; font-size:1.7em } #taof #chat-header span { display:block; clear:both; font-size:1.1em; color:#333; } #taof #before-chat-bubble { display:block; width:674px; padding-top:189px; height:0 !important; height /**/: 189px; overflow:hidden; background:url(/static/images/health/the-truth-about-our-food/before-chat-bubble.gif) no-repeat; margin:38px 0 100px 15px;} #taof #nutritionist { background:url(../images/health/the-truth-about-our-food/sara_collie.jpg) no-repeat top left; width:114px; height:229px; float:left; margin:38px 0 40px 15px; } #taof #nutritionist p { padding-top:125px; } #taof #during-chat-bubble { width:560px; background:url(../images/health/the-truth-about-our-food/during-chat-bubble.gif) top left; float:left; margin:38px 0 40px 0; color:#fff;} #taof #during-chat-bubble h3 { margin-top:16px; font-size:1.3em; font-weight:normal; color:#fff; } #taof #during-chat-bubble h3, #taof #during-chat-bubble p { margin-left:63px; } #taof #during-chat-bubble label { display:block; float:left; width:106px; text-align:right; } #taof #during-chat-bubble input.wc-input, #taof #during-chat-bubble textarea{ width:300px; border:none; padding:2px 3px; margin-left:8px; } #taof #during-chat-bubble input.field { height:16px; background:url(../images/health/the-truth-about-our-food/bg-input.gif) no-repeat; } #taof #during-chat-bubble textarea.field { height:95px; background:url(../images/health/the-truth-about-our-food/bg-textarea.gif) no-repeat;} #taof #during-chat-bubble p.wc-submit { margin-left:177px; } #taof #during-chat-bubble .chat-bottom {width: 100%; height: 20px; background: url(../images/health/the-truth-about-our-food/during-chat-bubble.gif) bottom right;} #taof #webchat-lower-wide {float: left; clear: both; width: 700px; margin-left: 15px;} /*#taof #webchat-lower-wide * {border: 1px solid red;}*/ #taof #webchat-lower-wide h2 {margin-left: 0;} #taof #webchat-lower-wide div.wc-qa {float: left; width: 100%; } #taof #webchat-lower-wide div.wc-a, #taof #webchat-lower-wide div.wc-q {float: left; clear: both; width: 100%; margin-bottom: 10px;} #taof #webchat-lower-wide div.wc-a div.wc-icon, #taof #webchat-lower-wide div.wc-q div.wc-icon {width: 34px; float: left; margin: 10px; } #taof #webchat-lower-wide div.wc-a div.wc-text, #taof #webchat-lower-wide div.wc-q div.wc-text {float: left; width: 600px!important;} #taof #webchat-lower-wide p.webchat-refresh {float: left;} #taof #webchat-lower-wide div.wc-a { background-color:#FBFAE7; padding-top:1px;} #taof #webchat-lower-wide .wc-qa-text {width: 600px; float: left;}