body {
    font-family : arial;
    padding     : 0px;
    margin      : 0px;
    background  : #CCCC99;
}

h1, h2, h3 {
    color       : #333300;
}

.explain {
    color       : #666633;
}

li {
    padding-bottom : 3px;
}

.main {
    background  : #EEEEBB;
    padding     : 10px;
    border      : 5px solid #999966;
    font-size   : 13px;
    margin      : 10px auto;
    max-width   : 190ch;
}

#menu + .main {
    margin-top  : 30px;
}

.code_box {
    width       : 100%;
    font-family : Monaco, Courier, sans-serif;
    font-size   : 7pt;
    font-weight : normal;
}

.footer {
    margin-top  : 10px;
    margin-bottom  : 10px;
    color       : #777744;
    text-align  : center;
}

.footer a {
    color       : #777744;
}

.code {
    text-align  : center;
    color       : #555522;
    font-weight : bold;
    font-size   : 14px;
    margin-left : 1px;
}
code {
    font-size   : 11px;
    font-family : Monaco, sans-serif;
    display     : inline-block;
    background  : rgba(0,0,0,0.1);
    padding     : 1px 2px;
    border-radius : 3px;
}

pre.code { 
    text-align  : left;
    font-size   : 11px;
    font-family : Monaco,sans-serif;
    margin-left : 100px;
    font-weight : normal;
}

.section {
    background  : #FFFFCC;
    padding     : 5px;
    border : 1px solid #999966;
}

.section_body {
    margin-left : 25px;
}

.emote {
    background  : #F5F5CC;
    padding     : 5px;
    border : 1px dashed #999966;
}

.title {
    background  : #FFFFCC;
    text-align  : center;
    padding-bottom : 10px;
    border : 1px solid #999966;
}

.title h1 {
    margin-bottom : 5px;
}

.title a {
    color       : #555522;
}

a {
    color           : #333300;
}

.list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(70px,1fr));
    grid-auto-rows: 40px;
    border: 3px double;
}

.list > div {
    border: 1px solid;
}

.current {
    background      : #BFB;
}

.cell_counter, .cell_value {
    padding         : 2px;
    margin          : 0px;
    text-align      : center;
}

.cell_counter {
    background      : #BBBB88;
    border-bottom   : 1px solid #BBBB88;
    min-width       : 20px;
}

.cell_counter a {
    display         : block;
    text-decoration : none;
}

.current .cell_counter {
    background      : #FBFBCB;
}

#channels b { color: #006; }

.channel_holder {
    text-indent: -4ch;
    display: block;
    margin-left: 4ch;
}

.cursor {
    color           : #888;
}

.channel {
    color           : #888;
}

.execution {
    font-size       : 12px;
    font-style      : italic;
    color           : #996;
    margin          : 0px;
}
    
     #menu a:hover {
       background: #999966;
       color : #FFFFCC;
    }

    #menu {
       padding: 3px 0px 3px 0px;
       margin-bottom: 10px;
       border : 1px solid #999966;
       border-bottom : 2px solid #333300;
       background : #FFFFCC;
       position : fixed;
       top : 0px;
       left : 0px;
       width : 100%;
    }
    
    #menu ul {
       list-style : none;
       margin: 0px;
       padding : 0px;
    }
    
    #menu li {
       display:inline;
       list-style:none;
    }
    
    #menu a {
       font-weight :bold;
       padding: 3px 12px 3px 12px;
       margin: 0;
       border: 0;
       color : #555522;
       text-decoration: none;
    }
    
    #input {
        position            : absolute;
        top                 : 170px;
        left                : 50%;
        width               : 250px;
        margin-left         : -135px;
        border              : 2px solid #999966;
        padding             : 18px;
        background          : #EEEEBB;
        box-shadow          : 0px 0px 10px rgba(0,200,0,0.7);
        border-radius       : 8px;
    }
    
    #input p {
        margin              : 0px;
    }
    
    #input p:first-child {
        margin              : 0px 0px 6px 0px;
    }
    
    #input label {
        font-weight         : bold;
    }

    #input .opt {
        cursor              : pointer;
        user-select         : none;
    }