/* ------------------------------------------------------------------
	Filename:        home.css
  Author:          AKQA
  Description:     Styles and layouts specific to Homepage
        
  Contents:
  - Section
        
  Sainsbury's colour palette:
	- Aubergine - #4e0011
	- Plum - #930031
	- Cherry - #c11933
	- Strawberry - #e23d3a
	- Orange - #f26334
	- Tangerine - #f57f33
	- Apricot - #fbac18
	- Lemon - #ffd100
	- Butter - #ffeb9a
	- Cream - #fdeec3
	        
  -------------------------------------------------------------------`
Headers */

h2,h3,h4,h5{text-indent:-50000em;} /*changed to no indent by robin*/

/* Homepage specific styles */
.page {
	margin-top:5px;
	background:url(/support_files/style_images/common/images/body/bg-main-top.gif) no-repeat top left;
}
div.home { clear:both;width:975px; }



/* ONLY ONE LARGE HERO PANEL */
.heroContent {padding:64px 0 0 20px;}
.homeOuterBig {
	border:solid #ccc; 
	border-width:1px 1px 0 1px;
}

div.section2PanelHeader {
	width: 975px;
	height: 4px;
	bottom: -4px;
	position: relative;
	background:url(/support_files/style_images/common/body/bg-main-top.gif) no-repeat top left;
}

/* TWO PANELS */
/* Left hero panel */
.homeLeft { float:left;width:600px; }

.homeLeft .homeOuter {
	padding:0;
	background:none;
	border:solid #ccc; 
	border-width:1px 1px 0 1px; }
	
.homeLeft .homeInner {
	padding:3px 3px 0 3px;
	/*background:transparent url(/support_files/style_images/homepage/images/body/bg-main-middle-hero-2.gif) repeat-y top left;*/ }
	
.homeLeft .homeFooter {
	height:4px;
	font-size:1px;
	background:transparent url(/support_files/style_images/home/body/bg-main-bottom-hero.gif) no-repeat; }

.homeLeft .homeInner .heroContent {padding:6px 0 0 20px;} 

/* Right promo pods */
.homeRight {width:365px;}

.homeRight .homeOuter {
	margin:0;
	padding:0;
	background:none; 
	border:0; }

.homeRight .homeInner {
	padding:0;
	background:none; }

.homeRight .homeFooter {
	height:4px; margin-bottom:1px;
	font-size:1px;
	background:transparent url(/support_files/style_images/home/body/bg-main-bottom-promo.gif) no-repeat; }
	
.homeRight .promoPodBorder {
	padding:3px 3px 0 3px;
	border:solid #ccc; 
	border-width:1px 1px 0 1px; }
	
.homeRight .promoTopPadding { padding-top:4px; } /*Not needed for 1st promo pod*/

.homeRight .promoPodInner {
	margin:0;
	padding:0;
	width:357px;
	height:105px;
	background:transparent url(/support_files/style_images/home/body/bg-promo-2.gif) repeat-x top left; 
	border:0; }

.homeRight .promoText { float:left;width:215px; }
.homeRight .promoImg { float:right;width:140px; }
.homeRight .promoText h3 { margin:22px 0 0 21px;height:15px;text-indent:0px; }
.homeRight .promoText p { margin:3px 0 0 21px; }
.homeRight .promoText p.homeLink {
	padding:0 0 4px 7px;
	background:url(/support_files/style_images/common/chevrons/right-full.gif) 0 4px no-repeat; 
}

