/*
    Colours
*/

/*Background color of the entire page.
Mainly used for when a page is not long enough to fill the browser.*/
html {
  /*background-color: #000;*/
}

/* 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:#a22222;
}


/* Primary Link Hover Color */
a:hover {
  color: #a22222;
}

/* 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: #000000;
}

/* The link color of the top bar */
#top-bar a {
    color: #FFFFFF;
}

/* The color of the title on the category pages */
.ac-skin .categoryTitle {
  color: #000000 !important;
}

/* 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: #FFFFFF;
  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: #FFFFFF;
  border-color: #000000;
}

/* The text color for the category select button*/
.ac-skin #hd .top-search-form table .category-select .label {
  color:#000000;
}

/* 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 {
  color: #a22222;
}

/* The background, and text color for the section headers
(for example, the Featured Products section on the home page) */
.ac-skin .facets-menu-wrapper .filter .title, .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: #FFFFFF;
}

.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 .title {
  color: #000000 !important;
}

/* The text, and border colors of the facets on the left side of the category page*/
.ac-skin .side-nav .filter li, .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;
}

/* 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: #666666;
}

/* The hover color of the item names on the category page */
.ac-skin .listing .item:hover .name a {
  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 */
#category .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 background, and border colors of the primary buttons */
.btn.btn-primary {
  background-color: #33414e !important;
  border-color: #33414e !important;
}

/* The background, and border colors of the primary buttons when hovered */
.btn-primary:hover, .btn-primary:focus {
  background-color: #0C1013 !important;
  border-color: #0C1013 !important;
}

/* 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: #000000;
    color: #FFFFFF;
}

/* The text color of the headings in the footer */
.new-footer h3 {
    color: #9FB9C7;
}

/* 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: #FFFFFF;
}

/* 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: #99A1AE;
}

/* The color of the button in the bottom right corner to go to the top of the page */
.topBtn a {
    color: #000000;
}

/* 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: #FFFFFF;
}

/* 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 */
.checkoutCrumbIcons .current, .checkoutCrumbLabels .current {
  color: #E64D1B;
}

/* 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: lightgray; 			
} 

@media only screen and (max-width : 768px) {
 
    /* 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;
    }
    
}