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

body {background-color:#ffffff;
/*	color:#000000; */
	color: #ffffff;
	font-size: 80%;
	font-family:Verdana, Geneva, sans-serif;
	margin:0px;}
	
body a {color:#0F243E;}


header {background-color:#ffffff;
	color: #ffffff;
	font-size: large;
	font-style:italic;
	font-weight:bolder;
	padding: 1px;
	width:100%;
	height: 100px;
	text-align: center;
	img: top;
	}
	
#hilfscontainer{width: 100%;}


/* Ursprüngliche Navigation & aside
aside {text-align:center;
	width:100%;}

nav {margin:10px;
	padding-bottom:20px;
	padding-left:5px;
	padding-right:5px;
	padding-top:10px;
	text-align:center;}
*/
	
main {background-color:#ffffff;
	color: #000000;
	width:100%;}
	
main h1 {font-size: large;
/* 	margin-bottom: 10px; */
	margin-bottom: 0px;
	margin-top: 0px;}		


main h6 {font-size: small;
 	margin-bottom: 1px;
	margin-top: 0px;
	clear: both;}

	
/*	Original
article {
/*	border: 1px solid grey;
	border-radius:10px; */
/*	width:100%;
	font-size: medium;
	margin:20px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;} */
	
	
article {
	width:90%;
	font-size: medium; /* alt medium */
	margin:10px;
	padding-bottom:5px;
	padding-left:0px; /* Somit kein Scrollbalken (Horizontal) Mobile - ursprünglich padding-left 10px */
	padding-right:0px; /* Somit kein Scrollbalken (Horizontal) Mobile - ursprünglich padding-rightt 10px */
	padding-top:5px;}
	
	
footer {background-color:#0F243E;
	color:#ffffff;
	font-size:large;
	font-style:italic;
	font-weight:bolder;
	padding-bottom:10px;
	padding-top:10px;
	text-align:center;
	width: 100%;}

img {max-width:100%; height:auto; }

/* Ursprüngliche Navigation Mobil
ul {margin:0; 
    padding:0;
    width:100%;
    list-style-type:none;
	font-size:large;
}

ul li a {
    text-decoration:none;
    color:white; 
    padding:10.5px 11px;
	margin-bottom:10px;
    background-color:#0F243E;
    display:block;
	border-radius:10px;
}
 
ul li a:visited {color: white;}
 
ul li a:hover, ul li .current {color: black;
    background-color: yellow;}
Ursprüngliche Navigation Mobil */

	
	
/* Definition/Einstellungen der Navigation */	 
nav ul {
	text-align: center;  /* left */
	list-style: none;
	border-radius: 5px;  /* Abgerundete Ecken Menu-Element */
	font-size: small;
	margin: 0px;
	padding: 5px;  /* Versuch - Original 0px */
	margin-bottom: 0px; /* Original 3px */
}	


nav > ul > li {
	float: left;
}
/* Als nächstes ordnen wir die einzelnen Menüpunkte nebeneinander an. */


nav > ul > li > ul {
	display: none;
}
/* Die Verwendung des „>“-Selektors verhindert, dass Eigenschaften auf „<li>“-Elemente vererbt werden, die tiefer verschachtelt sind. Für das Menü sollen schließlich nur die Menüpunkte der ersten Ebene nebeneinander dargestellt werden. Alle verschachtelten Menüpunkte sollen untereinander angeordnet sein. Da zunächst nur die erste Ebene der Navigation sichtbar sein soll, müssen alle anderen Ebenen ausgeblendet werden.
*/


nav > ul a {
  display: block;
  text-decoration: none;  /* Links in Menu bzw. Menu-Elemente sind nicht unterschrichen */
  white-space: nowrap;
/*  padding: 5px;  /* padding = Innenabstand - Original*/
  padding: 3px;  /* padding = Innenabstand */
  margin: 0px;  /* margin = Aussenabstand */
  background:#0F243E; /* Urpsrung rgb(195, 35, 45); Farbe = Rot*/
  color: rgb(255, 255, 255); /* Schriftfarbe - Weiss */
}


nav ul > li > ul > li a {
  background:#0F243E; /* rgb(0, 0, 0); Schwarz */
  color: rgb(255, 255, 255); /* Weiss */
}
/* Das Aussehen der einzelnen Menüpunkte sollte man stets über das „<a>“-Element definieren. Dazu ist es sinnvoll, den Link als Blockelement auszuzeichnen, um Innenabstände (mit der „padding“-Eigenschaft) definieren zu können. Bei Inline-Elementen funktioniert das nicht. Die Links der zweiten und dritten Menüebene lassen sich natürlich anders gestalten als die der ersten.
*/


nav > ul {
  float: align-center;  /* left, right, align-center, align-center-left, align-center-right */
  overflow: hidden;
/*  padding: 0 10px 0 10px; /* Original */
  padding: 0 2px 0 2px;
/*  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); Original */ /* Schatten der Box */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); */
  background:#0F243E; /* rgb(195, 35, 45); Farbe = Rot*/
}
/* Schriften und Farben anzupassen, gehört natürlich auch zur Menügestaltung dazu. Außerdem kann man gegebenenfalls Schatteneffekte und abgerundete Ecken einsetzen. Will man dem „<ul>“-Element selbst CSS-Eigenschaften zum Aussehen zuordnen, sollte man zusätzliche Eigenschaften vergeben.
*/
/*
Die „float“-Eigenschaft sorgt dafür, dass die Breite des „<ul>“-Elementes nicht 100 Prozent ist, sondern sich der Breite der nebeneinander angeordneten Kindelemente anpasst. Per „overflow“ sorgt man dafür, dass abgerundete Ecken nicht durch die Kindelemente, die keine angerundeten Ecken haben, überdeckt werden.
/*



/* Zweite und dritte Menüebene gestalten */
nav > ul > li:hover > ul {
  display: block;
  position: absolute;
  border-radius: 5px;  /* Abgerundete Ecken Menu-Element - Original 5px */
  background:#0F243E; /* Urpsrung rgb(195, 35, 45); Farbe = Rot*/
}

