/*
@file PLANINFO.CSS
enthält alle Formatierungen der PlanInfo-WebSite
@author (c) November 2004 by Michael Ziemke, Koeln
@version 2019-09, 2018-10, 2004-11
*/

/*
** 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 }
*/

/*
** Allgemeingültige Formate:
** ----------------------------------
*/

body {
  font-family: Arial,Verdana,Biolinum,Libertine,Ubuntu;
  background: url('images/background-plan.jpg') no-repeat 50% 50% fixed;
  /* background-color: #ffad33; */
  background-size: cover;
  color:black;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0.5em 0.5em;
 }

body.login {
  max-width: 19em;
  text-align: center;
  }
body.anzeige {
  /* max-width: 100%; */
 }

body.orgamenu {
  max-width: 38em;
  }

body.updateform {
  width: 68em;
  }

body.m {
  font-family:Arial,Verdana,Biolinum,Libertine,Ubuntu;
  color:black;
  background-color:#FFFF99;
  }

body.if {
  font-family:Arial,Verdana,Biolinum,Libertine,Ubuntu;
  color:black;
  background-color:#91A56E;
  }

h1 {
  text-align:left;
  font-size: 1.2em; /* 24pt */
  margin-top:0px; margin-right:0px; margin-bottom:6px; margin-left:0px;
  }

h2 {
  text-align:left; display:inline;
  font-size: 1.1em; /* 14pt */
  margin-top:0px; margin-right:0px; margin-bottom:4px; margin-left:0px;
  }

h3 {
  text-align:left;
  font-size: 1.0em; /* 12pt */
  margin-top:0px; margin-right:0px; margin-bottom:4px; margin-left:0px;
  }
  
h3.javaDisabled { background-color:red; text-align:center; }

p {
  margin-top:2px; margin-right:2px; margin-bottom:2px; margin-left:2px;
  }

table {
  border:0;
  width:100%;
  }
  
.center { text-align: center; vertical-align: middle; } 
.no-wrap { white-space: nowrap; }
.error { color:white; background-color: red; } 

/**
 * 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;
}
  
/**
 * Formate für mobile Anzeige (MobilePhone oder Portrait-Tablet):
 */
  [class*="col-"] {
    width: 100%;
    float: left;
  }
  .colmob-30 {
    width: 30%;
  }    
  .colmob-70 {
    width: 70%;
  }    
  .row::after {
    content: "";
    clear: both;
    display: block;
  }
 
/**
 * Formate für breite mobile Anzeige (Tablet oder Landscape-Phone und minimale Breite 640px) :
 * derzeit obsolet
 */
  @media screen and (min-width: 460px) and (max-width: 800px) {
    [class*="col-"] { float:left; }
    .col-m-1 {width: 8.33%; }
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
  }
 
/**
 * Formate für nicht-mobile Anzeige (mindestens 800px):
 */
  @media screen and (min-width: 800px) {
    .mobile { display:none; }
    h2 { font-size: 1.4em; /* 14pt */ }
    h3 { font-size: 1.2em; /* 12pt */ }
    table.login { width:600px; }
    [class*="col-"] { float:left; }
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  }


 
/** 
 * responsive Formate für Login-Formular:
 * @version 2016-08
 */ 
h2.login {
  font-size: 1.4em;
	width: 18em;
  text-align: center;
}  
/*
div.login {
  margin: 0px 1px;
  padding: 0px 0px;
	width: 18em;
    max-width: 100%;
  text-align: center;
} 
p.login {
  text-align: center;
  font-size: smaller;
}  
*/ 
p.orgamenu {
  text-align: left;
  }
div.orgamenu {
  	width: 96%;
    max-width: 100%;
    min-height: 5em;
    padding: 2%;
    margin: 2%;
    display: block;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    clear: both;
  }  
input.login[type=text],[type=password] {
  	width: 24em; /* 300px*/
    max-width: 100%;
    padding: 0.6em 1.0em;
    margin: 0.4em 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
}  
input.login[type=image] {
    padding: 2px 2px;
    margin: 0px 20px;
    display: inline;
    border: none;
}  
input.login:focus {
  background-color: lightgreen;
}


