body,html {
width:100%;
height:100%;
margin:0px;
color:#000;
font-size : 14px;
text-decoration : none;
font-family: Arial, sans-serif;
font-weight: normal;
font-style: normal;
background-color:#fff;

}

p {
margin:0px;
}

img {
border:0px;
margin:0px;
}

#content h4 {
font-family:'Open Sans Condensed';
font-size:26px;
color:#f8a81b;
font-weight:700;
letter-spacing:1px;
}


#logo {
		position:absolute;
		top:0px;
		left:0px;
		z-index:10;
}

#header {
width:100%;
height:50px;
text-align:right;
z-index:1;
font-family:'Open Sans Condensed',sans-serif;
font-weight:700;
background-color:#e7e7e7;
}

#header-content {
margin:auto;
height:50px;
text-align:right;
z-index:1;
line-height:50px;
overflow:hidden;
color:#555;
}

#header-content a {

text-decoration:none;
margin-left:20px;
margin-right:20px;
color:#555;
}

#bar {
width:100%;
height:400px;	
background:url(../topimage/rotarydokkum.jpg) no-repeat center center fixed;
background-size:cover;
border-bottom:1px solid #eee;
}

#homelink {
height:50px;
width:50px;
background-color:#009785;
float:left;
text-align:center;
}


#menu {
width:100%;
min-height:70px;
z-index:1;
border-top:1px solid #ccc;
border-bottom:2px solid #ccc;
background-image:url(../images/menubg.png);
font-size:16px;
}

#menu-content {font-family:'Open Sans Condensed';line-height:30px; overflow:hidden;text-align:left;margin-top:20px;} 
#menu-content ul { margin:0px;padding:0px;list-style:none;margin:0px 0px 0px 260px;} 
#menu-content ul li { -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;float:left; text-align:left; width:170px;white-space: nowrap;margin:0px;padding-left:20px;}
#menu-content ul li a{ font-weight:700;text-decoration:none;float:left; width:170px; display:block; cursor: pointer; cursor: hand; color:#585858; display:block; white-space: nowrap;font-weight:700;}
#menu-content ul li a:hover{ text-decoration:none;text-decoration:none; color:#00246c; display:block; }
#menu-content ul li.selected a{ text-decoration:none;text-decoration:none; color:#00246c; display:block;background-color:#009785; }


.submenu {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	position:absolute;
	left:0px;
	float:left;
	width:100%;
	min-height:100px;
	background-image:url(../images/transp1.png);
	z-index:2;
	font-family:'Open Sans Condensed';
	line-height:30px; 
	font-size:18px;
	
	text-align:left;
	margin-top:20px;
	padding-left:260px;
	padding-bottom:30px;
	padding-top:10px;
	border-bottom:1px solid #dedcdc;
}

.submenu ul {margin:0px;padding:0px;list-style:none;margin:0px;float:left;border-left:1px solid #ccc;}
.submenu ul li { -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;float:none; text-align:left; width:170px;white-space: nowrap;margin:0px;padding-left:20px;}
.submenu ul li a{ font-weight:300;text-decoration:none;float:left; width:170px; display:block; cursor: pointer; cursor: hand; color:#585858; display:block; white-space: nowrap;}
.submenu ul li a:hover{ text-decoration:underline; color:#00246c; display:block; }
.submenu ul li.selected a{ text-decoration:underline; color:#00246c; display:block;background-color:#009785; }

.hide {
	display:none;
}

#wrapper {
max-width:1250px;
margin:1px auto auto auto; 
background-color:#fff;
}


#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;
padding:20px;
text-align:left;

color:#000;
max-width:1250px;
width:100%;
margin:auto;
line-height:1.5em;
}

#content h1 {
font-family:'Open Sans Condensed';
font-size:26px;
color:#00246c;
font-weight:700;
letter-spacing:1px;
}

#content a {
color:#00246c;
text-decoration:none;
}

#content a:hover {
color:#00246c;
text-decoration:underline;
}


#footer {
width:100%;
min-height:100px;
margin-top:1px;
line-height:20px;
background-color:#f2f2f2;
background-color:#212121;
border-top:1px solid #e5e5e5;
color:#aaa;
}

#footer h1 {
font-size:18px;
color:#aaa;
font-weight:700;
}

#footer a {
color:#aaa;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

#searchbox {
border:1px solid #ccc;
background-color:#eee;
width:210px;
height:22px;
margin:0px;
float:left;
padding: 0px 0px 0px 10px;
}

#searchfield {
width:250px;
background-image:url(../images/zoeken.png);
overflow:hidden;
float:right;
text-align:left;
margin:15px 17px 7px 30px;

}

.invoerveld {
background-color:#f0f0f0;
border:2px solid #58585a;
width:200px;
color:#555;
font-weight:300;
border-radius:5px;
height:24px;
}

.submitbutton {
background-color:#003369;
border:1px solid #fee098;
width:200px;
color:#fff;
}

.bottommenu {
margin:auto;
max-width:1250px;
padding:20px;
font-weight:300;
font-size:14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;

}

