/* Login page styling */
.login-content{
    height:300px;
    margin:0 auto;
    margin-top:60px;
    width:770px;
    position:relative;
    margin-bottom:75px;
}
.leftSide{
    width:340px;
    border-right:1px solid;
    display:inline-block;
    margin-right:70px;
    margin-left:20px;
}
.rightSide{
    width:330px;
    position:relative;
    top:10px;
    display:inline-block;
}
.rightSide p:first-of-type{
    margin-bottom:10px;
}
.login-content h1{
    font-size:1.8em;
}
.loginButton{
    color: white;
    background-color: #0098d6;
    width: auto;
    min-width: 100px;
    margin-right:30px;
    padding: 10px 16px;
    border:none;
    font-size:16px;
}
.loginButton:hover{
    cursor:pointer;
}
.errorMessage{
    color:red;
}
.rightSide h1:last-of-type{
    margin-bottom:20px;
    line-height:30px;
}


/* Register page styling */
.registrationWrapper{
    width:100%;
    padding-bottom:50px;
}
.registrationContent{
    width:520px;
    margin:0 auto;
    margin-top:50px;
    position:relative;

}

.submitContainer{
    width:120px;
    margin:0 auto;
}

.registrationContent p:first-of-type{
    margin:0 auto;
    margin-bottom:20px;
    width:400px;
    text-align:center;
}
.registrationButton{
    margin: 0 auto;
    color: white;
    background-color: #0098d6;
    width: 120px;
    padding: 10px 16px;
    border:none;
    font-size:16px;
    top:40px;
    position:relative;
    display:block;
}
.registrationButton:hover{
    cursor:pointer;
}
.registrationErrorMessage{
    color:red;
}
.registrationContent .registrationField{
    margin-bottom:10px;
}

.registrationContent label{
   font-size:18px;
}

.leftRegistration input, .rightRegistration input{
   font-size:16px;
   margin-top:10px;

}

.dropdownboxes{
    font-size:16px;
    margin-top:10px;
    width:235px;
}

.existingCustomerWrapper{
    /*width:220px;*/
}

.existingCustomerWrapper label{
    font-size:16px;
}

.customerNumberTB{
    display:none;
}

/* edit page */
.editWrapper{
    width:100%;
    padding-bottom:100px;
}

.leftRegistration{
float:left;
}
.rightRegistration{
float:left;
margin-left:50px;
}
.registrationErrorMessage{
    margin-top:230px;
}
#ConfirmPassword-error{
    width:270px;
}
.editDropDownBox{
    width:234px;
    padding:8px;
    margin-top:9px;
}


/* Thank you page styling */
.thankyouContent{
    width:450px;
    margin:60px auto;
    height:346px;
}
.thankyouContent p:last-of-type{
    margin-top:20px;
}

/* Forgot Password styling */
.forgotPasswordContent{
    width:400px;
    margin:40px auto;
}
.forgotPasswordContent h1{
    font-size:2em;
}

/* PasswordResetSent page styling */
.resetSentContent{
    width:500px;
    margin:40px auto;
    margin-bottom:218px;
}
.resetSentContent h1{
    font-size:2em;
}
.resetSentContent p:first-of-type{
    margin-bottom:20px;
}

/* PasswordResetError page styling */
.passwordResetErrorContent{
    width:500px;
    margin:50px auto 271px auto;
}
.passwordResetErrorContent p{
    margin-bottom:20px;
}

/* ResetPassword page styling */
.resetPasswordContent{
    width:300px;
    margin:40px auto;
}
.resetPasswordContent div:first-of-type{
    margin-bottom:10px;
}


/* Index page */
.accountWrapper{
    width:70%;
    margin:0 auto;
    margin-top:40px;
    padding-bottom:50px;
}

.customerProfileContainer{
    margin-bottom:50px;
}

.accountHeadings {
    font-weight:700;
    font-size:1.4em;
    margin-bottom:15px;
    text-decoration:underline;
}

.customerProfileContainer label{
    padding:4px 0 4px 0;
}

.profileButtons{
    margin-top:20px;
}

.profileButtons a:nth-of-type(2){
    margin-left:15px;
    margin-right:15px;
}

.accountShippingBillingContainer{

}

.reviewHeaderInfo{
    display:block;
    width:80%;
    margin:0 auto;
    height:300px;
    margin-top:40px;
}

.shippingInfo{
    float:left;
    width:250px;
}
.reviewDivider{
    float:left;
    position:relative;
    border-left: 2px solid #636363;
    height:160px;
}
.billingInfo{
    float:left;
    width:340px;
    padding-left:100px;
}

.shippingInfo h2, .billingInfo h2{
    font-weight:700;
    font-size:1.2em;
}

