/*
-----------------------------------------------------
Kellogg's Crunchy Nut (kelloggs.co.uk/whatson/crunchynut/) SCREEN style sheet
author:   mN -> hello@magneticn.co.uk
version:  2007.12
----------------------------------------------------- */

/*--------- 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%; margin-bottom: 1px; }
body{ font-size:77%; background:url(../images/global/main_bg.jpg) repeat-x #fff; }
.clear{ width:auto; height:0 !important; overflow:hidden; position:relative; clear:both; }
strong{ font-weight:700; }
a{ outline:none; }
small#enjoy {position: absolute; top: 240px; left: 230px; color: #666;}
img, div { behavior: url(/iepngfix2.htc) }

#nutty{ background:url(../images/global/outer_bg.jpg) no-repeat center top; }

/*#o-container{ width:1024px; min-height:708px; height:auto !important;  margin:0 auto 10px auto; position:relative; overflow:hidden; }*/
#o-container{ width:960px; min-height:660px; height:auto !important;  margin:0 auto 0 auto; position:relative; overflow:hidden; }

/*#i-container{ position:relative;left:52px;width:920px; margin:0; background:#F9C234 url(../images/global/content_grad.jpg) repeat-x; min-height:671px; height:auto !important; height:671px; }*/
/*#i-container{ position:relative;left:20px;width:920px; margin:0; background:#F9C234 url(../images/global/content_grad.jpg) repeat-x; min-height:637px; height:auto !important; height:637px; }*/
#i-container{ position:relative;left:20px;width:920px; margin:0; background:#F9C234 url(../images/global/content_grad_alt.jpg) repeat-x; min-height:637px; height:auto !important; height:637px; }
.ingredients #i-container{ position:relative;left:20px;width:920px; margin:0; background:#F9C234 url(../images/ingredients/content_grad.jpg) repeat-x  0 120px; min-height:950px; height:auto !important; height:950px; }

.gallery #i-container { background:url(../images/gallery/gallery_inner_bg.jpg) no-repeat 0px 112px; }
/*.tvadbod #i-container { min-height:677px; height:auto !important; height:677px; }
.newnews #i-container { min-height:647px; height:auto !important; height:647px; }*/

/*#header{ position:relative;left:20px;background:url(../images/global/header_bg.jpg) no-repeat; width: 920px; height:57px; margin:0; }*/
#header{ position:relative;left:20px;background:url(../images/global/header_bg_alt.jpg) no-repeat; width: 920px; height:57px; margin:0; }
#header #logo { background:url(../images/global/kelloggs_logo.gif); width:100px; height:37px; position:absolute; top:10px; left:12px; }
#header #logo a{ display:block; height:37px; text-indent:-9999px; }

#banner { background:url(../images/global/banner_bg.gif) no-repeat center top; width: 920px; height:203px; margin:0; }

.gallery #banner { background:url(../images/gallery/gallery_banner_bg.jpg) no-repeat center top; }

#flakes { position: absolute; top: 44px; left: 20px; background:url(../images/global/flakes.gif) no-repeat left top; width: 109px; height:298px; margin:0; z-index: 20;}
/*.gallery #flakes { background:url(../images/gallery/flakes.gif) no-repeat left top; }*/
.gallery #flakes { background:url(../images/gallery/flakes.gif) no-repeat left top; z-index: 20;}
.home #flakes { background:url(../images/home/flakes.png) no-repeat left top; z-index: 20; /*left: 20px !important; */left: 20px;}

#breadcrumb{ position:absolute; top:33px; right:12px; width: 270px; }
#breadcrumb p{ float:left; display:inline; margin-top: 1px; margin-right:4px; color:#434343; font-size:0.9em; }
#breadcrumb li{ display:inline; background:url(../images/global/bread_arrow.gif) no-repeat 0 50%; padding:0px 0px 0px 7px; margin-right:4px; }
#breadcrumb li a{ font-size:0.9em; text-decoration:none; color:#434343; }
#breadcrumb li.active a{ color:#df2700; }
#breadcrumb li a:hover{ text-decoration:underline; color:#df2700; }

