@import url("reset.css"); /* ----------------------------------------------------- Kellogg’s 'Environment' (http://www.kelloggs.co.uk/whatson/environment) SCREEN style sheet author: mN -> hello@mnatwork.com version: 2010.08 ----------------------------------------------------- CONTENTS: 1. GLOBAL 2. TYPOGRAPHY 3. GENERAL LAYOUT 4. HEADER 5. NAVIGATION 6. CONTENT 7. FOOTER COLOURS: Kellogg’s Red: #d8040c Foreground Grey: #666 ----------------------------------------------------- */ /* =1. Global */ html {font-family: Verdana, Arial, sans-serif;} body {background: #c1f1be url(../images/global/background.png) repeat-x; color: #666; -webkit-text-size-adjust: none;} /* =2. Typography */ h1, h2, h3, h4, h5 {font-family: Arial, Helvetica, Arial, sans-serif;} h1, h2 {text-indent: -9999px;} h2.small, h3 {font-size: 1.1em; line-height: 17px; margin-bottom: 0; text-indent: 0;} h3.medium {font-size: 1.3em; line-height: 18px; margin-bottom: 10px;} #content p {font-size: 1.1em; line-height: 17px; margin-bottom: 17px;} #content .intro p, #content p.intro {font-size: 1.3em; line-height: 18px; margin-bottom: 18px;} sub {font-size: 80%; position: relative; top: 6px;} a {text-decoration: none;} a:hover {text-decoration: underline;} ul.bulleted-list {list-style-type: disc; margin-bottom: 9px; margin: 0 0 0 1.5em;} ul.bulleted-list li {font-size: 1em; margin-bottom: 8px;} ul.bulleted-list li p {color: #666; margin: 0!important;} ul.single-line {margin-bottom: 13px;} ul.single-line li {margin-bottom: 4px!important;} body.black .c, body.black ul.bulleted-list {color: #000;} body.black a {color: #1d9015;} body.green .c, body.green ul.bulleted-list, body.green a {color: #1d9015;} body.brown .c, body.brown ul.bulleted-list, body.brown a {color: #8c5d29;} body.purple .c, body.purple ul.bulleted-list, body.purple a {color: #491055;} body.orange .c, body.orange ul.bulleted-list, body.orange a {color: #f05b17;} body.blue .c, body.blue ul.bulleted-list, body.blue a {color: #0490cf;} strong {font-weight: bold;} em {font-style: italic;} small {font-size: 0.909em;} div.vr {border-right: 1px dashed #ccc; height: 100%; width: 1px; float: left; display: inline;} div.hr {border-top: 1px dashed #ccc; height: 1px; font-size: 1px; width: 100%; clear: both;} /* =3. General Layout */ #outer {width: 970px; margin: auto;} #inner {width: 970px; margin: auto;} #header, #footer {width: 100%; margin: auto;} .row {overflow: hidden; clear: both; position: relative; float: left; width: 100%;} .t_1 {margin-top: 34px;} .b_1 {padding-bottom: 34px;} .l_1 {margin-left: 35px; display: inline;} .r_1 {margin-right: 35px; display: inline;} .fl_l {float: left; display: inline;} .fl_r {float: right; display: inline;} .w_1 {width: 40px;} .w_2 {width: 80px;} .w_3 {width: 120px;} .w_4 {width: 160px;} .w_5 {width: 200px;} .w_6 {width: 240px;} .w_6_ {width: 250px;} .w_7 {width: 280px;} .w_8 {width: 320px;} .w_9 {width: 360px;} .w_10 {width: 400px;} .w_11 {width: 440px;} .w_12 {width: 480px;} .w_13 {width: 520px;} .w_14 {width: 560px;} .w_15 {width: 600px;} .w_16 {width: 640px;} .w_17 {width: 680px;} .w_18 {width: 720px;} .w_19 {width: 760px;} .w_20 {width: 800px;} .w_21 {width: 840px;} .w_22 {width: 880px;} .w_23 {width: 920px;} /* =4. Header */ #header {position: relative; height: 104px;} #header p {position: absolute; top: 19px; left: 16px;} #header p a {background: url(../images/global/header.gif) -115px 0; width: 365px; height: 49px; display: block; text-indent: -9999px;} #breadcrumb {position: absolute; right: 10px; top: 7px; font-size: 1.1em; line-height: 12px; z-index: 9; height: 15px;} #breadcrumb h5 {float: left; color: #12650e; font-weight: normal; font-family: Arial, Verdana, sans-serif;} #breadcrumb ul {float: left;} #breadcrumb li {float: left; margin: 0 0 0 10px; padding: 0 0 0 7px; background: url(../images/global/arrow_white.gif) no-repeat 0 50%; display: inline;} #breadcrumb a {color: #12650e; text-decoration: none; float: left;} #breadcrumb a:hover {text-decoration: underline;} #breadcrumb li li li a {color: #fff;} /* =5. Navigation */ #navigation {width: 555px; top: 30px; right: 5px; z-index: 8;} #navigation ul {position: absolute; top: 30px; right: 0;} #navigation li {float: left;} #navigation li a {display: block; background: url(../images/global/header.gif); text-indent: -9999px; float: left;} #navigation #nav-our-targets {padding-right: 6px; background: url(../images/global/header.gif) 345px 0;} #navigation #nav-our-targets a, #navigation #nav-other-priorities a {height: 45px;} #navigation #nav-our-targets a {background-position: 0 -94px; width: 345px;} #navigation #nav-our-targets a.active, #navigation #nav-our-targets a:hover {background-position: -345px -94px;} #navigation #nav-other-priorities a {background-position: 0 -49px; width: 152px;} #navigation #nav-other-priorities a.active, #navigation #nav-other-priorities a:hover {background-position: -345px -49px;} #navigation li ul {position: absolute; top: 45px!important; right: 0;} #navigation li ul.off {display: none;} #navigation #nav-our-targets ul {width: 357px; right: 158px;} #navigation #nav-other-priorities ul {width: 728px; } #navigation li li {float: left; display: block; padding-left: 3px; background: url(../images/global/header.gif) -6px 0;} #navigation li li a {height: 24px!important;} #navigation li #nav-packaging {padding: 0;} #navigation li #nav-packaging a {background-position: 0 -139px; width: 110px;} #navigation li #nav-packaging a.active, #navigation li #nav-packaging a:hover {background-position: -345px -139px;} #navigation li #nav-employees a {background-position: 0 -163px; width: 110px;} #navigation li #nav-employees a.active, #navigation li #nav-employees a:hover {background-position: -345px -163px;} #navigation li #nav-green-projects a {background-position: 0 -187px; width: 148px;} #navigation li #nav-green-projects a.active, #navigation li #nav-green-projects a:hover {background-position: -345px -187px;} #navigation li #nav-transport a {background-position: 0 -211px; width: 108px;} #navigation li #nav-transport a.active, #navigation li #nav-transport a:hover {background-position: -345px -211px;} #navigation li #nav-sustainable-agriculture a {background-position: 0 -235px; width: 240px;} #navigation li #nav-sustainable-agriculture a.active, #navigation li #nav-sustainable-agriculture a:hover {background-position: -345px -235px;} #navigation li #nav-energy-and-emissions {padding: 0;} #navigation li #nav-energy-and-emissions a {background-position: 0 -259px; width: 215px;} #navigation li #nav-energy-and-emissions a.active, #navigation li #nav-energy-and-emissions a:hover {background-position: -345px -259px;} #navigation li #nav-water a {background-position: 0 -284px; width: 68px;} #navigation li #nav-water a.active, #navigation li #nav-water a:hover {background-position: -345px -283px;} #navigation li #nav-waste a {background-position: 0 -307px; width: 68px;} #navigation li #nav-waste a.active, #navigation li #nav-waste a:hover {background-position: -345px -307px;} /* =6. Content */ #container {background: #fff; padding: 42px 5px 5px 5px; margin-bottom: 30px; border: 1px solid #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 6px #999; -webkit-box-shadow: 0px 0px 6px #999; box-shadow: 0px 0px 6px #999; } #content {margin-bottom: 30px; } #content h1 {text-indent: -9999px; margin-bottom: 30px;} #content .fact, #content #fact {background-repeat: no-repeat!important; text-indent: -9999px;} #content #video-wrapper {background: url(../images/our-targets/video-wrapper.gif) no-repeat; width: 890px; height: 395px; padding: 3px 7px 7px 3px;} #home #container {padding: 5px; position: relative; float: left;} #home #content {margin-bottom: 0!important;} #home #intro {margin: -1px 0 5px -1px; width: 960px; float: left; display: inline;} #home #intro li {float: left; margin: 1px; display: inline;} #home #intro a {display: block; width: 238px; height: 161px; background: url(../images/home/pods.gif); text-indent: -9999px;} #home #intro #intro-1 a {background-position: -478px 0;} #home #intro #intro-3 a {background-position: -716px 0;} #home #intro #intro-4 a {background-position: -954px 0;} #home #intro #intro-5 a {background-position: -1192px 0;} #home #intro #intro-6 a {background-position: -0px 0; width: 478px;} #home #intro #intro-9 a {background-position: -1430px 0;} #home #intro #intro-10 a {background-position: -1668px 0;} #home #intro #intro-11 a {background-position: -1906px 0;} #home #intro #intro-2 a, #home #intro #intro-7 a, #home #intro #intro-8 a {background: url(../images/home/pods_video.gif);} #home #intro #intro-7 a {background-position: -238px;} #home #intro #intro-8 a {background-position: -478px;} #home #pages {width: 958px; min-height: 487px; height: auto!important; height: 487px; position: relative; z-index: 99999; display: block; float: left;} .js #home #pages {position: absolute; top: 5px; left: 5px;display: none;} #home #pages li {position: relative; margin-bottom: 6px;} .js #home #pages li {margin-bottom: 0;} #home #pages li, #home #pages li b, #home #pages li i {width: 958px; background: url(../images/home/background.jpg) repeat-y -958px 0; } #home #pages li {float: left; min-height: 487px; height: auto!important; height: 487px;} #home #pages li b, #home #pages li i {height: 82px; position: absolute; left: 0; background-position: 0 0!important; z-index: 10;} #home #pages li b {top: 0;} #home #pages li i {bottom: 0; background-position: 0 -82px!important;} #home #pages li div.copy, #home #pages li p.back {float: left; z-index: 9999; position: relative;} #home #pages li p.back {position: absolute; bottom: 0; right: 0; margin: 0;} #home #pages li p.back a {display: block; width: 94px; height: 48px; background-image: url(../images/home/button_back.jpg); text-indent: -9999px;} #home #pages li div.copy {margin: 0 0 0 45px; display: inline;} #home #pages li div.copy p {width: 420px; font-size: 1.5em; line-height: 18px; margin-bottom: 18px;} /* Background positions for 'back' button and color for '.additional' text link */ #home #pages li.purple a {background-position: 0 0; color: #491055;} #home #pages li.brown a {background-position: 0 -48px; color: #8c5d29;} #home #pages li.blue a {background-position: 0 -96px; color: #0490cf;} #home #pages li.green a {background-position: 0 -144px; color: #1d9015;} #home #pages li.yellow a {background-position: 0 -192px; color: #91950c;} #home #pages li.orange a {background-position: 0 -240px; color: #f7941d;} #home #pages li.black a {background-position: 0 -288px; color: #48433f;} #home #pages li p.additional {width: 500px!important;} #home #pages li p.additional a {font-weight: bold; text-transform: uppercase; float: left; position: relative; padding-right: 10px;} #home #pages li p.additional a:hover {text-decoration: none;} #home #pages li p.additional a span {display: block; width: 6px; height: 10px; background: url(../images/home/arrows.gif); text-indent: -9999px; position: absolute; top: 4px; right: 0; font-size: 1px; line-height: 1px;} #home #pages li.purple p.additional a span {background-position: 0 -60px;} #home #pages li.brown p.additional a span {background-position: 0 -60px;} #home #pages li.blue p.additional a span {background-position: 0 -20px;} #home #pages li.green p.additional a span {background-position: 0 -30px;} #home #pages li.yellow p.additional a span {background-position: 0 -40px;} #home #pages li.orange p.additional a span {background-position: 0 0;} #home #pages li.black p.additional a span {background-position: 0 -50px;} #home #pages li h2 {width: 958px; height: 297px; text-indent: -9999px; position: relative; z-index: 99999; margin-bottom: 24px;} #home #pages #page-1 h2 {background: url(../images/home/page_1.gif);}; #home #pages #page-2 h2 {background: url(../images/home/page_2.gif);} #home #pages #page-3 h2 {background: url(../images/home/page_3.gif);} #home #pages #page-4 h2 {background: url(../images/home/page_4.gif);} #home #pages #page-5 h2 {background: url(../images/home/page_5.gif);} #home #pages #page-6 h2 {background: url(../images/home/page_6.gif);} #home #pages #page-7 h2 {background: url(../images/home/page_7.gif);} #home #pages #page-8 h2 {background: url(../images/home/page_8.gif);} #home #pages #page-9 h2 {background: url(../images/home/page_9.gif);} #home #pages #page-10 h2 {background: url(../images/home/page_10.gif);} #home #pages #page-11 h2 {background: url(../images/home/page_11.gif);} /*#home #pages li#page-1 {display: block;}*/ /* Get the Facts Panel */ #get-the-facts {margin-top: 28px; float: left; display: inline; width: 880px; clear: both; margin-bottom: 30px;} #get-the-facts li {margin: 0 15px; float: left;} #get-the-facts li a {width: 170px; height: 98px; background: url(../images/other-priorities/packaging/buttons-facts.gif); display: block; text-indent: -9999px;} #get-the-facts #get-the-facts-environmental {margin-left: 0;} #get-the-facts #get-the-facts-environmental a {width: 280px!important;} #get-the-facts #get-the-facts-energy a {background-position: -280px 0;} #get-the-facts #get-the-facts-water a {background-position: -450px 0;} #get-the-facts #get-the-facts-waste a {background-position: -620px 0;} #get-the-facts #get-the-facts-waste {margin-right: 0;} /* Other Priorities */ #other-priorities #container {background: #fff url(../images/other-priorities/background.jpg) top right no-repeat;} #other-priorities h1 {width: 416px; height: 122px; background: url(../images/other-priorities/title.gif);} #other-priorities #pages {margin-bottom: 28px; padding-top: 10px;} #other-priorities #pages a {display: block; width: 450px; height: 35px; background: url(../images/other-priorities/pages.gif); text-indent: -9999px;} #other-priorities #pages li {margin-bottom: 5px;} #other-priorities #pages-employees a {background-position: 0 -35px;} #other-priorities #pages-green-projects a {background-position: 0 -70px;} #other-priorities #pages-transport a {background-position: 0 -105px;} #other-priorities #pages-sustainable-agriculture a {background-position: 0 -140px;} #packaging h1 {width: 337px; height: 79px; background: url(../images/other-priorities/packaging/title.gif);} #packaging #fact {height: 573px; background: url(../images/other-priorities/packaging/fact.gif);} #packaging h2#title-recycle {width: 227px; height: 38px; background: url(../images/other-priorities/packaging/title-recycle.gif); margin-bottom: 21px;} #packaging #graphic-oprl {width: 250px; height: 43px; background: url(../images/other-priorities/packaging/graphic-oprl.gif); margin-bottom: 17px;} #packaging h2#title-made-of {width: 437px; height: 17px; background: url(../images/other-priorities/packaging/title-made-of.gif); margin-bottom: 21px;} #packaging #graphic-pack {width: 114px; height: 162px; background: url(../images/other-priorities/packaging/graphic-pack.jpg); float: right; margin: -38px 0 0 0; position: relative; right: -10px;} #transport h1 {width: 281px; height: 122px; background: url(../images/other-priorities/transport/title.gif);} #transport #fact {height: 387px; background: url(../images/other-priorities/transport/fact.gif); margin-top: 40px;} #sustainable-agriculture {} #sustainable-agriculture h1 {width: 324px; height: 122px; background: url(../images/other-priorities/sustainable-agriculture/title.gif);} #sustainable-agriculture #fact {height: 307px; background: url(../images/other-priorities/sustainable-agriculture/fact.gif); } #employees h1 {width: 340px; height: 79px; background: url(../images/other-priorities/employees/title.gif);} #employees img#image-go-green {margin-bottom: 26px;} #employees h2#title-benefits {width: 232px; height: 17px; background: url(../images/other-priorities/employees/title-benefits.gif); margin-bottom: 21px;} #green-projects h1 {width: 229px; height: 79px; background: url(../images/other-priorities/green-projects/title.gif);} #green-projects img#image-climate-week {margin-bottom: 26px;} #green-projects #fact {height: 298px; background: url(../images/other-priorities/green-projects/fact.jpg); } #green-projects h2#title-food-banks {width: 527px; height: 40px; background: url(../images/other-priorities/green-projects/title-food-banks.gif); margin-bottom: 21px;} /* Our Targets */ #our-targets #container {background: #fff url(../images/our-targets/background.jpg) top right no-repeat;} #our-targets h1 {width: 460px; height: 79px; background: url(../images/our-targets/title.gif);} #our-targets #pages {margin-bottom: 28px; padding-top: 10px;} #our-targets #pages a {display: block; width: 450px; height: 35px; background: url(../images/our-targets/pages.gif); text-indent: -9999px;} #our-targets #pages li {margin-bottom: 5px;} #our-targets #pages-pages-energy-and-emission-targets a {background-position: 0 -0px;} #our-targets #pages-water-use-targets a {background-position: 0 -35px;} #our-targets #pages-waste-targets a {background-position: 0 -70px;} #our-targets h2#title-biofuels {width: 361px; height: 39px; background: url(../images/our-targets/title-biofuels.gif); margin-bottom: 21px;} #our-targets h2#title-targets {width: 207px; height: 62px; background: url(../images/our-targets/title-targets.gif); margin-bottom: 21px;} #our-targets h2#title-specialk {width: 396px; height: 39px; background: url(../images/our-targets/title-specialk.gif); margin-bottom: 21px;} #energy-and-emissions h1 {width: 388px; height: 79px; background: url(../images/our-targets/energy-and-emissions/title.gif);} #energy-and-emissions #fact {height: 339px; background: url(../images/our-targets/energy-and-emissions/fact.gif); } #energy-and-emissions h2#title-our-energy-targets {width: 264px; height: 17px; background: url(../images/our-targets/energy-and-emissions/title-our-energy-targets.gif); margin-bottom: 21px;} #energy-and-emissions h2#title-suppliers {width: 373px; height: 17px; background: url(../images/our-targets/energy-and-emissions/title-suppliers.gif); margin-bottom: 21px;} #energy-and-emissions #fact-replaced {height: 118px; width: 562px; background: url(../images/our-targets/energy-and-emissions/fact-replaced.gif); } #energy-and-emissions h2#title-simple-measures {width: 223px; height: 17px; background: url(../images/our-targets/energy-and-emissions/title-simple-measures.gif); margin-bottom: 21px;} #energy-and-emissions h2#title-breakfast-time {width: 427px; height: 41px; background: url(../images/our-targets/energy-and-emissions/title-breakfast-time.gif); margin-bottom: 21px;} #energy-and-emissions h2#title-other-things {width: 573px; height: 41px; background: url(../images/our-targets/energy-and-emissions/title-other-things.gif); margin-bottom: 21px;} #energy-and-emissions #smallprint {position: relative; margin: 0; float: left; clear: both;} #energy-and-emissions #smallprint span {position: absolute; top: 0; left: -12px;} #waste h1 {width: 165px; height: 36px; background: url(../images/our-targets/waste/title.gif);} #waste p#opening {margin-bottom: 30px;} #waste h2#title-our-waste-targets {width: 250px; height: 17px; background: url(../images/our-targets/waste/title-our-waste-targets.gif); margin-bottom: 21px;} #waste h2#title-hierarchy {width: 278px; height: 17px; background: url(../images/our-targets/waste/title-hierarchy.gif); margin-bottom: 21px;} #waste #graphic-hierarchy {position: absolute; bottom: 35px; right: 35px;} #waste h2#title-at-home {width: 328px; height: 17px; background: url(../images/our-targets/waste/title-at-home.gif); margin-bottom: 21px;} #waste h2#title-focus {width: 209px; height: 17px; background: url(../images/our-targets/waste/title-focus.gif); margin-bottom: 21px;} #waste #fact {height: 93px; width: 583px; background: url(../images/our-targets/waste/fact.gif); } #waste h2#title-tips {width: 436px; height: 17px; background: url(../images/our-targets/waste/title-tips.gif); margin-bottom: 21px;} #water h1 {width: 162px; height: 35px; background: url(../images/our-targets/water/title.gif);} #water #fact {height: 332px; width: 254px; background: url(../images/our-targets/water/fact.gif) -0px 0;} #water h2#title-our-water-targets {width: 249px; height: 17px; background: url(../images/our-targets/water/title-our-water-targets.gif); margin-bottom: 21px;} #water h2#title-pooling {width: 185px; height: 17px; background: url(../images/our-targets/water/title-pooling.gif); margin-bottom: 21px;} #water #fact-manchester {height: 240px; width: 252px; background: url(../images/our-targets/water/fact-manchester.gif);} #water h2#title-home {width: 366px; height: 17px; background: url(../images/our-targets/water/title-home.gif); margin-bottom: 21px;} #water h2#title-green-finger {width: 228px; height: 17px; background: url(../images/our-targets/water/title-green-finger.gif); margin-bottom: 21px;} /* =7. Footer */ #footer {color: #666; padding: 8px 0px!important; margin: auto; clear: both; float: left; border-top: 1px dashed #ccc; width: 960px; display: block; } #footer a {color: #666; text-decoration: none; font-size: 1.1em; line-height: 12px;} #footer a:hover {text-decoration: underline;} #footer #copyright {float: left; margin: 0 0 0 5px;} #footer #footernav {float: left; margin: 0 0 0 10px;} #footer #footernav li {float: left; margin: 0 0 0 8px; padding: 0 0 0 10px; background: url(../images/global/arrow_red.gif) no-repeat 0 50%; display: inline;}