.customerQuotesContainer{
    width:80%;
    margin-top:50px;
    clear:left;
}

.quoteHeadings{
    border-bottom:1px solid black;
}

.quoteHeadings p{
    display:inline-block;
    font-weight:700;
}

.quoteNumberHeading{
    width:40%;
}
.totalHeading{
    width:30%;
}

.dateHeading{
    width:15%;
}

.quoteRow{
    width:100%;
    display:block;
    padding:5px 0;
    border-bottom:1px solid black;
    color:#636363;
}

.quoteRow ul li:first-of-type{
    margin-left:5px;
}

.quoteRow:hover{
    background-color:#e3e3e3;
    cursor:pointer;
}

.quoteRow ul li{
    display:inline-block;
}

.quoteNumber{
    width:40%;
}

.quoteQuantity{
    width:30%;
}

.quoteDate{
    margin-left:0px;
}

/* styling for the quote details dialog box */
.quoteDetails-dialog{
    border:5px solid grey;
    background-color:white;
    padding:15px;
}

.ui-dialog-buttonpane{
    margin-top:15px;
}



@media (max-width:767px){
    .pageBanner .loginheaders{
        font-size:1.6em;
        width:80%;
    }


    /* index page */
    .profileButtons{
        width:80%;
    }

    .profileButtons a{
        display:inline-block;
    }

    .profileButtons a:nth-of-type(2){
        margin: 15px 0 15px 0;
    }

    .reviewDivider{
        height:1px;
        width:100%;
        border-bottom:1px solid black;
        margin-top:40px;
        margin-bottom:30px;
    }

    .billingInfo{
        padding-left:0;
        margin-bottom:60px;
        width:80%;
        margin-top:30px;
    }

    .customerQuotesContainer{
        width:100%;
        clear:left;
    }

    .quoteNumberHeading{
        width:30%;
        margin-right:10px;
    }
    .totalHeading{
        width:35%;
    }

    .dateHeading{
        width:15%;
    }

    .quoteNumber{
        width:30%;
        margin-right:10px;
    }

    .quoteQuantity{
        width:24%;
    }

    .quoteDate{
        width:30%;
    }

    /* login page */
    .login-content{
        width:100%;
        margin-top:50px;
        margin-bottom:300px;
    }

    .leftSide{
        width:80%;
        margin:0 auto;
        border-right:none;
        display:inherit;
        border-bottom:1px solid #636363;
        padding-bottom:50px;
    }
    
    .loginDivider{
        width:90%;
        border-left:none;
        border-bottom:2px solid black;
        height:5px;
        margin:0 auto;
    }

    .rightSide{
        width:80%;
        display:inherit;
        margin:0 auto;
        margin-top:40px;
    }

    /* register page */
    .registrationWrapper{
        padding-bottom:70px;
    }
    .registrationContent{
        width:90%;
    }
    .registrationContent .leftRegistration, .registrationContent .rightRegistration{
        position:relative;
    }
    .registrationErrorMessage{
        margin-top:0;
    }

    /* PasswordResetSent page */
    .resetSentContent{
        width:100%;
        padding:15px;
        margin-bottom:50px;
    }

    /* ThankYou page */
    .thankyouContent{
        width:90%;
    }

    /* ChangePassword page */
    .resetPasswordContent{
        width:70%;
    }

    /* Edit page */
    .registrationContent{
        width:70%;
    }

        .registrationContent p:first-of-type{
            width:100%;
        }

    .rightRegistration{
        margin-left:0;
    }

    /* ForgotPassword page */
    .forgotPasswordContent{
        width:70%;
    }

        .forgotPasswordContent h1{
            line-height:26px;
        }

    /* PasswordResetError page */
    .passwordResetErrorContent{
        width:80%;
        margin-bottom:50px;
    }
}

@media (min-width:768px) and (max-width:970px){
    .billingInfo{
        width:250px;
        padding-left:40px;
    }

    .quoteQuantity, .totalHeading{
        width:35%;
    }
    .dateHeading{
        width:20%;
    }
}

@media screen and (min-width:1300px) {
    /* login styling */
    .login-content{
        width:970px;
        margin-bottom:96px;
    }
    .leftSide{
        width:450px;
        margin-right:100px;
        margin-left:40px;
    }
    .rightSide{
        width:350px;
    }
    .loginDivider{
        padding-right:0px;
    }

    /* registration styling */
    .registrationContent{
        width:730px;
    }
    .registrationErrorMessage{
        margin-top:290px;
    }
    .registrationButton{
        margin-top:20px;
    }
    
}

.fancybox-skin{
    background-color:cadetblue;
}