﻿

div#orderhistory div.row div {
    padding-left:0px;
    padding-right:0px;
}

div.myaddresses div.row div {
    padding-left:0px;
    padding-right:0px;
}

div.myaccounthidden {
    display:none;
}

div.myaccountvisible {
    display:none;
}

div#xsmenu div.myaccountbutton {
    background-color: #d7d2b7;
    color: #331709;
    font-weight: bold;
    font-size: 12px;
    min-height:40px;
    margin-bottom:5px;
    margin-right:4px;
    margin-left:4px;
    padding-top:4px;
}

div#xsmenu div.myaccountbuttonselected {
    background-color: #331709;
    color: #d7d2b7;
}

div#lgmenu div.myaccountbutton {
    background-color: #d7d2b7;
    color: #331709;
    font-weight: bold;
    font-size: 12px;
    min-height:40px;
    margin-bottom:5px;
    margin-left:4px;
    padding-top:12px;
    width:95%;
}

div#lgmenu div.myaccountbuttonselected {
    background-color: #331709;
    color: #d7d2b7;
    width:99%;
}

@media (max-width:600px) {
    div#cartqty {
        position: absolute;
        top: -4px;
        right: 2px;
        color: #d7d2b7;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
}


@media (min-width:601px) {
    div#cartqty {
        position: absolute;
        top: -4px;
        right: 2px;
        color: #d7d2b7;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
}

div.categoryMenuXS {
    position:relative;
    background-color: #D7D2B7;
    color: #00331b;
    text-align:center;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:5px;
    width:100%;
}

div.categoryMenuXS:hover {
    position:relative;
    background-color: #00331b;
    color: #D7D2B7;
}

div.categoryMenuXS a {
    background-color: #D7D2B7;
    color: #00331b;
    font-weight:bold;
}

div.categoryMenuXS:hover a {
    background-color: #00331b;
    color: #D7D2B7;
}


@media (max-width:749px) {
    div.headerWrapperXS {
    }
}

@media (min-width:750px) {
    div.headerWrapperXS {
        width:750px;
        margin:0 auto;
    }
}


@media (max-width:1199px)  {
   	div#writereviewdialog, div#writereviewcontainer {
        width:325px;
	}

    div#myaccountpopup {
        width:325px;
    }

    div#dialogLogin {
        width:325px;
    }

    div#dialogCreate {
        width:325px;
    }

    div#shoppingcart {
        width:325px;
    }

    div#logincontainer {
        width:350px;
        padding-left:0px;
        padding-right:0px;
    }
    
    div#createcontainer {
        width:350px;
        padding-left:0px;
        padding-right:0px;
    }
    
    div#cartmain {
        position: relative;
        width: 350px;
        background-color: white;
        color: black;
        font-family: Arial, Verdana, sans-serif;
        padding-right: 5px;
        padding-top: 5px;
    }

    div#cartmainEmail {
        position: relative;
        width: 315px;
        background-color: white;
        color: black;
        margin: 5px;
        font-family: Arial, Verdana, sans-serif;
        padding-right: 5px;
        padding-left:5px;
        padding-top: 5px;
    }

    div.itemdescription {
        padding-left:3px;
        padding-right:20%;
        text-align:left;
        margin-top:4px;
    }
    
    .addressZip {
        width:30%;
        margin-top: 5px;
    }

    .manuftitle {
        font-size:18px;
    }
}

@media (min-width:1200px) {
    div#writereviewdialog, div#writereviewcontainer {
        width:750px;
	}

    div#myaccountpopup {
        width:750px;
    }

   div#dialogLogin {
        width:750px;
    }

   div#dialogCreate {
        width:750px;
    }

    div#shoppingcart {
        width:750px;
    }

    div#logincontainer {
        width:750px;
    }

    div#createcontainer {
        width:750px;
    }

        
    div#cartmain {
        position: relative;
        width: 740px;
        background-color: white;
        color: black;
        border: solid 3px #331709;
        margin: 5px;
        font-family: Arial, Verdana, sans-serif;
        padding-right: 5px;
        padding-top: 5px;
    }

    div#cartmainEmail {
        position: relative;
        width: 700px;
        background-color: white;
        color: black;
        margin: 5px;
        font-family: Arial, Verdana, sans-serif;
        padding-right: 5px;
        padding-left:5px;
        padding-top: 5px;
    }

    div.itemdescription {
        padding-left:3px;
        text-align:left;
        margin-top:4px;
    }

    div.MyAccountSection {
        padding-top: 5px;
        display: block;
        width: 97%;
        border: solid 2px #331709;
        min-height:300px;
    }

    .addressZip {
        width:100%;
    }

    .manuftitle {
        font-size:36px;
    }
}

