/*TODO: 5 empty lines between sections? */




/* Our custom CSS Normalisation ############################################################################# */
a {
    color               : #006633;
    text-decoration     : none;
    transition          : color 0.2s ease;
    }
.theme-orange a {
    color               : #c62;
    }
a:hover {
    color               : #e69abd;
    text-decoration     : none;
    }
.theme-orange a:hover {
    color               : #db4;
    }
/* remove border around linked images in IE - no need for the ancient border="0" anymore */
a img {
    border-width        : 0;
    }
body {
    background-color    : #fff;
    color               : #333;
    font-family         : Tahoma, Helvetica, Geneva, Arial, sans-serif;
    font-size           : 13px;
    margin              : 0px;
    }
h1,
h2,
h3,
h4,
h5 {
    color               : #006633;
    font-weight         : normal;
    line-height         : 1.4;
    margin              : 0em 0em 0.5em 0em;
    padding             : 0px;
    }
.theme-orange h1,
.theme-orange h2,
.theme-orange h3,
.theme-orange h4,
.theme-orange h5 {
    color               : #e84;
    }
h1 {
    font-size           : 1.8em;
    }
h2 {
    font-size           : 1.6em;
    }
h3 {
    font-size           : 1.4em;
    }
h4 {
    font-size           : 1.2em;
    }
/*TODO: the default should be baseline.
    But then all the little icons look too high.
    Maybe changing the body line-height to unitless 1.4 will help. */
/* max-width should make sure the replaced content doesn't overflow the parent
    like it happens sometimes in RHC or mobile product_info */
/*TODO: fix https://www.primrose.co.uk/-c-318_1376.html
    - get rid of the wrapping table in RHC for screening_customer_photos_thumbnails_link.png
    - it's causing a horizontal scrollbar */
img {
  /*TODO: this is a good rule, but requires work on multiple places,
    e.g. it collapses <td width="25"><img> and we have no separators for columns;
    on hold for now */
    /* max-width           : 100%; */
    vertical-align      : bottom;
    }





/* Helper / Utility classes ################################################################################# */
.clearElements {
    clear               : both;
    }
/* clearing floats without additional markup (no need for <div style="clear:both"></div> or similar)
 * http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content             : " ";
    display             : table;
    }
.clearfix:after {
    clear               : both;
    }
.clearLeft {
    clear               : left;
    }
.clearRight {
    clear               : right;
    }
.floatLeft {
    float               : left;
    }
.floatRight {
    float               : right;
    }
/*TODO: I'm not too thrilled about this one. We should discuss what goes in here and why is it useful.
    Definitely text and background colours should go here. I would like .ellipsis as we use that pretty often.
    Paddings and margins are relatively common, too. But around 4 fixed lengths should be enough.
    S, M, L, XL maybe. I would probably rename this to .ptL for brevity.
    Alignment helpers make sense i guess. Maybe some responsive classes, too?
    Some examples:
        http://www.sitepoint.com/using-helper-classes-dry-scale-css/
        http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp*/
.marginBottom-10 {
    margin-bottom       : 10px;
    }
.marginLeft-15 {
    margin-left         : 15px;
    }
.paddingTopFifteen {
    padding-top         : 15px;
    }
.text_vmiddle {
    vertical-align      : middle;
    }
.text_vtop {
    vertical-align      : top;
    }
.handwritten {
    font-family         : "Handlee", Arial, Helvetica, Tahoma, sans-serif;
    }



/* Shared styles among stores ############################################################################### */
/* should be used as background of block headers */
/*TODO: i think this qualifies as helper class, if we rename this to .block-header--green.
    Should we use BEM? Also, maybe it should define text colour as well? */
.navigationBackground {
    background-color    : #264;
    background-image    : -moz-linear-gradient( top, #385 0%, #153 100% );
    background-image    : -webkit-linear-gradient( top, #385 0%, #153 100% );
    background-image    : linear-gradient( to bottom, #385 0%, #153 100% );
    }
.theme-orange .navigationBackground {
    background-color    : #eb6;
    background-image    : linear-gradient( to bottom, #e84 0%, #c62 100% );

    }
.subnavBackground {
    background-color    : #eee; /* fallback */
    background-image    : -webkit-linear-gradient( top, #fff 20%, #ddd 80% ); /* Android 4.3-, Safari 6.1- */
    background-image    : linear-gradient( to bottom, #fff 20%, #ddd 80% ); /* W3C */
    }
.warrantyBadge {
    left                : 140px;
    position            : absolute;
    top                 : 40px;
    }

/* Internal Customer Service box - also "Reset Session" button */
.cs_box {
    background          : repeating-linear-gradient(45deg, #ddd, #ddd 10px, #eee 10px, #eee 20px);
    border              : 1px solid #999;
    color               : #333;
    display             : inline-block;
    margin              : 1em 0px;
    padding             : 1em;
    position            : relative;
    }
.cs_box > .cs_box_help {
    border-bottom       : 1em solid transparent;
    border-right        : 1em solid orange;
    cursor              : help;
    height              : 0px;
    position            : absolute;
    right               : 0px;
    top                 : 0px;
    width               : 0px;
    }
.cs_box > .cs_box_help > .cs_box_help_pop {
    background-color    : rgba( 0, 0, 0, 0.8 );
    box-shadow          : 0px 1px 3px rgba( 0, 0, 0, 0.2 );
    color               : #fff;
    display             : none;
    margin-bottom       : 10px;
    position            : absolute;
    left                : 1em;
    padding             : 0.3em;
    text-align          : center;
    top                 : 0px;
    width               : 150px;
    }
.cs_box > .cs_box_help > .cs_box_help_pop > hr {
    border-color        : rgba( 255, 255, 255, 0.5 );
    border-style        : dotted;
    border-width        : 1px 0px 0px 0px;
    }
.cs_box > .cs_box_help:hover > .cs_box_help_pop {
    display             : block;
    }




/* Site Header ############################################################################################## */
#siteHeader {
    min-width           : 990px;
    position            : relative;
    }

#siteHeader .rowBackground {
    background-color    : #fff;
    background-image    : url('/images/prim_header_bg_sprite.png?_=20160322');
    background-repeat   : no-repeat;
    background-position : right 0px;
	min-height          : 56px;
    }
.theme-orange #siteHeader .rowBackground {
    background-image    : none;
    }
/* #siteHeader .rowBackground .iconsAndContact */
#HeaderTopRight {
    float               : right;
    position            : relative;
    }
#HeaderTopRight #HeaderTopRight_contact {
    float               : right;
    margin              : 0px 0px 0px 5px;
    position            : relative;
    }
#HeaderTopRight #HeaderTopRight_contact .top_mini_navlink {
    color               : #363636;
    display             : inline-block;
    font-size           : 0.9em;
    margin-left         : 4px;
    }
#HeaderTopRight #HeaderTopRight_contact #header_phone_number {
    color               : #063;
    display             : block;
    font-size           : 25px;
    margin-top          : 6px;
    text-align          : right;
    white-space         : nowrap;
    }
