/* The styles in this section group are common to the entire webiste */

/* Container & Detail content blocks */

#container {
    width: 100%;
    max-width: 960px;
    min-width: 800px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: none;
    background-color: #ffffff;
}

#detail
{
    min-height: 495px;      /* Purely asthetics = Container_Width * Golden Ratio (800 * .618) */
    padding: 0;
    margin: 30px auto 0 auto;
}


/* Basic element styles */

html {
	font-family: Arial, Verdana, Helvetica, sans-serif;             /* Amazon.com uses these fonts */
	font-size:13px;                                                 /* This establishes the base font for the entire site */
	color:#333333;
	text-align: left; 
	text-decoration: none;
}

body {
    background: #e4e4e4;
    height: 100%;
}

img, a, table, td, tr {
    padding: 0;
    margin: 0;
    border: none;
}

a {
    outline: none;
}

a:link, a:visited {text-decoration: none; }
a:active, a:hover {text-decoration: none; }


input[type=text] {
	font-family: Arial, Verdana, Helvetica, sans-serif;             /* Amazon.com uses these fonts */
    padding: .25em;
}


table {
    border-collapse: collapse;
}


/* Header & Footer styling */


.themeStyle         /* Sets common theme images and colors */
{
    background-image: url('/themes/2014/default/banners/ats_sky_banner.jpg');
    background-color: #6889bb;
}


.saleFlyerStyle          /* Sets common theme for sale items */
{
    display: block;
}

.supplementFlyerStyle {
    display: none;
}

.ecatalogStyle {
    display: block;
}

#header {
    position: relative;     /* This allows absolute positioning of children elements */
    overflow: visible;       /* Hide overflow content to avoid messing up layout      */
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 100;
}

    #header #banner {
        height: 96px;
        width: 100%;
        padding: 0;
        margin: 0;
        background-position: left top;
        background-repeat: no-repeat;
    }

        #header #banner a.logo {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            display: block;
            padding: 0;
            margin: 0;
            opacity: 0;
            filter: alpha(opacity=0); /* For IE8 and earlier */
        }

#footer {
    height: 30px;
    margin: 30px 0 0 0;
    padding: 0;
    overflow: hidden;
    clear: both;
    background-image:none;
}

    #footer p {
        font-size: 1em;
        line-height: 30px;
        color: #ffffff;
        font-weight: normal;
        text-align: center;
        padding: 0;
        margin: 0;
    }


#quicksearch {
    position: absolute;
    top: 40px;
    right: 30px;
    width: auto;
    margin: 0;
    padding: 0;
    font-style: italic;
    font-size: 1.2em;
    font-weight: normal;
    color: #fff;
    z-index: 1;
}

    #quicksearch form {
        padding: 0px;
        margin: 0px;
    }

    #quicksearch input, button {
        font-size: .9em;
        font-weight: normal;
        margin-top: 0px;
        padding: .2em;
    }
        
        #quicksearch input[type=text] {
            text-align: left;
            width: 10em;
        }

        #quicksearch button {
            width: 2.5em;
        }

    #quicksearch a:link, #quicksearch a:visited {
        color: #ffffff;
        text-decoration: none;
    }

    #quicksearch a:active, #quicksearch a:hover {
        color: #000000;
        text-decoration: underline;
    }


#menubar {
    width: 100%;
    height: 2em;         /* This is the height of the menu bar */
    line-height: 2;      /* This must be the same as height to get vertical text centering */
    padding: 0px;
    margin: 0;
    background-color: #000;
    clear: both;
}

    #menubar>ul {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        overflow: initial;
        font-size: 1em;
        font-style: normal;
    }

    #menubar>ul>li {
        float: left;
        position: relative;
        width: 120px;
        height: 100%;
        color: #f0f0f0;
        font-weight: normal;
        text-decoration: none;
        text-align: center;
        border-style: none solid none none;
        border-width: 1px;
        border-color: white;
        margin: 0;
        padding: 0;
    }

    #menubar>ul>li:hover {
        color: #ffffff;
        background-color: #989DA5;
    }

    #menubar>ul>li a {
        display: block;
        width: 100%;
        height: 100%;
        color: inherit;
        font-weight: bold;
        text-decoration: none;
    }

        #menubar>ul li#menubrowse div {
            display: none;
            position: absolute;
            top: 100%;
            left: 0%;
            width: 400%;
            height: auto;
            overflow: hidden;
            text-align: left;
            margin: 0;
            padding: 1em;
            color: #333;
            line-height: 1.5em;
            background-color: #fffcf4;
            border: solid 1px #900;
            z-index: 100;
        }  

        #menubar>ul li#menubrowse:hover div {
            display: block;
        }  

        #menubar>ul li#menubrowse div ul {
            list-style: none;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        #menubar>ul li#menubrowse div>ul {
            padding: 0em;
        }

        #menubar>ul li#menubrowse div>ul>li {
            width: 33%;
            float: left;
            display: block;
        }

        #menubar>ul li#menubrowse div ul a {
            color: #333;
            width: 100%;
            text-align: left;
            font-weight: normal;
        }

        #menubar>ul li#menubrowse div ul a:hover {
            text-decoration: underline;
            color: #c00;
        }


