html,body,#map_div {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    /*background-color: #f1eee8;*/
    background-color: #000000;
}

body,#map_div,.info,.info td,#info,#info td,#legend,#about,.text_content {
    font-family: Arial, sans-serif;
}

.info,.info td,#info,#info td,#legend,#legend td,#about,.text_content,.control_input {
    font-size: small;
}

#map_div,a {
    color: grey;
}

.pale {
    filter: saturate(30%) brightness(0.3);
}
.gray {
    filter: grayscale(100%) brightness(0.4);
}
.inverted {
    filter: grayscale(100%) invert(80%) brightness(0.5);
}

.hidden {
    display: none;	
}

.minimize {
    /*
position: relative;
    */
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 3px;
    border-radius: 4px;
    cursor: pointer;
}
.minimize_icon {
    width: 10px;
    height: 10px;
    margin: 6px;
    background-image: url(../img/layer-switcher-minimize.png);
}
/*
#bbox_button, #live_button  {
    cursor: pointer;
    float: left;
}
*/

#bottom_buttons {
    left: 0px;
    bottom: 0px;
}
.bottom_buttons_cell {
    vertical-align: bottom;
    display: table-cell;
}
.bottom_buttons_cell > div {
    position: relative;
    vertical-align: bottom;
}
#about_border {
    /*
    left: 217px;
    bottom: 0px;
    */
    max-width: 750px;
}
/* TODO text_content (bottom buttons) scrollable
#help_content {
    overflow:auto;
}
*/
.help_section {
    margin-top: 6px;
    margin-bottom: 3px;
    font-weight: bold;
}
.help_row {
    display: block;
}
.help_row > div {
    display: table-cell;
} 
.label_col {
    padding-left: 5px;
    padding-right: 10px;
    text-align: right;
    width: 3em;
}
#fileinput_border {
    left: 38px;
    top: 0px;
    
    /* TODO file input only for Osmosis edition */  
    display: none;
}

/* #fileinput_border,#top_buttons_border,*/
#bottom_buttons,#top_control_row,.olControlLayerSwitcher {
    position: absolute;
    z-index: 9999;
    margin: 8px;
}
.border,.olControlLayerSwitcher  {
    border-radius: 4px;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.4);
}
.inner_border {
    margin-left: 8px;
}
#top_control_row > .border {
    float: left;
}

.button,.text_content,.info,.button_disabled {
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.7);
}
.button,.info {
    color: white;
}
.button_disabled {
    color: #888;
    cursor: default;
    pointer-events: none;
}
.text_content,.text_content a {
    color: #BBB;
}
#status_bar, #status_bar > span {
    float: left;
}
.status_field {
    padding-left: 4px;
    padding-right: 7px;
}
.status_label {
    color: #888;
    vertical-align:top;
    font-size: 70%;
}
#status_countdown {
    width: 1em;
    text-align: center;
}

#spinner {
    height: 11px;
    width: 16px;
}
.spinner {
    background-image: url(../img/loadinggif-4.gif);
    background-repeat: no-repeat;
    background-position: center center;
}
#legend_content,.info,#info,#about_content,#fileinput_div,.olControlLayerSwitcher .layersDiv,.olControlLayerSwitcher .maximizeDiv,.olControlLayerSwitcher .minimizeDiv,.button,.text_content {
    border-radius: 4px;
}
/* #top_buttons_border */
#top_control_row {
    position: absolute;
    left: 38px;
    top: 0px;
}
.button,#status_bar {
    padding: 3px 10px 3px 10px;
}
.button, .button_disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.left_button {
    float: left;
    border-radius: 4px 0px 0px 4px;
    margin-right: 1px;
} 
.right_button {
    float: left;
    border-radius: 0px 4px 4px 0px;
} 
.inner_button {
    float: left;
    margin-right: 1px;
    border-radius: 0px;
}

.datetime_buttons {
    margin-right: 0px;
}
.datetime_buttons > div {
    padding: 0px 3px 0px 10px;
    border-radius: 0px;
    font-size: 55%;
    line-height: 1;
    text-align: right;
    /*
    color: #888;
    background-color: rgba(0, 0, 0, 0.7);
    */
}
.datetime_buttons > div:first-child {
    padding-top: 2px;
}
.datetime_buttons > div:last-child {
    padding-bottom: 2px;
}
/*
.datetime_buttons > div:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5) !important;
}
*/

