﻿.fs_fullscreen {
    width:100%;
    height:100%;
}

/*-----------Primary Box------*/

.primary_box {
    background-color:#f9f9f9;
    border:solid 1px #969696;
        -webkit-text-size-adjust:none;
}

.primary_box, .primary_area {
    font-size:14pt;
    color:#555;
}

.primary_text, .primary_code {
    margin:0 0 20px 0;
}

    .primary_text:last-child, .primary_code:last-child {
        margin:0;
    }

.primary_code {
    font-family:'Courier New';
    font-weight:bold;
    text-align:left;
}

.active_text {
    color:#ff6419;
    font-weight:bold;
}

.secondary_label {
    color:#939393;
}

.secondary_value {
    color:#fff;
}

.interface-light .secondary_box {
    background: #37373c;
}

.interface-dark .secondary_box {
    background: #051423;
}

@media (orientation:landscape) and (max-height:800px), (orientation:portrait) and (max-height:1000px) {
    .primary_box {
        font-size:12pt;
    }
}

@media (orientation:landscape) and (max-height:600px), (orientation:portrait) and (max-height:800px) {
    .primary_box {
        font-size:11pt;
    }

    .primary_text, .primary_code {
        margin:0 0 10px 0;
    }
}

@media (orientation:landscape) and (max-height:400px), (orientation:portrait) and (max-height:600px) {
    .primary_box {
        font-size:10pt;
    }

    .primary_text, .primary_code {
        margin:0 0 5px 0;
    }
}

/*---------------Range Arrows--------------*/

.rangearrows {
    width:180px;
}

.rangearrow_up, .rangearrow_dn {
    width:63px;
    height:44px;
    margin:0px auto;

    background-repeat:no-repeat;
    background-size:100% 100%;

    -ms-touch-action:none;
}

.rangearrow_up {
    background-image: url(../images/bold_fs/interface/arrow_up.png);
}

.disabled .rangearrow_up {
    background-image: url(../images/bold_fs/interface/arrow_disabled_up.png);
}

.rangearrow_dn {
    background-image:url(../images/bold_fs/interface/arrow_dn.png);
}

.disabled .rangearrow_dn {
    background-image:url(../images/bold_fs/interface/arrow_disabled_dn.png);
}

    .rangearrow_up span, .rangearrow_dn span {
        display:none;
    }

