﻿
/*************** Reset WOW setting *****************/   
a:focus,  select:focus, a img:focus, a img:active, img:active  {
    outline:none;
}

input:focus,textarea:focus
{
    outline:none;
}

/*************** Heading layout *****************/
.box-heading
{
    background-color: #f8f8f5;
    color: #00501f;
}
.box-heading a
{
    color: #00501f;
}
.view-options-container
{
    background-color: #f8f8f5;
}

/*************** Review order and confirm dotted *****************/
/*Border now appears on the top of each row*/
.totals .totals-summary td{
    border:none;
}
.trolley-items tbody td,.totals .totals-summary td 
{
    background: url("/Images/Shared/bg-dotted.cd.png") repeat-x scroll left bottom transparent;
    border-top: 1px transparent solid; 
}
.trolley-items tbody .review-trolley-group td
{
    border-bottom: 2px solid #eeefe9;
}
.review-trolley-items .trolley-items tbody tr{
    height: 84px;
}
.trolley-items tbody tr td {
    padding: 16px 0 0;
}
.trolley-items tbody tr td.item-image {
    padding: 16px 7px;
}
.trolley-items tbody tr td.subs {
    padding: 13px 0 0;
}
.trolley-items tbody .review-trolley-group td{
    padding: 0;
}
.trolley-items tbody tr.review-trolley-group {
    height: auto;
} 
.trolley-items th.help {
    width: 76px;
    text-align: center;
}
.trolley-items .item{
    width: 190px;
}
.trolley-items td.subs label {
    font-size: 10px;
    color: #00501F;
    margin-left: 5px;
    -webkit-margin-start:4px;
    width: 41px;
    display: inline-block;
    text-align: left;
}
.trolley-items td.subs {
    width: 60px;
}
.trolley-items tfoot .action-links {
    padding-bottom: 0px;
}
.trolley-items td.subs.bottom-col label {
    margin-left: 4px; 
    -webkit-margin-start:3px;
}
.trolley-items .subs.check-all-col {
    padding-left: 20px;
    text-align: center;
}
.trolley-items td.subs.check-all-col {
    text-align: center;
}
.trolley-items thead th.hint .handy-hint-outer {
    margin-left: 1px;
}
/* Target IE7 */
.trolley-items td.subs label {
    *margin-left: 4px;
}
.trolley-items td.subs.bottom-col label {
    *margin-left: 3px; 
}
.trolley-items td.subs {
    *text-align: center;
    *width: 80px;
}
.trolley-items tbody tr{
    *height: auto;
}
/*************** Review order packaging prefernece boxes *****************/
.coupon-box, .edrCard-box, .packaging-preference
{
    display: inline-block;
}
#review-order .lime-green-middle div.clear
{
    clear: none;
}
/*************** Review order grouping heading *****************/
/*On the review screen the products are sorted by department with a group heading separating the departments. This group heading does not need a border*/
.department-name
{
    background:none;
    background-color:transparent;
}

/*************** checkout exit button *****************/
.exit-button
{
    margin-left: 0;
}

/*************** Box layout (eg.Search panel) *****************/
.light-green-box-top
{
    background: url("/Images/Shared/bg-light-green-frame-top.cd.png") no-repeat #FFFFFF; 
}
.light-green-box-middle
{
    background: url("/Images/Shared/bg-light-green-frame-middle.cd.png") repeat-y  #FFFFFF; 
}
.light-green-box-middle a
{
    color: #00501f;
}
.light-green-box-bottom
{
    background: url("/Images/Shared/bg-light-green-frame-bottom.cd.png") no-repeat #FFFFFF;
    height: 5px; 
}


/*************** Schedule info layout *****************/

/*************** Schedule info layout *****************/
.schedule-reserve-select-table th
{
    background: #ebebe2;
}
.schedule-reserve-select-table thead tr 
{
     color: #39474F;
}
.schedule-reserve-select-table tbody td.selected
{
    background-color:  #f8f8f5;
}
.schedule-reserve-select-table tbody td.checked 
{
    background-color:  #f8f8f5;
}

.manage-delivery-address .selected
{
     background-color:  #f8f8f5;
}
.manage-address-list .selected
{
     background-color:  #f8f8f5; 
}

/*************** Loginbox layout *****************/






