﻿html {
    position: relative;
    min-height: 100%;
}

body {
    background: white;
    font-family: Roboto;
    font-size: 16px;
}

nav {
    background: #0b2240;
    min-height: 60px;
}

footer {
    background: #0b2240;
    color: whitesmoke;
    font-size: 0.9rem;
    border-top: 2px solid #2658a4;
    text-align: center;
}

article {
    max-width: 900px;
    margin: 0px auto;
    font-family: Arial, sans-serif;
    background: white;
}

figure {
    max-width: 95%;
    margin: 0 auto;
    text-align: center;
}

figure img {
    max-width: 100%;
    border: 2px dashed dimgray;
}

figcaption {
    font-style: italic;
    display: inline-block;
    max-width: 100%;
    padding: 5px;
    color: dimgray;
}

.nav-brand {
    text-decoration: none;
    display: inline-block;
}

.nav-brand img {
    height: 48px;
}

.nav-brand span {
    color: whitesmoke;
    font-size: 24px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 20px;
    }


.navbar-nav li {
    background: #2658a4;
    border-radius: 5px;
    font-weight: bold;
    padding: 0;   
}

    .navbar-nav li:hover {
        background: #4678c4;
    }

    .navbar-nav li a {
        color: white;
        text-decoration: none;
    }

#DesktopNav li 
{
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    padding: 0px;
    margin-left: 8px;
    margin-top: 2px;
}

#DesktopNav ul {
    display: inline-block;
}

.navbar-nav li a {
    display: block;
    padding: 5px;
}

.navbar-nav li img {
    height: 32px;
    margin-right: 10px;
}

.MasterCategoryList {
    color: white;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.MasterCategoryList li {
    border-radius: 0px;
    padding-left: 30px;
}

#SubNav {
    background: dimgray;
    text-align: center;
}

.ActiveNav
{
    text-align: center;
    margin: 0 auto;
}

.ActiveNav a 
{
    color: white;
    text-decoration: none;
}

.ActiveNav span {
    color: white;
    padding: 0 3px 0 3px;
}




h1 {
    background: gold;
    padding: 5px 10px;
    margin: 5px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: black;
    border-radius: 5px;
    border: 2px solid gray;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    border: 2px solid dimgray;
    border-radius: 5px;
    background: lightyellow;
    font-size: 1.3rem;
    padding: 5px 10px;
}

h5 {
    border-top: 1px solid dimgray;
    border-bottom: 2px solid dimgray;
    font-size: 20px;
    background: aliceblue;
    text-align: center;
    padding: 3px 0px;
}



a {
    text-decoration: none;
}

#MainContainer {
    /*    margin-top: 60px;    if no news nav present...*/
    margin-top: 89px;
}

.PrintHeader {
    display: none;
}

.FireSaleBlock {
    border: 1px solid red;
    
}

    .FireSaleBlock h1 {
        background: white;
        font-size: 1.2rem;
        border: none;
        box-shadow: none;
        border-radius: 0;
        border-bottom: 2px solid steelblue;
    }

    .FireSaleBlock h2 {
        font-size: 1.2rem;
        text-align: center;
    }

    .FireSaleBlock img {
        width: 100%;
    }


.ProductBlock {
    border: 1px solid dimgray;
    border-radius: 8px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
}

.ProductBlock h1 {
    background: white;
    font-size: 1.2rem;
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 2px solid steelblue;
}

.ProductBlock h2 {
    font-size: 1.2rem;
    text-align: center;
}

.ProductBlock img {
    width: 100%;
}
    

.WebBlock {

}

    .WebBlock h1 {
        background: lightgray;
    }

    .WebBlock h2 {
        font-size: 1.2rem;
        text-align: center;
        margin: 0;
    }

.TechTipsList {

}

.TechTipItem h2 {
    color: #2F61AD;
    font-size: 1.3rem;
}

.TechTipItem a {
    text-decoration: none;
}

.atcell {
    border: 1px solid black;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    padding: 2px;
    font-size: 0.7rem;
}

.numerator {
    border: 1px solid #2F61AD;
    font-size: 1.3em;
    font-weight: bold;
    background: lightyellow;
    text-align: center;
    width: 70px;
}

.TechTipItem .Description {
    font-size: 14px;
    font-weight: normal;
    margin: 5px;
    padding: 0;
}

.red-bold {
    color: red;
    font-weight: bold;
}

.ImageThumb {
    border: 1px solid dimgray; 
    background: white;
    padding: 2px;
    margin: 1px;
    max-width: 50px; 
    max-height: 50px;
}

.YellowDottedBox {
    border: 1px dashed dimgray;
    background: lightyellow;
    color: black;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 5px 0px;
}

.StockIndicator {
    text-align: center;
    font-weight: bold;
    color: white;
    width: 100%;
    border-radius: 3px;
}

.CheckoutContainer {
    
}

    .CheckoutContainer a {
        color: black;
    }

    .CheckoutContainer span {
        font-size: 0.8rem;
        padding: 0;
        text-align: right;
        padding-right: 8px;
    }

.CheckoutSub {
    background: aliceblue;
    border-bottom: 1px solid lightsteelblue;
}

.ValidationError{
    border: 2px solid red !important;
    background: lightpink;
}

.ValidationSuccess {
    border: 2px solid darkgreen !important;
    background: lightgreen;
}

.tag {
    display: inline-block;
    border: 1px solid #2658a4;
    border-radius: 5px;
    padding: 3px 6px 2px 6px;
    color: black;
    background: lemonchiffon;
    font-weight: bold;
    margin: 3px;
}

.sku {
    border: 1px dashed #2658a4;
    padding: 1px 5px;
    color: black;
    background: lightyellow;
    font-weight: bold;
}

article h1 {
    margin: 0;
}

.PuzzleBG {
    background-color: #00196c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23134ce0' fill-opacity='0.47' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}

#AddCartModal .modal-content {
    background: white;
}

#AddCartModal .modal-header {
    background: #2658a4;
    padding: 4px 15px;
}

#AddCartModal .modal-header .modal-title {
    padding: 0;
    margin: 0;
    color: white;
}

.FeatureBox {
    border: 2px solid dimgray;
    border-radius: 5px;
    padding: 5px;
}

.FeatureImage {
    width: 80%;
}

.FeatureBox h1 {
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    border: none;
    background: lightyellow;
}

.FeatureBox h2 {
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    border: none;
    background: none;
}

.FeatureBox h3 {
    font-size: 1.1rem;
    text-align: center;
    font-weight: normal;
    border: none;
    background: none;
}

.FeatureBox a {
    color: black;
}

.FilterButton {
    border: 1px solid black;
    border-radius: 3px;
    padding: 2px 5px;
    background: lightgray;
    color: black;
    margin: 2px;
    display: inline-block;
}

.YTResponsive {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: 400px;
}

.shbox {
    display: flex;  
}

.featuretext {
    font-size: 1.3rem;
    border: 2px solid #2658a4;
    border-radius: 5px;
    padding: 5px 15px;
    text-align: center;
    background: aliceblue;
    margin: 0;
}