/******************
EAA 1/31/2020
custom styles for
Subito Custom Template
******************/
/*IMPORT GOOGLE FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Oswald:wght@200;300;400;600&display=swap');

/******************
layout
******************/
#mainWrapper {
    width: 95%;
}

/*Header things*/
#headerWrapper{
    background-color: #002164;
}
#navEZPagesTop{
    padding: .25rem 0;
}

#navEZPagesTop li a{
    padding: .5em 1.0em;
}

.leftBoxContainer, .rightBoxContainer{
    margin: .5rem 0;
}
h3.leftBoxHeading, h3.rightBoxHeading{
    padding: .5rem .2rem;
}

#indexProductListCatDescription{
    clear: left; /*this is so that shorter category descriptions don't float above the category title*/
}

/*main page text*/
#main_text p{
    padding: 0;
}
/*sidebox things*/
div.sideBoxContent li a{
    vertical-align: top;/*fix wrong vertical align of bestseller titles*/
}
#bestsellersContent li a{
    padding: 0;
}
/*Form things*/

input.search_box{
    width: 100%;
}

input.submit_button,
input.submit_button:hover,
input.button_searchHover,
a.productListing-heading,
input.button_add_selectedHover,
.normal_button
{
    border-radius: .25rem;
}

/*product listing header*/
input.button_add_selected{
    padding: 5px 5px;/*make add to cart button smaller*/
}
input.cssButtonHover.button_add_selectedHover:hover,
input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px !important;
}

.productListing-rowheading a{
    padding: 10px;
}

/*product listing*/
img.listingProductImage{
    float: left;
    margin-right: 1rem;
}

.productListing-even input[type=text],
.productListing-odd input[type=text],
.listing-right input[type=text]{
    width: initial; /*reset width of add to cart fields to smaller size*/
}

.add_to_cart_field{
    text-align: right;
}

.listing-right .add_to_cart_field{
    float: right;
}

/*featured/new/all/bestsellers listing*/
.listing-left {
    width: initial;
}
.listing-right{
    float: none;
}
.centerBoxContentsBestSellers  a{
    margin:10px auto;
    display:block;
    width:90%;
    text-decoration:none; /*remove text decoration for underlined links*/
}

/*product info page - details for single product*/
/*added border - just for layout testing REMOVE for production*/
div#productGeneral{
    /*border: 1px solid darkred;*/
}
.categoryIcon{
    display: none; /*hide the text that shows the category in place of an icon - SMC doesn't have any icons */
}

.navNextPrevWrapper{
    float: none;
    margin-bottom: 0;
}

p.navNextPrevCounter{
    padding: 0 0 .25rem 0;
}

.navNextPrevList{
    font-size: .7em; /* reduce size of font for nav buttons */
}
h1#productName{
    line-height: initial;
}

/*the shopping cart*/
#checkoutBillto{
    width: initial;
}
.bill_to_instruction{
    margin-top: 1rem;
}

.lineTitle, .totalBox{
    text-align: initial;
    display: inline-block;
}
.your_total_line{
    text-align: right;
}

/*Message stack messages - style like bootstrap alerts and hide crappy icon*/
.messageStackCaution {
    border: 1px solid #ffeebb;
    border-radius: .25rem;
    background-color: #fff3cd;
    color: #856404;
}
.messageStackSuccess{
    border: 1px solid #c3e6cb;
    border-radius: .25rem;
    background-color: #d4edda;
    color: #155724;
}
.messageStackWarning, .messageStackError{
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    background-color: #f8d7da;
    color: #721c24;
}
.messageStackCaution img, .messageStackSuccess img, .messageStackWarning img, .messageStackError img{
    display: none;
}
/******************
fonts
******************/

body{
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
}
h1,h3.leftBoxHeading, #navEZPagesTop ul li a{
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
}

#navEZPagesTop{
    font-weight: bold;
}
#navEZPagesTop a:link, #navEZPagesTop a:visited{
    text-decoration: none;
}
#navEZPagesTop ul li a {
    font-size: 1.25rem;
}

.sideBoxContent, .sideBoxContent a{
    font-size: 1rem;
}
#productsListingTopNumber,
#featuredProductsListingTopNumber,
#allProductsListingTopNumber{
    font-size: .85rem;
}
input.submit_button,input.cssButtonHover{
    font-size: 1rem;
}
.centerBoxContentsFeatured{
    font-size: 1rem;
}

/*product listing*/
.listingComposer {
    font-weight: bold;
    font-size: 1.2rem;
}
.product_listing_price,
.product_listing_model{
    font-weight: bold;
}
/*.button_search{*/
/*    font-family: "FontAwesome",sans-serif;*/
/*}*/

/*Product Info page*/

#prod-info-top{
    margin-top: 1.5rem;
}
#productMainImage{
    text-align: left;
}
#pinfo-right{
    width: 66%;
}
#pinfo-left{
    width: 33%;
}
#pinfo-right, #cart-box{
    background-color: #FFFFFF;
    /*border: 1px solid green; temporary border for layout work only*/
}
#productName{
    text-align: left;
    margin-left: 0;
    margin-top: 0;
}
h2#productComposer{
    font-weight: normal;
    color: #002164;
}
#productDetailsList{
    display: inline-block;
    margin-left: 0;
}
#productAttributes{
    display: inline-block;
}
h4.optionName{
    display: none;
}
#cart-box{
    width: 66%; /*should match pinfo-right*/
    padding: 0;
}

h2#productPrices{
    color: #002164;
    text-align: left;
    float: left;
}
#cartAdd{
    float: right;
    text-align: right;
}
#cartAdd input[type=text]{
    border: 3px solid #ccc;
    width: 3rem;
    margin-right: .5rem;
}
div#productDescription{
    padding: 1.5rem 0 0 0;
}
#prod_descrip_container{
    background: #eee;
    border-top: 1px solid #ccc;
    padding: .5rem;
}
p.product_detail_header{
    padding: 0;
    margin: 0;
}
/******************
Media queries
******************/
/*EAA took out max widths so queries cascade*/
@media (min-width:0px){
    /*This CSS media breakpoint will only apply CSS selector manipulations for browser windows*/
    /*under 480px wide ( mobile devices ).*/
    #mainWrapper {
        width: 100%;
    }
    #taglineWrapper{
        margin-bottom: .5rem;
    }
    #tagline{
        font-size: 1rem;
    }
    #productMainImage{
        text-align: center;
    }
}

@media (min-width:481px){
    /*This CSS media breakpoint will only apply CSS selector manipulations for browser windows*/
    /*larger than 481px wide but under 767px wide ( tablet devices ).*/
    #tagline{
        font-size: 1.2rem;
    }
}

@media (min-width:768px){
    /*This CSS media breakpoint will only apply CSS selector manipulations for browser windows*/
    /*larger than 768px wide but under 1500px wide { average desktop }.*/
    #mainWrapper {
        width: 95%;
    }
    #taglineWrapper{
        float: right;
        margin: 15px 3px 3px 3px;
    }
    #tagline{
        /*font-size: 1.5rem;*/
    }
    .centerBoxContentsFeatured a{
        font-size: 1rem;
    }
    #productMainImage{
        text-align: left;
    }
}

@media (min-width:1500px) {
    /*This CSS media breakpoint will only apply CSS selector manipulations for browser windows*/
    /*larger than 1500px wide but under 1800px wide ( wide-screen desktop ).*/
    /*EAA took out max width*/
}