/* ----------------------------------------------------- Fibre Foundation (http://) SCREEN style sheet author: mN -> hello@madebymn.co.uk version: 2008.07 ----------------------------------------------------- CONTENTS: 1. GLOBAL 2. TYPOGRAPHY 3. GENERAL LAYOUT 4. HEADER 5. NAVIGATION 6. CONTENT 7. FOOTER ----------------------------------------------------- */ /* =1. Global */ html {font-family: Arial, Verdana, sans-serif; height: 100%; display: block;} body {background: url(../images/global/gradient.png) repeat-x;height: 100%; display: block;} .right {float: right;} /* =2. Typography */ h1,h2,h3,h4,h5 {font-family: Helvetica, Arial, sans-serif; color: #641a14;} p {font-size: 1em; padding: 0 0 10px 0;} a {text-decoration: none; color: #e53821; text-decoration: underline;} a:hover {text-decoration: none;} ul, p {font-size: 1.4em; color: #524826; line-height: 120%;} ul strong, p strong {color: #62882e; } /* =3. General Layout */ div#outer {width: 918px; margin: auto; background: #fff;} div#inner {width: 894px; margin: auto;} div#header, div#navigation, div#container, div#footer {width: 100%; margin: auto; float: left;} /* =4. Header */ div#header h1 {width: 360px; height: 71px; margin: 18px 0 0px 0; float: right; background: url(../images/global/logo.gif); text-indent: -9999px;} /* =5. Navigation */ div#navigation {margin: 27px 0 0 0; width: 100%; height: 34px;} div#navigation ul {width: 892px; height: 34px; background: url(../images/global/navigation.gif) 0 0; position: relative;} div#navigation ul li {position: absolute; top: 0;} div#navigation ul li a {text-indent: -9999px;} div#navigation ul li, div#navigation ul li a {height: 34px; display: block;} div#navigation ul li#nav-get-more-fibre {left: 0; width: 162px;} div#navigation ul li#nav-fact-box {left: 163px; width:116px;} div#navigation ul li#nav-whole-body-health {left: 278px; width: 184px;} div#navigation ul li#nav-how-to-get-more {left: 462px; width: 166px;} div#navigation ul li#nav-learn-more {left: 628px; width: 135px;} div#navigation ul li#nav-about-us {left: 763px; width: 130px;} div#navigation ul li#nav-get-more-fibre a:hover {background: url(../images/global/navigation.gif) 0 -34px no-repeat;} div#navigation ul li#nav-fact-box a:hover{background: url(../images/global/navigation.gif) -163px -34px no-repeat;} div#navigation ul li#nav-whole-body-health a:hover {background: url(../images/global/navigation.gif) -278px -34px no-repeat;} div#navigation ul li#nav-how-to-get-more a:hover {background: url(../images/global/navigation.gif) -462px -34px no-repeat;} div#navigation ul li#nav-learn-more a:hover {background: url(../images/global/navigation.gif) -628px -34px no-repeat;} div#navigation ul li#nav-about-us a:hover {background: url(../images/global/navigation.gif) -763px -34px no-repeat;} div#navigation ul li#nav-get-more-fibre a.active {background: url(../images/global/navigation.gif) 0 -68px no-repeat;} div#navigation ul li#nav-fact-box a.active {background: url(../images/global/navigation.gif) -163px -68px no-repeat;} div#navigation ul li#nav-whole-body-health a.active {background: url(../images/global/navigation.gif) -278px -68px no-repeat;} div#navigation ul li#nav-how-to-get-more a.active {background: url(../images/global/navigation.gif) -462px -68px no-repeat;} div#navigation ul li#nav-learn-more a.active {background: url(../images/global/navigation.gif) -628px -68px no-repeat;} div#navigation ul li#nav-about-us a.active {background: url(../images/global/navigation.gif) -763px -68px no-repeat;} div#navigation ul li#nav-get-more-fibre a.active:hover {background: url(../images/global/navigation.gif) 0 -68px no-repeat;} div#navigation ul li#nav-fact-box a.active:hover {background: url(../images/global/navigation.gif) -163px -68px no-repeat;} div#navigation ul li#nav-whole-body-health a.active:hover {background: url(../images/global/navigation.gif) -278px -68px no-repeat;} div#navigation ul li#nav-how-to-get-more a.active:hover {background: url(../images/global/navigation.gif) -462px -68px no-repeat;} div#navigation ul li#nav-learn-more a.active:hover {background: url(../images/global/navigation.gif) -628px -68px no-repeat;} div#navigation ul li#nav-about-us a.active:hover {background: url(../images/global/navigation.gif) -763px -68px no-repeat;} /* =6. Content */ div#content {width: 100%;} #get-more-fibre div#primary {float: right; width: 646px; margin: 0 -12px 0 0; height: 382px; background: url(../images/get-more-fibre/primary_bg.jpg) no-repeat right bottom;} #get-more-fibre div#primary h2 {width: 445px; height: 127px; text-indent: -9999px; background: url(../images/get-more-fibre/primary_h2.gif);} #get-more-fibre div#primary div#figures {width: 366px; height: 60px; background: url(../images/get-more-fibre/primary_figures.gif) no-repeat; margin: 10px 0 0 45px;} #get-more-fibre div#primary p {text-align: right; width: 340px; margin: 10px 0 0 20px;} #get-more-fibre div#primary p#disclaimer {font-size: 1em; float: left; text-align: left; margin: 10px 0 0 20px;} #get-more-fibre div#primary a#button_findoutmore {width: 145px; height: 45px; background: url(../images/get-more-fibre/button_findoutmore.gif); display: block; text-indent: -9999px; text-align: left; float: right; margin: 10px -10px 0 0;} #get-more-fibre div#primary a#button_findoutmore:hover {background-position: -145px 0;} #get-more-fibre div#secondary {width: 260px; height: 334px; float: left;} #get-more-fibre div#secondary ul {width: 255px; height: 334px; background: url(../images/get-more-fibre/secondary_bg.jpg); position: relative;} #get-more-fibre div#secondary ul li {position: absolute; top: 0;} #get-more-fibre div#secondary ul li a {text-indent: -9999px;} #get-more-fibre div#secondary ul li, div#content div#secondary ul li a {width: 255px; height: 100%; display: block;} #get-more-fibre div#secondary ul li#secondary-fact-box {height: 107px; top: 0;} #get-more-fibre div#secondary ul li#secondary-how-to-get-more {height: 110px; top: 108px;} #get-more-fibre div#secondary ul li#secondary-download {height: 112px; top: 218px;} #get-more-fibre div#secondary ul li#secondary-fact-box a:hover {background: url(../images/get-more-fibre/secondary_bg.jpg) -255px 0;} #get-more-fibre div#secondary ul li#secondary-how-to-get-more a:hover {background: url(../images/get-more-fibre/secondary_bg.jpg) -255px -108px;} #get-more-fibre div#secondary ul li#secondary-download a:hover {background: url(../images/get-more-fibre/secondary_bg.jpg) -255px -218px;} #fact-box div#primary {float: right; width: 100%; background: url(../images/fact-box/primary_bg.jpg) no-repeat right bottom;} #fact-box div#primary h2 {height: 49px; width: 199px; text-indent: -9999px; background: url(../images/fact-box/primary_h2.gif); margin: 23px 0 0 0;} #fact-box div#primary ul {width: 446px; background: url(../images/fact-box/list_bg.jpg) repeat-x bottom left; padding: 10px 0 30px 0;} #fact-box div#primary ul li {background: url(../images/fact-box/list_hr.png) no-repeat bottom center; padding: 0 0 10px 0; margin: 10px 0 0 60px; width: 390px; position: relative;} #fact-box div#primary ul li.last {background: none;} #fact-box div#primary ul li span {display: block; width: 27px; height: 30px; text-indent: -9999px; background: url(../images/fact-box/list_numbers.gif); position: absolute; left: -30px; top: -10px;} #fact-box div#primary ul li span#list_1 {background-position: 0 0} #fact-box div#primary ul li span#list_2 {background-position: 0 -31px;} #fact-box div#primary ul li span#list_3 {background-position: 0 -61px;} #fact-box div#primary ul li span#list_4 {background-position: 0 -91px;} #fact-box div#primary ul li span#list_5 {background-position: 0 -121px;} #whole-body-health div#primary {float: left; width: 260px;} #whole-body-health div#primary h2 {width: 260px; height: 114px; background: url(../images/whole-body-health/primary_h2.gif); text-indent: -9999px; margin: 23px 0 0 0;} #whole-body-health div#primary p {margin: 10px 0 0 37px;} #whole-body-health div#primary div#primary_foodimage {width: 185px; height: 95px; background: url(../images/whole-body-health/primary_foodimage.jpg); margin: 10px 0 30px 50px;} #whole-body-health div#secondary {width: 634px; background: url(../images/whole-body-health/secondary_bg.jpg) repeat-x bottom left; float: right; position: relative;} #whole-body-health div#secondary div#secondary_woman {width: 109px; height: 402px; background: url(../images/whole-body-health/secondary_woman.jpg); position: absolute; bottom: 0; left: 263px;} #whole-body-health div#secondary ul li#mood {margin: 10px 0 0 400px;} #whole-body-health div#secondary ul li#breast-cancer {margin: -50px 0 0 50px;} #whole-body-health div#secondary ul li#heart-health {margin: -60px 0 0px 415px;} #whole-body-health div#secondary ul li#diabetes {margin: -50px 0 0 40px;} #whole-body-health div#secondary ul li#colon-cancer {margin: -60px 0 0 420px;} #whole-body-health div#secondary ul li#bowel-cancer {margin: -50px 0 0 50px;} #whole-body-health div#secondary ul li#digestive {margin: -60px 0 0 400px;} #whole-body-health div#secondary ul li span.arrow {position: absolute; width: 35px; height: 35px; background: url(../images/whole-body-health/arrows.gif); display: block; z-index:9996;} /* Active */ #whole-body-health div#secondary ul li.active-small span.arrow,#whole-body-health div#secondary ul li.active-big span.arrow {position: absolute; width: 35px; height: 35px; background: url(../images/whole-body-health/arrows_active.gif); display: block; z-index:9996;} #whole-body-health div#secondary ul li#mood span.arrow {top: 20px; left: -28px; background-position: -105px 0;} #whole-body-health div#secondary ul li#breast-cancer span.arrow {top: 20px; right: -28px;} #whole-body-health div#secondary ul li#heart-health span.arrow {top: 45px; left: -28px; background-position: -140px 0;} #whole-body-health div#secondary ul li#diabetes span.arrow {top: 20px; right: -28px;background-position: -35px 0;} #whole-body-health div#secondary ul li#colon-cancer span.arrow {top: 40px; left: -28px; background-position: -175px 0;} #whole-body-health div#secondary ul li#bowel-cancer span.arrow {top: 20px; right: -28px; background-position: -70px 0;} #whole-body-health div#secondary ul li#digestive span.arrow {top: 20px; left: -28px; background-position: -210px 0;} #whole-body-health div#secondary ul li h3 {text-align: center; padding: 0px 0 5px 0; font-weight: normal; color: #ac6741; font-size: 1em; position: relative; top: 00px;} #whole-body-health div#secondary ul li p.copy {margin: 0 auto; text-align: center; font-size: 0.9em; position: relative; top: 00px; padding: 0 0 10px 0;} #whole-body-health div#secondary ul li a.more {margin: auto; display: block; width: 40px; height: 16px; z-index: 9999; background: url(../images/whole-body-health/button_more.gif); text-indent: -9999px;} #whole-body-health div#secondary ul li.active-small a.more {background: url(../images/whole-body-health/button_more_active.gif);} #whole-body-health div#secondary ul li p.more {display: none;} #whole-body-health div#secondary ul li.small p.copy {width: 143px;} #whole-body-health div#secondary ul li.big p.copy {width: 188px;} #bubbles li { } #bubbles li .top {position: relative;} #bubbles li.small {width: 167px;} #bubbles li.small .top {background: url(../images/whole-body-health/bbl_top_small.gif); height: 16px; width: 100%;} #bubbles li.small .middle {background: url(../images/whole-body-health/bbl_middle_small.gif) repeat-y;width: 100%; } #bubbles li.small .bottom {background: url(../images/whole-body-health/bbl_bottom_small.gif); height: 17px;width: 100%; } #bubbles li.big {width: 218px;} #bubbles li.big .top {background: url(../images/whole-body-health/bbl_top_big.gif); height: 16px; width: 100%;} #bubbles li.big .middle {background: url(../images/whole-body-health/bbl_middle_big.gif) repeat-y;width: 100%;} #bubbles li.big .bottom {background: url(../images/whole-body-health/bbl_bottom_big.gif); height: 17px;width: 100%;} /* Active */ #bubbles li.active-small {width: 167px;} #bubbles li.active-small .top {background: url(../images/whole-body-health/bbl_top_small_active.gif); height: 16px; width: 100%;} #bubbles li.active-small .middle {background: url(../images/whole-body-health/bbl_middle_small_active.gif) no-repeat left bottom; width: 100%; } #bubbles li.active-small .bottom {background: url(../images/whole-body-health/bbl_bottom_small_active.gif); height: 17px;width: 100%; } #bubbles li.active-big {width: 218px;} #bubbles li.active-big .top {background: url(../images/whole-body-health/bbl_top_big_active.gif); height: 16px; width: 100%;} #bubbles li.active-big .middle {background: url(../images/whole-body-health/bbl_middle_big_active.gif) repeat-y;width: 100%;} #bubbles li.active-big .bottom {background: url(../images/whole-body-health/bbl_bottom_big_active.gif); height: 17px;width: 100%;} #bubbles li .overlay-small {width: 240px;} #bubbles li .overlay-small .top {background: url(../images/whole-body-health/oly_top_small.gif); height: 18px; width: 100%;} #bubbles li .overlay-small .middle {background: url(../images/whole-body-health/oly_middle_small.gif) repeat-y;width: 100%; } #bubbles li .overlay-small .bottom {background: url(../images/whole-body-health/oly_bottom_small.gif); height: 28px;width: 100%; } #bubbles li .overlay-big {width: 420px;} #bubbles li .overlay-big .top {background: url(../images/whole-body-health/oly_top_big.gif); height: 18px; width: 100%;} #bubbles li .overlay-big .middle {background: url(../images/whole-body-health/oly_middle_big.gif) repeat-y;width: 100%;} #bubbles li .overlay-big .bottom {background: url(../images/whole-body-health/oly_bottom_big.gif); height: 28px;width: 100%;} #bubbles li .overlay {position: absolute; z-index: 9999;} a.more {margin: 0 0 0 20px; display: block;} #whole-body-health div#secondary ul li div.overlay {top: 20px; left: 200px;} #whole-body-health div#secondary ul li#mood div.overlay {top: 10px; left: 300px;} #whole-body-health div#secondary ul li#breast-cancer div.overlay {top: 30px; left: 30px;} #whole-body-health div#secondary ul li#heart-health div.overlay {} #whole-body-health div#secondary ul li#diabetes div.overlay {} #whole-body-health div#secondary ul li#colon-cancer div.overlay {} #whole-body-health div#secondary ul li#bowel-cancer div.overlay {} #whole-body-health div#secondary ul li#digestive div.overlay {} #whole-body-health div#secondary ul li div.overlay h4 {text-align: center; font-weight: normal; color: #ac6741; font-size: 1em; position: relative; top: 0px; margin: 0; padding: 0 0 10px 0;} #whole-body-health div#secondary ul li div.overlay a.close { position: absolute; top: 10px; right: 10px; display: block; width: 15px; height: 19px; background: url(../images/whole-body-health/button_close.gif); text-indent: -9999px; z-index: 9999;} #whole-body-health div#secondary ul li div.overlay p {margin: 0 auto; text-align: left; font-size: 0.9em; padding: 0 0 5px 0; line-height: auto;} #whole-body-health div#secondary ul li div.overlay ul {font-size: 0.9em; margin: 0 auto;} #whole-body-health div#secondary ul li div.overlay ul li {width: 100%; text-align: left; background: url(../images/whole-body-health/bullet.gif) no-repeat 0 -15px; line-height: auto; padding: 0 0 5px 15px; margin: 0 0 0 -5px;} #bubbles li .overlay h4 {margin: auto; font-weight: normal;} #bubbles li .overlay-small div.copy {margin: auto; width: 190px;} #bubbles li .overlay-big div.copy {margin: auto; width: 370px;} /* JS/None-JS */ div.overlay {display: none;} #how-to-get-more div#primary {float: left; width: 100%; background: url(../images/how-to-get-more/primary_bg.jpg) repeat-x left bottom;} #how-to-get-more div#primary h2 {width: 344px; height: 65px; background: url(../images/how-to-get-more/primary_h2.gif); text-indent: -9999px; margin: 23px 0 0 0;} #how-to-get-more div#primary p#primary_intro {width: 380px; padding: 10px 35px; background: url(../images/how-to-get-more/primary_introbg.jpg) repeat-x bottom left; position: relative; z-index: 9999;} #how-to-get-more div#primary p#primary_intro a {color: #ac6741; text-decoration:none;} #how-to-get-more div#primary p#primary_intro a:hover {color: #ac6741; text-decoration:underline;} #how-to-get-more div#primary ul li {width: 100%; position: relative;} #how-to-get-more div#primary ul li#item_1 {background: url(../images/how-to-get-more/item_1.jpg) no-repeat 438px 0; height: 237px; margin-top: -135px; } #how-to-get-more div#primary ul li#item_2 {background: url(../images/how-to-get-more/item_2.jpg) no-repeat 235px 0; height: 115px; margin-top: -30px;} #how-to-get-more div#primary ul li#item_3 {background: url(../images/how-to-get-more/item_3.jpg) no-repeat 680px 0; height: 158px; margin-top: -130px;} #how-to-get-more div#primary ul li#item_4 {background: url(../images/how-to-get-more/item_4.jpg) no-repeat 30px 0; height: 142px;} #how-to-get-more div#primary ul li#item_5 {background: url(../images/how-to-get-more/item_5.jpg) no-repeat 430px 0; height: 170px; margin-top: -120px;} #how-to-get-more div#primary ul li#item_6 {background: url(../images/how-to-get-more/item_6.jpg) no-repeat 235px 0; height: 117px;} #how-to-get-more div#primary ul li#item_7 {background: url(../images/how-to-get-more/item_7.jpg) no-repeat 650px 0; height: 119px; margin-top: -80px;} #how-to-get-more div#primary ul li#item_8 {background: url(../images/how-to-get-more/item_8.jpg) no-repeat 405px 0; height: 114px;} #how-to-get-more div#primary ul li#item_9 {background: url(../images/how-to-get-more/item_9.jpg) no-repeat 250px 0; height: 231px;} #how-to-get-more div#primary ul li#item_10 {background: url(../images/how-to-get-more/item_10.jpg) no-repeat 630px 0; height: 183px; margin-top: -183px;} #how-to-get-more div#primary ul li p {font-size: 0.9em; width: 210px; position: absolute;} #how-to-get-more div#primary ul li#item_1 p {top: 80px; left: 580px;} #how-to-get-more div#primary ul li#item_2 p {top: 40px; left: 94px; width: 150px;} #how-to-get-more div#primary ul li#item_3 p {top: 60px; left: 495px; width: 200px;} #how-to-get-more div#primary ul li#item_4 p {top: 40px; left: 200px; width: 210px;} #how-to-get-more div#primary ul li#item_5 p {top: 60px; left: 615px; width: 210px;} #how-to-get-more div#primary ul li#item_6 p {top: 40px; left: 37px;} #how-to-get-more div#primary ul li#item_7 p {top: 30px; left: 447px;} #how-to-get-more div#primary ul li#item_8 p {top: 40px; left: 594px;} #how-to-get-more div#primary ul li#item_9 p {top: 20px; left: 45px; width: 200px;} #how-to-get-more div#primary ul li#item_10 p {top: 40px; left: 515px; width: 120px;} #learn-more div#primary {float: left; width: 470px; background: url(../images/learn-more/primary_bg.jpg) repeat-x bottom left; padding: 0 0 50px 0;} #learn-more div#primary h2 {width: 260px; height: 47px; background: url(../images/learn-more/primary_h2.gif); text-indent: -9999px; margin: 23px 0 0 0;} #learn-more div#primary p{width: 400px; padding: 10px 35px; } #learn-more div#primary p#download a {width: 340px; height: 130px; background: url(../images/learn-more/primary_download.png); display: block; text-indent: -9999px; cursor:pointer;} #learn-more div#primary p#adobe {font-size: 1.2em; background: url(../images/learn-more/adobe.gif) no-repeat 365px 50% ; width: 330px;} #learn-more div#primary p#adobe a {color: #ac6741} #learn-more div#primary p#adobe strong {color: #524826;} #learn-more div#secondary {width: 410px; float: right; background: url(../images/learn-more/secondary_bg.jpg) no-repeat top right; padding: 0 0 45px 0} #learn-more div#secondary h2 {width: 90px; height: 46px; background: url(../images/learn-more/secondary_h2.gif); text-indent: -9999px;margin: 23px 0 0 0;} #learn-more div#secondary ul {margin: 20px 0 0 0;} #learn-more div#secondary ul li {background: url(../images/learn-more/links_bg.png) no-repeat bottom left; line-height: 200%; text-indent: 20px;} #learn-more div#secondary ul li a {color: #524826; text-decoration: none;background: url(../images/learn-more/links_arrow.jpg) no-repeat 0 50%;} #learn-more div#secondary ul li a:hover {text-decoration: underline;} #learn-more div#secondary p#disclaimer {font-size: 1.1em; margin: 20px 0 30px 0; width: 250px;} #about-us div#container {background: url(../images/about-us/background.jpg) no-repeat bottom left; clear:both;} #about-us div#primary {float: left; width: 446px; background: url(../images/about-us/primary_bg.jpg) repeat-x left bottom;} #about-us div#primary h2 {width: 206px; height: 49px; background: url(../images/about-us/primary_h2.gif); text-indent: -9999px; margin: 23px 0 0 0;} #about-us div#primary div#primary_intro {width: 400px; padding: 10px 35px;} #about-us div#primary div#primary_intro a {color: #ac6741; text-decoration: none;} #about-us div#primary div#primary_intro a:hover {text-decoration: underline;} #about-us div#secondary {width: 420px; float: right;} #about-us div#secondary ul {margin: 20px 0 0 0;} #about-us div#secondary ul li {padding: 0 0 20px 0; margin: 0 0 20px 0; background: url(../images/about-us/secondary_hr.png) no-repeat bottom center; display: block; float: left;} #about-us div#secondary ul li p {font-size: 0.9em;} #about-us div#secondary ul li p a {color: #ac6741; font-size: 0.8em; text-decoration: none; padding: 0 18px 0 0; background: url(../images/about-us/arrow.gif) no-repeat right 0px;display: inline; line-height: 20px;} #about-us div#secondary ul li p a:hover {text-decoration: underline;} #about-us div#secondary ul li h3,#about-us div#secondary ul li p {margin: 0 0 0 120px;} #about-us div#secondary ul li div.image {width: 94px; height: 128px; float: left; margin: 0 0 0px 0; position: relative;} #about-us div#secondary ul li#biog_jarvis div.image {background: url(../images/about-us/biog_jarvis.jpg) no-repeat;} #about-us div#secondary ul li#biog_smith div.image {background: url(../images/about-us/biog_smith.jpg) no-repeat;} #about-us div#secondary ul li#biog_epstein div.image {background: url(../images/about-us/biog_epstein.jpg) no-repeat;} #about-us div#secondary ul li#biog_jefferson div.image {background: url(../images/about-us/biog_jefferson.jpg) no-repeat;} #about-us div#secondary ul li#biog_jarvis h3 {background: url(../images/about-us/h3_jarvis.gif); height: 26px; width: 151px; text-indent: -9999px;} #about-us div#secondary ul li#biog_smith h3 {background: url(../images/about-us/h3_smith.gif); height: 30px; width: 208px; text-indent: -9999px;} #about-us div#secondary ul li#biog_epstein h3 {background: url(../images/about-us/h3_epstein.gif); height: 30px; width: 132px; text-indent: -9999px;} #about-us div#secondary ul li#biog_jefferson h3 {background: url(../images/about-us/h3_jefferson.gif); height: 30px; width: 132px; text-indent: -9999px;} #about-us div#secondary ul li#biog_jefferson {background: none;} /* =7. Footer */ div#footer {width: 100%; float: left; display: block; clear: both; margin: 5px 0 13px 0;} div#footer div.hr-green {width: 100%; height: 15px; background: #d6d885; float: left; margin: 5px 0 0 0;} div#footer div.hr-black {width: 100%; height: 1px; background: #000; float: left;} div#footer div.hr-black hr {display: none;} /*#bubbles .t {height: 100px;}*/