/*
-----------------------------------------------------
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: "Gill Sans", Helvetica, Arial, sans-serif;}
p {font-size: 1em; }
small {font-size: 0.8em;}

/* =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;}

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

/* =4. Header */

div#header {position: relative; height: 62px; border-bottom: 1px solid #aeaeae;}
div#header p {position: absolute; bottom: -1px; left: 0px;}
div#header p a {background: url(../images/global/kelloggs.gif) ; width: 209px; height: 62px; display: block; text-indent: -9999px;}

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;}

/* =5. Banner */

div#banner {width: 920px; height: 236px; background: #fff; background: url(../images/global/banner_bg.jpg);}

/* =6. Content */

div#content {border-top: 1px solid #aeaeae; position: relative; background: #fcfff9; width: 100%;}

div#content div#tl_bg {background: url(../images/global/tl_bg.gif) no-repeat; width: 32px; height: 74px; position: absolute; top: -1px;}

div#content div.pod {width: 867px; position: relative; margin: 24px auto auto auto;}
div#content div.pod div.top {width: 867px; height: 14px; background: url(../images/global/pod_top.gif);}
div#content div.pod div.middle {width: 867px; background: url(../images/global/pod_middle.gif) repeat-y; padding-top: 54px;}
div#content div.pod div.bottom {width: 867px; height: 14px; background: url(../images/global/pod_bottom.gif);}
div#content div.pod h2 {position: absolute; top: 0; left: 0; text-indent: -9999px;}
div#content div.pod p {font-size: 1.2em; color: #58595b; width: 520px; padding: 0 0 18px 25px; line-height: 130%;}

div#content div#video {position: absolute; top: 0; right: 0; width: 300px; height: 200px;}
div#content div#video {position: absolute; top: 30px; right: 25px; width: 244px; height: 182px;}
div#content div#signature h2 {background: url(../images/global/title_signature.gif) no-repeat 0 0; width: 290px; height: 65px;}
div#content div#legacy h2 {background: url(../images/global/title_legacy.gif) no-repeat 0 0; width: 290px; height: 65px;}
div#content div#quality h2 {background: url(../images/global/title_quality.gif) no-repeat 0 -1px; width: 188px; height: 60px;}
div#content div#tenpence h2 {background: url(../images/global/title_tenpence.gif) no-repeat 0 0px; width: 302px; height: 60px;}

div#content div#signature div.middle {min-height: 145px; height: auto !important; height: 145px;}
div#content div#signature div#video {width: 328px; height: 192px; background: url(../images/global/video-alt.jpg); position: absolute; top: 18px; right: 19px;}
div#content div#quality div.middle {min-height: 246px; height: auto !important; height: 246px;}
div#content div#quality div.img {width: 258px; height: 286px; background: url(../images/global/img_quality.jpg); position: absolute; top: 14px; right: 14px;}
div#content div#legacy .middle {min-height: 246px; height: auto !important; height: 246px;}
div#content div#legacy h3#title-legacyoftaste {width: 170px; height: 20px; background: url(../images/global/title_legacyoftaste.gif); text-indent: -9999px; margin: 0 0 10px 22px;}
div#content div#legacy div.paras {background:url(../images/global/signature_bg.jpg) no-repeat; position: absolute; top: 4px; left: 4px; width: 447px;  min-height: 143px !important; height: auto; height: 143px; }
div#content div#legacy div.paras p {font-size: 1.2em; color: #fff;  width: 425px; padding: 0 0 10px 20px; margin: 50px 0 0 0;}
div#content div#legacy div.paras p.secondary {margin-bottom: 0; margin-top: 0;}

div#content div#legacy div#carousel {width: 270px; height: 286px; position: absolute; top: 24px; right: 14px; z-index: 9; float: left;}
div#content div#legacy div#carousel div#wrap {position: relative; width: 270px; overflow: hidden; }
.prev, .next {position: absolute; z-index: 99; display: none;}
.prev {display: block; top: 0px; left: 0px; width: 27px; height: 280px; background: #fff url(../images/global/button_less.gif) 0 130px no-repeat; display: block;}
.next {display: block; top: 0px; right: 0px; width: 27px; height: 280px; background: #fff url(../images/global/button_more.gif) 0 130px no-repeat; display: block;}
div#content div#legacy div#carousel div.anyClass {width: 194px; height: 277px; float: left; overflow: hidden; margin: 0 0 0 38px; position: absolute; display: inline; padding: 0;}
div#content div#legacy div#carousel div.anyClass ul {width: 194px; height: 277px; overflow: hidden; padding: 0; float: left;}
div#content div#legacy div#carousel div.anyClass ul li {width: 194px; height: 277px; float: left; overflow: hidden; padding: 0; margin: 0 50px 0 0;}

/* =6. Footer */

div#footer {float: left; clear: both;}

div#footer-a {color: #666; padding: 8px 15px; width: 890px; margin: auto; background: #fcfff9;clear: both; float: left;}
div#footer-a a {color: #666; text-decoration: none; font-size: 1.1em;}
div#footer-a a:hover {text-decoration: underline;}
div#footer-a p#copyright {float: left; margin: 0 0 0 5px;}
div#footer-a ul#footernav {float: left; margin: 0 0 0 10px;}
div#footer-a ul#footernav li {float: left; margin: 0 0 0 8px; padding: 0 0 0 10px;background: url(../images/global/arrow_green.gif) no-repeat 0 50%;}

div#footer-b {width: 922px; background: url(../images/global/footer_bar.gif) repeat-x; padding: 23px 0px 20px 0px;  margin: auto; font-size: 1.2em;}