html {font-size: 16px; line-height: 1.5;}
body {position: relative; max-width:1200px; width: 100%; margin: 0 auto; font-family: sans-serif; background-color: white;}

a {text-decoration: inherit; color: inherit; }

body>header {display: block; text-align:center; transition-duration: .5s; overflow: hidden; position: relative; width: 100%; height: 200px; overflow:hidden; background-color: darkblue; margin-top: 10px; margin-bottom: 10px; }
@-webkit-keyframes header_anim {
     0% { transform: scale(2,2); }
   100% { transform: scale(1,1); }
}
body>header:hover {height:400px; transition-delay: 5s;}
#header_img { object-fit: cover; 
  -webkit-animation-name: header_anim;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
}
#logo {position: absolute; width: 300px; height: 40px; bottom: .5cm; right: .5cm;}

input { font-size: .5cm;}
input[type="text"] {width: 80%; font-size: .5cm;}

.icon {display: inline-block; width: 1cm; height: 1cm; transition-duration: .5s; padding-right: .2cm; background-size: contain; background-repeat: no-repeat; background-position: center;}
.icon:hover, .iconsmall:hover {transform: scale(1.2,1.2); cursor: pointer;}
.grid {display: inline-block; width: 1em; height: 1em;}
h2 .grid {padding-right: .2cm;}
.icon.closed {filter: invert(100%);}
.icon.left {position: absolute; left: 0;}
.icon.right {position: absolute; right: 0;}
.ok {width: 1.5cm; height:1cm; margin: .5cm; border: 1px solid black; box-shadow: 5px 5px 5px lightgray;}


form label {display:block;}

#menu {position: absolute; top:.2cm; left: .2cm; width: 4cm; height: 1cm; text-align: left;}
#menu_window {position: absolute; width: 310px; z-index:1; font-size: 1rem; padding: 10px; box-shadow: 5px 5px 5px lightgray; top: 10px; left: 10px; border: 1px solid black; background-color: white;}
#menu_window .ok {position: absolute; bottom: 0; right: 0;}
#menu_window label {display: block; font-size: .8cm; cursor: pointer;}
#menu_window select {font-size: .8cm; margin-left: 4px;}
#menu_window input[type="checkbox"] {width: 1cm; height: 1cm; border: 1px solid black;}
#menu_window #logout {position: absolute; right: 10px;}

.menu_open {display: block; }
.menu_closed {display: none;}


nav {position: relative; display: block; clear: both; height: 1.1cm; margin-right: 5px;}
nav span {position: absolute; bottom: 0; left: 1cm; right: 1cm; text-align: center;}

