* {
    margin: 0 0 0 0;
    padding: 0;
}



body {
    font-family: sans-serif;
    background-color: #000;
    color: #ccc;
}




/************************ Control Panel Startseite ************************/

.control_panel {
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: absolute; 
  left: 26.7%;
  top: 5%;
  width: 50%;
}

.control_panel > div.control {
  width: 10%;
  margin: 0;
  text-align: center;
}

.button {
  border: none;
  background: none;
}

.button_img {
  width: 62%;
  opacity: 0.3;
}

.button_img:hover {
  opacity: 0.6;
  cursor: pointer;
}

.button_img_disabled {
  width: 62%;
  opacity: 0.3;
}


div.messagebox {
  border: 1px solid red;
  position: absolute;
  left: 10%;
  top: 5%;
  width: 20%;
  height: 20%;
  opacity: 0.7;
}


/************************ Einzelner Raum ************************/

.room_img {
  width: 100%;
}


.room_control_panel {
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: relative; 
  left: 0%;
  top: 5%;
  width: 100%;
}


.room_input {
  width: 25%;
  line-height: 14pt;
  font-size: 14pt;
  vertical-align: top;
  font-family: playregular, sans-serif;
  border-radius: 7px;
  margin-right: 10px;
  background-color: #333;
  color: #bbb;
  border: none;
  padding-left: 10px;
}




/************************ Überschriften ************************/
h1 {
  font-size: 2em;
  line-height: 1.2em;
  margin-top: 0em;
  margin-bottom: 0.6em;
  font-family: playbold, sans-serif;
  text-align: center;
  color: #c90;
}

h2 {
  font-size: 1.5em;
  line-height: 1.2em;
  margin-top: 0em;
  margin-bottom: 0.6em;
  font-family: playbold, sans-serif;
  text-align: center;
  color: #09c;
}

h3 {
  font-size: 1.2em;
  line-height: 1.2em;
  margin-top: 0em;
  margin-bottom: 0.6em;
  font-family: playregular, sans-serif;
  text-align: center;
  color: #0c9;
}

p {
  font-size: 1em;
  line-height: 1.4em;
  margin-top: 0em;
  font-family: playregular, serif;
  color: #ccc;
  text-align: left;
}



/*** Links ***/

a:link {
  text-decoration: none;
  color: #cc9966;
}


a:visited {
  text-decoration: none;
  color: #cc9966;
}

a:active {
  text-decoration: none;
  color: #cc9966;
}

a:hover {
  text-decoration: none;
  color: #ff9966;
}





/************************ Farben ************************/
.txtGreen { color: #0c9; }
.txtBlue { color: #09c; }
.txtRed { color: #f33; }
.txtMagenta { color: #c09; }
.txtYellow { color: #c90; }
.txtOrange { color: #f90; }
.txtPink { color: #f99; }
.txtBrown { color: #ba7a5b; }
.txtBlueGray { color: #7aa2c8; }
.txtPetrol { color: #00abad; }


/************************ Schriften ************************/

@font-face {
  font-family: 'playbold';
  src: url('../fonts/play-bold-webfont.woff2') format('woff2'),
       url('../fonts/play-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}


@font-face {
  font-family: 'playregular';
  src: url('../fonts/play-regular-webfont.woff2') format('woff2'),
       url('../fonts/play-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}