/*
    Colours
*/

/*Background color of the entire page.
Mainly used for when a page is not long enough to fill the browser.*/
html {
  background-color: #FFFFFF !important;
}

/* Background color of the body of the site...
Mainly used for the sides of the site when the user's browser exceeds the 1440px width of the page */
body {
  background-color: #FFFFFF;
}

/* Primary Link Color */
a { 
  color:#06c;
}

.featuredProduct a span {
  color: #0066CC;
}

.featuredProduct a:focus span {
  color: #004E99;
}

a:focus, input:focus {
  outline: 4px solid darkblue !important;
}

input[type='text']:focus {
  color: #6A6B6E;
  background-color: #EBF1FD;
}

.searchBox input:focus, .langBtn:focus {
  outline: none !important;
  background-color: #eaf1ff !important;
  color: #000000 !important;
}

.advancedSearchBox a:focus {
  outline: 4px solid #eaf1ff !important;
}

#top-bar a:focus {
  outline: 4px solid #eaf1ff !important;
  color: #5798d8 !important;
}


input:focus::placeholder {
  color: #000000 !important;
  font-weight: bold;
}

.navDropDown a.navCatLink:focus span,
.navDropDown a:focus span span.glyphicon,
.product-image a:focus img,
.product-info a:focus div,
.contactUsColumn a:focus img,
.preorderImage a:focus img,
.subSubNav li a:focus,
#category .item .name a:focus div,
#search .item .name a:focus div,
#adv-search .item .name a:focus div,
.navDropDown .subNav li a:focus span,
.featuredProduct a:focus span, .product-price:focus,
.btnPause:focus, .btnPlay:focus,
.baske-item .item-thumb a:focus img{
  outline: 4px solid darkblue !important;
}

#category .item .image a:focus img, #search .item .image a:focus img, #adv-search .item .image a:focus img {
  border: 4px solid darkblue;
}

input[type='checkbox']:focus {
  outline: 4px solid darkblue;
}

.navDropDown a:focus, .product-image a:focus,
.product-info a:focus, .contactUsColumn a:focus,
.preorderImage a:focus, #category .item .name a:focus,
#category .item .image a:focus, #search .item .name a:focus,
#search .item .image a:focus, #adv-search .item .name a:focus,
#adv-search .item .image a:focus, .navDropDown .subNav li a:focus span.glyphicon,
.featuredProduct a:focus, .baske-item .item-thumb a:focus {
  outline: none !important;
}

button.slick-prev:focus {
  border-right-color: #5A2828;
  background-color: #9696FF !important;
}

button.slick-next:focus {
  border-left-color: #5A2828;
  background-color: #9696FF !important;
}

/* Primary Link Hover Color */
a:hover {
  /*! color: #5798d8; */
  text-decoration: underline;
}

a:hover, a:focus {
  color: #004E99 !important;
}

.refine a:focus, .refine a:hover {
  color: #FFFFFF !important;
}

a.btn:hover, a.btn:focus {
  color: #FFFFFF !important;
}

/* Background color of the inner section of the site */
#bd {
  background-color: #FFFFFF;
}

/* Background & Text color of the top bar that stays at the top of the page when scrolling */
#top-bar {
  color: #FFFFFF;
  background: #333333;
}

/* The link color of the top bar */
#top-bar .topBarContain .col-sm-9 > a, #top-bar .topBarContain .col-sm-9 > a:hover, #top-bar .topBarContain .col-sm-9 > a:focus,
#top-bar .topBarContain .col-sm-9 span > a, #top-bar .topBarContain .col-sm-9 span > a:hover, #top-bar .topBarContain .col-sm-9 span > a:focus,
#top-bar .topBarContain .col-sm-9 > span#headLogout a, #top-bar .topBarContain .col-sm-9 > span#headLogout a:hover {
    color: #FFFFFF !important;
}

/* The color of the title on the category pages */
.ac-skin .categoryTitle a {
  color: #000000 !important;
}

.ac-skin .categoryTitle.active span.title {
  background-color: #f2f2f2;
}

