body {
    font-family:open sans, liberation sans, freesans, verdana, arial, sans-serif;
    font-size:16px;
    background-color:#80B0A0;
    padding:0;
    margin:0;
}

#stage {
    margin:4px auto 4px auto;
    max-width:1024px;
    width:98%;
    box-sizing:border-box;
    border:1px solid black;
    border-radius:4px;
    background-color:white;
    padding:12px;
    overflow:hidden;
}

#toptitle {
    font-size:1.3em;
    font-weight:bold;
    margin:0 0 12px 0;
}

.message {
    padding: 6px;
    margin:3px 0 3px 0;
    color:black;
    font-weight:bold;
    border-radius:5px;
}

.message-info {
    border:1px solid darkblue;
    background-color:#F0F0FF;
}

.message-error {
    border:1px solid darkred;
    background-color:#FFF0E0;
}

.message-success {
    border:1px solid darkgreen;
    background-color:#F0FFF0;
}

.user-toolbar {
    text-align:right;
}

#user-menu-button-complex {
    float:right;
    overflow:hidden;
    user-select:none;
    padding-bottom:3px;
    padding-right:3px;
}

#user-menu-button-complex > * {
    box-shadow:3px 3px 2px 0 rgba(0, 0, 0, 0.2);
}

#user-menu-button {
    float:left;
    height:39px;
    cursor:pointer;
    margin-left:6px;
    background-color:white;
    background-color:rgba(255, 255, 255, 0.75);
    padding:2px 1px 2px 3px;
}

#user-menu-button-indicator {
    float:left;
    padding:3px 6px 3px 6px;
    box-sizing:border-box;
    border-radius:4px;
    border:1px solid #404040;
    font-weight:bold;
    font-size:32px;
    cursor:pointer;
    background-color:white;
    text-align:center;
    min-width:50px;
}

#user-menu-button-indicator.u-offline {
    background-color:#FFF0D0;
}

#user-menu-button-indicator.u-online {
    background-color:#D0FFE0;
}

#user-menu {
    box-sizing:border-box;
    width:100%;
    height:100vh;
    max-width:300px;
    padding:10px;
    position:fixed;
    overflow-x:hidden;
    overflow-y:scroll;
    top:0;
    right:0;
    border-left:1px solid black;
    background-color:#E0F0F0;
    color:black;
    user-select:none;
}

#user-menu.u-invisible {
    display:none;
}

#user-menu-close-x {
    float:right;
    font-weight:bold;
    font-size:24px;
    cursor:pointer;
}

#user-menu-status-title {
    font-size:12px;
    float:left;
}

#user-menu-status {
    font-weight:bold;
    float:left;
    clear:left;
}

#user-menu .user-menu-item {
    font-weight:bold;
    font-size:1.1em;
    border-top:1px solid #C0C0C0;
    border-bottom:1px solid #A0A0A0;
    cursor:pointer;
    margin-top:5px;
    padding:10px 5px 10px 5px;
    float:left;
    width:100%;
    box-sizing:border-box;
    background-color:#F8FFFF;
}

#user-menu .user-menu-item:hover {
    background-color:#D0E8E8;
}

.subtle-button {
    border:1px solid #808080;
    padding:10px;
    border-radius:4px;
    font-weight:bold;
    cursor:pointer;
    float:left;
    background-color:#F0E8C0;
    box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.25);
    margin-right:2em;
    margin-bottom:1em;
    min-width:200px;
    user-select:none;
}

.compact-button-tray .subtle-button {
    min-width:0;
    margin-right:1em;
}

.compact-button-tray .subtle-button:last-child {
    margin-right:0;
}

.subtle-button:hover {
    background-color:#FFF8F0;
}

.button-tray {
    margin:1em 0 1em 0;
    overflow:hidden;
}

.compact-button-tray {
    margin:0.5em 0 0.5em 0;
    overflow:hidden;
}

.sform {
    overflow:hidden;
    padding:0.8em;
    margin:1em 0 1em 0;
    background-color:#F0F0F0;
    border:1px solid #808080;
    border-radius:5px;
}

.sform-field {
    float:left;
    overflow:hidden;
    width:100%;
    margin-bottom:0.5em;
}

.sform-field-label {
    float:left;
    width:100%;
    font-weight:bold;
}

.sform-field-optional .sform-field-label::after {
    content:' (optional)';
    font-size:0.8em;
}

.sform-field-input {
    float:left;
    width:100%;
}

.sform-field-input input, .sform-field-input select, .sform-field-input textarea {
    box-sizing:border-box;
    width:100%;
    max-width:450px;
}

.sform-field-input textarea {
    height:20vh;
    min-height:100px;
    max-height:300px;
    resize:none;
}

.sform-field-help {
    color:darkgreen;
    font-style:italic;
}

.object-box {
    padding:0.4em;
    border: 1px solid #808080;
    border-radius:4px;
    margin-bottom:0.3em;
    overflow:hidden;
    user-select:none;
}

.object-box .object-description {
    color:#303050;
    font-size:12px;
    font-style:italic;
    font-weight:normal;
}

.ribbon {
    padding:1px;
    color:black;
    background-color:white;
    border:1px solid black;
    border-radius:3px;
    font-size:12px;
}

.object-box .ribbon {
    float:right;
}

.ribbon-yellow {
    background-color:#FFFFA0;
    border-color:#A0A060;
}