hr {
border:none;
border-top:1px dashed #c0c0c0;
height:1px;
color:#fff;
background-color:#fff;
}

h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}

.agenda-item {
margin-left:20px;
}

h2 {
font-size:18px;
font-weight:700;
letter-spacing:2px;
}

#help {
width:200px;
color:#555;
background-color:#e7e7e8;
font-size:14px;
line-height:1.8em;
float:right;
padding:20px;
}

#menubar_mobile {
	display:none;
}
#mobilemenu {
		display:none;
}

.loginbox {
	border:1px solid #eee;
	-webkit-box-shadow: 4px 2px 18px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 2px 18px -1px rgba(0,0,0,0.75);
	box-shadow: 4px 2px 18px -1px rgba(0,0,0,0.75);
	margin:auto;
	max-width:500px;
	padding:10px;
}

.loginbox h2 {
	border-bottom:1px solid #ccc;
	
	line-height:3em;
	font-size:26px;
}

.loginbox .invoer {
	margin:10px;
	width:calc(100% - 20px);
	height:30px;
	font-size:18px;
	border:0px;
	border-bottom:1px dashed #ccc;
	background-color:#fff;
	color:#888;
}

.loginbox .onthouden {
	margin-left:20px;
}

.loginbox .loginbutton {
	float:right;
	margin:0px 20px 10px 0px;
	border:1px solid #ccc;
	background-color:#004a91;
	color:#fff;
	padding:5px 30px 5px 30px;
	font-size:18px;
	border-radius:5px;
}

.show {display:block !important;}

.naw {
	float:right;
	width:250px;
	color:#555;
	padding:0px 10px 10px 10px;
	line-height:1.8em;
	color:#aaa;
}

.naw h2 {
	color:#555;
	font-weight:700;
	letter-spacing:0px;
	color:#aaa;
}

.ondermenu {
	float:left;
	width:250px;
	color:#555;
	padding:0px 10px 10px 10px;
	line-height:1.8em;
	color:#aaa;
}

.ondermenu h2 {
	color:#555;
	font-weight:700;
	letter-spacing:0px;
	color:#aaa;
}

fieldset {
	width:calc(80% - 20px);
}


.nieuwskop {
font-size:18px;
color:#005daa;
border-bottom:1px dashed #c0c0c0;
line-height:32px;
clear:both;
margin-top:30px;
font-weight:bold;
}

.nieuwsdatum {
font-size:11px;
color:#a0a0a0;
font-weight:normal;
}

.nieuwsitem {
padding:20px;
}


.nieuwsitem h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#00246c;
font-weight:700;
letter-spacing:0px;
}

.nieuwsitem h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}


.nieuwsitem h3 img{
vertical-align: middle;
}

.nieuwsbox {
width:calc(33% - 42px);
margin:10px 20px 10px 20px;
float:left;
overflow:hidden;
}

.nieuwsbox h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#00246c;
font-weight:700;
letter-spacing:0px;
}

.nieuwsbox h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}

.nieuwsbox h3 img{
vertical-align: middle;
}

.nieuwsbox img {
max-width:100%;
height:auto !important;
}

.nieuwsbox2 {
width:calc(33% - 22px);
height:240px;
margin:20px 0px 20px 10px;
float:left;
overflow:hidden;
position:relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;
padding:10px;
background:url(../images/rotarynieuws.jpg) no-repeat;
background-size:100%;
}



.nieuwsbox1 {
width:calc(33% - 22px);
height:260px;
margin:0px 0px 20px 10px;
float:left;
overflow:hidden;
position:relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;
border-top:2px solid #fff;
border-left:2px solid #fff;
padding:10px;
}

.nieuwsbox1:hover {
box-shadow: 5px 5px 5px #aaa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;
cursor:pointer;
border-top:1px solid #fff;
border-left:1px solid #fff;
}

.nieuwsbox1 h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#00246c;
font-weight:700;
letter-spacing:0px;
}

.nieuwsbox1 h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}

.nieuwsbox1 h3 img{
vertical-align: middle;
}

.nieuwsbox1 img {
max-width:100%;
height:auto !important;
}

.nieuwsbox .more {
text-align:right;
margin-top:16px;
}


.fotobox {

}
	
		
.fotobox h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#00246c;
font-weight:700;
letter-spacing:0px;
}

.fotobox h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}

.fotobox h3 img{
vertical-align: middle;
}

.fotoboekthumb {
margin:0px;
height:80px;
width:auto;	
}


.quicknieuws {
	width:280px;
	float:right;
}

.quicknieuwsbox hr {
	border:none;
	border-left:50px solid #f8a81b;
	height:3px;
	background-color:#eee;
}

.quicknieuwsbox h2 {
font-family:'Open Sans Condensed';
font-size:16px;
color:#00246c;
font-weight:700;
letter-spacing:0px;
}

.quicknieuwsbox h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px;
line-height:20px;
padding:0px 0px 4px 0px;


}


.quicknieuwsbox h3 img{
vertical-align: middle;
}

