/* CSS-Stylesheet - elfsport.ch */

@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:#0F243E; */
header {background-color:#ffffff;
	color: #ffffff;
/*	color:#000000; */
	font-size: xx-large;
	font-style:bold;
	font-weight:bolder;
	padding: 1px;
	text-align:center;}

	
#hilfscontainer {margin:0px auto;
	 max-width:1024px;}

	 

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


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: 10px;  /* padding = Innenabstand */
  margin: 0px;  /* margin = Aussenabstand */
  background:#0F243E; /* rgb(195, 35, 45); Farbe = Rot*/
  color: rgb(255, 255, 255); /* 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 */
/*  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); Original */ /* Schatten der Box */
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
  background:#0F243E;
}
/* 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: 10px;  /* Abgerundete Ecken Menu-Element */
}

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;
}



/* 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;}




main {background-color:#ffffff;
	color: #000000;
	float:left;
	width:100%;}
/*	width:75%;} */

	
main h1 {font-size: x-large;
 	margin-bottom: 10px;
	margin-top: 0px;
	clear: both;}		

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

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


article {font-size: medium;
	border: 1px solid white;
	border-radius:10px;
	margin:20px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;}

	
/* aside - Formatierung	
aside {float: right;
	text-align: center;
	width: 25%;
	display: block;  /* Test
	color:#0F243E;
/*	background-color:#0F243E; */ /*
}*/
	
/* Wie kann grösse verändert werden???
	text-align:center;
		width:25%;
	height:25%;}
/* width="160" height="40" */



footer {background-color:#0F243E;
	clear:left;
	color:#ffffff;
	font-size:large;
	font-style:bold;
	font-weight:bolder;
	padding-bottom:10px;
	padding-top:10px;
	text-align:center;
	width: 100%;}

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

/* Funktioniert - teilweise aber nicht gewünscht Pfeil nach oben /
img:hover {width:200%; height:auto; }
*/

/* Funktioniert - teilweise aber nicht gewünscht Pfeil nach oben /
img:hover {
height: 240px;
width: 240px;
}
*/





<style>
/* Positionierung des Bildes */
#links {
    float:left;
    width: 60px;
    height: 20px;
    margin-left: 20px;
/*    border:1px solid red; */
} 
</style>

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


/* Versuch Zentrierung Text/Inhalt
<style>
#inhalte-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
*/

<style>
div.a {
        text-align: center;
}
</style>


#twitter-timeline {font-size: 5px}
/*.tweet-list {font-size: 5px} */


/* 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: #0F243E url("up-arrow.png") no-repeat center 43%;  
	/* Hintergrundfarbe bei Pfeil kann hier gewechselt werden #0F243E = Dunkelblau */
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
a:hover.back-to-top {
	background-color: #000;
}


/* Bilder vergrössern
#lightbox{
	background-color:#FFFFFF  /* Original-Farbe #eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }



#overlay{ background-image: href="overlay.png"; } /* Funktioniert nicht so - Hintergrund noch Schwarz


* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif) ; /* blank.gif ;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

var loadingImage = 'loading.gif';
	
var closeButton = 'close.gif';