/* reset all default margins and paddings */
* { margin: 0; padding: 0; }


/* apply a natural box layout model to all elements, but allowing components to change */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
  
/* remove the dotted outline from all elements */
* { outline: 0; }
a { outline: 0; }
:focus { outline:none; }


/* #eed950;  Mandelsloher gelb */   

html { height:100%; } 
body { height:100%; min-height:100%; background-color:#555; color:#FFF; font-size: 1.0em; font-weight:normal; font-family: Verdana, Helvetica, sans-serif; }

h1,h2,h3,h4,h5 { margin-top: 2px; margin-bottom: 2px; }
h1 { font-size:1.4em; }
h2 { font-size:1.3em; }
h3 { font-size:1.2em; }
h4 { font-size:1.1em; margin-top: 8px; margin-bottom: 2px; }
h5 { font-size:1em; }

ul { margin: 2px 2px 0px 24px; padding: 0px 0px 0px 0px; list-style-type: square; list-style-position: outside; }
ol { padding: 0px 0px 0px 0px; }
li { padding: 1px 1px 1px 1px; }

img { border:1px; border-style:solid; border-color:#a0a0a0; }

.num { text-align: right; }
a { margin:1px; padding:1px; border:0; text-decoration: none; }
a:link    { color: gold; }      /* noch nicht besuchte Ziele */
a:visited { color: gold; }      /* besuchte Ziele            */
a:hover   { color: gold; text-decoration: underline; }      /* Verweise bei "MouseOver"  */
a:active  { color: gold; }
a:focus   { color: gold; }

p { margin: 0px 2px; padding: 0px 3px 1px 3px;}
p.List { border-collapse: collapse; width:99%; margin:2px; padding:2px; padding-left:6px; background-color:#f0f0f0; border-top: 1px solid #a0a0a0; }

ul.List { list-style-type: none; margin: 2px 2px 1px 1px; padding: 0px 0px 0px 0px; list-style-position: inside; }
li.List { width:99%; margin:2px; padding:2px; padding-left:6px; border-top: 1px solid gray; }
li.List:last-child { border-bottom: 1px solid gray; }

body { overflow:hidden; } 

#container {
  position:relative;
  top:0;
  margin: 0 auto;
  height:100%;
  min-height:100%;  
  width:calc(100vw - 20%);
  overflow:hidden;
  border: 0px solid red;
}

header {
  position:relative;
  top:0px;  
  height:34px;
  padding-top:4px;
  border:0px solid white;
}

nav {
  position:fixed;
  top:34px;
  bottom:20px;
  width:170px;
  min-height:calc(100% - 54px);
  color: #f0f0f0;
  background-color: gray;
  padding: 6px;
  border:1px solid silver; 
}

article {
  position:relative;
  margin-top:0px;
  margin-left:170px;
  height: calc(100% - 54px);  /* 100% minus header minus footer */
  overflow-x:auto;
  overflow-y:scroll;
  padding: 12px 6px 12px 12px; 
  border: 1px solid silver;
}

footer {
  position:fixed;
  bottom:0;
  width:calc(100vw - 20% - 2px);
  height: 20px;
  text-align:center;
  color: #000060;
  border: 0px solid white; 
}

@media screen and (max-width:800px) {
  #container { margin:0; width:100%; }
  navigation { width:120px; padding:0px; }
  article { margin-left:120px; }
}  


ul.navigation { list-style-type: none; margin: 0px; padding: 0px; }
li.navigation { margin: 3px; padding: 0px 0px 0px 6px; }

a.navigation { text-decoration:none; }
a.navigation:link    { color: #f0f0f0; }      /* noch nicht besuchte Ziele */
a.navigation:visited { color: #f0f0f0; }      /* besuchte Ziele            */
a.navigation:hover   { color: #ffffff; font-weight: bold; text-decoration: underline; }      /* Verweise bei "MouseOver"  */
a.navigation:active  { color: #ffffff; }
a.navigation:focus   { color: #ffffff; }

img.pic{ border:2px solid gray; }
img.thumb{ margin: 1px; padding: 1px; border: 1px solid gray; }
/* zum testen wo was ist */

div.Klassentreffen { position: relative; float:left; overflow:hidden; width:100%; min-width:100%;}
div.TAP { margin:6px; padding:6px; float:left; width:170px; min-height:220px; border: 1px solid gray; text-align: center; }
img.TAP { border: 1px solid gray; }

/*
.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  opacity: 0.8;
  opacity:.50;
  filter: alpha(opacity=50);
}
 
.white_content {
  display: none;
  position: fixed;
  top:0%;
  left: 5%;
  width: 90%;
  height: 100%;
  padding: 0px;
  border: 1px solid white;
  z-index:1002;
  overflow: auto;
}
*/
p, ul { margin: 2px 4px 4px 4px; }
ol, li { margin: 2px 4px 2px 4px; }
ul { border: 4px; list-style-type: square; margin-left: 15px; }
ol { border: 4px; margin-left: 15px; }