.control_input,.control_checkbox {
    height: 21px;
}
.control_input {
    margin-right: 0px;
}
.control_input > input,.control_input > textarea {
    width: 8em;
    height: 15px;
    font-size: 13px;
    margin: 0px;
    border: 3px solid rgba(0, 0, 0, 0.7);
    padding: 0px 5px 0px 5px;
    outline: none;
    color: black;
    background-color: rgba(0, 0, 0, 0);
}
.control_input > textarea {
    width: 24em;
    overflow:hidden;
}
.control_checkbox {
    margin-right: 0px;
    padding: 0px 1px 0px 3px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #888;
    font-size: small;
}
.control_checkbox > input[type=checkbox] {
    /* normalize Firefox (14px) and Chrome (13px) + 1 for alignment */
    height: 15px;
    /* Firefox now 18px, not resizable, so downscale for now */
    -moz-transform: scale(0.8);
}
.inner_label {
    float: left;
    border-radius: 0px;
    margin-left: 0px;
    padding: 3px 5px 3px 0px;
    margin-right: 1px;
}

#load_button {
    padding-left: 7px;
}

.info,#info {
    overflow: auto;
}

.info a,#info a {
    color: white;
}

.info td,#info td {
    padding: 1px 5px 1px 5px;
}

#legend td {
    padding-left: 5px;
    border-radius: 4px;
}
.legend_symbol {
    padding-top: 0px;
    padding-bottom: 0px;
}

.title {
    font-weight: bold;
    margin-bottom: 10px;
}

.button {
    font-weight: normal;
    font-size: small;
    cursor: pointer;
}

.info .title,#info .title {
    margin-top: 5px;
    padding-left: 5px;
}

.info .footer {
    position:relative;
    text-align: center;
    margin-top: 5px;
}

.warning {
    background-color: rgba(255, 215, 0, 0.8);
    padding: 5px;
    font-weight: bold;
}

td.default {
    background-color: #323232;
}

td.keydefault {
}

td.undefined {
    background-color: none;
}

.delete {
    color: rgba(255, 51, 51, 0.8);
}

.create {
    color: rgba(250, 247, 151, 0.6);
}

.modify_geometry {
    color: rgba(144, 238, 144, 0.6);
}

.modify {
    color: rgba(135, 206, 250, 0.6);
}

td.deleted {
    background-color: rgba(255, 51, 51, 0.8); /* #FF3333 */
}

td.created {
    /*background-color: rgba(144, 238, 144, 0.6);  lightgreen; #90EE90 */
    background-color: rgba(250, 247, 151, 0.6); /* yellow #FAF797 */
}

td.modified {
    background-color: rgba(135, 206, 250, 0.6); /*lightskyblue;	#87CEFA */
}

td.legend_created {
    background-color: #FAF797;
}

td.legend_deleted {
    background-color: #FF3333;
}

td.legend_geom_new {
    background-color: lightgreen;
}

td.legend_geom_old {
    background-color: darkred;
}

.tagkey {
    background-color: #323232;
    /* font-weight: bold; */
    text-align: left;
    padding-right: 5px;
}

.tagsep {
    height: 6px;
}

.tagsep hr {
    display: none;
    /*
        height: 1px;
        border-style: none;
        background-color: grey;
        */
}

/* OpenLayers Zoom Control */
div.olControlZoom a,.olControlLayerSwitcher .layersDiv,.olControlLayerSwitcher .maximizeDiv {
    background: #000000 !important;
    /* fallback for IE - IE6 requires background shorthand*/
    background: rgba(0, 0, 0, 0.7) !important;
    filter: alpha(opacity = 70) !important;
}
div.olControlZoom a:hover,.maximizeDiv.olButton:hover,.button:hover,.button_active {
    background: #000000 !important; /* fallback for IE */
    background-color: rgba(0, 0, 0, 0.5) !important;
    filter: alpha(opacity = 50) !important;
}

@media only screen and (max-width: 600px) {
    div.olControlZoom a:hover {
        background: rgba(0, 0, 0, 0.5) !important;
    }
}

/* OpenLayers LayerSwitcher Control */
.minimizeDiv.olButton:hover,.minimize:hover {
    background: #000000 !important; /* fallback for IE */
    background-color: rgba(158, 158, 158, 0.2) !important;
    filter: alpha(opacity =     50) !important;
}

.olControlAttribution,.olControlPermalink {
    font-size: 70% !important;
    text-align: right;
}
.olControlAttribution {
    bottom: 0.5em !important;
}
div.olControlMousePosition {
    font-size: 70% !important;
    bottom: 2em !important;
}
.olControlPermalink {
    bottom: 3.5em !important;
}
.olControlLayerSwitcher {
    top: 0px;
    right: 0px;
    width: auto !important;
}
.layerDiv {
    width: 20em;
}
.olControlLayerSwitcher .maximizeDiv,.olControlLayerSwitcher .minimizeDiv {
    top: 0px !important;
}

.olControlLayerSwitcher .minimizeDiv {
    position: relative;
    top: 0px;
    right: 0px;
    margin: 3px;
}

.maximizeDiv.olButton,.minimizeDiv.olButton {
    width: 23px;
    height: 23px;
}

.maximizeDiv .olAlphaImg {
    margin: 2px;
    width: 19px;
    height: 19px;
}

.minimizeDiv .olAlphaImg {
    /* 10x10 */
    margin: 7px 7px 6px 6px;
}