/*************** Popup  layout *****************/
/*************** width 690px  ******************/
.thin-dark-blue-box-top, .thin-light-green-box-top, .manage-onecards .light-green-box-top,
.account-details-personal-details .dark-blue-box-top, .login-extended-content .dark-blue-box-top,
.account-details-modify-password .light-green-box-top, .account-details-direct-debit .light-green-box-top,
#email-form .dark-blue-box-top
{
    background: url("/Images/Shared/bg-green-wide-frame-top.png") no-repeat #FFFFFF;
    height: 4px;
}
.thin-dark-blue-box-middle, .thin-light-green-box-middle,  .manage-onecards .light-green-box-middle,
.account-details-personal-details .dark-blue-box-middle, .login-extended-content .dark-blue-box-middle,
.account-details-modify-password .light-green-box-middle, .account-details-direct-debit .light-green-box-middle,
.advanced-settings .dark-blue-box-middle, #email-form .dark-blue-box-middle
{
     background: url("/Images/Shared/bg-green-wide-frame-middle.png") repeat-y #FFFFFF;
    padding-top: 2px;
}
.thin-dark-blue-box-bottom, .thin-light-green-box-bottom,  .manage-onecards .light-green-box-bottom,
.account-details-personal-details .dark-blue-box-bottom, .login-extended-content .dark-blue-box-bottom,
.account-details-modify-password .light-green-box-bottom, .account-details-direct-debit .light-green-box-bottom,
.advanced-settings .dark-blue-box-bottom, #email-form .dark-blue-box-bottom
{
     background: url("/Images/Shared/bg-green-wide-frame-bottom.png") no-repeat #FFFFFF; 
}
#register .register-checkbox-content-top, .advanced-settings .dark-blue-box-top
{
    background: url("/Images/Shared/bg-green-wide-frame-top.png") no-repeat #FFFFFF;
}
/*************** width 552px  ******************/
.manage-address-existing .light-green-box-top, 
.manage-delivery .thin-dark-blue-box-top, .manage-delivery .thin-light-green-box-top,
.manage-address .thin-dark-blue-box-top, .schedule-reserve-content .thin-dark-blue-box-top,
#giftcardpayment .light-green-box-top
{
    background: url("/Images/Shared/bg-light-green-frame-top.cd.png") no-repeat #FFFFFF;
    height: 4px;
}
.manage-address-existing  .light-green-box-middle,
.manage-delivery .thin-dark-blue-box-middle, .manage-delivery .thin-light-green-box-middle,
.manage-address .thin-dark-blue-box-middle, .schedule-reserve-content .thin-dark-blue-box-middle,
#giftcardpayment .light-green-box-middle
{
     background: url("/Images/Shared/bg-light-green-frame-middle.cd.png") repeat-y #FFFFFF;
    padding-top: 2px;
}
.manage-address-existing  .light-green-box-bottom, 
.manage-delivery .thin-dark-blue-box-bottom, .manage-delivery .thin-light-green-box-bottom,
.manage-address .thin-dark-blue-box-bottom, .schedule-reserve-content .thin-dark-blue-box-bottom,
#giftcardpayment .light-green-box-bottom
{
     background: url("/Images/Shared/bg-light-green-frame-bottom.cd.png") no-repeat #FFFFFF; 
}


/*************** Checkout layout *****************/
.coupon-box-middle .header, .edrCard-box-middle .header, .packaging-preference-middle .header
{
    background-color: transparent;
}
.trolley-items thead th
{
    background-color: #f8f8f5;
}
.coupon-box-middle .header span, .edrCard-box-middle .header span, .packaging-preference-middle .header span,
.trolley-items thead tr, .trolley-items .notes span, .trolley-items thead th a
{
    color: #00501f;
}
.coupon-box-top, .edrCard-box-top, .packaging-preference-top
{
     background: url("/Images/Checkout/ReviewOrder/bg-coupon-box-top.cd.png") no-repeat transparent;
}
.coupon-box-middle, .edrCard-box-middle, .packaging-preference-middle
{
      background: url("/Images/Checkout/ReviewOrder/bg-coupon-box-middle.cd.png") repeat-y transparent;
}
.coupon-box-bottom, .edrCard-box-bottom, .packaging-preference-bottom
{
      background: url("/Images/Checkout/ReviewOrder/bg-coupon-box-bottom.cd.png") no-repeat transparent;
}
.lime-green-top, .dark-blue-top
{
      background: url("/Images/Checkout/bg-lime-green-big-top.cd.png") no-repeat transparent;
}
.lime-green-middle
{
	background: transparent url("/Images/Checkout/bg-lime-green-big-middle.cd.png") repeat-y ;
}
.dark-blue-middle
{
	background: transparent url("/Images/Checkout/bg-lime-green-big-middle.cd.png") repeat-y top left;
}