body>footer {position: relative; display: block; font-size: .5rem; height: 1cm; text-align: right; margin-top: 10px; margin-bottom: 10px; padding: 5px; color: gray; background-color: #f0f0f0; }
body>footer>div {display: block; float: left;}

/*
body>div {display: table; width: 100%; }
body>div>div {display: table-row;} 
main {display:table-cell; position: relative;}
aside {display: table-cell; background-color: #f0f0f0; vertical-align: top; width:400px; }
*/
body>div {display: block; width: 100%; }
body>div>div {display: flex; overflow-x: hidden;  -webkit-overflow-scrolling: touch;}
main {position: relative; width: 100%;}
main h1 {display: block; font-size: 1.5rem; margin: 0 0 5px 0; padding-left: 5px; background-color: #f0f0f0;}
aside {flex-shrink: 0; background-color: #f0f0f0; vertical-align: top; width: 400px; }
aside h1 { display: flex; flex-wrap: balance; flex-direction: row; justify-content: space-between; font-size: 1rem; padding: 5px; margin: 2px 0 0 0; border:0; background-color: #e0e0e0;}
aside:first-child h1 {margin: 0;}

aside h1 img {height: 50px; vertical-align: middle; transition-duration: .5s;}
aside h1:hover img { transform: scale(1.2,1.2); transition-duration: .5s; }
aside h2 {display: block; font-size: 1rem; padding: 5px; margin: 0; background-color: #e8e8e8;}
aside div {display: block; font-size: .8rem; padding: 5px; margin: 0; }

cite {display: block; text-align: right;}

.avatar {background-image: url('/design/person.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;}
.avatar img {width: 100%; height: 100%; object-fit:cover;}

.image {overflow: hidden;}
.image img {width:100%; height:100%; object-fit: cover; transition-duration: .5s;}

.image_only {display: table; float: left; width:190px; height:190px; overflow: hidden; margin-bottom: 1px; margin-left: 1px; }
.image_only:hover img { transform: scale(1.2,1.2); transition-duration: .5s; }

.content {}
.content h2 {font-weight: bold; font-size: 1rem; color: dimgray; }
.text {font-size: 1rem; }
.attr {text-decoration:none; color: gray; text-align: right;}
.comments {width: 100%; border: 0; border-top: 1px solid black;}

section {display: block; position: relative; overflow: hidden; height: 200px; color: black; background-color: #F8F8F8; margin-right: 5px; margin-bottom: 10px; }
section:hover {cursor: pointer; background-color: #f0f0f0;}
section .avatar {float: right; width:50px; height:50px;}
section .image {position: absolute; top: 0; left: 0; bottom: 0; width:30%; max-width:200px; background-image: url('/favicon.svg'); background-size: contain; background-repeat: no-repeat; background-position: center;}
section:hover .image img {transform: scale(1.2,1.2); }
section .panorama {width:100%; overflow: hidden; max-width: none;}
section .attr {position: absolute; bottom:0; left:0;  font-size: .6rem; }
section .comments {padding-left: 10px;}
section .content {position:absolute; top:0; bottom:0; left:0; right:0;}
section .content h2 {position: absolute; top:0; left:0; right:0; height: 50px; overflow:hidden;  margin: 0; padding: 5px; }
section .image + .content {left:200px;}
section .panorama + .content {left: 0; vertical-align: bottom;}
section .panorama + .content .text { top: initial; bottom: 0; }
section .attr {right:0; height: 16px;}
section .text {position: absolute; top: 55px; left:0; right: 0; bottom:15px; overflow: hidden; padding:5px; }
se-ction .text:hover {transition-delay: .5s;}

article {position:relative; -min-height: 600px; margin: 0; margin-right: 5px; margin-bottom: 10px; }
article h2 {margin: 0; }
article img {width:100%; height:100%; object-fit: cover;}
article video {width:100%; height:auto; object-fit: cover;}
article audio {width:100%; }
article .avatar {float:right; width: 50px; height: 50px; object-fit:cover;}
article .attr {position: relative; clear:both; font-size: .8rem; }

.stereoToMono {transform: scaleX(2); transform-origin: left; overflow: hidden; width:50%;}
.stereoToMono img {width: 200%;}
.stereoToMono video {width: 200%;}

.oldPanorama {width: 100%; height: 400px; overflow-x: auto; overflow-y: hidden; position: relative; }
.oldPanorama div {display: inline-block; position: absolute;}
.oldPanorama div img {display: block; height: 400px; width: auto; }

.yearsCalendar {width: 100%; }
.yearsCalendar td {width: 10%; background-color: lightgray; }
.iconsmall {width: .4cm; height: .4cm; transition-duration: .5s; padding-right: .2cm; object-fit: cover; vertical-align: middle;}

#panorama {width: 100%; height: 400px;}
#swf {width: 100%; height: auto; text-align: center;}

.entity {position: relative; margin:5px; }
.entity .image {width:200px; height: 200px; margin: 0 auto;}
.entity h2 {text-align: center; padding: 0; border-bottom: 1px solid dimgray; background-color: initial;}

input[name="header"] {width: calc(100% - 20px);}
.tinyeditor {width: 100%; }
.tinyeditor {border:1px solid #bbb; padding:0 1px 1px; width: auto; margin-right:10px;}
.tinyeditor select {font-size: initial; margin-left:0;}
.tinyeditor iframe {border:none; width: 100%; overflow-x:hidden}
.tinyeditor-header {height:31px; border-bottom:1px solid #bbb; background-color: lightgray; padding-top:1px}
.tinyeditor-header select {float:left; margin-top:5px}
.tinyeditor-font {margin-left:12px}
.tinyeditor-size {margin:0 3px}
.tinyeditor-style {margin-right:12px}
.tinyeditor-divider {float:left; width:1px; height:30px; background:#ccc}
.tinyeditor-control {float:left; width:34px; height:30px; cursor:pointer; background-image:url(/design/tinyeditor-icons.png)}
.tinyeditor-control:hover {background-color:#fff; background-position:30px 0}
.tinyeditor-footer {height:32px; border-top:1px solid #bbb; background:#f5f5f5}
.toggle 
{ float:left; 
  background:url(/design/tinyeditor-icons.png) -34px 2px no-repeat; 
  padding: 9px 13px 0 31px; 
  height: 23px; 
  border-right:1px solid #ccc; 
  cursor:pointer; 
  color:#666;
}
.toggle:hover {background-color:#fff}
#editor {cursor:text; margin:10px}

.weather {position: relative; width: 100%; border-spacing: 2px; margin-right: 10px; transition-duration: .5s}
.weather th {font-size: 1rem; background-color: #b0b0ff; }
.weather th:first-child {text-align: left; }
.weather td {background-color: #d0d0ff; font-size: 1rem;  text-align: right;  padding: 2px}
.weather img {width: 1.5rem; height: 1.5rem;}
#weatherHourly th {text-align: center;}
#weatherHourly tr:first-child th {font-size: .8rem;  hyphens: auto;}
#weatherHourly tr[day] td {background-color: #d0d0ff;}
#weatherHourly tr[night] td {background-color: #d0d0d0;}
.weatherTable {width: 100%; font-size: 1rem; border:0; border-collapse: collapse;}
.weatherTable th {text-align: center;}
.weatherTable tr {height: 30px;}
.weatherTable td {text-align: center;}
.weatherTable .date {width: 12%; text-align: left; color: black;}
.weatherTable .temperature {width: 12%; color: red;}
.weatherTable .dewpoint {width: 12%; color: purple;}
.weatherTable .pressure {width: 20%; color: green;}
.weatherTable .humidity {width: 10%; color: blue;}
.weatherTable .light {width: 10%; color: gray;}
.weatherTable .ir {width: 10%; color: darkred;}
.weatherGraf {position: relative; height: 200px; overflow-x: auto; overflow-y: hidden; margin-right: 5px; margin-bottom: 10px;}
.weatherGraf canvas {position: absolute; top:0;}
.weatherInfo {position: relative; height: 500px; overflow-y: auto; overflow-x: hidden; margin-right: 5px; margin-bottom: 10px;}
.selected {background-color: lightgray;}

#position {width: 100%; height: auto; aspect-ratio: 1/1;}
.map {width: 100%; height: auto; transition-duration: .5s;}
.map:hover {transform: scale(1.02,1.02);  cursor: pointer; }

@media (max-width:1080px){ 
  html {font-size: 24px;}
  body {margin: 0 2px;}
  main {min-width:100vw; max-width:100vw;}
  aside {min-width:100vw; max-width:100vw;}
  body>div>div {overflow-x: auto;}
}

@media handheld{ 
  html {font-size: 50px;}
  body {margin: 0;}
  body>div>div {overflow-x: auto;}
}