/* The color of the cart amount in the top right corner 
(background is the circle around it, and color is the number in the circle) */
#basket-amount {
  /*! background:#000000; */
  /*color: #FFFFFF;*/
}

/* The color of the cart icon in the top right corner of the page */
.cartBox .glyphicon-shopping-cart {
  color: #000000;
}

/* The background color of the cart area when hovering */
.cartBox:hover {
  /*! background-color: #000000; */
}

/* The text color of the cart area when hovering */
.cartBox:hover .glyphicon-shopping-cart, .cartBox:hover p {
  /*! color: #FFFFFF; */
}

/* The color of the cart amount in the top right corner when hovering
(background is the circle around it, and color is the number in the circle) */
.cartBox:hover #basket-amount {
  /*! background: #FFFFFF; */
  /*! color: #000000 */
}

/* The background, and border colors of the navigation bar */
.ac-skin .search-bar-back {
  background-color: transparent;
  border-color: #000000;
}

/* The link color in the navigation bar */
.ac-skin .search-bar .main-menu li a {
  color: #000000;
}

/* The link hover color in the navigation bar */
.ac-skin .search-bar .main-menu li a:hover {
    color: #a22222;
}

/* The background, text, and bottom border color for the search box in the header */
.ac-skin #hd .top-search-form input[type="text"] {
  background-color: #FFFFFF;
  color: #000000;
  /*! border-color: #000000; */
}

/* The background, and bottom border color for the category select button of the search in the header */
.ac-skin #hd .top-search-form table .category-select {
  background-color: #000000;
  border-color: #000000;
}

/* The text color for the category select button*/
.ac-skin #hd .top-search-form table .category-select .label {
  color:#FFFFFF;
}

/* The hover color for the category select button */
.ac-skin #hd .top-search-form table .category-select:hover .label {
  /*! color: #a22222; */
}

/* The border, and background color for the category select drop down */
.ac-skin #hd .top-search-form .category-select ul {
  border-color: #000000;
  background:#fff;
}

/* The text color for the category select drop down */
.ac-skin #hd .top-search-form .category-select ul li {
  color:#000;
}

/* The hover text color for the category select drop down */
.ac-skin #hd .top-search-form .category-select ul li:hover {
  color: #a22222;
}

/* The background, text, and bottom border colors for the submit button of the header search */
.ac-skin #hd .top-search-form .submit {
  background-color: #FFFFFF;
  color:#000000;
  border-color: #000000;
}

/* The hover color for the text of the submit button */
.ac-skin #hd .top-search-form .submit:hover, .ac-skin #hd .top-search-form .submit:focus {
  color: #FFFFFF;
  background-color: #737373;
}

/* The background, and text color for the section headers
(for example, the Featured Products section on the home page) */
.ac-skin .side-nav #lineItemAdd .title, 
.ac-skin #recentItems .title, .ac-skin .cross-sell .title, .ac-skin .news .featured .title,
.ac-skin .news .filter.availablePreorder.recentMob .title, .ac-skin .filter.myAcctNav .search.categories,
.ac-skin .inner-socket .title, .ac-skin .mobileFacets .filter .title, .checkoutInfoTitle.title, 
.ac-skin .filter .title {
  /*! background-color: #000000; */
  color: #000000;
}

.ac-skin#item .inner-socket .title {
  /*! box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
}

/* The color for the title of each section of the side nav (for example, the Shop by Price title) */
.ac-skin .side-nav .filter .title {
  color: #FFFFFF;
  background-color: #666666;
}

/* The text, and border colors of the facets on the left side of the category page*/
.ac-skin .side-nav .filter li.facetReviewsZero label:hover, 
.ac-skin .side-nav .filter li.facetZero label:hover, .ac-skin .side-nav .filter li.facetReviewsZero:hover,
.ac-skin .side-nav .filter li.facetZero:hover, .ac-skin .side-nav .filter.categories li a {
  color: #7f7f7f;
  border-color: #c7e1f4;
}

.ac-skin .side-nav .filter li {
  color: #000000;
  /*! font-weight: bold; */
}

.ac-skin .side-nav .filter li:nth-of-type(2n) {
  background-color: #ededed;
}

