/* Stylesheet für Selfhtml Design 01
  responsives Layout mit Flexbox ab Z. 247 */

/* ====================================================  GLOBAL DEFINITION  ==================================================== */

body { font-family : sans-serif; font-size: 11pt; color: #333333; }

#screen {  border: 1px solid darkblue;  color: red;  }
.screen { width: 1400px; height: 900px;  z-index: 1; position: absolute; top: 0px; left: 0px; margin: 0;}

#kopf-nav {background-color:gray; border: 3px solid silver; color: white; }
.kopf-nav { width: 1394px; height: 44px; z-index: 2; position: absolute; top: 0px; left: 0px; margin:  0px;}

#koerper { background-color:yellow; border: 0px solid green; margin: 0px auto;  }
.koerper { width: 1400px; height: 850px; z-index: 4; position: absolute; top: 50px; left: 0px; }

#hand-li { background-color:#93ADC8; border: 0px solid red; font-size: 16px; color: white; }
.hand-li { width: 210px; height: 850px; z-index: 5; position: absolute; top: 0px; left: 0px; margin: 0; padding: 0px; }

#hand-re { background-image:url(./img/mauer.jpg); background-repeat:repeat; border:0px solid gray; color: blue;}
.hand-re { width: 1190px; height: 850px; z-index: 5; position: absolute; top: 0px; left: 15%; margin: 0; padding: 0px; vertical-align:middle; }

#fuss { background-color:#93ADC8; border: 1px solid silver; color: white; }
.fuss { width: 1398px; height: 22px; z-index: 6; position: absolute; bottom: 0px; left: 0px; margin: 0; padding: 0px;}

.mittig { text-align: center;  border: 0px solid green; padding: 5px;}
.centered { background-image:url(./img/mauer.jpg); background-repeat:repeat;  width: 99%;  padding: 0;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); }


nav { position:relative; float:left; width: 100%; height: 2em; margin: 0; background-color: #93ADC8; border:0px solid blue;  font-size: 1.5em; line-height: 0.1em; }
nav ul { flex-direction: row;  }
nav li { display: inline-block; float:left; list-style: none; margin-right: 2em; padding: 0;}
nav a { text-decoration: none;  font-weight: bold;  color: white;   background-color: #93ADC8; } 
nav a:focus,  nav a:hover,  nav a:active {  text-decoration:underline; color: green; }


td        { width:500px; }
td a { text-decoration: none;  font-weight: bold;  color: white;   background-color: #93ADC8; } 
td a:focus,  td a:hover,  td a:active {  text-decoration:underline; color: green; }
.oben     { vertical-align:top; }
.mittig   { vertical-align:middle; }
.unten    { vertical-align:bottom; }

/* ====================================================  HEADER  ==================================================== */
/* ====================================================  CONTENT  ==================================================== */
/* ====================================================  NAV  ==================================================== */
/* ====================================================  FOOTER  ==================================================== */
/* ====================================================  LAYOUT  ==================================================== */