.theme-orange #HeaderTopRight #HeaderTopRight_contact #header_phone_number {
    color               : #e84;
    }

#HeaderTopRight #HeaderTopRight_icons {
    float               : left;
    position            : relative;
    width               : 200px;
    }
#HeaderTopRight #review_count_header {
    background-position : 0px -152px;
    display             : block;
    float               : left;
    height              : 23px;
    position            : relative;
    width               : 114px;
    }
#HeaderTopRight #review_count_header span {
    color               : #4e5665;
    overflow            : hidden;
    position            : absolute;
    right               : 7px;
    text-align          : center;
    top                 : 3px;
    width               : 29px;
    font-size           : 13px;
    }
#HeaderTopRight #facebook_header {
    float               : right;
    width               : 84px;
    }
#HeaderTopRight .amazon_checkout_header {
    background-position : -124px -150px;
    cursor              : pointer;
    display             : block;
    float               : left;
    height              : 27px;
    width               : 44px;
    }
#HeaderTopRight #amazon_checkout_header_1 {
    background-position : -124px -150px;
    }
#HeaderTopRight #amazon_checkout_header_8 {
    background-position : -415px -150px;
    }
#HeaderTopRight #paypal_checkout_header {
    background-position : -173px -148px;
    display             : block;
    float               : left;
    height              : 27px;
    margin              : 0 6px 0 6px;
    width               : 55px;
    }
#HeaderTopRight #creditcard_checkout_header {
    background-position : -232px -148px;
    display             : block;
    float               : left;
    height              : 27px;
    width               : 88px;
    }
#HeaderTopRight .customerServicesContainer {
    color               : #333;
    font-size           : 10px;
    text-align          : right;
    }
#HeaderTopRight .customerServicesContainer .cs_number {
    color               : #006633;
    font-size           : 22px;
    padding-left        : 4px;
    padding-right       : 4px;
    }
/*TODO: universal selector is bad for performance */
#HeaderTopRight .chatlive,
#HeaderTopRight .chatlive * {
    color               : #e69abd;
    font-size           : 14px;
    }
/* #siteHeader .rowBackground .iconsAndContact - My Primrose Account Links and Menu */
#myacc-dropdown {
    float               : left;
    z-index             : 2;
    }
#myacc-dropdown ul.hover,
.file_menu li {
    list-style          : none;
    margin              : 0;
    padding             : 0;
    }
.file_menu {
    border              : 1px solid #CCCCCC;
    display             : none;
    padding             : 0px;
    width               : 180px;
    z-index             : 100;
    }
.file_menu li {
    background-color    : #FFFFFF;
    padding             : 0px;
    }
.file_menu li:last-child a {
    border-bottom       : none;
    }
.file_menu li a {
    border-bottom       : 1px solid #CCCCCC;
    display             : block;
    margin              : 0 5px;
    padding             : 10px 5px;
    text-decoration     : none;
    }
#myacc-dropdown .hoverli {
    position            : relative;
    }
.file_menu {
    left                : -10px;
    position            : absolute;
    top                 : 100%;
    }
#myacc-dropdown .hover ul {
    display             : none;
    }
#myacc-dropdown .hover li:hover > ul {
    display             : block;
    }
#myacc-dropdown .hover ul.parent_hover {
    display             : block;
    }
/* #siteHeader .rowBackground .logoLink */
#siteHeader .rowBackground .logoLink {
    height              : 150px;
    left                : 15px;
    position            : absolute;
    top                 : 10px;
    width               : 120px;
    text-align          : center;
    z-index             : 10;
    }
#siteHeader .rowBackground .logoLink img {
    height              : auto;
    width               : 100%;
    }
.theme-orange #siteHeader .rowBackground .logoLink {
    left                : 0px;
    top                 : 30px;
    width               : 160px;
    }

.theme-orange #siteHeader .rowBackground .logoLink img {
    height              : auto;
    width               : 100%;
    }
#siteHeader .rowBackground .logoLink span {
    white-space         : nowrap
    }
.theme-orange #siteHeader .rowBackground .logoLink span {
    color               : #c62;
    }

/* #siteHeader .rowBackground .bannerWrap */
#siteHeader .rowBackground .bannerWrap {
    padding-left        : 180px;
    overflow            : hidden;
    }
#siteHeader .rowBackground .bannerWrap > a {
    display             : inline-block;
    vertical-align      : middle;
    }
#siteHeader .rowBackground .bannerWrap > a:first-child {
    margin-right        : 50px;
    }
/* #siteHeader .rowSearch */
#siteHeader .rowSearch {
    height              : 32px;
    }
/*TODO: this could have been just overflow: auto and fill the rest of the space.
    Then set some max width on the form, so it doesn't get 1000px wide */
#siteHeader .rowSearch .searchFieldWrap {
    -webkit-box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    box-sizing          : border-box;
    float               : left;
    padding-left        : 180px;
    width               : 50%; /* any more will probably cause issues on ipad landscape for IT */
    }
