/*
-----------------------------------------------------
Kellogg's Wake Up to Breakfast (kelloggs.co.uk/whatson/wakeup/) SCREEN style sheet
author:   mN -> hello@magneticn.co.uk
version:  2008.06
----------------------------------------------------- */

/*--------- Y!UI font and element normalisation ---------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}

/* --Main styles start here-- */
html { height: 100%; }
body{ font-size:62.8%; background:url(../images/global/main-bg-gradient.jpg) repeat-x #fff; }
.clear{ width:auto; height:0 !important; overflow:hidden; position:relative; clear:both; }
strong{ font-weight:700; }
em {font-style:italic;}
a{ outline:none; }
a{color:#666;text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
.accessible {display:none;}
hr {display:none;}

/***** --Global Styles-- *****/
h1,h2,h3,h4,h5 {color:#666;}
p{color:#666;font-size:1.2em;line-height:120%;margin:0 0 10px;}
h3 {font-size: 1.3em;font-weight: bold;}
#copy {color: #666;}
#copy h1,h2,h3,h4,h5 {color: #666;}
#copy h3 {margin: 0 0 10px 0;}
#copy h4 {font-weight: bold; font-size: 1.2em; margin: 0 0 10px 0;}
#copy.wide p {margin: 0 0 0 10px;}
#copy .list ul {list-style-type: disc;list-style-image: url(../images/global/bullet.gif);list-style-position: outside; margin: 0 0 0 18px ;}
#copy .list ul li {margin: 0 0 10px 5px; line-height: 120%;font-size: 1.2em; }
#copy p a {color:#ff3333;}

#container { background:transparent url(../images/global/bg-lines.gif) repeat-y; border-left:0px solid #66FFFF; border-right:0px solid #66FFFF; height:100%; margin:auto; position:relative; width:922px; }
#content { margin:auto; position:relative; width:922px;  }
#narrow #content {width: 750px; float: right; position: relative;}


.full {margin: 0 10px 0 10px;}
.inner {width: 750px; float: right; margin: 16px 1px 0 0;}

#family {width: 146px; height: 108px; background: url(../images/tips-to-perform-better/sub.jpg) no-repeat 5px 5px; float: right; border: 1px solid #ccc; padding: 5px; margin: 0 0 3px 3px;}
/* --Header Styles-- */
#header { margin:auto; position:relative; width:920px; }
p.logo-kelloggs {background:transparent url(../images/global/logo-kelloggs.gif) no-repeat scroll 7px 50%;height:57px;text-indent:-9999px; margin:0 0 0 0; z-index: 888px;}
p.logo-wutb a {height:91px; width:236px; background:transparent url(../images/global/logo-wutb.gif) no-repeat; text-indent:-9999px; position:absolute; top:45px; left:-6px; margin:0 0 0 0;}
p.logo-wutb_alt a {height:91px; width:236px; background:transparent url(../images/global/logo-wutb_alt.gif) no-repeat; text-indent:-9999px; position:absolute; top:45px; left:-6px; margin:0 0 0 0;}

/* --Flags-- */
#flags {position:absolute; right:10px; top:15px;}
#flags #ROI a {width:25px; height:15px; float:left; background: url(../images/global/flag-roi.gif) no-repeat; text-indent:-9999px;}
#flags #UK a {width:25px; height:15px; float:left; background: url(../images/global/flag-uk.gif) no-repeat; text-indent:-9999px; margin:0 5px 0 0;}

/* --Breadcrumb-- */
.breadcrumb{color:#666;font-size:1.1em;left:-10px;letter-spacing:0;position:absolute;text-align:right;top:38px;width:100%;}
.breadcrumb h5{display:inline;font-weight:400;margin:0 3px 0 0;}
.breadcrumb ul, #header .breadcrumb ul li ul{display:inline;}
.breadcrumb ul li, #header .breadcrumb ul li ul li{background:transparent url(../images/global/arrow-red-white.gif) no-repeat scroll 0 50%;display:inline;padding:0 0 0 10px;}
.red a {color:#DC0026;}

/* --Navigation-- */
#nav-container {background:transparent url(../images/global/header-bg-strip.jpg) repeat-x top; border-top:1px solid #f3f0eb;}
#nav{overflow:hidden; padding:24px 0 0 230px; z-index: 99999;}
#nav li{float:left;}
#nav li a{display:block;text-indent:-9999px;height:51px; width:138px;}

#nav li a.tips{background:transparent url(../images/global/nav-tips.gif) no-repeat scroll 0;}
#nav li a.games{background:transparent url(../images/global/nav-games.gif) no-repeat scroll 0;}
#nav li a.active{background:transparent url(../images/global/nav-active.gif) no-repeat scroll 0;}
#nav li a.challenge{background:transparent url(../images/global/nav-challenge.gif) no-repeat scroll 0;}
#nav li a.activity{background:transparent url(../images/global/nav-activity.gif) no-repeat scroll 0;}

#nav li a.tips:hover, #nav li a.games:hover, #nav li a.active:hover, #nav li a.challenge:hover, #nav li a.activity:hover {background-position:-276px;}

#nav li a.selected{background-position:-276px;}

#sidebar {width: 156px; height: 254px; background: url(../images/global/sidemenu-bg.jpg); position: relative; top: -7px; left: 1px; float: left; }
#sidebar ul {font-size: 1.2em; position: relative; top: 20px; float: left;}
#sidebar ul li {line-height: 160%; padding: 0 0 0 12px; width: 144px;}
#sidebar ul li.active {background:#fff url(../images/global/arrow-red-white.gif) no-repeat scroll 145px 50%; }
#sidebar ul li.active a  {color: #ff3333; font-weight: bold;  }

#content div#copy {width: 540px; float: left; margin:0 0 15px 0;}

/* --Footer Styles-- */

#footer {overflow:hidden; padding:25px 0 0 0;  width:920px; background:#FFF url(../images/global/footer-gradient.gif) repeat-x 0 0px;clear:both;color:#666;font-size:1.1em; position: relative; top: -30px;margin: 20px auto 0 auto; border-left: 1px solid #f3f0eb; border-right: 1px solid #f3f0eb; z-index: 0;}
#footer h5{float:left;font-weight:400;margin:0 10px 0 10px;}
#footer h5.made-by-mn{display:none;}
#footer ul{float:left;}
#footer ul li{background:transparent url(../images/global/arrow-red-white.gif) no-repeat scroll 0 50%;float:left;margin:0 10px 0 0;padding:0 0 0 10px;}

ul.def-list { width: 500px;}
ul.def-list li * {margin: 0;}
ul.def-list li {padding:8px 5px 8px 10px; position: relative;}
ul.def-list li.alt {background: #fffee5;}
ul.def-list li a {color: #ff3333; font-size: 1.4em; font-weight:bold;}

ul.def-list li div {position: absolute; right: 0; top: 0;}
ul.def-list li div#a {width: 150px; height: 93px; background: url(../images/get-your-kids-active/a.gif); top: -22px; right: -30px;}
ul.def-list li div#b {width: 150px; height: 93px; background: url(../images/get-your-kids-active/b.gif); top: -24px; right: -30px;}
ul.def-list li div#c {width: 150px; height: 91px; background: url(../images/get-your-kids-active/c.gif); top: -23px; right: -30px;}
ul.def-list li div#d {width: 150px; height: 101px; background: url(../images/get-your-kids-active/d.gif); top: -28px; right: -30px;}

div#adobe-reader {clear: both; float: left; padding: 10px 20px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; margin:0 0 10px 0;}
div#adobe-reader p {width: 260px; float: left; text-align: center; font-size:1.1em;}
div#adobe-reader p a {color: #ff3333; font-weight: bold;}
div#adobe-reader div#all-activites a {background: url(../images/get-your-kids-active/all-activities.gif) 0; height: 38px; width: 197px; text-indent: -9999px; display: block; float: right;}
div#adobe-reader div#all-activites a:hover {background-position:-197px;}

div#adobe-reader div#all-activites {height: 38px; width: 197px; display: block; float: right;}

#flashcontainer {width: 570px; height: 300px; }


/***** --Home-- *****/

h1.head-performbetter {margin:3px 0 0 16px; background:transparent url(../images/home/head-performbetter.gif) no-repeat; width:465px; height:86px; display:block;text-indent:-9999px;}
h2.title-healthybreakfast {margin:8px 0 8px 20px; background:transparent url(../images/home/title-healthybreakfast.gif) no-repeat; width:548px; height:18px; display:block;text-indent:-9999px;}
h1.head-nbw {margin:3px 0 0 16px; background:transparent url(../images/home/head-nbw.gif) no-repeat; width:583px; height:111px; display:block;text-indent:-9999px;}


#content .left-col {width:570px;  } 
#content .left-col p {padding:0 20px 0 20px;}
#content .left-col p.nbw {margin:0 0 7px 0;}

#content .right-col {width:300px; overflow:hidden; float: right;} 
#content .right-col p {padding:0 20px 0 20px;}


#content .full-col { overflow:hidden; } 
#content .full-col p {padding:0 20px 0 12px;}

#content.home .side-image {width:363px; height:294px; text-indent:-9999px; overflow:hidden; position:absolute; top:30px; right:1px;}
#content.home .side-image-r {width:363px; height:294px; overflow:hidden; background:transparent url(../images/home/side-image-r.jpg) -9px 0 no-repeat; float:left; position: absolute; right: -360px; top: -198px;}

#win-btn-holder {margin:0 0 0 -4px;}
#win-btn-holder a.win-btn {background:transparent url(../images/home/btn-win.gif) no-repeat;  display:block; text-indent:-9999px; width:222px; height:31px;}
#win-btn-holder a.win-btn:hover {background-position:-222px;}

/* --Win msg-- */
#win-msg-container {position:relative; padding:14px 0 14px 1px; margin:-6px 0 0 0;}
#pod-win {position:absolute; top:0px; left:5px;}
.win-msg {background-color:#fffdd2;  padding:8px 60px 6px 150px;}
h3.title-familytrip {background:transparent url(../images/home/title-familytrip.gif) no-repeat; width:211px; height:18px; display:block;text-indent:-9999px; }
#content.home .left-col .win-msg p { padding:2px 0 2px 0; margin:0 0 0 0;}
.dotted-grey-horizontal {height:1px; background:transparent url(../images/global/dotted-grey-horizontal.gif) repeat-x; margin:0; padding:0;}

/* Bottom home pods */

#pods-container {overflow:hidden; width: 920px; margin:0 0 0 1px; height: 140px; position: relative; z-index: 100;}
#pods-container ul {position: absolute; z-index: 100; }
#pods-container li {float:left;}
#pods-container li a{display:block;text-indent:-9999px;height:128px; width:230px;}

#pods-container li a#pod-games {background:transparent url(../images/home/pod-brain.gif) no-repeat scroll 0;}
#pods-container li a#pod-active {background:transparent url(../images/home/pod-active.gif) no-repeat scroll 0;}
#pods-container li a#pod-activity {background:transparent url(../images/home/pod-activity.gif) no-repeat scroll 0;}
#pods-container li a#pod-fan {background:transparent url(../images/home/pod-fan.gif) no-repeat scroll 0;}
#pods-container li a#pod-tv {background:transparent url(../images/home/pod-tv.gif) no-repeat scroll 0;}
#pods-container li a#pod-performbetter {background:transparent url(../images/home/pod-performbetter.gif) no-repeat scroll 0;}
#pods-container li a#pod-webchat {background:transparent url(../images/home/pod-webchat.jpg) no-repeat scroll 0;}
#pods-container li a#pod-perform {background:transparent url(../images/home/pod-perform.gif) no-repeat scroll 0;}
#pods-container li a#pod-change4life {background:transparent url(../images/home/pod-change4life.gif) no-repeat scroll 0;}

#pods-container li a#pod-games:hover, #pods-container li a#pod-active:hover, #pods-container li a#pod-activity:hover, #pods-container li a#pod-tv:hover, #pods-container li a#pod-fan:hover,#pods-container li a#pod-performbetter:hover,#pods-container li a#pod-webchat:hover, #pods-container li a#pod-perform:hover,#pods-container li a#pod-change4life:hover   {background-position:-230px;}

/***** --Tips to perform better-- ****/
#content.tips-to-perform-better h1 {background: url(../images/tips-to-perform-better/head-performbetter.gif) no-repeat; width: 523px; height: 47px; text-indent: -9999px;}
#content.tips-to-perform-better h2 {background: url(../images/tips-to-perform-better/title-balancedbreakfast.gif); width: 449px; height: 20px; text-indent: -9999px; margin:0 0 10px 0;}

p.quote-title {margin-top:-10px;}
#content.tips-to-perform-better ul.def-list {padding:10px 0 30px 0;}

#content.tips-to-perform-better{background:transparent url(../images/tips-to-perform-better/side-image-r.jpg) no-repeat right top; }

div#bowl-list {position: relative;}
div#bowl-list div#img-bowl {width: 192px; height: 172px; background: url(../images/tips-to-perform-better/img-bowl.gif); top: -10px; z-index:999; position: absolute; top: 0; right: -25px;}

/**** --Get family active-- ****/
#content.get-family-active h1 {background: url(../images/tips-to-perform-better/head-family.gif); width: 294px; height: 55px; text-indent: -9999px;}
body #container .get-family-active {background:transparent url(../images/tips-to-perform-better/side-image-r.jpg) no-repeat right top;}

/**** --Champion breakfast-- ****/
#content.champion-breakfast h1 {background: url(../images/tips-to-perform-better/head-champion.gif); width: 346px; height: 52px; text-indent: -9999px;}
body #container .champion-breakfast {background:transparent url(../images/tips-to-perform-better/side-image-r.jpg) no-repeat right top}

/**** --Breakfast made easy-- ****/
#content.breakfast-made-easy h1 {background: url(../images/tips-to-perform-better/head-breakfast.gif); width: 347px; height: 49px; text-indent: -9999px;}
body #container .breakfast-made-easy {background:transparent url(../images/tips-to-perform-better/side-image-r.jpg) no-repeat right top;}

/***** --Brain Games-- ****/
body #container .brain-games h1 {background: url(../images/brain-games/head-takeyourbrain.gif); width: 506px; height: 59px; text-indent: -9999px; margin:0 0 0 0;}
body #container .brain-games h2 {background: url(../images/brain-games/title-testyourself.gif); width: 504px; height: 20px; text-indent: -9999px; margin:0 0 10px 0;}
body #container .brain-games .left-col {width:506px; margin:0 0 0 12px; float:left;}
body #container .brain-games .left-col p {padding:0 0 0 0;}

body #container .brain-games .side-image {width:433px; height:334px; text-indent:-9999px; overflow:hidden; position:absolute; top:0px; right:-29px; background: url(../images/brain-games/side-image.jpg) no-repeat;}
body #container .brain-games .right-col {float:right; margin:340px 0 0 0; background: url(../images/brain-games/brain.jpg) no-repeat 265px 0; width: 390px;}

body #container .brain-games h3#ready-for-more {background: url(../images/brain-games/ready-for-more.gif); height: 24px; width: 361px; text-indent: -9999px; margin:0 0 0 12px;}
body #container .brain-games .right-col p {width: 250px; float: left;}

body #container .brain-games div.downloads {width: 445px; padding: 0 0 30px 0;}

body #container .brain-games div.downloads h2 {width: 445px; height: 44px; text-indent: -9999px; margin: 0 0 -2px 0;}
body #container .brain-games div.downloads#ages6to9 h2 {background: url(../images/brain-games/ages6to9.gif);}
body #container .brain-games div.downloads#ages10plus h2 {background: url(../images/brain-games/ages10plus.gif);}

body #container .brain-games div.downloads#ages6to9 {float: left; margin: 0 0 0 10px;}
body #container .brain-games div.downloads#ages10plus {float: right; margin: 0 10px 0 0;}

body #container .brain-games div.downloads ul {position: relative; }
body #container .brain-games div.downloads ul li.alt {background: #fffee5;}
body #container .brain-games div.downloads ul li {position: relative; padding: 5px;}
body #container .brain-games div.downloads ul li h4 a {color: #ef3c39; font-weight: bold; font-size: 1.6em;}
body #container .brain-games div.downloads ul li h4 a:hover {text-decoration: none; color: #bd302d;}
body #container .brain-games div.downloads ul li p {margin: 0 ; padding: 0;}

body #container .brain-games div.downloads ul li a.pdf {width: 38px; height: 38px; display: block; text-indent: -9999px; background: url(../images/brain-games/pdf_up.gif); position: absolute; top:5px; right: 20px;}
body #container .brain-games div.downloads ul li a.pdf:hover {background: url(../images/brain-games/pdf_over.gif);}

#flashWordSearch {width: 500px; height: 300px; background:transparent url(../images/brain-games/wordsearch-bg-grad.jpg) repeat-x; float: left;}

body #container .brain-games .dotted-grey-horizontal {padding:10px 0 10px 0;}
p.more-info {font-weight:bold;}

/***** --Get your kids active-- ****/
body #container .get-your-kids-active {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}

body #container .alphabet-game {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .jump-the-stream {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .floor-football {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .human-skittles {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .lose-three-balls {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .reach-out {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .sleeping-lions {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}
body #container .musical-shapes {background:transparent url(../images/get-your-kids-active/SideImage.jpg) no-repeat right top;}

#content.get-your-kids-active h1 {background: url(../images/get-your-kids-active/title.gif); width: 434px; height: 105px; text-indent: -9999px; margin: 0 0 10px 0;}

#content.alphabet-game h1 {background: url(../images/get-your-kids-active/alphabet-game/title.gif); width: 327px; height: 52px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.jump-the-stream h1 {background: url(../images/get-your-kids-active/jump-the-stream/title.gif); width: 279px; height: 51px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.floor-football h1 {background: url(../images/get-your-kids-active/floor-football/title.gif); width: 224px; height: 47px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.human-skittles h1 {background: url(../images/get-your-kids-active/human-skittles/title.gif); width: 251px; height: 43px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.lose-three-balls h1 {background: url(../images/get-your-kids-active/lose-three-balls/title.gif); width: 275px; height: 45px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.reach-out h1 {background: url(../images/get-your-kids-active/reach-out/title.gif); width: 175px; height: 44px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.sleeping-lions h1 {background: url(../images/get-your-kids-active/sleeping-lions/title.gif); width: 242px; height: 52px; text-indent: -9999px; margin: 0 0 10px 0;}
#content.musical-shapes h1 {background: url(../images/get-your-kids-active/musical-shapes/title.gif); width: 260px; height: 52px; text-indent: -9999px; margin: 0 0 10px 0;}

div.main-image {width: 540px; height: 283px; display: block; margin:0 0 15px 0;}

#content.alphabet-game div.main-image {background: url(../images/get-your-kids-active/alphabet-game/main.gif) no-repeat;}
#content.jump-the-stream div.main-image {background: url(../images/get-your-kids-active/jump-the-stream/main.gif) no-repeat;}
#content.floor-football div.main-image {background: url(../images/get-your-kids-active/floor-football/main.gif) no-repeat;}
#content.human-skittles div.main-image {background: url(../images/get-your-kids-active/human-skittles/main.gif) no-repeat;}
#content.lose-three-balls div.main-image {background: url(../images/get-your-kids-active/lose-three-balls/main.gif) no-repeat;}
#content.reach-out div.main-image {background: url(../images/get-your-kids-active/reach-out/main.gif) no-repeat;}
#content.sleeping-lions div.main-image {background: url(../images/get-your-kids-active/sleeping-lions/main.gif) no-repeat;}
#content.musical-shapes div.main-image {background: url(../images/get-your-kids-active/musical-shapes/main.gif) no-repeat;}
/***** --Activity Finder-- ****/
#content.activity-finder {margin:4px 0 0 1px;}

/***** --Wake Up Workout Challenge-- ****/
#content.workout-challenge {margin:4px 0 0 1px;}
p#note {padding: 10px 0; clear: both;}
#microsoft-iframe {z-index:9999;}


#puzzlefooter {width: 100%; position: relative; top: -4px; font-size: .9em;}
#puzzlefooter #cantdownload {float: left; font-weight:bold;}
#puzzlefooter #copyright {float: right;}

p a {color:#FF3333; }
p a:hover {color:#FF3333; }
.extract{font-size:1.1em; color:#999999;}

.red {color: #DC0026}

div#disclaimer { color: #999; margin: auto; width: 100%; text-align: center; line-height: 200%; font-size:  1.1em; margin: -10px 0 10px 0; padding: 0 0 10px 0;}