@charset "utf-8";

html
  {
  margin: 0px;
  padding: 0px;
  height: 100%;
  }

body
  {
  background-image: -webkit-linear-gradient(#8888ee 25%, #bbbbbb, #484848, #385538);
  background-image: -moz-linear-gradient(#8888ee 25%, #bbbbbb, #484848, #385538);
  background-image: -ms-linear-gradient(#8888ee 25%, #bbbbbb, #484848, #385538);
  background-image: -o-linear-gradient(#8888ee 25%, #bbbbbb, #484848, #385538);
  background-image: linear-gradient(#8888ee 25%, #bbbbbb, #484848, #385538);
  background-size: 100% 100%;
  background-attachment: fixed;
  }

td { padding: 0px; }

strong { font-weight: bold; }

.titel
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 20pt;
  color: #000033;
  text-shadow: 0px 0px 3px #ffffff;
  }

.knoepfle
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 16pt;
  width: 230px;
  margin-bottom: 6px;
  background-color: #333366;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  box-shadow: 0px 4px 3px #000000;
  cursor: pointer;
  }

.knoepfle:hover
  {
  background-color: #444477;
  }

.knoepfle:active
  {
  background-color: #444477;
  transform: translateY(2px);
  box-shadow: 0 2px #333333;
  }

.startknoepfle
  {
  width: 380px;
  background-color: #002200;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 24pt;
  text-align: center;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 0px 4px 5px #000000;
  text-shadow: 0 0 5px green,
               0 0 10px green,
               0 0 20px green,
               0 0 40px green,
               0 0 60px green,
               0 0 90px green,
               0 0 120px green,
               0 0 160px green;
  cursor: pointer;
  }

.startknoepfle:hover
  {
  color: #ffffff;
  background-color: #002200;
  box-shadow: 0px 4px 5px #000000;
  text-shadow: 0 0 5px #11ff11,
               0 0 10px #11ff11,
               0 0 20px #11ff11,
               0 0 40px #11ff11,
               0 0 60px #11ff11,
               0 0 90px #11ff11,
               0 0 120px #11ff11,
               0 0 160px #11ff11;
  }

.startknoepfle:active
  {
  transform: translateY(2px);
  color: #ffffff;
  background-color: #002200;
  box-shadow: 0px 2px 5px #000000;
  text-shadow: 0 0 5px #11ff11,
               0 0 10px #11ff11,
               0 0 20px #11ff11,
               0 0 40px #11ff11,
               0 0 60px #11ff11,
               0 0 90px #11ff11,
               0 0 120px #11ff11,
               0 0 160px #11ff11;
  }

.startknoepfle_rot
  {
  width: 380px;
  background-color: #220000;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-weight: bold;
  font-size: 24pt;
  text-align: center;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 0px 4px 5px #000000;
  text-shadow: 0 0 5px red,
               0 0 10px red,
               0 0 20px red,
               0 0 40px red,
               0 0 60px red,
               0 0 90px red,
               0 0 120px red,
               0 0 160px red;
  cursor: not-allowed;
  }

.knoepfchen
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12pt;
  width: 120px;
  background-color: #333366;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
  box-shadow: 0px 2px 2px #000000;
  cursor: pointer;
  }

.knoepfchen:hover
  {
  background-color: #444477;
  }

.knoepfchen:active
  {
  background-color: #444477;
  transform: translateY(1px);
  box-shadow: 0 1px #333333;
  }

.avatar
  {
  cursor: help;
  }

.balkenzelle
  {
  margin: 0px;
/*  background-color: #bb5555;*/
  background-image:linear-gradient(90deg, #cc4444 0%, #991111 100%);
  text-align: left;
  vertical-align: middle;
  }

.balkentabelle
  {
  border: 1px solid #000000;
  box-shadow: 1px 1px 5px #000000;
  position: relative;
  top: 5px;
  }

.klassenraum
  {
  table-layout: fixed;
  width: 1200px;
  border: none;
  border-spacing: 0px;
  }

.titelzeile
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  text-align: center;
  text-shadow: 0px 0px 6px #ffffff;
  font-weight: bold;
  font-size: 26pt;
  color: #333333;
  }

.fusszeile
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  text-align: center;
  text-shadow: 0px 0px 5px #000000;
  font-weight: bold;
  font-size: 12pt;
  color: #ffffff;
  }

.fusszeile_links
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  text-align: left;
  text-shadow: 0px 0px 5px #000000;
  font-weight: bold;
  font-size: 12pt;
  color: #ffffff;
  }

.sprechblase_dozent
  {
  color: #000000;
  background: #ffffff;
  }

.sprechblase_dozent2 { color: #000000; }

.sprechblase_teilnehmer
  {
  color: #555555;
  background: #ffffff;
  }

.sprechblase_dozent, .sprechblase_dozent2, .sprechblase_teilnehmer
  {
  border-collapse: collapse;
  padding-left: 20px;
  padding-right: 20px;
  height: 170px;
  border-radius: 20px;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  text-align: center;
  vertical-align: middle;
  font-size: 16pt;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  }

/* Damit z.B. Namen nicht automatisch umgebrochen werden! */
.nobruch { white-space: nowrap; }

.textcontainer
  {
  background-color:rgba(0, 0, 0, 0.2);
  width: 800px;
  margin: 0 auto; /* Zentrierung */
  border: solid 1px #000000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  }

.fliesstext { text-align: justify; }
.centertext { text-align: center; }

.fliesstext, .centertext
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: #ffffff;
  text-shadow: 0px 0px 5px #000000;
  margin-left: 30px;
  margin-right: 30px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  }

.inputfeld, .textfeld
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-weight: bold;
  color: #444444;
  width: 500px;
  }


a.hyperhyper
  {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  text-shadow: 0px 0px 5px #000000;
  font-weight: bold;
  color:#ffffff;
  text-decoration: none;
  }

a.hyperhyper:focus { outline: none; }

a.hyperhyper:hover
  {
  color: #ffffff;
  text-shadow: 0px 0px 5px #00ffff;
  }