.lime-green-bottom, .dark-blue-bottom
{
      background: url("/Images/Checkout/bg-lime-green-big-bottom.cd.png") no-repeat transparent;
}

/*************** Recipe details layout *****************/
#recipe-details .recipe-bottom-panel
{
    width: 552px;
    margin-top: 15px;
}
#recipe-details .recipe-bottom-panel-top
{
      background: url("/Images/Shared/bg-thin-light-green-frame-top.cd.png") no-repeat #FFFFFF; 
}
#recipe-details .recipe-bottom-panel-middle
{
      background: url("/Images/Shared/bg-light-green-thin-frame-middle.cd.png") repeat-y #FFFFFF;
      padding-top: 0px; 
}
#recipe-details .recipe-bottom-panel-bottom
{
      background: url("/Images/Shared/bg-light-green-thin-frame-bottom.cd.png") no-repeat #FFFFFF; 
}
#recipe-details .ingredients-table th
{
     background: #f8f8f5;
     color: #00501f;
}
#recipe-details .ingredients-table .subtitle
{
     color: #00501f;    
}

/*************** Search results layout *****************/
/*.dark-green-box-top
{
      background: url("/Images/Checkout/bg-lime-green-big-top.cd.png") no-repeat #FFFFFF;
      height: 4px;
      width: 734px;
}*/
.dark-green-box-middle /*, .search-content .light-green-box-middle*/
{
      /*background: url("/Images/Shared/bg-light-green-thin-frame-middle.cd.png") repeat-y #FFFFFF;
      padding-top: 0px; */
}
.dark-green-box-bottom /*, .search-content .light-green-box-bottom*/
{
      /*background: url("/Images/Shared/bg-light-green-thin-frame-bottom.cd.png") no-repeat #FFFFFF; */
}

.dark-green-box-top
{
    background: url("/Images/Shared/bg-light-green-long-frame-top.png") no-repeat #FFFFFF; 
    height: 4px;
}
.dark-green-box-middle
{
    background: url("/Images/Shared/bg-light-green-long-frame-middle.png") repeat-y  #FFFFFF;
    padding-top: 0px;
    overflow: hidden;
}

.dark-green-box-bottom
{
    background: url("/Images/Shared/bg-light-green-long-frame-bottom.png") no-repeat #FFFFFF;
    height: 5px; 
}

.search-content .quickfix-results
{
    padding: 1px 5px 0px 5px;
}
.search-content .quickfix-results h3
{
     margin: 0px -5px 0px 0px;
     padding-left: 15px;
     width:665px;
}



/************** Footer **************/
#footer-panel
{
    background: #fff;
}
#footer-panel .content { left:4px; width:939px; }
.footer-top
{
    width: 939px;
    height: 8px;
    background:url(/Images/Shared/bg-footer-frame-top.png) 0 0 no-repeat;
}
.footer-mid
{
    width: 939px;
    display:inline-block;
    padding: 10px 0 20px 10px;
    background:url(/Images/Shared/bg-footer-frame-middle.png) 0 0 repeat-y;
}
.footer-btm
{
    width: 939px;
    height: 8px;
    background:url(/Images/Shared/bg-footer-frame-bottom.png) 0 0 no-repeat;
}
#footer-panel div.content ul
{
    background: url("/Images/Footer/bg-footer-col-dotted.cd.jpg") no-repeat scroll right top transparent;
    border-right: none;
}
#footer-panel div.content ul.no-border
{
    background: none;
}

/************** Address lookup **************/
.address-auto-complete li .ui-state-hover
{
    background: #ebebe2;
    color: #39474F;
}
.ui-menu .ui-menu-item a.ui-state-hover {
	margin: 0px;
}
/************** Search from list **************/
#edit-search-list .notepad-container .notepad-top 
{
    background: url("/Images/SearchFromList/bg-notepad-top.cd.jpg") no-repeat #FFFFFF;
}
#edit-search-list .notepad-container .notepad-middle 
{
    background: url("/Images/SearchFromList/bg-notepad-middle.cd.jpg") repeat-y #FFFFFF;
}
#edit-search-list .notepad-container .notepad-bottom
{
    background: url("/Images/SearchFromList/bg-notepad-bottom.cd.jpg") no-repeat #FFFFFF;
}
#edit-search-list h1.header-text
{
    margin-bottom: 0;
}

