html {
    background: -webkit-linear-gradient(midnightblue, black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(midnightblue, black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(midnightblue, black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(midnightblue, black); /* Standard syntax */
}

body {
    background: rgba(0,0,0,0); /* Make the bg transparent */
    color: white;
    min-width: 400px;
    width: 30%;
    height: 100%;
    text-align: center;
    margin: auto;
}

.header {
    padding-top: 1em;
    height: 10%;
    min-height: 75px;
    text-align: center;
}

.header strong {
    float: right;
}

.logo {
    margin: auto;
}

.logo strong {
    padding-left: .5em;
    float: left;
}

#airtimeLogo {
    padding-top: .7em;
    float: left;
}

/* ############################################################################
 *
 * Form Styles
 *
 * ############################################################################ */

form {
    margin: auto;
    top: 0;
    width: 99%;
    position: absolute;
    float: right;

}

form p {
    text-align: left;
    margin-bottom: 1em;
}

form .form-group {
    text-align: left;
}

.viewport {
    position: absolute;
    width: 30%;
    min-width: 400px;
    height: 89%; /* Keep 1% off of 100 to avoid overflow */
    overflow-x: hidden;
    overflow-y: auto;
}

.form-wrapper {
    overflow: auto;
}

.form-title {
    margin: 1em 0;
}

.form-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.form-control-feedback {
    display: none;
}

/* ############################################################################
 *
 * Form Help Box Styles
 *
 * ############################################################################ */

.help-block.help-message {
    font-weight:bold;
    margin-bottom: 15px;
}

.has-error, .has-error .control-label,
.has-error .form-control-feedback,
.has-error .form-control {
    color: red;
}

.has-success {
    color: lawngreen;
}

/* ############################################################################
 *
 * Overlay Styles
 *
 * ############################################################################ */

#overlay {
    display: none;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    z-index: 5000;
}

#loadingImage {
    display: none;
    position: absolute;
    top: 40%;
    left: 49%; /* Shave 1% to account for half image width */
    z-index: 5001;
}

/* ############################################################################
 *
 * Button Styles
 *
 * ############################################################################ */
 
.btn-primary {
    font-weight: bold;
}

.btn-disabled {
    disabled: disabled;
    visibility: hidden;
    display: block;
}

.btn-next {
    float: right;
    width: 49%;
}

.btn-skip {
    margin-top: .5em;
    width: 100%;
}

.btn-back {
    float: left;
    width: 49%;
}

.caret.caret-up {
    border-top-width: 0;
    border-bottom: 4px solid #fff;
}

/* ############################################################################
 *
 * RabbitMQ Settings Form Styles
 *
 * ############################################################################ */

#rmqSettingsForm {
    left: 100%;
}

#rmqFormBody {
    display: none;
}

/* ############################################################################
 *
 * General Settings Form Styles
 *
 * ############################################################################ */

#generalSettingsForm {
    left: 200%;
}

/* ############################################################################
 *
 * Media Settings Form Styles
 *
 * ############################################################################ */

#mediaSettingsForm {
    left: 300%;
}

/* ############################################################################
 *
 * Finish Settings Form Styles
 *
 * ############################################################################ */

#finishSettingsForm {
    left: 400%;
}