/*!	CSS von christian@bienmueller.de 
	Gibt das Design des FRONTENDs von tabula.info V2 vor
	Dieses CSS darf gerne zu beliebigem Zweck uebernommen werden	
*/

body, 
table {
  font-family: 'Ubuntu', 'liberation sans', arial, sans-serif;
  font-size: 24px;
  margin: 0.0em;
  padding: 0em;
  overflow: hidden;
  color: #000;
  background-color: #EEEEEE;
  border-color: #004;
}

*[smaller|=true] {
  font-size: 80%;
}
*[bigger|=true], 
*[bigright|=true] {
  font-weight: bold;
  font-family: 'Ubuntu', 'Dejavu Sans', 'liberation sans', arial, sans-serif;
}
*[bigright|=true] {
  text-align: right;
}

.condensed {
    font-family: 'Ubuntu Condensed', 'Liberation Sans Narrow';
    font-weight: normal;
}

.italic {
    font-style: italic; font-weight: 300;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  font-weight: bold;
  margin: 0px 0px 0px 0px;
}
h1 {
  font-weight: bold;
  font-size: 130%;
}
h2, 
li {
  font-size: 120%;
}
h3 {
  font-size: 115%;
}
h4 {
  font-size: 110%;
}
h5, 
h6 {
  font-size: 90%;
  font-style: italic;
}
p, 
li, 
td, 
code {
  font-weight: normal;
  font-size: 100%;
  margin: 0px 0px 0px 0px;
  padding: 1px;
  margin-left: 1em;
  text-align: left;
}
tr.abgelaufen td {
  font-size:52%;
}
tr.abgelaufen img {
  width: 13px;
  height: auto;
}

.turbospalte_export { 
  width: 100%;
}

.turbospalte_export p, 
.turbospalte_export li, 
.turbospalte_export td, 
.turbospalte_export code {
  font-size: 70%;
}

table, 
td {
  border-style: solid;
}
table {
  border-width: 1px;
  width: 100%;
}
td {
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
p {
  text-align: justify;
}
.indent {
  margin-left: 2cm;
}
/* Aussehen von Content */
/* different table design in special div classes  */
.content *, 
.hiprio *, 
.loprio *, 
.dayless *, 
.dauer *, 
.erased *, 
.messages table, 
.messages td, 
.upload td, 
.upload table {
  border-width: 0px;
  text-align: left;
}
.content *, 
.hiprio *, 
.loprio *, 
.erased *, 
.messages table, 
.messages td, 
.upload, 
.upload td, 
.upload li, 
.upload p {
  /*, .upload **/

  background: #ffffee;
}
.persons, 
.messages, 
.weekmessages, 
.infos, 
.login {
  padding: 3px;
  margin: 0px;
  border-radius: 5px;
}
a, 
a:link, 
a:visited, 
a:hover, 
a:active, 
a:focus {
  text-decoration: none;
  color: #336699;
}
/*Tabellenränder*/
table, 
td {
  border-color: #336699;
}
/* H I N T E R G R Ü N D E */
/* Hintergrund Boxen mit Rändern */
p, 
li, 
td, 
code, 
.person, 
.erased {
  background-color: #f8f8ff;
}
.gelb td {
  background-color: #FFFFAA;
}
.ph0 * {
  background-color: #f5fff5;
}
.ph1 * {
  background-color: #f0fff0;
}
.ph2 * {
  background-color: #e5ffe5;
}
.phn * {
  background-color: #e0ffe0;
}

.personlisteneueklasse,
.personlistegleicheklasse { padding-top:0px; padding-bottom:0px; vertical-align:top;}
.personlisteneueklasse    { padding-top:8px;}

/* S C H R I F T E N */
/* Schriftfarbe Headlines */
h1, 
h2, 
h3, 
#adleft {
  color: #336699;
}
h3, 
.firstcontent, 
.firstcontent table, 
.firstcontent td {
  background-color: #e6e6e6;
  border-color: #336699;
}
.Uhr, 
.firstcontent table, 
.firstcontent td {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
}
.hiprio, 
.hiprio *, 
.s_t_fresh {
  color: #ff0000;
}
.s_t_ausfall {
  color: #00aa00;
}
.s_t_gelb {
  background-color: #FFFF88;
}
.s_t_gruen {
  background-color: #88FF88;
}
.loprio, 
.loprio * {
  color: #888888;
  font-size: 100%;
}
.content, 
.hiprio, 
.loprio, 
.content *, 
.hiprio *, 
.loprio *, 
.dayless *, 
.dauer * {
  background-color: #ffffee;
  border-color: #ffffee;
  color: #000000;
}
.dauer *, .alarm * {
  text-align: center;
  margin: 0em;
}
.dauer h4, .alarm h4 {
  padding-top:0.5em;
  padding-bottom:0.5em;
}
.dauer * {
  background-color: #88ff88;
  border-color: #88ff88;
  color: #000000;
}
.alarm * {
  background-color: #f22;
  border-color: #f00;
  color: #fff;
}

