/* Allgemeine Formate zur Normalisierung: */
  /* Achtung: Viewport-Weiche unten begrenzt body auf 60em! */
    .no-wrap { 
      white-space: nowrap;  /* verhindert Umbruch an Leerzeichen */ 
    }
    .fc > legend, .fc > li > label { font-size: 0.8em; }

  /* Spezielle Flexbox-Formate: */
    .fc, .fc > li, .fc > li > label { 
      margin: 0em; padding: 0.1em; 
    }

    .fc {
      /* Formate des Flex-Containers der Klasse fc (hier des ul-Tags), 
         direkte Kind-Elemente (li-Tags) werden Flex-Items
         und (mobile first) vertikal angeordnet
      */
      font-size: 16px; /* Normalisierung für em-Nutzung; Standard: normal 16px Times New Roman */
      box-sizing: border-box; 
      display: flex;  /* ist ein Flex-Container */
      flex-direction: column;  /* vertikale Anordnung der Flex-Items */
    }

    .fc > li { 
      /* Formate der Flex-Items (li-Tags) des Flex-Containers der Klasse fc, 
         zusätzlich sind li-Tags auch selbst Flex-Container 
      */
      display: flex; /* li-Tags sind nun selbst Flex-Container (für label/input) */
      flex-wrap: wrap; /* Flex-Item Label bei wenig Platz oberhalb der Eingabe */
      justify-content: flex-start; /* linksbündige Darstellung der Items im FlexContainer li */
      /* margin: 0.1em 0.2em; 0.1em oben/unten 0.2em links/rechts */
      /* align-items: baseline;  nötig wegen .flexShort */
    }
    
    .fc > li.flexShort {
    }  
    .fc > li.flexLong {
      width: 100%;  /* maximal breiter Flex-Container; immer einspaltig */
    }  
    
    .fc > li > label { 
      flex: 1 0 6em;  /* Mindestbreite nur des label-Tags */
      max-width: 8em;  /* Höchstbreite nur des label-Tags; ggf. nur input-tag breiter */
      margin-right: 0.2em;  /* Abstand, falls rechtsbündig am Item dargestellt */
      text-align: left;
      /* text-align: right; rechtsbündige Darstellung der Label nahe der Items; problematisch, falls Labelüber Items angezeigt! */
    }
    
    .fc > li > label + * {
      /* input with max length, label pos is above input */
      flex: 1 0 100%;  /* Mindestbreite nur des input-Tags */
      /* height: 3em; */
    }
    
    .fc > li.flexShort > label + * {
      flex: 1 0 6em;  /* Mindestbreite nur des kurzen input-Tags */
      max-width: max-content;  /* Höchstbreite nur des kurzen input-Tags */
    }
    
    .fc > li.flexLong > label + * {
      width: 90%;  /* Eingabe eines maximal breiten Flex-Items */
    }
    

    @media all and (min-width: 30em) {
      /* label and input in one line, not label above input */
      .fc > li > label + * {
        flex: 1 0 12em;  /* Mindestbreite nur des input-Tags */
      }
    }  

    @media all and (min-width: 40em) {
      .fc {
        flex-direction: row; /* li-Tags nun auch nebeneinander */
        flex-wrap: wrap; /* 2 oder 3 li-Tags nebeneinander */
      }  
      .fc > li { 
        justify-content: flex-start; /* Item linksbündig neben Label platzieren, z.B. kurzes Select in li.flexLong */
        width: 49%; /* ermöglicht maximal zwei li-Tags nebeneinander */
      }
      .fc > li > label { 
        text-align: right;
      }
      .fc > li > label + * {
        /* height: 1.5em; */
      }  
    }

    @media all and (min-width: 60em) {
      .fc > li { 
        width: 32%; /* ermöglicht drei Flex-Items (li-Tags) nebeneinander */
      }
      .fc > li.flexMaxTwoCols {
        width: 49%; /* weiterhin maximal zwei li-Tags nebeneinander */
      }  
    }

    @media all and (min-width: 62em) {
     /* feste Breite 60em = 720px*/
     /* variabler Rand links/rechts */
     /* AUSKOMMENTIERT!
      body { 
        width: 60em; 
        margin: 1em auto;  
      }
      */
    }

    @media print {
      body { width: 100%; margin: 0em; }
     .noprint { display: none; }
    }  


/*
** Pseudoformate für Verweise:
** ----------------------------------
*/

/*
a:link { font-weight:bold; color:#737300; text-decoration:none }
a:visited { font-weight:bold; color:#9D8A7B; text-decoration:none }
a:hover { font-weight:bold; color:#E00000; text-decoration:none }
a:active { font-weight:bold; color:#804040; text-decoration:underline }
a:focus { font-weight:bold; color:#00E000; text-decoration:underline }
*/

