html, body { height:100%; margin:0; padding:0; background:#fff; }
* { font-family:Arial,sans-serif; font-style:normal; font-weight:normal; font-size:3vmin; }
b, b * { font-weight:bold; }
p { margin:0 0 .5em; }
sup { font-size:.5em; }
h1 { margin:0 0 1em; padding:.5em; background:#e8e8ee; }
h2 { text-align:left; font-weight:bold; color:#900; }
input[type="text"], input[type="password"], textarea, select { width:16em; padding:2px; border-width:1px; box-sizing:border-box; }
textarea { height:6em; }
input[type="submit"] { width:8em; }
#dialog .sso { padding:0 0 1em; }
#dialog a.ssobutton { display:block; width:auto; padding:0; border:none; }
#dialog a.ssobutton img { height:3em; }
.base3button { display:block; width:auto; padding:.6em .5em; border:1px solid #6b6; border-radius:.5em; background:#8d8; text-decoration:none; color:#000; }
.base3button img { vertical-align:center; }
#navi { position:fixed; z-index:5; background:#f1f1f1; }
#content { position:relative; width:100%; height:100%; box-sizing:border-box; overflow:hidden; }
#floor { position:relative; margin:2em auto; box-shadow:.3em .3em .3em #999; background:#fffff7; }
.tile { position:absolute; border:1pt solid #ccc; box-sizing:border-box; }
.tile.line-top { border-top:1pt solid #666; }
.tile.line-bottom { border-bottom:1pt solid #666; }
.tile.line-left { border-left:1pt solid #666; }
.tile.line-right { border-right:1pt solid #666; }
.dancer { position:absolute; z-index:2; width:0; height:0; }
.dancer div { position:absolute; width:5vmin; height:5vmin; left:-2.5vmin; top:-2.5vmin; padding:1vmin 0; border:1pt solid #000; border-radius:2.5vmin; background:#ff6; text-align:center; box-sizing:border-box; }
.dancer.dancer-f div { background:#f99; }
.dancer.dancer-m div { background:#99f; }
.floorcenter { position:absolute; z-index:1; left:50%; top:50%; width:0; height:0; margin-left:-.4em; margin-top:-.4em; border-radius:.4em; border:.4em solid #000; }
.scale { position:absolute; width:1em; height:1em; margin:-.5em; text-align:center; }
.scale-top { top:-1em; }
.scale-bottom { bottom:-1em; }
.scale-left { left:-1em; }
.scale-right { right:-1em; }
.front { text-align:center; }
.chair { display:inline-block; width:3vh; height:3vh; border-bottom:3pt double #000; border-left:3pt double #000; border-right:3pt double #000; border-top:.3pt solid #000; box-shadow:.3em .3em .3em #999; }
#info { position:absolute; }
#control { position:absolute; }
#control p { text-align:center; }
#control button { width:3em; height:3em; font-weight:bold; white-space:nowrap; overflow:hidden; }
#currimage { display:inline-block; width:2em; border:1px inset #ccc; border-radius:.125em; background:#ddd; text-align:center; }
/* neues Design */
#navi { background:linear-gradient(to bottom, #f9f9ff, #e5e5eb); }
#control button { color:#fff; border:0; border-radius:3px; background:linear-gradient(to bottom, #88888e, #44444a); }
#currimage { padding:.3em 0; border:0; border-radius:3px; background:linear-gradient(to bottom, #ccccd2, #aaaab0); }
.dancer div { border:0 !important; background:linear-gradient(to bottom, #ff6, #cc3); box-shadow:.1em .1em .1em #999; }
.dancer.dancer-f div { background:linear-gradient(to bottom, #f99, #c66); }
.dancer.dancer-m div { background:linear-gradient(to bottom, #99f, #66c); }
.chair { border-radius:4pt; border-bottom:4pt solid #960; border-left:4pt solid #960; border-right:4pt solid #960; border-top:.4pt solid #960; background:linear-gradient(to bottom, #fda, #ca8); box-shadow:.3em .3em .3em #ccc; }
#floor { border:1px solid #888887; box-sizing:border-box; box-shadow:.3em .3em .3em #ccc; }
.tile { border:1pt solid #ddddd7; }
.tile.line-top { border-top:1pt solid #888887; }
.tile.line-bottom { border-bottom:1pt solid #888887; }
.tile.line-left { border-left:1pt solid #888887; }
.tile.line-right { border-right:1pt solid #888887; }
#overlay { display:none; position:fixed; z-index:1000; left:0; right:0; top:0; bottom:0; padding:1em; /* background:#606066; */ background:rgba(60,60,64,.8); text-align:center; }
#dialog { display:inline-block; width:auto; margin:0 auto; padding:.6em; overflow-x:auto; background:#fff; max-height:95vh; overflow-x:hidden; }
#dialogclose { display:block; position:absolute; right:1em; top:1em; width:1.6em; height:0; padding:.8em 0; border-radius:.8em; background:#fff; box-sizing:border-box; line-height:0; font-weight:bold; color:#000; text-decoration:none; text-align:center; }
.coords table { margin:0 0 1em 0; border-spacing:0; border-collapse:collapse; }
.coords th { border-bottom:.3pt solid #999; padding:0 .5em .5em; margin-bottom:.25em; font-weight:bold; text-align:center; }
.coords td { padding:.25em .5em; text-align:left; }
.coords .line { border-left:.3pt solid #999; }
#dialog p, #dialog li { text-align:left; }
#dialog label { display:inline-block; min-width:6em; margin-right:.5em; padding:4px 0; vertical-align:top; }
#dialog .options { width:70vw; max-width:30em; margin:0 0 1em; border-top:1px solid #e8e8ee; }
#dialog .options a { display:block; padding:.6em .5em; border-bottom:1px solid #e8e8ee; color:#000; text-decoration:none; }
#dialog hr { height:1px; border:0; background:#e8e8ee; }
@media all and (orientation: landscape) {
#navi { right:0; top:0; width:30vw; height:100%; border-left:1px solid #dfdfe5; }
#content { padding-right:30vw; }
#floor { width:82vh; height:82vh; }
#info { left:1em; right:1em; top:.5em; }
#control { left:1em; right:1em; bottom:.5em; }
}
@media all and (orientation: portrait) {
#navi { left:0; bottom:0; width:100%; height:12em; border-top:1px solid #dfdfe5; }
#content { padding-bottom:12em; }
#floor { width:80%; height:0; padding-bottom:80%; }
#info { left:2vw; top:.5em; width:40vw; }
#control { right:2vw; bottom:.5em; width:50vw; }
}
@media only screen and (max-width: 46.870em) {
}
@media only screen and (min-width: 46.875em) {
}
@media only screen and (min-width: 64em) {
* { font-size:1em; }
sup { font-size:.5em; }
.dancer div { position:absolute; width:2em; height:2em; left:-1em; top:-1em; padding:.5em 0; border:.6pt solid #000; border-radius:1em; }
}
@media only screen and (min-width: 78em) {
}