.erased {
  color: #008000;
}
.persons, 
.persons * {
  background-color: #ddffff;
  border-color: #ddffff;
  font-weight: bold;
}
.infos, 
.infos * {
  background-color: #ffffff;
  color: #000044;
}
.messages {
  background-color: #ffffee;
}
.weekmessages, 
.weekmessages h4, 
.weekmessages p {
  background-color: #ddaa88;
}
.dayless * {
  background-color: #ffff55;
  border-color: #ffff55;
  color: #336699;
}

.dayless p {
  margin: 0em;
  padding-left: 1em;
}

*[alt_person|=green], 
*[alt_person|=blue] {
  color: #336699;
  /*font-size:115%;*/

}
*[alt_person|=gelb], 
*[alt_person|=red] {
  color: #ff0000;
  /*font-size:130%;*/

  font-weight: bold;
}
*[alt_header|=true] {
  color: #000080;
  font-style: italic;
}
#rightbase, 
#leftbase, 
#baseline, 
#branding, 
#rightinfo {
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  z-index: -2;
}
#rightbase .messages .content, 
#leftbase .messages .content, 
#rightbase .firstcontent, 
#leftbase .firstcontent, 
#rightbase #wochenmotto {
  overflow: hidden;
  /* Inhalt verbergen wenn er (was ja geplant ist) nicht mehr in das DIV passt*/

  animation: ausblenden 5s ease-out 18s;
  /* nach 18 Sekunden innerhalb 5 Sekunden ausblenden war: */

  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /* danach Stehenbleiben und nicht wieder in den Ausgangszustand zurückkehren */
}
@keyframes ausblenden {
  from {
    max-height: 1000px;
  }
  to {
    max-height: 0;
  }
}
#rightbase .firstcontent, 
#leftbase .firstcontent {
  animation-delay: 5s;
}
#rightbase .messages, 
#leftbase .messages {
  /* nach 30 Sekunden soll Transparenz abgeschlossen sein */

  animation: verblassen 2s linear 28s;
  /* danach Stehenbleiben und nicht wieder in den Ausgangszustand zurückkehren */

  animation-fill-mode: forwards;
}
@keyframes verblassen {
  /*from { opacity:1; } */
  to {
    opacity: 0.4;
    font-size: 85%;
    padding: 1px 40px 1px 50px;
    border-width:0;
  }
}
#rechtervorhang, #bodenvorhang{
  position: absolute;
  z-index: 1;
  border: 2px solid grey;
  border-radius: 5px;
  font-size: 70%;
  background-color: grey;
  overflow: hidden;  /* Inhalt verbergen wenn er (was ja geplant ist) nicht mehr in das DIV passt*/

}
#rechtervorhang {
  right: 20px;
  top: 20px;
  width: 44.8%;
  width: calc(50% - 60px);
  
  animation: rvorhang 7s ease-out 33s;
  /* nach 33 Sekunden innerhalb 7 Sekunden ausblenden */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /* danach Stehenbleiben und nicht wieder in den Ausgangszustand zurückkehren */
}
#bodenvorhang {
  right: 20px;
  left: 20px;
  height: auto;
  max-height: 20%; /* wenn größer, dann scrollt es */
  bottom:1px;
  border-radius: 5px 5px 0px 0px;

  animation: bvorhang 17s ease-out 913s;  /* nach xxx933 Sekunden innerhalb 7 Sekunden ausblenden */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;  /* danach Stehenbleiben und nicht wieder in den Ausgangszustand zurückkehren */
}
@keyframes bvorhang {
  from {
    bottom: 1px;
  }
  to {
    bottom: -1000px;
  }
}

