html {
	font-size: 90%; /* 90% @ 1024x768 | 150% @ 1920x1080 */
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: #23a4da;
	background-image: url('../images/bg20.jpg');
	background-size:100% 100%;
	background-repeat: no-repeat;

	font-family: Tahoma, Geneva, sans-serif;
	overflow-y: hidden ! important;
	overflow-x: hidden ! important;
}

ul {
	list-style: none;
}

.roundabout-holder {

	margin-left: auto;
	margin-right: auto;
	margin-top: 10em;
	height: 10em;
	width: 30em;	  
}

.roundabout-moveable-item {
	height: 25em;
	width: 50em;
	cursor: pointer;
}

.roundabout-in-focus {
	cursor: auto;
}


#siteLoading {
	width: 5em;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10em;
	
	
}

#container {
	display: none;
}

.unclickable {
	width: 52em;
	height: 28em;
	position: inherit;
	z-index: 3000;
	background-image: url('../images/transparent.png');
}

#boxlabel {
	position:relative;
	z-index: -1;
	margin-top: 1em;
	float: left;
	border: 0px solid red;
	width: 2em;
	height: inherit;
	
	background-repeat: no-repeat;
	background-size: 2em;
}


.dd-beschrijving {
	background-color: black;
	color: white;
	position: absolute;
	z-index: 1500;
	font-size: 80%;
	text-align: justify;
	float: left;
	width: 19.5em;
	margin: 1.5em;
	padding: 0.7em;
	border: 1px solid white;
	/* opacity */
	opacity:0.5;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	/* Border radius */
	border-radius: 0.4em;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
}

.dd-beschrijving h3 {
	margin: 0;
	padding: 0;
	margin-bottom: 0.4em;
	font-weight: bolder;
	font-size: 120%;
}

.menu_link {
	cursor: pointer;
	color: white;
	border: 0.2em solid white;
	font-weight: bolder;
	padding: 0.2em 0.5em;
	text-decoration: none;
	border-radius: 0.3em;
	-moz-border-radius:0.3em;
	-khtml-border-radius:0.3em;
	
	transition: color 200ms, background-color 200ms;
	-o-transition: color 200ms, background-color 200ms;
	-moz-transition: color 200ms, background-color 200ms;
	-webkit-transition: color 200ms, background-color 200ms;
	
}

.menu_link:hover {
	
	background-color: white;
	color: black;
	
	transition: color 200ms, background-color 200ms;
	-o-transition: color 200ms, background-color 200ms;
	-moz-transition: color 200ms, background-color 200ms;
	-webkit-transition: color 200ms, background-color 200ms;
}

.menu_link_active {
	background-color: white;
	color: black;
	cursor: pointer;
	border: 0.2em solid white;
	font-weight: bolder;
	padding: 0.2em 0.5em;
	text-decoration: none;
	border-radius: 0.3em;
	-moz-border-radius:0.3em;
	-khtml-border-radius:0.3em;
}

#social_media {
	float: right;
	margin-top: -3.3em;
}

.box {
	float: left;
	background-color: #fbfbfb;
	color: #000;
	height:inherit;
	width: 50em;
	padding: 1em;
	border-radius: 0.4em;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
	border: 1px solid #999;
	/* Shadow */
	
}

#topmenu {
	position:relative;
	z-index: 10;
	margin-left: auto;
	margin-right: auto;
	border-top: 0.2em solid white;
	width: 95%;
	color: white;

	padding: 1em 1.5em 2em 1.5em;

}

#footer {
	
	
	position: absolute;
	bottom: 1.5em;
	right: 1.5em;
	width: 15em;
	text-align: right;
}

.boxshadow {
	position: inherit;
	z-index: -2;
	margin-top: 23em;
	margin-left: -1.8em;
	width: 60em;
	height: 10em;
	/* background-size:cover;
	background-image: url('../images/shadow.png');	 */
}

.boxshadowIMG {
	margin-left: -2.5em;
	margin-top: 0;
	width: 100%;
	height: 100%;
}

.boxheader {
	position: inherit;
	margin-top: -4.5em;
	z-index: 200;
	margin-left: 0.3em;
}

.boxheader_offset {
	position: inherit;
	margin-top: -3.8em;
	z-index: 200;
	margin-left: 0.3em;
}

img.header {
	height: 4em;
	margin-top: 1.5em;
}

iframe {
	border: 1px solid black;
	-moz-box-shadow: 3px 3px 6px #606060;
	-webkit-box-shadow: 3px 3px 6px #606060;
	box-shadow: 3px 3px 6px #606060;
	width: 23.374em;
	height: 13.148em;
}

.photobox {
	vertical-align: top;
	text-align:center;
}


#videothumbnail:hover {
	cursor: pointer;
	opacity:0.4;
	filter:alpha(opacity=40);
	
	transition: opacity 200ms;
	-o-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-webkit-transition: opacity 200ms;
}

.photothumb {
	width: 16%;
	cursor: pointer;

	
}

#photography .wide {
	height: 6.1em;
}

#photography .high {
	width: 6.1em;
}

.photothumb:hover {
	opacity:0.4;
	filter:alpha(opacity=40); /* For IE8 and earlier */
	
	transition: opacity 200ms;
	-o-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-webkit-transition: opacity 200ms;
}

#vimeoplayer {
	border: 0;
}

#digitaldesign .thumbnail {
	width: 16em;
	height: 8em;
	border: 1px solid black;
	cursor: pointer;
}

