/***-------------------------------------------***/
/***  Flörsheimer Carneval Verein 1928 e.V.    ***/
/***  Vorstand 3.0                             ***/
/***-------------------------------------------***/
/***  CSS für die Homepage                     ***/
/***-------------------------------------------***/

/***********************************************/
/* Allgemein                                   */
/***********************************************/

body {
  /*background-image     : url("images/Alle2.jpg");*/
    font-size            : 10pt;
    margin               : 0;
	background-repeat    : no-repeat;
	background-position  : center;
	background-size      : 100% auto;  /*contain;*/   /*cover;*/ /* Resize the background image to cover the entire container */
	background-attachment: fixed;
	background-color     : white;   /*silver; */
	position             : relative;
	font-family          : 'Open Sans', sans-serif;
}

body, nav, ul, li, a  {
	margin               : 0;
	padding              : 0;
}

a:link, a:active, {
    color                : white;     /*black;*/
    text-decoration      : underline;
}

a:hover {
	color                : LightBlue;
}

a:visited {
  /*color                : orange;*/
}

#meldung {
	display              : block;
	margin               : 20px 0 0 20px;
	max-width            : 700px;
}

.Datentabelle th {
	background-color     : #D0D0D0;
	text-align           : left;
}

.Datentabelle td {
	background-color     : #E8E8E8;
}

.EingabeBlock {
	position             : relative;
	max-width            : 700px;
	height               : auto;
	background-color     : white;
	box-shadow           : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	color                : black;
    border-radius        : 8px;
	margin-left          : 20px;
	margin-bottom        : 20px;
	overflow             : auto;
}

.EingabeBlock > legend {
	font-weight          : bold;
	font-size            : 15px;
}

.EingabeBlock label {
	width                : 11em;
	margin-left          : 10px;
	display              : block;
	float                : left;
}

.locked {
	background-color     : LightGray;
}

.sepa_ja {
	background-color     : #008000;
	color                : white;
}

.sepa_nein {
	background-color     : #FF0000;
	color                : white;
}

.sepa_alt {
	background-color     : yellow;
	color                : black;
}



	
/***********************************************/
/* CSS für den Seitenkopf                      */
/***********************************************/

#Menu {
	position             : fixed;
	width                : 100%;
	z-index              : 999;
}
		
.header {
	overflow             : hidden;
    display              : block;
    margin-left          : auto;
    margin-right         : auto; 
	width                : 100%;
	background-color     : white;
	background-image     : linear-gradient(to right, white, red, blue, yellow);
}

/*** Vereinslogo (Link für HOME) ***/
.Vereinslogo {
	float                : left;
	color                : black;
	text-align           : center;
	padding              : 12px;
	text-decoration      : none;
	font-size            : 18px;
	line-height          : 25px;
	border-radius        : 4px;
	width                : 160px;
	height               : 100px;
	margin : 10px;
	background-image     : url("/images/FCV_Logo.png");
	background-position  : center center;
	background-size      : contain;   /*200px;*/
	background-padding   : 20px;
	background-repeat    : no-repeat;
}

/*** Wenn mit der Maus über das Logo gefahren wird ***/
.header a:hover {
  /*background-color     : darkgrey;*/
	opacity              : 0.6;
}

/*** Wenn auf das Logo geklickt wurde ***/
.header a.active {
	background-color     : dodgerblue;
	color                : white;
}

/*** Vereinsname (kein Link) ***/
.Vereinsname {
	height               : 120px;
	background-repeat    : no-repeat;
    padding-top          : 40px;
	margin-left          : 250px;
}

.Vereinsname > img {
	width                : 100%;
	max-width            : 900px;
	height               : auto;
}

/***********************************************/
/* mobile Version des Seitenkopfes             */
/***********************************************/
@media screen and (max-width: 800px) {

	/* Der Seitenkopf ist nicht mehr fix */
	#Menu {
		position         : relative;
	}	
	
	/* Logo verkleinern       */
	.Vereinslogo {
		width            : 120px;
		height           : 80px;
		background-size  : 100px;
	}

	/* Vereinsname ausblenden */
	.Vereinsname {
		display          : none;
	}

}
	
