﻿#productDetail {
    float: left;
    width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
}

.col01 {
    float: left;
    width: 490px;
}

.col02 {
    float: right;
    width: 220px;
}

#productDetail #title {
    font-size: 12px;
    font-weight: 700;
    color: #3360AA;
    height: 16px;
    border-bottom: 2px solid #3360AA;
}

#productDetail #photo {
    float: left;
    width: 110px;
    margin: 0 5px 5px 0;
}

    #productDetail #photo .btn {
        margin-bottom: 2px;
    }

#productDetail #description {
    /*border-bottom: 2px solid #DDD;*/
    float: left;
    /*height: 220px;*/
    overflow: auto;
    width: 370px;
    margin: 0 0 5px;
}

    #productDetail #description .title {
        font-size: 12px;
        font-weight: 700;
        color: #3360AA;
        height: 16px;
        margin: 0 0 5px 0;
        padding: 0;
    }

    /*srs.8/15/2023.*/
    #productDetail #description a {
        font-weight: bold;
    }

#productDetail .brand_logo {
    float: left;
    width: 130px;
    margin-right: 5px;
    text-align: center;
    padding: 5px;
}

#productDetail #rating {
    float: left;
    margin-right: 5px;
    text-align: center;
    width: 30%;
    padding: 5px;
}

#productDetail #buttons {
    float: left;
    margin-right: 5px;
    text-align: center;
    width: 165px;
}

#productDetail #extras {
    /* float: right;
     margin: 0 10px 0 0;
     text-align: center;
     width: 370px; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

/*srs.8/15/2022. Added new css for new content display buttons (sds, tds, etc.)*/
#extras a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3360aa;
    background-image: linear-gradient(to bottom right, rgb(0 0 0 / 0), rgb(0 0 0 / 0.25));
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 0.4);
    margin: 4px;
    width: 44px;
    height: 44px;
    color: white;
    font-size: larger;
    font-weight: 700;
    text-decoration: none;
}

    #extras a:hover {
        background-color: #819e10;
    }

    #extras a.disabled {
        background-color: #ddd;
        color: #ddd;
    }

    #extras a.icon {
        font-family: "Font Awesome 5 Free";
        font-size: 20px;
        font-weight: 900;
    }

    #extras a.parts::before {
        content: "\f7d9";
    }

    #extras a.document::before {
        content: "\f15c";
    }

    #extras a.video::before {
        content: "\f144";
    }

    #extras a.list::before {
        content: "\f03a";
    }

#actions {
    border-bottom: 2px solid #3360AA;
    height: 16px;
    text-align: right;
}

#buyBox .header {
    float: left;
    width: 124px;
    height: 38px;
    background: url(../images/catalog/buyBox_top.gif) no-repeat left top;
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    text-align: right;
    line-height: 29px;
    padding: 0 8px;
}

#buyBox .content {
    float: left;
    width: 130px;
    background-color: #C0CCDF;
    font-size: 11px;
    padding: 0 5px;
}

#buyBox .bottom {
    float: left;
    width: 140px;
    height: 8px;
    background: url(../images/catalog/buyBox_btm.gif) no-repeat left top;
    margin-bottom: 5px;
}

.rewards {
    background: url(../images/catalog/icon_rewards.jpg) no-repeat left 2px;
    float: left;
    height: 29px;
    width: 26px;
}

#specialOrder {
    font-size: 11px;
    text-align: center;
}

    #specialOrder strong {
        color: #900;
        text-transform: uppercase;
    }

#stockTag {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

#stockBox .header {
    background: url("../images/catalog/stockBox_top.gif") no-repeat scroll left top transparent;
    color: #FFF;
    float: left;
    font-size: 12px;
    font-weight: 400;
    height: 28px;
    line-height: 20px;
    text-align: center;
    width: 124px;
    margin: 10px 0 0;
    padding: 0 8px;
}

#stockBox .content {
    background-color: #C0CCDF;
    float: left;
    font-size: 11px;
    width: 130px;
    padding: 0 5px;
}

#stockBox .bottom {
    background: url("../images/catalog/buyBox_btm.gif") no-repeat scroll left top transparent;
    float: left;
    height: 8px;
    width: 140px;
}

#stockBox .content strong {
    text-decoration: underline;
}

#stockLocation {
    float: left;
}

#stockQty {
    float: right;
    text-align: center;
}

#viewedItemsBox .header {
    background: url("../images/catalog/rvBox_top.gif") no-repeat scroll left top transparent;
    color: #FFF;
    float: left;
    font-size: 12px;
    font-weight: 400;
    height: 28px;
    line-height: 20px;
    text-align: center;
    width: 124px;
    margin: 10px 0 0;
    padding: 0 8px;
}

#viewedItemsBox .content {
    border-left: 1px solid #ACACAC;
    border-right: 1px solid #ACACAC;
    float: left;
    font-size: 11px;
    width: 128px;
    padding: 0 5px;
}