#menucart {
    float: left;
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0;
    background-image: url('/shop/images/buttons/black-shopping-cart-icon.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-color: #000;
}

    #menucart div {
        float: left;
        display: block;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    #menucart #itemcount {
        margin-left: 30px;
        width: auto;
        font-weight: normal;
        text-align: left;
        color: #f5c838;
    }

    #menucart #menucartItemGroup {
        position: relative; 
        margin-left: 10px;
    }


div#menucartItemBox {
    display: none; /* jQuery will control visibility */
    position: absolute;
    top: 100%;
    right: 0;
    width: 279px;
    height: auto;
    max-height: 600px;
    margin: 0 0 0 -91px;
    padding: 0;
    background-color: #fffcf4;
    border: solid 1px #900;
    z-index: 100;
}

    div#menucartItemBox h1, div#menucartItemBox h2, div#menucartItemBox h3 {
        line-height: 1;
        text-align: left;
        margin: 0 0 .25em 0;
        padding: 0;
    }

    div#menucartItemBox h1 {
        font-size: .9em;
        color: #666;
    }

    div#menucartItemBox li:hover h1 {
        color: #900;
        text-decoration: underline;
    }

    div#menucartItemBox h2 {
        font-size: .8em;
        color: #999;
    }

    div#menucartItemBox h3 {
        font-size: .9em;
        font-weight: normal;
        color: #666;
    }

    div#menucartItemBox div.buttonbox {
        width: 100%;
        float: none;
        padding: 0 0 1em 0;
        margin: 0;
        text-align: center;
    }

        div#menucartItemBox div.buttonbox h1 {
            text-align: center;
            margin: 0 0 1em 0;
            padding: 0;
        }


#menucartItemList {
    max-height: 500px;
    overflow: auto;
	display: block;
    list-style-type: none;
    font-size: 1em;
    font-style: normal;
    padding: 0;
    margin: 20px 0 0 0;
}
        #menucartItemList li {
            width: 100%;
            height: 70px;
            display: block;
            margin-bottom: 10px;
            border-bottom: 1px dotted #ccc;
        }

        #menucartItemList .imageblock {
            float: left;
            width: 70px;
            text-align: center;
        }

            #menucartItemList .imageblock img {
                width: auto;
                height: auto;
                max-width: 60px;
                max-height: 60px;
                padding: 0;
                margin: 0;
            }

        #menucartItemList .textblock {
            float: none;
            margin-left: 80px;
        }



/* Customer account bar */

#customerbar {
    height: 1.6em;
    padding: 0 20px 0 0;
    margin: 0px;
    background-color: #ddd;
}


    #customerbar ul {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
    }

    #customerbar li {
        float: right;
        position: relative;
        font-size: .9em;
        line-height: 1.6em;
        font-style: normal;
        border-style: none;
        margin-right: 20px;
    }

    #customerbar a, #customerbar a:visited {
        text-decoration: none;
        color: #060;
    }

        #customerbar a:hover {
            color: #c00;
            text-decoration: underline;
        }


/* form styling */