/* The hover text color of the facets on the left side of the category page*/
.ac-skin .side-nav .filter li label:hover, .ac-skin .side-nav .filter li:hover {
  /*! color: #a22222; */
}

/* The color of the links on the left side of the My Account pages */
.ac-skin .side-nav .filter.myAcctNav li a {
  color: #4F5355;
}

/* The hover color of the links on the left side of the My Account pages */
.ac-skin .side-nav .filter.myAcctNav li a:hover {
    color: #1F82CF;
}

/* The color of the item names on the category page */
.ac-skin .listing .item .name a {
  color: #000000;
}

/* The hover color of the item names on the category page */
.ac-skin .listing .item .name a:hover {
  color: #a22222;
}

/* The background color of the item images on the category page */
.ac-skin .listing .item .image {
  background: #FFFFFF;
}

/* The color of the border below the item names on the category page */
.ac-skin .listing .actions {
  border-color: #C7C6C8;
}

/* The color of the border below the item descriptions on the category page */
.ac-skin .item .feature-list {
  border-color: #C7C6C8;
}

/* The color of the price on both the category, and item pages */
.ac-skin .price, .ac-skin .price .integer, .ac-skin .price .currency, .ac-skin .price .decimal {
  color: #000000;
}

/* The color of the list price */
.ac-skin .list-price em {
  color: #888888;
}

/* The color of the You Save text */
.ac-skin .you-save, .ac-skin .you-save span, .ac-skin .you-save strong {
  color: #888888;
}

/* The border colors for the Search as you Type drop down */
.ac_results {
  border-color: #000000 !important;
  border-top-color: #FFFFFF !important;
}

/* The color of the divider at the top of the category page */
.catSortDivider {
  background-color: #000000;
}

.ac-skin .side-nav .title a { 		
	color: #fff;
} 

/* The border, and background colors of the invalid fields on the checkout, and registration pages */
.invalid {
    border-color: #A94442;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    background-color: #FEEEEE;
}

/*The background, and icon color for the selected option in the grid/list view switch on the category page */
.ac-skin .view-switch a.selected {
  color: #FFFFFF;
  background-color: #000000;
}

/*The background, and icon color for the selected option in the grid/list view switch on the category page when hovering */
.ac-skin .view-switch a:hover {
  background-color: #000000;
  color: #FFFFFF;
}

/* The text, and default background color of the badges for featured/sale/special/new on the category page...
The default background color is overwritten for each one below. */
.badges p.feature, .badges p.sale, .badges p.special, .badges p.new {
  background-color: #FFFFFF;
  color: #FFFFFF;
}

/* The background color of the New badge */
.badges p.new {
  background-color: #5F0000;
}

/* The background color of the Sale badge */
.badges p.sale {
  background-color: #DD6162;
}

/* The background color of the Featured badge */
.badges p.feature {
  background-color: #FC9800;
}

/* The background color of the S[ecoa;] badge */
.badges p.special {
  background-color: #197B00;
}

/* The border color on the totals table on the checkout pages */
.ac-skin .totals tbody {
  border-color: #AEAEAE;
}

/* The background, and border colors of the Warning messages */
.ac-skin .warning {
  background-color: #FDF5D9;
  border-color: #FCEEC1;
}

/* The background, and border colors of the Success messages */
.ac-skin .success {
  background-color: #E2F9E3;
  border-color: #D9F1DA;
}

/* The background, and border colors of the Error messages */
.ac-skin .error {
  background-color: #FAE5E3;
  border-color: #E6D2D2;
}

/* The color of the Required star on the Register & Checkout pages */
.ac-skin .required label span, .required .star, .needed_star {
  color: #c10808;
}

/* The text, and border color of the inputs when focused */
.ac-skin .f-group .f-row input:focus {
  color: #000;
  border-color: #aeaeae;
}

/* The color of the Click to Zoom link below the main image on the Item page */
.ac-skin .preview a {
  color:#000000;
}

/* The hover color of the Click to Zoom link below the main image on the Item page */
.ac-skin .preview a:hover {
  /*! color: #1F82CF; */
}

