﻿/* == Main Structure
----------------------------------------------------------------------------------------------------------------------*/
#wrap { width: 995px; text-align: left; margin: 0 auto; zoom: 1; position: relative; }
#wrap:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
#wrap #head { float: left; width: 995px; height: 149px; top: 50px; }
#wrap #nav { float: left; width: 995px; margin-top: 5px; }
#wrap #mainContent { float: left; width: 995px; padding: 1px 0 0 0; }
#wrap #foot { float: left; width: 995px; background: #59666D; margin-top: 10px; }
#advertskin17 { background: url(/_img/advertskin-morrisons.jpg) no-repeat top center; }

/* == Header Contents
----------------------------------------------------------------------------------------------------------------------*/
#wrap #head .siteLogo { float: left; margin: 23px 0 0 25px; display: inline; }

#wrap #head ul.siteTools { margin: 25px 10px 0 0; float: right; list-style: none; list-style-image: none; display: inline; }
#wrap #head ul.siteTools li { float: left; margin: 0; background: url(/__style/structure/images/dot-divide.gif) no-repeat center right; padding: 0 10px 0 7px; }
#wrap #head ul.siteTools li.last { background: none; }
#wrap #head ul.siteTools li a { color: #fff; font-weight: bold; }

#wrap #head .headContact { float: right; clear: right; color: #231F20; margin: 20px 10px 7px 0; display: inline; text-align: right; line-height: 1.8em; width: 480px; }
#wrap #head .headContact span { text-transform: uppercase; font-weight: bold; }
#wrap #head .headContact span.divide { padding: 0 10px; }
#wrap #head .headContact a { color: #231F20; font-weight: bold; text-transform: uppercase; font-size: 90%; }

#wrap #head .siteSearch { float: right; clear: right; width: 193px; margin: 0 10px 0 0; display: inline; }
#wrap #head .siteSearch .searchText { float: left; width: 160px; height: 20px; padding: 5px 0 0 5px; border: 0; background: url(/__style/structure/images/site-search-input.gif) no-repeat top left; color: #555; font-size: 100%; font-family: Arial; margin: 0; }
#wrap #head .siteSearch .searchBtn { float: left; width: 28px; height: 25px; border: 0; background: url(/__style/structure/images/site-search-btn.gif) no-repeat top left; margin: 0; padding: 0; }

/* == Navigation
----------------------------------------------------------------------------------------------------------------------*/
#wrap #nav ul.priNav { float: left; width: 995px; margin: 0; list-style: none; list-style-image: none; background: url(/__style/structure/images/prinav-bg.gif) repeat-x top left; }
#wrap #nav ul.priNav li { float: left; margin: 0; padding: 0 1px 0 0; background: url(/__style/structure/images/prinav-divide.gif) no-repeat top right; border-bottom: solid 2px #CFCFCF; }

#wrap #nav ul.priNav li a { float: left; margin: 0; height: 42px; line-height: 42px; background: url('/__style/structure/images/prinav-item-bg.gif') repeat-x top left; padding: 0 13px; text-transform: uppercase; color: #fff; font-weight: bold; }
/* note: class is changed for specific nav items via jQuery in __master/frontend.Master */
#wrap #nav ul.priNav li a.blue { background-image: url('/__style/structure/images/prinav-item-blue-bg.gif'); }
#wrap #nav ul.priNav li a.green { background-image: url('/__style/structure/images/prinav-item-green-bg.gif'); }
#wrap #nav ul.priNav li a:hover { background-position: 0 -84px; text-decoration: none; }

#wrap #nav ul.priNav li a.on,
#wrap #nav ul.priNav li a:hover { background-position: 0 -42px; color: #AE0000; }

#wrap #nav ul.priNav li.last { padding: 0; background: none; }
#wrap #nav ul.priNav li.navRss { float: right; padding: 0; background: none; }
#wrap #nav ul.priNav li.navRss a { background: url(/__style/structure/images/prinav-rss.gif) no-repeat top left; padding: 0; }
#wrap #nav ul.priNav li.navRss a:hover { background-position: 0 -42px; }

#wrap #nav ul.subNav { float: left; width: 979px; margin: 0; padding: 10px 6px; list-style: none; list-style-image: none; border: solid 2px #DBDBDB; border-width: 0 2px 2px 2px; }
#wrap #nav ul.subNav li { float: left; margin: 0; padding: 0 9px 0 7px; background: url(/__style/structure/images/subnav-divide.gif) no-repeat center right; }
#wrap #nav ul.subNav li a { color: #666; font-weight: bold; }
#wrap #nav ul.subNav li.last { background: none; padding-right: 0; }

#wrap #nav #subNav3 ul { float: left; width: 979px; margin: 0; padding: 10px 6px; list-style: none; list-style-image: none; border: solid 2px #DBDBDB; border-width: 0 2px 2px 2px; }
#wrap #nav #subNav3 ul li { float: left; margin: 0; padding: 0 9px 0 7px; background: url(/__style/structure/images/subnav-divide.gif) no-repeat center right; }
#wrap #nav #subNav3 ul li a { color: #666; font-weight: normal; }
#wrap #nav #subNav3 ul li.last { background: none; padding-right: 0; }