/**
 * Spezielle Formate für die Plan-Anzeige:
 */
   table.plan { 
     background-color:#FFFF99; width:100%; margin-top:5px;
     }
   tr.plan {page-break-inside:avoid;}
   th.titel {
     color:#EEEEEE; background-color:#FFBF00;
     text-align:center; vertical-align:Top;
     font-size:1.2em; }
   th.wotag { color:#A02000; vertical-align:top; width:19%; }
   th.std { color:#A02000; vertical-align:middle; width:5%; }
   td.kurse {
     background-color:#FFFFE0;
     vertical-align:top; text-align:center; white-space:pre;
     font: normal 0.9em Verdana,Biolinum,Libertine,Ubuntu;
    }
   td.plan {
     background-color:#EEEEEE; white-space:pre;
     vertical-align:middle; text-align:center;
     font: normal 0.9em Verdana,Biolinum,Libertine,Ubuntu;
    }
   td.test {background-color:#EEEEEE; vertical-align:top; font-size:small; width:10%; }

/** 
 * responsive Formate für die Plan-Anzeige:
 * @version 2016-08
 */ 
div.plan {
		overflow-y:hidden;
		overflow-x:auto;
}
 
.info {
    padding: 0.3em;
    /*margin: 0.2em 0em;*/
    font-size: 0.8em;
    background-color: lightgreen;
}
.fontSmaller { font-size: 0.8em; }  
/* .fontSmall { font-size: 0.6em; } */
 
.label {
    padding: 0px 0px;
    margin-top: 4px;
    margin: 0px 0px;
    font-size: 0.8em;
}

p.plan {
  	width: 100%;
    padding: 12px 0px;
    margin: 8px 4px;
    font-weight: normal;
}  
p.plan2 {
  	width: 100%;
    padding: 0px 0px;
    margin: 0px 0px;
    font-weight: normal; font-size: small;
}  
input.plan[type=text], input.plan2[type=text], input.plan3[type=text], select.plan {
  	width: 80%;
    max-width: 100%;
    padding: 12px 10px;
    margin: 0px 4px;
    display: inline;
    border: 1px solid #ccc;
    border-radius: 4px;
} 
/** Input-Select mit Ok-Button bzw. Scroll-Pfeilen: */ 
input.plan2[type=text], select.plan2 {
  	width: 80%;
}  
/** Input mit Ok-Button und Scroll-Pfeil-Buttons: */ 
input.plan3[type=text], input.plan3[type=image], select.plan3 {
  	width: 65%;
}
  
/** Input-Images Ok, Left, Right, Print, Out: */
input.plan[type=image] {
    width: 150%; max-width: 36px;
    vertical-align: middle;
    padding: 2px 0px;
    margin: 0px 0px;
    display: inline;
    border: none;
}  
input.plan12[type=image] {
  width: 150%; max-width: 18px;
}  
input.plan24[type=image] {
  width: 120%; max-width: 29px;
}  
input.plan24a[type=image] {
  width: 120%; max-width: 29px;
} 
/** Scroll-Pfeil-Buttons: */ 
input.plan2[type=image] {
    width: 100%; max-width: 20px;
    padding: 0px 0px;
}

/** max-width > 920 */ 
@media screen { 
/** Schriftgröße in Stundenplan-Tabelle: */
  div.plan, td.plan, td.kurse {
    font-size: 1.0em;
  }  
}  
@media screen and (max-width: 460px) {
  /** Schriftgröße in Stundenplan-Tabelle: */
  div.plan, td.plan, td.kurse {
    font-size: 0.8em;
  }  
  /** Input-Images Left, Right der Breite 12px im Mobil-Hochformat: */
  input.plan12[type=image] {
    	width: 120%;
  }
  /** Input-Images Ok, Print, Out der Breite 24px im Mobil-Hochformat: */
  input.plan24[type=image] {
    	width: 150%; max-width: 36px;
  }
  input.plan24a[type=image] {
    width: 100%; max-width: 24px;
  }  
}  

/** Anmeldeformular (Breite 19em) zentrieren auf größeren Screens: */
@media screen and (min-width: 20em) {
  body.login {
    margin: 0.5em auto;
  }
}

/** OrgaTools-Menü (Breite 38em) zentrieren auf größeren Screens: */
@media screen and (min-width: 42em) {
  body.orgamenu {
    margin: 0.5em auto;
  }
}

/** Update-Formular (Breite 68em) zentrieren auf größeren Screens: */
@media screen and (min-width: 68em) {
  body.updateform {
    margin: 0.5em auto;
  }
}  

@media screen and (min-width: 461px) and (max-width: 920px) {
  /** Schriftgröße in Stundenplan-Tabelle: */
  th.titel {
    font-size: 1.0em;
  }  
  div.plan, td.plan, td.kurse {
    font-size: 0.8em;
  }  
  /** Input-Images Left, Right der Breite 12px im Mobil-Querformat (3-spaltig): */
  input.plan12[type=image] {
    	width: 11%; max-width: 12px;
  }
  /** Input-Images Ok, Print, Out der Breite 24px im Mobil-Querformat (3-spaltig): */
  input.plan24[type=image] {
    	width: 11%; max-width: 24px;
  }
}
@media screen and (min-width: 921px) and (max-width: 1100px) {
  /** Schriftgröße in Stundenplan-Tabelle: */
  th.titel {
    font-size: 1.1em;
  }  
  div.plan, td.plan, td.kurse {
    font-size: 0.9em;
  }
}  
    
input.plan:focus, input.plan2:focus, select.plan:focus {
  background-color: lightgreen;
}
   
/**
 * Spezielle Formatierungen nur für die Anzeige oder für den Druck
 */
@media screen {
  .onlyprint { display:none; }
 }

@media print {
  .noprint { display:none; }
  body {font-size:10pt;}
  h2 { font-size:14pt; font-weight:bold; }
  h3 { font-size:12pt; display:inline;}
  table.plan {border:none; margin-top:10px; border-collapse: collapse; }
  th.titel { color:#A02000; }
  td.plan {
    border:1px dotted #006400;
    padding:5px; empty-cells:show;
   font: 0.65em Verdana;
  }
  td.kurse {
    border:1px dotted #006400; outline:1px dotted;
    padding:5px; empty-cells:show;
    font: normal 0.5em Verdana;
    }
 }
@media print and (max-width: 800px) {
/** (PDF-)Druckausgabe auf Mobilgeräten (seit 2018-10): */
  body {font-size:9pt;}
  table.plan {width:100%; border:none; margin-top:10px; border-collapse: collapse; }
  td.plan {
    border:1px dotted #006400;
    padding:2px; empty-cells:show;
   font: 0.5em Verdana;
  }

}