#siteHeader .rowSearch #headingTopBarNavLinks {
    float               : right;
    height              : 24px;
    overflow            : hidden;
    padding-top         : 2px;
    text-align          : right;
    width               : auto;
    }
#siteHeader .rowSearch #headingTopBarNavLinks a {
    border-left         : 1px solid #3E9167;
    color               : #fff;
    display             : inline-block;
    padding             : 5px 8px;
    }
#siteHeader .rowSearch #headingTopBarNavLinks a:first-of-type {
    border-left         : 0px;
    }





#review_count_header,
.amazon_checkout_header,
#paypal_checkout_header,
#creditcard_checkout_header {
    background-image    : url('/images/prim_header_bg_sprite.png?_=20160322');
    background-repeat   : no-repeat;
    }

#view_basket_container {
    display             : block;
    float               : right;
    margin              : 1px 0 0;
    padding-left        : 10px;
    }
#view_basket {
    border-radius       : 4px;
    overflow            : hidden;
    position            : relative;
    }
#view_basket {
    display             : inline-block;
    height              : 17px;
    padding             : 5px 35px 5px 15px;
    position            : relative;
    text-align          : center;
    z-index             : 1;
    }
#view_basket img {
    border              : none;
    position            : absolute;
    right               : 5px;
    top                 : 4px;
    }
#basket_count {
    color               : #005329;
    font-size           : 0.8em;
    position            : absolute;
    right               : 8px;
    text-align          : center;
    text-align          : center;
    top                 : 2px;
    width               : 18px;
    z-index             : 10;
    }
@media only screen and (max-width:767px) {
    #view_basket_container {
      padding           : 0 2px;
      }
    #view_basket {
      background        : #E8A0C1 url('/images/mobile/mob_elements_sprite.png') -176px -58px no-repeat!important;
      box-shadow        : none;
      height            : 17px;
      padding           : 5px;
      width             : 30px;
      }
    #view_basket .basketText,
    #basket_count,
    #view_basket img {
      display           : none;
      }
}
#headingTopTabsContainer {
    margin              : 0;
    padding             : 0px;
    position            : relative;
    }
.subNav {
    padding-left        : 180px !important;
    }


#breadcrumb_container {
    line-height         : 25px;
    margin-bottom       : 1em;
    padding-left        : 10px;
    }
#breadcrumb_container a.back_to {
    display             : inline;
    float               : left;
    line-height         : 25px;
    margin              : 0 3px 0 0;
    padding             : 0 5px 0 5px;
    }
#breadcrumb_container a.back_to_subtle {
    border-right        : 4px double #ccc;
    padding-right       : 10px;
    }
#breadcrumb_container #crumbs {
    display             : block;
    list-style          : none;
    margin              : 0;
    padding             : 0px 10px 0 0;
    }
#breadcrumb_container #crumbs li {
    display             : inline-block;
    font-weight         : bold;
    padding-left        : .75em;
    }
#breadcrumb_container #crumbs li a,
#breadcrumb_container #crumbs li span {
    color               : #777;
    background          : url(images/breadcrumbs.gif) no-repeat right center;
    display             : block;
    font-weight         : normal;
    padding             : 0 15px 0 0;
    text-decoration     : none;
    }
#breadcrumb_container #crumbs li a:hover,
#breadcrumb_container #crumbs li a:focus {
    color               : #e69abd;
    }
#breadcrumb_container #crumbs li a img.home_button {
    padding             : 4px 0 4px 5px;
    }
#breadcrumb_container #crumbs li .crumbs_current {
    background          : none;
    font-weight         : bold;
    }
@media( max-width: 767px ) {
    #breadcrumb_container {
        display             : none;
        }
    }