#banner p { background:url(../images/global/crunchynut_logo.gif); width:256px; height:119px; position:relative; top:10px; left:72px; text-indent:-9999px; }
#banner p a{ display:block; height:54px; }

/*.home #content h3{ background:url(../images/home/home_copy_only.gif); width:312px; height:105px; position:absolute; top:-60px; left:210px; text-indent:-9999px; }
.home #content h4{ background:url(../images/home/home_copy_asimple.gif); width:256px; height:106px; position:absolute; top:30px; left:300px; text-indent:-9999px; }*/

#home-copy-only { background:url(../images/home/home_copy_only.gif); width:312px; height:105px; position:absolute; top:-50px; left:250px; text-indent:-9999px; }
#home-copy-two { background:url(../images/home/home_copy_asimple.gif); width:256px; height:106px; position:absolute; top:10px; left:290px; text-indent:-9999px; }

div#home-copy { width:286px; height:140px; position:absolute; top:-50px; left:270px;}
div#home-copy h1 {background:url(../images/home/home_copy_tasty.gif); text-indent: -9999px; width: 286px; height: 93px; float: left; }
div#home-copy p {margin: 0;}
div#home-copy p a {background: url(../images/home/home_copy_findoutmore.gif); text-indent: -9999px; width: 286px; height: 47px; display: block; float: left; }

#products-copy { background:url(../images/products/products_copy.gif) no-repeat; width:297px; height:81px; position:absolute; top:-65px; left:90px; text-indent:-9999px; }
#products-table { position: absolute; left: 200px; top: 52px; }
#products-table img {position: relative; top: 10px;}
#products-info { position: absolute; top: -9999px; left: -9999px; background: url(../images/products/products_info_bg.gif) no-repeat; color: #2D343E; width: 415px; min-height: 90px; height: auto !important;  overflow: hidden;  z-index: 9999;}
#products-info map {border: 1px solid lime;}
#products-info dt { font-weight: bold; background:url(../images/products/products_arrow.gif) no-repeat 0px 0px; margin: 7px 7px 0px 5px; text-indent: 15px; }
#products-info dd { margin-left: 22px; margin-bottom: 7px; margin-right: 12px; }

#nuts-tv-sign { position:absolute; top:0; left:0; width:359px; height:205px; text-indent: -9999px; }

#tvads-sign { position: absolute; left: 80px; top: -67px; background: url(../images/nuttv/sign.gif) no-repeat; width: 202px; height: 104px; text-indent: -9999px; z-index: 20; }

#video{ width:380px; height:304px; position:absolute; top:-40px; left:560px; /*background:url(../images/home/video_alt_sm2.jpg) no-repeat right 1px;*/ }
#flashhomevid {background:url(../images/home/video_alt_sm.jpg) no-repeat right 1px;}

/*#home-bowl { background:url(../images/home/home_bowl.gif); width:529px; height:230px; position:absolute; top:45px; left: -20px; }*/
#home-bowl {background:url(../images/home/home_pack_sm.png) no-repeat; width:350px; height:270px; position:absolute; top:-20px; left: -10px; z-index: 9999;}

/*#home-pod-container { position: relative; top: 280px; left: 15px; width: 888px; }*/
#home-pod-container { position: relative; top: 260px; left: 15px; width: 888px;}
.tvadbod #home-pod-container,
.newnews #home-pod-container { top: 247px; z-index: 30; }

#nutty-facts { float: left; display: inline; background:url(../images/home/home_nuttyfacts_bg.gif) no-repeat left bottom;width: 265px;height:174px; text-indent:-9999px; z-index: 5;}
#content #fact-container { left: 20px; top: 92px; position: absolute; color: #fff; width: 225px; height: 72px; text-align: center; z-index: 10; margin: 0; padding: 0; }
#content #fact-container p { color: #fff; position: relative; z-index: 20; width: 99%; margin: 0; padding: 0; }

#home-product-pod { float: left;}
#home-product-pod img { margin-left: 4px; }