.rangearrows_wheel {
    height:40px;
    width:100%;
    margin:20px 0 20px 0;

    background-color:#fff;
    background-image: -ms-linear-gradient(left, rgba(0,0,0,.1) 0%, #fff 48%, #fff 50%, rgba(0,0,0,.4) 100%);
    background-image: -webkit-linear-gradient(left, #ccc 0%, #fff 48%, #fff 50%, #aaa 100%);
    box-shadow:0px 2px 10px 2px rgba(0,0,0,.5) inset;
}

    .rangearrows_wheel .selectwheelitem {
        padding:0 15px 0 15px;
        font-weight:bold;
        font-size:16pt;
        line-height:40px;
        color: #444;
        text-align:center;
        vertical-align:middle;

        white-space:nowrap;
        overflow:hidden;
    }

    .rangearrows_wheel .selectwheel_selected {
        color: #ff6419;
    }


@media (orientation:landscape) and (max-height:800px), (orientation:portrait) and (max-height:1000px) {
    .rangearrows {
        width: 160px;
    }

    .rangearrow_up, .rangearrow_dn {
        width:40px;
        height:28px;
    }

    .rangearrows_wheel {
        height:30px;
        margin:10px 0 10px 0;

        font-size:10pt;
    }

    .rangearrows_wheel .selectwheelitem {
        padding:0 10px 0 10px;
        font-size:15pt;
        line-height:30px;
        vertical-align:middle;
    }
}

@media (orientation:landscape) and (max-height:600px), (orientation:portrait) and (max-height:800px) {
    .rangearrows {
        width: 120px;
    }

    .rangearrow_up, .rangearrow_dn {
        width:36px;
        height:25px;
    }

    .rangearrows_wheel {
        height:25px;
        margin:5px 0 5px 0;

        font-size:10pt;
    }

    .rangearrows_wheel .selectwheelitem {
        padding:0 5px 0 5px;
        font-size:11pt;
        line-height:25px;
        vertical-align:middle;
    }
}

@media (orientation:landscape) and (max-height:400px), (orientation:portrait) and (max-height:600px) {
    /*Don't use in this case*/
}

/**----------Wheels---------------*/
.fs_wheel {
}

.interface-light .fs_wheel {
    box-shadow:0px 3px 20px 3px rgba(0,0,0,.5) inset;
    background:#fff;
    background-image: linear-gradient(to bottom, #ccc 0%, #fff 48%, #fff 50%, #aaa 100%);
}

.interface-dark .fs_wheel {
    box-shadow:0px 3px 20px 3px #030b13 inset;
    background:#051423;
    background-image: linear-gradient(to bottom, #030b13 0%, #051423 48%, #051423 50%, #030b13 100%);
}

.interface-dark .fs_wheel {
    box-shadow:0px 3px 20px 3px #030b13 inset;
    background:#051423;
    background-image: linear-gradient(to bottom, #051423 0%, #082846 48%, #082846 50%, #051423 100%);
}

.fs_list {
    background:#e5e5e5;
    background-image: none;
}
       
    .fs_wheel .selectwheelitem {
        padding:10px 0 10px 0;
        text-transform:uppercase;
        font-weight:bold;
        font-size:20pt;
        text-align:center;
    }

.interface-light .selectwheelitem {
    color: #000;
}

.interface-dark .selectwheelitem {
    color: #fff;
}

.fs_list .selectlistitem {
    padding:10px;
}

    .fs_wheel .selectwheel_selected {
        color: #ff6419;
    }

    .fs_wheel .selectwheel_excluded {
        color: #999;
    }

.disabled .selectwheelitem {
        color: #999;
}
    
@media (orientation:landscape) and (max-height:800px), (orientation:portrait) and (max-height:1000px) {
    .fs_wheel .selectwheelitem {
        padding:7px 0 7px 0;
        font-weight:bold;
        font-size:17pt;
    }

    .fs_list .selectlistitem {
        padding:7px;
    }
}

@media (orientation:landscape) and (max-height:600px), (orientation:portrait) and (max-height:800px) {
    .fs_wheel .selectwheelitem {
        padding:4px 0 4px 0;
        font-weight:bold;
        font-size:14pt;
    }

    .fs_list .selectlistitem {
        padding:4px;
    }
}

@media (orientation:landscape) and (max-height:400px), (orientation:portrait) and (max-height:600px) {
    .fs_wheel .selectwheelitem {
        padding:3px 0 3px 0;
        font-weight:bold;
        font-size:11pt;
    }

    .fs_list .selectlistitem {
        padding:3px;
    }
}

.fs_wheel .sizer {
    padding:5px;
}

/*---------IMAGE STACK---------*/
.imgstack .scratch-image {
    position:absolute;
    top: -10000px;
    left: 0px;
    height: 100px;
    width: 100px;
}

.imgstack-controls {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.imgstack-image-1 {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;

    -webkit-transition:opacity 200ms ease-in-out;
    -moz-transition:opacity 200ms ease-in-out;
    -o-transition:opacity 200ms ease-in-out;
    transition:opacity 200ms ease-in-out;
}

.imgstack-image-0 {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.imgstack-image-0, .imgstack-image-1 {
}


/*---------DenseImage----------*/

.denseimage, .canvasimage {
    position:absolute;
    top:0;
    left:0;

    background-repeat:no-repeat;
    
    -webkit-transition:opacity 200ms ease-in-out;
    -moz-transition:opacity 200ms ease-in-out;
    -o-transition:opacity 200ms ease-in-out;
    transition:opacity 200ms ease-in-out;
}

.fill {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.canvasimage .source-image {
    position:absolute;
    top: -10000px;
    left:0px;
    height: 100px;
    width: 100px;
}

.source-canvas {
    position:absolute;
    top: -10000px;
    left: 0px;
    height: 3000px;
    width: 3000px;
}

.canvasimage .canvas {
    height: 100%;
    width: 100%;
}

/*------------Video--------------*/
.video-frame {
    position:relative;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: #000000;
}

.video-container {
    position: absolute;
    background-color: #000000;
}

/*----------Practice-----------*/
.practice {
}

.practice_generators {
    display: none;
}

.practice_question {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.fs_practice_history li, .practice_qnsummary {
    background-size:auto 20px;
    background-position:10px center;
    background-repeat:no-repeat;
}

.fs_practice_history_next {
    background-image:url(../images/bold_fs/interface/menu_flyout_next_slide.png);
}

.fs_practice_history_continue {
    background-image:url(../images/bold_fs/interface/menu_flyout_keep_practicing.png);
}

.fs_practice_history_reset {
    background-image:url(../images/bold_fs/interface/menu_flyout_reset.png);
}

.practice_qnsummary {
    background-image:url(../images/bold_fs/generic/questionmark_blue.png);
}

    .practice_qnsummary.correct {
        background-image:url(../images/bold_fs/generic/checkmark_green.png);
    }
    
    .practice_qnsummary.incorrect {
        background-image:url(../images/bold_fs/generic/x_red.png);
    }

.practice_qnsummary_report {
    font-family:'Courier New', monospace;
    margin: 3px 15px 3px 10px;
}

li.practice_reviewbtn, li.practice_endbtn, li.practice_checkbtn, li.practice_nextbtn {
    display:none;
}

li.practice_reviewbtn.display, li.practice_endbtn.display, li.practice_checkbtn.display, li.practice_nextbtn.display {
    display:inline-block;
}

.fs_practice_instructions_img {
    height:auto;
    width:100%;
    margin:20px 0 20px 0;
}

/*-----------Dynamic Wheel--------*/
.dynamicwheel {
    width:auto;
    display:inline-block;
}

* {
    -webkit-tap-highlight-color:transparent;
}