@import "compass/css3"
@import "compass/reset/utilities"

#__ID__
    +nested-reset
    +reset-box-model
    +reset-font
    +box-shadow(0px 0px 4px #222)

    background  : rgba(255,255,255,0.93)
    padding     : 0
    border      : 2px solid white
    z-index     : 2147483647
    font-size   : 12px
    font-family : Verdana, sans-serif
    max-height  : 95%
    max-width   : 60%
    color       : black
    *
        visibility      : visible
        font-weight     : 500
        +single-box-shadow($color: transparent)
        +single-text-shadow($color: transparent)
        +border-radius(0)
        margin          : 0
        padding         : 0
        position        : static
    ul
        text-align      : left
    .toggle-widget
        float           : right !important
        background      : white !important
        border          : 1px solid #ccc !important
        color           : #991111 !important
        cursor          : pointer !important
        height          : 20px !important
        width           : 78px !important
        display         : block !important
        min-width       : 78px !important
        min-height      : 20px !important
        font-size       : 12px !important
        line-height     : 1em !important
        font-weight     : 500 !important
        &:active, &.active
            background      : #991111 !important
            color           : white !important
    .coffee-source
        font-family     : monospace
        font-size       : 15px
        min-width       : 400px
        height          : 22px
        margin          : 4px
    .input
        display         : none
    .history
        margin          : 8px
        padding         : 4px
        font-family     : monospace
        list-style-type : circle
        overflow-y      : scroll
        li
            padding         : 4px 1em 4px 4px
            overflow        : hidden
            text-overflow   : ellipsis
            white-space     : nowrap
            position        : relative
            &:hover
                list-style-type     : disc
            &.cs-error
                color   : orange
            &.js-error
                color   : red
            &.object span.result
                cursor: pointer
            &.property-value
                list-style-type: none
                span.property
                    color: purple
            li
                padding-left: 3em
            button
                cursor: pointer
            button.load
                position    : absolute
                right       : 0
                top         : 0
                border      : 1px solid #ccc
                padding     : 2px
                background  : white
                &:hover
                    background-color    : rgba(255,255,0,0.2)
                &:active
                    background-color    : rgba(255,255,0,0.8)
            button.expand
                background: transparent
                border: 0
                width: 1em
            span.opened
                display: none
            &.open, &.open > span.value
                > button span.opened
                    display: inline
                > button span.closed
                    display: none
    p.instructions
        text-align          : center
    .clear, .replay
        padding         : 4px
        text-align      : center
        cursor          : pointer
        float           : left
        color           : #555
        font-variant    : small-caps
        display         : none
        &:hover
            color    : #991111
    a
        padding         : 4px
        text-align      : center
        cursor          : pointer
        float           : right
        color           : #555
        font-variant    : small-caps
        text-decoration : none
    input
        vertical-align  : middle
    p.mode
        padding         : 4px
        margin          : 0
        float           : right
        display         : inline-block
        width           : 80px
        color           : #555
        font-variant    : small-caps
        display         : none
        text-align      : right
    .autosuggest
        +box-shadow(0px 0px 4px #222)
        position        : absolute
        top             : -2px
        left            : -260px
        display         : block
        background      : rgba(255,255,255,0.9)
        width           : 250px
        overflow-y      : scroll
        font-family     : monospace
        li
            padding: 4px
        li.heading
            font-weight     : bold
            text-decoration : underline
            list-style-type : none

    .function
        color       : #229922
    .number
        color       : #222299
    .string
        color       : #992222
    .undefined
        color       : grey
        font-style  : italic
    .object
        color       : black
    .boolean
        color       : #229999