/* reset browser styles: Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 0.10.0 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin: 0; padding: 0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; }
q:before,q:after { content:''; }

/* font */
@font-face { font-family: "Kingthings Exeter"; src: url('/fonts/kingthings-exeter.ttf'); }
@font-face { font-family: "Verdana"; src: url('/fonts/verdana.ttf'); }

/* algemeen html */
body { font: 14px Verdana; background: #fff; }
div.background { background: transparent url("/images/bg.mandarre.jpg") no-repeat top center; background-size: cover; overflow: hidden; height: 720px; }

	@media screen and (max-width: 1600px) {
		div.background { height: 520px; }
	}
	@media screen and (max-width: 985px) {
		div.background { height: 400px; }
	}
	@media screen and (max-width: 760px) {
		div.background { height: 300px; }
	}
	@media screen and (max-width: 550px) {
		div.background { height: 200px; }
	}

div.wrapper { width: 80%; margin: 0 auto; overflow: hidden; }
a { color: #40022f; }

	@media screen and (max-width: 1000px) {
		div.wrapper { width: 94%; }
	}

/* header */
div#header { width: 100%; height: 125px; overflow: hidden; }

a#logo { display: block; width: 250px; height: 60px; margin-top: 12px; font-family: "Kingthings Exeter", Verdana; font-size: 54px; text-decoration: none; color: #40022f; }

div#header span.sub { display: block; width: 500px; margin-top: 6px; font-family: "Kingthings Exeter", Verdana; font-size: 17px; }

	@media screen and (max-width: 790px) {
		div#header span.sub { display: none; }
	}

ol#languages { float: right; margin-top: -90px; }
ol#languages li { float: left; margin-left: 18px; }
ol#languages li a { color: #000; text-decoration: none; padding-left: 22px; }
ol#languages li a:hover { text-decoration: underline; }
ol#languages li a.nl { background: transparent url("/images/sprite.png") no-repeat -265px -40px; }
ol#languages li a.fr { background: transparent url("/images/sprite.png") no-repeat -265px -20px; }
ol#languages li a.en { background: transparent url("/images/sprite.png") no-repeat -265px 0; }

	@media screen and (max-width: 790px) {
		ol#languages { margin-top: -64px; /* omdat de div#header span.sub verdwijnt :-) */ }
	}

ol#topnavigation { float: right; margin-top: -25px; }
ol#topnavigation li { float: left; margin-left: 20px; height: 45px; }
ol#topnavigation li a { display: block; color: #fff; text-decoration: none; padding: 7px 0 13px 45px; font-family: "Kingthings Exeter", Verdana; font-size: 17px; }
ol#topnavigation li.calendar { width: 121px; }
ol#topnavigation li.calendar a { display: block; background: transparent url("/images/sprite.png") no-repeat 0 0; }
ol#topnavigation li.calendar a:hover { background-position: 0 -45px; }
ol#topnavigation li.booking { width: 132px; }
ol#topnavigation li.booking a { display: block; background: transparent url("/images/sprite.png") no-repeat -125px 0; }
ol#topnavigation li.booking a:hover { background-position: -125px -45px; }

	@media screen and (max-width: 550px) {
		ol#topnavigation { margin-top: 5px; }
	}

	@media screen and (max-width: 325px) {
		ol#topnavigation li { margin-left: 10px; }
	}

/* menu */
a#btnNavigation { display: none; }
ol#leftnavigation { float: left; width: 174px; margin-top: 125px; }
ol#leftnavigation li { float: left; width: 174px; margin-bottom: 10px; }
ol#leftnavigation li a { display: block; font-family: "Kingthings Exeter", Verdana; font-size: 18px; text-decoration: none; color: #fff; padding: 10px 20px; background: transparent url("/images/sprite.png") no-repeat -375px -2px; }
ol#leftnavigation li a:hover { background-position: -375px -52px; }
ol#leftnavigation li a.active { background-position: -375px -102px; width: 160px; }
ol#leftnavigation li ol { margin-top: 12px; }
ol#leftnavigation li ol li { margin-bottom: 8px; }
ol#leftnavigation li ol li a { padding: 7px 0 7px 25px; color: #40022f; background: transparent url("/images/sprite.png") no-repeat -567px -2px; }
ol#leftnavigation li ol li a:hover { background: transparent url("/images/sprite.png") no-repeat -567px -52px; }
ol#leftnavigation li ol li a.active { color: #fff; background: transparent url("/images/sprite.png") no-repeat -567px -102px; }

	@media screen and (max-width: 550px) {
		a#btnNavigation { display: none; position: fixed; top: 40px; right: 15px; width: 75px; height: 20px; background: #ff0000; text-decoration: none; text-align: right; padding-right: 28px; color: #fff; outline: none; /*background: transparent url("/images/sprite.png") no-repeat -12px -1416px; */ }
		ol#leftnavigation { display: block; position: fixed; top: 160px; left: -140px; width: 193px; overflow: hidden; z-index: 4; }
		ol#leftnavigation li a { border-right: 1px solid #fff; }
		ol#leftnavigation li ol li a { border-right: none; }
		ol#leftnavigation li { margin-bottom: 2px; }
		ol#leftnavigation li ol { margin-top: 2px; }
		ol#leftnavigation li ol li { margin-bottom: 2px; }
	}

div#leftDummy { float: left; width: 174px; height: 100px; overflow: hidden; }

img#threeStars {  }

/* main */
#white { float: left; width: 100%; position: relative; }
#transparent { position: absolute; top: 0; left: 174px; width: calc(100% - 180px) /*766px*/; height: 100%; background: #fff; opacity: 0.7; z-index: 1; }
#opaque { position: relative; z-index: 2; }
div#main { float: left; width: calc(100% - 440px) /*486px*/; margin-left: 33px; line-height: 200%; min-height: 400px; margin-top: 25px; }

h1#pagetitle { float: left; width: calc(100% - 215px) /*733px*/; height: 45px; padding: 30px 0 20px 33px; font-family: "Kingthings Exeter", Verdana; font-size: 40px; color: #40022f; background: transparent url("/images/line.png") no-repeat left bottom; letter-spacing: 2px; }

	@media screen and (max-width: 1000px) {
		h1#pagetitle { width: auto; overflow: hidden; float: none; font-size: 30px; padding-bottom: 10px; }
		div#main { width: auto; overflow: hidden; float: none; padding: 0 33px; min-height: auto; }
	}
	@media screen and (max-width: 850px) {
		h1#pagetitle { font-size: 20px; padding-bottom: 0px; }
	}
	@media screen and (max-width: 550px) {
		#transparent { left: 0; }
		#white { width: 100%; }
		div#main { margin-left: 10px; }
	}

/* images */
ol#images { float: left; width: 207px; margin-left: 24px; background: transparent url("/images/sprite.png") no-repeat -775px 0; padding-top: 30px; margin-top: 40px; }
ol#images li { padding: 9px 22px; background: transparent url("/images/sprite.png") repeat-y -1000px 0; }
ol#images li.last { padding-bottom: 105px; background: transparent url("/images/sprite.png") no-repeat -1225px 0; }
ol#images li a { display: block; }
ol#images li a:hover {  }
ol#images li a img { border: 1px solid #fff; width: 164px; height: 98px; }

	@media screen and (max-width: 1000px) {
		ol#images { width: auto; background: transparent; margin-top: 30px; padding: 0 33px; overflow: hidden; float: none; margin-left: 174px; }
		ol#images li, ol#images li.last { background: transparent; padding: 0; }
		ol#images li { margin: 0 15px 15px 0; float: left; }
		ol#images li a img { width: 215px; height: 127px; }
	}

	@media screen and (max-width: 550px) {
		ol#images { margin-left: 0; }
		ol#images li { margin: 15px 40px; }
	}

/* footer */
div#footer { float: left; clear: both; margin: 35px 0 0 174px; width: calc(100% - 180px) /*766px*/; height: 70px; background: transparent url("/images/line.png") no-repeat top center; background-size: 100%; }
div#footer span { display: block; float: left; margin: 15px; font-family: "Kingthings Exeter", Verdana; font-size: 14px; font-weight: bold; }
a#aurealis { display: block; float: right; width: 65px; height: 41px; margin: 15px; text-indent: -9000px; background: transparent url("/images/img.aurealis.png") no-repeat; }

	@media screen and (max-width: 1000px) {
		a#aurealis { display: none; }
	}

	@media screen and (max-width: 600px) {
		div#footer { height: 200px; width: auto; }
	}

	@media screen and (max-width: 550px) {
		div#footer { margin-left: 0; width: 100%; }
		div#footer span { margin-left: 25px; }
	}

/* from mysite! */
#main h1 { font-family: "Kingthings Exeter", Verdana; font-size: 17px; color: #40022f; margin: 10px 0; letter-spacing: 1px; width: 100%; clear: both; }
#main h2 { font-size: 120%; color: #40022f; font-weight: normal; margin: 5px 0 20px 0; width: 100%; clear: both; }
#main h3 { font-weight: bold; margin: 5px 0; width: 100%; clear: both; }
#main address { display: block; width: 100%; font-style: italic; clear: both; }
#main p { display: block; margin-bottom: 8px; width: 100%; clear: both; }
#main strong { font-weight: bold; }
#main em { font-style: italic; }
#main strike { text-decoration: line-through; }
#main u { text-decoration: underline; }
#main a { text-decoration: underline; }
#main ul { list-style-image: url("/images/userstyles/li.gif"); list-style-position: outside; margin-bottom: 5px; width: 100%; clear: both; }
#main ul li { margin-left: 22px; }
#main ol { list-style-type: decimal; list-style-position: outside; margin-bottom: 5px; width: 100%; clear: both; }
#main ol li { margin-left: 22px; }
#main blockquote { width: 100%; padding: 5px 40px; background: transparent url("/images/userstyles/blockquote.png") no-repeat left top; box-sizing: border-box; }
#main table { margin-bottom: 5px; width: 100%; clear: both; }
#main thead {  }
#main thead tr {  }
#main thead tr th { font-weight: bold; }
#main tbody {  }
#main tbody tr {  }
#main tbody tr th { font-weight: bold; }
#main tbody tr td { padding: 2px; vertical-align: top; }
#main table caption { font-style: italic; }

/* Form klasse */
form.niceform { margin: 15px 0 0 0; width: 100%; overflow: auto; clear: both; }
form.niceform div.niceentry { margin-bottom: 9px; float: left; clear: both; width: 100%; }
form.niceform div.niceentry label { display: block; float: left; font-weight: normal; color: #40022f; }
form.niceform div.niceentry input { display: block; width: 90%; float: left; clear: both; border: 1px solid #40022f; padding: 3px 8px; margin: 3px 0; }
form.niceform div.niceentry textarea { display: block; width: 90%; float: left; clear: both; border: 1px solid #40022f; padding: 3px 8px; margin: 3px 0; height: 150px; }
form.niceform div.niceentry select { display: block; width: 90%; float: left; clear: both; border: 1px solid #40022f; padding: 3px 8px; margin: 3px 0; background: #fff; }
form.niceform div.niceentry span.pseudolabel { display: block; width: 90%; float: left; color: #40022f; }
form.niceform div.niceentry span.niceinfo { display: none; float: left; width: 90%; padding-bottom: 5px; font-style: italic; color: #884f22; clear: both; }
form.niceform div.niceentry img { float: right; display: none; clear: right; }
form.niceform div.checkbox input { width: auto; clear: left; float: left; margin-bottom: 3px; border: 0; width: auto !important; }
form.niceform div.checkbox label { float: left; margin: 0 0 3px 5px; font-weight: normal; color: #000; width: 90%; }
form.niceform div.nicebutton { margin: 10px 0; float: left; clear: both; }
form.niceform div.nicebutton button { border: 1px solid #40022f; padding: 3px 8px; margin: 3px 0; background: #d8d8d8; color: #40022f}
form.niceform div.niceerror label { color: #ff0000; }
form.niceform div.niceerror input { color: #ff0000; }
form.niceform div.niceerror select { color: #ff0000; }
form.niceform div.niceerror span.niceerrormessage { display: block; clear: both; float: left; width: 90%; font-size: 100%; color: #ff0000; padding-left: 21px; background: transparent url("/images/icon.error.png") no-repeat; min-height: 16px; }
form.niceform div.niceerror span.niceinfo { color: #ff0000; }

/* contact */
div#contactform {  }
div#contactdata { float: left; width: 207px; margin-left: 24px; }
div#contactdata h2 { font-family: "Kingthings Exeter", Verdana; font-size: 17px; color: #40022f; margin: 10px 0; letter-spacing: 1px; width: 100%; clear: both; margin-top: 50px; }
div#contactdata h2:first-of-type { margin-top: 10px; }

p#confirmbot { color: #800; border: 1px solid #800; padding: 5px 5px 5px 40px; background: url('/images/icon.error.png') no-repeat 10px 6px; width: 80%; font-style: italic; }

/* flashMessage */
div#flashMessage { float: left; clear: both; width: 97%; margin-bottom: 15px; border: 1px solid #baba45; background: #fbfba9 url("/images/icon.tick.png") no-repeat 10px 10px; box-sizing: border-box; }
div#flashMessage span { display: block; margin: 10px 16px 10px 35px; }

/* calendar */
div#calendarButtons { width: 100%; margin: 10px 0; clear: both; float: left; overflow: hidden; }
div#calendarButtons a { display: block; float: left; width: 248px; height: 34px; line-height: 34px; padding: 0; text-align: center; margin: 7px; color: #fff; text-decoration: none; font-family: "Kingthings Exeter", Verdana; font-size: 17px; background: transparent url("/images/sprite.png") repeat 0 -92px; }
div#calendarButtons a:hover { background-position: 0 -129px; }
div#calendarButtons a.active { background-position: 0 -129px; }

	@media screen and (max-width: 550px) {
		div#calendarButtons a { margin: 0 auto 25px auto; float: none; }
	}

h1#calendarHeader { /*text-align: center;*/ margin-top: 30px; width: 100%; margin: 10px 0; clear: both; float: left; overflow: hidden; }

div#calendar { clear: both; width: 100%; margin: 10px 0; float: left; overflow: hidden; }
div#calendar div { float: left; clear: both; width: 100%; overflow: hidden; }
div#calendar table { width: 154px; margin: 0 12px 25px 0; float: left; clear: none; border: 1px solid #bbb; border-collapse: separate; }
div#calendar table.right { margin-right: 0; }
div#calendar table thead th { text-align: center; color: #555; background: #bbb; }
div#calendar table tbody td { text-align: center; }
div#calendar table tbody td.booked { color: #fff; background: #40022f; }
div#calendar table tbody td.half { color: #fff; background: #8c5454; }

	@media screen and (max-width: 550px) {
		div#calendar table { margin: 0 auto 25px auto; float: none; }
		div#calendar table.right { margin-right: auto; }
	}

/* proprietary extra's */
#main blockquote { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
div#flashMessage { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* Aurealis Picture Viewer */
div#apv { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4; z-index: 8; }

div#apvHeader { display: none; position: fixed; left: 0; bottom: 4%; width: 100%; border: 2px solid #fff; border-left: 0px; border-right: 0px; height: 30px; background-color: #333; z-index: 10; }
	div#apvNavigation { position: absolute; top: 0; left: 50%; height: 100%; width: 300px; margin-left: -150px; overflow: hidden; }
	div#apvNavigation a { display: block; width: 30px; height: 20px; margin: 5px 10px; text-indent: -9000px; overflow: hidden; }
	div#apvNavigation a.inactive { opacity: 0.2; cursor: default; }
	div#apvNavigation span { display: block; float: left; width: 180px; margin: 0 10px; color: #fff; font-size: 15px; text-align: center; padding-top: 4px; }
	a#apvPrev {float: left; background: transparent url("/images/apv/navigation.png") no-repeat center -60px; }
	a#apvNext { float: right; background: transparent url("/images/apv/navigation.png") no-repeat center -30px; }
	div#apvClose { position: absolute; top: 0; right: 50px; width: 30px; height: 100%; }
	a#apvCloseLink { display: block; width: 30px; height: 30px; margin: 0; text-indent: -9000px; background: transparent url("/images/apv/navigation.png") no-repeat center 4px; }
div#apvImage { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 9; }
	img#apvActiveImage { border: 9px solid #fff; margin-top: 1%; border-bottom: 35px solid #fff; background: #fff; }
	div#apvImage span { color: #000; margin-top: -30px; }

/* Aurealis Google Maps Viewer */
a.aurealisgooglemapsviewer { display: block; width: 100%; height: 250px; border: 1px solid #000; margin: 10px 0; }

div#agv { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.4; z-index: 8; }

div#agvHeader { display: none; position: fixed; left: 0; bottom: 4%; width: 100%; border: 2px solid #fff; border-left: 0px; border-right: 0px; height: 30px; background-color: #333; z-index: 10; }
	div#agvClose { position: absolute; top: 0; right: 50px; width: 30px; height: 100%; }
	a#agvCloseLink { display: block; width: 30px; height: 30px; margin: 0; text-indent: -9000px; background: transparent url("/images/apv/navigation.png") no-repeat center 4px; }
div#agvMaps { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; }
	div#agvMap { border: 9px solid #fff; margin: 1% 75px; background: #fff; }