.agendabox {
width:calc(33% - 42px);
margin:10px 20px 10px 20px;
float:left;
overflow:hidden;
height:200px;
position:relative;
overflow:hidden;

}

.agendabox h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#f8a81b;
font-weight:700;
letter-spacing:0px;
}

.agendabox h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}



.agendabox1 {
overflow:hidden;
position:relative;
overflow:hidden;
padding-bottom:20px;
margin-right:20px;
margin-left:20px;
}

.agendabox1 h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#f8a81b;
font-weight:700;
letter-spacing:0px;
}

.agendabox1 h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}

.agendabox1 h3 img{
vertical-align: middle;
}

.agendabox1 .datum {
width:60px;
height:60px;
text-align:center;
float:left;
margin:40px 20px 20px 0px;
font-size:26px;
color:#000;
padding:30px 0px 0px 0px;
background-image:url(../images/calendar.png);
background-repeat:no-repeat;
position:relative;
}

.agendabox1 .datum .maand {
position:absolute;
top:3px;
width:100%;
text-align:center;
font-size:9px;
color:#fff;
}


.agendaitem {
position:relative;
overflow:hidden;
padding-bottom:20px;
}

.agendaitem h2 {
font-family:'Open Sans Condensed';
font-size:20px;
color:#00246c;
font-weight:700;
letter-spacing:0px;
}

.agendaitem h3 {
font-size:14px;
color:#bbb;
padding:0px;
margin:0px 0px 5px 0px;
line-height:20px;
}

.agendaitem h3 img{
vertical-align: middle;
}

.agendaitem .datum {
width:60px;
height:60px;
text-align:center;
float:left;
margin:40px 20px 20px 0px;
font-size:26px;
color:#000;
padding:30px 0px 0px 0px;
background-image:url(../images/calendar.png);
background-repeat:no-repeat;
position:relative;
}

.agendaitem .datum .maand {
position:absolute;
top:3px;
width:100%;
text-align:center;
font-size:9px;
color:#fff;
}

.aanmeldknop {
position:absolute;
bottom:0px;
left:10px;
width:150px;
height:35px;
border:1px solid #019fcb;
background-color:#fff;
font-size:12px;
margin:5px;
color:#019fcb;
cursor:pointer;
}


.navknop {
width:150px;
height:35px;
border:1px solid #019fcb;
background-color:#fff;
font-size:12px;
margin:5px;
color:#019fcb;
cursor:pointer;
}

 @media screen and (max-width: 1200px)  {
#menu {font-size:14px;}
.submenu {font-size:14px;padding-left:100px;}	
.submenu ul li { -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;float:none; text-align:left; width:120px;white-space: nowrap;margin:0px;padding-left:20px;}
#menu-content ul { margin:0px;padding:0px;list-style:none;margin:0px 0px 0px 100px;} 
#menu-content ul li { -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;float:left; text-align:left; width:120px;white-space: nowrap;margin:0px;padding-left:20px;}
#logo img {width:50%;height:50%;margin-top:40px;}
 }
 
 
@media screen and (max-width: 799px)  {
#menu {min-height:80px;}
#menubar_mobile {display:block;background-color:#fff;line-height:40px;color:#555;}
#menubar_mobile a, #menubar_mobile a:hover {color:#555;text-decoration:none;display:block;}
#content {margin-left:0px;float:none;width:100%;}
#menu-content {display:none; }
#mobilemenu {float:none;text-align:left;width: auto;padding-right:20px;height:auto;padding-bottom:10px;clear:both;}
#mobilemenu {display:none;}
#mobilemenu {width:auto;margin:0px;padding:0px;}
#mobilemenu li { display:block; float:none; text-align:left; padding:0px;color:#333;border-top:1px solid #ccc;border-bottom:0px;background-color:#eee; }
#mobilemenu li a{ text-decoration:none;float:none; padding:10px 20px 10px 20px; display:block; cursor: pointer; cursor: hand; color:#333; background-color:#eee;display:block; }
#mobilemenu li a:hover{ text-decoration:none;text-decoration:none; padding:10px 20px 10px 20px; color:#fff;  display:block;background-color:#c0c0c0;}
#topmenu {display:none;}
.naw {float:left;}	
#logo img {width:50%;height:50%;margin-top:35px;}
#help{display:none;}
.quicknieuws{display:none;}
.nieuwsbox {width:calc(100% - 10px);margin:10px 5px 10px 5px;float:none;overflow:hidden;}
.nieuwsbox1 {width:calc(100% - 10px);margin:10px 5px 10px 5px;float:none;overflow:hidden;}
.nieuwsbox2 {width:calc(100% - 10px);margin:10px 5px 10px 5px;float:none;overflow:hidden;}
.agendabox {width:calc(100% - 10px);margin:10px 5px 10px 5px;float:none;overflow:hidden;height:auto;}
.aanmeldknop {position:relative;}
#bar {background-attachment:scroll;}
.submenu {display:none !important;}
#content img {max-width:100%;height:auto !important;}
}