#qt_content_htmlcode, 
#qt_content_csscode, 
#qt_content_lesscode, 
#qt_content_sasscode, 
#qt_content_jscode, 
#qt_content_phpcode, 
#qt_content_mysql, 
#qt_content_wpcode, 
#qt_content_javacode, 
#qt_content_rubycode, 
#qt_content_perlcode, 
#qt_content_pre, 
#qt_content_code, 
#qt_content_outputcode {

    background-color: #FF8002 !important;
    background: #FF8002 !important;
}

code {

}

.code {

    margin: 0;
    padding: 0 !important;
    background-color: transparent !important;
}

pre {

    overflow-y: scroll;
    font: 13px "Courier 10 Pitch", Courier, monospace;
    line-height: 1.5;
    margin-bottom: 1.625em;
    padding: .75em 1.625em;
    border: 0 !important;
}

.st_highlighter {

    position: relative;
    display: block;
    width: auto;

    .box-sizing();

    &:hover {

        .st_highlighter_board {

            max-height: 50em;
            height: auto;

            .transition(all .2s ease);
        }
    }

    .st_highlighter_board {

        overflow: hidden;

        position: absolute;
        top: 0;

        z-index: 999;
        width: 100%;
        max-height: 0;
        padding: 0 5px;

        background-color: rgba(255,255,255,.9);

        .transition(all .2s ease);

        button {

            padding: 0 5px;
            border: 0;
            cursor: pointer;
        }
    }

    .st_highlighter_style {

        width: auto;

        p {

            margin: 0 !important;
            padding: 0 !important;
        }
    }

    .st_highlighter_ruler {

        display: block;
        width: auto;

        .st_ruler {

            z-index: 999;
            
            list-style: none;

            display: block;
            width: 60cm;
            margin: 0;
            padding: 0;
            white-space: nowrap;

            background: lightYellow;
            border: 1px solid #ccc;
            color: #ccc;

            .box-shadow(0 -1px 1em hsl(60, 60%, 84%) inset);
            .box-sizing();

            li {

                position: relative;
                list-style: none;
                
                display: inline-block;
                
                width: 1cm;
                padding: 0;
                padding-left: 1cm;
                margin: .64em 0 -.64em;
                text-align: center;
                
                color: #333;

                &:before {
                    
                    position: absolute;
                    top: -.64em;
                    
                    content: '';
                    
                    border-left: 1px solid #ccc;
                    
                    width: 1cm;
                    height: .64em;
                }

                &:after {
                    
                    position: absolute;
                    top: -.64em;
                    left: 5mm;
                    
                    content: '';
                    
                    border-left: 1px solid #ccc;
                    width: 5mm;
                    height: .32em;
                }
            }
        }
    }
}

.jscodetitle, .htmlcodetitle, .csscodetitle, .lesscodetitle, .sasscodetitle, .jscode, .phpcodetitle, .mysqlcodetitle, .javacodetitle, .rubycodetitle, .perlcodetitle, .wpcodetitle, .outputcodetitle {

    display: block;
    width: auto;
    padding: 5px;
    margin-top: 10px;
}

.htmlcode, .csscode, .lesscode, .sasscode, .jscode, .phpcode, .mysqlcode, .javacode, .rubycode, .perlcode, .wpcode {

    overflow: scroll;
    position: relative;
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    height: auto;
    max-height: 200px;

    .box-shadow(0 0px 6px 3px rgba(51,51,51,0.3) inset);
    .box-sizing();

    .pre { 

        overflow: visible;
        .box-sizing();
    }
}

.outputcode {

    display: block;
    width: auto;
    padding: .75rem;
    background: #FFFFFF;
    border-radius: 0 0 2px 2px;

    .box-shadow(inset 0 0 0 1px rgba(0,0,0,.15));
}

.led-red {

    background-color: #940 !important;
    box-shadow: #000 0 -1px 7px 1px inset, inset #600 0 -1px 9px, #F00 0 2px 12px inset;
}

.led-yellow {

    background-color: #A90 !important;
    box-shadow: #000 0 -1px 7px 1px inset, inset #660 0 -1px 9px, #DD0 0 2px 12px inset;
}

.led-green {

    background-color: #690 !important;
    box-shadow: #000 0 -1px 7px 1px inset, inset #460 0 -1px 9px, #7D0 0 2px 12px inset;
}

.led-blue {

    background-color: #4AB !important;
    box-shadow: #000 0 -1px 7px 1px inset, inset #006 0 -1px 9px, #06F 0 2px 14px inset;
}

@media only screen and(min-width:768px) {

}