/* Utility classes */
.map {
    position:absolute;
    top:40px;
    bottom:0;
    left:0;
    right:40%;
}


.right {
    overflow-x:hidden;
    position:absolute;
    bottom:0;
    top:0;
    right:0;
    width:40%;
    min-width:400px;
    box-sizing:border-box;
    font-size:14px;
    background:#f1f1f1;
    transition:all 200ms;
    -webkit-transition:all 200ms;
    border-left: 1px solid #d9d9d9;
    border-color: rgba(102,102,102,0.25);
}

body.fullscreen .map {
    right:0;
}

body.fullscreen .right {
    height:40px;
    bottom:auto;
    border-bottom: 1px solid #d9d9d9;
    overflow-y: hidden;
}

body.fullscreen .right .top .buttons,
body.fullscreen .file-bar .fr {
    display:none;
}

p.intro {
    margin:10px;
    padding:0;
    font-size:small;
}

.deemphasize { color: #888;}

p.intro-hint {
    margin:10px auto;
    opacity:0.5;
    font-size:small;
    border-top:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    border-radius:1px;
}

p.intro-hint:hover {
    opacity:1;
}

.right .pane {
    position:absolute;
    top:40px;
    bottom:0;
    width:100%;
    overflow:auto;
}

/*
 * .right ---------------------------------------------------------------------
 */

.top {
    background:#f7f7f7;
}

.top .info {
    line-height:40px;
    text-align:center;
    width:40px;
    color:#222;
}

.top .info:hover {
    background:#ccc;
}

.top .buttons {
    margin-left:28px;
    height:40px;
}

/*
 * buttons --------------------------------------------------------------------
 */

button.delete-invert {
    color:#882255;
}

button {
    font: inherit;
    cursor:pointer;
    background:transparent;
    margin:0;
    padding:0;
    border:none;
    box-sizing:border-box;
    transition:all 100ms ease-in-out;
    -webkit-transition:all 100ms ease-in-out;
}

button.major {
    border:1px solid #aaa;
    padding:5px;
}

.top .collapse-button {
    position:absolute;
    background:#f7f7f7;
    top:0;
    left:0;
    width:28px;
    height:40px;
    line-height:30px;
    text-align:center;
    border:none;
}

.top .collapse-button:hover {
    background:#ddd;
}

.top .buttons button {
    background:#f7f7f7;
    color:#222;
    font-size:14px;
    padding:12px 15px;
    font-weight:normal;
    font-size:12px;
    height:40px;
    border:0;
    transition:all 200ms ease-in-out;
    vertical-align:top;
}

.top .buttons button span.icon {
    font-size:16px;
    margin-right:5px;
    vertical-align:middle;
}

.top .buttons button:hover,
.top .buttons button.active {
    background:#f1f1f1;
    color:#000;
    border-bottom:2px solid red;
}

/*
 * CodeMirror & Markers -------------------------------------------------------
 */

.right .CodeMirror {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    top:0;
    height:auto !important;
    background:#f1f1f1;
    font-family: 'm_1regular', monospace;
    line-height:1.5em;
}

.error-marker {
    width:10px;
    height:1.5em;
    background:#EAB;
    transition:all 100ms;
    -webkit-transition:all 100ms;
}

.error-marker:hover {
    background:#D68;
}

.error-marker:before {
    opacity:0;
    pointer-events:none;
    content:attr(message);
    transition:all 100ms;
    -webkit-transition:all 100ms;
    content:attr(message);
    width:300px;
    font-size:10px;
    padding:5px;
    border:1px solid #000;
    position:absolute;
    background:#fff;
    z-index:999;
}

.error-marker:hover:before {
    opacity:1;
    margin-left:35px;
}

.right .edit-pane .CodeMirror-linenumber {
    color:#666;
    font-size:75%;
}

.leaflet-container .leaflet-control-attribution {
    background:none;
    box-shadow:none;
}

.leaflet-popup-content-wrapper table input {
    width:120px;
    background:transparent;
}

.leaflet-control-attribution.leaflet-control a {
    font-size: 12px;
    color: #555;
}

.leaflet-control-attribution.leaflet-control a:hover {
    color:#000;
}

/*
 * table ----------------------------------------------------------------------
 */

.controls {
    padding:10px;
}

body.dragover {
    opacity:0.6;
}

.modal-message {
    display:none;
}

body.dragover .modal-message {
    position:fixed;
    left:50%;
    top:50%;
    text-align:center;
}

.right table {
    margin:10px;
}

th button {
    font-size:12px;
    background:#fff;
    float:right;
    padding:4px;
    color:#999;
}

th button:hover {
    color:#222;
}

/*
 * layer_switch ---------------------------------------------------------------
 */

.layer-switch {
    position:absolute;
    bottom:10px;
    left:10px;
}

.layer-switch button {
    opacity:0.5;
    background:#fff;
}

.layer-switch button.active {
    opacity:1;
    background:#f7f7f7;
}

.blank-banner {
    font-size:20px;
    padding:80px 20px;
    color:#888;
}

textarea.full-width {
    box-sizing:border-box;
    width:100%;
    padding:5px;
    height:60px;
    border:1px solid #ccc;
    border-radius:2px;
    font:inherit;
}

/* ui rework */
.file-bar {
    background:#f7f7f7;
    position:absolute;
    top:0;
    left:0;
    height:40px;
    right:40%;
    border-bottom: 1px solid #d9d9d9;
    border-color: rgba(102,102,102,0.25);
    box-sizing:border-box;
    line-height:40px;
}

.file-bar .name {
    padding:0 10px;
    display:inline-block;
}

.file-bar .name .filename {
    margin-left:10px;
}

.import-sources {
    border-bottom:1px solid #ccc;
}

.clickable:hover,
.clickable.active {
    background:#eee;
}

.icon-spaced {
    margin-right:5px;
}

.subpane {
    position:absolute;
    left:0;
    right:0;
    top:40px;
    bottom:0;
    overflow:auto;
}

/* modal, flash */
.message {
    background:#FFFCE4;
    position:absolute;
    z-index:9999;
    right:40%;
    top:40px;
    left:0;
    border-bottom:1px solid #ccc;
}

.message.error {
    background:#FFE3E3;
}

.message.success {
    background:#E3FFE9;
}

.pre-icon {
    margin-right:5px;
}

.share, .download {
    position:absolute;
    right:40%;
    top:40px;
    background:#fff;
    font-size:12px;
}

.share .network, .download .action {
    margin-right:10px;
    cursor:pointer;
}

.share .icon-remove, .download .icon-remove {
    margin-left:10px;
}

@media screen and (max-width:1100px) {
    .file-bar .button-wrap button span.title {
        display:none;
    }
    .share, .download, .map {
        right:50%;
    }
    .right {
        width:50%;
    }
    .file-bar {
        right:50%;
    }
}

body.dragover:after {
    content: 'drop files to import';
}

.bottom-right {
    position:absolute;
    bottom:0;
    right:0;
    width:20px;
    height:20px;
    display:block;
}

.pad0 {
    padding:5px;
}

.sq40 {
    height:40px;
    width:40px;
    text-align:center;
}

.overlay {
    z-index:999;
}

/*
 * GitHub Browser -------------------------------------------------------------
 */
.repos a {
    color:#222;
}

.repos .item button {
    font-weight: bold;
    margin-left: 10px;
}

/*
 * Help -----------------------------------------------------------------------
 */
.prose h2 {
    font-weight:bold;
    font-size:18px;
}
.prose h3 {
    font-weight:bold;
    margin-top:10px;
}
.prose ul {
    margin:20px 0;
    border:1px solid #ccc;
}
.prose ul li {
    line-height:200%;
    padding:5px 5px;
    border-top:1px solid #ccc;
}
.prose ul li:first-child {
    border-top:none;
}
.prose strong {
    font-weight:bold;
}