/* == Breadcrumb
----------------------------------------------------------------------------------------------------------------------*/
.weatherLink { float: right; margin-bottom: 10px; }
.weatherLink p { margin: 0; text-transform: uppercase; font-size: 85%; letter-spacing: 0.5px; }

/* == Breadcrumb
----------------------------------------------------------------------------------------------------------------------*/
ul.crumb { margin: 0 0 10px 15px; list-style: none; list-style-image: none; text-transform: uppercase; font-size: 85%; color: #ae0000; }
ul.crumb li { display: inline; }
ul.crumb li.label { color: #777; }

/* == Banner Ads
----------------------------------------------------------------------------------------------------------------------*/
#leadBanners { float: left; width: 972px; padding: 16px 8px 0 15px; margin-bottom: 0px; }
#leadBanners #leaderboard { float: left; }

/* == Homepage/Section Template
----------------------------------------------------------------------------------------------------------------------*/
#tempOne { float: left; width: 995px; }
#tempOne .mainZones { float: left; width: 858px; }
#tempOne .zoneOne { float: left; width: 858px; }
#tempOne .zoneTwo { float: left; width: 338px; margin-right: 10px; }
#tempOne .zoneThree { float: left; width: 320px; }
#tempOne .zoneFour { float: right; width: 160px; margin-right: 10px; }
#tempOne .zoneFive { float: right; width: 127px; }
#tempOne .zoneSix { float: left; }

/* Below used to hide excess margin when 4 promos in a row */
#tempOne .zoneSix { overflow: hidden; }

/* == Global A - template5
----------------------------------------------------------------------------------------------------------------------*/
#globalA { float: left; width: 995px; }
#globalA .zoneOne { float: left; width: 818px; }
#globalA .zoneTwo { float: right; width: 160px; }

/* == Global B - template6
----------------------------------------------------------------------------------------------------------------------*/
#globalB { float: left; width: 995px; }
#globalB .zoneOne { float: left; width: 995px; }

/* == Global C - template7
----------------------------------------------------------------------------------------------------------------------*/
#globalC { float: left; width: 995px; }
#globalC .zoneOne { float: left; width: 818px; }
#globalC .zoneTwo { float: right; width: 160px; }

/* == Global D - template8
----------------------------------------------------------------------------------------------------------------------*/
#globalD { float: left; width: 995px; }
#globalD .zoneOne { float: left; width: 490px; }
#globalD .zoneTwo { float: left; width: 320px; margin: 0 10px; display: inline; }
#globalD .zoneThree { float: right; width: 160px; }

/* == Global E - template9
----------------------------------------------------------------------------------------------------------------------*/
#globalE { float: left; width: 995px; }
#globalE .mainZones { float: left; width: 818px; }
#globalE .zoneOne { float: left; width: 818px; }
#globalE .zoneTwo { float: left; width: 404px; }
#globalE .zoneThree { float: right; width: 404px; }
#globalE .zoneFour { float: right; width: 160px; margin-right: 10px; }

/* == Whats on - whatson
----------------------------------------------------------------------------------------------------------------------*/
#whatsOn { float: left; width: 995px; }
#whatsOn .mainZones { float: left; width: 818px; }
#whatsOn .zoneOne { float: left; width: 818px; }
#whatsOn .zoneTwo { float: left; width: 624px; }
#whatsOn .zoneThree { float: right; width: 184px; }
#whatsOn .zoneFour { float: right; width: 160px; margin-right: 10px; }

/* == Footer Content
----------------------------------------------------------------------------------------------------------------------*/
#foot #footSocial { float: left; width: 965px; padding: 10px 15px; border-top: solid 2px #363D41; background: #606466 url(/__style/structure/images/foot-social-gradient.gif) repeat-x bottom left; }
#foot #footSocial .bookLinks { margin: 0; list-style: none; list-style-image: none; float: left; }
#foot #footSocial .bookLinks li { display: inline; margin: 0 5px 0 0; }
#foot #footSocial .bookLinks li a:hover img { -moz-opacity: .70; filter: alpha(opacity=70); opacity: .70; }
#foot #footSocial .bookLinks li.label { text-transform: uppercase; color: #fff; font-weight: bold; font-size: 90%; }
#foot #footSocial .copyright { float: right; margin: 0; text-transform: uppercase; color: #fff; font-weight: bold; font-size: 90%; }

#foot #footNav { float: left; width: 975px; padding: 15px 10px; border-top: solid 2px #606D75; background: url(/__style/structure/images/foot-nav-gradient.gif) repeat-x top left; }
#foot #footNav ul { margin: 0; padding: 0 5px; list-style: none; list-style-image: none; float: left; width: 98px; }
#foot #footNav ul li { margin: 0 0 3px 0; }
#foot #footNav ul li a { color: #ddd; font-size: 90%; }
#foot #footNav ul li.lead a { text-transform: uppercase; font-weight: bold; font-size: 100%; color: #fff; }

#foot #footTools { float: left; width: 995px; background: #828A8F; padding: 12px 0; }
#foot #footTools ul { margin: 0; list-style: none; list-style-image: none; text-align: center; }
#foot #footTools ul li { display: inline; }
#foot #footTools ul li a { color: #fff; }
#foot #footTools ul li span { color: #ADADAD; padding: 0 5px 0 10px; }

.pageWrapLeft { position: absolute; top: 0; left: -200px; }
.pageWrapRight { position: absolute; top: 0; right: -200px; }