/**
 * TOC
 *
 * reset
 * layout
 * forms
 * typography
 * clears
 * elements
 * sections
 *   welcome page
 *   nav
 *   header
 *   address
 *
 * product-texts
 *
 **/

/** reset.css **/
*, *::before, *::after {
  box-sizing: border-box; /* Makes managing padding and borders within defined widths easier */
}
* {
  margin: 0;
  padding: 0; /* Removes default margin and padding from all elements */
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5; /* Sets a standard, readable line height */
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; /* Ensures responsive media by default */
}
input, button, textarea, select {
  font: inherit; /* Form elements inherit font properties from the body */
}

/** layout.css **/
main, article, section{
    display: block;
}
body{
    background: white;
}

body > header{
    background: #e6e7e8;
    border-bottom: 1px solid #9d9e9e;
    box-shadow: 0px 0px 2px 2px #9d9e9e;
    height: 70px;
    position:fixed;
    top: 0;
    width: 100%;
    z-index:99;
}

body > nav {
    display: none;
    position: absolute;
    top: 74px; left: 0;
    width: 275px; min-height: 100%;
    z-index: 98;
}

body.aside-on nav{
    display: block;
}

body > main{
    margin: 82px 12px 12px;
}

main ul, main ol {
    padding-left: 1.5em;
}

body > main > div{
    margin-bottom: 2em;
}

main > section{
    max-width: 400px;
}

@media only screen and (min-width : 768px) {

    body > nav{
        display: block;
        height: 100%;
        width: 260px;
    }

    body.is_person > main{
        margin-left: 275px;
    }
}

@media only screen and (min-width : 1024px) {
    /* Styles */
    main > section{
        max-width: none;
    }

    main > aside{
        position: absolute;
        top: 175px; right: 30px;
        width: 200px;
    }
}

/** ---forms--- **/

select, input[type=text], input[type=number], textarea, input[type=email], input[type=tel], input[type=password], input[type=submit], input[type=button], button{
    border: 1px solid #9d9e9e;
    border-radius: 3px;
    display: block;
    margin: .5em auto;
    outline: none;
    padding: .5em;
}

select:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus{
    border: 1px solid rgba(81, 203, 238, 0.7);
    box-shadow: 0 0 1px 1px rgba(81, 203, 238, 0.7);
}

input[type=submit], input[type=button], button{
    border: 2px outset #9d9e9e;
    box-shadow: 0 0 2px 2px #9d9e9e;
}

input[type=submit]:active, input[type=button]:active, button:active{
    border: 2px inset #9d9e9e;
    box-shadow: 0 0 1px 1px #9d9e9e;
}

/** errors **/
form div ul{
    list-style: none;
}
form div li{
    border: 2px solid red;
    border-radius: 5px;
    padding: .5em;
    width: 350px;
}

form.login{
    background: #e6e7e8;
    border: 1px solid #9d9e9e;
    box-shadow: 0px 0px 1px 1px #9d9e9e;
    border-radius: 5px;
    margin-top: 1em;
    padding: 1em;
    position: relative;
    text-align: center;
}

.login ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.login select, .login input[type=password], .login input[type=email], .login input[type=text], .login input[type=tel], .login button{
    width: 90%;
}

@media only screen and (min-width : 768px){
    select, input[type=text], input[type=number], textarea, input[type=email], input[type=tel], input[type=password], input[type=submit], input[type=button], button{
        display: inline-block;
        margin: .5em;
    }
    .product-variant select,.product-variant  input[type=text],.product-variant  input[type=number],.product-variant  textarea,.product-variant  input[type=email],.product-variant  input[type=tel],.product-variant  input[type=password],.product-variant  input[type=submit],.product-variant  input[type=button],.product-variant  button{
        display: block;
    }
}

/** typography.css **/
body{
    font-family: arial, helvetica, sans-serif;
}

main > h1{
    font-size: 1.5em;
}

.warning{
    color: red;
    font-weight: bold;
}

/** clearing.css **/
.clear:before, .clear:after{
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after{
	clear: both;
}
/** end clear **/

/** elements.css **/
article{
    margin-bottom: 12px;
    position: relative;
}

article:after, section:after{
    content: "";
    display: table;
    clear: both;
}

a.button, a.button:hover, a.button:link, a.button:visited{
    background-color: buttonface;
    border: 2px outset #9d9e9e;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px #9d9e9e;
    color: black;
    display: block;
    margin: 24px auto;
    padding: 3px 4px;
    text-align: center;
    width: 200px;
}

a.button:hover{
    color: black;
}

a:link, a:visited{
    color: blue;
    padding: 2px 4px;
    text-decoration: none;
}

a:link:hover, a:visited:hover{
    background: #dadada;
    color: #f04e23;
}

a.image:link:hover, a.image:visited:hover img{
    background: none;
}

dt{
    font-weight: bold;
}

dt:after{
    content: ":";
}

img{
    border: solid 1px #e6e7e8;
}

img.noborder, .zoomable img{
    border: none;
}
h2.divider {
    font-size: 18px;
    background: linear-gradient(to top left, #9d9e9e, white);
    border-bottom: 1px solid black;
    padding: .5em 0 0 .5em;
}

p:target{
    background: #e6e7e8;
    border: 1px solid #f04e23;
    padding: 12px;
}

.pop-help{
    color: blue;
    padding-left: .5em;
}

.cws_layer_toggle{
    display: none;
}

.cws_layer_toggle ~ .cws_layer_toggled{
    display: none;
}

.cws_layer_toggle:checked ~ .cws_layer_toggled{
    display: block;
}

#constellation_user_panel{
    padding: 26px 1em;
}

#constellation_user_panel .cws_layer_toggled{
    border-radius: 4px;
    margin: 1.5em 1.5em;
}