div#dialogLogin div,
div#dialogCreate div {
    padding-left:0px;
    padding-right:0px;
}

a.login {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

    a.login:hover {
        color: #D7D2B7;
    }

.navbar {
    background-image: none;
    margin-bottom: 0px;
}

/* navbar */
.navbar-default {
    background-color: white;
    border-color: transparent;
}
    /* Title */
    .navbar-default .navbar-brand {
        color: #00331b;
    }

        .navbar-default .navbar-brand:hover,
        .navbar-default .navbar-brand:focus {
            color: white;
            background-color: #331709;
        }
    /* Link */
    .navbar-default .navbar-nav > li > a {
        color: #00311b;
    }

        .navbar-default .navbar-nav > li > a:hover,
        .navbar-default .navbar-nav > li > a:focus {
            color: white;
            background-color: #331709;
        }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #555;
        background-color: #E7E7E7;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: #555;
        background-color: #D5D5D5;
    }
    /* Caret */
    .navbar-default .navbar-nav > .dropdown > a .caret {
        border-top-color: #777;
        border-bottom-color: #777;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: black;
    }

.search-input {
    background-color: #D7D2B7;
    box-shadow: none;
    border-radius: 0px;
    color: black;
}

    .search-input ::-webkit-input-placeholder, .search-input :-moz-placeholder, .search-input ::-moz-placeholder, .search-input :-ms-input-placeholder {
        color: black;
        font-weight: bold;
    }

/* below this removes the bottom border from the navbar  */
.navbar.navbar-default {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .navbar.navbar-default .navbar-collapse {
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
/* above this removes the bottom border from the navbar  */

div.footerlink {
    padding-top: 15px;
    color: #d7d2b7;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    background-color: #00331b;
    height: 60px;
    border-bottom: 1px solid white;
}

    div.footerlink a {
        color: #d7d2b7;
        text-decoration: none;
    }

        div.footerlink a:hover {
            color: white;
            text-decoration: none;
        }

.navbar-nav > li {
    padding-left: 0px;
    padding-right: 0px;
}

.navbar-default .navbar-toggle {
    background-color: #D7D2B7;
    border: 1px solid #331709;
}

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: #D7D2B7;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #331709;
    }

    .navbar-default .navbar-toggle:hover .icon-bar,
    .navbar-default .navbar-toggle:focus .icon-bar {
        background-color: white;
    }

li.topmenucart {
    float: left;
    padding-left: 2px;
    padding-right: 2px;
}

li.topmenu {
    float: left;
    padding-left: 2px;
    padding-right: 2px;
}

    li.topmenu a {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        color: #00331b;
        font-weight: bold;
    }

        li.topmenu a:hover {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;
            color: #D7D2B7;
            background-color: #00331b;
            font-weight: bold;
        }

    li.topmenu div.userbutton {
        position: relative;
        float: left;
        top: -9px;
        height: 36px;
        background-color: #331709;
        padding-top: 9px;
    }

        li.topmenu div.userbutton a {
            padding-left: 10px;
            padding-right: 20px;
            color: #D7D2B7;
            background-color: #331709;
            font-weight: bold;
        }

            li.topmenu div.userbutton a:hover {
                padding-left: 10px;
                padding-right: 20px;
                color: white;
                background-color: #331709;
                font-weight: bold;
            }


div.mainbutton {
    position: relative;
    top: 15px;
    width: 33%;
    height: 33px;
    float: left;
    text-align: center;
    background-color: #D7D2B7;
    font-weight: bold;
    font-size: 16px;
    padding-top: 5px;
}

    div.mainbutton:hover {
        color: #D7D2B7;
        background-color: #00331b;
    }

.navmenu-default {
    background-color: #00331b;
}

    .navmenu-default .navmenu-nav > li > a,
    .navbar-default .navbar-offcanvas .navmenu-nav > li > a {
        color: #D7D2B7;
        font-weight: bold;
    }

        .navmenu-default .navmenu-nav > li > a:hover,
        .navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover {
            color: #00331b;
            background-color: #D7D2B7;
            font-weight: bold;
        }

div#pagemask {
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: rgba(0,0,0,0.8);
    display: none;
}

