/* By www.meercommunicatie.nl */
/* This stylesheet sets advanced styling and layout (positioning, floating etcetera) for high resolution screens. */
/* It will be used by CSS-capable user agents that understand the mediatype "screen". */

* html, * html body {
	overflow: hidden;
}

/* unfortunately, safari 1.3 does not understand shorthands for backgrounds. */
body {
	background-color: #0b2254;
	background-repeat: repeat-x;
	background-position: 50% bottom;
	margin: 0;
	padding: 0;
}

/* z-indexes */

#footer {
	z-index: 100;
}

#menu {
	z-index: 1000;
}

/* Hide elements that are not needed on high resolution screens: */

.skip {
	display: none;
}

/* #wrapper */

#wrapper {
	width: 846px;
	height: 589px;
	/* horizontal/vertical-alignment technique: */
	position: absolute;
/* Hide from IE/Mac \*/
	top: 50%;
	margin-top: -300px; /* 50% of height, End hide */
	left: 50%;
	margin-left: -423px; /* 50% of width */
	background-color: #A3A0A0;
	background-repeat: no-repeat;
	background-position: 170px 1px;
}

/* Show only to IE/Mac */
* html>body #wrapper {
	top: 48px;
}

/* #logo */

#logo {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 176px;
	background-color: #A3A0A0;
}

/* #tagline */

#tagline {
	position: absolute;
	bottom: 0px;
	right: 21px;
}

#content_slideshow {
	position: absolute;
	left: 190px;
	top: 185px;
	z-index: 5; 
	height: 370px; 
	width: 630px; 
	border: none;
	display: block;
}

/* #fotos */

#foto_margin {
	margin-bottom: 12pt;
	padding-bottom: 12pt;
}

#foto_1 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 190px;
	top: 185px;
	background-color: #7F7F7F;
}

#foto_2 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 355px;
	top: 185px;
	background-color: #7F7F7F;
}

#foto_3 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 520px;
	top: 185px;
	background-color: #7F7F7F;
}

#foto_4 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 685px;
	top: 185px;
	background-color: #7F7F7F;
}

#foto_5 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 190px;
	top: 365px;
	background-color: #7F7F7F;
}

#foto_6 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 355px;
	top: 365px;
	background-color: #7F7F7F;
}

#foto_7 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 520px;
	top: 365px;
	background-color: #7F7F7F;
}

#foto_8 {
	width: 150px;
	height: 170px;
	overflow: auto;
	position: absolute;
	left: 685px;
	top: 365px;
	background-color: #7F7F7F;
}

#volgende {
	width: 150px;
	height: 17px;
	overflow: auto;
	position: absolute;
	left: 685px;
	top: 538px;
	background-color: #646464;
	color: white;
}

#vorige {
	width: 150px;
	height: 17px;
	overflow: auto;
	position: absolute;
	left: 190px;
	top: 538px;
	background-color: #646464;
	color: white;
}
#volgende a:hover {
	text-decoration: underline;
}

#volgende a {
	color: white;
	text-decoration: none;
}

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

#vorige a {
	color: white;
	text-decoration: none;
}

.frame {
	padding: 0px 0px 0px 12px;
}

#wrapper .frame_gallery_1 {
	padding: 0px 0px 0px 10px;
	width: 140px;
	height: 35px;
	overflow: auto;
	position: absolute;
	left: 0px;
	top: 135px;
	background-color: #646464;

}

.frame_gallery_2 {
	padding: 0px 0px 0px 10px;
	width: 140px;
	height: 35px;
	overflow: auto;
	position: absolute;
	left: 0px;
	top: 135px;
	background-color: #646464;

}

.close_window {
	color: #A3A0A0;
	text-decoration: underline;
}
/* #content */

#content_guestbook {
	width: 680px;
	height: 380px;
	overflow: hidden;
	position: absolute;
	left: 200px;
	top: 200px;
}

#content_left {
	width: 337px;
	height: 360px;
	overflow: auto;
	position: absolute;
	left: 180px;
	top: 181px;
}

#content_left .frame {
	padding: 32px 24px 16px 24px;
}

#content_right {
	width: 337px;
	height: 360px;
	overflow: auto;
	position: absolute;
	left: 490px;
	top: 181px;
}

#content_right .frame {
	padding: 32px 24px 16px 24px;
}
/* #menu */

#route_planner {
	width: 337px;
	height: 360px;
	overflow: auto;
	position: absolute;
	left: 180px;
	top: 300px;
}

#route_planner .frame {
	padding: 32px 24px 16px 24px;
}


#menu {
	width: 168px;
	position: absolute;
	top: 214px;
	left: 1px;
	background: #2C4879; /* this fakes a border-right for the submenu */
}

#menu_top {
	width: 167px;
	height: 38px;
	position: absolute;
	top: 176px;
	left: 1px;
	background: #2C4879; /* this fakes a border-right for the submenu */
	border-right: 1px solid white;
}

#menu_bottom {
	width: 167px;
	height: 213px;
	position: absolute;
	top: 375px;
	left: 1px;
	background: #2C4879; /* this fakes a border-right for the submenu */
	border-right: 1px solid white;
	border-top: 1px solid white;
}
#menu h2 {
	display: none;
}