/*TODO: didn't have w3c - maybe unused? */
.infoButton {
    background          : linear-gradient(to bottom, #359768 0%, #0f462b 100%);
    background-color    : #39a46f;
    border              : 1px solid #008341;
    border-radius       : 4px 4px;
    color               : #e4e4e4;
    cursor              : pointer;
    display             : inline-block;
    padding             : 5px 15px;
    text-shadow         : 1px 1px 2px #333333;
    vertical-align      : bottom;
    }
.infoButton:focus,
.infoButton:hover {
    background          : #e69abd;
    background          : -webkit-linear-gradient(top, #f7c0d9 0%, #e69abd 100%);
    background          : linear-gradient(to bottom, #f7c0d9 0%, #e69abd 100%);
    border              : 1px solid #999999;
    color               : #212121;
    text-shadow         : 1px 1px 2px #eeeeee;
    }
.theme-orange .infoButton {
    background-image    : linear-gradient( to bottom, #ed6, #db4 );
    color               : #000;
    text-shadow         : 1px 1px 2px #eeeeee;
    }
.theme-orange .infoButton:focus,
.theme-orange .infoButton:hover {
    background-image    : linear-gradient( to bottom, #ed6, #ed6 );
    }
a.infoButton {
    font-weight         : normal;
    }
/*TODO: didn't have w3c - maybe unused? */
.infoButtonPLC {
    background          : linear-gradient(to bottom, #0f462b, #359768);
    background-color    : #39a46f;
    border              : 1px solid #008341;
    border-radius       : 4px 4px;
    color               : black;
    cursor              : pointer;
    display             : inline-block;
    padding             : 5px 15px;
    text-shadow         : 1px 1px 2px #333333;
    vertical-align      : bottom;
    }
.infoButtonPLC:hover,
span.infoButtonPLC:hover,
a.infoButtonPLC:hover {
    color               : #e69abd;
    }
.infoButtonPLC a {
    color               : #e4e4e4;
    }
.infoButtonPLC a:hover {
    color               : #e69abd;
    }
.infoButtonDisabled {
    background          : rgb(207, 207, 207);
    background          : -webkit-linear-gradient(top, rgba(207, 207, 207, 1) 0%, rgba(163, 163, 163, 1) 100%);
    background          : linear-gradient(to bottom, rgba(207, 207, 207, 1) 0%, rgba(163, 163, 163, 1) 100%);
    border              : 1px solid #A3A3A3;
    border-radius       : 4px 4px;
    box-shadow          : 1px 1px 2px #a3a3a3;
    color               : #212121;
    cursor              : default;
    display             : inline-block;
    padding             : 5px 15px;
    text-shadow         : 1px 1px 2px #EEEEEE;
    vertical-align      : bottom;
    }
.infoButtonDisabled:hover {
    background-color    : rgb(207, 207, 207);
    }
ul#layout .infoButton {
    margin-bottom       : 0;
    margin-top          : 0;
    }
.infoButtonDepressed {
    background          : #e69abd !important;
    border              : 1px solid #999 !important;
    box-shadow          : inset 1px 1px 6px 0px rgba(0, 0, 0, 0.75) !important;
    color               : #333 !important;
    text-shadow         : none !important;
    }
.infoButtonDisabled:hover {
    background          : -moz-linear-gradient(center top, #A3A3A3, #CFCFCF) repeat scroll 0 0 #CFCFCF;
    background-color    : #A3A3A3;
    border              : 1px solid #A3A3A3;
    color               : #212121;
    text-shadow         : 1px 1px 2px #eeeeee;
    }
.infoBackground {
    background          : #fff;
    border-bottom       : 2px solid #063;
    color               : #006633;
    margin              : 0;
    overflow            : visible;
    padding             : 2px;
    }
.infoBackground:first-child {
    border-top-left-radius: 4px;
    }
.infoBackground:last-child {
    border-top-right-radius: 4px;
    }
/*TODO: i'm pretty sure this relative adressing doesn't work anymore. */
/*TODO: relative addressing probably is just lucky to work thanks to the inability to go higher than root */
.infoButtonSpecial {
    background-image    : url(../images/jqueryui_icos/ui-bg_highlight-soft-orange.png);
    background-position : 75% 0%;
    border-color        : #8c55c0;
    text-align          : center;
    width               : 94px;
    }
.infoButtonSpecial:hover {
    background-image    : url(../images/jqueryui_icos/ui-bg_highlight-soft-orange.png);
    background-position : 75% 0%;
    color               : #e4e4e4;
    text-shadow         : -1px -1px #333333;
    width               : 94px;
    }
#addToBasket,
#view_basket,
#addToBasketBtnMain,
#rhc_addtobasketbtn,
.infoButtonHighlight,
span.infoSearch:hover {
    /** pink **/
    background          : #e69abd;
    background          : -webkit-linear-gradient(top, #ffddee 0%, #e69abd 100%);
    background          : linear-gradient(to bottom, #ffddee 0%, #e69abd 100%);
    border              : 1px solid #696969;
    color               : #000;
    position            : relative;
    text-shadow         : 1px 1px 3px #e9e9e9;
    }
.theme-orange #addToBasket,
.theme-orange #view_basket,
.theme-orange #addToBasketBtnMain,
.theme-orange #rhc_addtobasketbtn,
.theme-orange .infoButtonHighlight {
    background-image    : linear-gradient( to bottom, #ed6, #db4 );
    }
#addToBasket:focus,
#addToBasket:hover,
#addToBasketBtnMain:focus,
#addToBasketBtnMain:hover,
#rhc_addtobasketbtn:focus,
#rhc_addtobasketbtn:hover {
    background          : #edaac7;
    background          : -webkit-linear-gradient(top, #ffddee 0%, #edaac7 100%);
    background          : linear-gradient(to bottom, #ffddee 0%, #edaac7 100%);
    border              : 1px solid #999;
    position            : relative;
    text-shadow         : 1px 1px 3px #e9e9e9;
    }
.theme-orange #addToBasket:focus,
.theme-orange #addToBasket:hover,
.theme-orange #addToBasketBtnMain:focus,
.theme-orange #addToBasketBtnMain:hover,
.theme-orange #rhc_addtobasketbtn:focus,
.theme-orange #rhc_addtobasketbtn:hover {
    background-image    : linear-gradient( to bottom, #ed6, #ed6 );

    }

.infoSearch {
    border-radius       : 0 4px 4px 0;
    margin              : 1px 0 2px -6px;
    padding             : 3px 4px;
    position            : relative;
    top                 : -1px;
    }


/* styles for quoteBox generated by build_review_snippet() function */
blockquote.quoteBox {
    background          : #005179;
    background-repeat   : no-repeat;
    background-position : left top, right bottom;
    border-radius       : 4px;
    box-shadow          : 0px 0px 9px #999;
    color               : #fff;
    font-size           : 1.2em;
    margin              : 10px auto;
    max-width           : 800px;
    min-height          : 80px;
    padding             : 20px 65px;
    position            : relative;
    quotes              : "\201c""\201d""\2018""\2019";
    text-align          : left;
    }
blockquote.quoteBox:before,
blockquote.quoteBox:after {
    font-size           : 9em;
    line-height         : 1em;
    opacity             : 0.15;
    position            : absolute;
    }
blockquote.quoteBox:before {
    content             : open-quote;
    left                : 6px;
    top                 : 0px;
}
blockquote.quoteBox:after {
    bottom              : 0px;
    content             : close-quote;
    line-height         : 0em;
    right               : 6px;
}
blockquote.quoteBox span.quote_more {
    cursor              : pointer;
    font-size           : 12px;
    font-weight         : bold;
    display             : block;
    margin-top          : 12px;
    text-align          : right;
    text-transform      : lowercase;
}
/* back to top */
#scrollup {
    font-weight         : bold;
    }

/* legacy osC box modules use these */
.infoBoxContents {
    font-size           : 10px;
    }
.infoBoxNotice {
    background          : #FF8E90;
    }
.infoBoxNoticeContents {
    background          : #FFE6E6;
    font-size           : 10px;
    }
TD.infoBoxHeading {
    background          : #006633;
    color               : #FFFFFF;
    font-size           : 11px;
    font-weight         : bold;
    }
tr td.infoBoxHeading:first-child,
tr td.infoBoxHeading:last-child {
    display             : none;
    }
tr td.infoBoxHeading {
    background          : #005329 url(../images/jqueryui_icos/ui-bg_inset-soft_75_005329_1x100.png) repeat-x scroll 50% 50%;
    border              : 1px solid #006633;
    border-radius       : 25px 25px 0 0;
    padding-left        : 5px;
    text-shadow         : -1px -1px #333333;
    }
TD.infoBox,
SPAN.infoBox {
    font-size           : 10px;
    }

/*TODO: i'm pretty sure this is unused */
table.formArea {
    background          : #f1f9fe;
    border-color        : #7b9ebd;
    border-style        : solid;
    border-width        : 1px;
    }
td.formAreaTitle {
    font-size           : 12px;
    font-weight         : bold;
    }
span.productSpecialPrice.productSpecialPrice.productSpecialPrice {
    color               : #d1231e;
    font-size           : 1.4em;
    }
span.errorText {
    color               : #d1231e;
    }
/* TODO: move this to sitemap.php */
ul.sitemap {
    color               : #d1231e;
    }
/* used on checkout success pages */
.checkoutBarFrom,
.checkoutBarTo {
    color               : #8c8c8c;
    font-size           : 10px;
    }
.checkoutBarCurrent {
    color               : #000000;
    font-size           : 10px;
    }
/* message stack output. Not sure what this is used for (see messageStack class in app_top) -TR */
.messageBox {
    font-size           : 10px;
    }
.messageStackError,
.messageStackWarning {
    background-color    : #ffb3b5;
    font-size           : 10px;
    }
.messageStackSuccess {
    background-color    : #99ff00;
    font-size           : 10px;
    }
/* input requirement */
.inputRequirement {
    color               : #d1231e;
    font-size           : 10px;
    }
/*TODO: I'd love to delete this of these but they're used on product pages across the site - TR*/
td#greenborder {
    border              : #006633 solid 1px;
    }
.TextGrey {
    color               : #333;
    }
.TextBlack {
    color               : #000;
    }
.TextRed,
.RedBold,
a:hover.TextRed {
    color               : #d1231e;
    }
.TextBlue,
.BlueBold {
    color               : #1446b9;
    }
.TextGreen,
.GreenBold {
    color               : #063;
    }
.TextPink,
.PinkBold,
a:hover h2 {
    color               : #e69abd;
    }
.RedBold,
.BlueBold,
.GreenBold,
.PinkBold {
    font-weight         : bold;
    }
/*mouse over tooltip */
a span.pop {
    display             : none;
    text-decoration     : none;
    }
a:hover span.pop {
    background-color    : white;
    border              : 1px solid black;
    color               : #000000;
    display             : inline;
    margin-left         : -9px;
    margin-top          : -9px;
    overflow            : hidden;
    padding             : 3px;
    position            : absolute;
    }
.style2 {
    color               : #FFFFFF;
    font-size           : 12px;
    font-weight         : bold;
    }
.style6 {
    color               : #d1231e;
    }
.style7 {
    color               : #000000;
    }
a#main {
    visibility          : visible;
    }
span#hidden {
    visibility          : hidden;
    }
a#main:focus span#hidden {
    visibility          : visible;
    }
/*TODO: still used by search? -TR */
.term i {
    color               : #FF9FCF;
    font-style          : normal;
    }
.activeSuggest {
    background-color    : #328D5E;
    color               : white;
    }
/*TODO: probably wrong class, had typo 'font-color' - unused? */
.term activeSuggest i {
    color               : #FFFFFF;
    font-style          : normal;
    }
/*TODO: this effectively affects all <td>s.
    Besides, overflow: visible is default.
    And i think firefox doesn't support overflow on TDs anyway.
    https://css-tricks.com/fixing-tables-long-strings/#li-comment-1583370
    */
table > tbody > tr > td {
    overflow            : visible;
    }
/* LHC legacy category listing (Still used on EU stores but watch this space) */
ul.category_list {
    font-size           : 11px;
    list-style          : none;
    margin              : 0;
    margin              : 0 -17px 0 -5px;
    padding             : 18px 0 20px 0;
    }
ul.category_list li {
    background          : url('images/cat_stripe_background.png');
    border              : 1px solid #adadad;
    border-bottom       : 0;
    display             : block;
    padding             : 0;
    width               : 155px;
    }
ul.category_list li.selected {
    background          : #377956 url('images/shade_green.png') repeat-x;
    padding             : 0 0 0 3px;
    width               : 152px;
    }
ul.category_list li.selected > a {
    color               : #fff !important;
    }
ul.category_list li.selected li {
    background          : url('images/cat_stripe_background_selected_sub.png');
    width               : 152px;
    }
ul.category_list li.selected li.selected {
    background          : #312664 url('images/shade_pink_gradient.jpg') repeat-x;
    width               : 149px;
    }
ul.category_list li.selected li.selected li {
    background          : url('images/cat_stripe_background_selected_sub_sub.png');
    width               : 149px;
    }
ul.category_list li:last-child {
    border-bottom       : 1px solid #adadad;
    }
ul.category_list li a {
    color               : #000;
    display             : block;
    padding             : 4px 7px;
    }
ul.category_list ul.sub_category,
ul.category_list ul.sub_category ul.sub_sub_cat {
    list-style          : none;
    margin              : 0;
    padding             : 0;
    }
ul.category_list ul.sub_category li {
    border-left         : 0;
    border-right        : 0;
    }

/** Homepage Styles ***************************************************************************************************/
.indexCatContainer {
    margin              : 0 auto;
    width               : 616px;
    }
.indexCatLink {
    border              : 1px solid #008341;
    display             : inline-block;
    margin              : 2px 0px;
    max-width           : 150px;
    overflow            : hidden;
    vertical-align      : top;
    width               : 150px;
    }
@media (max-width: 890px) {
  .indexCatLink {
    width: 32%;
  }
}

.indexCatLink:hover {
    border-color        : #e69abd;
    }
.indexCatLink div {
    background          : rgb(51, 134, 92);
    background          : -webkit-linear-gradient(top, rgba(51, 134, 92, 1) 0%, rgba(11, 102, 56, 1) 100%);
    background          : linear-gradient(to bottom, rgba(51, 134, 92, 1) 0%, rgba(11, 102, 56, 1) 100%);
    color               : #fff;
    height              : 25px;
    line-height         : 25px;
    overflow            : hidden;
    text-align          : center;
    text-overflow       : ellipsis;
    white-space         : nowrap;
    }
.indexCatLink:hover div {
    background          : #e69abd;
    }
.index_view_specials_link {
    clear               : both;
    display             : block;
    font-size           : 1.4em;
    text-align          : right;
    }
.index_gifts_link {
    float               : right;
    font-size           : 16px;
    margin-top          : 10px;
    }
.gift_content_container {
    float               : left;
    padding-right       : 5px;
    padding-top         : 5px;
    }

/** Left / Right Column Styles ****************************************************************************************/
/*TODO: This is used probably only for screening LHC */
.leftCol_container {
    border              : 1px solid #AFAFAF;
    color               : #000;
    height              : 76px;
    margin-bottom       : 3px;
    overflow            : hidden;
    position            : relative;
    text-align          : center;
    }
.leftCol_container a {
    color               : #333;
    text-decoration     : none;
    }
.leftCol_container a:hover {
    color               : #006633;
    }
.leftCol_container_textLink {
    background          : rgb(255, 255, 255);
    background          : -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(207, 207, 207, 1) 100%);
    background          : linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(207, 207, 207, 1) 100%);
    bottom              : 0px;
    height              : 30px;
    left                : 0px;
    line-height         : 15px;
    position            : absolute;
    width               : 100%;
    }
.leftCol_container_index_textLink {
    background          : url('images/jqueryui_icos/left_col_lightGrey_fade.png') repeat-x;
    bottom              : 0px;
    color               : #333;
    height              : 30px;
    left                : 0px;
    line-height         : 15px;
    position            : absolute;
    width               : 100%;
    }
.column_products_details_wrapper {
    margin              : 4px 0 10px;
    }
.column_products_details_header {
    color               : #333;
    display             : block;
    font-size           : 1.2em;
    margin              : 1em 0em;
    text-align          : center;
    }
.column_products_details_header > a {
    display             : block;
    font-size           : 0.75em;
    padding-top         : 2px;
    text-align          : right;
    }
.column_products_details_header_green {
    background-image    : url('images/shade_green.png');
    background-repeat   : repeat-x;
    line-height         : 22px;
    text-align          : center;
    }
.column_products_details_container {
    margin              : 0 auto;
    overflow            : auto;
    padding             : 0 2px 30px;
    position            : relative;
    text-align          : center;
    }
.column_products_details_img {
    margin-bottom       : 4px;
    }
.column_products_details_name {
    margin-bottom       : 4px;
    }
.column_products_details_price {
    font-size           : 1.2em;
    padding             : 3px;
    }
/** For the next day delivery RHC popup **/
#next_day_delivery_bubble,
#greenhouse_guarantee_bubble {
    background-color    : #fff;
    border              : 1px solid #333;
    box-shadow          : 2px 2px 10px #333;
    color               : #333;
    display             : none;
    padding             : 10px;
    position            : absolute;
    right               : 150px;
    top                 : -42px;
    width               : 300px;
    }
#greenhouse_guarantee_bubble {
    top                 : 0px;
    }
#greenhouse_guarantee_col {
    cursor              : default;
    margin              : 10px 0;
    }