div#pagemaskspinner {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    top: 200px;
}

.button, .layout_button {
    background-color: #331709;
    border: none;
    width: 125px;
    color: #D7D2B7;
    alignment-adjust: middle;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1, .layout_button1 {
    background-color: #331709;
    border: none;
    font-size: 14px;
    text-align: center;
    width: 275px;
    font-weight: bold;
}

    .button1:hover, .layout_button1:hover {
        background-color: #331709;
        border: none;
        font-size: 14px;
        text-align: center;
        color: white;
    }

.button2, .layout_button2 {
    background-color: #331709;
    border: none;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.button3, .layout_button3 {
    background-color: #FFF;
    border: none;
    font-size: 20px;
    width: 25px;
    text-align: center;
}

.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0px 10px 8px;
    border-color: transparent transparent transparent #331709;
    line-height: 0px;
    _border-color: #000000 #000000 #000000 #331709;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

div#login, div#createaccount {
    position: absolute;
    z-index: 200;
}

table#createAccountTable {
    border-spacing: 0;
    background-color: #fff;
    padding: 5px 40px;
    margin: auto;
    border-radius: 4px;
}

    table#createAccountTable tr td {
        padding: 5px;
        color: #00331B;
    }

input.loginField {
    padding: 4px 10px;
    font-size: 15px;
    border: 1px solid silver;
    background-color: #D7D2B7;
    width: 100%;
    outline: 0;
}

input.loginFieldInvalid {
    border: 2px solid #ff0000;
    color: #ff0000;
}

span.loginPrompt {
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    color: #00331B;
}

span.loginPromptInvalid {
    color: #ff0000;
}

.login_table tr td input[type="text"]:focus, .login_table tr td input[type="password"]:focus {
    border-color: #00331B;
}

div#shoppingcart {
    position: absolute;
    z-index: 200;
    background-color: white;
    color: black;
}

div#myaccountdialog {
    position: absolute;
    z-index: 200;
    background-color: white;
    color: black;
}

div#timerlogoutdialog {
    position: absolute;
    z-index: 200;
    background-color: white;
    color: black;
}

div#timerlogoutdialogcontents {
    position: relative;
    width: 600px;
    background-color: white;
    color: black;
    border: solid 3px #331709;
    margin: 5px;
    font-family: Arial, Verdana, sans-serif;
    padding-right: 5px;
    padding-top: 5px;
    text-align: center;
}

div#dialog {
    background-image: url("../../images/cart.jpg");
    background-repeat: no-repeat;
    background-position: left center;
    position: absolute;
    z-index: 200;
    background-color: white;
    color: #331709;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: larger;
    width: 400px !important;
    height: 100px !important;
    padding-top: 40px;
    padding-left: 135px;
    background-color: #d7d2b7;
    min-height: unset !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.ui-button:focus {
    outline: none !important;
}

.ui-dialog-titlebar {
    display: none !important;
    outline: none !important;
}

.arrow {
    line-height: 34px;
    position: relative;
    float: left;
    left: 15px;
    cursor: pointer;
    user-select: none;
    background-color: #00331B;
    width: 200px;
    color: white;
    font-weight: bold;
    text-align: center;
}

    .arrow:before {
        border-width: 17px 0px 17px 17px;
        content: '';
        position: absolute;
        height: 0px;
        width: 0px;
        border-style: solid;
        border-color: #00331B transparent;
        right: 200px;
    }

    .arrow:after {
        border-width: 17px 0px 17px 17px;
        content: '';
        position: absolute;
        height: 00px;
        width: 00px;
        border-style: solid;
        border-color: transparent transparent transparent #00331B;
        ;
        right: -17px;
    }

.arrow_small {
    line-height: 24px;
    position: relative;
    float: left;
    cursor: pointer;
    user-select: none;
    background-color: #00331B;
    width: 160px;
    color: white;
    font-weight: bold;
    text-align: center;
}

    .arrow_small:before {
        border-width: 12px 0px 12px 12px;
        content: '';
        position: absolute;
        height: 0px;
        width: 0px;
        border-style: solid;
        border-color: #00331B transparent;
        right: 160px;
    }

    .arrow_small:after {
        border-width: 12px 0px 12px 12px;
        content: '';
        position: absolute;
        height: 00px;
        width: 00px;
        border-style: solid;
        border-color: transparent transparent transparent #00331B;
        right: -12px;
    }