.stdform {
    font-size: 1em;
    font-weight: normal;
    color: #000000;
    text-align: left;
}

    .stdform table {
        width: 100%;
        padding: 0px;
        margin: 0px;
        border-style: none;
        border-collapse: collapse;
    }


    .stdform tr.data-label td {
        color: #606060;
        font-size: .9em;
        padding-top: .75em;
    }


    .stdform input, .stdform select, .stdform option {      /* Takes care of issue where SELECT (Dropdown) boxes are different size than INPUT boxes */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;  
    }
    

    .stdform input[type=text], .stdform select, .stdform input[type=submit] {
        font-size: 1.1em;
        height: 1.8em;
    }

    .stdform label {       /* Checkboxes, Radios, etc. */
        font-size: 1em;
    }

    .stdform td {
    }

    .stdform th {
        font-weight: bold;
        text-align: center;
    }

    .stdform button {
        font-size: 14px;
        text-align: center;
        height: 22px;
        vertical-align: middle;
    }


/* Data validation styling */

.fieldvalidate {
    color: #cc0000;
}

.validate {
    font-Size: 1em;
    font-weight: normal;
    color: #EE0000;
    background-color: #FFFFCC;
    border: solid 1px #cc0000;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 10px;
}


.nostock {
    border: solid 1px #990000;
    display: inline-block;
    color: #990000;
    font-weight: bold;
    padding-right: 4px;
    padding-left: 4px;
}

img.truckicon {
    vertical-align: bottom;
    border-style: none;
}


/* Styles used to display the popup cart and full form in addproduct.aspx */

#popcart {
    display: block;
    margin: 0 auto;
    padding: 0;
}

    #popcart h1 {
        height: 25px;
        border: 0;
        margin: 20px 0 20px 0;
        padding: 0 0 0 35px;
        font-size: 1.5em;
        font-weight: normal;
        text-align: left;
        color: #009900;
        background-image: url('/shop/images/icons/thumbsup.jpg');
        background-repeat: no-repeat;
        background-position: left center;
    }

    #popcart h2 {
        font-size: 1em;
        font-weight: normal;
        color: #333;
        margin: 0;
        text-align: left;
    }


    #popcart table {
        width: 100%;
    }

    #popcart tr {
        border-style: dotted none dotted none;
        border-width: 1px;
        border-color: #808080;
        padding: 0;
        margin: 0;
    }

    #popcart td {
        height: 80px;
        margin: 0;
        padding: 0;
    }

        #popcart td.thumbnail {
            width: 15%;
        }

            #popcart td.thumbnail img {
                width: auto;
                height: auto;
                max-width: 60px;
                max-height: 60px;
            }

        #popcart td.message {
            width: auto;
            text-align: left;
            color: #060606;
        }


    #popcart div.navbuttons {
        width: 25em;
        overflow: auto;
        margin: 30px auto 0 auto;
        display: block;
    }

        #popcart div.navbuttons div {
            display: block;
            width: 50%;
            float: left;
            text-align: center;
        }

    #popcart span.errortext {
        color: #cc0000;
    }


/* Styles used for checkout */

.checkoutfooter {
    text-align: left; 
    margin-top: 20px;
}

    .checkoutfooter div.messagebox {
        margin-right: 200px;
    }

    .checkoutfooter p {
        margin-right: 200px;
        font-size: .9em;
        font-weight: normal;
        color: #333333;
        text-align: left;
    }

    .checkoutfooter input[type=submit] {
        float: right;
        outline: none;
        border: none;
        padding: 0;
        text-indent: -5000px;
        display: inline-block;
        margin: 0 auto 0 auto;
        height: 30px;
        width: 148px;
        background: url("/shop/images/buttons/btn_continuecheckout.gif") 0 0 no-repeat;
    }

    .checkoutfooter input[type=submit]:hover {
        background-position: 0 -30px;
    }



/* These are used to break up logical sections */