#viewedItemsBox .bottom {
    background: url("../images/catalog/rvBox_btm.gif") no-repeat scroll left top transparent;
    float: left;
    height: 8px;
    width: 140px;
}

#viewedItemsBox .priceBox .price {
    font-size: 11px;
    height: 12px;
}

.tabbedBox {
    clear: both;
    font-size: 11px;
    line-height: normal;
    margin: 20px 0 0;
}

    .tabbedBox ul {
        border-bottom: 1px solid #ACACAC;
        height: 20px;
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }

    .tabbedBox li {
        border-right: 1px solid #FFF;
        float: left;
        line-height: 20px;
        margin: 0;
    }

    .tabbedBox a:link, .tabbedBox a:visited {
        background: none repeat scroll 0 0 silver;
        color: #444;
        display: block;
        text-decoration: none;
        padding: 0 12px;
    }

    .tabbedBox ul li:first-child {
        border-left: 1px solid #ACACAC;
    }

    .tabbedBox ul li.selected {
        border-bottom: 1px solid #00468A;
        font-weight: 700;
    }

        .tabbedBox ul li.selected a:link, .tabbedBox ul li.selected a:visited {
            background: none repeat scroll 0 0 #00468A;
            color: #FFF;
        }

#moreInfo {
    border-bottom: 1px solid #ACACAC;
    border-left: 1px solid #ACACAC;
    border-right: 1px solid #ACACAC;
    height: 200px;
    overflow: auto;
}

#altProductsBox {
    /*border: 1px solid #00468A;*/
    float: left;
    line-height: normal; /*width:688px;*/
    width: 98%;
    overflow: auto;
    padding: 10px;
}

.altProd {
    float: left;
    text-align: left;
    width: 140px;
    padding: 0 5px;
}

#altProductsBox .priceBox .price {
    font-size: 12px;
}

/* Mobile */

ul.smtabs {
    border-bottom: 1px solid #FFF;
    list-style: none outside none;
    margin: 0 !important;
    padding: 0;
    height: 9.7em !important;
}

    ul.smtabs li {
        float: left;
        list-style-image: none !important;
        text-indent: 0;
        margin: 0 1px 0 0 !important;
        padding: 0;
        width: 100%;
    }

    ul.smtabs a {
        background: none repeat scroll 0 0 #C2CCDD;
        color: #333;
        display: block;
        font-size: 1.2em;
        height: 1em;
        line-height: 20px;
        position: relative;
        text-align: center;
        text-decoration: none;
        top: 0;
        margin: 0;
        padding: 0.5em;
    }

        ul.smtabs a:active {
            outline: medium none;
            font-weight: 700;
            background: none repeat scroll 0 0 #6187C1;
        }

        ul.smtabs a.current, ul.smtabs a.current:hover, ul.smtabs li.current a {
            background: none repeat scroll 0 0 #00468A;
            border-bottom: 1px solid #00468A;
            color: #FFF !important;
            cursor: default !important;
            font-weight: 700;
        }

div.smpanes div.smpane {
    display: none;
    background-color: #FFF;
    border: 1px solid #00468A;
    height: 21em;
    overflow: auto;
}

div.smpane div.smcontent {
    border-top: 18px solid #00468A;
    line-height: normal;
    padding: 10px;
}

/*Mobile*/



ul.tabs {
    border-bottom: 1px solid #FFF;
    height: 20px;
    list-style: none outside none;
    margin: 0 !important;
    padding: 0;
}

    ul.tabs li {
        float: left;
        list-style-image: none !important;
        text-indent: 0;
        margin: 0 1px 0 0 !important;
        padding: 0;
    }

    ul.tabs a {
        background: none repeat scroll 0 0 #C2CCDD;
        color: #333;
        display: block;
        font-size: 11px;
        height: 20px;
        line-height: 20px;
        position: relative;
        text-align: center;
        text-decoration: none;
        top: 0;
        margin: 0;
        padding: 0 15px;
    }

        ul.tabs a:active {
            outline: medium none;
            font-weight: 700;
            background: none repeat scroll 0 0 #6187C1;
        }

        ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
            background: none repeat scroll 0 0 #00468A;
            border-bottom: 1px solid #00468A;
            color: #FFF !important;
            cursor: default !important;
            font-weight: 700;
        }

div.panes div.pane {
    display: none;
    background-color: #FFF;
    border: 1px solid #00468A;
    /*height: 275px; srs. 6/25/2019.*/
    overflow: auto;
}

div.pane div.content {
    border-top: 18px solid #00468A;
    line-height: normal;
    padding: 10px;
}

a.addimages {
    background: url("../images/catalog/btn_add../images.gif") no-repeat scroll left center transparent;
    display: block;
    height: 18px;
    width: 165px;
    margin: 2px 0;
}

a.relproducts {
    background: url("../images/catalog/btn_relproducts.gif") no-repeat scroll left center transparent;
    display: block;
    height: 18px;
    width: 165px;
    margin: 2px 0;
}

