* {outline: 0}

/* Style definitions for body and block containers ---------------------------*/

body
  {margin: 0px; 
   padding: 0px;
   background: #EEEEEE;
   font-family: arial;
   color: #013E7D;
   text-align: center}

div.centre      
  {position: absolute;
   text-align: center;
	line-height: 1.25;
   top: 50%;
   left: 50%;
   margin: -265px 0px 0px -480px;
   padding-bottom: 30px;
   width: 960px;
   height: 530px;
	overflow-y: hidden}  

div.flexrow
  {float: left}	
 
div.logo
  {position: relative;
   float: left;
   padding: 0px;
   margin: 0px;
   width: 155px;
   height: 210px;
   text-align: left}
  
div.header
  {position: relative;
   float: left;
   margin: 0px;
   padding: 17px 0px 1px 11px;
   width: 793px;
   height: 33px;
   font-weight: bold;
   letter-spacing: 9px;
   text-align: left}       
 
div.menu
  {position: relative;
	float: left;
   width: 160px;
   height: 160px; 
   text-align: left;
	border-left: 1px solid #EEEEEE;
	z-index: 1;
	overflow: visible;
	background: #EEEEEE}  

div.imagestop
  {position: relative;
   float: left;
   width: 643px;
   height: 159px;
   text-align: left;
	overflow: hidden}      	
	
div.imagesbot
  {position: relative;
   float: left;
   width: 315px;
   height: 320px;
   text-align: left;
	border-right: 1px solid #EEEEEE;
	line-height: 0;
	z-index: 0;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden} 

div.textleft
  {float: left;
   width: 320px;
   height: 300px;
   padding: 10px 0px 10px 0px;
   text-align: left;
	overflow: hidden;
	border-right: 1px solid #EEEEEE}      	
   
div.textright
  {float: left;
   width: 321px;
   height: 320px;
   text-align: left;
	overflow: hidden}  	

div.blue, div.blue-white
  {background-color: #013E7D;
   color: #EEEEEE}  
  
div.grey
  {background-color: #EEEEEE;
   color: #013E7D} 

.hidewhenwide
  {display: none}
  
.marginbot
  {margin-bottom: 20px}  

@media only screen and (max-height: 530px)
{
   div.centre
	  {top: 0;
		margin-top: 0}
}

@media only screen and (max-width: 1000px)
{
   div.centre
	  {top: 30px;
		margin: 0px 0px 0px -317px;
		width:  640px;
		height: 880px;
		overflow-y: visible}
		
	div.header
	  {width: 470px;
	   letter-spacing: 4px}	
			
	div.imagestop
	  {width: 320px} 
		
	div.imagesbot
	  {overflow: visible} 
	  
	div.textleft
	  {margin: 0;
	   height: 621px}
	
	div.textright
	  {width: 320px;
		display: none}  
	  
	div.flyer
	  {display: block;
	   position: absolute;
		top: 531px;
		left: 316px;
		border-top: 1px solid #EEEEEE}	
	  
	.hidewhenwide
	  {display: block}	
}	

@media only screen and (max-width: 680px)
{		
	div.centre
	  {top: 15px;
		max-width: 396px;
		height: auto;
		position: relative; 
      box-sizing: border-box;
      width: 97%;
      margin: 0 auto;
      left: auto;
		overflow: visible} 
		
	div.flexrow
	  {display: flex}
		
	div.logo
	  {flex: none}
	  
	div.header_menu_images
	  {flex: 0 1 auto}
	
	div.header
	  {width: auto;
	   padding: 18px 0px 0px 11px;
	   letter-spacing: 3px;
		font-size: 11px}	
		
	div.menu
	  {position: absolute;
	   top: 209px;
		left: 0px;
		width: 156px;
		margin: 0;
		border-top: 1px solid #EEEEEE;
		border-left: none}
	
	div.imagestop
	  {width: 240px;
	   height: 158px;
		border-left: 1px solid #EEEEEE}
		
	div.imagesbot
	  {width: 155px;
	   height: auto;
	   margin-right: 0;
		overflow-x: hidden;
		flex: none;
		flex-direction: column;
		background-image: url("../Images/background_Kersenbloesem.jpg");
	   background-repeat: repeat} 
	  
	div.textright
	  {height: auto;
	   margin: 0;
		overflow: visible}
	  
	div.textleft
	  {width: auto;
		height: auto;
		padding-bottom: 20px;
		flex: 0 1 auto}
	
	div.flyer
	  {width: 395px;
		top: 725px;
		left: 0px}
		
	div.blue-white
	  {background: #EEEEEE}
}	  

@media only screen and (max-width: 400px)
{   
	html
     {text-size-adjust: none}  

	div.centre
	  {width: 100%;
	   overflow-x: hidden;
		overflow-y: visible}

	div.flyer
	  {width: 100%;
	   height: auto;
	   border-bottom: 1px solid #EEEEEE;
		pointer-events: none}
}    	
                 
/* Style definitions for headings, paragraphs and links ----------------------*/  

h1{font-size: 12.5px;
   font-weight: bold;
   color: #EEEEEE;
   padding: 0px 10px 0px 10px;
   margin: 0px;
   text-transform: uppercase}
   
h1.agenda
  {padding: 0px 10px 0px 0px}   
 
h1.concert
  {padding: 0px 0px 7px 10px} 
  
h1.administratie
  {padding-top: 10px}   
    
p, p.paddingtop, p.nopaddingtop 
  {margin: 0px;
   padding: 8px 10px 0px 10px;
   font-family: arial;
   font-size: 12px}
	
p.paddingtop
  {padding-top: 34px}
	
ul, li
  {margin: 0px;
   padding-right: 10px;
	font-family: arial;
   font-size: 12px}	
  
p.nopadding
  {padding: 0} 
  
p.dank
  {padding-top: 34px}  
  
span.email
  {padding: 0px 10px 2px 10px;
	text-indent: -10px;
	display: block}  
   
a.navlink
  {text-decoration: none;
   color: #EEEEEE}

a.navlinkselected
  {text-decoration: none;
   font-weight: bold;
   color: #013E7D}
   
a.textlink
  {text-decoration: underline;
   color: #AAAAAA} 

a.textlink:hover
  {color: white}  

span.stichting
  {display: inline}  
  
br.linebreak1, br.linebreak2, br.emailbreak, br.contactbreak
  {display: none}  
  
.alert, .notification
  {color: orange;
	font-weight: bold}  
 
.tl
  {font-family: arial;
   color: white}  
	
@media only screen and (max-width: 1000px)
{
	p.paddingbot
	  {padding-bottom: 0px}
	  
	p.paddingtop
	  {padding-top: 8px}
	
	p.nopaddingtop
	  {padding-top: 0} 
	    
}	

@media only screen and (max-width: 680px)
{
	br.linebreak1, br.contactbreak
     {display: inline} 

	span.contactcomma
	  {display: none}
}	

@media only screen and (max-width: 410px)
{
   span.stichting
    {display: none}
	 
	br.linebreak1
     {display: none}   
	  
	br.linebreak2 
     {display: inline}  
}

@media only screen and (max-width: 350px)
{
   br.emailbreak
     {display: inline}  
}		
   
/* Style definitions for menu -----------------------------------------------*/
       
div.sub
  {padding: 0px 0px 0px 24px;
   margin: 0px;
	background: #EEEEEE;} 

div.main
  {font-size: 12px;
   height: 23px;
   padding: 8px 10px 0px 8px;
   border-bottom: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
   color: #EEEEEE;
   background-color: #013E7D}    
   
div.main:hover
  {font-weight: bold}   
   
div.mainselected
  {font-size: 12px;
   height: 23px;
   padding: 8px 10px 0px 8px;
   border-bottom: 1px solid #EEEEEE;
	background: #EEEEEE}        
   
div.mainbluetopselected
  {font-size: 12px;
   height: 22px;
   padding: 8px 10px 0px 8px;
   border-bottom: 1px solid #EEEEEE;
   border-top: 1px solid #013E7D}  
   
div.mainbluebotselected
  {font-size: 12px;
   height: 22px;
   padding: 8px 10px 0px 8px;
   margin: 0px;
   border-bottom: 1px solid #013E7D}    
   
div.left
  {float: left;
   text-align: left}   
  
div.right
  {float: right;
   text-align: right}    

/* Style definitions for Agenda ----------------------------------------------*/
   
div.composer
  {font-size: 12px;
   padding: 12px 0px 0px 10px}  
  
div.composition
  {font-size: 12px;
   padding: 0px 0px 0px 20px;
   font-weight: bold}   
   
span.opus
  {font-weight: normal}    
   
/* Style definitions for Marktdagconcerten -----------------------------------*/

div.md_left
  {margin: 0px;
   padding: 0px 10px 0px 10px;
   width: 145px;
   font-family: arial;
   font-size: 12px;
   font-weight: bold;
   float: left}
   
div.md_right
  {margin: 0px;
   padding: 0px 10px 0px 10px;
   width: 125px;
   font-family: arial;
   font-size: 12px;
   float: left}   
   
/* Style definitions for pictures --------------------------------------------*/

img.BeleefKerkrade
  {float: left;
	width: 85px;
   padding: 0 10px 2px 0}

img.topleft
  {float: left;
   border-right: 1px solid #EEEEEE}  
  
img.topmiddle
  {float: left;
   border-right: 1px solid #EEEEEE} 

img.smalltopmiddle
  {float: left;
   display: none} 	

img.corner
  {float: left;
   width: 160px;
	height: 160px}		
  
img.botleft
  {float: left;
   width: 155px;
	height: 320px;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	order: 1}
	
img.botright
  {float: left;
   width: 159px;
	height: 320px;
	border-bottom: 1px solid #EEEEEE;
	order: 2}	
	
img.corner.large
  {float: left;
   width: 315px;
	height: 320px;
	order: 3}
  	
img.borderbottom
  {border-bottom: 1px solid #EEEEEE}       

img.noborder
  {margin: 0px}

img.block
  {display: block}
  
img.flyer
  {width: 321px;
   height: auto;
	border-bottom: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE} 

img.flyerportrait
  {width: 255px;
   height: 320px;
	border-bottom: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE} 		

@media only screen and (max-width: 1000px)
{
	img.smalltopmiddle
	  {display: block}
}	

@media only screen and (max-width: 680px)
{
	img.topleft
     {margin-right: 0} 
	
	img.botleft
     {display: none} 	
	  
	img.botright
     {width: 155px;
	   height: 318px;
	   order: 1}  

	img.corner
	  {width: 155px;
	   height: 155px;
		border-top: none;
		border-bottom: 1px solid #EEEEEE}
		
	img.corner.large
	  {order: 2}
		
	img.flyer, img.flyerportrait
	  {width: 395px;
	   height: auto;
	   flex: 0 1 auto}	
}

@media only screen and (max-width: 400px)
{
   img.botleft
     {height: 320px;
	   order: 3;
		border-bottom: 1px solid #EEEEEE} 
		
	img.flyer
	  {width: 100vw}		
}	

/* Style definitions for mailing list form -----------------------------------*/ 

div.form
{width: 100%}

form
  {margin: 20px 10px 26px 10px}

label
  {font-family: arial;
	font-size: 12px;
	font-weight: bold;}

input[type="text"]
  {font-family: verdana;
	padding: 7px;
	width: calc(100% - 16px);
	margin: 2px 0 8px 0;
	background: #EEEEEE;
	border: 1px solid #013E7D}
	
input[type="submit"]
  {margin-top: 4px;
   width: 160px;
	height: 31px;
	background: #AAAAAA;
	border: none}
	
input[type="submit"]:hover
  {background: orange}	
  
@media only screen and (max-width: 365px)
{
	input[type="submit"]
	  {width: calc(100% - 2px)}
}	
	
#age, #gender, #surname
  {display: none}