/* Hintergrund für die ganze Seite */
html {
	/* 
	hell grau	=>	background-color:	#CEC3C3; 
	blau		=>	background-color:	#034977; 
	weiss		=>	background-color: 	#FAFAFA; 
	dunkel grau	=>	background-color: 	#676767; 
	rot			=>	background-color:	#E11C1C;
	*/
	background-color: 	#676767; 
}

/* Box Model */
.container {
  max-width: 90%;
  margin: auto;
  padding-top: 30px;
}

/* Helle Hintergrund nur für oberen Teil der Seite */
#BodyBG {
    background: 	url('../format/bg/bg_grau_unten_800.jpg') repeat-x;
    position: 		fixed;
    top: 					0; 
		right: 				0;
    bottom: 			0; 
		left: 				0;
    z-index: 			-1;
}

/* Mitleren Teil mit den hellen Hintergrund */
/*
div#master {
	position:			absolute;
	top:				0px;
	left:				10%;
	width:				80%;
	background-color:	#ffffff;
	padding:			0px;
	border:				0px solid #ff00ff;
}
*/

/* Kopf Wiblingen-Logo oben auf der Seite */
div#logo_wiblingen {
	background-image:	url('../images/kopflogo/logo_wiblingen.png');
	/* background-repeat:	repeat-x; */
	height:				170px;	
	width:				910px;
	margin-top: 		0px;
	margin-left: 		0px;
}

/* Überschrift: Volleyball */
.PageTitel {
	position:				absolute;
	left:						250px;
	top:						60px;
	font-family:		Lobster Two, cursive;
	font-size:			32px;
	font-weight:		bold;
	color:					#FFFFFF;
	line-height:		100%;
	letter-spacing:	4px;
}

/* Menue Unterpunkte */
nav ul {
    padding: 			0px;
    margin: 			0px;
    box-shadow: 		2px 2px 2px #dfdfdf;
    -moz-box-shadow: 	2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}

/* Menue horisontal ausrichten */
nav ul li {
    list-style:			none;
    float:				left;
    border-right: 		1px solid #dfdfdf;
}

/* Menü Hintergrund Farbe, wenn Maus drüber fährt */
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {
    background-color: 	#E6DD00;
}

nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {
    background-color: 	#8CB302;
}

nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
    background-color: 	#008C74;
}

nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
    background-color: 	#004C66;
}

nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
    background-color: 	#676767;
}

/* Buchstaben Menü Farbe */
nav ul li:hover > a {
	color:				#FAFAFA;
}

/* Unterpunkte horizontal anzeigen */
nav ul li:hover > ul {
    visibility:			visible;
}

/* Unterpunkte vertikal anzeigen */
nav ul li ul li {
	float: 				none;
}

/* Menue in einer Zeile ohne Unterpunkte anzeigen */
nav ul li ul {
    display:			inline;
    visibility: 	hidden;
    position:			absolute;
    padding:			0px;
}

/* Menue formatiert */
nav ul li a {
    text-decoration:	none;
    display: 			block;
    /* color: 				#333; */
    color:				#FAFAFA;
	text-align: 		left;
	/* Erste 0-Stelle macht Menütext am oberen Rand, zweite - rechts, dritte - unten, vierte - links */
    /* padding: 			14px 34px 14px 34px; */
	padding: 			0px 0px 0px 2px;
	/* wenn die Breite passt nicht, dann bleibt einen leeren Menüpunkt, abhängig von nav-Breite (1000px) hier oben */
	width: 				127px;
    transition: 		background 0.3s ease-out; 	/* explorer 10 */
    -webkit-transition: background 0.3s ease-out; 	/* chrome & safari */
    -moz-transition: 	background 0.3 ease-out; 	/* firefox */
    -o-transition: 		background 0.3 ease-out; 	/* opera */
}

/* Hintergrund Farbe bei gedrucktem Menü für untere Menüpunkte, wenn Maus drüber ist */
nav ul li ul li a:hover{
	color: 				#333;
	background-color: 	#FAFAFA !important;
	/* background-color: #676767!important; */
}

nav {
	width: 				911px; 
	/* Auch Unterpunkte werden fett angezeigt */
	font-weight: 		bold;
	background-color: 	#6A5A5A;
}
nav ul {
    padding: 			0px;
    margin: 			0px;
    box-shadow: 		2px 2px 2px #dfdfdf;
    -moz-box-shadow: 	2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
}

nav ul:after {
    clear: 				both;
    content: 			" ";
    display: 			block;
    font-size: 			0;
    height: 			0;
    visibility:			hidden;
}

/* Tabellen Überschriften */
.TableTitel {
	position: 		relative;
	top: 			0px;
	left: 			0px;
	height:			40px;
	width: 			400px;
	border:			0px solid #000000;
	background:		url('../images/design/titel_rot_1000.jpg');
	font-family: 	Arial, Helvetica, sans-serif;
	border-radius:	10px;
}

/* Text format Tabellen Überschrift */
.TableText {
	position: 		absolute;
	top: 			12px;
	left: 			10px;
	font-size:		16px;
	color: 			#FFFFFF;
	font-weight:	bold;
	text-align: 	left;
}

/* Alte Variante */
.TitelDesign {
	position: 		relative;
	top: 			0px;
	left: 			0px;
	height:			40px;
	width: 			1000px;
	border:			0px solid #000000;
	background:		url('../images/design/titel_rot_1000.jpg');
	font-family: 	Arial, Helvetica, sans-serif;
}

/* Alte Variante */
.TitelDesignText {
	position: 		absolute;
	top: 			12px;
	left: 			10px;
	font-size:		16px;
	color: 			#FFFFFF;
	font-weight:	bold;
	text-align: 	left;
}



div#navigation {
    clear: 			both;
    margin-left: 	0px;
		margin-top: 0px;
		height:		120px;
}



/* Link a formatieren - kein Unterstrich, schwarz */
a {
    text-decoration: 	none;
    color: 				#000;
}

table {
	border: 			0;
	width: 				1000;
}

/* gerade Zeile */
table tr:nth-child(even){
	background: #fff;
}

/* ungerade Zeile */
table tr:nth-child(odd){
	background: #A5D8E1;
}

.bg-yellow {
  /* background: #fff9dc; */
	background: grey;
}

.card {
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 20px;
	width: 1000;
}