/* 
========================================================================
MAIN LAYOUT
========================================================================
*/
html                                    { background-color: #fff; height:100%; max-height: 100vh; min-height: 100vh; display: block; }
body									{ display: block; overflow-y:scroll; overflow-x: hidden; }
body.main                               { background: #fff; padding: 0; display: block; }
form                                    { overflow: visible; width: 100%; }
#container                              { position: relative; margin: 0 auto; min-height: 100vh;}
#centre_container                       { min-height: calc(100vh - 270px); width: 1280px; max-width: 100%; position: relative; display: block; padding: 1px 0 0 0; margin: 0 auto; }

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

/* 
========================================================================
CHEVRON CLASS TO USE IN MENU LINKS, POINTS DOWN
========================================================================
*/
.chevron                { border: solid 3px transparent; position:relative; display:inline-block; height:12px; width: 20px; float: none; margin-top: 5px; }
.chevron:before,
.chevron:after          { position:absolute; display:block; content:""; border:6px solid transparent; }
.chevron:before         { top:0; border-top-color:#666; }
.chevron:after          { top:-2px; border-top-color:#fff; }

/* 
========================================================================
SECTIONS
========================================================================
*/
#header                                 { margin: 0 auto; max-width: 100%; border-bottom: solid 1px #fff; height: 150px; box-shadow: rgba(0,0,0,0.08) 0 2px 2px; }
#header .row                            { max-width: 90%; height: 70px; }
#header .logo                           { margin: 14px 10px 20px 0; max-width: 210px; }
#header .big-menu-link                  { font-weight: bold; letter-spacing: 3px; text-align: center; display: inline-block; background-color: 	#a3adb8; color: #fff; padding: 5px 5px 5px 25px; width: 100%; text-transform: uppercase; font-size: 1.1em; border-radius: 5px; margin-top: 20px; height: 30px; }
#header a.big-menu-link:hover           { background-color: #ccc; color: #000; }

#pagecontent_pad                        { min-height: 300px; padding-bottom: 15px; }
.left-off-canvas-menu #categorymenu     { display: none; }
#h_top_right                            { text-align: right; }


/* 
========================================================================
CATEGORY NAVIGATION MENU
The primary styles are created by foundation.css. We override some here.
========================================================================
*/
.menuSpecial                            { background-color:	#a3adb8; border-radius: 5px; font-size: 0.9em; } /* menu background grey, etc. */
.big-menu-link .chevron:before          { border-top-color:#fff; }
.big-menu-link .chevron:after           { border-top-color:#aaa; }
.big-menu-link:hover .chevron:before    { border-top-color:#000; }
.big-menu-link:hover .chevron:after     { border-top-color:#ccc; }
#categorymenu .custom-submenu           { width: 180px; display: inline-block; float: left; padding: 20px; text-align: center; } /* submenu formatting (columns) */
#header .big-menu-link.taller           { height: 40px; border-radius: 5px 5px 0 0; color: #9ed8f1; } /* we add this to menu links when the menu is visible */
#header .big-menu-link.taller .chevron:before          { border-top-color:#9ed8f1; }
#header .big-menu-link.taller .chevron:after           { border-top-color:#aaa; }

/* specific menus, e.g. shop one needs to be full width, others don't */
#menuAccount                            { display: none; }
#menuAccount .hovermenu                 { text-align: center; }
#menuAccountLink                        { text-transform: uppercase; position: absolute; top: 15px; right: 395px; font-size: 15px; font-weight: normal; z-index: 20; letter-spacing: 2px; color: #666; display: inline-block; margin: 6px 0 0 0; width: 230px; text-align: center; padding: 0 0 0 20px; } 
#menuAccountLink:hover                  { color: #5ebae2; } 
#menuShop                               { position: absolute; left: calc(50% - 640px); top: 130px; z-index: 999; width: 1280px; }
#menuExplore                            { position: absolute; z-index: 999; width: 100%; left: 0px; }
#menuContact                            { position: absolute; z-index: 999; width: 100%; left: 0px; text-align: center; padding: 10px 30px 20px 30px; margin: 0; }
#menuExplore ul                         { list-style-type: none; padding: 10px 10px 20px 10px; margin: 0; }
#menuExplore ul li                      { text-align: center; list-style-type: none; }
#menuExplore ul li a                    { color: #fff; letter-spacing: 1px; }
#menuExplore ul li a:hover              { color: #777 !important; } 
#menuAccountLink .chevron               { float: none; }
#menuAccountLink.activated              { top: 16px; right: 395px; }
#menuAccountLink.activated .chevron     { float: none; }
#menuAccountLink:hover .chevron:before  { border-top-color:#5ebae2;}
#menuAccount .hovermenu                 { position: absolute; right: 325px; top: -25px; padding-top: 40px; width: 250px; }
#menuAccount .hovermenu ul li a         { text-align: center; }
#menuContact                            { text-align: center; padding: 10px 20px 20px 20px; margin: 0; }
#menuContact p                          { color: #fff; letter-spacing: 1px; }
#menuContact p a                        { color: #fff; letter-spacing: 1px; font-size: 1.2em; }

/* this is an invisible overlay we show when menu shows, use it to close menu if user clicks away from menu */
#menuBackOverlay                        { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: transparent; z-index: 15; } /* z-index must be less than menu link */


/* font and link styling */
#categorymenu .custom-submenu h2 {
    font-family: 'Nunito Sans', Segoe UI, Arial, Helvetica, Sans-Serif;
    font-size: 130%;
    color: #666;
    margin: 5px 0 5px 0;
    padding: 0;
    font-weight: 700;
    letter-spacing: 2px;
    height: 55px;
    display: table-cell;
    vertical-align: bottom;
    justify-content: center;
    text-align: center;
    width: 500px;
    margin: 0 auto;
    float: none;
}
#categorymenu .custom-submenu h2 a      { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8em; font-weight: 600; display: block; } /* submenu formatting (columns) */
#categorymenu .custom-submenu ul        { padding: 10px 0 0 0; margin: 10px 0 10px 0; border-top: solid 2px #ccc; }
#categorymenu .custom-submenu ul li     { margin-left: 0; padding-left: 0; list-style-type: none; text-align: center; } /* rows of submenu */
#categorymenu .custom-submenu ul li a   { color: #fff; letter-spacing: 1px; } 
#categorymenu a:hover                   { color: #777 !important; } 
/* 
========================================================================
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 #777, 0 16px 0 2px #777, 0 22px 0 2px #777; }
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          { margin-right: 10px; padding: 30px 10px 10px 10px; background: #a3adb8; height: 100%; box-shadow: rgba(0, 0, 0, 0.2) 2px 6px 6px; }
.left-off-canvas-menu h2                { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8em; font-weight: 600; display: block; border-bottom: solid 2px #ccc; margin: 20px 0 10px 0; padding: 0 10px; }
.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: #fff; font-size: 1.2em; width: 100%; text-transform: none; font-weight: normal; line-height: 1.1em; padding: 3px 5px 3px 5px; margin: 2px 0 2px 0; display: block; }
.left-off-canvas-menu ul li a:hover     { color: #000; }
.left-off-canvas-menu p                 { color: #fff; display: block; padding: 3px 5px 3px 5px; }
.left-off-canvas-menu p a               { color: #fff; }
a.toggleswitch                          { display: inline-block; margin-top: 15px; }
.move-left .exit-off-canvas             { box-shadow: none; }



/* 
========================================================================
LOGIN STATUS
========================================================================
*/
#h_top_center                           { text-align: center; }
#loginstatus                            { max-height: 20px; margin: 10px 5px 0 0; display: flex; flex-direction: column; text-transform: uppercase; font-size: 1em; font-weight: normal; color: #000; padding: 10px 0 0 0; }
#loginstatus strong                     { font-weight: normal; font-size: 15px; text-transform: none; }
.hovermenu .loginbutton                 { margin: 3px 0 10px 0; color: #808285; display: inline-block; text-transform: uppercase; font-size: 1.4em; border-bottom: dotted 1px #808285; padding: 2px 0px; }
#loginstatus .loginbutton.loggedin      { background-position: 0; font-style: normal; }
#loginstatus .loginbutton.loggedout     { margin: 3px 0 0 5px; color: #808285; display: inline-block; text-transform: uppercase; font-style: normal; }
#loginstatus #username,
#loginstatus #statuslabel               { display: inline; margin-left: 5px; color: #808285; font-style: italic; }
#loginstatus #username                  { font-style: italic; }
#loginstatus a.logoutbutton             { background-color: transparent !important; border: none; padding: 1px 5px; border-radius: 0; display: inline; white-space: nowrap; font-style: normal; letter-spacing: 0px; }
#loginstatus .button                    { font-size: 12px; padding: 2px 11px; }


/* 
========================================================================
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 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
#section_searchbox ::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
#section_searchbox :-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
#section_searchbox :-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

#section_searchbox                      { margin-top: 20px; padding: 3px 5px 0 0; background-color: #e5e5e5; border-radius: 5px; height: 30px; float: right; }
#section_searchbox .row                 { max-width: 100%; }
#section_searchbox .small-11            { padding-left: 5px; }
#section_searchbox input.button         { border: none; width: 100%; float: right; background-color: transparent; background-position: right; background-image: url(Images/icon_search.png); background-repeat: no-repeat; background-size: contain; color: transparent; font-weight: bold; margin: 0; height: 22px; }
#section_searchbox input.button:hover   { border: none; border-bottom: #333; }
#section_searchbox input[type="text"],
#section_searchbox input[type="search"]   { box-shadow: none; border: none; background-color: transparent; color: #fff; font-size: 1.1em; color: #000; }
#section_searchbox input[type="text"]:focus,
#section_searchbox input[type="search"]:focus
                                        { border: none; }

/* main search */
#search_main                            {  }
#search_main input.button               { position: absolute; margin: 10px 0 0 -28px !important; 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"]       { border: solid 1px #f30; border-radius: 0; margin-top: 1px; padding: 3px; box-shadow: none; height: 32px; background-color: #eee; color: #000; font-size: 16px; }
#search_main input[type="text"]:focus,
#search_main input[type="search"]:focus
                                        { box-shadow: rgba(252,141,20,0.8) 0 0 8px; border: solid 1px #f30; }
/* 
========================================================================
OTHER CONTROLS language, currency, etc.
========================================================================
*/
#currencymenu                           { margin: 9px 5px 0 5px; width: auto; overflow: hidden; position: absolute; top: 15px; right: 275px; display: inline-block; }
#currencymenu select					{ font-size: 15px; font-weight: normal; z-index: 20; letter-spacing: 2px; border: none; background-color: #fff; box-shadow: none; width: auto; padding-right: 20px;}
#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; text-align: center; margin-top: 40px; }
#recentlyviewed .item                   { float: none; }
/* 
========================================================================
TEMPLATE HOVERMENU
========================================================================
*/
.hovermenu                      { z-index: 18; }
.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 .hovermenu
                                { min-height: 50px; padding: 10px; background-color: rgba(255,255,255,1); width: 200px; border: solid 2px #aaa; border-radius: 5px; display: block; z-index: 18; 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: #999; padding: 3px 5px 3px 5px; margin: 0 0 1px 0; display: block; }
.hovermenu ul li a:hover        { background-color: #eee; color: #000; border-radius: 3px; }
.hovermenu .button              { font-size: 1em; text-align: left; border-color: transparent; background-color: transparent; color: #999; width: 100%; text-transform: none; font-weight: normal; letter-spacing: 0; }
.hovermenu .button:hover        { background-color: #eee; color: #000; border-radius: 3px; }
/* 
========================================================================
BASKET SUMMARY
========================================================================
*/
.checkoutlink                           { display: none; }
.compactminibasket,
#minibasket                             { width: auto; max-width: 250px; padding: 0; margin: 8px 0 0 0; }
#minibasket .basketlogin                { text-align: center; }
#minibasket #minibasket_header          { min-width: 32px; background-color: transparent; z-index: 20; position: absolute; top: 15px; right: 15px; }
#compactbasket_title                    { }
#compactbasket_totalprice               { }
#compactbasket_noofitems span.bracket   { }
#minibasket h4                          { text-transform: uppercase; }
#minibasket h4 .chevron                 { margin-top: 10px; }
#minibasket h4:before,
#minibasket h4:after                    { }
#minibasket h4:before                   { }
#minibasket h4:after                    { }

.compactminibasket a,
#minibasket h4 a                        { font-size: 15px; font-weight: normal; z-index: 999; letter-spacing: 2px; color: #666; }
#minibasket h4 a.activated              { color: #5ebae2; }
#compactbasket_noofitems                { }
#compactbasket_noofitems.basket-items-0 { }
#minibasket #minibasket_main            { width: 260px; display: none; position: absolute; padding-top: 50px; top: -25px; right: 0; z-index: 17; }
#minibasket:hover                       {  }
#minibasket:hover h4 strong             {  }
.compactminibasket:hover h4 a,
#minibasket:hover h4 a                  { color: #5ebae2; }
.compactminibasket:hover h4 a .chevron::before,
#minibasket:hover h4 a .chevron::before  { border-top-color: #5ebae2 !important; }
#minibasket #contents                   { width: 100%; }
#minibasket #links                      { text-align: center; margin-top: 30px; }
#minibasket .button                     { display: inline-block; font-weight: normal; border-bottom: dotted 1px #999; padding: 1px 3px; width: auto; }
#minibasket .button:hover               { color: #000; border-bottom: dotted 1px #000; background-color: transparent; }
#minibasket #checkout_button            { background-color: #eee; color: #000; font-weight: bold;  }
#minibasket #checkout_button:hover      { background-color: #666; color: #fff;  }
#minibasket .minibasket_item a          { font-size: 0.9em; font-weight: normal; }
#minibasket #contents #orderinprogress,
#minibasket #contents #basketisempty    { padding: 1px 5px 12px 5px; font-weight: normal; color: #999; text-align: center;}
#minibasket #contents ul #totals        { display: none; }
#minibasket #contents ul #totals span.price
                                        { color: #666; font-weight: normal; font-size: 170%; }
#minibasket #contents ul #totals span.total
                                        { color: #666; 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 }

/* 
========================================================================
GENERAL STUFF
========================================================================
*/
.bigborder                              { border: solid 10px #c9d8e0; width: 800px; max-width: 95%; margin: 30px auto; padding: 50px; }
.bigborder p                            { margin: 5px 0; text-align: center; display: block; color: #3c4858; }

/* 
========================================================================
FOOTER
========================================================================
*/
#mailinglist_row { background-color: #fcb1e4; box-shadow: rgba(0,0,0,0.3) 0 2px 2px inset; padding: 5px 0 0 0; }
#mailinglist_row .row { max-width: 1100px; margin: 0 auto; }
#mailinglist_row h2 { display: inline-block; padding: 0 10px 20px 0; margin: 10px 0 0 0; float: left; }
#mailinglist_row iframe { display: inline-block; margin: 0; }
/* 
========================================================================
FOOTER
========================================================================
*/
#footer                                 { background-color: #a3adb8; padding: 0; min-height: 120px; /*change this size depending on the height of the footer image you're using*/ width: 100%; }
#footer_inside                          { min-height: 120px; max-width: 90%; margin: 0 auto; color: #ccc; padding: 10px 0 0 0; }
#footer #copyright                      { font-size: 90%; margin: 15px 0 10px 0; }
#footer ul                              { margin: 5px 0 0 0; text-transform: none; font-size: 0.9em; padding: 0; list-style-type: none; }
#footer ul li                           { padding: 0; }
#footer a                               { color: #fff; padding: 2px 2px; display: inline-block; font-size: 0.9em; text-transform: uppercase; font-weight: normal; }
#footer p                               { color: #fff; padding: 0 2px; display: inline-block; font-size: 0.9em; letter-spacing: 2px; font-style: italic; display: inline-block; font-weight: normal; }
#footer a:hover                         { background-color: #fff; color: #000; }
#footer h3				                { margin: 5px 0 3px 1px; font-size: 110%; text-decoration: none; font-weight: bold; color: #fff; letter-spacing: 4px; }
#footer #f_left                         { text-align: left; }
#footer #f_center                       { text-align: center; }
#footer #f_right                        { text-align: right; }
#footer #lnkHyperlink9                  { letter-spacing: 2px; font-weight: bold; text-decoration: underline; }
#footer .emaillink                      { text-transform: lowercase; }
#footer .logo2                          { width: 100px; margin-bottom: 8px; }