#next_day_delivery_col:hover #next_day_delivery_bubble,
#greenhouse_guarantee_col:hover #greenhouse_guarantee_bubble {
    display             : block;
    z-index             : 1000;
    }
.greenhouseRHC-text {
    color               : black;
    margin-left         : 50px;
    margin-top          : 2px;
    position            : absolute;
    width               : 150px;
    width               : 80px;
    }
.greenhouseRHC-right-arrow {
    margin-left         : 70px;
    margin-top          : 25px;
    }
.greenhouseRHC-text-2 {
    color               : black;
    margin-left         : 50px;
    margin-top          : 10px;
    position            : absolute;
    width               : 150px;
    width               : 80px;
    }

/** Category Page Styles **********************************************************************************************/
#Default-category-listing.custom_topcontent {
    display: none;
}
.Category-container {
    display             : inline-block;
    padding-bottom      : 5px;
    text-align          : center;
    width               : 180px;
    }
.Category-container img {
    margin-bottom       : 10px;
    }
.Categories-Name {
    display             : block;
    }
.From-text {
    font-size           : 0.8em;
    }
.Categories-price {
    font-size           : 1.2em;
    }
.seo_footer_text {
    color               : #666;
    padding             : 8px;
    }
.product_model_long {
    color               : #063;
    font-size           : 0.8em;
    margin-top          : 2px;
    }
@media only screen and (max-width:767px) {
  /* show default listing, hide custom top content when screen is below min threshold */
  .categoryTopContent_container {
    display               : none;
  }
  #Default-category-listing.custom_topcontent {
    display               : block;
  }
  .Category-container {
    background-color      : #efefef;
    border                : 1px solid #999;
    clear                 : left;
    height                : 60px;
    margin                : 2px 0;
    min-height            : 0;
    padding               : 8px 2px;
    text-align            : center;
    width                 : 95%;
  }
  .Category-container img {
    float                 : left;
    margin                : 0px 2px;
    max-height            : 60px;
    width                 : auto;
  }
}


/** Sitewide Styles ***************************************************************************************************/
.navdiv {
    border-bottom       : 0px;
    border-left         : 0px;
    border-right        : 0px;
    border-top          : 1px dashed #e69abd;
    }
.navdivGrey {
    border-bottom       : 0px;
    border-left         : 0px;
    border-right        : 0px;
    border-top          : 1px solid #dfdfdf;
    }


/** Product Page Styles ***********************************************************************************************/
/* TODO Move these to includes/product.css -TR */
.mg_points {
    margin              : 12px 0;
    min-height          : 17px;
    text-align          : left;
  }
.default_hide {
    display             : none;
    }
td.expand_table_row {
    background-color    : #efefef;
    color               : #006633;
    cursor              : pointer;
    }