h1.bigtitle {
    font-size: 1.8em;
    font-weight: bold;
    color: #CC0000;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

h2.bigtitle {
    font-size: .9em;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

h1.sectiontitle {
    clear: both;
    font-weight: bold;
    text-align: left;
    color: #cc0000;
    font-size: 1.2em;
    border-bottom: 2px solid #989DA5;
    margin: 20px 0 5px 0;
}

.grayrule {
    border: 1px solid #989DA5;
}


/* Used to present information in a box */

.infoblock {
    border: 1px solid #999999;
    background-color: #EAEAEA;
    font-size: .9em;
    font-weight: normal;
    color: #000000;
    text-align: justify;
    margin-bottom: 10px;
}

    .infoblock p {
        margin: 5px;
    }

p.messagetext {
    font-size: .9em;
    font-weight: normal;
    color: #333333;
    text-align: left;
}


/* General content styling */

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.redtext {
    color: #cc0000;
}

.bold {
    font-weight: bold;
}


/**************************************************
    CSS3 Buttons Section
**************************************************/

/* These stylings apply to all buttons */

/* Anchor Links */

.button {        
    display: inline-block;
    white-space: nowrap;
    border: 1px solid #666;
    padding: 0 1em;
    margin: 0.5em;
    font-size: 1em;
    line-height: 2;       /* always 2x font-size for best results (and no units) */
    font-weight: bold;
    font-family: Arial, Helvetica;
    text-align: center;
    text-decoration: none;
    color: #333;
    border-radius: .2em;
}


/* Buttons and inputs */

button.button, 
input.button { 
    cursor: pointer;
    overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */

input::-moz-focus-inner {
  padding: .2em; 
}



/**************************************************
     Add To Cart - Buttons
**************************************************/

.bluecart {
    color: #fff;
    font-size: .9em;
    line-height: 1.8;       /* always 2x font-size for best results */
    padding: 0 .75em;
    font-weight: normal;
	background: #7e99c7; /* Old browsers */
	background: -moz-linear-gradient(top,  #7e99c7 50%, #7e99c7 50%, #576a8a 100%, #4096dc 100%, #2467b4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#7e99c7), color-stop(50%,#7e99c7), color-stop(100%,#576a8a), color-stop(100%,#4096dc), color-stop(100%,#2467b4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7e99c7 50%,#7e99c7 50%,#576a8a 100%,#4096dc 100%,#2467b4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7e99c7 50%,#7e99c7 50%,#576a8a 100%,#4096dc 100%,#2467b4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #7e99c7 50%,#7e99c7 50%,#576a8a 100%,#4096dc 100%,#2467b4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7e99c7 50%,#7e99c7 50%,#576a8a 100%,#4096dc 100%,#2467b4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e99c7', endColorstr='#2467b4',GradientType=0 ); /* IE6-9 */
}

.bluecart:hover {
	background: #2467b4; /* Old browsers */
	background: -moz-linear-gradient(top,  #2467b4 0%, #4096dc 0%, #576a8a 0%, #7e99c7 50%, #7e99c7 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2467b4), color-stop(0%,#4096dc), color-stop(0%,#576a8a), color-stop(50%,#7e99c7), color-stop(50%,#7e99c7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2467b4 0%,#4096dc 0%,#576a8a 0%,#7e99c7 50%,#7e99c7 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2467b4 0%,#4096dc 0%,#576a8a 0%,#7e99c7 50%,#7e99c7 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2467b4 0%,#4096dc 0%,#576a8a 0%,#7e99c7 50%,#7e99c7 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #2467b4 0%,#4096dc 0%,#576a8a 0%,#7e99c7 50%,#7e99c7 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2467b4', endColorstr='#7e99c7',GradientType=0 ); /* IE6-9 */
}


/**************************************************
     Cart Navigator Buttons
**************************************************/

.cartnav {
    width: 11em;
    color: #fff;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 0;
    margin: 0;
    line-height: 1.8em;
}

    .cartnav.blue {
        background-color: #3366cc;
        border-color: #3366cc;
    }

        .cartnav.blue:hover {
            background-color: #254994;
        }

    .cartnav.emerald {
        background-color: #009874;
        border-color: #009874;
    }

        .cartnav.emerald:hover {
            background-color: #00614a;
        }

    .cartnav.brown {
        background-color: #ed8000;
        border-color: #ed8000;
    }

        .cartnav.brown:hover {
            background-color: #ab5c00;
        }


/**************************************************
     Menu Cart Button
**************************************************/

.graycart {
    width: 5em;
    height: 1.5em;
    line-height: 1.5em;
    color: #fff;
    font-weight: normal;
    border: 1px solid #ccc;
    border-radius: .2em;
    padding: 0;
    margin: auto 0;
    background-color: #6d6e70;
}

    .graycart:hover {
        background-color: #404041;
    }