html                                    {  }
body									{ background-color: #fff; height:100%; overflow-y:scroll; overflow-x: hidden; }
div#topcontainer{background-color:#AD004D;width: 100%; height: 100px;padding: 40px 3%; position: absolute; transition: padding .25s ease-in-out, height .25s ease-in-out; }
div#topcontainer-spacer{width: 100%; height: 100px; background-color:#AD004D;}
#centre_container{min-height:100vh;display:block;height:auto !important;height:100%;margin:0 auto -232px;}
#pagebody{min-height:300px;}
#container { min-height: 100vh;}
.header--fixed { position: fixed !important; z-index: 999; height: 55px !important; padding: 17px 3% !important; box-shadow: rgba(0,0,0,0.3) 0 3px 3px; 
}

#topcontainer .logolink{margin:4px 0 0 0;display: inline-block;max-width: 74px;}
#pagecontent_homepage{width:100%;float:left;margin:0;padding:0;}
#pagecontent_pad{padding-bottom:35px;}
#right{width:220px;float:right;padding:0;}
#right_pad{padding:7px 0 0 0;margin:0;}

.infoblock{margin:5px 0 5px 0;padding:5px 0 5px 0;}
.infoblock h4{font-size:110%;color:#000;margin:0 0 5px 0;width:auto;padding:2px 5px 2px 0;}
.infoblock h4 a{color:#000}
.infoblock h4 span{display:inline-block}
.infoblock .box{padding:0 0 5px 0}
.infoblock select{width:80%;margin:0 0 0 0;font-size:90%;}
.infoblock ul{margin:0;padding:0;border:0;}
.infoblock ul li{list-style:none;float:none;clear:both;padding:0;}
.infoblock ul li a{display:block;font-weight:normal;text-decoration:none;padding:2px 5px 3px 10px;}
.infoblock ul li a:hover{background-color:#fff;font-weight:bold;}
.infoblock .infoblock_pad{padding:0 0 0 10px}


.row { max-width: 1200px; }

/* 
========================================================================
PAGE LOADING SPINNER
========================================================================
*/
.page-loading-container                 { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-color: white; text-align: center; opacity: 1; }
.page-loading-container .spinner        { position: absolute; top: 40%; left: calc(50% - 25px); transform: translate(-50%, -50%); }
@keyframes spinner {
    to { transform: rotate(360deg); }
}
.page-loading-container .spinner:before { content: ''; box-sizing: border-box; position: absolute; width: 40px; height: 40px; margin-top: -15px; margin-left: -15px; border-radius: 50%; border: 3px solid #ccc; border-top-color: #333; animation: spinner .6s linear infinite; }

/* 
========================================================================
FADE IN FADE OUT
========================================================================
*/
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* 
========================================================================
OFF CANVAS MENU
========================================================================
*/
a.off-canvas-open                       { float: right; width: 30px; color: #fff; background: transparent; text-transform: uppercase; font-size: 13px; font-weight: bold; position: relative; display: block; padding: 0 0 0 0; height: 45px; margin: 5px; line-height: 35px; }
a.off-canvas-open i                     { display: inline-block; color: white; font-size: 1.7em; margin: 9px 0 0 0; }
a.off-canvas-open::before               { content: ""; left: 2px; display: block; width: 16px; top: 0px; height: 0; }
a.off-canvas-close                      { color: #ccc; font-size: 25px; font-weight: bold; display: block; padding: 1px 3px; position: absolute; top: 2px; right: 20px; }
a.left-off-canvas-toggle                { display: inline-block; margin: 0 0 0 29px; }
.off-canvas-wrap,
.inner-wrap                             { min-height: 100vh; }
.left-off-canvas-menu                   { padding: 0; background: none repeat scroll 0% 0% transparent; min-width: 350px; }
.left-off-canvas-menu .content          { border-right: solid 1px #333; margin-right: 10px; padding: 30px 20px 10px 10px; background: #444; height: 100%; box-shadow: 1px 1px 10px rgba(0,0,0,0.6); }
.left-off-canvas-menu ul li             { list-style-type:none; }
.left-off-canvas-menu ul li a           { text-align: left; color: #eee; font-size: 0.9em; width: 100%; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; line-height: 1.1em; padding: 3px 5px 3px 5px; margin: 15px 0 1px 0; display: block; }
.left-off-canvas-menu ul li li a        { border-radius: 3px; font-size: 0.8em; text-transform: none; margin: 0 0 1px 0; font-weight: normal; color: #bbb;}
.left-off-canvas-menu ul li a:hover     { background-color: #222; color: #fff;  }
a.toggleswitch                          { display: inline-block; margin-top: 15px; }
.move-left .exit-off-canvas             { box-shadow: none; }
/* 
========================================================================
LOGIN STATUS
========================================================================
*/
#loginstatus                            { float: right; display: inline-block; color: #000; padding: 5px 0 9px 15px; margin: 5px 0 0 0; }
#loginstatus i.fas                      { display: inline-block; width: 28px; color: #fff; font-size: 1.8em; margin: -5px 9px 0 0; }
#loginstatus strong                     { font-weight: normal; font-size: 0.9em; text-transform: none; }
#loginstatus .loginbutton               { float: right; }
#loginstatus .loginbutton span.icontext { display: none; }
#loginstatus .loginbutton.loggedin      { }
#loginstatus #username,
#loginstatus #statuslabel               { display: none; }
#loginstatus:hover #account_menu        { width: 230px; margin: 20px 0 0 -170px; }
/* 
========================================================================
OTHER CONTROLS language, currency, etc.
========================================================================
*/
#currencymenu                           { margin: 10px 20px 0 20px; width: 50px; overflow: hidden; float: right; }
#currencymenu select					{ color: #888; border: none; background-color: #fff; font-size: 90%; box-shadow: none; min-width: 70px; }
#languagemenu                           { margin: 10px 20px 0 0; float: right; text-align: left; display: block; max-width: 110px; border: none; }
#languagemenu .language-link            { display: inline-block; border: none; padding: 1px 3px; color: #888; text-transform: uppercase; font-size: 90%; }
#languagemenu .lang-selected            { background-color: #888; color: #fff; }
#recentlyviewed                         { border-top: solid 3px #ddd; padding: 10px 0 20px 0; }
/* 
========================================================================
TEMPLATE HOVERMENU
========================================================================
*/
.hovermenu                      { display: none; font-size: 0.95em; }
.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
                                { min-height: 50px; border: solid 1px #000; box-shadow: rgba(0,0,0,0.3) 4px 4px 7px; width: 230px; background-color: #f9f9f9; 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              { border-radius: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; line-height: 1.1em; font-size: 0.95em; color: #333; padding: 3px 5px 3px 5px; margin: 0 0 1px 0; display: block; letter-spacing: 0; }
.hovermenu ul li a:hover        { color: #000; font-weight: bold; }
.hovermenu .button              { border-radius: 0; text-align: left; border-color: transparent; background-color: transparent; color: #333; width: 100%; text-transform: none; font-weight: normal; }
.hovermenu .button:hover        { color: #000; font-weight: bold; }
/* 
========================================================================
BASKET SUMMARY
========================================================================
*/
#minibasketcontainer                    { display: inline-block; float: right; }
#minibasketholder                       { position: relative; }
#minibasket                             { float: right; width: auto; max-width: 200px; padding: 0; margin: 0 0 0 0; }
#minibasket #minibasket_header          { min-width: 32px; background-color: transparent; }
#compactbasket_title                    { display: none; }
#compactbasket_totalprice               { display: none; }
#compactbasket_noofitems span.bracket   { display: none; }
#minibasket h4                          { font-family:"Segoe UI",Arial,Sans-Serif; margin: 0; padding: 0; font-size: 12px; }
#minibasket h4 strong                   { color: #fff; font-weight: bold; }
.compactminibasket a,
#minibasket h4 a                        { height: 28px; display: inline-block; width: auto; color: #000; padding: 0 0 0 18px; font-weight: bold; }
.compactminibasket a i,
#minibasket h4 a i                      { color: #fff; font-size: 1.8em; margin: 9px 0 0 0; }
#compactbasket_noofitems                { font-size: 15px; display: inline-block; position: absolute; background-color: #f00; color: #fff; font-size: 1.0em; font-weight: bold; padding: 0 4px 1px 3px; margin: -2px 0 0 -6px; border-radius: 9px; line-height: 1.2; }
#compactbasket_noofitems.basket-items-0 { visibility: hidden; }
#minibasket:hover #minibasket_main      { margin: 0px 0 0 -180px; width: 250px; }
#minibasket:hover                       {  }
#minibasket:hover h4 strong             { color: #fff; }
#minibasket:hover h4 a                  { color: #fff; }
#minibasket #contents                   { width: 100%; }
#minibasket #contents #orderinprogress,
#minibasket #contents #basketisempty    { padding: 1px 5px 12px 5px; font-weight: normal; color: #444; }
#minibasket #contents ul #totals        { margin-top: 10px; border-top: solid 1px #444; padding: 4px 5px 6px 10px; font-weight: normal; text-transform: uppercase; color: #444; font-size: 80%; text-align: right; }
#minibasket #contents ul #totals span.price
                                        { color: #444; font-weight: normal; font-size: 130%; }
#minibasket #contents ul #totals span.total
                                        { color: #444; font-weight: bold; font-size: 150%; }
#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{margin:0 auto;padding:0;min-height:232px;width:100%;bottom:0;background-color:#f5f5f5;}
#footerspacer{height:232px}
#footer a{font-size:0.90em;font-weight:normal;text-transform:none;color:#333;font-weight:normal;display:block;letter-spacing: 0; line-height: 1em; margin-bottom: 6px;}
#footer a:hover{color:#000;}
#footer .copyright{font-size:0.8em;margin:15px 0 10px 0;letter-spacing: 1px;color:#777;}
#footer .footerblock{font-size:99%;font-weight:normal;vertical-align:top;padding-top:20px;}
#footer h2{font-size: 1.05em;font-weight:bold;letter-spacing:1px;color:#000; margin: 0 0 10px 0; }
#footer ul{padding-left:0;padding-right:25px;list-style-type:none;margin-left: 1px;}
#footer ul li{padding-left:0;}
#footer .browserstack-container { margin-top: 20px; }
#footer .browserstack-container span { padding: 3px 0; font-size: 11px; display: inline-block; }
#footer .browserstack { width: 120px; }