$hover-darken: 10%;

.floating-bottom-left {
    position: absolute;
    left: 10px;
    bottom: 0;
    background-color: transparent;
    z-index: 1;
    cursor: default;
}

.floating-button {
    background-color: $grey-color-dark;
    opacity: 0.5;
    min-width: 25px;
    display: block;
    cursor: pointer;
    padding: 5px;
    margin: 2px;
    margin-bottom: 5px;
    border-radius: 3px;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 10px;    
    color: white;
    text-align: center;
}

.floating-button.enabled {
    background-color: #006600;
}

.panel {
    position: absolute;
    background-color: transparent; 
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    z-index: 1;
    cursor: default;
}
.panel.hidden {
    display: none;
}

.panel-content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    overflow-y: auto;
}

.panel-text-area {
    background-color: $ui-background-color;
    display: block;
    cursor: default;    
    padding: 5px;
    border-radius: 5px;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 12px;
    color: $ui-text-color;
    text-align: center;
}

.panel-text-area.highlight {
    background-color: lighten($ui-background-color, 20%);
}

.panel-list {
    margin: 5px;
}

.panel-list.hidden {
    display: none;
}

.panel-button-row {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: default;
}

.panel-button {
    background-color: $ui-button-color;
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    margin: 2px;
    border-radius: 3px;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 12px;    
    color: $ui-text-color;
    text-align: center;
}

.panel-button:hover {
    background-color: darken($ui-button-color, $hover-darken);
}

.panel-list-item {
    background-color: $ui-background-color;
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    margin: 2px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-family: "Arial", Gadget, sans-serif;
    font-size: 12px;    
    color: $ui-text-color;
    text-align: center;
}
.panel-list-item:hover {
    background-color: $ui-hover-color;
}

.panel-list-item.mpm {
    background-color: $mpm-color;
}
.panel-list-item.mpm:hover {
    background-color: darken($mpm-color,$hover-darken);
}
.panel-list-item.robotron-dresden {
    background-color: $robotron-dresden-color;
}
.panel-list-item.robotron-dresden:hover {
    background-color: darken($robotron-dresden-color,$hover-darken);
}
.panel-list-item.robotron-riesa {
    background-color: $robotron-riesa-color;
}
.panel-list-item.robotron-riesa:hover {
    background-color: darken($robotron-riesa-color,$hover-darken);
}
.panel-list-item.sinclair {
    background-color: $sinclair-color;
}
.panel-list-item.sinclair:hover {
    background-color: darken($sinclair-color,$hover-darken);
}
.panel-list-item.amstrad {
    background-color: $amstrad-color; 
}
.panel-list-item.amstrad:hover {
    background-color: darken($amstrad-color,$hover-darken); 
}
.panel-list-item.acorn {
    background-color: $acorn-color;
}
.panel-list-item.acorn:hover {
    background-color: darken($acorn-color,$hover-darken);
}
.panel-list-item.cbm {
    background-color: $cbm-color;
}
.panel-list-item.cbm:hover {
    background-color: darken($cbm-color,$hover-darken);
}