#home-thoughts-pod { float: left;}
#home-thoughts-pod img { margin-left: 4px; }

#flash-gallery { background:url(../images/home/home_gallery.jpg) no-repeat; float: left; position: relative; top: 10px; left: 15px; width: 324px; height: 174px; }

#home-gallery { position: absolute; top: 0; left: 0; width: 324px; height: 174px; text-indent:-9999px; }

ul#nav-main{ width:571px; height:48px; position:absolute; top:10px; right:5px; }
#nav-main li{ float:left; }
#nav-main li a{ text-indent:-9999px; display:block; height:48px; overflow:hidden; background-repeat:no-repeat; }

#nav-home{ width:68px; background-image:url(../images/nav/nav_home.gif); }
a#nav-home:hover,
.on a#nav-home { background-position:-68px 0; }

#nav-ingredients{ width:117px; background-image:url(../images/nav/nav_ingredients.gif); }
a#nav-ingredients:hover,
.on #nav-ingredients { background-position:-117px 0; }

#nav-products{ width:93px; background-image:url(../images/nav/nav_products.gif); }
a#nav-products:hover,
.on #nav-products
{ background-position:-93px 0; }
#nav-newnews{ width:117px; background-image:url(../images/nav/nav_newnews.gif); }
a#nav-newnews:hover,
.on #nav-newnews
{ background-position:-117px 0; }
#nav-gallery{ width:88px; background-image:url(../images/nav/nav_gallery.gif); }
a#nav-gallery:hover,
.on #nav-gallery
{ background-position:-88px 0; }
#nav-tvads{ width:88px; background-image:url(../images/nav/nav_tvads.gif); }
a#nav-tvads:hover,
.on a#nav-tvads
{ background-position:-88px 0; }

#content{ width:920px; margin:0 0 0 0px; position:relative; padding:0; }

#content p{ color:#666666; width:386px; line-height:1.4; margin:0 0 10px 20px; }
#content p strong{ font-weight:700; }
#content p a{ color:#F9C234; font-weight:700; text-decoration:none; }
#content p a:hover{ text-decoration:underline; }

/*#site-info{ position:relative;left:20px; background:url(../images/global/footer_bg.gif) repeat-x; width:920px; height:34px; margin:0; padding:0; }*/
#site-info{ position:relative;left:20px; background:url(../images/global/footer_bg_alt.gif) repeat-x; width:920px; height:29px; margin:0; padding:0; }

.gallery #site-info { background:url(../images/gallery/gallery_footer_bg.gif) repeat-x; height:28px; z-index: 50; }

/*#site-info-inner {position: relative;left:17px;top:12px;}*/
#site-info-inner {position: relative;left:17px;top:7px;}

.gallery #site-info-inner {position: relative;left:17px;top:6px;}

#site-info p, #site-info a{font-size:0.9em; color:#F9C234; text-decoration:none; }
#site-info a:hover{ text-decoration:underline; }
#site-info p{ position: relative; float:left; display:inline; margin-right:8px; top: 1px; }
#site-info ul li{ display:inline; background:url(../images/global/footer_arrow.gif) no-repeat 0 60%; padding-left:7px; margin-right:4px; }
#site-info li.madeby { margin-left: 370px; }

#nutty-about-nuts { background:url(../images/cnutnutty/nutty_about_nuts.gif) no-repeat; text-indent: -9999px; width: 362px; height: 133px; position: absolute; left: 350px; top: -40px; }
#nutty-copy-container { width: 385px; position: absolute; left: 500px; top: 95px; padding: 0; }
#nutty-copy-container p { width: auto; color: #000; margin: 0 0 10px 0; }
#nutty-box { background:url(../images/cnutnutty/nutty_box.jpg) no-repeat; width: 423px; height: 316px; position: absolute; left: 75px; top: -28px; }

#bites { background:url(../images/cnutbites/bites.gif) no-repeat; text-indent: -9999px; width: 299px; height: 104px; position: absolute; left: 420px; top: -40px; }
#bites-copy-container { width: 300px; position: absolute; left: 405px; top: 60px; padding: 0; }
#bites-copy-container p { width: auto; color: #000; margin: 0 0 10px 0; }
#bites-box { background:url(../images/cnutbites/bites_box.png) no-repeat; width: 195px; height: 275px; position: absolute; left: 155px; top: -28px; }