/***********************************************/
/* CSS für den Seitenkörper                    */
/***********************************************/
#Koerper1 {
	display              : block;
	color                : black;
	background           : rgba(255, 255, 255, 0.6);
   	padding-top          : 160px;
	margin-left          : auto;
	margin-right         : auto; 
	width                : 100%;
	z-index              : 100;
}
	
.Koerper3 {
	display              : block;
	position             : relative;
	width: 100%;
}

/*** Fastnachts-Fahne links und rechts ***/
.Koerper2 {
	display              : block;
	float                : left;
	position             : relative;
	width:100%;
}

#rot {
	border-left          : 15px solid red;
	border-right         : 15px solid red;
}

#weiss {
	border-left          : 15px solid white;
	border-right         : 15px solid white;
}
#gelb {
	border-left          : 15px solid yellow;
	border-right         : 15px solid yellow;
}
#blau {
	border-left          : 15px solid blue;
	border-right         : 15px solid blue;
}

/***********************************************/
/* mobile Version des Seitenkörpers            */
/***********************************************/
@media screen and (max-width: 800px)
	{

	#Koerper1 {
		padding-top      : 0px;
	}
	
	#rot, #weiss, #blau, #gelb {
		border-left      : 0;
		border-right     : 0;
	}
	
}

/***********************************************/
/* CSS für das Menü                            */
/***********************************************/
.container {
    width                : 100%;
    margin-left          : auto;
    margin-right         : auto;
    z-index              : 99999;
}

.nav {
    list-style           : none;
    zoom                 : 1;
    background-color     : DarkGray;
    position             : relative;
    height               : 40px;
    padding-top          : 0;
    padding-left         : 10%;
}
	 
.nav:before,
.nav:after {
    content              : " "; 
    display              : table; 
}

.nav:after {
    clear                : both;
}

.nav ul {
    list-style           : none;
    width                : 300px;  /*9em;*/
}

.nav a {
    padding              : 10px 15px;
    color                : white; /*#fff;*/
    zoom                 : 1;
	text-decoration      : none;
}

.nav > li {
    float                : left;
    border-top           : none; /*1px solid #104336;*/
    z-index              : 200;
    color                : white;
}	

.nav > li > a {
    display              : block;
}

.nav li a:hover {
    background           : grey;
}


.nav li ul {
    position             : absolute;
    left                 : -9999px;
    z-index              : 100;
}
.nav li li a {
    display              : block;
    background           : darkgrey;
    position             : relative;
    z-index              : 100;
    border-top           : 1px solid #175e4c;
}
.nav li li li a {
    background           : brown;   /*#249578;*/
    z-index              : 200;
    border-top           : 1px solid #1d7a62;
}

.nav li {
    position             : relative;
}
.nav > li.hover > ul {
    left                 : 0;
}
.nav li li.hover ul {
    left                 : 100%;
    top                  : 0;
}

.nav > li > .parent {
    background-position  : 95% 50%;
}

input#responsive-nav,
label.responsive-nav-label {
	display              : none;
}

/*** Menupunkt mit Untermenu ***/
.nav li.topmenu2 > a::after {
	position             : relative;
	float                : right;
	content              : '';
	margin-left          : 10px;
	margin-top           : 5px;
	border-left          : 5px solid transparent;
	border-right         : 5px solid transparent;
	border-top           : 5px solid #fff;
	border-bottom        : 5px solid transparent;
}

/***********************************************/
/* Login-Button                                */
/***********************************************/
#login2 {
	padding-right        : 100px;
	float                : right;
}

#login3 {
	padding-right        : 100px;
	float                : right;
}