a.altproducts {
    background: url("../images/catalog/btn_altproducts.gif") no-repeat scroll left center transparent;
    display: block;
    height: 18px;
    width: 165px;
    margin: 2px 0;
}

a.addtofaves {
    clear: both;
    display: block;
    width: 140px;
    height: 24px;
    background: url(../images/catalog/btn_addtofaves.gif) no-repeat left center;
}

a.flyer {
    background: url("../images/catalog/btn_flyer.jpg") no-repeat scroll left center transparent;
    display: block;
    float: left;
    height: 44px;
    width: 44px;
    margin: 0 2px;
}

a.video {
    background: url("../images/catalog/btn_video.jpg") no-repeat scroll left center transparent;
    display: block;
    float: left;
    height: 44px;
    width: 44px;
    margin: 0 2px;
}

a.sds {
    background: url("../images/catalog/btn_sds.jpg") no-repeat scroll left center transparent;
    display: block;
    float: left;
    height: 44px;
    width: 44px;
    margin: 0 2px;
}

a.tds {
    background: url("../images/catalog/btn_tds.jpg") no-repeat scroll left center transparent;
    display: block;
    float: left;
    height: 44px;
    width: 44px;
    margin: 0 2px;
}

a.pst {
    background: url("../images/catalog/btn_pst.jpg") no-repeat scroll left center transparent;
    display: block;
    float: left;
    height: 44px;
    width: 44px;
    margin: 0 2px;
}

a.partslist {
    background: url("../images/catalog/btn_partslist.jpg") no-repeat scroll left center transparent;
    display: block;
    float: left;
    height: 44px;
    width: 44px;
    margin: 0 2px;
}

.relProducts {
    clear: both;
    margin: 0 0 5px;
}

.col03 {
    float: inherit;
    width: 622px;
}

#productDetail .titleWBorder {
    border-bottom: 2px solid #3360AA;
    color: #3360AA;
    font-size: 12px;
    font-weight: 700;
    height: 16px;
}

#productDetail .title {
    color: #3360AA;
    font-size: 12px;
    font-weight: 700;
    height: 32px;
}

#productDetail .partNo {
    height: 30px;
}

#addFavsDiv {
    float: left;
    width: 140px;
}

.buyBox .header {
    background: url("../images/catalog/buyBox_top.gif") no-repeat scroll left top transparent;
    color: #FFF;
    float: left;
    font-size: 14px;
    font-weight: 700;
    height: 38px;
    line-height: 29px;
    margin-right: 4px;
    text-align: right;
    width: 140px;
    padding: 0;
}

.buyBox .content {
    background-color: #C0CCDF;
    float: left;
    font-size: 11px;
    width: 140px;
    padding: 0 5px;
}

.buyBox .bottom {
    background: url("../images/catalog/buyBox_btm.gif") no-repeat scroll left top transparent;
    float: left;
    height: 8px;
    margin-bottom: 5px;
    width: 140px;
}

.addtofaves a {
    background-image: url("../images/catalog/btn_addtofaves.gif");
    background-position: left center;
    background-repeat: no-repeat;
    display: block;
    height: 24px;
    width: 140px;
}

#viewedItemsBox .priceBox, #altProductsBox .priceBox, #AdditionalImages .priceBox, #AlternateProducts .priceBox {
    font-weight: 700;
    text-align: left;
}

.tabbedBox a:hover, ul.tabs a:hover {
    background: none repeat scroll 0 0 #6187C1;
    color: #FFF;
}

a:hover.addimages, a:hover.relproducts, a:hover.altproducts, a.addimages:hover, a.relproducts:hover, a.altproducts:hover {
    background-position: -165px 0;
}

a:hover.addtofaves, .addtofaves a:hover {
    background-position: -140px 0;
}

a:hover.flyer, a:hover.video, a:hover.sds, a:hover.tds, a:hover.pst, a:hover.partslist, a.flyer:hover, a.video:hover, a.sds:hover, a.tds:hover, a.pst:hover, a.partslist:hover {
    background-position: -44px 0;
}

/* FOR MOBILE */
#mobileProductDetail {
    float: left;
    width: 100%;
    margin: 0.1em 0;
}


.sm.col01 {
    float: left;
    width: 100%;
}

.sm.col02 {
    float: right;
    width: 100%;
}

#mobileProductDetail #title {
    font-size: 12px;
    font-weight: 700;
    color: #3360AA; /*height:16px;*/
    border-bottom: 2px solid #3360AA;
}

#mobileProductDetail #photo {
    float: left;
    width: 100%;
    margin: 0 5px 5px 0;
}

    #mobileProductDetail #photo .btn {
        margin-bottom: 2px;
    }

#mobileProductDetail #description {
    border-bottom: 2px solid #DDD;
    float: left;
    height: auto;
    overflow: auto; /*width: 100%;*/
    margin: 0 0 5px;
}

    #mobileProductDetail #description .title {
        font-size: 16px !important;
        font-weight: 700;
        color: #3360AA; /*height:16px;*/
        margin: 0 0 5px 0;
        padding: 0;
    }
