/* Generic Styling */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0px;
    font: normal 12px/18px Arial, Helvetica, sans-serif;
}

body {
    background: #EEE url('../images/bg.png') top repeat-x;
}

a {
    color: #CC3B56;
    text-decoration: none;
}

    a:hover {
        color: #7c1a3d;
    }

input[type=text], input[type=password], ul, textarea, .symbol, .largeTime, select{width:70%;}

input[type=button], input[type=submit] {
    background: #DDD;
    border: 1px solid #8f0129;
    line-height: 20px;
    color: #8f0129;
    width: 30%;
    padding: 5px;
    cursor: pointer;
}

    input[type=button]:hover, input[type=submit]:hover {
        background: #EEE;
    }

    input[type=button].forwardStep, input[type=submit].forwardStep {
        background: #8f0129;
        color: #EEE;
    }

        input[type=button].forwardStep:hover, input[type=submit].forwardStep:hover {
            background: #7c1a3d;
        }

input[type=text], input[type=password], select {
    background: #DDD;
    border: 1px solid #8f0129;
    border-radius: 13px;
    line-height: 20px;
    padding: 5px;
    display: inline-block;
}

input[type=text]:hover, input[type=password]:hover, select:hover {
    background: #EEE;
}


textarea {
    background: #DDD;
    border: 1px solid #8f0129;
    border-radius: 13px;
    line-height: 20px;
    padding: 5px;
    display: inline-block;
}

textarea:hover{
    background: #EEE;
}

select option[disabled] {
    display: none;
}

#divContainer {
    margin: 0 auto 20px auto;
    background: url('../images/logo.jpg') no-repeat top left rgba(255,255,255,.8);
    width: 700px;
    box-shadow: 0px 0px 15px #888888;
    overflow:hidden;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    padding:0 0 20px 0;
}

#divContainer #divContent {
    padding: 0px;
    margin: 130px 25px 0 25px;
}

#divContainer #divContent h1 {
    margin: 0px auto 15px auto;
    padding: 0px;
}

#divContainer #divContent #divInfo {
    margin: 0 0 10px 0;
}

ul.noBullet {
    list-style-type: none;
    padding: 0;
}

ul.inline li{display:inline-block;width:30%;}

ul{
    margin:0;
}

hr{
    margin:20px 0 20px 0;
}

ul li{
    margin:2px 0 2px 0;
}

    ul li label {
        display: inline-block;
        width: 100%;
        padding: 5px;
        border: 1px solid #8f0129;
        border-radius: 13px;
        background-color: #DDD;
        line-height: 20px;
        cursor:pointer;
    }

    ul li label:hover{
        background-color:#EEE;
    }

div.conditional, label.conditional{display:none;}

.step{
    margin:20px 0 20px 0;
}

#stCredentialsError, #stESignatureError {
    display: block;
    margin: 0 0 20px 0;
    color: #FF0000;
}

p.copyright{
    width:100%;
    text-align:center;
}

span.error{
    display:inline-block;
    margin:0 0 0 10px;
    color:rgb(255,0,0);
    font-weight:bold;
}

.symbol{
    margin: 0 auto;
    font-size:130px;
    font-weight:bold;
    padding:20px;
    border:3px solid #000;
    border-radius:30px;
    text-align:center;
    line-height:130px;
}

.negative{color:rgb(0,255,0);background-color:rgba(0,255,0,.3);}
.positive{color:rgb(255,0,0);background-color:rgba(255,0,0,.3);}

.largeTime{font-size:70px;font-weight:bold;line-height:70px;text-align:center;margin: 0 auto;}


#stSubmissionStatus{font-size:larger;}

@media screen and (max-width:750px){
    #divContainer{
        width:100%;
    }

    #divContainer #divContent {
        margin: 130px 25px 0 25px;
    }

    input[type=text], input[type=password], ul, textarea, .symbol, .largeTime {
        width: 100%;
    }
}