.sizeTable .expand_table_row {
  display: none;
}


.sizeTable .default_hide {
  display: table-row;
}

.sizeTable .default_hide:nth-child(2) td {
  border-top: 1px solid #dfdfdf;
}

.pop-parent {
    position            : relative;
    }
.pop-parent .pop-child-left {
    background-color    : #fff;
    border              : 1px solid #333;
    box-shadow          : 2px 2px 10px #666;
    color               : #333;
    display             : none;
    font-weight         : normal;
    padding             : 10px;
    position            : absolute;
    right               : 300px;
    top                 : 0px;
    width               : 200px;
    }
.pop-parent:hover .pop-child-left {
    display             : block;
    }
.new_badge {
    background          : #EDB400;
    border-radius       : 10px;
    color               : #333;
    cursor              : default;
    display             : block;
    font-size           : 1.2em;
    font-weight         : normal;
    height              : 18px;
    max-width           : 60px;
    padding             : 2px;
    text-align          : center;
    }

/*NT 23/01/2013
 * shared contact us page css
 * TODO: Is this still used? If so, move to contact page itself as that's the only place it's needed - TR
 */
#main_content {
    max-width           : 900px;
    min-width           : 360px;
    width               : 65%;
    }
#main_content h3 {
    border-bottom       : 1px solid green;
    color               : #006633;
    font-weight         : bold;
    padding-left        : 10px;
    width               : 230px;
    }
.intro_message {
    color               : black;
    font-weight         : bold;
    width               : 110%;
    }
/*TODO: weird font-family definition */
.cs_signature {
    color               : #999;
    float               : right;
    font-family         : "Lucida Handwriting", Arial, cursive;
    font-size           : 16px;
    margin-right        : -40px;
    }
span.detail {
    color               : #666;
    font-weight         : bold;
    margin-left         : 10px;
    text-align          : left;
    width               : 235px;
    }
.form_head {
    border-bottom       : 1px solid green;
    font-weight         : bold;
    padding-left        : 10px;
    width               : 230px;
    }
#main_content.contact_form {
    border-bottom       : 1px solid green;
    border-left         : 1px solid green;
    display             : block;
    font-weight         : bold;
    height              : 193px;
    margin-left         : 30px;
    margin-top          : -204px;
    position            : absolute;
    }
.defaultText {
    width               : 200px;
    }
.defaultTextActive {
    color               : #a1a1a1;
    font-style          : italic;
    }
.zend_form {
    border-bottom       : 1px solid #006633;
    margin-top          : -8px;
    width               : 240px;
    }
.highlight_true {
    background          : #32CD32;
    font-weight         : bold;
    margin-left         : 5px;
    }
.highlight_false {
    background          : #FF3030;
    font-weight         : bold;
    margin-left         : 5px;
    }
#underline {
    background-color    : #fff;
    border-bottom       : 1px solid green;
    border-left         : 1px solid green;
    display             : block;
    left                : 65px;
    padding             : 10px;
    position            : relative;
    top                 : -22px;
    width               : 100%;
    }
#submit {
    margin-bottom       : 10px;
    margin-left         : 45px;
    }
#textarea {
    height              : 200px;
    }
/*End of contact us css*/





.twocol {
    box-sizing          : border-box;
    display             : inline-block;
    max-width           : 45%;
    min-width           : 300px;
    padding             : 0 1%;
    }
.twocol img {
    display             : block;
    margin              : 0 auto;
    }
@media (max-width : 767px) {
    .twocol {
        display             : block;
        max-width           : none;
        padding             : 0em;
        }
    }
/*TODO: not just used in RHC... so yeah -TR*/
/* would love to know where. the function build_category_link() uses it... */
.rhc_category_link {
    display             : inline-block;
    margin              : 12px 0;
    width               : 115px;
    padding             : 6px;
    text-align          : center;
    vertical-align      : top;
    }
.rhc_category_link_small {
    padding             : 2px;
    }
.rhc_category_link img {
    display             : block;
    margin              : 0 auto 4px;
    }
.rhc_category_link span {
    display             : inline-block;
    overflow            : hidden;
    text-overflow       : ellipsis;
    width               : 120px;
    }

/* Product Star Rating
 * Used in PLC */
.star_rating {
    display             : inline-block;
    position            : relative;
    z-index             : 0;
    }
.star_rating img {
    left                : 0px;
    position            : absolute;
    top                 : 0px;
    z-index             : 1;
}
.star_rating_bg {
    background          : #EFAE00;
    left                : 0px;
    position            : absolute;
    top                 : 0px;
    z-index             : -1;
}





/* new-layout testing stuff #################################################################################

 #     # ####### #     #       #          #    #     #  #####  #     # #######
 ##    # #       #  #  #       #         # #    #   #  #     # #     #    #
 # #   # #       #  #  #       #        #   #    # #   #     # #     #    #
 #  #  # #####   #  #  #       #       #     #    #    #     # #     #    #
 #   # # #       #  #  #       #       #######    #    #     # #     #    #
 #    ## #       # # # #       #       #     #    #    #     # #     #    #
 #     # #######  #   #        ####### #     #    #     #####   #####     #

sorry about the banner. it looks good on the minimap feature in some editors... ############################# */
#siteHeader .logo_m {
    display             : none;
    margin              : 0 0 0 60px;
    padding             : 6px 0 0 0;
    text-align          : center;
    width               : auto;
    }
.layout--tables .lhcSpacer {
    height              : 40px;
    }


.layout--responsive .responsiveContainer {
    margin              : 0px auto;
    position            : relative;
    width               : auto;
    padding             : 0 8px;
    max-width           : 1500px;
    }
.layout--responsive #headingTopTabsContainer {
    /*overflow            : hidden;*/
    }
.layout--responsive #central_content {
    box-sizing          : border-box;
    padding             : 1em;
    }
.layout--responsive.layout--no-columns #central_content {
    float               : none;
    width               : auto;
    }

