body{                                                   /*body bezeichnet den kompletten HTML-Bereich der Seite, hier werden Hintergrunddesign und Schriftarten, allgemeine Einstellungen festgelegt*/
	background:rgb(200,200,200);                          /*Pfad zum Hintergrundbild, das verwendete Hintergrundbild wird ohne weitere Angaben (background-repeat) horizontal und vertikal wiederholt bis der komplette Elementbereich damit ausgefüllt ist*/
	font-family:'Oleo Script', cursive, serif;            /*hier wird die auf der Seite verwendete Schriftart, bzw. Schriftfamilie festgelegt, sollte diese nicht auf dem Server vorhanden sein wird eine andere Schriftart der Familie verwendet*/
  min-width:800px;
  min-height: 500px; 
  background-repeat: no-repeat;                         
  background-attachment:scroll;
  /*background-position: right 2px top 2px;*/
  background-position: right top;
}

.lg-container{                                          /*hier werden die Eigenschaften des auf der Seite befindlichen Elementes "lg-container" festgelegt*/
	width:275px;                                          /*Breite des Elements*/  
	margin:100px auto;                                    /*freier Bereich ausserhalb des Element-Rahmens "Außenrand" (transparent) 100px auto = nach oben 100 px, auto heisst links-rechts-zentriert */
	padding:20px 40px;                                    /*freier Bereich innerhalb des Element-Rahmens "Innenabstand" (Transparent) beispielsweise Abstand Rand-Text, hier 20px, 40px oben-unten:20px , links-rechts:40px / bei 4 Angaben gilt folgende Reihenfolge: oben,rechts,unten,links*/
	border:1px solid #f4f4f4;                             /*Rahmen um das Objekt Strichstärke: 1px, Solid = durchgehende Linie*/
	background:rgba(255,255,255,.5);                      /*Hintergrundfarbe des Elements (hier für die Kanäle RGB+A (Rot, Grün, Blau + Alpha)) durch 0.5 bei Alpha entsteht eine Halbtransparentz*/
	-webkit-border-radius:10px;                           
	-moz-border-radius:10px;                              /*Rundung (Radius) an den Ecken des Randes (Radius 0=Ecke) Spezifikationen für verschiedene Browser (moz = Mozilla ...)*/  
	border-radius:10px;
	
	-webkit-box-shadow: 0 0 2px #aaa;                     /*Schatten den das Element auf den Hintergrund (body) wirft. 0 0 2px #aaa = horizontales Offset 0 , Vertikales Offset 0, Radius (Schattengrösse), Farbe*/
	-moz-box-shadow: 0 0 2px #aaa;                        
	box-shadow: 0 0 2px #aaa;
}
.lg-container h1{                                       /*h1 = Headline1 im Element "lg-container"*/
	font-size:40px;                                       /*Schriftgrösse*/
	text-align:center;                                    /*Schriftausrichtung (hier zentriert)*/
}
#lg-form > div {                                       /*Formatierung für im Element vorhandene "form" (Inputfelder, Submit-Button)*/
	margin:10px 5px;                                      /*Aussenrand*/  
	padding:5px 0;                                        /*Innenabstand*/
}
#lg-form label{                                        /*Form-Label (Bezeichnung der Input-Felder)*/
	display: none;                                        /*Bezeichnungen werden nicht angezeigt (ausgeblendet)*/
	font-size: 20px;                                      /*Schriftgrösse*/        
	line-height: 25px;                                    /*Zeilenhöhe (kann genutzt werden um Zeilenabstand zu erstellen (line-height > font-size)*/
}
#lg-form input[type="text"],                           /*Eigenschaften für die Inputfelder "text" und "password" der form "lg-form"*/
#lg-form input[type="password"]{
	border:1px solid rgba(51,51,51,.5);                   /*Rahmen*/                   
	-webkit-border-radius:10px;
	-moz-border-radius:10px;                              /*Rundung (Radius) an den Ecken des Randes*/
	border-radius:10px;
	padding: 5px;                                         /*Innenabstand*/
	font-size: 16px;                                      /*Schriftgrösse*/
	line-height: 20px;                                    /*Zeilenhöhe*/
	width: 100%;                                          /*Breite nutzt die volle vorhandene Breite*/
	font-family: 'Oleo Script', cursive;                  /*Schriftart / Familie*/
	text-align:center;                                    /*Schriftausrichtung*/
  color: #bbb;                                          /*Schriftfarbe*/
  }
#lg-form div:nth-child(3) {                            /*Eigentschaften für den Login-Button (hier an dritter Stelle - nth-child(3))*/
	text-align:center;                                    /*Schriftausrichtung*/
}
#lg-form button{                                       /*Eigenschaften des Login Buttons*/
	font-family: 'Oleo Script', cursive;                  /*Schriftart / Familie*/
	font-size: 18px;                                      /*Schriftgrösse*/
	border:1px solid #000;                                /*Rahmen*/
	padding:5px 10px;                                     /*Innenabstand*/
	border:1px solid rgba(51,51,51,.5);                   /*Rahmen, überschreibt die Eigenschaften des "ersten Rahmens"*/
	-webkit-border-radius:10px;                     
	-moz-border-radius:10px;                              /*Rundung (Radius) an den Ecken des Randes*/
	border-radius:10px;
	
	-webkit-box-shadow: 2px 1px 1px #aaa;
	-moz-box-shadow: 2px 1px 1px #aaa;                    /*Schatten*/
	box-shadow: 2px 1px 1px #aaa;
	cursor:pointer;                                       /*Bestimmt das Aussehen des Cursors beim fokussieren des Elements mit der Maus hier: Pointer = Zeigefinger*/
}
#lg-form button:active{                                /*Eigenschaften des Login Buttons im active - zustand*/ 
	-webkit-box-shadow: 0px 0px 1px #aaa;                 
	-moz-box-shadow: 0px 0px 1px #aaa;                    /*Änderungen des Schattens beim Anklicken des Buttons*/
	box-shadow: 0px 0px 1px #aaa;
}
#lg-form button:hover{                                 /*Eigenschaften des Login Buttons im hover - zustand (wenn Mauszauger über Element)*/ 
	background:#f4f4f4;                                   /*Ändern der Hintergrundfabe*/      
}
#message{width:100%;text-align:center}                  /*Eigenschaften der ausgegebenen Message*/
.success {
	color: green;                                         /*Farbe für Success*/
}
.error {
	color: red;                                           /*Farbe für Error*/
}

#footer{
  position:relative;
  bottom:-15px;
  text-align:center;
  font-family: 'Oleo Script', cursive;                  /*Schriftart / Familie*/
	font-size: 12px;
	color: #777;                      
}