/***********************************************/
/* mobile Version des Menüs                    */
/***********************************************/
@media screen and (max-width: 800px) {
	
    .nav > li {
        float            : none;
    }
	
    .nav ul {
        display          : block;
        width            : 100%;
    }
	
   .nav > li.hover > ul , .nav li li.hover ul {
        position         : static;
    }

	.nav > li > .parent {
		background-position: 95% 50%;
    }

	label.responsive-nav-label {
		position         : relative;
		display          : block;
		padding          : 20px;
		background       : darkgrey;    /*black*/
		cursor           : pointer;
		color            : #fff;
		width            : 100%;
		margin-left      : 0px;
	}

	label.responsive-nav-label span {
		margin-right     : 10px; 
		width            : 100%;  
	}

	.container {
		position         : absolute;
		top              : -9999px;
		padding          : 10px;
		background       : darkgrey;   /*LighGrey*/
	}
	
	.nav {
		background-color : darkgrey;
		height           : auto;
		padding-left     : 0;
	}
	
	.nav > li > .parent {
		width : 100%;
	}
	
	.nav li li a {
		background       : silver;
	}

	.topmenu1 {
		background       : darkgrey;   /*LighGrey*/
	}

	.topmenu2 {
		background       : darkgrey;   /*LighGrey*/
	}

 	input#responsive-nav[type=checkbox]:checked ~ .container {
		position         : relative;
		top              : 0;
	}
}

/***********************************************/
/* CSS für die Fusszeile                       */
/***********************************************/

#Fusszeile {
	display              : block;
	position             : relative;
	color                : white;
	background-color     : Grey;
/*	top                  : 250px;*/
	margin-left          : auto;
	margin-right         : auto; 
	width                : 100%;
  /*max-width            : 900px;*/
	/*margin               : 10px auto;*/
	height               : auto;
	overflow             : auto;
	padding-left         : 20px;
	padding-right        : 20px;
}

#Fusszeile  a {
  /*color                : white;*/
}

#Fussli {
	float                : left;
}
		
.Fussmi {
	float                : left;
	margin-left          : 20px;
}

#Fussre {
	float                : right;
}

#SocialLinks > div {
	float: left;
}

#Facebook {
	overflow             : hidden;
	margin-top           : 20px;
/*	margin-bottom        : 20px;*/
}

#Facebook a {
 	padding              : 0.5em;
    -webkit-border-radius: 10%;
    -moz-border-radius   : 10%;
    border-radius        : 10%;
}

#Facebook a:hover {
	opacity              : 0.6;
}

#Instagram {
	overflow             : hidden;
	margin-top           : 20px;
/*	margin-bottom        : 20px;*/
}

#Instagram a {
 	padding              : 0.5em;
    -webkit-border-radius: 10%;
    -moz-border-radius   : 10%;
    border-radius        : 10%;
}

#Instagram a:hover {
	opacity              : 0.6;
}

#Sitelock a:hover {
	opacity              : 0.6;
}


/***********************************************/
/* mobile Version der Fusszeile                */
/***********************************************/
@media screen and (max-width: 800px) {
	
	#Fussli {
		float            : none;
	}

	.Fussmi {
		margin-left: 0;
		float            : none;
	}
	
	#Fussre {
		float            : none;
		clear            : left;
		padding-top      : 10px;
	}
	
	#login2, #login3 {
	    clear            : right;
		float            : none;
		padding-right    : 0;
	}

}

/***********************************************/
/* CSS für die Überschrift in allen Masken     */
/***********************************************/
#Ueberschrift {
	margin-left          : 20px;
	font-size            : 24px;
}

/***********************************************/
/* mobile Version der Überschrift              */
/***********************************************/
@media screen and (max-width: 800px) {

	#Ueberschrift {
		display          : none;
		font-size        : 12px;
	}

}

















/****************************************************/
/* Sonderbehandlung für Internet-Explorer 10 und 11 */
/****************************************************/
@media all and (-ms-high-contrast:none) {

	.nav > li > .parent { /* IE10 */
		width            : 90px;
	}

	.mySlides > img {
        width            : auto;
        height           : 300px;
	}

	*::-ms-backdrop,.nav > li > .parent { /* IE11 */
		width            : 90px;
	}

	*::-ms-backdrop,.mySlides > img {
        width            : auto;
        height           : 300px;
	}
}
</style>
	
/*-------------------------------------------------*/
/*-- Sonderbehandlung für Internet-Explorer bis 9 -*/
/*-- ACHTUNG: diesen Kommentar nicht löschen !!   -*/
/*-------------------------------------------------*/
/*[IF IE]> 
<style>
	.nav > li > .parent {
		width            : 90px;
	}

	.mySlides > img {
        width            : auto;
        height           : 300px;
	}
</style>
[ENDIF]/*