html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; line-height: 1em}
/* remember to define focus styles! */ :focus {outline: 0}
body {color: black; background: white; font: 62.5%/1.3 Arial, Helvetica, Sans-Serif}
ol, ul {list-style: none}
/* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}/* ----------------------------------------------- GLOBAL CLASSES ----------------------------------------------- */ .clear {clear: both; font-size: 0.1px; height: 0pt; line-height: 0pt; width: 0pt}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix {display: inline-block}
/* Hide from IE Mac \*/ .clearfix {display:block}
/* End hide from IE Mac */ .nowrap {white-space: nowrap}
.hidden {display: none}
.left {float: left}
.right {float: right}
.cursor {cursor:pointer;}
.upper {text-transform: uppercase}
.bold {font-weight: bold}
.nomargin {margin: 0}/* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ *{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_window {font: 12px Arial, Helvetica, sans-serif; color: #333333}
#TB_secondLine {font: 10px Arial, Helvetica, sans-serif; color:#666666}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_overlay {position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75}
* html #TB_overlay {/* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px')}
#TB_window {position: fixed; z-index: 102; display:none; text-align:left; top:50%; left:50%}
* html #TB_window {/* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px')}
#TB_window img#TB_Image {display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666}
#TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left}
#TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right}
#TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right}
#TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px}
#TB_title{ background-color:#e8e8e8; height:27px; display:none}
#TB_ajaxContent{ clear:both; overflow:hidden; text-align:left; line-height:1.4em}
#TB_ajaxContent.TB_modal{ padding:15px}
#TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ }
* html #TB_load {/* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px')}
#TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%}
* html #TB_HideSelect {/* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px')}
#TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px}
/* BODY STYLING */ body {font-family: Frutiger, Helvetica, Sans-serif; color: #18217b;}
body.ajax{margin:0;}
/* HEADER STYLING */ #Header {background: url(../img/html/background-navigation.gif) repeat-x; height: 55px; position: relative;}
#Header #HeaderWrapper {width: 870px; margin: 0 auto; position: relative;}
#Header #HeaderWrapper h1 {width: 123px; display: inline; position: absolute;z-index:1;}
#Header #HeaderWrapper #ReturnToWarburtons {position: absolute; top: 0; left: 130px; background: url(../img/html/button-returntowarburtons.gif) no-repeat; height: 21px; width: 184px; margin: 15px 0 0 25px;}
#Header #HeaderWrapper #ReturnToWarburtons {display: block; height: 21px; width: 184px; text-decoration: none; padding: 5px 0 0 20px; font-size: 1.2em; color: #c50030;}
#Header #HeaderWrapper #ReturnToWarburtons:hover {text-decoration: underline;}
#Header #HeaderWrapper #WarburtonsLogo {width: 123px; float: left;}
/* NAVIGATION STYLING */ #Navigation {padding: 10px 20px; text-align: center; margin: 0 0 0px 0;}
#Navigation li {display: inline; margin: 0 10px 0 10px;}
#Navigation li.selected a {border-bottom: none;}
#Navigation a {color: #C50030; font-size: 1.8em; text-decoration: none; border-bottom: 1px solid #C50030;}
#Navigation a:hover {border-bottom: 2px solid #C50030;}
/* MAIN CONTENT STYLING */ #Content {background: url(../img/html/background.jpg) top center repeat; position: relative; min-width: 850px;}
#Content h1 {color: #c50030; font-size: 3em; margin: 0 0 15px 0;font-weight:normal;}
#Content h2 {color: #c50030; font-size: 1.8em; margin: 20px 0 10px 0;font-weight:normal;}
#Content h3 {color: #c50030; font-size: 1.4em; margin: 20px 0 10px 0;font-weight:normal;}
#Content p {font-size: 1.4em; color: #343434; margin: 0 0 15px 0; line-height: 1.2em;}
#Content p.large {font-size: 1.8em;}
#Content a {color: #c50030; text-decoration: underline;}
#Content ul {font-size: 1.4em; color: #343434; margin: 0 0 15px 0; line-height: 1.2em;}
#Content ol {font-size: 1.4em; color: #343434; margin: 0 0 15px 0; line-height: 1.2em;}
#Content #Terms li {padding: 0 0 10px 0; list-style: decimal; margin-left: 20px;}
#Content ol h3 {font-size: 1.2em; margin: 20px 0 10px -5px;}
#Content strong {font-weight: bold;}
#Content #ContentWrapper {width: 850px; margin: 0 auto; height: 510px; position: relative;}
#Content #ContentWrapper #MainContent {float: left; margin: 30px 5px 0 80px; background: url(../img/html/background-maincontent.gif) no-repeat; height: 383px; width: 437px; display: inline;}
#Content #ContentWrapper #MainContent img {margin: 40px 0 0 20px;}
#Content #ContentWrapper #MainContent .first-paragraph {font-size: 1.4em; line-height: 1.1em; margin: 30px 0 0 20px; width: 395px; font-weight: bold; color: #18217b;}
#Content #ContentWrapper #MainContent .second-paragraph {font-size: 1.2em; line-height: 1.2em; margin: 20px 0 0 20px; width: 395px; font-weight: bold; color: #18217b;}
#Content #ContentWrapper #SideContent {float: left; margin: 30px 0 0 0; background: url(../img/html/background-sidecontent.gif) no-repeat; height: 383px; width: 248px; display: inline;}
#Content #ContentWrapper #SideContent img {margin: 10px 0 0 10px;}
#Content #SecondaryNavWrapper {width: 870px; margin: 0 auto; position: relative;}
#Content #SecondaryNavWrapper #NationalBreadWeek {position: absolute; bottom: 30px; right: 305px;}
#Content #SecondaryNavWrapper #SecondaryNavigation {position: absolute; bottom: 95px;}
#Content #SecondaryNavWrapper #SecondaryNavigation a, #Content #SecondaryNavWrapper #SecondaryNavigation a:visited {display: block; height: 60px;}
#Content #SecondaryNavWrapper #SecondaryNavigation a span, #Content #SecondaryNavWrapper #SecondaryNavigation a:visited span {display: none;}
#Content #SecondaryNavWrapper #SecondaryNavigation #EnterToWin {float:left;width:335px;padding:0 245px 0 10px;}
#Content #SecondaryNavWrapper #SecondaryNavigation #EnterMainSite {float:left;width:233px;}
/* PRIZEDPICNICS HTML VOTE SCREEN */ #Content h1 span{display:block;font-size:.65em;margin-bottom:5px;}
#Content img.vote-image{float:right;margin-bottom:1em;}
/* DEFAULT STYLING */ #Content #MContentWrapper {width: 850px; margin: 0 auto; min-height: 620px; position: relative; text-align: center;}
#Content #BackgroundHeader {width: 850px; margin: 0 auto; height: 60px; background: url(../img/html/background-top.gif) no-repeat center top;}
#Content #BackgroundFooter {width: 850px; margin: 0 auto 0 auto; height: 27px; background: url(../img/html/background-bottom.gif) no-repeat top center; padding: 0 0 40px 0;}
#Content #MContentWrapper #LargeContent {text-align: left; margin: 0 auto -15px auto; width: 522px; min-height: 520px; border-left: 3px solid #947845; border-right: 3px solid #947845; background: #FEFEFE; padding: 20px;}
#Content #MContentWrapper #LargeContent #Message {margin: 50px 0 0 55px; position: relative; height: 390px; color: #18217b;}
#Content #MContentWrapper #LargeContent #Message .congratulations {font-size: 2.0em; margin: 50px 50px 20px 0;}
#Content #MContentWrapper #LargeContent #Message .been-selected {font-size: 1.2em; margin: 20px 0 20px 100px; width: 320px;}
#Content #MContentWrapper #LargeContent #Message .good-luck {font-size: 1.8em; margin: 20px 50px 0px 0;}
#Content #MContentWrapper #LargeContent #Message .come-back {width: 340px; padding: 0 80px;}
#Content #MContentWrapper #LargeContent #Message p {text-align: center; margin-right: 50px; font-size: 1.2em; margin: 0 50px 20px 0;}
#Content #MContentWrapper #LargeContent #GoBack {position: absolute; bottom: 0; left: 0;}
#Content #MContentWrapper #LargeContent #Message #PrintCoupon {height: 52px; display: block; width: 159px; position: absolute; bottom: 0px; left: 220px;}
#Content #MContentWrapper #LargeContent #MiniLogo {position: absolute; bottom: 0; right: 0;}
/* SUB NAVIGATION STYLING */ #SubNavigation {width: 110px; float: left; padding: 20px 0 0 0; border: 3px solid #947845; background: #FEFEFE; position: absolute; top: 31px; left: 0px;}
#SubNavigation li {list-style: none; margin-left: 15px;}
#SubNavigation li.selected a {color: #c50030; text-decoration: none;}
#SubNavigation a {color: #343434; font-size: 1.0em;}
/* FORM STYLING */ #Content #LContentWrapper {width: 850px; margin: 0 auto; height: 620px; position: relative;}
#Content #LContentWrapper #LargeContent {float: left; margin: 30px 5px 0 80px; background: url(../img/html/background-largecontent.jpg) no-repeat; height: 524px; width: 602px; display: inline;}
#Content .picnic-left {position: absolute; width: 22px; height: 203px; background: url(../img/html/picnic-left.gif) no-repeat; left: 119px; top: 80px;}
#Content .picnic-right {position: absolute; width: 22px; height: 181px; background: url(../img/html/picnic-right.gif) no-repeat; bottom: 80px; right: 119px;}
#LargeContent .competitionEntrants {margin: 45px 0 0 55px;}
#Content #LargeContent .competitionEntrants p{color:#18217b;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm {margin: 20px 0 0 15px; position: relative; height: 400px;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .form-header {margin: 0 0 20px 0; font-size: 1.2em;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input {position:relative;text-align:right;width:380px;margin:0 0 12px;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input label{float:left;width:160px;text-align:left;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input input{width:210px;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input.checkbox{text-align:left;width:auto;margin:0 0 5px;min-height:20px;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input.checkbox input{width:auto;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input.checkbox label{width:auto;float:none;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .input.pack-code input{width:68px;margin-right:142px;text-transform:uppercase;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .submit input {cursor:pointer;border: none; background: url(../img/html/button-submit.gif) no-repeat; width: 131px; height: 76px; position: absolute; bottom: -5px; left: 140px;}
#LargeContent .competitionEntrants #FormLogo {position: absolute; bottom: 60px; right: 150px;}
#Content #LargeContent .competitionEntrants #CompetitionEntrantAddForm .input p {font-size: 1em; text-align:left;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .error-message {color: red; font-weight: bold;text-align:left;margin:0 0 0 166px;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .checkbox .error-message{margin:0;}
#LargeContent .competitionEntrants #CompetitionEntrantAddForm .error-message.maximum-entrants{position:relative;width:440px;margin:-1em 0 1em;border:1px solid #ff0000;padding:1em;}
#LargeContent .competitionEntrants.msn #CompetitionEntrantAddForm, #Content #LargeContent .competitionEntrants.msn fieldset{padding:1em 0 0;}
/* SUCCESS/COUPON STYLING */ #Content #WContentWrapper {width: 850px; margin: 0 auto; height: 620px;position:relative;}
#Content #WContentWrapper #LargeContent {float: left; margin: 30px 5px 0 80px; background: url(../img/html/background-widecontent.gif) no-repeat; height: 446px; width: 603px; display: inline; position: relative;}
#Content #WContentWrapper #LargeContent #Message {margin: 50px 0 0 55px; position: relative; height: 390px;}
#Content #WContentWrapper #LargeContent #Message .congratulations {font-size: 2.0em; margin: 50px 50px 20px 0; color: #18217b;}
#Content #WContentWrapper #LargeContent #Message .been-selected {font-size: 1.2em; margin: 20px 0 20px 100px; width: 320px; color: #18217b;}
#Content #WContentWrapper #LargeContent #Message .good-luck {font-size: 1.8em; margin: 20px 50px 0px 0; color: #18217b;}
#Content #WContentWrapper #LargeContent #Message .come-back {width: 380px; padding: 0 60px; font-size: 1.4em; color: #18217b;}
#Content #WContentWrapper #LargeContent #Message p {text-align: center; margin-right: 50px; font-size: 1.2em; margin: 0 50px 20px 0;}
#Content #WContentWrapper #LargeContent #Message p.redirect{font-size: 1.2em; color: #18217b;margin-top:15px;}
#Content #WContentWrapper #LargeContent #GoBack {position: absolute; bottom: 1px; left: 0;}
#Content #WContentWrapper #LargeContent #Message #PrintCoupon {height: 52px; display: block; width: 159px; position: absolute; bottom: 0px; left: 180px;}
#Content #WContentWrapper #LargeContent #MiniLogo {position: absolute; bottom: 0; right: 0;}
/* PRIZE PICNICS */ #Picnics {margin-top:10px;}
#Picnics div.image{float:left;width:160px;margin:10px 10px 0 0;display:inline;}
#Picnics div.details{padding:10px 0 0 170px;}
#Picnics div.details h2{margin:0 0 5px;}
#Picnics div.details h3{margin:0 0 5px;}
/* PRIZE PICNICS VOTE FORM */ #LargeContent #addPicnicForm {padding-bottom:40px;}
#LargeContent .picnics-vote-form {padding: 50px 55px 0;}
#LargeContent #addPicnicForm div.input{margin:0 0 1em;}
#LargeContent #addPicnicForm div.input label{float:left;width:175px;}
#LargeContent #addPicnicForm div.radio input{vertical-align:middle;}
#LargeContent #addPicnicForm div.radio label{width:auto;float:none;margin:0 3px;}
#LargeContent #addPicnicForm div.submit input {position:absolute;bottom:21px;left:350px;display:block; padding-top:78px;border: none; background: url(../img/html/button-submit.gif) no-repeat; width: 131px; height: 78px}
#LargeContent #addPicnicForm .error-message {color: red; font-weight: bold;margin:5px 0;}
/* FRIENDS STYLING */ #Friendsof {}
#Friendsof li {float: left; width: 32%; margin: 20px 0 0; text-align: center;}
#Friendsof li#London {height: 110px;}
/* FOOTER STYLING */ #Footer {background: #e2e1d6; font-family: Georgia;}
#Footer #FooterNavigation {height: 22px; width: 681px; margin: 0 auto; padding: 0 0 0 0;}
#Footer #FooterNavigation li {float: left; font-size: 1.2em; margin: 4px 20px 0 0; display: inline;}
#Footer #FooterNavigation li a {text-decoration: none; color: #767675;}
#Footer #FooterNavigation li a:hover {text-decoration: underline;}
#Footer #FooterNavigation .friends {border-right: 2px solid #abaaa4; padding: 0 15px 1px 0;}
#Footer #FooterNavigation .flashpage {border-right: 2px solid #abaaa4; padding: 0 15px 1px 0;}
#Footer #FooterNavigation .privacy {border-right: 2px solid #abaaa4; padding: 0 15px 1px 0; margin: 4px 20px 0 0;}
#Footer #FooterNavigation .terms {border-right: 2px solid #abaaa4; padding: 0 15px 1px 0;}
#Copyright {width: 870px; margin: 10px auto 30px auto; font-size: 1.2em; color: #4e4e4e; font-family: Georgia;}
#WheresMyPackCode{background:url(/img/html/wheres-my-pack-code-bg.jpg) top left no-repeat;height:421px;width:481px;}
#WheresMyPackCode h1{text-indent:-3000px;margin:0;}
#WheresMyPackCode p{margin:325px 54px 0;font-size:1.2em;color:#18217b;}
#WheresMyPackCode #CloseLink{text-align:right;margin:12px 15px 0 0;}
#RetailerPromoCode{background:url(/img/html/retailer-promo-code-bg.jpg) top left no-repeat;height:421px;width:481px;}
#RetailerPromoCode h1{text-indent:-3000px;margin:0;}
#RetailerPromoCode p{margin:295px 54px 0;font-size:1.2em;color:#18217b;}
#RetailerPromoCode #CloseLink{text-align:right;margin:12px 15px 0 0;}
/* CLEAR FIXES */ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display:inline-block;}
.clearfix {display:block;}