﻿.form-container {
    border: 1px solid #B1C8E1;
    background: #758596;
    background: -webkit-gradient(linear, left top, left bottom, from(#B1C8E1), to(#758596));
    background: -webkit-linear-gradient(top, #B1C8E1, #758596);
    background: -moz-linear-gradient(top, #B1C8E1, #758596);
    background: -ms-linear-gradient(top, #B1C8E1, #758596);
    background: -o-linear-gradient(top, #B1C8E1, #758596);
    background-image: -ms-linear-gradient(top, #B1C8E1 0%, #758596 100%);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
    -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
    box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    text-decoration: none;
    vertical-align: middle;
    min-width: 300px;
    padding: 20px;
    width: 300px;
}

.form-field {
    border: 0px solid #758596;
    background: #E5EEF7;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #758596;
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
    padding: 8px;
    margin-bottom: 20px;
    width: 280px;
}

    .form-field:focus {
        background: #fff;
        color: #965000;
    }

.form-container h2 {
    text-shadow: #CEE7F1 0 1px 0;
    font-size: 18px;
    margin: 0 0 10px 0;
    font-weight: bold;
    text-align: center;
}

.form-title {
    margin-bottom: 10px;
    color: #324861;
    text-shadow: #CEE7F1 0 1px 0;
}

.submit-container {
    margin: 8px 0;
    text-align: right;
}

.submit-button {
    border: 1px solid #65461F;
    background: #805F35;
    background: -webkit-gradient(linear, left top, left bottom, from(#9E6012), to(#805F35));
    background: -webkit-linear-gradient(top, #9E6012, #805F35);
    background: -moz-linear-gradient(top, #9E6012, #805F35);
    background: -ms-linear-gradient(top, #9E6012, #805F35);
    background: -o-linear-gradient(top, #9E6012, #805F35);
    background-image: -ms-linear-gradient(top, #9E6012 0%, #805F35 100%);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    text-shadow: #F3DEC5 0 1px 0;
    color: #DEB98A;
    font-family: helvetica, serif;
    padding: 8.5px 18px;
    font-size: 14px;
    text-decoration: none;
    vertical-align: middle;
}

    .submit-button:hover {
        border: 1px solid #65461F;
        text-shadow: #DEB98A 0 1px 0;
        background: #805F35;
        background: -webkit-gradient(linear, left top, left bottom, from(#9E6012), to(#805F35));
        background: -webkit-linear-gradient(top, #9E6012, #805F35);
        background: -moz-linear-gradient(top, #9E6012, #805F35);
        background: -ms-linear-gradient(top, #9E6012, #805F35);
        background: -o-linear-gradient(top, #9E6012, #805F35);
        background-image: -ms-linear-gradient(top, #9E6012 0%, #805F35 100%);
        color: #fff;
    }

    .submit-button:active {
        text-shadow: #DEB98A 0 1px 0;
        border: 1px solid #65461F;
        background: #9E6012;
        background: -webkit-gradient(linear, left top, left bottom, from(#805F35), to(#805F35));
        background: -webkit-linear-gradient(top, #805F35, #9E6012);
        background: -moz-linear-gradient(top, #805F35, #9E6012);
        background: -ms-linear-gradient(top, #805F35, #9E6012);
        background: -o-linear-gradient(top, #805F35, #9E6012);
        background-image: -ms-linear-gradient(top, #805F35 0%, #9E6012 100%);
        color: #fff;
    }


#container-controls, #field-controls {
    width: 200px;
    height: 620px;
    padding: 10px 20px 10px 20px;
    float: left;
    margin-left: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fcfcfc;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
}

#container-controls, #field-controls {
    width: 200px;
    height: 420px;
    padding: 10px 20px 10px 20px;
    float: left;
    margin-left: 0px;
    margin-top: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fcfcfc;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
}

#button-controls {
    width: 200px;
    height: 420px;
    padding: 10px 20px 10px 20px;
    float: left;
    margin: 20px 0 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fcfcfc;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
}