/* The color of the title on the item page */
.ac-skin .item-details .title, .itemTitleMobile {
  color:#000000;
}

/* The color of the code/description on the item page just below the title */
.ac-skin .item-details .props li {
  color:#000000;
}

/* The color of the border underneath each review on the item page */
.ac-skin .reviews ul li {
  border-color: #DDDCDF;
}

/* The color of the title, and date for each review on the item page */
.ac-skin .reviews ul li .top, .ac-skin .reviews ul li .date {
  color:#000000;
}

/* The background, border, and text color of the title for the Reviews sections on the item page */
.inner-socket.margin-t20 .title {
  background-color: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

/* The background, border, and text colors for the popup messages */
.ac-skin .popup {
  background-color: #fafafa;
  border-color: #000000;
  color: #000000;
}

/* The background, border, and text colors for the popup messages */
#shipcostestimator {
  background-color: #EDEDED;
  border-color: #aeaeae;
}

/* The border color for the Save Basket area on the shopping cart page */
#basketdata {
  border-color: #DDDCDF;
}

/* The text color for the values in the order total section of the shopping cart page */
table.order-total .val{
    color:#000000;
}

/* The background, and border color of the payment section in the checkout */
#cc {
  background-color: #e4e4e4;
  border-color: #aeaeae;
}

/* The border color for the ship to single/multiple addresses section */
.ac-skin .shipped-to {
  border-color: #AEAEAE;
}

/* The text, border, and background color of the get a quote form */
#get-quote-form-body {
    color:#000000;
    border-color: #000000;
    background-color: #FFFFFF;
}

/* The border color of the contact information of the get quote form */
#get-quote-form #contact-information-section {
    border-color: #AAAAAA;
}

/* The border color for the fields on the get quote form */
#get-quote-form .quote-form-section .quote-form-section-inwrapper .qfield,
#get-quote-form .quote-form-section .quote-form-section-inwrapper .tfield {
    border-color: #CCCCCC;
}

/* The text color of the section title of the get quote form */
.quote-form-section .quote-section-title {
    color: #000000;
}

/* The border color for the labels on the get quote form */
#get-quote-form .clabel, #get-quote-form .slabel {
    color: #181818;
}

/* The background color of the main title for the get quote form */
#get-quote-form #get-a-quote-top {
    background: #000000;
}

/* The text color of the main title for the get quote form */
#get-quote-form #get-a-quote-h1 {
    color: #FFFFFF;
}

/* The text color for errors */
.field-errors {
    color: #c10808;
}

/* The background, and text color of the footer */
.new-footer {
    background-color: #E8E9E8;
    color: #000000;
}

/* The text color of the headings in the footer */
.new-footer h2 {
    color: #4d4d4d;
}

/* The background, and icon colors of the Twitter icon in the footer when hovering */
.new-footer .socialIcons li.twitterIcon a:hover {
  background-color: #2799DA;
  color: #FFFFFF;
}

/* The background, and icon colors of the Facebook icon in the footer when hovering */
.new-footer .socialIcons li.facebookIcon a:hover {
  background-color: #2C4388;
  color: #FFFFFF;
}

/* The background, and icon colors of the Youtube icon in the footer when hovering */
.new-footer .socialIcons li.youtubeIcon a:hover {
  background-color: #FF101F;
  color: #FFFFFF;
}

/* The background, and icon colors of the Linkedin icon in the footer when hovering */
.new-footer .socialIcons li.linkedinIcon a:hover {
  background-color: #005CA5;
  color: #FFFFFF;
}

/* The background, and icon colors of the Google Plus icon in the footer when hovering */
.new-footer .socialIcons li.googleplusIcon a:hover {
  background-color: #D3342C;
  color: #FFFFFF;
}

/* The text color of links in the footer */
.new-footer a {
    color: #4d4d4d;
}

.new-footer a:hover, .new-footer a:focus {
  color: #004E99;
}

/* The color of the strong elements in the footer */
.new-footer ul strong {
    color: #9FB9C7;
}

/* The text color of links in the footer when hovering */
.new-footer a:hover {
    /*! color: #FFB800; */
}