#gallery-carousel { width: 420px; text-align: center; position: relative; top: -10px; margin: 0 auto; z-index: 10; }
#gallery-left-container { z-index: 5; display: inline; position: relative; }
#gallery-central-container { z-index: 10; display: inline; position: relative; }
#gallery-right-container { z-index: 5; display: inline; position: relative; }
#gallery-carousel img.central { width: 200px; height: 200px; position: relative; top: -10px; }
#gallery-carousel img.background-left { z-index: 0; position: relative; left: -30px; top: -35px; width: 100px; height: 100px; }
#gallery-carousel img.background-right { z-index: 0; position: relative; left: 30px; top: -35px; width: 100px; height: 100px; }
#gallery-carousel img.hidden-left { display: none; }
#gallery-carousel img.hidden-right { display: none; }
#gallery-carousel a.leftArr { position: absolute; left: -20px; top: 195px; margin-left: 25px; }
#gallery-carousel a.rightArr { position: absolute; right: -20px; top: 195px; margin-right: 25px; }
#gallery-carousel div.imageDesc { position: relative; top: -10px; width: 280px; margin: 8px auto 0 auto; color: #fff; height: 30px; overflow: hidden; }
#gallery-sign { background: url(../images/gallery/gallery_sign.gif) no-repeat; width: 252px; height: 88px; position: absolute; top: -67px; left: 87px; text-indent: -999px; z-index: 20; }
.gallery-upload { position: absolute; left: 135px; top: 255px; width: 366px; height: 156px; background: url(../images/gallery/gallery_upload.gif) no-repeat; }
.gallery-upload .browsebutton { position: absolute; right: 20px; top: 124px; }
.gallery-upload .filetext { position: absolute; left: 20px; top: 125px; width: 230px; }
.gallery-upload .controls {position: absolute; bottom: 5px; }
.gallery-upload .buttons { float: right; margin-right: 8px; }
.gallery-upload label { position: absolute; left: -9999px; }
.gallery-upload .errorBox { color: #fff; position: absolute; left:12px; bottom: 10px; }
.gallery-upload .errorBox span { text-decoration: underline; }
.gallery-upload input.galleryform { position: relative; left: 10px; width: 344px; margin-bottom: 2px; }

#gallery-nutty-pod { position: absolute; left: 510px; top: 234px; }
.gallery-upload-thanks { position: absolute; left: 135px; top: 255px; width: 366px; height: 156px; background: url(../images/gallery/gallery_upload_thankyou.gif) no-repeat; }
.gallery-upload-thanks input { position: absolute; bottom: 10px; right: 10px; }

#tv-player { background:url(../images/nuttv/player_alt.gif) no-repeat; width: 468px; height: 268px; position: absolute; left: 305px; top: -40px; }

#gallery-video { position: absolute; width: 920px; height: 600px; left: 0px; top: -71px; z-index: 10; }
#flashgalleryvid { z-index: 2; }
#noflash { z-index: 1; margin: 300px auto 0 auto; text-align: center; }
#noflash p { color: #fff; }

div.fileinputs { position: relative; left: 10px; height: 21px; margin: 0 0 5px 0; padding:0; width: 344px; }
div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1;	margin:0; padding:0; height: 21px; }
div.fakefile input { position:relative; top: -5px; margin: 0 0 0 0; padding: 0; width: 245px; }
div.fakefile img { margin-left: 10px }
input.file { position: relative; text-align: right;	z-index: 2; width: 344px; height: 22px;}

#blob-overlay { background: url(../images/gallery/blob_overlay.gif) no-repeat; position: absolute; left: 756px; top: -126px; width: 166px; height: 93px; z-index: 20; }
.tvadbod #blob-overlay, 
.newnews #blob-overlay
{ background: url(../images/nuttv/blob_overlay.gif) no-repeat; }

