@charset "utf-8";
/* CSS Document */

/* roboto-regular - latin */
@font-face {
  font-family:Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;

}

body {
	background:url(../img/moon.jpg) no-repeat; 
	background-position: 0px 0px; 
	background-color:#FFF; 
	margin-top:160px;
  	font-family:Arial, Helvetica, sans-serif;
	background-color: #B2CBD5;
	padding: 0;
	color: #000;
}
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass diese Angaben auch für die .nav-Liste gültig sind, wenn Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}

a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
/* ~~ Dieser Container fester Breite umgibt alle anderen Blockelemente. ~~ */
.container {
	width:100%;
	background-color: #FFFFFF;
	margin: 0 auto; /* Durch die Angabe der Breite und Verwendung des Werts "auto" für die Seiten wird das Layout zentriert. */
}
/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. ~~ */
header {
	background-color: #FFFFFF;
}
.content {
	position:relative;
	padding: 25px;
	margin-left:15px;
	float: left;
	min-height:600px; 
}

.navigation {
	position:relative;
	margin: 0 auto;
	padding: 10px 0;
	width: 200px;
	float: left;
}

ul.nav {
	list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
	border-top: 1px solid #666; /* Hiermit wird der obere Rahmen für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rahmen im LI-Element platziert. */
	margin-bottom: 15px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den darunter angeordneten Inhalten erstellt. */
}
ul.nav li {
	border-bottom: 1px solid #666; /* Hiermit wird die Trennung der Schaltflächen erstellt. */
}

/* ~~ Mit diesem gruppierten Selektor werden die Listen im .content-Bereich angesprochen. ~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* Diese Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug angegeben. Sie können die Werte nach Bedarf ändern.  */
}


/* ~~ Fußzeile ~~ */
footer {
	padding: 10px 0;
	text-align:center;
	background-color: #e2001a;
	border-top:3px groove #666;
	height: 50px;
    margin-top: -50px;
	clear: both; /* Diese "clear"-Eigenschaft ermöglicht es dem .container-Block, das Ende der Spalten zu erkennen und sie korrekt zu umschließen. */
}

.active
{
	width:25px;
	height:20px;
	background-color:#393;
}

.deactive
{
	width:25px;
	height:20px;
	background-color:#933;
}

/* General button style */
.btn {
  width:200px;
  border: none;
  font-family: 'Roboto';
  font-size: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  padding: 25px 80px;
  display: inline-block;
  margin: 2px 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
  outline: none;
  position: relative;
  opacity:0.7;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Pseudo elements for icons */
.btn:before {
  font-family: 'FontAwesome';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}


/* Icon separator */
.btn-sep {
  padding: 10px 50px 10px 50px;
}

.btn-sep:before {
  background: rgba(0,0,0,0.15);
}

/* Button 1 */
.btn-1 {
  background: #33A;
  color: #fff;
}

.btn-1:hover {
  background: #66C;
}

.btn-1:active {
  background: #66C;
  right: 2px;
}

.btn-1:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 2.5;
  font-size: 100%;
  width: 40px;
}

/* Button 2 */
.btn-2 {
  background: #C33;
  color: #fff;
}

.btn-2:hover {
  background: #C66;
}

.btn-2:active {
  background: #C66;
  top: 2px;
}

.btn-2:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 2.5;
  font-size: 100%;
  width: 40px;
}

/* Button 3 */
.btn-3 {
  background: #C33;
  color: #fff;
}

.btn-3:hover {
  background: #F66;
}

.btn-3:active {
  background: #F66;
  top: 2px;
}

.btn-3:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 2.5;
  font-size: 100%;
  width: 40px;
}

/* Button 3 */
.btn-4 {
  background: #A43;
  color: #fff;
}

.btn-4:hover {
  background: #B54;
}

.btn-4:active {
  background: #C65;
  top: 2px;
}

.btn-4:before {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 2.5;
  font-size: 100%;
  width: 40px;
}

/* Icons */



.icon-home:before {
  content: "\f015";
}

.icon-table:before {
  content: "\f54e";
}

.icon-waren:before {
  content: "\f553";
}

.icon-logout:before {
  content: "\f52b";
}

.icon-impressum:before {
  content: "\f570";
}

.icon-regeln:before {
  content: "\f573";
}

.icon-spende:before {
  content: "\f818";
}

.arrow_box_good {
	position: relative;
	background: #9f9;
	border: 2px solid #393;
	min-height:30px;
	margin:10px;
	padding:5px;
	border-radius:5px;
	left:-70px;
}
.arrow_box_good:after, .arrow_box_good:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box_good:after {
	border-color: rgba(0, 213, 14, 0);
	border-right-color: #9f9;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box_good:before {
	border-color: rgba(24, 105, 0, 0);
	border-right-color: #393;
	border-width: 14px;
	margin-top: -14px;
}

.arrow_box_bad {
	position: relative;
	background: #f99;
	border: 2px solid #933;
	min-height:30px;
	margin:10px;
	padding:5px;
	border-radius:5px;
	left:70px;
}
.arrow_box_bad:after, .arrow_box_bad:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box_bad:after {
	border-color: rgba(213, 0, 0, 0);
	border-left-color: #f99;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box_bad:before {
	border-color: rgba(135, 0, 0, 0);
	border-left-color: #933;
	border-width: 14px;
	margin-top: -14px;
}


.arrow_box_kritik {
	position: relative;
	background: #99f;
	border: 2px solid #339;
	min-height:30px;
	margin:10px;
	padding:5px;
	border-radius:5px;
}

.highlight-row {
    background-color: #98FF98; /* Mintgrün */
}