/********************************************************************/
/*                                                                  */
/*                         Position login box                       */
/*                                                                  */
/********************************************************************/

#panDialogueWrapper {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.7);
    position: fixed;
    z-index: 1000;
}

#panInnerWrapper {
    padding: 1em;
    color: #222;
    padding-left: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    margin-top: 100px;
    background: rgb(255, 255, 255);
    -moz-box-shadow: inset 0 2px 50px #d7d7d7;
    -webkit-box-shadow: inset 0 2px 50px #d7d7d7;
    box-shadow: inset 0 2px 50px #d7d7d7;
    border-radius: 2px;
}


#panDialogHeader img {
    width: 35%;
}
/********************************************************************/
/*                                                                  */
/*                            Close btn                             */
/*                                                                  */
/********************************************************************/

#panCloseButton {
    float: right;
}

#btnClose {
    border-radius: 2px;
    padding: .4em 2em .4em 2em;
    font-size: 1em;
    /*Fallback*/
    background-color: #3b3b3b;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3b3b3b), to(#2b2b2b));
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #3b3b3b, #2b2b2b);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #3b3b3b, #2b2b2b);
    /* IE 10 */
    background: -ms-linear-gradient(top, #3b3b3b, #2b2b2b);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #3b3b3b, #2b2b2b);
    color: #FFF;
    cursor: pointer;
    border: solid 2px #222;
}

    #btnClose:hover {
        -moz-box-shadow: 0px 0px 1px 1px #000;
        -webkit-box-shadow: 0px 0px 1px 1px #000;
        box-shadow: 0px 0px 1px 1px #000;
    }

/********************************************************************/
/*                                                                  */
/*                       Sort login and register                    */
/*                                                                  */
/********************************************************************/

#panStandardDialogue {
    display: table;
    width: 100%;
}

#panLoginDialogue, #panCreateUserDialogue {
    display: table-cell;
    width: 50%;
    height: 265px;
    position: relative;
}

#panForgottenPasswordDialogue {
    height: 180px;
    position: relative;
}

#labFailureText {
    display: block;
    color: red;
    margin: .5em 0 .5em 0;
}

#panCreateUserDialogue {
    border-left: solid 1px #d7d7d7;
    padding: 0 0 0 1em;
}

#panLoginDialogueHeder, #labCreateUserDialogueHeader, #panForgottenPasswordDialogueHeader {
    font-size: 2em;
    margin: .5em 0 .5em 0;
}

/********************************************************************/
/*                                                                  */
/*                                Login                             */
/*                                                                  */
/********************************************************************/

.loginLabel {
    display: block;
    margin: 1em 0 .2em 0;
    font-size: 1.4em;
}

.loginTextBox {
    border: solid 1px #d7d7d7;
    width: 230px;
    height: 25px;
    padding: 2px;
    border-radius: 2px;
    -moz-box-shadow: inset 0 2px 5px #d7d7d7;
    -webkit-box-shadow: inset 0 2px 5px #d7d7d7;
    box-shadow: inset 0 2px 5px #d7d7d7;
    font-family: Calibri;
}

#UserNameLabel:before {
    content: "\f007";
}

#PasswordLabel:before {
    content: "\f023";
}

#labEmailLabel:before {
    content: "\f0e0";
}

#UserNameLabel:before, #PasswordLabel:before, #labEmailLabel:before {
    font-family: FontAwesome;
    font-size: 1.5em;
    margin: 0 .2em 0 .2em;
    color: #bbb;
}

#lbForgottenPassword {
    color: #000;
    text-decoration: underline;
}

.requiredFieldMessage {
    color: red;
}


.LoginButton {
    margin: 1em 0 0 0;
    display: block;
    text-align: center;
    width: 237px;
    background-color: #11aa00;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#11aa00), to(#0e8e00));
    background: -webkit-linear-gradient(top, #11aa00, #0e8e00);
    background: -moz-linear-gradient(top, #11aa00, #0e8e00);
    background: -ms-linear-gradient(top, #11aa00, #0e8e00);
    background: -o-linear-gradient(top, #11aa00, #0e8e00);
    border: solid 2px #0e8e00;
    color: #FFF;
    padding: 1em 0 1em 0;
    cursor: pointer;
    text-shadow: 1px 1px 10px rgba(150, 150, 150, 1);
    position: absolute;
    bottom: 0;
    left: -1em;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}

    .LoginButton:hover, #btnCreateUser:hover {
        -moz-box-shadow: 0px 0px 1px 1px #000;
        -webkit-box-shadow: 0px 0px 1px 1px #000;
        box-shadow: 0px 0px 1px 1px #000;
    }

/********************************************************************/
/*                                                                  */
/*                            Create user                           */
/*                                                                  */
/********************************************************************/

#btnCreateUser {
    margin: 1em 0 0 0;
    display: block;
    text-align: center;
    width: 237px;
    background-color: #3b3b3b;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3b3b3b), to(#2b2b2b));
    background: -webkit-linear-gradient(top, #3b3b3b, #2b2b2b);
    background: -moz-linear-gradient(top, #3b3b3b, #2b2b2b);
    background: -ms-linear-gradient(top, #3b3b3b, #2b2b2b);
    background: -o-linear-gradient(top, #3b3b3b, #2b2b2b);
    border: solid 2px #2b2b2b;
    border-radius: 2px;
    color: #FFF;
    padding: 1em 0 1em 0;
    cursor: pointer;
    text-shadow: 1px 1px 10px rgba(150, 150, 150, 1);
    position: absolute;
    bottom: 0;
    right: -1em;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}


#btnForgottenPassword {
    margin: 1em 0 0 0;
    display: block;
    text-align: center;
    width: 237px;
    background-color: #11aa00;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#11aa00), to(#0e8e00));
    background: -webkit-linear-gradient(top, #11aa00, #0e8e00);
    background: -moz-linear-gradient(top, #11aa00, #0e8e00);
    background: -ms-linear-gradient(top, #11aa00, #0e8e00);
    background: -o-linear-gradient(top, #11aa00, #0e8e00);
    border: solid 2px #0e8e00;
    color: #FFF;
    padding: 1em 0 1em 0;
    cursor: pointer;
    text-shadow: 1px 1px 10px rgba(150, 150, 150, 1);
    position: absolute;
    left: -1em;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}



/********************************************************************/
/*                                                                  */
/*                             Responsive                           */
/*                                                                  */
/********************************************************************/

@media all and (max-width : 1000px) {

    #panInnerWrapper {
        color: #222;
        width: 90%;
        margin-top: 1em;
    }

    #panDialogHeader img {
        width: 15em;
    }



    #panCreateUserDialogue {
        border-top: solid 1px #d7d7d7;
        border-left: none;
        padding: 1em 0 0 0;
    }

    #panStandardDialogue {
        display: block;
        width: 100%;
    }



    #panLoginDialogue, #panCreateUserDialogue, #panForgottenPasswordDialogue {
        display: block;
        width: 100%;
        height: auto;
        position: inherit;
        margin-bottom: 1em;
    }

    .LoginButton, #btnCreateUser, #btnForgottenPassword {
        position: inherit;
        margin-left: -1em;
    }

    #btnCreateUser {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 25px;
        border-top-right-radius: 25px;
        margin-bottom: -1em;
    }
}


/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */