/* Algemeen ------------------------------------------------------------------------------------- */
html { min-height: 100%; position: relative; width: 100%; background: linear-gradient(#00ff00,#00ff00); }
body { margin: 0 0 100px; max-width: 100%; padding: 0; font-size: 1em; font-family: arial; color: #000000}
@media screen and (max-width: 900px) { body {font-size: 1.1em; } } 
#wrapper { min-height: calc(100% - 70px);  margin-bottom: 70px; }

/* Top balk en header -------------------------------------------------------------------------- */
#top_balk { position: relative; width: calc(100%); height: 25px; background: linear-gradient(#ff0000,#f90606);}
#top_balk_content { text-align: right; color: #00ff00; padding: 3px 5px 7px 5px;}
#top_balk_content a { display: block; font-size: 0.9em; text-decoration: none; color: #00ff00; font-weight: bold;}
#top_balk_content a:hover { color: #00ff00;}
@media screen and (max-width: 860px) { #top_balk_content { width: calc(100% - 10px); }}
@media screen and (min-width: 1000px) { #top_balk_content { width: calc(100% - 10px); }}
@media screen and (min-width: 1150px) { #top_balk_content { width: 1090px; margin-left: calc(50% - 550px); }}
#header { position: fixed; width: calc(100%); z-index: 100; height: 115px; text-align: center; background-color: #ff0000; border-bottom: 1px solid #f90606; box-shadow: 0px 5px 8px #f90606;}
#header_content { position: relative; text-align: left; padding: 5px; }
@media screen and (max-width: 860px) { #header_content {  width: calc(100% - 10px);}}
@media screen and (min-width: 1000px) { #header_content { width: calc(100% - 10px);}}
@media screen and (min-width: 1150px) { #header_content { width: 1090px; margin-left: calc(50% - 550px); }}
#logo { position: absolute; top: -25px; left: 10px; width: 134px; height: 130px; border-style: none; }

/* Menu groot ------------------------------------------------------------------------------------- */
@media screen and (max-width: 860px) {
#menu_large { display: none; }
}
@media screen and (min-width: 860px) {
#menu_large { width: calc(100% - 250px); position: absolute; border: 2px solid #00ff00; border-top-style: none; border-left-style: none; border-radius: 8px; cursor: pointer; display: block; height: 30px; padding: 3px 4px 3px; top: 25px; right: 5px;}
#menu_large ul { width: 100%; padding: 0px; margin: 0px; list-style: none; text-align: left;}
#menu_large ul li { float: left; height: 30px; width: calc((100% / 6) - 1px); border-left: 1px solid rgb(180,0,170);}
#menu_large ul li.first { border-style: none; width: calc((100% / 6) +);}
#menu_large ul li a { font-size: 1.1em; color: #00ff00; display: block; height: calc(100% - 5px); text-align: center; text-decoration: none; font-weight: bold; padding-top: 5px; }
#menu_large ul li a:hover { color: #00ff00; text-shadow: 1px 1px #00ff00;}
#menu_large ul li a.actief { color: #00ff00; text-shadow: 1px 1px #00ff00;}
}

/* Menu mobiel ------------------------------------------------------------------------------------ */
#menu_mobiel { position: absolute; border: 2px solid black; border-radius: 3px; cursor: pointer; display: block; height: 30px; padding: 3px 4px 3px; background: linear-gradient(#00ff00,#00ff00); top: 25px; right: 0px; margin-right: 5px; box-shadow: 5px 5px 8px #ff0000;}
#menu_mobiel span { color: #f90606; display: block; font-size: 1.5em; font-weight: bold; margin-top: 2px; float: left; }
#menu_mobiel #strepen {width: 30px; float: right; margin-left: 5px; }
#menu_mobiel #strepen div { background-color: #f90606; border: 1px solid black; border-radius: 2px; height: 3px; margin-top: 4px; margin-bottom: 2px; width: 90%; }
#menu_sluit { height: calc(100% - 225px); width: 100%; position: absolute; top: 225px; left: 0px; display: none; background-color: #ff0000; opacity: 0.3; z-index: 500;}
@media screen and (min-width: 859px) { #menu_mobiel { display: none; } #mobiel_menu { display: none; } }
#mobiel_menu { display: none; }
#mobiel_menu { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; background: linear-gradient(#ff0000,#f90606); }
#mobiel_menu ul { width: 100%; padding: 0px; margin: 15px 0px 0px 0px; text-align: center; list-style: none; }
#mobiel_menu ul li { height: 34px; border-bottom: 1px solid #00ff00; }
#mobiel_menu ul li a { display: block; color: #00ff00; text-decoration: none; padding: 7px; font-size: 1.3em;  }

/* Main (content) ---------------------------------------------------------------------------- */
#main { position: relative; width: calc(100%); padding-top: 125px; padding-bottom: 110px; }
@media screen and (max-width: 860px) { #main_content { width: calc(100% - 10px); padding: 5px; text-align: left;}}
@media screen and (min-width: 1000px) { #main_content { width: calc(100% - 10px); padding: 5px; text-align: left;}}
@media screen and (min-width: 1150px) { #main_content { width: 1090px; margin-left: calc(50% - 550px); padding: 5px; text-align: left;}}
@media screen and (max-width: 860px) { .deel { width: 100%; }}
@media screen and (min-width: 1000px) { .deel { width: 50%; float: left; } .deel:first-of-type { width: calc(50% - 20px); margin-right: 20px;}}
h1 { font-size: 1.5em; color: #000000}
h2 { font-size: 1.3em; color: #a60053;}
span.melding { display: block; padding: 4px; background-color: #00ff00; border: 1px solid #00ff00; color: #f90606; margin-bottom: 5px;}
@media screen and (max-width: 860px) { 
.knop { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: calc(100% - 37px); text-decoration: none; padding: 4px 7px 5px 28px; color: #00ff00; background: linear-gradient(#ff0000,#f90606); border: 1px solid color: #f90606; border-radius: 5px; font-size: 1em; font-weight: bold; margin: 5px 5px 5px 0px;}
}
@media screen and (min-width: 860px) { 
.knop { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative;  text-decoration: none; padding: 4px 7px 5px 28px; color: #00ff00; background: linear-gradient(#ff0000,#f90606); border: 1px solid color: #f90606; border-radius: 5px; font-size: 1em; font-weight: bold; margin: 5px 5px 5px 0px;}
.knop:hover { color: #00ff00; }
}
.knop img { position: absolute; width: 20px; height: 20px; top: 4px; left: 3px; border-style: none; }
a.foto_instellen { position: relative; margin: 5px; }
a.foto_instellen img { border: 1px solid #f90606; }
a.foto_instellen img.keuze { border: 6px solid #f90606; }
a.foto_instellen span { position: absolute; top: -6px; left: -6px; border-radius: 6px; border: 1px solid #f90606; background-color: #f90606; color: #00ff00; font-weight: bold; padding: 3px; }

/* Agenda ------------------------------------------------------------------------------------------ */
@media screen and (max-width: 600px) { .agenda_item { width: calc(100%); margin: 10px 0px 20px 0px; text-align: center;}}
@media screen and (min-width: 601px) { .agenda_item { width: calc(50% - 32px); margin: 15px; text-align: center; float: left; }}
@media screen and (min-width: 1150px) { .agenda_item { width: calc(33% - 32px); margin: 15px; text-align: center; float: left; }}
.agenda_item { border: 1px solid #f90606; color: #000000 box-shadow: 0px 5px 8px #f90606; background: #00ff00;}
.agenda_datum { background-color: #f90606; color: #00ff00; font-weight: bold; }
.agenda_titel { font-size: 1.2em; font-weight: bold; line-height: 1.5em; }

/* Leden ------------------------------------------------------------------------------------------ */
@media screen and (max-width: 650px) { 
.lid { width: calc(100%); display: block; margin: 15px 0px 50px 0px; text-align: right;}
.lid img.lidfoto { width: 30%; min-height: 85px; min-width: 85px; max-width: 120px; max-height: 120px;}
.lid_naam { font-size: 1.2em; font-weight: bold; line-height: 1.5em; padding: 5px; color: #000000}
.tebreed { font-size: 0.85em; line-height: 0.9em;}
}
@media screen and (min-width: 651px) { 
.lid { width: calc(50% - 32px); margin: 15px 15px 40px 15px; display: inline-block;}
.lid img.lidfoto { width: 30%; min-height: 85px; min-width: 85px; max-width: 120px; max-height: 120px;}
.lid_naam { font-size: 1.2em; font-weight: bold; line-height: 1.5em; padding: 5px; color: #000000}
.tebreed { font-size: 0.85em; line-height: 0.9em;}
}
@media screen and (min-width: 751px) { 
.lid { width: calc(50% - 32px); margin: 15px 15px 40px 15px; display: inline-block; }
.lid img.lidfoto { width: 30%; min-height: 85px; min-width: 85px; max-width: 120px; max-height: 120px;}
.lid_naam { font-size: 1.4em; font-weight: bold; line-height: 1.5em; padding: 5px; color: #000000}
.tebreed { font-size: 0.85em; line-height: 0.9em;}
}
@media screen and (min-width: 851px) { 
.lid { width: calc(33% - 32px); margin: 15px 15px 40px 15px; display: inline-block; }
.lid img.lidfoto { width: 30%; min-height: 80px; min-width: 80px; max-width: 120px; max-height: 120px;}
.tebreed { font-size: 0.85em; line-height: 0.9em; display: inline-block;}
}
.lid { border: 1px solid #f90606; text-align: right; box-shadow: 0px 5px 8px #f90606; background: #00ff00; position: relative; text-decoration: none;}
.lid img.lidfoto { border: 1px solid #00ff00; box-shadow: 5px 5px 5px #ff0000; position: absolute; top: -15px; left: 5px; height: auto;}
.lid span { font-weight: bold; display: block; padding: 5px; }
.lid_functie { background: linear-gradient(#ff0000,#f90606); color: #00ff00; font-weight: bold; padding-right: 5px; padding-bottom: 1px;}


/* Muziek ------------------------------------------------------------------------------------------ */
table.muziek { width: 100%; border: 1px solid #00ff00; border-collapse: collapse;}
table.muziek td { padding: 4px; background: linear-gradient(#ff0000,#f90606); border: 1px solid #00ff00;}
table.muziek td a { display: block; text-decoration: none; color: #00ff00; }

/* Footer ------------------------------------------------------------------------------------------ */
#footer { position: absolute; bottom: 0; left: 0; height: 70px; width: 100%; overflow: hidden; background-color: #f90606; color: #00ff00; font-size: 0.7em; padding-top: 10px;}
@media screen and (max-width: 860px) { #footer_content { width: calc(100% - 10px); padding: 5px; text-align: left;}}
@media screen and (min-width: 861px) { #footer_content { width: calc(100% - 10px); padding: 5px; text-align: left;}}
@media screen and (min-width: 1150px) { #footer_content { width: 1090px; margin-left: calc(50% - 550px); padding: 5px; text-align: left;}}
#footer a { color: #00ff00; text-decoration: none; }

/* Formulieren ------------------------------------------------------------------------------------- */
@media screen and (max-width: 860px) { 
.formulier label { color: black; display: block; margin: 3px 0px 3px 0px;}
.formulier input[type=text], input[type=password], input[type=email], input[type=time] { width: calc(100% - 8px); padding: 4px; font-size: 1em; border: 1px solid color: #f90606;}
.formulier select { width: 100%; padding: 4px; font-size: 1em;}
.formulier input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 4px; color: #00ff00; background: linear-gradient(#f90606,#ff0000); border: 1px solid color: #f90606; border-radius: 5px; font-size: 1em; font-weight: bold; margin-top: 5px;}
}
@media screen and (min-width: 860px) { 
.formulier label { color: black; float: left; width: 150px; height: 25px; padding: 2px; margin-bottom: 0px; }
.formulier input[type=text], input[type=password], input[type=email], input[type=time] { width: 400px; float: left; padding: 3px; font-size: 1em; height: 25px; margin-bottom: 3px; border: 1px solid color: #f90606;}
.formulier select { width: 408px; float: left; padding: 3px; font-size: 1em; height: 28px; margin-bottom: 3px; }
.formulier input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 152px; padding: 3px; color: #00ff00; background: linear-gradient(#ff0000,#f90606); border: 1px solid color: #f90606; border-radius: 5px; font-size: 1em; font-weight: bold; margin-top: 5px;}
}
.formulier textarea { font-size: 1em; font-family: "Arial", cursive, sans-serif; width: calc(100% - 2px); min-height: 100px; border: 1px solid #f90606;}

/* Popup ------------------------------------------------------------------------------------------- */
.popup_bg { opacity: 0.85; background-color: black; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999;}
.popup 				 {			 
			 				 position: fixed;
							 top: 30%;
							 left: 50%;
							 margin-top: -75px;
							 margin-left: -150px;
							 width: 300px;
							 height: 325px;
							 border: 1px solid #a8a8a8;
							 background-color: white;
							 padding: 3px;
							 z-index: 1000;
							 }
.popup a.sluiten		{ position: absolute; top: -15px; right: -15px; }
.popup img.sluiten		{ width: 25px; height: 25px; border: none; }
.popup h3			 {
			 				background: linear-gradient(#f90606,#ff0000; 
								font-size: 13px;
								color: #a60053;
								padding: 3px;
								margin: -3px;
							  }