/* Odos layout set — stylesheet for the Odos B2C customer group. It started
* from Dealer.css's dark-header theme, without its dealer pricing (margin,
* RRP) and without the sections Dealer.css hides.
* Palette: Light Blue #00A3E0 (accent) · Dark Blue #002E5D
* Dark Grey #111111 (footer, text) · White #FFFFFF
* Top strip and header (logo + search) in charcoal #282A2C, menu bar
* #3D3F42, rating banner light grey #F1F1F1. */
.ismobile li.headerFilterListWrapper {
background: #002E5D !important;
}
/* Top strip and logo + search row in charcoal (on mobile the roof row
* carries the logo, account and basket) */
.Header,
.Div .NavBarRoof {
background: #282A2C !important;
}
/* Desktop: the top strip ends in a hairline in the menu-bar grey */
.Div .NavBarRoof {
border-bottom: 0;
}
body:not(.ismobile) .Div .NavBarRoof {
border-bottom: 1px solid #3D3F42;
}
/* Rating banner: light grey with black text, icons and stars; on desktop as
* wide as the content column (1320px, like .Middle's content box) */
.ratingBanner {
background: #F1F1F1 !important;
margin-top: 10px;
}
body:not(.ismobile) .ratingBanner {
background: transparent !important;
}
body:not(.ismobile) .ratingBannerWrapper {
box-sizing: border-box;
width: calc(100% - 48px);
max-width: 1320px;
margin: 0 auto;
background: #F1F1F1;
}
.ratingBannerIconStarsText a,
.ratingBanner * {
color: #000 !important;
}
.ratingBannerIconTextWr svg path {
fill: #000;
}
.NavBarTop *,
.Header *,
.schematics-page .IC_MiniSchematics a,
.Div .NavBarRoof *,
.ismobile li.headerFilterListWrapper * {
color: white !important;
}
.NavBarTop {
background: #3D3F42;
}
.MyAccountLink a:before {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.Header .NavBarElement4 a:before {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.BasketIconLink span:first-child, .basket-icon-link span:first-child {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
/* Search bar: white field with a Light Blue button. The field needs a
* stronger selector than ".Header *" to keep its text dark. */
.Header .SearchForm.horizontal-search > input {
background: white;
color: #111111 !important;
border: 0;
border-radius: 0;
}
.Header .SearchForm.horizontal-search > input::placeholder {
color: #6B7785 !important;
opacity: 1;
}
.Header .SearchForm.horizontal-search > button {
background: #00A3E0;
border-color: #00A3E0;
border-radius: 0;
transition: background 0.2s;
}
.Header .SearchForm.horizontal-search > button:hover {
background: #0091C8;
border-color: #0091C8;
}
.InputField.SearchForm, .InputField.SearchForm:hover {
border: 0;
}
.MainNavTabs li.active a:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.MainNavTabs li a:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.MainNavTabs li a:hover:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.NavBarTop .NavigationElement > a {
color: white !important;
}
.IC_Category-HamburgerMenu > a:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.footer-logo-wrapper img,
.NavigationText img {
filter: invert(1) brightness(2);
}
.udtActiveLang:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
#IC_APSISOneNewsletter,
.NavBarTop .ep-megamenu-second-level-element>a,
.Header .LocaleFlags ul li a,
.NavBarTop .IC_FAQTab {
color: #111111 !important;
}
.NavBarTop .SizeContainer .NavigationElement.active-item > a {
color: #00A3E0 !important;
}
.FooterContainer {
border-top: 1px solid #111111;
background: #111111;
}
.FooterContainer * {
color: white !important;
}
.footSocial svg path{
fill: white;
}
.FooterContainer a,
.footSocial li a svg path,
.footSocial li a {
transition: 0.2s;
}
.FooterContainer a:hover,
.FooterContainer a:hover *,
.footSocial li a:hover {
color: #00A3E0 !important;
}
.footSocial li a:hover svg path {
fill: #00A3E0 !important;
}
.NavBarTop .ep-megamenu-second-level-element a {
color: #111111 !important;
}
.ismobile .Div .NavBarRoof .SizeContainer .NavigationElement.MyAccountLink {
background: url('data:image/svg+xml,') no-repeat center / auto;
}
.ismobile .Div .NavBarRoof .SizeContainer .BasketIconLink {
background: url('data:image/svg+xml,') no-repeat center / auto;
}
.ismobile .newMobileMenu {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.ismobile .Div .Header .PropertyContainer .SizeContainer .SearchBox {
background: #282A2C;
}
.ismobile .IC_LocaleFlagsMobile {
background: #3D3F42;
}
.ismobile .newDesMobileLinksSecondLevel a, .ismobile .newDesMobileLinks a, .ismobile .newDesMobileLinks a span {
color: #111111 !important;
}
.ismobile .newMobileMenu.active {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.ismobile .Footer {
background: #111111;
}
.IC_GotoDesktopLink span {
color: #111111 !important;
}
.IC_GotoMobileLink, .IC_GotoCategory {
background: white !important;
}
.IC_GotoMobileLink span {
color: #111111 !important;
}
.NavBarTop .SizeContainer .NavigationElement.Active>a {
color: #00A3E0 !important;
}
.backtotop:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent url('data:image/svg+xml,') no-repeat center / contain;
width: 100%;
height: 100%;
border-radius: 50%;
}
.backtotop img {
display: none;
}
.backtotop:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #00A3E0;
width: 80%;
height: 80%;
border-radius: 50%;
}
.backtotop {
width: 40px;
height: 40px;
}
.ismobile .IC_GotoDesktopLink, .ismobile .IC_GotoCategory {
margin-bottom: 0;
}
.ismobile .shoppinListItemsImageContainer .ProductListImageBox {
width: calc(50% - 4px);
}
.ismobile .IC_DeliveryHeadline h2 {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.ismobile .IC_DeliveryHeadline span{
width: 30% !important;
white-space: nowrap;
}
.ismobile .MultipleStep-Container {
background: #fff;
}
#RemoteSearch1{
padding: 0 10px 10px 10px;
}
.Header .ContextBox .BoxContainer{
padding: 0;
}
.IC_LocaleFlagsMobile{
margin-top: 0;
}
.Header .ShopLogo,
.Div .Header .PropertyContainer .SizeContainer .SearchBox .BoxContainer{
margin-top: 6px;
}
.ismobile .filterListWrapper .showResultsBtnWrapper button,
.ismobile .filterListWrapper .IC_ViewAllFilters a {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.Header .LocaleFlags {
margin-right: 39px !important;
}
.trade-associations img{
filter: invert(1) brightness(10);
}
body.StoreAT .trade-associations img,
body.StoreUK .trade-associations img{
filter: none;
}
.manufacturer-page .CategoryList .CategoryImage {
display: block;
}
.manufacturer-page .wrapperCatTitleImage{
padding: 0 !important;
}
/* Checkout header: charcoal bar (like the shop header) with the white Odos logo instead of the
* Brownells parchment banner (#MultiCheckout .Header in IC_GeneralStyle_2024).
* The template hard-codes logos/checkout-logo.png, so the ![]()
is hidden and
* the logo is drawn as a background; the link around it stays clickable. */
#MultiCheckout .Header {
background: #282A2C !important;
width: auto;
top: 0;
left: 0;
margin: 0 0 20px;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
#MultiCheckout .Header .Logo {
margin: 0;
width: 190px;
height: 70px;
background: url('/WebRoot/MediaDefinition/odos/odos_logo_white.svg') no-repeat left center / contain;
}
#MultiCheckout .Header .Logo a {
display: block;
width: 100%;
height: 100%;
}
#MultiCheckout .Header .Logo img {
display: none;
}
#MultiCheckout .Header .Continue {
position: static;
}
#MultiCheckout .Header .Continue a {
color: white !important;
transition: 0.2s;
}
#MultiCheckout .Header .Continue a:hover {
color: #00A3E0 !important;
}
/* Checkout steps: active step (and its arrow tip) in Dark Grey #111111.
* The :before notch keeps the grey of done steps. */
#MultiCheckout .CheckOutNav li.active,
#MultiCheckout .CheckOutNav li.active:after {
background: #111111;
}
/* Checkout container: even all-round shadow instead of IC_GeneralStyle_2024's
* downward-offset one. */
#MultiCheckout .MultipleStep-Container {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
/* Message boxes (.DialogMessage + .MessageInfo/Warning/Error/…): flat cards
* with rounded corners, a coloured accent bar and vector icons instead of the
* shop style's yellow-bordered boxes with PNG icons. The shop style sets the
* icons and the 40px indent with !important, so these overrides need it too. */
html body .MessageError,
html body .MessageWarning,
html body .MessageWarningSmall,
html body .MessagePositiveResult,
html body .MessageInfo,
html body .MessageConfirmAction,
html body .Message,
html body div.DialogMessage.NoSymbol {
border-style: none;
border-left-style: solid;
border-left-width: 4px;
border-radius: 8px;
background-repeat: no-repeat;
background-position: 16px 15px !important;
background-size: 20px 20px;
padding: 14px 16px 14px 48px !important;
color: #111111;
line-height: 1.5;
box-sizing: border-box;
}
html body .DialogMessage h3 {
margin: 0 0 4px !important;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: #111111;
}
html body .DialogMessage p {
font-size: 13px;
line-height: 1.5;
color: #111111;
}
html body .DialogMessage a {
color: #002E5D !important;
text-decoration: underline;
}
html body .DialogMessage a:hover {
color: #00A3E0 !important;
}
html body .MessageInfo,
html body .Message {
border-left-color: #00A3E0;
background-color: #E5F6FC;
background-image: url('data:image/svg+xml,') !important;
}
html body .MessageWarning,
html body div.MessageWarningSmall {
border-left-color: #E8A100;
background-color: #FFF6DF;
background-image: url('data:image/svg+xml,') !important;
}
html body .MessageError {
border-left-color: #D93025;
background-color: #FCEBEA;
background-image: url('data:image/svg+xml,') !important;
}
html body .MessagePositiveResult {
border-left-color: #2E9E5B;
background-color: #E8F5EC;
background-image: url('data:image/svg+xml,') !important;
}
html body .MessageConfirmAction {
border-left-color: #002E5D;
background-color: #E8EEF5;
background-image: url('data:image/svg+xml,') !important;
}
/* Compact variant: smaller icon and padding. */
html body div.MessageWarningSmall {
min-height: 0;
padding: 8px 12px 8px 36px !important;
background-position: 12px 10px !important;
background-size: 16px 16px;
}
html body .DialogMessage.MessageWarningSmall p {
margin: 0;
}
/* Without symbol: same card, no icon, no icon indent. A bare .NoSymbol box
* (no message type) gets a neutral grey. */
html body div.DialogMessage.NoSymbol {
padding-left: 16px !important;
background-image: none !important;
}
html body div.DialogMessage.NoSymbol:not([class^="Message"]):not([class*=" Message"]) {
border-left-color: #C9CED6;
background-color: #F4F6F8;
}
/* ==========================================================================
* Odos colours across the 2024 storefront
* Brownells' dark red (#933311 and nearby shades) becomes Dark Blue #002E5D,
* its hover shades Light Blue #00A3E0, and the light brown surfaces (#ede6d4
* and nearby shades) a Light Blue tint #E5F6FC; full-strength Light Blue on
* those large areas would leave dark text unreadable. Sale and price reds
* stay red. Selectors mirror IC_GeneralStyle_2024* and the shop style so the
* later-loaded Odos.css wins at equal specificity.
* ======================================================================== */
:root {
--accent-color: #002E5D;
--accent-color-hover: #00A3E0;
--accent-color-h: #00A3E0;
--darkred: #002E5D;
--sb-thumb-color: #002E5D;
}
body {
background-color: #FFFFFF;
}
.NavBarLeft .ContextBoxHead,
#ProductInfoTabs .ui-tabs-nav .ui-tabs-active a,
#ProductCrossTabs .ui-tabs-nav .ui-tabs-active a,
.IC_APSISOneNewsletter,
.ismobile .IC_LoadMoreButton,
.ismobile .IC_APSISOneNewsletter {
background-color: #002E5D;
}
.NavBarLeft .ShopNameHead,
.NavBarLeft .ContextBoxHead,
.NavBarLeft .RemoteSearchFacetCategory .FacetName,
.NavBarLeft .RemoteSearchFacetFilter > .FacetName,
.IC_ShopByFirearm,
.item-wrap > div,
.row-container > div,
.ui-autocomplete .ui-state-focus,
.IC_APSISOneNewsletter_Overlay,
#ProductDYKTabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.varCount,
.customSelect:active,
.customSelectValues > *:active,
.myAccOrderSteps .myAccOrderStep.unresolved-l:before,
.myAccOrderSteps .myAccOrderStep.unresolved-r:after,
.myAccOrderSteps .myAccOrderStep.unresolved:before,
.myAccOrderSteps .myAccOrderStep.unresolved:after,
.myAccOrdersBoxWrapper .IllustratedLink a:hover,
.modalConfirmModalCancelOrderInfoHeader,
.ismobile .schematics-page .IC_Guntypes ul,
.ismobile .IC_Manufacturers .IC_LetterBox,
.ismobile .IC_LocaleFlagsMobile,
.ismobile .IC_ShopByFirearm,
.ismobile .row-container > div,
.ismobile .item-wrap > div,
.ismobile .ui-autocomplete .ui-state-focus,
.ismobile .IC_APSISOneNewsletter_Overlay,
.ismobile .mobileProductTubs button.active,
.ismobile #ProductDYKTabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ismobile .varCount,
.ismobile .headerFilterListWrapper {
background: #E5F6FC;
}
.RemoteSearchFacetsReset,
.IC_ShopByFirearmButton,
.IC_SearchWithin .IC_SearchWithinButton,
.IC_LoadMoreButton:hover,
.slick-dots li.slick-active button:before,
.radiobuttonlist input[type="radio"]:checked+span+label,
.radiobuttonlist input[type="radio"]:checked+span+span+label,
button.cta,
.RemoteSearchFacet .IC_ViewAllFilters a:hover,
.sliderBtnOk,
.de_epages-remotesearchUiSuggest-box .btn:hover,
.rndbtn,
.btnToggleDescription:hover,
.quantityValue.active,
.quantityValue:hover,
.filter-tab-item#onHoldOrders:before,
.ismobile .CheckOutNav li.active,
.ismobile .CheckOutNav li.active:before,
.ismobile .IC_ShopByFirearmButton,
.ismobile .IC_SearchWithin .IC_SearchWithinButton,
.ismobile .radiobuttonlist input[type="radio"]:checked+span+label,
.ismobile .radiobuttonlist input[type="radio"]:checked+span+span+label,
.ismobile .rndbtn,
.ismobile .RemoteSearchFacetsReset,
.ismobile .BasketCount,
.ismobile .CategoryProducts .IC_LoadMoreButton {
background: #002E5D;
}
#ProductInfoTabs .ui-tabs-nav .ui-tabs-active a:after,
#ProductCrossTabs .ui-tabs-nav .ui-tabs-active a:after {
border-top-color: #002E5D;
}
.schematics-page .IC_MiniSchematics a:hover,
.IC_LoadMoreButton,
.ProductOutStockIcon span,
.ProductVariations .IC_ProductBox .IC_PriceAndBasket .price-value,
.btnToggleDescription,
.requiresLicenseBtn.disabled:hover,
.InfoPriceArea_MessageContainer .ProductOutStock,
.InfoPriceArea_MessageContainer .ProductOutStock *,
.ismobile .ProductOutStockIcon span,
.ismobile .newDesMobileGoBackLink,
.ismobile .CategoryProducts .PagerTable:last-of-type .IC_Pager a.activePage {
color: #002E5D !important;
}
.schematics-page .IC_Guntypes h2,
.schematics-page .IC_Guntypes h2 a,
.schematics-page .ui-tabs .ui-tabs-nav li.ui-state-active a,
.ManufacturersNav .IC_NavigationLetterBox a,
.start-page .IC_ShopNameTop h1,
html .MessageWarning.IC_IsMerchantBox a,
html .MessageWarning.IC_IsMerchantBox a:hover,
html .MessageWarning.IC_IsMerchantBox a:active,
html .MessageWarning.IC_IsMerchantBox a:visited,
.IC_Pager a.activePage,
.IC_Pager .next,
.IC_Pager .previous,
select,
select.ep-uiInput.ep-uiInput-select,
div.IC_SP_TopLink,
div.IC_SP_Link,
div.IC_SP_TopLink a,
div.IC_SP_Link a,
.CouponAd,
.confident .close,
.de_epages-remotesearchUiSuggest-box li.products,
li.categories,
li.manufacturers,
.BreadCrumbWrapper .BreadCrumb a:hover,
.CategoryList h2#schematic,
.schematics-page .SKUListing .Ref .RefNumber,
.pageSize span.selected,
.RemoteSearchFacet .IC_ViewAllFilters a,
.de_epages-remotesearchUiSuggest-box .btn,
#ProductDYKTabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.CategoryText a:hover,
.ContentArea h3.brSectionTitle,
.brVariantBox .VariationInfo *,
.brVariantBox .VariationInfo,
.variationListHeader h3,
.variationListHeader p,
.InfoCenterArea .ProductInfoCol ul li span:not(.labelVariant),
.LinkProductRating:hover .productStarsMessage,
.variationsHeader h3,
.variationsModalContainer h5.variationsModalTitle,
.fixedBottomMenu span:hover,
.myAccSavedCardsTable .myAccCardNumber,
.shoppingListName:hover p,
.shoppingListActions .editShoppingListBtn:hover,
.shoppingListContentItemInfo a.manufacturer:hover,
.shoppingListContentItemInfo a:hover,
.modalDeleteItemText p span,
.ismobile .ProductDetails h1,
.ismobile .InfoArea h1,
.ismobile .ContentAreaWrapper h1,
.ismobile .Div .NavBarRoof .SizeContainer .NavElementIcon.BasketIconLink a,
.ismobile .CouponTable h3,
.ismobile .Div .NavBarTop .MyAccountLink li:hover a,
.ismobile .MobileMenu li:focus a,
.ismobile .Div .NavBarTop .MyAccountLink li:focus a,
.ismobile .Div .NavBarTop .SecondaryNav a:focus,
.ismobile .Div .NavBarTop .SecondaryNav a:hover,
.ismobile .Div .ContentArea h2,
.ismobile .Div .ContentArea h2 a,
.ismobile .Div .ContentArea h3,
.ismobile .Div .ContentArea h3 a,
.ismobile .ContentArea .BreadcrumbLastItem,
.ismobile .Middle .BreadcrumbLastItem,
.ismobile #ProductCrossTabs .ui-tabs-nav .ui-tabs-active a,
.ismobile .schematics-page .ui-tabs .ui-tabs-nav li.ui-state-active a,
.ismobile .InfoArea h1 strong a,
.ismobile #ProductInfoTabsMobile .ui-tabs-nav>.ui-state-active>a,
.ismobile #ProductInfoTabsMobile .ui-tabs-nav>.ui-state-activea:hover,
.ismobile .IC_ShopLocale,
.ismobile .IC_Pager a.activePage,
.ismobile .IC_Pager .next,
.ismobile .IC_Pager .previous,
.ismobile div.ContentArea div.IC_SP_TopLink,
.ismobile div.ContentArea div.IC_SP_Link,
.ismobile div.ContentArea div.IC_SP_TopLink a,
.ismobile div.ContentArea div.IC_SP_Link a,
.ismobile .CouponAd,
.ismobile .ProductVariations .price-value,
.ismobile #ProductDYKTabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ismobile .myAccPage .layoutTitleWrapper h1,
.ismobile .newDesMobileLinksSecondLevelHeader a,
.Coins a,
.Coins a:hover {
color: #000;
}
.IC_Manufacturers .IC_LetterBox h2 {
background: #002E5D none;
}
.IC_ProductNotes,
.ismobile .IC_ProductSpecs,
.ismobile .IC_ProductNotes {
background-color: rgba(0, 163, 224, 0.1);
}
.CheckOutNav li.done a:hover,
div.ProductListFoot .RealLink:hover {
color: #00A3E0 !important;
}
.IC_SearchWithinHeader {
border-bottom: 1px solid #002E5D;
}
.SearchHeader li div:hover,
.SearchHeader li.active div {
border-top: 1px solid #002E5D;
}
.SearchHeader li div:hover,
.SearchHeader li.active div {
border-right: 1px solid #002E5D;
}
.SearchHeader li div:hover,
.SearchHeader li.active div,
.SearchHeader li:first-child:hover div,
.SearchHeader li:first-child.active div {
border-left: 1px solid #002E5D;
}
.IC_SearchWithinFilter {
border-bottom: 1px dashed #002E5D;
}
.IC_SearchWithinFilter select,
.IC_SearchWithinDisplayOptions select,
select,
select.ep-uiInput.ep-uiInput-select {
border-color: #D0D7DE;
}
.IC_Pager a.activePage,
.IC_Pager .next,
.IC_Pager .previous,
.IC_LoadMoreButton,
.RemoteSearchFacet .IC_ViewAllFilters a,
.de_epages-remotesearchUiSuggest-box .btn,
.btnToggleDescription,
.ismobile .IC_Pager a.activePage,
.ismobile .IC_Pager .next,
.ismobile .IC_Pager .previous,
.ismobile .newDesMobileLinksSecondLevelHeader a {
border: 1px solid #002E5D;
}
.DashedSeparator,
.ismobile .DashedSeparator {
border-bottom: 1px dashed #D0D7DE;
}
.footerBottom .seals {
border-right: 1px dashed #D0D7DE;
}
.footerBottom .seals {
border-left: 1px dashed #D0D7DE;
}
div.IC_SP_SatisfactionTopElement,
div.IC_SP_DetailedText hr,
.slick-dots-container > ul li,
.ismobile div.ContentArea div.IC_SP_DetailedText hr,
.ismobile #IC_APSISOneNewsletter_formwrapper,
.ismobile .slick-dots-container > ul li {
background-color: #E5F6FC;
}
div.IC_SP_TopLink a::after,
div.IC_SP_Link a::after,
.ismobile div.ContentArea div.IC_SP_TopLink a::after,
.ismobile div.ContentArea div.IC_SP_Link a::after {
border-left: 6px solid #002E5D;
}
div.IC_SP_DetailedText hr,
.ismobile div.ContentArea div.IC_SP_DetailedText hr {
color: #E5F6FC;
}
.benefits {
background: #E5F6FC !important;
}
.benefits.red,
.slick-dots-container > ul li.slick-active,
.bg-onhold:before,
.ismobile .slick-dots-container > ul li.slick-active,
.ismobile .myAccPage .myAccAddressBtnAdd,
.ismobile .showResultsBtn,
.ismobile .viewAllFiltersWrapper a,
.ismobile .filterListWrapper .RemoteSearchFacet .IC_FacetContent button,
.ismobile .filterListWrapper a.IC_FacetViewBtn {
background: #002E5D !important;
}
.ProductListImageBox .btnFavorites:hover svg path {
stroke: #002E5D;
}
.sliderBtnOk:hover {
background: #00A3E0;
}
.brAIDescription,
.ismobile .brAIDescription {
background: rgba(0, 163, 224, 0.08);
}
.myAccPersonalBox .ContextBoxHead,
.myAccInnerBox .IllustratedLink a:hover,
.myAccInnerBox .IllustratedLink .active,
.myAccMemberAvatar {
background: rgba(0, 163, 224, 0.12);
}
.isdesktop .ReturnPolicyLink a:hover svg path[fill]:not([fill="none"]) {
fill: #00A3E0;
}
.isdesktop .ReturnPolicyLink a:hover svg path[stroke]:not([stroke="none"]) {
stroke: #00A3E0;
}
.ContentArea .myAccAddressBtnsWrapper button,
.ismobile .newDesMobileMenu .menuTab.active {
background: rgba(0, 163, 224, 0.12) !important;
}
.shoppingListActions .editShoppingListBtn:hover svg path {
fill: #002E5D;
}
.ismobile .IC_PagerManufacturersContainer a,
.ismobile .IC_PagerManufacturersContainer .Current,
.ismobile .PagerSizeContainer a,
.ismobile .PagerSizeContainer .Current,
.ismobile .Middle > .BreadCrumbWrapper:first-child,
.ismobile .Middle > .BreadCrumbWrapper,
.ismobile .ContentArea .ContentAreaWrapper > .BreadCrumbWrapper:first-child,
.ismobile .ContentArea .ContentAreaWrapper span > .BreadCrumbWrapper,
.ismobile .ContentArea .ContentAreaWrapper > .BreadCrumbWrapper {
border: 1px solid #D0D7DE;
}
.ismobile .PagerSizeContainer a,
.ismobile .PagerSizeContainer .Current {
color: #D0D7DE;
}
/* Mobile checkout steps: active step and top rule in Dark Grey, like desktop */
.ismobile ul.ContentArea.CheckOutNav {
border-top: 3px solid #111111;
}
.ismobile .CheckOutNav li.active,
.ismobile .CheckOutNav li.active:before {
background: #111111;
}
.ismobile .IC_ShopByFirearm {
border: 1px solid #E5F6FC;
}
.ismobile .footerBottom .payments {
border-top: 1px dashed #D0D7DE;
}
.ismobile .newDesMobileMenu .menuTab.active {
border: 1px solid #002E5D !important;
}
.NavBarLeft .ActiveNode,
.NavBarLeft a:hover,
.NavBarLeft input.Link.Action:hover,
.NavBarBottom .Active a,
.NavBarBottom .Active input,
.NavBarBottom .ActiveNode,
.NavBarBottom a:hover,
.ContentArea a:hover,
.ContentArea .Link:hover,
.ExtractedContentAreaElement a:hover,
.ExtractedContentAreaElement .Link,
table.Basket a:hover,
table.MiniBasket a:hover,
.CheckoutButtonsDiv a:hover,
.NavBarLeft table.Basket a:hover,
.NavBarLeft table.MiniBasket a:hover,
.NavBarLeft .CheckoutButtonsDiv a:hover,
.NavBarBottom table.Basket a:hover,
.NavBarBottom table.MiniBasket a:hover,
.NavBarBottom .CheckoutButtonsDiv a:hover,
.ep-megamenu-second-level-element a:hover,
.ep-megamenu-third-level-element a:hover {
color: #00A3E0;
}
.ep-uiThumbbox ul li.active {
border: 1px solid #00A3E0 !important;
}
.ep-uiThumbbox ul li.active {
box-shadow: 0 0 3px 0 #00A3E0;
}
html body span.ForumOverviewTreeRowEncircleContainer .ForumOverviewTreeRow:hover .ForumOverviewTreeRowEntry {
border-left: 4px solid #00A3E0;
}
/* Cases that need more than a colour swap */
.ep-megamenu-first-level-element > a:hover,
.ep-megamenu-first-level-element.Active > a {
color: #00A3E0 !important;
}
.basket-counter,
.IC_SaleTab {
background: #00A3E0;
}
.Footer .ContextBox .ContextBoxHead span,
.Footer .PropertyContainer .connect-welcome .NavBarElement {
color: #00A3E0;
}
#IC_APSISOneNewsletter,
.IC_FAQTab {
border: 1px solid #002E5D;
}
.MessageErrorLogin {
background-color: #FCEBEA !important;
}
.message-cookies {
background: #F1F1F1;
}
.message-cookies a,
.message-cookies a:hover {
color: #002E5D;
}
.schematics-page .IC_MiniSchematics img {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon[class*="ico-"] {
background-color: #E5F6FC;
}
.MessageLoading {
background-image: url('data:image/svg+xml,');
}
.waitLoaderSvgPreloader {
background: url('data:image/svg+xml,');
}
/* Mobile header, search and filter buttons (IC_GeneralStyleMobile_2024 /
* _2025_Menu set these with shorthands the colour swap above cannot reach). */
.ismobile .Header .SearchBox {
background-color: #282A2C;
}
.ismobile #RemoteSearch1 .search-button {
background: #00A3E0 url('data:image/svg+xml,') no-repeat center / 40%;
border-radius: 0;
}
.ismobile .BasketCount {
background-color: #00A3E0;
}
.ismobile .showResultsBtn,
.ismobile .viewAllFiltersWrapper a {
background-color: #002E5D !important;
border-radius: var(--btn-radius);
}
.ismobile .Footer {
background-color: #111111;
}
/* Sale stays a sale: mobile uses the brand red there, desktop #BD0C0A. */
.ismobile .sale {
color: #BD0C0A !important;
}
.ismobile .ProductListImageBox .IC_BannerSale:not(.IC_BannerDiscountExtra),
.ismobile .ProductListImageBox .IC_BannerNew,
.ismobile .ProductListImageBox .IC_BannerPreorder {
background: #BD0C0A !important;
}
.ismobile .FooterContainer .NavBarBottom {
background-color: #111111;
}
.ismobile .Div .Header .PropertyContainer .SizeContainer .SearchBox .BoxContainer input,
.ismobile #RemoteSearch1 input {
border: 1px solid #FFFFFF;
border-radius: 0;
}
/* Inline SVG icons drawn in the Brownells red (%23933410 / %23933311), redrawn
* in dark blue: filter and variant buttons, campaign timer, order-step icons,
* mobile back link and filter chips. Generated from the 2024/2025 stylesheets. */
#IC_APSISOneNewsletter:before {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.resetAllFilters:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.showAllVariations:after {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.deleteVariantLabelModal {
background: url('data:image/svg+xml,') no-repeat center / contain !important;
}
.CampaignValidTo:before {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-created {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-packed {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-outfordelivery {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-pickuprdy {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-delivered {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-pending {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-readyforshipment {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-shipped,
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-euhub,
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-shippedToHub {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-cancelled,
.myAccOrderSteps .myAccOrderStep.unresolved .myAccOrderStepIcon.ico-failed {
background: #E5F6FC
no-repeat center / 24px
url('data:image/svg+xml,');
}
.ismobile .newDesMobileGoBackLink::before {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.ismobile .RemoteSearchSelectedElementDeleteBtn {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
.ismobile .filterSvgPreloader {
background: url('data:image/svg+xml,') no-repeat center / contain;
}
/* Modern touches: flat buttons, rounded cards, soft shadows */
.IC_ProductBox {
border-radius: 8px;
transition: box-shadow 0.2s, border-color 0.2s;
}
.IC_ProductBox:hover {
background: #FFFFFF;
border-color: #D0D7DE;
box-shadow: 0 6px 20px rgba(0, 46, 93, 0.12);
}
/* Variant tiles keep their accent border on hover */
.IC_ProductBox.brVariantBox:hover {
border-color: var(--accent-color);
}
.IC_ProductBox .IC_PriceAndBasket .IC_Basket .ButtonBasket {
background: #002E5D;
border-color: #002E5D;
border-radius: var(--btn-radius);
transition: background 0.2s;
}
.IC_ProductBox .IC_PriceAndBasket .IC_Basket .ButtonBasket:hover {
background: #00A3E0;
border-color: #00A3E0;
}
.IC_ProductBox .IC_PriceAndBasket .IC_Basket .ButtonBasket.ButtonBasketBackorder {
background: #414141;
border-color: #414141;
}
/* Page numbers without frames; the current page stands out in bold Dark
* Blue, like the active "Anzeige pro Seite" value */
.IC_Pager a,
.IC_Pager a.activePage,
.IC_Pager .next,
.IC_Pager .previous,
.ismobile .IC_Pager a.activePage,
.ismobile .IC_Pager .next,
.ismobile .IC_Pager .previous {
border-color: transparent;
}
.IC_Pager a {
color: #4A5562;
}
.IC_Pager a.activePage {
font-weight: 700;
}
.de_epages-remotesearchUiSuggest-box {
border: 1px solid #D0D7DE;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 46, 93, 0.12);
}
button.cta,
.rndbtn,
.IC_LoadMoreButton,
.IC_ModelMakeButton,
.sliderBtnOk,
.RemoteSearchFacetsReset,
.IC_ShopByFirearmButton,
.IC_SearchWithin .IC_SearchWithinButton {
border-radius: var(--btn-radius);
transition: background 0.2s, color 0.2s;
}
.IC_ModelMakeButton {
background: #002E5D;
}
button.cta:hover,
.rndbtn:hover,
.IC_ModelMakeButton:hover,
.RemoteSearchFacetsReset:hover,
.IC_ShopByFirearmButton:hover,
.IC_SearchWithin .IC_SearchWithinButton:hover {
background: #00A3E0;
}
/* "Nach Waffentyp suchen", the "+ n Varianten" counter, the facet heads and
* the category/AI description in neutral grey: the Light Blue tint with the
* saturation taken out (same lightness). The GO button looks like the
* header's search button. */
.IC_ShopByFirearm,
.item-wrap > div,
.row-container > div,
.varCount,
.NavBarLeft .RemoteSearchFacetCategory .FacetName,
.NavBarLeft .RemoteSearchFacetFilter > .FacetName,
.NavBarLeft .ContextBoxHead,
.myAccPersonalBox .ContextBoxHead,
.MetaDescription,
.brAIDescription,
.ismobile .IC_ShopByFirearm,
.ismobile .item-wrap > div,
.ismobile .row-container > div,
.ismobile .varCount,
.ismobile .MetaDescription,
.ismobile p.MetaDescription,
.ismobile .brAIDescription {
background: #F1F1F1;
}
.ismobile .IC_ShopByFirearm {
border-color: #F1F1F1;
}
/* No corner triangle on the shop-by-firearm box */
.IC_ShopByFirearm .triangle,
.ismobile .IC_ShopByFirearm .triangle {
display: none;
}
.IC_ShopByFirearm .IC_ShopByFirearmButton,
.ismobile .IC_ShopByFirearm .IC_ShopByFirearmButton {
background: #00A3E0;
border-color: #00A3E0;
border-radius: 0;
}
.IC_ShopByFirearm .IC_ShopByFirearmButton:hover,
.ismobile .IC_ShopByFirearm .IC_ShopByFirearmButton:hover {
background: #0091C8;
border-color: #0091C8;
}
/* Variant buttons ("Alle anzeigen", "Alle Filter zurücksetzen"): black text
* at rest instead of the accent colour; hover/active keep their white text */
.variationBorderedBtn:not(:hover):not(:active) {
color: #000 !important;
}
/* "Mehr laden" (desktop outline button): black text and border at rest;
* hover keeps the Dark Blue fill with white text */
body:not(.ismobile) .IC_LoadMoreButton:not(:hover) {
color: #000 !important;
border-color: #000;
}
/* Action buttons (basket, review, Go/OK, filter and result buttons) in the
* Light Blue of the header search button, a shade darker on hover */
.ButtonBasket:not(.ButtonBasketBackorder):not(:disabled),
button.brBtnDef,
.IC_SearchWithin .IC_SearchWithinButton,
.IC_ModelMakeButton,
.sliderBtnOk,
button.cta,
.rndbtn,
.RemoteSearchFacetsReset,
.ismobile .IC_SearchWithin .IC_SearchWithinButton,
.ismobile .rndbtn,
.ismobile .RemoteSearchFacetsReset,
.ismobile .CategoryProducts .IC_LoadMoreButton,
.ismobile .showResultsBtn,
.ismobile .viewAllFiltersWrapper a {
background: #00A3E0 !important;
border-color: #00A3E0 !important;
color: white !important;
}
.ButtonBasket:not(.ButtonBasketBackorder):not(:disabled):hover,
button.brBtnDef:hover,
.IC_SearchWithin .IC_SearchWithinButton:hover,
.IC_ModelMakeButton:hover,
.sliderBtnOk:hover,
button.cta:hover,
.rndbtn:hover,
.RemoteSearchFacetsReset:hover,
.ismobile .IC_SearchWithin .IC_SearchWithinButton:hover,
.ismobile .rndbtn:hover,
.ismobile .RemoteSearchFacetsReset:hover,
.ismobile .CategoryProducts .IC_LoadMoreButton:hover,
.ismobile .showResultsBtn:hover,
.ismobile .viewAllFiltersWrapper a:hover {
background: #0091C8 !important;
border-color: #0091C8 !important;
}
/* Basket and checkout buttons (Zur Kasse, Anmelden, Weiter, Bestellen) in
* the same Light Blue; the trash icon button in the basket rows keeps its
* own look */
#BasketButtons button,
.DoOrder button,
button.DoOrder,
form[id^="AddContainerItemsToShoppingListForm"] button.Action,
#MultiCheckout button.ep-uiInput-button,
#MultiCheckout .OrderProcessNavigation button {
background: #00A3E0 !important;
background-image: none !important;
border-color: #00A3E0 !important;
color: white !important;
text-shadow: none !important;
}
#BasketButtons button:hover,
.DoOrder button:hover,
button.DoOrder:hover,
form[id^="AddContainerItemsToShoppingListForm"] button.Action:hover,
#MultiCheckout button.ep-uiInput-button:hover,
#MultiCheckout .OrderProcessNavigation button:hover {
background: #0091C8 !important;
border-color: #0091C8 !important;
}
/* Basket: "Weiter einkaufen" and "save basket to wish list" are secondary,
* so menu-bar grey instead of Light Blue. All basket buttons get the 3px
* corners of the other buttons and, on desktop, a bit more padding. */
#BasketButtons #ContinueShoppingButton,
form[id^="AddContainerItemsToShoppingListForm"] button[name="AddBasketToShoppingList"] {
background: #3D3F42 !important;
border-color: #3D3F42 !important;
}
#BasketButtons #ContinueShoppingButton:hover,
form[id^="AddContainerItemsToShoppingListForm"] button[name="AddBasketToShoppingList"]:hover {
background: #282A2C !important;
border-color: #282A2C !important;
}
#BasketButtons button,
.DoOrder button,
button.DoOrder,
button[name="AddBasketToShoppingList"] {
border-radius: 3px;
}
body:not(.ismobile) #BasketButtons button,
body:not(.ismobile) .DoOrder button,
body:not(.ismobile) button.DoOrder,
body:not(.ismobile) button[name="AddBasketToShoppingList"] {
padding: 6px 14px;
}
/* Variant counter and manufacturer letter heads in the menu-bar grey */
.varCount,
.ismobile .varCount,
.IC_Manufacturers .IC_LetterBox h2,
.ismobile .IC_Manufacturers .IC_LetterBox h2 {
background: #3d3f42 !important;
color: #fff !important;
}
/* Product page: the footer pushes the fixed price bar out of view as it scrolls
* in, instead of the bar covering the footer. Pure CSS — a view timeline on
* .FooterContainer drives the bar's `translate`, which stacks on the
* transform the .visible class toggles. Browsers without scroll-driven
* animations (Firefox for now) skip the block and keep the bar as before. */
@supports (animation-timeline: view()) {
body {
timeline-scope: --odosFooter;
}
.FooterContainer {
view-timeline: --odosFooter block;
}
.wrapperFixedPriceBox {
animation: odosFooterPushesPriceBox linear both;
animation-timeline: --odosFooter;
animation-range: entry 0% entry 70px;
}
}
@keyframes odosFooterPushesPriceBox {
from { translate: 0 0; }
to { translate: 0 100%; visibility: hidden; }
}
/* Shipping options in the checkout (consignor price boxes): full width,
* height from the content (the box is also an .ep-uiInput-button) */
.IC_ConsignorProduct_PriceInfo {
width: 100% !important;
height: auto !important;
}