/* The color of the checkout headings when validation has failed */
.checkoutInfoTitle.title.validationFailed {
  background-color: #980003;
}

/* The color of the checkout headings when validation has passed */
.checkoutInfoTitle.title.validationPassed {
  background-color: #025900;
}

/* The text color of the small information text under some input fields on the checkout/registration */
.info_needed {
  color:#666;
}

/* The border color around an item on the category page when hovering */
#category .listing div.item:hover {
  border-color: #000000;
}

/* The background, and text color of the copyright section at the bottom of the footer */
div#copyright {
    background: #000;   
    color: #FFF;
}

/* The text color of the payment header on the registration page if one page checkout is enabled */
.paymentHeader {
    color: #000000;
}

/* The background color of the Youtube popup */
#youtube_container{
  background-color: #FFFFFF;
}

/* The background color of the quick look popup */
.ac-skin#item .ui-widget-header {
  background-color: #000000;
}

/* The border, and background color of the Out of Stock messages on the category page */
.itemStockMsg {
  border-color: #000000;
  background-color: #FFFFFF;
}

/* The color of the breadcrumbs on the side of the category/item pages */
.sideNavCrumbs ul a, .sideNavCrumbs ul li {
  color: #525253;
}

/* The hover color of the breadcrumbs on the side of the category/item pages */
.sideNavCrumbs ul a:hover {
  color: #00A7E8;
}

/* The border color of the Search Within box on the category page */
#catSearchForm .top-search-form input[type="text"] {
  border-color: #000000;
}

/* The border color of the submit button for the Search Within box on the category page */
#catSearchForm .top-search-form input[type="submit"] {
  border-color: #000000;
}

/* The text color of the breadcrumbs for the active facets */
span.facetCrumb, a.facetCrumb {
  color: #545659;
}

/* The color of the button in the bottom right corner to go to the top of the page */
.topBtn a {
    color: #FFFFFF;
}

.topBtn:hover, .topBtn:focus {
  background-color: #5A2828;
}

.topBtn a:hover, .topBtn a:focus,
.topBtn:hover a, .topBtn:focus a {
  color: #9696FF !important;
}

/* The color of the button in the bottom right corner to go to the top of the page when over the footer */
.topBtn.topBtnWhite a {
    /*! color: #333333; */
}

/* The background, and text color of the save percentage badge on the category page */
.savePercentBadge {
  background-color: #000000;
  color: #FFFFFF;
}

/* The background, and border colors of the sub navigation drop downs of the main navigation bar */
.ac-skin .search-bar .main-menu .subNav {
    background-color: #FFF;
    border-color: #000000;
}

/* The text, and bottom border color for the product title in the featured products section */
.featuredProduct .product-title {
  color: #666666;
  /*! border-color: #C7C6C8; */
}

/* The bottom border color for the product description in the featured products section */
.featuredProduct p {
  border-color: #C7C6C8;
}

/* The border color around a featured product when hovering */
.featuredProduct:hover {
  border-color: #000000;
}

/* The link color when hovering over a featured product */
.featuredProduct:hover a .product-title {
  /*! color: #a22222; */
  /*! border-color: #000000; */
}

/* The color of the empty review stars */
#review .fa.fa-star, #review .fa.fa-star-o,
.shopByReview .fa.fa-star, .shopByReview .fa.fa-star-o,
.categoryStars .fa-star, .categoryStars .fa-star-half-o, .categoryStars .fa-star-o,
.reviews .fa-star, .reviews .fa-star-o, .reviews .fa-star-half-o {
  color: #D3D3D3;
}

/* The color of the filled in review stars */
#review .fa.fa-star, .shopByReview .fa.fa-star, .categoryStars .fa-star, 
.categoryStars .fa-star-half-o, .reviews .fa-star, .reviews .fa-star-half-o {
  color: #C5AA23;
}

/* The text color of the item title on the basket page */
.table.basket .item-title a {
  color: #000000;
}

/* The color of the checkout breadcrumbs that have already been completed */
.checkoutCrumbIcons .complete, .checkoutCrumbLabels .complete,
.checkoutCrumbLabels .complete a{
  /* color: #C1C1C1; */
}