a.big_green, a.big_green:active {
    font-weight: normal;
}

.divCheckout {
    position: absolute;
    top: 95px;
    left: 125px;
    width: 125px;
    text-align: center;
    background-color: #d7d2b7;
    display: block;
}

.divCheckout_hidden {
    position: absolute;
    top: 95px;
    left: 125px;
    width: 125px;
    text-align: center;
    background-color: #d7d2b7;
    display: none;
}

/* below items are used in the shopping cart */
	    div.triangle_spacer {
        position: relative;
        float: left;
        width: 5px;
    }

    div.triangle {
        position: relative;
        float: left;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 10px 0px 10px 8px;
        border-color: transparent transparent transparent #331709;
        line-height: 0px;
        _border-color: #000000 #000000 #000000 #331709;
        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

    .button {
        background-color: #331709;
        border: none;
        width: 125px;
        color: white;
        alignment-adjust: middle;
        padding: 5px 5px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        cursor: pointer;
    }

    div#writereviewdialog {
    position: absolute;
    z-index: 200;
    background-color: white;
    color: black;
}

    div#cart_container div.row div {
        padding-left:0px;
        padding-right:0px;
    }

    div#myaccountpopupcontainer div.row div {
        padding-left:0px;
        padding-right:0px;
    }

    div.cart_navbar div {
        padding-left:0px;
        padding-right:0px;
    }

    div.cart_navbar div.indicator {
        position:relative;
        float:left;
        padding-left:10px;
        padding-right:10px;
        text-align: center;
        font-family: Arial, Verdana, sans-serif;
        font-size: 15px;
        width:80%;
    }

    div.cart_navbar div.selected {
        font-family: Arial, Verdana, sans-serif;
        font-size: 15px;
        background-color: #331709;
        color: #d7d2b7;
    }

    div.cart_navbar div.sep {
        width: 30px;
        text-align: center;
    }

    div.review_stars_container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .review_star {
		background-image: url("/images/reviewstar.png");
		background-repeat: no-repeat;
		height: 20px;
		width: 24px;
	}

    .review_star_partial {
		background-image: url("/images/reviewstar.png");
		background-repeat: no-repeat;
		height: 20px;
		overflow: hidden;
	}

   .review_star_outline {
		background-image: url("/images/reviewstaroutline.png");
		background-repeat: no-repeat;
		height: 20px;
		width: 24px;
	}

   	.reviewstar {
		background-image: url("/images/reviewstar.png");
		background-repeat: no-repeat;
		height: 20px;
		width: 24px;
	}
	
	.reviewstaroutline {
		background-image: url("/images/reviewstaroutline.png");
		background-repeat: no-repeat;
		height: 20px;
		width: 24px;
	}

   a.review:link, a.review:visited, a.review:active {
       text-decoration: none;
        font-family: Arial, Verdana, sans-serif;
        color: #0666ff;
   }

   a.review:hover
   {
       text-decoration:underline;
   }
	
	.writereviewwrapper {
		display:flex;
		flex-direction:column;
		position:relative;
		width:120px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	#reviewtext {
		border:none;
		width:100%;
		height:400px;
	}
	
	.writereviewflexcontainer {
		display:flex;
		justify-content:center;
		flex-direction:row;
	}
	
	#reviewcontainer {
		display: flex;
		flex-direction: row-reverse;
		justify-content:flex-end;
	}
	
	.star1:hover {
		background-image: url("/images/reviewstar.png");
	}
	
	.star2:hover ~ .star2, .star2:hover {
		background-image: url("/images/reviewstar.png");
	}
	
	.star3:hover ~ .star3, .star3:hover {
		background-image: url("/images/reviewstar.png");
	}
	
	.star4:hover ~ .star4, .star4:hover {
		background-image: url("/images/reviewstar.png");
	}
	
	.star5:hover ~ .star5, .star5:hover {
		background-image: url("/images/reviewstar.png");
	}

    @media (max-width:1200px) {
    div.couponcode {
        position: relative;
        background-color: white;
        color: #331709;
        margin-right: 3px;
        padding-top: 3px;
        padding-left: 22px;
        font-weight: bold;
    }
}


@media (min-width:1201px) {
    div.couponcode {
        position: relative;
        background-color: white;
        color: #331709;
        margin-bottom: 5px;
        margin-right: 3px;
        padding-bottom: 3px;
        padding-top: 3px;
        padding-left: 49px;
        font-weight: bold;
    }
}