nav > ul > li > ul > li {
  position: relative;
}
/* Um den Zugriff auf die zweite Menüebene zu ermöglichen, wird die Pseudoklasse „:hover“ verwendet, die auslöst, wenn man mit der Maus über ein Listenelement der ersten Ebene fährt.
*/
/* Während mit der „display“-Eigenschaft die zweite Ebene eines Menüpunkte angezeigt wird, sorgt „position“ dafür, dass das verschachtelte „<ul>“-Element nicht die Breite des übergeordneteten „<li>“-Elementes beeinflusst. Die „<li>“-Elemente der zweiten Ebene werden wiederum relativ dargestellt.
*/



/* Für die dritte Menüebene sorgt „display“ wieder dafür, dass die Liste erst angezeigt wird, wenn man im übergeordneten „<li>“-Element die „:hover“-Pseudoklasse auslöst. Außerdem haben wir per CSS die dritte Ebene so ausgezeichnet, dass sie neben der Liste der zweiten Ebene dargestellt ist.
*/
nav > ul > li > ul > li > ul {
  display: none;
}
nav > ul > li > ul > li:hover > ul {
  display: block;
}
nav > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}


/* Für Floating Button to Top */
a.back-to-top {
	display: none;
	width: 45px;
	height: 45px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
a:hover.back-to-top {
	background-color: #000;
}


/* Besuchte Links werden mit folgender Schriftfarbe dargestellt
ul li a:visited {color:#000000;}
*/
 
 
/* Menu-Farbe wechselt auf Gelb, falls mit Cursor darauf */
ul li a:hover, ul li .current {color:black;
    background-color:yellow;}

/*
aside {
display: none;
}
*/
	
/* aside - Formatierung	
aside {float: right;
	text-align: center;
	width: 0%;
	display: block;
	color:#0F243E;
/*	background-color:#0F243E; *//*
}	*/
	

	
/* CSS-Datei style.css - div
#ShirtVitrine { background-color: yellow; }*/