@keyframes rvorhang {
  from {
    right: 20px;
  }
  to {
    right: -1000px;
  }
}
#contentm0, #contentm1, #contentp, #contentbottomleft, #contentbottomright {
    position: relative;
}
#contentbottomleft, #contentbottomright {
    min-width: 35%;
}
.hiprio, 
.hiprio *, 
*[alt_person|=gelb], 
*[alt_person|=red], 
.s_t_fresh {
  color: #ff0000;
}
#branding {
  font-size:80%;
  bottom: 150px;
  right: 100px;
  z-index: -3;
  box-shadow: 4px 4px 2px grey;
  width: 12em;
}
#branding, 
#branding * {
  text-align: center;
  padding:0;
  margin:0;
  color: #668888;
  background-color: #ddd;
  border-color: #bbb;
}
#rightbase, 
#leftbase {
  z-index: 4;
  border-width: 0px;
  border-radius: 5px;
}
#rightbase, 
#baseline, 
#rightinfo {
  right: 0px;
}
#leftbase, 
#baseline {
  left: 0px;
}
#rightbase, 
#leftbase, 
#rightinfo {
  width: 49.8%;
  width: calc(50% - 3px);
}
#wochenmotto, 
#wochenmotto h1, 
#wochenmotto p {
  color: #ffffee;
  background-color: #000088;
}
#wochenmotto h1 {
  text-align: center;
}
#wirkung, 
#inhalt {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: 0px;
  padding: 0px;
}
#wirkung {
  left: 0px;
  width: 135px;
  height: 100%;
}
#inhalt {
  left: 135px;
  right: 0px;
}
#main_navigation, 
#main_content, 
#main_navigation2, 
#main_content2 {
  position: absolute;
  width: 100%;
  border: 0px;
  border-bottom: 2px; border-color:#336699;   border-style:solid;

  overflow: hidden;
}
.main_navigation_selected, 
.main_navigation2_selected {
  color: #4b9;
}
.main_navigation_hide, 
.main_navigation2_hide {
  color: #883333;
}
#main_navigation {
  height: 32px;
  color: #336699;
  font-size: 25px;
}
#main_content {
  top: 34px;
  bottom: 0px;
}
#main_navigation2 {
  bottom: 0px;
  height: 32px;
  color: #336699;
  font-size: 25px;
}
#main_content2 {
  top: 0px;
  bottom: 34px;
}
#rightbase .messages, 
#leftbase .messages, 
#rightbase .messages .content *, 
#leftbase .messages .content *, 
#rightbase .messages .hiprio *, 
#leftbase .messages .hiprio * {
  background-color: #fff;
  border-color:grey;
  border-style:solid;
}
/**#rightbase .c_header *, #leftbase .c_header * {*/
#rightbase .messages h3, 
#leftbase .messages h3 {
  background-color: #336699;
  color: #f8f8ff;
  text-align: center;
}
#leftbase .firstcontent, 
#rightbase .firstcontent, 
#leftbase .firstcontent *, 
#rightbase .firstcontent * {
  background: #998;
  border: 0;
  color: #336699;
  font-size: 85%;
  font-weight: bold;
  text-align: center;
}
#turbospalte1_2 h3, 
#turbospalte2_2 h3 {
  width: 80%;
}
.navi-div-links, 
.navi-div-zeit {
  text-align: left;
  font-weight: bold;
}
.navi-div-rechts, 
.navi-div-cd {
  text-align: right;
  font-weight: bold;
}
.navi-div-links {
  float: left;
  width: 19.8%;
  width: calc(20% - 3px);
  padding-left: 3px;
}
.navi-div-rechts {
  float: left;
  width: 29.8%;
  width: calc(30% - 3px);
  padding-right: 3px;
}
.navi-div-zeit {
  float: right;
  width: 39.8%;
  width: calc(40% - 3px);
  padding-left: 3px;
}
.navi-div-cd {
  float: right;
  width: 9.8%;
  width: calc(10% - 3px);
  padding-right: 3px;
}
.s_h_iframe {
  background: white;
  color: black;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
#column1_1,
#column1_2,
#column2_2, 
#turbospalte1_1, 
#turbospalte1_3, 
#turbospalte2_3, 
#turbospalte3_3, 
#turbospalte23_3, 
#turbospalte12_3, 
#turbospalte1_2, 
#turbospalte2_2 {
  border: 0px;
}

