/* Custom Styles for the FTUE Dialogs */

@import "client/common.scss";
@charset "UTF-8";

/* Jonathon's FTUE overrides */

#ftue-dialog {
  .help-doc {
    display:none;
  }
}

div.dialog.ftue .ftue-inner div[layout-wizard-step="1"] {
    p.intro {
        margin-top:0px;
    }

    ul {
        margin:0px;
        padding:0px;
        margin-top:20px;
    }

    li {
        text-align:center;
        width: 31%;
        height: 170px;
        margin:0px;
        /*padding:0px;*/
        list-style: none;
        float:left;
    }
    li.first {
        width: 34%;
    }
}
div.dialog.ftue .ftue-inner div[layout-wizard-step="3"] {
    h5 {
        color:#fff;
        font-weight: bold;
        margin:0px;
        padding:0px;
        margin-top:16px;
    }
    p {
        margin-top:0px;
    }
}

div.dialog.ftue .ftue-inner div[layout-wizard-step="0"] {

}
#ftue-latency-needle {
    position:absolute;
    width: 6px;
    height: 220px;
    top:50%;
    left:50%;
    overflow:visible;
    margin: -106px -3px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#ftue-latency-numerical {
    position:absolute;
    width: 150px;
    height: 32px;
    top: 228px;
    left: 50%;
    margin: -73px;
    text-align:center;
    font-size: 1.8em;
    font-weight: bold;
}
#ftue-latency-label {
    position:absolute;
    width: 150px;
    height: 32px;
    top: 250px;
    left: 50%;
    margin: -73px;
    text-align:center;
    font-size: 0.9em;
}


