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

/* =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: 55px;}
div#header p {position: absolute; top: 3px; left: 15px;}
div#header p a {background: url(../images/global/kelloggs.gif) no-repeat; width: 127px; height: 50px; 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. Navigation */

div#navigation {width: 100%; float: left;}
div#navigation ul li {float: left; margin: 0 20px 0 0;}

/* =6. Content */

div#container {background: #f4f4f4 url(../images/global/container_background.png) repeat-x; border-top: 1px solid #f2efea; position: relative; }
div#container div#content {background: url(../images/global/flakes.jpg) no-repeat top right;float: left; clear: both; width: 100%;}

/* AREAS A-C */
div#container div#area-a {padding: 14px 0 0 13px ; margin: 0 0 10px 0;}
div#container div#area-b {float: left; clear: both; width: 910px; margin-bottom: 10px;padding: 0 10px;}
div#container div#area-c {width: 100%; margin: 0 auto; clear: both; float: left;}

div#container div#area-a h1 {width: 355px; height: 128px; text-indent: -9999px; background: url(../images/global/title_yourthoughts.gif);}
div#container div#side-image {width: 200px; height: 500px; position: absolute; top: 0; right: 0; background-position: top right; text-indent: -9999px; z-index: 1;}


	div.pod {width: 449px; color: #fff; font-size: 1.8em; line-height: 110%; float: left;}
	div.pod p {margin: 0 0 20px 0; }
	div.pod p.last {margin: 0;}
	div.pod p.last a {color: #fff;}
	div.pod p.last a:hover {text-decoration: none;}
	div.pod div.top {width: 449px; height: 20px; background: url(../images/global/pod_449_top.png); float: left;}
	div.pod div.middle {width: 395px; background: url(../images/global/pod_449_middle.png); float: left; padding: 4px 26px;}
	div.pod div.bottom {width: 449px; height: 20px; background: url(../images/global/pod_449_bottom.png); float: left;}

	/* POD B */
	div.pod#pod-b {float: right; }
	div.pod#pod-b p {margin: 0; }
	div.pod#pod-b input.text, div.pod#pod-b textarea {width: 381px;border: 0; font-family: Arial, Helvetica, Verdana; padding: 8px 8px 8px 11px; color: #353535; position: relative;}
	div.pod#pod-b textarea {margin: 0 0 10px 0; height: 94px;}
	div.pod#pod-b input.text {font-size: 1em; margin: 0 0 3px 0; width: 278px; float: right;}
	div.pod#pod-b label { float: left;padding: 8px 8px 8px 0px; margin: 0 0 3px 0;}
	div.pod#pod-b label strong {font-weight:normal;}
	div.pod#pod-b label#lblMessage {display:none;}
	
		/* If JavaScript is enabled */	
		.js div.pod#pod-b textarea#txtMessage {background: #fff url(../images/global/input_message_bg.gif) no-repeat 12px 12px;}
		.js div.pod#pod-b input#txtName {background: #fff url(../images/global/input_name_bg.gif) no-repeat 12px 12px;}
		.js div.pod#pod-b input#txtEmail {background: #fff url(../images/global/input_email_bg.gif) no-repeat 12px 12px;}

	div.pod#pod-b textarea#txtMessage.focus, div.pod#pod-b input#txtEmail.focus,div.pod#pod-b input#txtName.focus {background-image: none;}
	input#btn_sendusyourthoughts {margin: auto; display: block;}

    .errors { color: #fff; }
    .errors ul { font-weight: normal; padding: 0.5em; margin: 0.5em; }
    .errors ul li { list-style-type: disc; }

	/* POD C */
	div#pod-c.pod {width: 407px; color:	#fff; font-size: 1.8em; line-height: 110%; margin: 0 auto;	 margin: 0 0 0 250px;}
	div#pod-c.pod p {margin: 0 0 20px 0; }
	div#pod-c.pod p.last {margin: 0;}
	div#pod-c.pod div.top {width: 407px; height: 20px; background: url(../images/global/pod_407_top.png); float: left;}
	div#pod-c.pod div.middle {width: 355px; background: url(../images/global/pod_407_middle.png); float: left; padding: 4px 26px;}
	div#pod-c.pod div.bottom {width: 407px; height: 20px; background: url(../images/global/pod_407_bottom.png); float: left;}

	div#pod-c div.middle {color: #353535; position: relative;}
	div#pod-c div.middle h2 {width: 266px; height: 28px; margin: 0 auto 10px auto; background: url(../images/global/title_takeoneofoursurveys.gif) no-repeat; text-indent: -9999px;}
	div#pod-c div.middle div#wrap {border-top: 2px solid #cacaca; border-bottom: 2px solid #cacaca; }
	div#pod-c div.middle div#carousel {width: 170px; height: 180px; overflow: hidden; /*border-top: 2px solid #cacaca; border-bottom: 2px solid #cacaca; */padding: 14px 0 9px 0; margin: auto;position: relative;}
	div#pod-c div.middle ul {position: absolute; left: 0; width: 1000px; overflow: hidden; height: 180px; margin: auto;}
	div#pod-c div.middle ul li {float: left; /*width: 355px;*/ width: 170px; height: 180px; text-align: center; position: relative;}
	div#pod-c div.middle ul li a { margin: auto; display: block; text-align: center; width: 157px;}
	div#pod-c div.middle ul li a small {width: 157px; height: 44px; display: block; background: url(../images/global/btn_takethesurvey.gif);}
	div#pod-c div.middle ul li a span {width: 157px; height: 136px; text-indent: -9999px; display: block; cursor: pointer;}

	div#pod-c div.middle #back{width: 35px; height: 43px; background: url(../images/global/arrow_left.gif); text-indent: -9999px; position: absolute; top: 115px; left: 60px; cursor: pointer;}
	div#pod-c div.middle #forward{width: 35px; height: 43px; background: url(../images/global/arrow_right.gif);text-indent: -9999px;position: absolute; top: 115px; right: 60px; cursor: pointer;}

	div#pod-c div.middle ul li#crunchynutbites a span {background: url(../images/global/icon_crunchynutbites.gif);}
	div#pod-c div.middle ul li#naturespleasure a span {background: url(../images/global/icon_naturespleasure.gif);}	
	div#pod-c div.middle ul li#rk a span {background: url(../images/global/icon_rk.gif);}	
	div#pod-c div.middle ul li#specialk a span {background: url(../images/global/icon_specialk.gif);}	

/* =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_red.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: 1em;}