#menu ul,
#menu ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul li {
	display: block;
	width: 168px;
	border-top: 1px solid white;
}

 /* IE/WIN-fix: whitespace bug */
* html #menu ul li {
	float: left;
	clear: both;
}

#menu ul li.first-child {
	border-top: none;
	border-right: none;
}

#menu ul li a {
	line-height: 22px;
	height: 22px;
	text-decoration: none;
	color: white;
	display: block;
	padding: 0 14px;
	background-color: #2C4879;
	border-right: 1px solid white;
}

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li a {
	height: 1px; /* IE/WIN-fix: fixes whitespace bug. End Hide */
}

#menu ul li a:hover {
	background-color: #A3A0A0;
}

/* submenu styling */

#menu ul li ul {
	display: none;
	position: absolute;
	top: 0;
	left: 169px;
	border-bottom: 1px solid white;
}

/* pseudoclass :hover doesn't work in IE/WIN, js/hover_ie.js fixes this: */
/* 20050922 - Disabling the hover effect. Unusable in this design.
#menu ul li.active ul,
#menu ul li:hover ul,
#menu ul li.hover ul {
 	display: block;
}
*/

/* Styling individual menu-items (mi) */

#menu ul li#mi_informatie {
	position: absolute;
	top: 137px;
	left: 0;
	width: 169px;
	/* undo IE/WIN-fix for whitespace */
	float: none;
	clear: both;
}

#menu ul li#mi_informatie a {
	background-color: #2C4879;
	border-bottom: 1px solid white;
}

#menu ul li#mi_informatie a:hover {
	background-color: #666666;
}

#menu ul li#mi_informatie ul {
	border-top: 1px solid white;
	border-left: 1px solid white;
	margin: -1px 0 0 -1px;
}


#menu ul li#mi_informatie ul a {
	border: none;
	border-right: 1px solid white;
	background-color: #7F7F7F !important;
}

#menu ul li#mi_informatie ul a:hover {
	background-color: #666666 !important;
}

body.subpage1 #menu ul li#mi_informatie ul li.first-child a {
	background-color: #666666 !important;
}


body.subpage2 #menu ul li#mi_informatie ul li.second-child a {
	background-color: #666666 !important;
}

/* Need to tweak the positions of the submenu's slightly so that they are reachable... */
/* 20050922 - Disabling these tweaks. Were needed for the submenu hover effect, which proved to be unusable in this design.
#mi_ontwerp ul {
	border-top: 1px solid white;
	margin-top: 45px;
}

#mi_drukwerk ul {
	border-top: 1px solid white;
	margin-top: 45px;
}

#mi_internet ul {
	border-top: 1px solid white;
	margin-top: 22px;
}

*/

/* "you are here"-effect */
#pg_galerie #mi_galerie a,
#pg_biografie #mi_biografie a,
#pg_in_progress #mi_in_progress a,
#pg_gastenboek #mi_gastenboek a,
#pg_info_aanvraag #mi_info_aanvraag a,
#pg_links #mi_links a,
#pg_contact #mi_contact a {
	background-color: #A3A0A0;
	border-right: none;
}

#pg_informatie #mi_informatie a {
	background-color: #A3A0A0 !important;
}


/* anchor elements in submenu should not have the "you are here"-color at this point (too bad IE/WIN doesn't understand child selectors): */

#menu ul li ul li a {
	background-color: #8A96C0 !important;
}

#menu ul li ul li a:hover {
	background-color: #B6BDD7 !important;
}

/* on active pages, display submenu */

#pg_galerie #mi_galerie ul,
#pg_biografie #mi_biografie ul,
#pg_in_progress #mi_in_progress ul,
#pg_gastenboek #mi_gastenboek ul,
#pg_info_aanvraag #mi_info_aanvraag ul,
#pg_links #mi_links ul,
#pg_contact #mi_contact ul {
 	display: block;
}

/* subpages menu styling */

.subpage1 #menu ul ul li.first-child a,
.subpage2 #menu ul ul li.second-child a,
.subpage3 #menu ul ul li.third-child a,
.subpage4 #menu ul ul li.fourth-child a,
.subpage5 #menu ul ul li.fifth-child a,
.subpage6 #menu ul ul li.sixth-child a {
	background-color: #6D7CB0 !important;
}


/* #footer */

#footer {
	font-size: 8pt;
	width: 677px;
	height: 30px;
	position: absolute;
	top: 559px;
	left: 169px;
	color: white;
	background-color: #7F7F7F;
}

#footer address {
	margin: 0;
	padding: 0;
	border-top: 1px solid white;
	border-right: 1px solid white;
}

#footer address p {
	position: absolute;
	bottom: 7px;
	left: 32px;
	font-style: normal;
	margin: 0;
	padding: 0;
}


#footer address span {
	margin-right: 1.5em;
}

#footer address br {
	display: none;
}

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

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

#footer a.tel:hover {
	color: white;
}

/* sections */

#section_routeplanner {
	margin-top: 5em;
}

/* .magnifiedImage */

div.magnifiedImage {
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -250px;
	top: 50%;
	margin-top: -170px;
	z-index: 10000;
	border: 1px solid white;
}

div.magnifiedImage img {
	border: 16px solid #3F0026;
}

div.magnifiedImage,
.thumbnail {
	cursor: pointer;
}