.availability.no-conflict{
    background: lightgreen;
}

.availability.unavailable{
    background: red;
}

.availability.maybe{
    background: orange;
}

.availability.tight{
    background: yellow;
}

.product-list article.no-conflict{
    border-bottom: 3px solid lightgreen;
}

.product-list article.unavailable{
    border-bottom: 3px solid red;
}

.product-list article.maybe{
    border-bottom: 3px solid orange;
}

.product-list article.tight{
    border-bottom: 3px solid yellow;
}

.page-pdf-display{
    display: none;
    width: 100%;
    height: 600px;
}

@media(min-width: 768px){
    .product-list article{
        width: 212px;
    }

    .product-list .featured-image, .product-list .featured-image a{
        height: 120px;
        width: 120px;
    }

    .product-list .featured-image a{
        line-height: 120px;
    }

    .product-list .featured-image a img{
        max-width: 120px;
        max-height: 120px;
    }

    .page-pdf-display{
        display: block;
    }

    .page-pdf-download{
        display: none;
    }
}

@media only screen and (min-width : 1024px) {
}

/** end elements **/

/** modules/welcome.css **/
.welcome{
    text-align: center;
}

.welcome img{
    max-width: 100%;
    height: auto;
}

.welcome p:last-of-type{
    text-align: left;
}

@media only screen and (min-width : 768px) {
    section.welcome{
        margin: 24px auto;
        max-width: 512px;
    }
}

@media only screen and (min-width : 1024px) {
    section.welcome{
        margin: 24px auto;
        max-width: 925px;
    }
}

/** end welcome **/

/** sections/nav.css **/
body > nav {
    background: white;
    border-right: 1px solid #9d9e9e;
    padding: 12px 12px 12px 32px;
}

header > nav{
    text-align:
}
body > nav > a:link, body > nav > a:visited{
    border-bottom: 1px solid #e6e7e8;
    color: black;
    display: block;
    padding: 6px 0 6px 4px;
    text-decoration: none;
    width: 192px;
}

body > nav > a:link:hover,body > nav > a:visited:hover{
    color: black;
}

nav span{
    display: inline-block;
    margin-left: -21px;
}

nav ul.category{
    margin: 0;
}

nav li > ul > li{
    padding-left: 22px;
}

nav li{
    border-bottom: solid 1px #e6e7e8;
}

nav li:last-child{
    border-bottom:none;
}

nav ul ~ a{
    border-top: solid 1px #e6e7e8;
}

/** end nav.css **/


/** sections/header.css **/
body > header h1{
    display: none;
    font-size: 16px;
    margin: 0;
    margin-left: 48px;
    padding-top: 26px;
    text-align: center;
}

body > header > div{
    position:absolute;
}

.hamburger{
    background: #dadada;
    border: 2px outset #959595;
    border-radius: 4px;
    height: 32px;
    width: 32px;
}

.hamburger hr{
    border-color: #959595;
    border-width: 1px;
    border-style: solid;
    margin: 6px 4px;
}

body.aside-on .hamburger{
    border-style: inset;
}

header .hamburger{
    top: 14px; left: 14px;
}

header .trlogo{
    background: url("../graphics/TraneLogo_header-v0EY8a7.gif") 0 0/auto 100% no-repeat;
    display: block;
    position: absolute;
    left: 60px; top: 5px;
    width: 172px; height: 57px;
}

header .trlogo:hover{
    background: url("../graphics/TraneLogo_header-v0EY8a7.gif") 0 0/auto 100% no-repeat;
}

header .homelink{
    color: black;
    display: block;
    position: absolute;
    top: 10px;
    width: 100%;
}

header .homelink:hover{
    color: black;
    background: transparent;
}

@media only screen and (min-width : 768px) {

    header .trlogo{
        position: static;
        left: 36px; top: 5px;
    }
    .hamburger{
        display: none;
    }

    body > header > h1{
        display: block;
    }
}

@media only screen and (min-width : 1024px) {
    body > header > h1{
        display: block;
        margin: 0;
    }

    header .irlogo{
        display: block;
    }
}

/** end header.css **/

/** address.css **/
.address-form .state-select{
    display: none;
}

.address-form.selecting .state-select{
    display: block;
}

.address-form.selecting .state-text{
    display: none;
}

/** end address **/

/** product purchase text **/
.variant-purchase:not(.noprice):before{
    content: "Purchase Me ";
}

.variant-purchase.incart:not(.noprice):before{
    content: "Manage Purchase ";
}

.variant-special:not(.noprice):before{
    content: "Purchase Replacement Graphic Only ";
}

.variant-special.incart:not(.noprice):before{
    content: "Manage Replacement Graphic Order ";
}

.variant-rental:before{
    content: "Rent Me ";
}

.variant-rental.incart:before{
    content: "Manage Rental ";
}

.noprice:before{
    content: "Order Me";
}

.noprice.incart:before{
    content: "Manage Order";
}

.credit-projected, .credit-applied {
    color: green;
    font-weight: bold;
}

.credit-issued {
    color: green;
}

.credit-debit {
    color: #c00;
}