#column1_1,
#column1_2,
#column2_2
{
  height: 100%;
}

.zweispaltig {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */

  -moz-column-count: 2;
  /* Firefox */

  column-count: 2;
}
#solocontent {
  height: 100%;
}
#column1_1,
#turbospalte1_1 {
  width: 100%;
  border: 0px;
}
#turbospalte1_1 {
  overflow: hidden;
}

@media all and (min-width: 700px) and (min-device-width: 700px) {
  /* Trennung in 3 gleiche Spalten */
  #turbospalte1_3, 
  #turbospalte2_3, 
  #turbospalte3_3, 
  #turbospalte23_3, 
  #turbospalte12_3 {
    /*position: absolute;*/
  
    width: 32.8%;
    width: calc(33.3% - 2px);
    border: 0px;
    overflow: hidden;
  }
  #turbospalte1_3 td, 
  #turbospalte2_3 td, 
  #turbospalte3_3 td, 
  #turbospalte23_3 td, 
  #turbospalte12_3 {
    font-size: 18px;
  }
  /* lies column 1 von 3*/
  #turbospalte1_3 {
    left: 0px;
    float: left;
  }
  #turbospalte2_3 {
    left: 33.7%;
    float: left;
  }
  #turbospalte3_3 {
    right: 0px;
    float: right;
  }
  #turbospalte23_3 {
    right: 0px;
    width: 65.7%;
    width: calc(66.6% - 1px);
    float: right;
  }
  #turbospalte12_3 {
    left: 0px;
    width: 65.7%;
    width: calc(66.6% - 1px);
    float: left;
  }
  /* Trennung in 2  Spalten 50:50 */
  #column1_2, 
  #column2_2,
  #turbospalte1_2, 
  #turbospalte2_2 {
    width: 49.8%;
    width: calc(50% - 2px);
    border: 0px;
  }
  #turbospalte1_2, 
  #turbospalte2_2 {
    overflow: hidden;
  }
  /* lies column 1 von 2*/
  #column1_2, 
  #turbospalte1_2 {
    left: 0px;
    float: left;
  }
  #column2_2,
  #turbospalte2_2 {
    right: 0px;
    float: right;
  }
}
@media all and (max-width: 699px) {
  #turbospalte1_3, 
  #turbospalte2_3, 
  #turbospalte3_3, 
  #turbospalte23_3, 
  #turbospalte1_2, 
  #turbospalte2_2 {
    overflow: auto;
    margin-bottom: 10px;
  }
}
/* Ende von media query  <= 699*/
/* content boxes 
 * - immer untereinander
 * - nur header ist nicht in voller Breite
 * - rounded ist mit abgerundeten Ecken und dazugehörigen Innenrändern
 */
