html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    overflow: hidden;
}

#ScribbleMap { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 300px; }


.codeToggle {
    cursor: pointer;
}
.htmlToggle:hover {
    text-decoration: underline;
}
.codeToggle.selected {
   text-decoration: underline;
}

.htmlToggle {
    cursor: pointer;
}
.htmlToggle.selected { 
    text-decoration: underline;
}
.htmlToggle:hover {
    cursor: pointer;
    text-decoration: underline;
}


#examples {
     overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    width: 100%;
}
 .exampleHeader {
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
}

#examples .example { 
    font-size: 11px;
    margin-bottom: 2px;
    padding-left: 15px;
    padding-top: 2px;
    padding-bottom: 2px;
    cursor: pointer;
}

#examples .example:hover { 
    background-color: #CCCCCC;
}


#examples .example.selected {
    background-color: #0066FF;
    color: #FFFFFF;
}

.inputLabel { 
    position: absolute; bottom: 0px; left: 0px; height: 25px; width: 100%; background-color: #666; color: #FFFFFF;
}

.inputLabel .label {
    margin: 5px; font-family: Arial; font-size: 12px; font-weight: bold;
}

.inputLabel button {
    width: 105px; height: 20px; font-weight: bold; position: absolute; font-size: 11px; right: 0px; top: 0px; margin-right: 0px;
}

.leftInput {
    left: 200px; position: absolute; width: 620px; top: 0px; bottom: 0px; border: 1px solid #333333; overflow: hidden;
}

.rightInput {
    left: 820px; position: absolute; right: 0px; bottom: 0px; top: 0px; border: 1px solid #666
}

.close {
    top: 10px;
    right: 20px;
    position: absolute;
    width: 31px;
    height: 31px;
    background: url(../images/close.png);
    z-index: 10;
    cursor: pointer;
}

#codeLoad {
    position: absolute; left: 0px; top: 0px; bottom: 25px; right: 0px; z-index: 10;
    background: url(../images/wbg_p75.png);
}

#codeExecute {
    z-index: 0;
}

#codeLoad .spinner {
    background: url(../images/spinner.gif);
    background-position: center center;
    background-repeat: no-repeat;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#resizer {
    width: 100%;
    position: absolute;
    bottom: 290px;
    left: 0px;
    height: 9px;
    cursor: n-resize;
    z-index: 50000;
    background: url(../images/handle.png);
    background-color: #efeff2;
}

#resizeBlocker {
    z-index: 75000;
    cursor: n-resize;
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
#fullScreenEditor {
    z-index: 300000;
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.bottom {
    position: absolute; bottom: 0px; height: 290px; left: 0px; right: 0px; overflow: hidden;
}

.scriptSelector {
    top: 0px; height: 100%; position: absolute; left: 0px; width: 200px;
}

.textAreaWrapper {
    position: absolute;
    top: 0px;
    bottom: 25px;
    overflow: hidden;
    width: 100%;
}
.textArea {
    width: 100%; height: 100%; margin: 0; padding: 0;
}

.scriptSelector select { height: 100%; width: 100%; }

.fullScreenCode {
    width: 20px;
    height: 20px;
     background: url(../images/fullscreen.png);
    position: absolute;
    cursor: pointer;
    top: 3px;
    right: 125px;
}

.themeSelector {
    position: absolute;
    right: 153px;
    height: 25px;
    overflow: hidden;
}

.themeSelector select {
    width: 100%;
    height: 100%;
}