.thumbnail {
	width: 11.687em;
	border: 1px solid black;
	cursor: pointer;
	
	transition: box-shadow 200ms;
	-o-transition: box-shadow 200ms;
	-moz-transition: box-shadow 200ms;
	-webkit-transition: box-shadow 200ms;
}

.thumbnail_offline {
	width: 11.687em;
	border: 1px solid black;
	cursor: mouse;
}

.thumbnail:hover {
	
	-moz-box-shadow: 3px 3px 6px #606060;
	-webkit-box-shadow: 3px 3px 6px #606060;
	box-shadow: 3px 3px 6px #606060;
	
	transition: box-shadow 200ms;
	-o-transition: box-shadow 200ms;
	-moz-transition: box-shadow 200ms;
	-webkit-transition: box-shadow 200ms;
}

.thumbnail_photography {
	width: 4.5em;
	height: 3.5em;
	border: 1px solid black;
	/*-moz-box-shadow: 3px 3px 6px #606060;
	-webkit-box-shadow: 3px 3px 6px #606060;
	box-shadow: 3px 3px 6px #606060;*/
}

.thumbtekst {
	font-size: 0.625em;
	border: 0px solid #ddd;
	padding-left: 0.2em;
	padding-right: 0.4em;
	height: 9em;
	width: 25%;
	vertical-align: top;
}

#postzegel {
	display: block;
	position: absolute;
	z-index: 500;
	width: 9.375em;
	right: 1em;
	top: 0.8em;
}


#wulkie /*cloud1*/ {
 /* simple box */
 position: fixed;
 z-index: 100;
 top:4em;
 cursor: default;
}

#cloud2 {
 /* simple box */
 position:absolute;
 z-index: 100;
 top:8em;
 
}

.cloud {
	left:-200px;
 width:175px;
 height: 100px;
 line-height:3em;
 white-space:nowrap;
 padding:0.5em;
 cursor: default;
}

/*Javascript overlay
#######################################*/
	

	
#contact_postcard {
		height: 21em;
		width: 34.5em;
		float: right;
		padding: 2em;
		background-color: white;
		border-radius: 0.4em;
		-moz-border-radius:0.4em;
		-khtml-border-radius:0.4em;
}
	
	#contact_socialmedia {
		height: 23em;
		text-align: center;
		width: 10.5em;
		float: left;
		padding: 1em;
		background-color: white;
		border-radius: 0.4em;
		-moz-border-radius:0.4em;
		-khtml-border-radius:0.4em
	}
	
	.about_image {
		height: 8.25em;
	}

	#toggleKruisje {

	position: relative;
	z-index: 1500;
	background-color: white;
	color: black;
	float: right;
	cursor: pointer;
	width: 6.5em;
    height: 2em;
	text-align: left;
	padding-top: 5.7em;
	padding-left: 0.8em;
	
	
	font-size: 50px;
	
    border-radius: 30%;
	margin-right: -5.5em;
	margin-top: -5.5em;
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}

#toggleKruisje:hover {
	background-color: black;
	color: white;
}
	
	#blackout {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1000;
		opacity:0.7;
		filter:alpha(opacity=70); /* For IE8 and earlier */
		 cursor: default;
	}
	
	
	
#blackoutPage {
	top: 50%;
		margin-top: -12.5em;
		left: 50%;
		margin-left: -27em;
		position: absolute;
		width: 52em;
		height: 25em;
		color: black;
		background-color: white;
		z-index: 1100;
		display: block;
		border: 1px solid black;
		padding: 1em;
		border-radius: 0.4em;
		-moz-border-radius:0.4em;
		-khtml-border-radius:0.4em;
		overflow: hidden;
}

#blackoutImage {
		top: 50%;
		left: 50%;
		position: absolute;
		z-index: 1100;
}

.blackboxImage {
	/*width: 500px;*/
}

#pictureDescription {
	background-color: white;
	color: black;
	padding: 5px;
}
	
	#photooverlay {
		text-align: left;
		top: 50%;
		left: 50%;
		position: absolute;
		padding: 0;
		background-color: white;
		z-index: 1100;
		border-radius: 0.4em;
		-moz-border-radius:0.4em;
		-khtml-border-radius:0.4em;
	}
	
	#overlay_image {
		padding: 10px 10px 0 10px;
	}
	
	#prvimg {
		display: none;
		cursor:pointer;
		margin-top: 6em;
		float: left;
		width: 71px;
		height: 53px;
		position: absolute;
		z-index: 1200;
	}
	
	#nxtimg {
		
		display: none;
		cursor: pointer;
		margin-top: 6em;
		right: 0;
		float: right;
		width: 71px;
		height: 53px;
		position: absolute;
		z-index: 1500;
	}
	
	#loading {
		margin-left: 49%;
		margin-top: 49%;
		display: block;
		position: absolute;
		index-z: 1200;
		width: 50px;
		height: 50px;
		
	}
	
	#photocaption {
		padding: 0 11px 0 11px;
		height: 40px;
		boder: 1px solid red;
	}

#website_description a {
	font-size: 1.2em;
	letter-spacing: 0.01em;;
	color: #2096d4;
	text-decoration: none;
}

#website_description a:hover {
	color: #d32a15;
}

#website_description .title {
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0.4em;
}

#website_description td {
	width: 20%;
	height: 50%;
	padding-bottom: 1em;
}

#website_description img {
	margin-bottom: 0.4em;
}