#news-copy { background:url(../images/newnews/news_copy.gif) no-repeat; width:362px; height:157px; position:absolute; top:20px; left:100px; text-indent:-9999px; z-index: 30; }

#tv-flash-container { position: absolute; width: 600px; height: 350px; left: 270px; top: -53px; z-index: 10; }
.newnews #tv-flash-container { top:-15px; left:520px; }

/* Ingredients */

.ingredients h1 {width: 310px; height: 80px; background: url(../images/ingredients/h1.gif) no-repeat; text-indent: -9999px; margin: -50px 0 15px 120px; z-index: 9999; position: absolute; top: -40px; left: 0px;}
.ingredients h1.ie {width: 346px; height: 48px; background: url(../images/ingredients/h1_ie.gif) no-repeat; text-indent: -9999px; margin: -50px 0 15px 120px; z-index: 9999; position: absolute; top: -20px; left: 0px;}
.ingredients ul#ingredients-list {margin: 35px auto 0 auto; float: left; position: relative;}
.ingredients ul#ingredients-list li {float: left; width: 440px;min-height:327px; height:auto !important; height:327px; margin: 0 0 30px 15px !important; margin: 0 0 30px 8px;}
.ingredients ul#ingredients-list li div {width: 185px; margin: 0 0 0 250px;}
.ingredients ul#ingredients-list li div p {margin: 0; width: 185px; color: #000;}
.ingredients ul#ingredients-list li div h3 {text-transform: uppercase; font-weight: bold; font-size: 1.2em; margin: 0 0 10px 0;}
.ingredients ul#ingredients-list li#ingredient-a {background: url(../images/ingredients/imga.jpg) no-repeat;}
.ingredients ul#ingredients-list li#ingredient-b {background: url(../images/ingredients/imgb.jpg) no-repeat;}
.ingredients ul#ingredients-list li#ingredient-c {background: url(../images/ingredients/imgc.jpg) no-repeat;}
.ingredients ul#ingredients-list li#ingredient-d {background: url(../images/ingredients/imgd.jpg) no-repeat;}

.ingredients ul#ingredients-list li#ingredient-a h3 {background: url(../images/ingredients/titlea.gif) no-repeat; width: 185px; height: 33px; text-indent: -9999px;}
.ingredients ul#ingredients-list li#ingredient-b h3 {background: url(../images/ingredients/titleb.gif) no-repeat; width: 185px; height: 15px; text-indent: -9999px;}
.ingredients ul#ingredients-list li#ingredient-c h3 {background: url(../images/ingredients/titlec.gif) no-repeat; width: 185px; height: 33px; text-indent: -9999px;}
.ingredients ul#ingredients-list li#ingredient-d h3 {background: url(../images/ingredients/titled.gif) no-repeat; width: 185px; height: 17px; text-indent: -9999px;}
.ingredients ul#ingredients-list li#ingredient-d h3.ie {background: url(../images/ingredients/titled_ie.gif) no-repeat; width: 185px; height: 17px; text-indent: -9999px;}

/* tagline */

#homeTagLine {width:292px;height:161px;background:url(../images/home/home_tagline.jpg);position:absolute;top:17px;left:73px;text-indent:-999px;}
#homeLogo {width:243px;height:210px;background:url(../images/home/home_logo.jpg);position:absolute;top:9px;left:365px;text-indent:-999px;}
#rob {width:395px;height:308px;background:url(../images/home/rob.jpg);position:absolute;top:178px;left:6px;}
#homeFacebook a {display:block;width:207px;height:198px;background:url(../images/home/facebook.jpg);position:absolute;top:210px;left:398px;text-indent:-999px;}
#homeCereals {width:465px;position:absolute;top:459px;left:223px;text-align:center;}
#homeCereals li {float:left;}
#homeCereals img {border:0;}
#content #homeCereals p {color:#000;font-size:12px;position:absolute;top:151px;left:18px;}
#homeFlash {width:276px;height:198px;background:url(../images/home/flash.jpg);position:absolute;top:219px;left:608px;}