/* The color of the checkout breadcrumb for the current page */
.current .checkoutCrumbIcons, .current .checkoutCrumbLabels {
  color: #0071aa;
}

/* The color of the paging links for the category page */
.pagination > li > a {
  color: #000000;
}

/* The background, and text color of the active page for the paging links on the category page */
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { 			
	background-color: #000000; 			
	border-color: #000000; 			
} 			

/* The background, and text color of the disabled paging links on the category page */
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { 			
	/*! background-color: #f5f5f5; */ 			
	/*! color: #5b5b5b; */
  /*! text-decoration: line-through; */
  /*! cursor: not-allowed; */
} 

@media only screen and (max-width : 767px) {
 
    /* The background color, and gradient of the mobile menu navigation */
    #mobile-menu #nav {
        background: #064c82; /* Old browsers */
        background: -moz-linear-gradient(top,  #064c82 0%, #1a69a6 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#064c82), color-stop(100%,#1a69a6)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #064c82 0%,#1a69a6 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #064c82 0%,#1a69a6 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #064c82 0%,#1a69a6 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #064c82 0%,#1a69a6 100%); /* W3C */
    }

    /* The text color of the mobile navigation */
    #mobile-menu #nav li {
        color: #FFFFFF;
    }
    
    /* The background, and text color of the mobile header */
    #mobile-header {
        background: #FFFFFF; /* Old browsers */
        color: #FFFFFF;
    }
    
    /* The link color of the mobile header */
    #mobile-header a {
        color: #000000;
    }
    
    /* The background color for the logo in the header on the mobile site */
    .mobileLogo {
        background-color: #FFFFFF;
    }
    
    /* The border colors for the top, and bottom borders of the nav bar on the mobile site */    
    .scrollHead.headerFixed {
        border-color: #000000;
    }
    
    /* The background color of the header search area on the mobile site */
    .mobileSearch {
        background-color: #FFFFFF;
    }
    
    /* The background, and border color of the text area of the header search on the mobile site */
    .mobileSearch #searchForm .top-search-form table input[type="text"] {
        background-color: #FFFFFF;
        border-color: #000000;
    }
    
    /* The background, and text color of the submit button of the header search on the mobile site */
    .mobileSearch #searchForm .top-search-form table input[type="submit"] {
        background-color: #FFFFFF;
        color: #000;
    }
    
    /* The background color of the category navigation in the header of the mobile site */
    .ac-skin .filter.categories ul {
        background-color: #000000;
    }
    
    /* The text color of the category navigation in the header of the mobile site */
    .ac-skin .filter.categories ul li a {
        color: #FFFFFF;
    }
    
    /* The color of the sort links on the category page */
    .catSortLinks span a {
        color: #99A1AE;
    }
    
    /* The color of the active sort link on the category page */
    .catSortLinks span a.sortSelected {
        color: #000000;
    }
    
    /* The background, and border colors of the menu at the bottom of the mobile site */
    .mobileNav {
        background-color: #FFFFFF;
        border-color: #000000;
    }
    
    /* The background color of the category menu at the bottom of the mobile site */
    .mobileMenu {
        background-color: #000000;
    }
    
    /* The link color of the category menu at the bottom of the mobile site */
    .mobileMenu ul li a {
        color: #FFFFFF;
    }
    
    /* The left border color between the icons in the bottom menu on the mobile site */
    .mobileNav ul li {
        border-color: #000000;
    }
    
    /* The color of the icons in the bottom menu on the mobile site */
    .mobileNav ul li a {
        color: #000000;
    }
    
    /* The background color of the options menu on the mobile site */
    .optionsMenu {
        /* background-color: #000000; */
    }
    
    /* The link color of the options menu on the mobile site */
    .optionsMenu ul li a {
        color: #FFFFFF;
    }
    
    /* The disabled link color of the options menu on the mobile site */
    .optionsMenu ul li a.fontDisabled {
        color: #808080;
    }
    
    /* The text color of the refine button on the mobile site */
    .ac-skin .side-nav .filter.refine .title {
        color: #FFFFFF !important;
    }
    
}