/* CSS code voor de Cypres11 website */
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td { 
margin:0;
padding:0;
}
/* einde reset */

/* Gebruikte kleurenpalet via colorblender 
#467896 paarsachtig blauw, 
#6BB5E3 lichtblauw,
#969696 grijs ,
#6969b6 paars
#968047 lichtbruin,
#2B4281 grijsblauw,
#33cc33 groen,
#99ff33 lichtgroen,

	
*/



/* algemene styling*/

*{font-family: 'verdana', sans-serif;}

body {
background-color:blue;
}

div {
background-color:#6BB5E3;/*licht blauw - #6BB5E3*/
padding:5px;/*  */
border-right:solid 1px #333;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
border-left:solid 1px #333;
margin: 0 10px;

}




#header1{
color: #000099;
font-weight:600;}

a {
text-decoration: underline;
}

/* einde algemene styling*/

/* styling navigatiebalk */

#navigation {
background-color:#969696;/*grijs*/
}

/*----- Het Menu -----*/
.menu {
padding:10px 18px;
}

.menu ul {
display:inline-block;
}
 
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:18px;
} 
 
.menu a {
color:black;
text-decoration:none;
}
 
.menu a:hover {
text-decoration:none;
color:lightblue;
}

/*----- Menu voor mobiele gebruikers -----*/
@media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}

.menu ul.menubar {
display:none;
}
 
.menu ul {
position:absolute;
top:100%;
left:0px;
padding:10px 50px 10px 20px;
box-shadow:0px 1px 1px #000;
border-radius:3px;
background:#333;
}

.menu li {
margin:10px 0px;
float:none;
display:block;
}
 
.menu a {
display:block;
text-decoration: underline;
}}


/*----- Uitklap knop verbergen voor niet mobiele gebruikers -----*/

.togglebutton {
display:none;
}

/*----- Uitklap knop voor mobiele gebruikers -----*/
@media screen and (max-width: 860px) {
.togglebutton {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px #000;
border-radius:3px;
background-color:#333;
text-shadow:2px 2px 2px #444;
color:#111;
font-size:20px;
} 
}
/* einde styling navigatiebalk */


/* styling welkom gebied */

#welkom {
background-color:#ffffff;/*licht purple*/
padding:5px;
border-right:solid 1px #333;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
border-left:solid 1px #333;
margin: 0 10px;
}
/* einde styling welkom gebied */


/* styling mededelingen  gebied */
#mededeling {
background-color:green;
padding:5px;
border-right:solid 1px #333;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
border-left:solid 1px #333;
margin: 10px 10px;

}

#mededeling ul {
padding: 20px;

font-size: 18px;
}

#mededeling a {
text-decoration: underline;
}

/* einde styling mededelingen gebied */



/* styling alinea teksten */
p {
font-size:18px;
line-height:20px;
margin: 5px 5px 15px 5px;
color:#000;
}
/* einde styling alinea teksten */

/* styling kopteksten */
h1, h2, h3, h4, h5, h6 {
margin: 5px 5px 15px 5px;	
}

h1 {
font-size:40px;
}

h2 {
font-size:30px;		
}

h3 {
font-size:24px;	
}

h4 {
font-size:20px;	
}

h5 {
font-size:19px;		
}

h6 {
font-size:12px;	
}
/* einde styling kopteksten */

/* styling header */
header {
background-color:lightgreen;/**/
border-bottom:solid 1px #333;
margin-bottom: 10px;
padding:20px 0;
}
header h5 {
font-size: 14px;
}
header img {
width:70px ;
height:90px; 
padding:20px 20px;
align:right;}

#green{
	background-color:lightgreen ;
color: #3DD91E;
}

#blue{
	 background-color:lightblue;
color: #3DD91E;
}






/* einde styling header */

/* styling header en footer koptekst */
header h1, footer h5 {
color:#3DD91E;
/*text-shadow: 2px 2px 2px #000;*/
margin:5px;
}

/* Styling header tekst voor mobiel*/
@media screen and (max-width: 900px) {
header h1 {
font-size: 24px;
}


/* einde styling header en footer koptekst */

/* styling footer */
footer {
/*background-color:#969696;*/
background-color:stateblue;/**/
border-top: solid 1px #333;
text-align:left;
color: white;
padding:20px 0;
}
/* einde styling footer */

/* styling verticaal menu rechts */
.menu-right {
padding: 40px;
color: white;
border-radius:5px;
box-shadow: 1px 2px 2px #333;
background-color:#ccccff;	
/*background-color:#ccccff;/**/
}

.menu-right h3 {
display:block;
background-color:black; 
color:white;
text-shadow: 1px 1px 1px #666;
padding:10px;
margin:-20px -20px 20px -20px;
border-radius: 5px 5px 0 0;
}

ul.menu-items-right  {
list-style-type:none;
color: white;
}

.menu-items-right li {
margin: 10px 0;
color: white;
}

.menu-items-right a {
color:#333;
text-decoration:none;
display:block;
border-bottom: dashed 1px #666;
}

.menu-items-right a:hover {
color:#ff6600;
text-decoration:underline;
}

.menu-items-right a:visited {
color:black;
}

/* einde styling verticaal menu rechts */