/**
 * @version	    $Id: syntaxo.php revision date lasteditedby $
 * @package     SYNTAXO
 * @subpackage	Content
 * @author      Samet Tarim <joomla@prod3v3loper.com>
 * @copyright   (C) 2019 - Samet Tarim
 * @license     GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
 *
 * @link https://www.prod3v3loper.com
 * 
 * @see https://docs.joomla.org/Extension_types_(general_definitions)
 * @see https://docs.joomla.org/J3.x:Creating_a_content_plugin
 */
 
.code {

    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-family: 'Consolas', 'Andale Mono', 'Monotype.com', 'Lucida Console', 'Monospace', Serif;
}

.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;
    white-space: pre;
}

[class*=mb-linecount-] {

    display: block;
    float: left;
    width: auto;
    min-width: 70px;
    border-radius: 0;
    border-right: 1px solid lawngreen;
    text-align: right;
}

[class*=mb-linecode-] {

    display: block;
    width: auto;
    white-space: pre;
}

.noselect {

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.st_highlighter_style {

    background-color: rgb(34, 34, 34);
}

.st_highlighter pre {

    display: block;
    margin: 0;
    padding: 2em .3em;

    background-color: transparent;

    color: #E3CEAB;
    font-family: 'Consolas', 'Andale Mono', 'Monotype.com', 'Lucida Console', 'Monospace', Serif;
    font-size: .9rem;
    white-space: pre;
    word-wrap: normal;
}

.st_highlighter_ruler > .st_ruler {

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

.st_highlighter_ruler > .st_ruler > li {

    text-shadow: 1px 1px hsl(60, 60%, 84%);
    font-size: 9px;
    color: #333;
}

.htaccesscodetitle, 
.jsoncodetitle, 
.ampcodetitle, 
.htmlcodetitle, 
.csscodetitle, 
.lesscodetitle, 
.sasscodetitle, 
.jscodetitle, 
.tscodetitle, 
.phpcodetitle, 
.mysqlcodetitle, 
.javacodetitle, 
.rubycodetitle, 
.perlcodetitle, 
.wpcodetitle, 
.outputcodetitle {

    color: #ECEDEF;
}

.jsoncodetitle {

    border-top: 2px solid #010101;
    border-bottom: 2px solid #010101;
    background: linear-gradient(36deg, #b4b4b4, #999999, #272727);
}

.htaccesscodetitle {

    border-top: 2px solid #d12127;
    border-bottom: 2px solid #d12127;
    background: linear-gradient(36deg, #7f2779, #b92044, #f59722);
}

.ampcodetitle {

    border-top: 2px solid #0379c4;
    border-bottom: 2px solid #0379c4;
    background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
}

.htmlcodetitle {

    border-top: 2px solid #E54D26;
    border-bottom: 2px solid #E54D26;
    background: #F16529;
}

.csscodetitle {

    border-top: 2px solid #0171BB;
    border-bottom: 2px solid #0171BB;
    background: #28A9E0;
}

.lesscodetitle {

    border-top: 2px solid #333333;
    border-bottom: 2px solid #333333;
    background: #1D365D;
}

.sasscodetitle {

    border-top: 2px solid #333333;
    border-bottom: 2px solid #333333;
    background: #CF649A;
}

.tscodetitle {

    border-top: 2px solid #152740;
    border-bottom: 2px solid #152740;
    background: #294e80;
}

.jscodetitle {

    border-top: 2px solid #E5A329;
    border-bottom: 2px solid #E5A329;
    background: #EFBD24;
}

.phpcodetitle {

    border-top: 2px solid #4D588F;
    border-bottom: 2px solid #4D588F;
    background: #8892BF;
}

.mysqlcodetitle {

    border-top: 2px solid #FFA518;
    border-bottom: 2px solid #FFA518;
    background: #5382A1;
}

.javacodetitle {

    border-top: 2px solid #4E7896;
    border-bottom: 2px solid #4E7896;
    background: #F58219;
}

.rubycodetitle {

    border-top: 2px solid #A91401;
    border-bottom: 2px solid #B31301;
    background: #CF2B18;
}

.perlcodetitle {

    border-top: 2px solid #5D5E83;
    border-bottom: 2px solid #5D5E83;
    background: #41436D;
}

.wpcodetitle {

    border-top: 2px solid #333333;
    border-bottom: 2px solid #333333;
    background: #0073AA;
}

.outputcodetitle {

    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background: #333333;
}

.jsoncode, 
.htaccesscode, 
.ampcode, 
.htmlcode, 
.csscode, 
.lesscode, 
.sasscode, 
.jscode, 
.tscode, 
.phpcode, 
.mysqlcode, 
.javacode, 
.rubycode, 
.perlcode, 
.wpcode {

    background-color: #222;
}

/* COMMENTS */
.pre .st_comment {color:rgba(150,150,150,.7);} /* Orange */

/* HTML */
.pre .st_html_tags {color:#F16529;} /* LightBlue */
.pre .st_html_style {color:#9932CC;} /* DarkOrchid */
.pre .st_html_link {color:#00BFFF;} /* DeepSkyBlue */
.pre .st_html_meta {color:#1E90FF;} /* DodgerBlue */
.pre .st_html_script {color:#FF1493;} /* DeepPink */

/* CSS */
.pre .st_css_id {color:#268BD2;}
.pre .st_css_class {color:lightsalmon;} /* LightSalmon  */
.pre .st_css_color {color:#DCDCDC;} /* Gainsboro  */
.pre .st_css_webkit {font-style: italic; color:#DCDCDC;} /* Gainsboro */
.pre .st_css_media {font-style: italic; color:#DCDCDC;} /* Gainsboro */

/* LESS */
.pre .st_less {color:#F9F2F4;}
.pre .st_less_mix {color:#F9F2F4;}
.pre .st_less_math {color:#657B83;}
.pre .st_less_misc {color:#657444;}
.pre .st_less_string {color:#875444;}
.pre .st_less_type {color:#875324;}
.pre .st_less_color_channel {color:#952653;}
.pre .st_less_when {color:#223344;}

/* ATTRIBUTE */
.pre st_attributes {color:#00CED1;} /* DarkTurquoise */

/* NUMBERS */
.pre .st_numbers {color:#f2f2f2;}

/* ARRAY */
.pre .st_array {color:lightblue;}
.pre .st_arrayinner {color:#E5A329;}

/* STRINGS */
.pre .st_strings {color:#87CEEB;} /* SkyBlue */

/* BOOLEAN */
.pre .st_script_booltrues {color:#00ff00;}
.pre .st_script_boolfalses {color:#ff0000;}

/* KEYWORDS PHP - JS - Perl */
.pre .st_script_keys {color:#2AA1AE;} /*  */
.pre .st_script_back {color:MediumSpringGreen;} /* MediumSpringGreen */

/* Keywords PHP */
.pre .st_php_keys {color:#8892BF;} /* Olive */

/* Keywords JS */
.pre .st_js_keys {color:#87CEFA;} /* LightSkyBlue  */
.pre .st_js_vars {color:#999;} /* Grey  */

/* Variablen */
.pre .st_variables {color:#00cccc;} /* RoyalBlue */

/* Defines / Uppercases */
.pre .st_uppercases {color:#FFFFFF;} /* White */

/* Quotes */
.pre .st_quotes {color:#8FBC8F;} /* DarkSeaGreen */

/* @import | @namespace */
.pre .st_vars {color:cyan;}

/* PHP Tags */
.pre .st_php_tags {color:#8892BF;}

.pre .st_positive {color:#0f0;}
.pre .st_negative {color:#f00;}

.pre .st_wp_funct {color:#0073AA;}

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

    .pre {

        padding: 5em .5em;
        font-size: 1rem;
    }
}

.st_highlighter {

    position: relative;
    display: block;
    width: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    overflow: hidden;

    &: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 {
            width: 10px;
            height: 18px;
            padding: 0 5px;
            border: 0;
            cursor: pointer;
        }
    }

    .st_highlighter_style {

        width: auto;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;

        p {

            margin: 0;
            padding: 0;
        }
    }

    .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;

            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;
                }
            }
        }
    }
}

.jsoncodetitle, 
.htaccesscodetitle, 
.ampcodetitle, 
.htmlcodetitle, 
.csscodetitle, 
.lesscodetitle, 
.sasscodetitle, 
.jscodetitle, 
.tscodetitle, 
.phpcodetitle, 
.mysqlcodetitle, 
.javacodetitle, 
.rubycodetitle, 
.perlcodetitle, 
.wpcodetitle, 
.outputcodetitle {

    display: block;
    width: auto;
    padding: 5px;
    margin: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.htaccesscode, 
.jsoncode, 
.ampcode, 
.htmlcode, 
.csscode, 
.lesscode, 
.sasscode, 
.jscode, 
.tscode, 
.phpcode, 
.mysqlcode, 
.javacode,
.rubycode, 
.perlcode, 
.wpcode, 
.outputcode {

    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;
}

.outputcode {

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

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

.led-red {

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

.led-yellow {

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

.led-green {

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

.led-blue {

    background-color: #4AB;
    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) {

}