/*
-----------------------------------------------------
Kellogg's 'Microsite Name' (http://www.kelloggs.co.uk/whatson/micrositename) 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;}
body {background:  url(../images/global/background.png) repeat-x;}

/* =2. Typography */

h1,h2,h3,h4,h5 {font-family: Arial, Helvetica, Arial, sans-serif;}
p {line-height: 125%; margin: 0 0 16px 0;}
p.intro {font-size: 1.2em;}

a {color: #666;}
a:hover {text-decoration: none;}

/* =3. General Layout */

div#outer {width: 960px; margin: auto; background: url(../images/global/outer.jpg) repeat-y; background-position: top center; }
div#inner {width: 920px; margin: auto; background: #fff;border-bottom: 1px solid #f2efea;}

div#header, div#container, div#footer {width: 100%; margin: auto;}

/* =4. Header */

div#header {position: relative; height: 55px;}
div#header p {display: none;}
div#header hr {display: none;}

div#breadcrumb {position: absolute; right: 10px; bottom: 10px; font-size: 1.1em;}
div#breadcrumb h5 {float: left; color: #666; font-weight: normal; font-family: Arial, Verdana, sans-serif;}
div#breadcrumb ul {float: left;}
div#breadcrumb ul li {float: left; margin: 0 0 0 10px; padding: 0 0 0 7px;background: url(../images/global/arrow_red.gif) no-repeat 0 50%;}
div#breadcrumb a {color: #666; text-decoration: none; float: left;}
div#breadcrumb a:hover {text-decoration: underline;}
div#breadcrumb ul li ul li ul li a {color: #d8040c;}

div#banner {width: 920px; height: 114px; float: left; position: relative; background: url(../images/global/banner.gif); clear: both;}
div#banner h1 {display: none;}
div#banner div.outer-left {position: absolute; bottom: 0; left: -8px; width: 8px; height: 16px; background: url(../images/global/banner_outer_left.gif);}
div#banner div.outer-right {position: absolute; bottom: 0; right: -6px; width: 6px; height: 17px; background: url(../images/global/banner_outer_right.gif);}
	
	#home div#banner {background: url(../images/home/banner.gif); height: 235px;}
	#home div#banner div#home-outer2 {width: 55px; height: 50px; background: url(../images/home/home_outer2.gif); position: absolute; top: 8px; right: -55px;}	
/* =5. Navigation */

div#navigation {width: 100%; height: 106px; float: left; position: relative;}
div#navigation ul li {float: left; margin: 0 0px 0 0;}
div#navigation ul li a {background: url(../images/global/navigation.gif); height: 106px; display: block; text-indent: -9999px;}
div#navigation ul li#nav-about a {width: 263px;}
div#navigation ul li#nav-about a:hover {background-position: 0 -106px;}
div#navigation ul li#nav-ourcommitment a {width: 345px; background-position: -262px 0;}
div#navigation ul li#nav-ourcommitment a:hover {background-position: -262px -106px;}
div#navigation ul li#nav-ourcommitment a.active {background-position: -262px -212px;}
div#navigation ul li#nav-getinvolved a {width: 312px; background-position: -609px 0;}
div#navigation ul li#nav-getinvolved a:hover {background-position: -609px -106px;}
div#navigation ul li#nav-getinvolved a.active {background-position: -609px -212px;}

div#navigation div.outer-left {position: absolute; top: 0; left: -6px; width: 31px; height: 62px; background: url(../images/global/navigation_outer_left.gif);}
div#navigation div.outer-right {position: absolute; top: 0; right: -5px; width: 28px; height: 56px; background: url(../images/global/navigation_outer_right.gif);}

/* =6. Content */
div#content {float: left; color: #666; font-size: 1.2em; width: 920px; clear: both; clear: both; padding: 0; margin: auto; position: relative;}

	#home div#content {background: url(../images/home/content_bg.gif);}
	#home div#content div#content-bottom {width: 920px; height: 25px; background: url(../images/home/content_bottom.gif); float: left;}
	#home div#content div#home-outer {width: 30px; height: 88px; background: url(../images/home/home_outer.gif); position: absolute; bottom: -67px; left: -4px;}
	#home div#content div#home-outer3 {width: 28px; height: 84px; background: url(../images/home/home_outer3.gif); position: absolute; bottom: -63px; right: -3px;}
	#home div#content div#home-orange {width: 43px; height: 54px; background: url(../images/home/orange.png); position: absolute; bottom: 65px; left: -410px;}	
	
div#content hr {color: #fff200}
div#content div.hr {width: 870px; height: 1px; line-height: 0; font-size: 1px; background: #fff200; float: left; margin: 10px 0 10px 25px ;}

div#content-home {width: 482px; margin: 0 0 0 25px; float: left;}
div#content-home ul {width: 482px;}
div#content-home div.top{width: 482px; height: 14px; background: url(../images/home/home_top.gif) no-repeat;float: left; font-size: 0;}
div#content-home div.middle {width: 449px; padding: 0 16px; background: #fff url(../images/home/home_middle.gif) repeat-y; float: left;}
div#content-home div.bottom{width: 482px; height: 11px; background: url(../images/home/home_bottom.gif) no-repeat; float: left;}

div#content-nav {float: right; width: 378px; margin: 0 25px 0 0;}
div#content-nav ul li a {display: block; text-indent: -9999px;}
div#content-nav ul li#nav-ourcommitment a {width: 378px; height: 133px; background: url(../images/home/button_ourcommitment.gif);}
div#content-nav ul li#nav-getinvolved a {width: 378px; height: 138px; background: url(../images/home/button_getinvolved.gif);}

div#content-getinvolved {position: relative; padding: 40px 0 0 0; margin: 0 0 0 25px; width: 415px; float: left; /*border: 1px solid pink;*/}
div#content-getinvolved h2 {float: left; width: 258px; height: 75px; background: url(../images/get-involved/heading_getinvolved.gif); text-indent: -9999px; position: absolute; left: -103px; top: 0;}
div#content-getinvolved div#sub-howarethekids {width: 438px; height: 112px; background: url(../images/get-involved/heading_howarethekids.gif) no-repeat;}
div#content-getinvolved div#sub-howarethekids h3 {text-indent: -9999px;}
div#content-getinvolved div#sub-howarethekids p {width: 100%; height: 100%;}
div#content-getinvolved div#sub-howarethekids p a {display: block; width: 100%; height: 100%; text-indent: -9999px;}

div#content-topeatingtips {float: right; margin: 20px 0px 0 0; width: 442px; position: relative; }
div#content-topeatingtips div.outer-right {width: 44px; height: 51px; background: url(../images/get-involved/carousel_outer.gif); position: absolute; right: -44px; top: 37px;}
div#content-topeatingtips div.outer-left {width: 28px; height: 7px; background: url(../images/get-involved/carousel_inner.gif) no-repeat; position: absolute; right: 0px; top: 55px;}
div#content-topeatingtips div.prev {position: absolute; top: 65px; left: 365px;z-index: 12; width: 42px; height: 170px; background: #fff200 url(../images/get-involved/arrow_prev.gif) 0 50px no-repeat; text-indent: -9999px; cursor: pointer;}
div#content-topeatingtips div.next {position: absolute; top: 65px; left: 45px; z-index: 12; width: 40px; height: 170px; background: #fff200 url(../images/get-involved/arrow_next.gif) 0 50px no-repeat;text-indent: -9999px; cursor: pointer;}
div#content-topeatingtips div.carousel {width: 442px; float: left; margin: 0 0 0 60px;  }
div#content-topeatingtips div.carousel ul li {width: 335px; height: 244px; }
div#content-topeatingtips div.carousel ul li strong {float: right; margin: 0 30px 0 0; color: #000;}
div#content-topeatingtips div.carousel ul li#carousel-01 {background: url(../images/get-involved/carousel_01.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-02 {background: url(../images/get-involved/carousel_02.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-03 {background: url(../images/get-involved/carousel_03.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-04 {background: url(../images/get-involved/carousel_04.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-05 {background: url(../images/get-involved/carousel_05.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-06 {background: url(../images/get-involved/carousel_06.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-07 {background: url(../images/get-involved/carousel_07.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-08 {background: url(../images/get-involved/carousel_08.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-09 {background: url(../images/get-involved/carousel_09.gif) no-repeat 0 15px;}
div#content-topeatingtips div.carousel ul li#carousel-10 {background: url(../images/get-involved/carousel_10.gif) no-repeat 0 15px;}
div#content-topeatingtips div#carousel-middle{width: 442px; float: left;background: url(../images/get-involved/carousel_middle.gif);}
div#content-topeatingtips div#carousel-top {width: 442px; height: 55px; background: url(../images/get-involved/carousel_top.gif); float: left;}
div#content-topeatingtips div#carousel-bottom {width: 442px; height: 15px; float: left; background: url(../images/get-involved/carousel_bottom.gif);}

div#content-activitytips {width: 260px; float: left; position: relative; padding: 56px 0 0 0; margin: 0 0 0 25px; }
div#content-activitytips div.outer-left {background: url(../images/get-involved/heading_activitytips_outer.gif) no-repeat; width: 28px; height: 38px; position: absolute; top: 46px; left: -48px;}
div#content-activitytips h2 {width: 177px; height: 46px; background: url(../images/get-involved/heading_activitytips.gif); text-indent: -9999px; position: absolute; left: -48px; top: 0; }
div#content-activitytips a#button_external {display: block; width: 312px; height: 55px; background: url(../images/get-involved/button_external.gif); text-indent: -9999px; }
div#rel {position: relative; float: left; width: 100%;}
div#content-numbers {text-indent: -9999px; width: 579px; height: 243px; background: url(../images/get-involved/numbers.gif); float: right; margin: 0 25px 0 0; position: absolute; top: 10px; right: 12px;}

div#content-intro {margin: 40px 0 0 25px; width: 752px; font-size: 1.15em;}
div#content-breakfast4life {margin: 10px 0 0 25px; width: 483px; padding: 0 387px 0 0; float: left; position: relative;}
div#content-breakfast4life div#sideimg {background: url(../images/our-commitment/photo_breakfast4life.jpg) no-repeat; width: 340px; height: 316px; position: absolute; top: -80px; right: 0;}
div#content-breakfast4life h2 {width: 199px; height: 28px; background: url(../images/our-commitment/heading_breakfast4life.gif); text-indent: -9999px; margin: 0 0 20px 0;}
div#content-breakfast4life a#button_benefitsofbreakfast {width: 381px; height: 52px; display: block; background: url(../images/our-commitment/button_benefitsofbreakfast.gif); text-indent: -9999px;}
div#content-breakfast4life a#button_breakfastclubs {width: 312px; height: 53px; display: block; background: url(../images/our-commitment/button_breakfastclubs.gif); text-indent: -9999px;}
div#content-swim4life {margin: 10px 0 0 25px; width: 423px; padding: 0 0px 0 364px; float: left; background: url(../images/our-commitment/photo_swim4life.jpg) no-repeat 0 20px;}
div#content-swim4life h2 {width: 145px; height: 28px; background: url(../images/our-commitment/heading_swim4life.gif); text-indent: -9999px; margin: 0 0 20px 0;}
div#content-swim4life a#button_swimming {width: 378px; height: 54px; display: block; background: url(../images/our-commitment/button_swimming.gif); text-indent: -9999px;}

/* =6. Footer */

div#footer {float: left; clear: both; margin: 40px auto 20px 12px; position: relative;}
div#footer hr {display: none;}
div#footer-dog {height: 29px; width: 37px; background: url(../images/global/footer_dog.gif); position: absolute; top: -29px; left: 198px;}
div#footer-people {height: 69px; width: 118px; background: url(../images/global/footer_people.png); position: absolute; right: 35px; top: -25px;}
div#footer-top {width: 896px; height: 10px; float: left; background: url(../images/global/footer_top.gif) no-repeat; font-size: 1px;}
div#footer-middle {width: 896px; float: left; background: url(../images/global/footer_middle.gif); color: #666;}
div#footer-middle a {color: #666; text-decoration: none; font-size: 1.1em;}
div#footer-middle a:hover {text-decoration: underline;}
div#footer-middle p#copyright {float: left; margin: 0 20px 0 20px;}
div#footer-middle ul#footernav {float: left; }
div#footer-middle ul#footernav li {float: left; background: url(../images/global/arrow_red.gif) no-repeat 0 50%; padding: 0 0 0 7px; margin: 0 10px 0 0;}
div#footer-bottom {width: 896px; height: 11px; float: left; background: url(../images/global/footer_bottom.gif) no-repeat;}

	#home div#footer {float: left; clear: both; margin: 20px auto 20px 25px; position: relative;}
	#home div#footer-dog {background: url(../images/home/footer_dog.png); position: absolute; top: -29px; left: 658px;}
	#home div#footer-top {width: 872px; height: 10px; float: left; background: url(../images/home/footer_top.gif) no-repeat; font-size: 1px;}
	#home div#footer-middle {width: 872px; float: left; background: url(../images/home/footer_middle.gif) -1px 0; color: #666;}
	#home div#footer-bottom {width: 872px; height: 11px; float: left; background: url(../images/home/footer_bottom.gif) no-repeat;}