/*
div darf nicht enthalten sein, sonst entsteht ein Konflikt in Intern bei Layersmenue:
die Submenues sind dann nicht mehr relativ, sondern absolut links positioniert;
daher temporär entnommen bis zur Substitution des LayersMenues 
html, body, h1, h2, h3, div, p, a, textarea { 
*/
html, body, h1, h2, h3, h4, p, a, li, textarea, select, fieldset {
  /* width: 100%; */  
  margin: 0.1em 0em;
}

html {
  font-family: Arial,sans-serif;
  font-size: 16px; /* 1.0em; */
  color:black;
}
  
body.slp {
  background-color: palegoldenrod; color: sienna; background-size: cover;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin: 1em;  /* 0em 1em */
}  

body.portal {
  background-color:#FFFF99; background-size: cover;
  }

body.alumni {
  background-color:LightYellow; background-size: cover;
  max-width: 24em;
  margin: 0.5em;
  /* width: 90%; */
  }
  
body.intern, form.intern {
  /* background-color:LightYellow; background-size: cover; */
  max-width: 24em;
  margin: 0.5em;
  /* width: 90%; */
  }
  
body.lernportal {
  background-color:#FFD240;  /* #DAFF76   */
  }

body.updown {
  font-family:verdana,arial,helvetica,sans-serif;
  background-color: #FFFF99; background-size: cover;
  margin: 0.2em 2em;
  }

body.updown-login {
  background: url("../updown/image/background-login.gif") repeat fixed;
  }

body.updown-download {
  background-color: #FFFF99; background-size: cover;
  background: url("../updown/image/background-download.gif") repeat fixed;
  }

body.updown-upload {
  background-color: LightBlue; background-size: cover;  /* #FFD240; */
  /* background: url("../images/fabric.jpg") no-repeat fixed; */
  background: url("../updown/image/background-upload.gif") repeat fixed;
  }

body.updown-admin {
  background-color:#FFCC66; background-size: cover;
  background: url("../updown/image/background-admin.gif") repeat fixed;
  }

h1 {
  text-align: center;
  font-size: 1.6em;
  margin: 0em 0em 0.5em 0em; /* top,right,bottom,left */
  }

h2 {
  text-align: center;
  font-size: 1.4em;
  margin: 0em 0em 0.3em 0em; /* top,right,bottom,left */
  }

/* siehe auch unten Weiche mobil / nicht mobil! */  
h3 {
  text-align: center;
  font-size: 1.2em;
  margin: 0em 0em 0.2em 0em; /* top,right,bottom,left */
  }
  
h3.javaDisabled { background-color:red; text-align:center; }

h4 {
  text-align: center;
  font-size: 1.1em;
  margin: 0em 0em 0.1em 0em; /* top,right,bottom,left */
  }
 
a.slp {
  font-size: 2em;
  text-decoration: none;
  display: block;
}  
div.slp {
  display: block;
  margin: 0.2em 1em 0.3em 1em;
  text-align: center; 
  /* 
  width: 6em; height: 5em;
  */
}
img.ico {
  width: 1.8em; height: auto; vertical-align: middle;
}  
img.slp {
  border-style: none; 
  width:auto;
  height:auto;
  max-width:70%;
}
img.xmas-cap {
  width: 2em; height: auto; position: relative; margin: -0.2em -1.6em -0.2em -1em;   
  }


/* Besucher-Statistk-Histogramme: */
img.chart { width: 100%; max-width: 30em; height: auto; }
  
/* Abgerundete Ecken: */
fieldset, input, select, textarea, button { 
  border-width: 0.1em;
  border-radius: 0.3em; 
  }
  
/* Responsives Design mit Flexbox: */
/* Flex-Gruppe, z.B. fieldset- oder ul-Tag */
.flex {
  flex: 1 100%;
	flex-direction: column;
}
/* Flex-Container, z.B. p- oder li-Tags */
.flex p, .flex li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* Weiten der im Flex-Container enthaltenen Objekte, z.B. label-Tags 
   minWeite 120px (10em), maxWeite 220px (19em)
*/
.flex > p > label,
.flex > li > label,
.flex li p
 {
  flex: 1 0 120px;
  max-width: 220px;
}
.flex li p.short
 {
  flex: 1 0 60px;
  max-width: 120px;
}
.flex > p > label + *,
.flex > li > label + * {
  flex: 1 0 220px;
}

/*
body.slp {
  display: flex;
	flex-flow: column;
}  
div.flex {
  flex: 1 100%;
	flex-direction: column;
}
header, nav {
	flex: 1 1 100%;
} 
*/

nav {
  display: flex;
  align-items: center;
	flex-direction: column;
}  

/*
.portal {
  vertical-align: left; 
} 
 
div.portal { margin: 0em 1.5em; }
*/
span.portal-changeUg {
  background-color: lightgreen; display: none; 
}  

.margin_topleftright { margin: 1em 1.5em 0em; }