.panelOuter { clear: both; margin: 0 0 0 0; zoom:1 }
.panelInner h3, .panelList h3 {height: 20px; float:left; color: #ffffff; padding: 5px 0 0 15px; background: transparent url(/support_files/style_images/common/header/panel-header-left.gif) no-repeat top left; text-indent:0; margin-left:0px;}
.panelInner .panelPromo {height: 20px; float:right; color: #fff; font-weight: bold; padding: 5px 20px 0 0; background: transparent url(/support_files/style_images/common/header/panel-header-right.gif) no-repeat top right;}
.panelInner ul, .panelList ul {clear: both; margin: 0; padding:0; list-style:none;}
.panelInner li {float:left; margin:0 padding:0; width: 162px; border: 1px solid #e7e6e6; border-style: none none solid none }
.panelInner li.first {border-left-style : solid; width: 164px;}

.panelInner .item { min-height: 200px; padding: 15px 14px 0 14px; background: transparent url(/support_files/style_images/common/backgrounds/promo-item-bg.gif) top left no-repeat;}
.panelInner .itemDesc {font-weight: bold; display: block; min-height: 40px; background:url(/support_files/style_images/common/chevrons/right-full.gif) 0 0.4em no-repeat;padding-left:7px;}
.panelInner .item img {display: block; margin-left: auto; margin-right: auto;}

.itemPrice {color: #c9384e; margin-top: 4px; text-align:right;line-height: normal;}
.itemPrice span {font-size: 1.4em; vertical-align:50%;}
.itemPrice .normal{ font-size: 2.8em; vertical-align: baseline;}
.itemWasPrice {color: #4e0011; font-weight: bold; text-align:right;line-height: normal;}
.itemWasPrice .normal {font-size: 1.0em; vertical-align: baseline;}
.itemWasPrice span {font-size: 0.9em; vertical-align:10%;}

.panelList {clear: both; float:none;margin:10px 0 15px 0; background: url(/support_files/style_images/common/header/panel-header-bg.gif) repeat-x;}
.panelList h3 {float:none; background:none; background: transparent url(/support_files/style_images/common/header/panel-list-spacer.gif) no-repeat top left;}
.panelList .first  h3 {background:none;}
.panelList .unordered_list {float:left; border-bottom: 1px solid #e7e6e6; background: transparent url(/support_files/style_images/common/header/panel-header-left-border.gif) no-repeat top left;}
.panelList ul {float:left; border-bottom: 1px solid #e7e6e6; background: transparent url(/support_files/style_images/common/header/panel-header-left-border.gif) no-repeat top left;}

.panelListShell {float:left; background: transparent url(/support_files/style_images/common/backgrounds/panel-list-bg.gif) 0 25px repeat-x;}

.panelList .list_item {float: left; margin:0 padding:0; width:243px;}
.panelList li {float: left; margin:0 padding:0; width:243px;}

.panelList li.last {width: 246px; background: transparent url(/support_files/style_images/common/header/panel-header-right.gif) no-repeat top right;}
.panelList .item {float:left; height: auto;}
.panelList .itemInfo {padding: 15px 15px 0 15px; float:left; width:115px;}
.panelList .itemInfo .btnRounded {margin-top: 8px;}
.panelList .first .itemInfo {padding: 15px 15px 0 15px; float:left; /*width:90px;*/ width:115px;}
.panelList .item a {display: block}
.panelList  .itemImage {float:right; margin: 3px 3px 0 0; width: auto;}

.panel {margin-top: 10px; margin-bottom: 10px; background: url(/support_files/style_images/home/body/bg-panel-top.gif) no-repeat 3px top ; padding-top: 1px; }
.panel div.p_Sides {  }

.panel h3 { margin: 0px 0 0 21px; padding-top: 21px; background-position: bottom left;}
.panel .item {float:left; /*height: 11.4em;*/ height: 125px; background-color: transparent; background-repeat: no-repeat; background-position: top left;}
.panel .homeLink  {margin: 11px 0 0 21px; width:150px;}

.subPanelHeader
{
	background: url(/support_files/style_images/home/body/bg-panel-top.gif) no-repeat 3px top ;
	height: 1px;
}

.panel {
	background: transparent url(/support_files/style_images/home/body/bg-panel-sides.gif) no-repeat left 3px;
}

.panel div.first {
	border-left: none;
}

.panel div.last {
	border-right: none;
}

.panel.panelx2 .panelFooter{
	width: 975px !important;
}

.panel .panelFooter
{
	height: 7px;
	background: url(/support_files/style_images/home/body/bg-panel-bottom.gif) no-repeat left top ;
	float: left;
	position: relative;
	width: 974px;
	margin-top: -6px;
	

}


.panelx2 {
	margin-bottom: 10px;
	/* height: 11.4em; */ height: 125px;
}
.panelx2 .item1 { width: 487px; background: url(/support_files/style_images/home/body/panel-duo-small-left.jpg) top right no-repeat; border-right: 1px solid #CCC;}
.panelx2 .item2  { width: 487px; background: url(/support_files/style_images/home/body/panel-duo-small-right.jpg) no-repeat -1px 0px;}
.panelx2 .item1 h3 { width:172px; height: 34px; margin: 0px 0 0 21px; background-image: url(/support_files/style_images/home/cms/h3-recipes-and-tips-wrapped.gif);}
.panelx2 .item2 h3 { width:134px; height: 32px; margin: 0px 0 0 21px; background-image: url(/support_files/style_images/home/cms/h3-see-tu-clothing.gif);}
.panelx2  .homeLink {width:200px;}




.panelx3 .item1 { width: 325px; background: url(/support_files/style_images/home/body/panel-triple-left.jpg) no-repeat top right; border-right: 1px solid #CCC;}
.panel .first div
{
background: transparent url('/support_files/style_images/home/body/tl_cornerstone.gif') top left no-repeat;
}

.panelx3 .item2 { width: 323px; background: url(/support_files/style_images/home/body/panel-triple-middle.jpg) no-repeat top right; border-right: 1px solid #CCC;}
.panelx3 .item3 { width: 324px; background: url(/support_files/style_images/home/body/panel-triple-right.jpg) no-repeat 193px 0px;}
.panel .last div
{
	background: transparent url('/support_files/style_images/home/body/tr_cornerstone.gif') top right no-repeat;
	
}
.panelx3 .item h3{ width:172px; height: 34px;}
.panelx3 .item1 h3 { background-image: url(/support_files/style_images/home/cms/h3-recipes-and-tips-small.gif);}
.panelx3 .item2 h3 { background-image: url(/support_files/style_images/home/cms/h3-see-tu-clothing-small.gif);}
.panelx3 .item3 h3 { background-image: url(/support_files/style_images/home/cms/h3-save-10-audio.gif);}
.panelx3 .homeLink {width:150px;}

.panelx4 {
	margin-bottom: 10px;
	/*height: 11.4em;*/ height: 125px;
}
.panelx4 .item1 { width: 245px; background: url(/support_files/style_images/home/body/panel-quad-1.jpg) top right no-repeat; border-right: 1px solid #CCC;}
.panelx4 .item2 { width: 242px; background: url(/support_files/style_images/home/body/panel-quad-2.jpg) top right no-repeat; border-right: 1px solid #CCC;}
.panelx4 .item3 { width: 242px; background: url(/support_files/style_images/home/body/panel-quad-3.jpg) top right no-repeat; border-right: 1px solid #CCC;}
.panelx4 .item4 { width: 242px; background: url(/support_files/style_images/home/body/panel-quad-4.jpg) 164px 0px no-repeat;}
.panelx4 .item h3{ width:172px; height: 34px;}
.panelx4 .item1 h3 { background-image: url(/support_files/style_images/home/cms/h3-recipes-and-tips-small.gif);}
.panelx4 .item2 h3 { background-image: url(/support_files/style_images/home/cms/h3-see-tu-clothing-small.gif);}
.panelx4 .item3 h3 { background-image: url(/support_files/style_images/home/cms/h3-save-10-audio.gif);}
.panelx4 .item4 h3 { background-image: url(/support_files/style_images/home/cms/h3-have-a-look-phone-small.gif);}
.panelx4 .homeLink {}











.panelHalfTop {width: 357px; /*height: 19.35em;*/ margin-left: 4px; background: transparent url(/support_files/style_images/home/cms/hm-half-hero-buy-one.jpg) no-repeat top left;}
.panelHalfBottom {width: 357px; /*height: 9.7em;*/ margin: 3px 0 0 4px; background: transparent url(/support_files/style_images/home/cms/hm-half-taste-festival.jpg) no-repeat top left;}
.panelSingleTop {width: 357px; /*height: 29.45em;*/ height: 324px; margin-left: 4px; background: transparent url(/support_files/style_images/home/cms/hm-hero-pet-insurance.jpg) no-repeat top left;}
.panelBorder {border-top:1px solid #e7e6e6;}
.panelHalfTop div {padding:113px 0 0 22px; width:160px;}
.panelHalfBottom div {padding: 45px 0 0 22px; }

.panelSingle {width: 967px; margin-left: 2px; margin-right: 2px; background: #ffffff url(/support_files/style_images/home/cms/hm-panel-full-recipes.jpg) no-repeat bottom right;}
.panelSingle img {margin: 4px 0;}
.panelSingle h3 {width: 250px; height: 14px; padding: 21px 0 0 21px; background: transparent url(/support_files/style_images/home/cms/h3-recipes-and-tips.gif) no-repeat bottom right;}
.panelSingle .homeLink {margin: 21px 0 0 21px; width:220px;}

.btnPlain { margin-top:10px;padding:3px 12px }

/* -------------------------------------------------------------------
  Images to be Content Managed */
h2.getYourSpringGreens {
	background:url(/support_files/style_images/home/cms/hdr_getyourspringgreens.gif) no-repeat;
	height:38px;	
	margin:0 0 0 18px;
}
.heroGraphicBig h2.getYourSpringGreens {
	margin:0;
}
.heroGraphicBig {background:url(/support_files/style_images/home/cms/img-hero1.jpg) no-repeat bottom right;height:324px;width:967px;margin-left:4px;}
.heroGraphicSm {background:url(/support_files/style_images/home/cms/img-hero-medium.jpg) no-repeat bottom right;height:27.6em;width:592px;}


/* Mels Styles to use images only for Hero 3 & 4 */

/* Start: Main Hero Image */
.homeLeft  .heroMainTopBorder { 
	height:4px;
	background:transparent url(/support_files/style_images/home/body/bg-hero-top-border.gif) top left no-repeat; 
}
.homeLeft  .heroMainBottomBorder { 
	height:3px; margin-bottom:10px;
	background:transparent url(/support_files/style_images/home/body/bg-hero-bottom-border.gif) bottom left no-repeat; 
}

/* Start: Promo Right hand images  */
.homeRight  .promoTopBorder { 
	height:4px;
	background:transparent url(/support_files/style_images/home/body/bg-promo-top-border.gif) top left no-repeat; 
}
.homeRight  .promoBottomBorder { 
	height:3px; margin-bottom:10px;
	background:transparent url(/support_files/style_images/home/body/bg-promo-bottom-border.gif) bottom left no-repeat; 
}
.homeLeft  .heroSideBorder, .homeRight  .promoSideBorder { 
	padding-left:3px; padding-right:3px;
	border-left:1px solid #cccccc; border-right:1px solid #cccccc;
}
.homeRight .promoDivider { 
	height:3px;
	border-left:1px solid #cccccc; border-right:1px solid #cccccc;
}

.utility {
padding:0 20px 0px 13px;
}