/* 
========================================================================
MAIN LAYOUT
========================================================================
*/
/*html                                    { height:100%; max-height: 100vh; overflow: hidden; }
body									{ background-color: #fff; }
body.main                               { background: #fff; padding: 0; display: block; }

#container                              { position: relative; margin: 0 auto; min-height: 100vh;}
#centre_container                       { min-height: calc(100vh - 415px); max-width: 1140px; position: relative; display: block; padding: 1px 20px 0 20px; margin: 0 auto; }*/

html                                    { height:100%; overflow-y:scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical; }
body									{ background-color: #fff; }
body.main                               { padding: 0; background-color: #fff; }
#container                              { position: relative; width: 100%; margin: 0 auto; }
#centre_container                       { min-height: calc(100vh - 280px); max-width: 1140px; position: relative; display: block; padding: 1px 20px 0 20px; margin: 0 auto; }
form.container                          { height:100%; max-height: 100vh; min-height: 100vh; display: block; }
/* 
========================================================================
FADE IN FADE OUT
========================================================================
*/
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* 
========================================================================
SECTIONS
========================================================================
*/
#header                                 { margin: 0 auto; max-width: 100%; background-color: #fff; height: 135px; }
#header .row                            { max-width: 1080px; }
#header .logo                           { margin: 20px 0 17px -9px; max-width: 220px; }
#header #h_centre                       { text-align: center; }
#header #h_bottom                       { text-align: center; background-color: #000000; }
#header #right_icons                    { width: 380px; max-width: 80%; float: right; }
#pagecontent_pad                        { min-height: 300px; padding-bottom: 15px; }
.left-off-canvas-menu #categorymenu     { display: none; }
#header #telephone                      { margin: 23px 0 0 0; color: #000; float: right; }
#header #telephone #phonenumber         { display: inline-block; margin: 0 0 0 10px; font-weight: bold; font-size: 28px; letter-spacing: -1px; color: #000 !important; }

/* 
========================================================================
CATEGORY NAVIGATION MENU
The primary styles are created by foundation.css. We override some here.
========================================================================
*/
#categorymenu .megamenu                 { display: table; text-align: center; background-color: transparent; width: 1070px; max-width: 100%; margin: 0 auto; height: 35px; line-height: 35px; text-align: left; }
#categorymenu ul                        { margin: 0 auto; display: table; width: 100%; }
#categorymenu .megamenu li              { display: table-cell; height: 100%; }
#categorymenu .megamenu li a.mm_toplevel
                                        { text-align: center; display: block; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #fff; background-color: #000000; text-transform: none; font-size: 14px; font-weight: bold; padding: 9px 14px 1px 14px; line-height: 1.1em; height: 35px; }
#categorymenu .megamenu li a.mm_toplevel:hover
                                        { background-color: #fa5; color: #000; }
#categorymenu .megamenu li a.mm_sublevel
                                        { display: inline-block; width: 250px; padding: 5px; border: solid 1px #fff; }
#categorymenu .megamenu li a.mm_sublevel:hover
                                        { border-color: #f60; }
#categorymenu .megamenu li div.megamenu_tab
                                        { top: 135px; left: calc(50% - 535px); width: 1070px; border: solid 1px #333; padding: 10px 20px 20px 20px; position: absolute; z-index: 1000; background-color: #fff; box-shadow: rgba(0,0,0,0.3) 3px 3px 3px; }
#categorymenu .megamenu li div.megamenu_tab img.mm_image
                                        { display: inline-block; }
#categorymenu .megamenu li div.megamenu_tab span.mm_text
                                        { display: inline-block; width: 180px; line-height: 1.1em; font-weight: bold; padding: 10px 0 0 5px; }
#categorymenu .megamenu li a.mm_sublevel:hover span.mm_text
                                        { color: #000; }
#categorymenu .megamenu li.selectedmenulink a.mm_toplevel
                                        { background-color: #fa5; color: #000; }


/* 
========================================================================
OFF CANVAS MENU
========================================================================
*/
a.off-canvas-open                       { width: 20px; color: #333; background: transparent; text-transform: uppercase; font-size: 13px; font-weight: bold; position: relative; display: block; padding: 0 0 0 0; height: 35px; margin: 5px; line-height: 35px; }
a.off-canvas-open::before               { content: ""; position: absolute; left: 2px; display: block; width: 16px; top: 2px; height: 0; box-shadow: 0 10px 0 2px #000, 0 16px 0 2px #000, 0 22px 0 2px #000; }
a.off-canvas-close                      { color: #333; font-size: 25px; font-weight: bold; display: block; padding: 1px 3px; position: absolute; top: 2px; right: 20px; }
a.left-off-canvas-toggle                { display: none; float: left; margin: 5px 0 0 0; }
.off-canvas-wrap                        { min-height: 100%; }
.left-off-canvas-menu                   { position: fixed; padding: 0; background: none repeat scroll 0% 0% transparent; width: 300px; max-width: 100%; }
.left-off-canvas-menu .content          { border-right: solid 1px #777; margin-right: 10px; padding: 30px 10px 10px 10px; background: rgba(255,255,255,1); height: 100%; box-shadow: rgba(0, 0, 0, 0.2) 2px 6px 6px; }
.left-off-canvas-menu h2                { margin: 20px 0 10px 0; padding: 0 5px; }
.left-off-canvas-menu ul                { margin-left: 0; }
.left-off-canvas-menu ul li             { list-style-type: none; padding: 0;  }
.left-off-canvas-menu ul li a           { text-align: left; color: #333; font-size: 14px; width: 100%; text-transform: none; font-weight: normal; letter-spacing: 1px; line-height: 1.3em; padding: 3px 5px 3px 5px; margin: 0 0 1px 0; display: block; }
.left-off-canvas-menu ul li a:hover     { background-color: #f60; color: #fff; }
a.toggleswitch                          { display: inline-block; margin-top: 15px; }
.move-left .exit-off-canvas             { box-shadow: none; }
/* 
========================================================================
LOGIN STATUS
========================================================================
*/
#loginstatus                            { float: left; margin: 7px 5px 0 0; display: inline-block; font-size: 11px; font-weight: normal; color: #fff; padding: 5px 0 3px 30px; }
#loginstatus strong                     { font-weight: normal; font-size: 13px; text-transform: none; }
#loginstatus .loginbutton               { float: left; display: block; width: 22px; height: 22px; border: none; background-position: 0; background-image: url(Images/icon_account.png); background-repeat: no-repeat; background-size: contain; background-color: transparent; color: transparent; display: inline-block; }
#loginstatus .loginbutton.loggedin      { background-image: url(Images/icon_account_in.png); }
#loginstatus #username,
#loginstatus #statuslabel               { display: inline-block; margin-left: 5px; color: #000; }
#loginstatus:hover #account_menu        { width: 190px; margin: 2px 0 0 -30px; }
/* 
========================================================================
SEARCH BOX
========================================================================
*/
#searchlink                             { margin: 12px 5px 0 5px; float: right; display: block; width: 20px; height: 20px; border: none; background-position: 0; background-image: url(Images/icon_search.png); background-repeat: no-repeat; background-size: contain; background-color: transparent; color: transparent; display: none; }

#searchbox_popup                        { display: none; z-index: 9999; background-color: rgba(0, 0, 0, 0.7); height: 100%; width: 100%; position: fixed; top: 0; left: 0; }
#searchbox_popup .searchclosebutton     { color: #fff; font-weight: bold; font-size: 50px; float: right; margin: 30px; }
#searchbox_popup h1                     { color: #fff; font-weight: bold; font-size: 40px; width: auto; height: 42px; display: block; position: absolute; top: calc(40% - 90px); left: calc(50%); transform: translate(-50%, -50%); }

#section_searchbox                      { min-width: 320px; max-width: 99%; height: 42px; border: solid 2px #fff; position: absolute; top: 40%; left: calc(50%); transform: translate(-50%, -50%); }
#section_searchbox .small-10            { padding-left: 5px; }
#section_searchbox input.button         { margin-top: 4px !important; border: none; width: 100%; float: right; background-color: transparent; background-position: right; background-image: url(Images/icon_search_light.png); background-repeat: no-repeat; background-size: contain; color: transparent; font-weight: bold; margin: 0; height: 32px; }
#section_searchbox input.button:hover   { border: none; border-bottom: #333; }
#section_searchbox input[type="text"],
#section_searchbox input[type="search"]   { margin-top: 4px !important; box-shadow: none; border: none; height: 32px; background-color: transparent; color: #fff; font-size: 23px; }
#section_searchbox input[type="text"]:focus,
#section_searchbox input[type="search"]:focus
                                        { }

/* main search */
#search_main                            { margin-top: 10px;  }
#search_main input.button               { margin-left: -25px; border: none; color: transparent; height: 26px; width: 20px; padding: 3px; font-size: 11px; background-color: transparent; background-position: 0; background-image: url(Images/icon_search.png); background-repeat: no-repeat; background-size: contain; }
#search_main input[type="text"],
#search_main input[type="search"]       { margin-top: 1px; padding: 3px; border: solid 1px #333;box-shadow: none; height: 26px; background-color: #eee; color: #000; font-size: 14px; }
#search_main input[type="text"]:focus,
#search_main input[type="search"]:focus
                                        { background-color: #fff; }
/* 
========================================================================
OTHER CONTROLS language, currency, etc.
========================================================================
*/
#currencymenu                           { margin: 10px 5px 0 5px; width: 50px; overflow: hidden; }
#currencymenu select					{ font-family: Courier New, Courier, monospace; color: #333; border: none; background-color: #fff; font-size: 13px; box-shadow: none; min-width: 70px; }
#currencymenu select:hover              { cursor: pointer; }
#languagemenu                           { font-family: Courier New, Courier, monospace; margin: 10px 5px 0 5px; float: right; text-align: left; display: block; max-width: 110px; border: none; }
#languagemenu .language-link            { display: inline-block; border: none; padding: 1px 3px; color: #333; text-transform: uppercase; font-size: 12px; }
#languagemenu .lang-selected            { background-color: #333; color: #fff; }
#recentlyviewed                         { padding: 10px 0 20px 0; border-top: solid 1px #333; }
#recentlyviewed .item                   { float: none; }
/* 
========================================================================
TEMPLATE HOVERMENU
========================================================================
*/
.hovermenu                      { display: none; font-size: 11px; z-index: 999; }
.hovermenu ul                   { margin: 0; padding: 0; }
.hovermenu ul li                { list-style: none; float: none; clear: both; margin: 0 0 0 0; padding: 2px 0 0 0; }
.hovermenu_holder:hover .hovermenu
                                { animation: fadein 0.3s; min-height: 50px; box-shadow: rgba(0, 0, 0, 0.2) 2px 6px 6px; padding: 10px; background-color: rgba(255,255,255,1); width: 230px; border: solid 1px #333; display: block; z-index: 999; text-align: left; height: auto; position: absolute; padding: 10px 8px 8px 8px; margin: 35px 0 0 -9px; }     
.hovermenu ul li a              { line-height: 1.1em; font-size: 100%; color: #333; padding: 3px 5px 3px 5px; margin: 0 0 1px 0; display: block; }
.hovermenu ul li a:hover        { background-color: #f60; color: #fff; }
.hovermenu .button              { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-size: 13px; text-align: left; border-color: transparent; background-color: transparent; color: #333; width: 100%; text-transform: none; font-weight: normal; letter-spacing: 0; }
.hovermenu .button:hover        { background-color: #f60; color: #fff; }
/* 
========================================================================
BASKET SUMMARY
========================================================================
*/
#minibasketholder                       { position: relative; display: inline-block; }
.compactminibasket,
#minibasket                             { width: 40px; float: right; width: auto; max-width: 200px; padding: 0; margin: 8px 0 0 0; }
#minibasket #minibasket_header          { min-width: 32px; background-color: transparent; }
#compactbasket_title                    { display: none; }
#compactbasket_totalprice               { display: none; font-size: 120%; color: #333; font-weight: normal; }
#compactbasket_noofitems span.bracket   { display: none; }
#minibasket h4                          { margin: 0; padding: 0; font-size: 12px; }
#minibasket h4:before,
#minibasket h4:after                    { display: none; }
#minibasket h4:before                   { right: 0.5em; margin-left: -50%; }
#minibasket h4:after                    { left: 0.5em; margin-right: -50%; }

#minibasket h4 strong                   { color: #999; font-weight: bold; }

.compactminibasket a,
#minibasket h4 a                        { height: 22px; display: inline-block; width: auto; background-position: 0; background-image: url(Images/icon_shopping_cart.png); background-size: contain; background-repeat: no-repeat; color: #000; padding: 0 0 0 18px; font-weight: bold; }
#compactbasket_noofitems                { display: inline-block; background-color: #c00; color: #fff; font-size: 1.1em; font-weight: bold; margin: 11px 5px 0 0; padding: 0 4px 1px 3px; }
#compactbasket_noofitems.basket-items-0 { visibility: hidden; }
#minibasket:hover #minibasket_main      { margin: -5px 0 0 -180px; font-family: Segoe UI, Arial, Helvetica, Sans-Serif; }
#minibasket:hover                       {  }
#minibasket:hover h4 strong             { color: #fff; }
#minibasket:hover h4 a                  { color: #fff; }
#minibasket #contents                   { width: 100%; }
#minibasket .button                     { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-size: 13px; }
#minibasket #checkout_button            { background-color: #eee; color: #000; font-weight: bold;  }
#minibasket #checkout_button:hover      { background-color: #f60; color: #fff;  }
#minibasket .minibasket_item a          { font-size: 13px; }
#minibasket #contents #orderinprogress,
#minibasket #contents #basketisempty    { padding: 1px 5px 12px 5px; font-weight: normal; color: #333; font-size: 13px; }
#minibasket #contents ul #totals        { margin-top: 10px; border-top: solid 1px #333; padding: 4px 5px 6px 10px; font-weight: normal; color: #333; font-size: 80%; text-align: right; }
#minibasket #contents ul #totals span.price
                                        { color: #333; font-weight: normal; font-size: 170%; }
#minibasket #contents ul #totals span.total
                                        { color: #333; font-weight: bold; font-size: 220%; }
#minibasket #contents ul #totals #minibasket_whereapplicable
                                        { margin: 10px 0 0 0; font-size: 85%; letter-spacing: 1px; }
#minibasket #contents ul #totals strong { font-weight: bold }

/* 
========================================================================
FOOTER
========================================================================
*/
#footer                                 { background-color: #ddd; padding: 0; min-height: 280px; /*change this size depending on the height of the footer image you're using*/ width: 100%; }
#footer_inside                          { min-height: 280px; max-width: 1140px; margin: 0 auto; color: #333; padding: 10px 20px 0 20px; }
#footer #copyright                      { font-size: 90%; margin: 45px 0 20px 0; }
#footer ul                              { margin: 5px 0 0 0; text-transform: none; font-size: 90%; padding: 0; list-style-type: none; }
#footer ul li                           { padding: 0; }
#footer a                               { color: #333; padding: 0 2px; display: inline-block; }
#footer a:hover                         { background-color: #333; color: #fff; }
#footer .cardlogos                      { width: 400px; max-width: 100%; margin-top: 20px; float: right; }
#footer h3				{ margin: 5px 0 0 0; font-size: 110%; text-decoration: underline;}