/* fieldset.upload { margin: 0.3em 0em; } */
legend.upload { font-size:smaller; padding:0px 5px; }
div.upload { font-size:smaller; }
th.upload { width:180px; text-align:right; vertical-align:top; padding-right:10px; }

p {
  margin-top:0px; margin-bottom:2px;
  }

/*
p.info {
  font-family:Verdana,Arial,sans-serif; font-size:10pt; color:red;
  margin-top:20px; margin-right:10px; margin-bottom:20px; margin-left:10px;
  border-style:dotted; padding:5px;
  }
*/  
.footer { 
  width: auto; 
  margin: 0.5em; 
  text-align: center; 
  font-size: 0.8em; 
  }
 
.smaller { font-size: 0.8em; }   
.fontSmaller { font-size: 0.8em; }
.borderRounded { border-radius: 0.3em; }   

/* message: font color and weight */
.info { color: blue; }
.success { color: white; background-color: green; padding: 0.1em; }
.warning, .severe, .error, .alarm { color: red; margin: 0em; padding: 0.1em; }
.error, .bold, .alarm { font-weight:bold; }
.alarm { background-color: red; color: white; }
.severe { background-color: yellow; }  /* more than warning, less than error */

ol {
  margin-top:2px; margin-bottom:2px;
  }

table {
  border-style: none;
  }
table.bordered, th.bordered, td.bordered {
  border: 1px solid black; border-collapse: collapse;
  }  
table.download {
  margin:0px 20px;
  background: url("../images/lines.jpg") repeat-y scroll;
  }

td.li75 { width:75%; vertical-align:top; }
td.re25 { width:25%; vertical-align:top; }

.no-wrap { white-space: nowrap; }
.tal     { text-align: left; }
.tac     { text-align: center; }
.tar     { text-align: right; }
.vat     { vertical-align: top; }
.vam     { vertical-align: middle; }
.vab     { vertical-align: bottom; }
.ro      { background-color: lightgray; }
.dib     { display: inline-block; }

/* derzeit nur in Alumni / Edit und UpDown / upload: */
.cellpad { padding: 0.2em 0.5em; }
.wid05   { width: 5em; }
.wid10   { width: 10em; }
.wid15   { width: 15em; }
.wid20   { width: 20em; }
.wid40   { width: 40em; }
.inline  { display: inline; }
/**
 * WICHTIG u. a. für Grid-View beim responsive design:
 * Breite und Höhe aller HTML-Elemente einschl. Border und Padding ermittelt:
 * Quelle: http://www.w3schools.com/css/css_rwd_grid.asp
 */ 
* {
    box-sizing: border-box;
  }


@media screen {
  /* ... Formatdefinitionen nur zur Anzeige ... */
  .printonly  { display:none; }
  }

@media print {
  /* ... Formatdefinitionen zum Drucken ... */
  body.intern { font: normal 0.8em Arial,Verdana,sansserif; }
  .noprint { display:none; }
 }


/* größere Viewports ab ca. 800px / 16px = 50em: */
/*
@media all and (min-width: 50em) {
  div.slp { display: inline; }  
  img.slp { width: 9em; height: auto; max-width:100%; }
  nav { flex-direction: row; } 
}
*/

/* größere Viewports ab ca. 400px (Mobile quer, Tablet; 400/16 = 25): */
@media all and (min-width: 25em) {
  /* in alumni */
  body.alumni {
    max-width: 46em;
    margin: 0.5em 1em;
  }  
  body.intern, form.intern {
    max-width: 48em;
    margin: 0.5em 1em;
  }  
}

/* größere Viewports ab ca. 480px (Mobile quer, Tablet; 480/16 = 30): */
@media all and (min-width: 30em) {
}

@media all and (min-width: 51em) {
  /* in alumni */
  body.alumni {
    margin: 0.5em auto;
  }  
  body.intern, form.intern {
    margin: 0.5em auto;
  }  
  .flex { flex-direction: row; }
  .flex > p > label,
  .flex > li > label,
  .flex li p
   { flex: 1 1 0%; }
}  
/* große Viewports ab ca. 1000px (Monitore ab 15"; 1000/16 = 62) */
@media all and (min-width: 62em) {
  body.slp { max-width: 60em; margin: 0em auto; } 
  body.alumni { max-width: 60em; margin: 1em auto; } 
  body.intern, form.intern { max-width: 60em; margin: 1em auto; } 
  body.updown { max-width: 60em; margin: 1em auto; } 
  a.slp { font-size: 0.9em; }  
  div.slp { display: inline; }  
  img.ico { width: 1.3em; }  
  img.slp { width: 19em; height: auto; max-width:100%; }
  nav { flex-direction: row; } 
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.3em; }
  h3 { font-size: 1.2em; }
  h3.javaDisabled { background-color:red; text-align:center; }
  .footer { font-size: 0.8em; }
  /*
  div.flex { flex: 1 1 0%; flex-direction: row; }
  aside { flex: 1 1 0%; }
  */ 
}