/************** FAQ **************/
.formatted-block-text .expanded
{
    background: url("/Images/Shared/bg-faq-arrow.png") no-repeat scroll left top #F9F9F5;
    border-bottom: 1px dotted #9ca0a1;
    padding: 20px;
}
.formatted-block-text .expanded p 
{    
    font-size: 13px;
    line-height: 15px;
    margin-bottom: 10px;
}
.formatted-block-text .expanded p:last-child
{
    margin: 0;
}
/************** my account direct debit **************/
.account-details-status-message
{
    background-color: #ebebe2;
}
#popup-panel-frame .reset-header
{
    clear: both;
    width: 100px;
    display: block;
}
#popup-panel-frame span.state-message
{
    margin: 10px 5px 0 10px;
}
/************** manage onecard **************/
.manage-onecards .onecard-table th
{
    background: #f8f8f5;
}
/************** Register **************/

#register .field-work label, .register-content .field-mobile label
{
    margin-left: 6px;
    margin-right: 2px;
}
#register .phone .number 
{
    width: 50px;
}
#register .phone .number.input-validation-error,
#register .phone #HomePhoneNo.input-validation-error
{
	width:58px;
    margin-right:0;
}

:root #register .phone #MobilePhoneNo 
{
    width: 46px;
}
/************** Trolley panel **************/
#trolley-panel .top
{
	background: transparent url(../Images/Trolley/bg-trolley-top.cd.png) no-repeat left top;
}
#trolley-panel .middle
{
	background: transparent url(../Images/Trolley/bg-trolley-middle.cd.png) repeat-y left top;
}
#trolley-panel .bottom
{
	background: transparent url(../Images/Trolley/bg-trolley-bottom.cd.png) no-repeat left top;
}
/************** Product nutrition **************/
#product-details .ui-widget-content {
    top: -2px;
}
#product-details .limit-container {
    margin-left: 26px;
}
#product-details .ui-tabs-panel .tab-top-panel {
    background: url("../Images/Shared/bg-light-green-frame-top.cd.png") no-repeat scroll left top #FFFFFF;
    height: 4px;
    z-index: 1;
}
#product-details .ui-tabs-panel .tab-middle-panel {
    background: url("../Images/Shared/bg-light-green-frame-middle.cd.png") repeat-y scroll left top transparent;
    border: none;
    padding: 10px;
}
#product-details .ui-tabs-panel .tab-bottom-panel {
    background: url("../Images/Shared/bg-light-green-frame-bottom.cd.png") no-repeat scroll left top #FFFFFF;
    height: 4px
}
#product-details .ui-state-default {
    background: url("../Images/ProductDetails/tab-bg.cd-dn.png") no-repeat scroll left top transparent;
    border: none;
    width: 92px;
}
#product-details .ui-state-active {
    background: url("../Images/ProductDetails/tab-bg.cd.png") no-repeat scroll left top transparent;
    border: none;
    width: 92px;
    top: 1px;
}
#product-details .ui-state-active.right-side-tab {
    background: url("../Images/ProductDetails/tab-bg-remainder.cd.png") no-repeat scroll left top transparent;
    border: none;
    width: 92px;
}
#product-details .ui-state-active a, #product-details .ui-state-default a{
    font-size: 12px;
}
#product-details .panel-break {
    height: 2px;
    width: 527px;
}

#product-details .add-to-trolley-container .quantity input {
	font-family: Arial, Helvetica, sans-serif;
}
/****************************************************************
************************   All Browser hack codes   *************
*****************************************************************/
/* Please place these code in the bottom. Otherwise VS shows error. */
/* Target latest browser (IE9, FF, Chrome and Safari) */
#register .field-onecard label {
    width: 71px;
}
html>body #register .phone .number 
{
     width: 55px;/*IE8 and below*/
}
html>body #register .phone #MobilePhoneNo 
{
    width: 51px;/*IE8 and below*/
}
html>body #register .phone #HomePhoneNo.input-validation-error{
	width:55px;/*IE8 and below*/
}
:root #register .phone .number 
{
    width: 57px;
}
html>body .product-search-box .search-option
{
    padding-top: 0 \9;
    margin-top: -5px \9;
}
/* Target IE9 and IE10 */
@media all and (min-width:0) {
    :root #register .phone .number {
        width: 53px \0/;
    }
    #register .phone .number.input-validation-error,
    #register .phone #HomePhoneNo.input-validation-error{
	    width:55px \0/;
        margin-right:0;
    }
    html>body .product-search-box .search-option
    {
        margin-top: 0;
    }
}
/* Target Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .product-search-box .search-option  {
        padding-top: 0;
    }
}