.c_box, 
.c_header {
  position: relative;
  width: auto;
  margin: 0px 0px 1px 0px;
  border-style: solid;
  /* nur zur Fehlersuche*/

  border-color: #F06;
  /* nur zur Fehlersuche*/

  border-width: 0px;
  overflow: hidden;
  padding: 0em 0em 0em 0.2em;
  z-index: 3;
}
.c_header {
  width: 80%;
}
/* POPUPHELP */
popuphelp {
  position: relative;
  color: white;
  background-color: #228;
  border-radius: 5px;
  float: right;
}
popuphelp:hover {
  background-color: green;
  cursor: help;
}
popuphelp span {
  display: none;
  text-decoration: none;
}
popuphelp:hover span {
  display: block;
  position: absolute;
  top: 24px;
  left: 32px;
  width: 250px;
  z-index: 100;
  color: #000000;
  border: 1px solid #000000;
  background: #FFA;
  font: 14px 'liberation sans', Verdana, sans-serif;
  text-align: left;
  padding: 1px;
}
popuphelp:hover span b {
  background-color: #DDF;
  text-align: justify;
}

@media all and (min-width: 900px) and (min-device-width: 900px) {
  .s_turbo_export49 {
    float: left;
    width: 49.80%;
    width: calc( 50% - 1px);
    font-size: 65%;
  }
  .s_turbo_export33 {
    float: left;
    width: 33%;
    font-size: 60%;
  }
  .s_turbo_export66 {
    float: left;
    width: 66%;
    font-size: 60%;
  }
}
@media all and (max-width: 899px) {
  .s_turbo_export49 {
    font-size: 65%;
    width: 100%;

  }
  .s_turbo_export33 {
    font-size: 60%;
  }
  .s_turbo_export66 {
    font-size: 60%;
  }
}
.turboraum { color:#a84bae;font-weight:bold; } # Raumnummern bei Änderung fett einfärben

/************************************************************
 *                                                          *
 *im Rahmen von V2 hierher geschoben, also Bedarf geprüft...*
 *                                                          *
 ************************************************************/
 .hiprio, .hiprio *, *[alt_person|=gelb] , *[alt_person|=red], .s_t_fresh {
            animation: puls 5s linear -2s infinite;
}

@keyframes puls {
      0%   {  text-shadow: none;} 
      90%  {  text-shadow: none;} 
      92%  {  text-shadow: 0   0   0em   yellow; } 
      95%  {  text-shadow: 0px 0px 0.7em yellow; } 
      98%  {  text-shadow: 0   0   0em   yellow; } 
      100% {  text-shadow: none;} 
}

/***********************************************
 *                                             *
 *                  Neu in V2                  *
 *                                             *
 ***********************************************/
/* Klassen für die grobe Aufteilung in neuer Oberfläche */
html, body {  height:100%;
    padding:0;
    margin:0;}
.tiP_Content {width:73%; width: calc(74% - 4px); height:100%; float:left; margin:1px;}
.tiP_Row     {width:49.5%; width: calc(50% - 2px); height:100%; float:left; margin:1px;}
.tiM_Content {width:26%; height:100%;              float:right;margin:1px;}
.tiM_Square { width:100%; height: 45%; height: calc(46% - 2px);background-color:white; border: solid blue 1px;margin:1px;}
.tiM_Status { width:100%; height: 1.2em;  
            border: solid #555 1px;margin:0px;padding:4px;
            background-color:#AAA; color:#FFF; 
            font-weight:bold;
            text-shadow: 0px 0px 3px #000000;}
.tiM_Square { overflow:hidden;} /*position:fixed;}*/

div.overlap_right {
  position: absolute;
  top: 4px;
  right: 4px;
  width: auto;
  height: auto;
  border: 0;
  z-index:5;

}

#alerter { width:1.2em; display: inline-block;text-align:center;}
.plan_iframe {
    width:100%;
    height:100%;
    border:0;
    overflow:hidden;
}

.blueborder {
    border:solid #336699 2px;
    margin:1px;
}
.blueborder table, .blueborder tr, .blueborder td {
    border:0;
}
.brownborder {
    border:solid saddlebrown 2px;
    margin:1px;
}
.brownborder table, .brownborder tr, .brownborder td {
    border:0;
}