.layout--responsive .primroseLHC {
    border-right        : 1px solid #ccc;
    box-sizing          : border-box;
    float               : left;
    padding             : 40px 2px;
    width               : 160px;
    }
.layout--responsive .primroseRHC {
    border-left         : 1px solid #ccc;
    box-sizing          : border-box;
    float               : right;
    padding             : 20px 2px;
    width               : 160px;
    display:            : none;
    }
.layout--responsive #siteHeader {
    box-shadow          : 0px 1px 4px rgba( 0, 0, 0, 0.5 );
    min-width           : 0;
    z-index             : 20; /* the accounts login button has 10 and causes
                                    the menu to appear under other elements */
    }
.layout--responsive #nav_menu {
    background          : rgba(255,255,255,0.5);
    display             : none;
    float               : left;
    height              : 54px;
    position            : relative;
    width               : 80px;
    z-index             : 20; /* the search field has 10 */
    }
.layout--responsive #nav_menu.selected {
    background          : rgba(255,255,255,0.9);
    }
.layout--responsive #nav_menu_btn {
    border-right        : 1px solid #cfcfcf;
    cursor              : pointer;
    height              : 34px;
    margin              : 4px 0 0;
    padding             : 9px 20px;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
    }
.layout--responsive #nav_menu_btn #burger_icon {
    background-image: url('../images/mobile/mob_elements_sprite.png');
    background-position: -56px -52px;
    background-repeat: no-repeat;
    height              : 100%;
    width               : 100%;
    }
.layout--responsive #nav_menu_drop {
    background-color    : #fff;
    box-shadow          : 2px 2px 6px #333;
    display             : none;
    /* display:list-item on the children cause them to have bullets
        in firefox. maybe it should be <ul> in the first place */
    list-style-type     : none;
    min-width           : 300px;
    padding             : 10px;
    position            : absolute;
    }
.layout--responsive #nav_menu_drop a {
    border-bottom       : 1px solid #efefef;
    display             : list-item;
    font-size           : 1.1em;
    height              : 40px;
    line-height         : 40px;
    margin-bottom       : 10px;
    padding             : 0 0 10px 50px;
    position            : relative;
    }
.layout--responsive #nav_menu_drop a:last-of-type {
    margin-bottom       : 0px;
    }
.layout--responsive #nav_menu_drop a:before {
    background-image    : url('../images/mobile/mob_elements_sprite.png');
    background-repeat   : no-repeat;
    content             : "";
    display             : block;
    height              : 36px;
    left                : 0;
    position            : absolute;
    top                 : 0;
    width               : 40px;
    }
.layout--responsive #nav_menu_drop a.nav_menu_drop-home:before {
    background-position : -133px -2px;
    }
.layout--responsive #nav_menu_drop a.nav_menu_drop-basket:before {
    background-position : -178px -2px;
    }
.layout--responsive #nav_menu_drop a.nav_menu_drop-search:before {
    background-position : -222px -2px;
    }
.layout--responsive #nav_menu_drop a.nav_menu_drop-contact:before {
    background-position : -263px -2px;
    }
.layout--responsive #nav_menu_drop a.nav_menu_drop-delivery:before {
    background-position : -467px -2px;
    }
.layout--responsive #nav_menu_drop a.nav_menu_drop-login:before {
    background-position : -412px -2px;
    }
.layout--responsive #cols_content_container {
    background-color    : #fff;
    box-shadow          : 0px 5px 4px rgba( 0, 0, 0, 0.5 );
    padding-bottom      : 2em;
    position            : relative;
    }
.layout--responsive .footer_container.footer_container {
    min-width           : 0;
    }

@media( max-width : 1550px ) {
    .layout--responsive .responsiveContainer {
        max-width           : 1200px;
        }
      }


@media( max-width : 1440px ) {
    .layout--responsive #siteHeader .rowBackground .bannerWrap .bannerSameDayImageTogether {
        display             : none;
        }
    }

@media( max-width : 969px ) {
    .layout--responsive #siteHeader .rowBackground .bannerWrap .bannerSameDayImageAlone {
        display             : none;
        }
    }



@media( max-width : 890px ) {
    .layout--responsive .primroseLHC {
        padding-top         : 80px;
        }
    .layout--responsive .primroseRHC {
        display             : none;
        }
    .layout--responsive #siteHeader #headingTopTabsContainer {
        display             : none;
        }
    }


@media( max-width : 890px ) {
    .layout--responsive #cols_content_container {
        box-shadow          : none;
        }
    .layout--responsive .responsiveContainer {
        width               : auto;
        }
    .layout--responsive #central_content {
        float               : none;
        margin              : 0px;
        max-width           : 100%;
        width               : auto;
        }
    .layout--responsive #siteHeader .rowSearch .searchFieldWrap {
        width               : 77%;
        padding-left        : 2%;
        }
    .layout--responsive #siteHeader .rowBackground .bannerWrap > a,
    .layout--responsive #siteHeader .rowBackground .logoLink,
    .layout--responsive #siteHeader #HeaderTopRight,
    .layout--responsive #siteHeader .rowSearch #headingTopBarNavLinks {
        display             : none;
        }
    .layout--responsive #siteHeader #breadcrumb_container {
        padding             : 6px 2% 0;
        }
    .layout--responsive #siteHeader .logo_m,
    .layout--responsive #nav_menu {
        display             : block;
        }
    }

    @media ( max-width : 767px ) {
        .layout--responsive .primroseLHC {
            display             : none;
            }
        }




/* heated-gloves overrides not from this file */

.theme-orange #searchLegacy input[type="submit"] {
    background-image    : linear-gradient( to bottom, #ed6, #db4 );
    }
.theme-orange #scrollup {
    color               : #c62;
    }
.theme-orange .footer_link_box ul a:hover {
    color               : #c62;
    }

.primrose-content-management.primrose-content-management {
  max-width: none;
  width: 100%;
}

/*#bifySearchResults .searchProductListing .products .productContainer .productInfo .productPrice a {
  color: red;
}*/