div.dialog.ftue {
    min-height: 500px;
    max-height: 500px;
    width: 800px;

    .ftue-inner {
        line-height: 1.3em;

        a {
            text-decoration: underline;
        }

        p {
            margin-top: 12px;
        }

        .device_type ul {
            list-style:disc;
        }

        .device_type li {
            margin: 15px 12px 15px 36px;
        }

        select {
            max-width: 220px;
        }

        .settings-profile {
            margin-top: 12px;
        }

        p.intro {
            margin-top:0px;
        }

        .easydropdown-wrapper {
          width:100%;
          max-width:220px;
        }
        .ftue-new {
            clear:both;
            position:relative;
            width:100%;
            height: 54px;
            margin-top: 12px;
            select {
                font-size: 15px;
                padding: 3px;
            }
            .latency {
                position: absolute;
                top: 120px;
                font-size: 12px;
                .report {
                    color:#fff;
                    position: absolute;
                    top: 20px;
                    left: 0px;
                    width: 105px;
                    height: 50px;
                    background-color: #72a43b;
                    padding: 10px;
                    text-align: center;
                    .ms-label {
                        padding-top: 10px;
                        font-size: 34px;
                        font-family: Arial, sans-serif;
                    }
                    p {
                        margin-top: 4px;
                    }
                }
                .report.neutral, .report.start, .report.unknown {
                    background-color: #666;
                }
                .report.good {
                    background-color: #72a43b;
                }
                .report.acceptable {
                    background-color: #D6A800;
                }
                .report.bad {
                    background-color: #7B0C00;
                }
                .instructions {
                    color:#fff;
                    position: absolute;
                    top: 20px;
                    left: 125px;
                    width: 595px;
                    height: 50px;
                    padding: 10px;
                    background-color: #666;
                }
                .instructions p.start, .instructions p.neutral {
                    padding-top: 4px;
                }
                .instructions p.unknown {
                    margin-top:0px;
                    padding-top: 4px;
                }
                .instructions p.good {
                    padding-top: 4px;
                }
                .instructions p.acceptable {
                    margin-top: -6px;
                }
                .instructions p.bad {
                    margin-top: -6px;
                    line-height: 16px;
                }
                .instructions p a {
                    font-weight: bold;
                }
            }
            .column {
                position:absolute;
                width: 220px;
                height: 50px;
                margin-right:8px;
            }
            .settings-2-device {
                left:0px;
            }
            .settings-2-center {
                left:50%;
                margin-left: -110px;
                .buttons {
                    margin-top: 14px;
                    a {
                        margin-right: 0px;
                    }
                }
            }
            .settings-2-voice {
                top: 0px;
                right:0px;
            }
            .controls {
                margin-top: 16px;
                background-color: #222;
                height: 48px;
                width: 220px;
            }
            .ftue-vu-left {
                position:relative;
                top: 0px;
            }
            .ftue-vu-right {
                position:relative;
                top: 22px;
            }
            .ftue-fader {
                position:relative;
                top: 14px;
                left: 8px;
            }
            .gain-label {
                color: $ColorScreenPrimary;
                position:absolute;
                top: 76px;
                right: 6px;
            }

            .subcolumn {
                position:absolute;
                top: 60px;
                font-size: 12px !important;
                width: 68px;
                height: 48px;
            }
            .subcolumn select {
                width: 68px;
            }
            .subcolumn.first {
                left:0px;
            }
            .subcolumn.second {
                left:50%;
                margin-left:-34px;
            }
            .subcolumn.third {
                right:0px;
            }
        }

        .asio-settings {
            clear:both;
            position:relative;
            width:100%;
            height: 54px;
            margin-top: 8px;
            .column {
                position:absolute;
                width: 220px;
                height: 50px;
                margin-right:8px;
            }
            .settings-driver {
                left:0px;
            }
            .settings-asio {
                left:50%;
                margin-left: -110px;
            }
            .settings-asio.mac {
                left:0px;
                margin-left: 0px;
            }
            .settings-asio-button {
                right:0px;
                height: 45px;
                .bottom {
                    position:absolute;
                    bottom:0px;
                }
            }
            .settings-asio-button.mac {
                right:auto;
                left:50%;
                margin-left: -110px;
            }
            .subcolumn {
                position:absolute;
                width: 68px;
                height: 48px;
            }
            .subcolumn select {
                width: 68px;
            }
            .subcolumn.first {
                left:0px;
            }
            .subcolumn.second {
                left:50%;
                margin-left:-34px;
            }
            .subcolumn.third {
                right:0px;
            }

        }
        .settings-controls {
            
            clear:both;
            position:relative;
            width: 100%;
            height: 100px;
            
            div.section {
                position:absolute;
                width: 220px;
                height: 100px;

                select {
                    display:block;
                    width: 100%;
                }
            }
            .audio-input {
                left:0px;
            }
            .voice-chat-input {
                left:50%;
                margin-left: -110px;
            }
            .audio-output {
                right:0px;
            }
            .ftue-controls {
                margin-top: 16px;
                position:relative;
                height: 48px;
                width: 220px;
                background-color: #222;
            }
            .ftue-vu-left {
                position:relative;
                top: 0px;
            }
            .ftue-vu-right {
                position:relative;
                top: 22px;
            }
            .ftue-fader {
                position:relative;
                top: 14px;
                left: 8px;
            }
            .gain-label {
                color: $ColorScreenPrimary;
                position:absolute;
                top: 14px;
                right: 6px;
            }
        }

        .buttonbar {
            position:absolute;
            bottom: 24px;
            right: 0px;
            a {
                color: darken(#fff, 5);
                text-decoration: none;
            }

            .spinner-small {
              display:none;
              margin-top: 3px;
              position: relative;
              top: 12px;
            }
        }

    }
}

/*
div[layout-id="ftue2"] {
    .formrow {
        position:relative;
        clear:both;
        border:none;
        margin: 12px;
        padding:4px;
    }
    label {
        text-align:left;
    }
    select {
        display:block;
        position:absolute;
        left: 140px;
        top: 0px;
    }
}

div[layout-id="ftue3"] {
    button {
        margin: 0px 2em;
    }

    .progressContainer {
        margin: 2em;
        border: 1px solid #fff;
        width: 400px;
        height: 10px;
    }

    .progressFull {
        height: 10px;
        width: 2px;
        background-color:#0f0;
    }
}
*/

/* Start Jeff's ftue.css */
.landing-overlay   {
    z-index:100;
    width:800px;
    height:auto;
    position:absolute;
    left:50%;
    top:150px;
    margin-left:-400px;
    background-color:#333;
    border: 1px solid #ed3618;
}

.ftue-overlay {
    z-index:100;
    width:800px;
    height:400px;
    position:absolute;
    left:50%;
    top:20%;
    margin-left:-400px;
    background-color:#333;
    border: 1px solid #ed3618;
}

.ftue-overlay.tall {
  top:75px;
}
.ftue-overlay.tall .ftue-inner {
  padding:5px;
}


.ftue-inner {
    width:750px;
    padding:25px;
    font-size:15px;
    color:#aaa;
}

.ftue-inner input[type=text], .ftue-inner input[type=password] {
    padding:3px;
    font-size:13px;
    width:145px;
}

.ftue-inner input.gearprofile {
    width:auto;
}

.ftue-inner select.audiodropdown {
    width:223px;
    color:#666;
}

.ftue-left {
    float:left;
    width:340px;
    padding-right:30px;
    border-right:solid 1px #484848;
}

.ftue-right {
    width: 340px;
    padding-left:30px;
    float:left;
}

/**

.ftue-inner a {
    color:#ccc;
}

.ftue-inner a:hover {
    color:#fff;
}
*/

.ftue-instrumentlist {
    width:340px;
    height:178px;
    background-color:#c5c5c5;
    border:none;
    -webkit-box-shadow: inset 2px 2px 3px 0px #888;
    box-shadow: inset 2px 2px 3px 0px #888;
    color:#000;
    overflow:auto;
    font-size:14px;
}

.ftue-instrumentlist select, .ftue-instrumentlist .easydropdown {
    width:100%;
    color:#000;
}

table.audiogeartable {
    margin-left:-20px;
    margin-right:-20px;
}

.ftue-gainmeter {
    width:223px;
    height:55px;
    display:inline-block;
    margin-right:8px;
    position:relative;
    background-color:#242323;
}

.gainmeter-vu-top {
    position:absolute;
    left:0px;
    top:0px;
}

.gainmeter-vu-bottom {
    position:absolute;
    left:0px;
    bottom:0px;
}

.gainmeter-gain {
    position:absolute;
    top:18px;
    left:10px;
    width:150px;
    height:18px;
    background-image:url(/assets/content/bkg_slider_gain_horiz.png);
    background-repeat:repeat-x;
}

.gainmeter-gain-wrapper {
    position:relative;
    width:51px;
    height:18px;
}

.gainmeter-gain-slider {
    position:absolute;
    top:0px;
    left:60%;
    width:10px;
    height:18px;
}

.gainmeter-label {
    font-size:16px;
    color:#ED3618;
    position:absolute;
    top:18px;
    right:16px;
}
/* End Jeff's CSS */

/* Added to deal with invitation codes */
.ftue-invited, {
  width:750px;
  padding:25px;
  font-size:15px;
  color:#aaa;
}

.ftue-video-link {
    padding:4px;
    cursor:pointer;
    background-color:#333;
    border: 1px solid #333;
}
.ftue-video-link.hover {
    background-color:#444;
    border: 1px solid #555;
}
