﻿/* top navigation bar */

.container img { width:initial;}
.navbar {background-color: #0081C5 !important;border-color: #0081C5 !important;border-radius: 0;margin-bottom: 0;color: #fff;}
.navbar-nav {float: left;margin: 5px 0;width: 100%;background-color: #006399;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.navbar-toggle {background-color: #F88A3C;border: none;border-radius: 4px;float: right;margin:0;position: relative;}
.navbar-collapse {padding:0;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: transparent;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color: #F88A3C;border-color:transparent;}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color: transparent;}
.nav > li {border: 1px solid #000000;border: 1px solid rgba(0,0,0,0);padding: 5px;position: unset;}

.menu-li-active {background-color: #006399;}
.menu-li-active .dropdown-menu {display:block;}

.nav > .menu-li:hover, .open > .menu-li:focus, .open > .menu-li {transition: background-color 0.2s;background-color: #006399;/*border-top: 1px solid #ffffff;border-top: 1px solid rgba(255,255,255,0.5);border-left: 1px solid #ffffff;border-left: 1px solid rgba(255,255,255,0.5);border-right: 1px solid #ffffff;border-right: 1px solid rgba(255,255,255,0.5);border-bottom: 1px solid #ffffff;border-bottom: 1px solid rgba(255,255,255,0.5);*/}

.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;}

.navbar-toggle .icon-bar {border-radius: 1px;display: block;height: 4px;width: 30px;}

/*---------------------------------------------------------------------------------------*/
/* top bar is divided into 3 sections -navbar-brand -navbar-search -navbar-basket */
.navbar-brand {display: inline-block;padding: 0;order: -2; /* to make sure its left-aligned all the time */}
.navbar-toggle-div {padding-left:10px;}
.navbar-basket {display: flex;padding-left: 18px;padding-right: 10px;order: 1; /* second element for smaller devices */}
.navbar-search {order: 3; /* third element for smaller devices */width: 100%;padding: 10px;border-top: 1px solid #ffffff;border-top: 1px solid rgba(255,255,255,0.3);flex-grow: 1; /*takes up remaining space*/}
.navbar-search > .top-section {display: flex;flex-direction: row;}
.navbar-search > bottom-section {padding: 10px 10px;}

/*menu*/
.menu {color: #ffffff;float: left;padding-right: 0;margin-top: 3px;text-align: left;text-rendering:optimizeSpeed;width: 100%;}
.menu-li {overflow: hidden;padding: 5px 15px;border-bottom: 1px solid #ffffff;border-bottom: 1px solid rgba(255,255,255,0.3);}

.menu a {display:block; /*to make the link clickable even on white space*/color: #fff;text-decoration: none;}
.menu .open > a {border-bottom: 1px solid #ff0000;}
.menu-icon-default {display:inline-block;width: 30px;}
.menu-icon {width: 23px;vertical-align: bottom;}
.menu-icon2 {width: 14px;vertical-align: bottom;}

.social-media-icon-container {display: flex;flex-flow:row nowrap;justify-content:space-around;align-items:center;padding: 5px 20px;}
.social-media-icon {width:23px;height:23px;}

.menu-container {display: none;text-align: left;font-weight: bold;text-transform: uppercase;font-size: 12px;}
.menu-text-sm {font-size: 10px;color: #ffffff;font-weight: bold;padding-left: 0;margin: 0;}
.menu-container-sm {padding: 0;vertical-align: top;font-weight: bold;text-transform: uppercase;font-size: 12px;display: inline;}
.dropdown-menu .divider {margin:5px 0;}
.dropdown-menu {left: initial;margin: 6px 0 0 -6px;top: initial;border-radius: 0;-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.75);-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.75);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.75);background-color: #7a7d81;font-size: 13px;min-width:280px;}

.dropdown-menu > li > ul {padding-left: 0;}
.dropdown-menu > li > a {display: block;color: #fff;text-transform: uppercase;padding: 5px 20px;}
.dropdown-menu > li > a:hover {background-color: #f88a3c !important;cursor: pointer;text-decoration: none;}
.dropdown-menu > li > a:focus, .dropdown-menu > li > ul > li > a:hover {color: #ffffff;text-decoration: none;background-color: #f88a3c;}
.dropdown-menuitem {list-style: none;}
.dropdown-menuitem > a {padding: 3px 0 3px 25px;display: block;text-transform: uppercase;}

.navbar-nav .open .dropdown-menu {border-left: 1px solid #000000;border-left: 1px solid rgba(0,0,0,0.4);border-right: 1px solid #000000;border-right: 1px solid rgba(0,0,0,0.4);border-bottom: 1px solid #000000;border-bottom: 1px solid rgba(0,0,0,0.4);border-top: 1px solid #000000 inset;border-top: 1px solid rgba(0,0,0,0) inset;}


/*---------------------------------------------------------------------------------------*/
/* #REGION navbar-brand */
.brand-logo {
    display: block;
    width: 123px;
    height: 69px;
}

/* #END_REGION brand-logo */
/*---------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------*/
/* #REGION navbar-basket */

.mini-basket-welcome {font-size:14px;line-height:1em;margin-bottom:0.2em;white-space:nowrap;}
.basket-link {overflow: auto;color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;}
.basket-link:hover {color:#fff;text-decoration:none;}
.basket-icon {background-size:contain;background-repeat:no-repeat;background-position:center;width:40px;height:32px;}
.basket-qty {font-weight:500;padding-left:0.2em;}
.basket-price {display:none;font-weight:700;}

/* #END_REGION navbar-basket */
/*---------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------*/
/* #REGION navbar-search */

.toolSearchField {width: 100%;max-width:900px;border-top-right-radius: 0;border-bottom-right-radius: 0;}
.btn-search {background-color: #f88a3c;border-radius: 0;border-top-right-radius: 4px;border-bottom-right-radius: 4px;vertical-align: middle;display: flex;align-items: center;padding: 0 8px;}
.menu-container .glyphicon {float: right;}
.btn-search:hover {box-shadow: 2px 2px 5px #000000 inset;}
.btn-search-img {vertical-align: middle;}

/* #END_REGION navbar-search */
/*---------------------------------------------------------------------------------------*/


.bg-grey {position: fixed;height: 100%;width: 100%;z-index:1100;background-color:rgba(0,0,0,0.2);margin:auto;display:block;text-align:center;}
.disabled-window {position: fixed;height: 100%;width: 100%;z-index: 1100;background-color: rgba(0,0,0,0.2);margin: auto;display: none;}

/*---------------------------------------------------------------------------------------*/
/* #REGION suggestions start*/

.close-container {text-align: right;}
.top-menu-container {text-align:center;}
#topmenu {z-index: 1200;}
.search-result-container {display: none;position: absolute;z-index: 1100;width: 100%;min-height:100%;margin: 0 auto;}
.search-result-inner-container {background-color: #eaeaea;max-width: 800px;margin: 0 auto;box-shadow: 0 6px 12px rgba(0, 0,0, 0.75);padding: 10px;}
.btn-search-close {font-size: 13px;text-transform: uppercase;cursor: pointer;text-align: right;max-width: 100%;display: inline-block;text-align: right;}
.img-close {width: 12px;}
.suggest-section {display: block;justify-content: space-between;text-align:left;}
.loader {background-image: url("https://img.ffx.co.uk/website2/loading.gif");}
.mini-basket-loader {display:none;position:absolute;}
.imgLoader {padding:20px;}
.suggest-category-container, .suggest-brand-container {background-color: #fff;width: 100%;padding: 10px;margin-top: 10px;}
.suggest-header {color: #e2231a;font-weight: bold;margin: 0;padding: 0;}
.suggest-div {margin-top: 5px;width: 100%;cursor:pointer;}
.suggest-div:hover {background-color: #AEAEAE;color: #fff;}
.suggest-item {font-size: 13px;color: #000;padding: 5px;}
.suggest-item:hover {text-decoration: none;}
.skey {font-style: italic;color: #4e4e55;}
.stext {color: #e2231a;}
.stext-styles {font-weight:bold;}
.search-results-top {display:flex;flex-wrap:wrap;justify-content: space-around;align-content:stretch;margin-top:10px;}
.product-grid-mini {min-height:80px;background-color: #fff;width: 249px;border: 1px solid #d2d2d2;text-align: center;font-size: 13px;line-height:13px;padding: 5px;flex-grow: 1;border-radius: 1px;display: flex;margin:1px;flex-direction: column;justify-content: space-between;}
.product-grid-mini:hover {text-decoration: none;background-color: #dedede;}
.product-grid-mini a {height:100%;display: flex;flex-direction: column;justify-content: space-between;}
.btnViewAllResult {color: #fff;background-color: #FF9012;justify-content: center;}
.btnViewAllResult:hover {color: #fff;background-color: #FF9012}
.btnViewAllResult a {width: 100%;height: 100%;display:flex;align-items:center;justify-content:center;font-size:20px;}
.btnViewAllResult a, .btnViewAllResult a:hover, .btnViewAllResult a:focus {color: #fff;}
.no-results {font-size:30px;display:flex;min-height:100px;justify-content:center;align-items:center;flex-wrap: wrap;}
.not-found {font-style: italic;font-weight:bold;}
.item-line-top  {display:flex;flex-direction:row;text-align:left;}
.product-item-img-mini {height:45px;margin-right:5px;}
.product-title-mini {font-size:13px;}
.item-line-bottom {color: #e2231a;font-weight: bold;}
.item-price {font-weight: bolder;}
.inc-vat {font-size:10px;}
.prod-add-mini {position:relative;}
.btn-add-mini {position: absolute;bottom: 0;right: 0;}
.btn-add-mini.btn-orange {max-width: 40px;font-size:12px;}



/* #END_REGION suggestions end*/
/*---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
/* #REGION bigger screen*/
@media screen and (min-width:500px) {
    .suggest-section {display: flex;}
.suggest-category-container, .suggest-brand-container {width: 49.5%;}
}

@media screen and (min-width:768px) {
    .brand-logo {padding-left: 6px;}
    .navbar-toggle {display: block;}
    .navbar-collapse.collapse {display: none !important;}
    .navbar-nav > li {float: none;}
    .menu-container {display: none;}
    .menu-container-sm {display: inline;}
}

@media screen and (max-width:950px) {
    .navbar-nav .open .dropdown-menu {position: static;float: none;width: auto;margin: 0;background-color: #7a7d81;}
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {color: #fff;}
    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {padding: 5px;}
}


@media screen and (min-width:950px) {
    .brand-logo {width: 174px;height: 90px;padding-left: 0;}
    .navbar-nav {margin: 0 auto;float: right;width: auto;background-color: transparent;}
        .navbar-nav > li {float: left;}
    .navbar-collapse.collapse {display: block !important;}
    .navbar-toggle {display: none;}
    .navbar > .container {flex-wrap: nowrap;}
    .menu-li {overflow: hidden;padding: 0;border-bottom: none;}
    .menu-li-active {overflow:visible;background-color: #006399;}
    .menu-icon-default {width: auto;}
    .menu-icon {vertical-align: initial;}
    .basket-link {flex-direction: column;}

    .navbar-brand {padding-left: 10px;padding-right: 10px;}
    .navbar-search {width: 100%;max-width:900px;border: 2px;padding: 0;border-top: none;align-self: flex-end;}
    .navbar-basket {order: 3;align-items: flex-end;}
    .basket-price {display: inline-block;}
    .menu-container {display: inline-block;}
    .menu-container-sm {display: none;}
    .search-results-top {justify-content: flex-start;}
    .product-grid-mini {max-width: 260px;}
}





