/* Please scroll down for media queries for specific screen widths */
/* TODO: Move .btn override to Global.css*/
.btn { border-radius: 0px; }
/* Override device styling. From https://css-tricks.com/almanac/properties/a/appearance/ */
#loginbox input[type=text],
#loginbox input[type=password],
#joinbox input[type=text],
#joinbox input[type=password],
#congrats-search-form input[type=text] 
{
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    border-radius: 0;
}
#loginbox .btn, #joinbox .btn { padding: 12px; }
.join-customs-errors, 
.login-customs-errors, 
.join-fb-customs-errors, 
.join-normal-customs-errors,
#loginbox .validation-summary-valid { margin-right: 0; }
.join-customs-errors ul, 
.login-customs-errors ul, 
.join-fb-customs-errors ul, 
.join-normal-customs-errors ul,
#loginbox .validation-summary-valid ul { list-style-type: none; padding-left: 0;}
.join-customs-errors ul li, 
.login-customs-errors ul li, 
.join-fb-customs-errors ul li, 
.join-normal-customs-errors ul li,
#loginbox .validation-summary-valid ul li { margin-bottom: 0.5em;}
.join {
  padding-top:10px;
  padding-left:10px;
  width:100%;
}
.membership-step-active 
{
    width:90px;
    padding-left:7px;
    color:#99cc00;
    float:left;
    font-size:22px;
}

.membership-step
{
    width:90px;
    padding-left:7px;
    color:#cccccc;
    float:left;
    font-size:22px;
}

.step-booking
{
    width:auto;
    padding-right:25px;
}

#membership-step-pills
{
    background-color: inherit;
}
#membership-step-pills > .active {
    color: #91C100;
}

.login-join-box
{
    /*float:left;*/
    border:1px solid #E3DEDA;
    border-radius:10px;
    padding:20px;
    margin-bottom:30px;
    box-shadow:0px 0px 1px 3px #F4F4F4;
}
.join-left
{
    float:left;
    width:70%;
    border-right:solid 1px #E8E8E8;
}
.login-on-join 
{
    float:left;
    width:30%;
    margin-top:/*120px;*/ 10%;
}
.join-on-login 
{
    float:left;
    width:50%;
    margin-top:50px;
}
.login-left
{
    float:left;
    width:50%;
    border-right:solid 1px #E8E8E8;
}
.login .facebook-btn, .join .facebook-btn {
    width: 275px;
    height: 45px;
    background: #001489;
    margin: 0px auto;
    border-radius: 3px;
    color: #ffffff;
    padding-top: 38px;
    text-align: left;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 15px;
}
.facebook-name 
{
    margin-top: -47px;
    margin-left: 40px;
    border-left:solid 1px #6480B2;
    padding-left:30px;
}
.join-normal-customs-errors
{
    margin-top : 20px;
    margin-bottom: 0px;
    padding-left: 0px;
    margin-right: 0px;
}
.join .complete-booking
{
    width:250px;
}
input.btnJoinPage,
input#btnLoginPage { text-transform: uppercase; }
.no-border {border:none;}
.add-details-btn 
{
    background: #001489;
    color: #ffffff;
    font-weight: bold;
}
.join .congrats-search 
{
   margin:0px auto;
   text-align:center;
}

.join .congrats-search-btn 
{
    width: 350px;
    height: 55px;
    background: #8BC10E;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.join .congrats-list-btn 
{
    background: #d50032;
    color: #ffffff;
    font-weight: bold;
}
.join .search-btn { font-weight: bold; }

/******************************************** Start media query specific styles *********************************************/
@media (max-width: 768px) 
{
    .join { padding-left:0px; }
    .login-join-box
    {
        float:left;
        border:none;
        border-radius:10px;
        padding:20px;
        padding-top:0px;
        margin-bottom:30px;
        box-shadow:none;
    }
    .login-left, .join-left
    {
        border:none;
        width:100%;
    }
    .join-on-login, .login-on-join
    {
        float:none;
        width:100%;
        margin-top:0px;
    }
    .join-split { padding-top:20px; }
    .join-editor { width:100%; }
    #search-box-back .search-panel div { float: none; margin-bottom:0.5em;}
    .join .search-btn { width: 100%; }      
}
@media screen and (max-width: 1020px) , screen and (max-width: 800px) and (orientation : portrait) 
{
    /*.login.join,*/ .join 
    {
        width:100%;
        /*padding:10px;*/
    }
    .login .facebook-btn {
        margin: 0px;
    }
    
    .facebook-name 
    {
        /*display:none;*/
        font-size:14px;
        margin-top:-44px;
        margin-left:50px;
    }
    .join .congrats-search-btn 
    {
        width:90%;
        font-size:19px;
    }
    .add-details-btn, .join .congrats-list-btn 
    {
        width:90%;
    }
}