/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								Algemeen voor hele site geldend                                                                */
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
*				{margin: 0; padding: 0; border: 0px;}
body				{font-family: Arial; cursor: default; height: 100%; background-color: #2F2F2F; overflow-y: scroll;}
a				{text-decoration: none; outline: none; border: none;}
a:link				{color: #CCCCCC;}	/* unvisited link  */
a:visited			{color: #CCCCCC;}	/* visited link    */
a:hover			{color: #FFFFFF;}	/* mouse over link */
a:active			{color: #FFFFFF;}	/* selected link   */

nav				{position: absolute; left: 0; top: 0; width: 100%; text-align: center;}
	nav:after		{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/VSbg.gif") repeat fixed; opacity: 0.25; z-index: -1;}

	.block			{position: relative; vertical-align: top; display: inline-block; margin: 1vw; border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden;}
		.block .vertCenter	{display: inline-block; vertical-align: middle; height: 100%;}
		.block span	{display: inline-block; vertical-align: middle;}
		.block a	{position: absolute; right: 0; top: 1vw; background-color: #2F2F2F; padding: 0.25vw 1vw 0.25vw 1vw; border: 1px solid rgba(255, 255, 255, 0.25); border-right: none;
				 box-shadow: 0 0 1vw 0.25vw rgba(0, 0, 0, 0.75); z-index: 100; font-size: 1.5rem;}
		.block a:after{content: "›"; margin-left: 0.5rem; font-size: 2rem;}
		.block iframe	{position: absolute; left: -1.5vw; top: 0; width: 105%; height: 100%;}
		.block .hide	{position: absolute; left: 0; top; 0; width: 100%; height: 100%; xbackground-color: yellow;}
		.block img	{position: absolute; left: 0; top: 0; height: 100%; display: none; z-index: 0;}
		.block img:first-of-type	{display: inline; z-index: 1;}
	.part			{width: 32%; display: inline-block; vertical-align: top;}

	.block.one		{width: 32vw; height: 24vw; margin-top: 4vw; float: left;}
	.block.two		{width: 24vw; height: 18vw; background-color: #FFFFFF; margin-bottom: 4vw;}
	.block.three		{width: 32vw; height: 24vw; margin-top: 4vw; float: right;}
	.block.four		{width: 24vw; height: 32vw; float: left; xmargin-left: 2vw;}
	.block.five		{width: 20vw; height: 15vw;}
	.block.six		{width: 36vw; height: 21vw; float: right;}
	.block.seven		{width: 20vw; height: 15vw; float: right;}
	.block.eight		{width: 30vw; height: 22vw;}


	.blockty				{position: relative; vertical-align: top; display: inline-block; margin: 1vw; border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden; box-shadow: 0 0 1vw rgba(0, 0, 0, 0.75);}
		.blockty .vertCenter		{display: inline-block; vertical-align: middle; height: 100%;}
		.blockty span			{display: inline-block; vertical-align: middle;}
		.blockty a			{position: absolute; right: 0; top: 1vw; background-color: #2F2F2F; padding: 0.25vw 1vw 0.25vw 1vw; border: 1px solid rgba(255, 255, 255, 0.25); border-right: none;
						 box-shadow: 0 0 1vw 0.25vw rgba(0, 0, 0, 0.75); z-index: 100; font-size: 1.5rem;}
		.blockty a:after		{content: "›"; margin-left: 0.5rem; font-size: 2rem;}
		.blockty iframe		{position: absolute; left: -1.5vw; top: 0; width: 105%; height: 100%;}
		.blockty .hide		{position: absolute; left: 0; top; 0; width: 100%; height: 100%; xbackground-color: yellow;}
		.blockty img			{position: absolute; left: 0; top: 0; height: 100%; display: none; z-index: 0;}
		.blockty img:first-of-type	{display: inline; z-index: 1;}
	.blockty.onety			{width: 30vw; height: 22vw;}
	.blockty.twoty			{width: 30vw; height: 22vw; background-color: #FFFFFF;}
	.blockty.threety			{width: 30vw; height: 22vw;}
	.blockty.fourty			{width: 30vw; height: 22vw;}
	.blockty.fivety			{width: 30vw; height: 22vw;}
	.blockty.sixty			{width: 30vw; height: 22vw;}
	.blockty.seventy			{width: 30vw; height: 22vw;}
	.blockty.eightty			{width: 30vw; height: 22vw;}

/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								Recursief voor (bijna) iedere pagina								    */
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
#navigation			{position: absolute; left: 0px; top: 0px; height: 50px; line-height: 50px; width: 100%; text-align: center; font-family: 'Cantata One'; text-transform: uppercase; font-size: 15px;}
.menuItem			{margin-left: 0%; margin-right: 0%; background: url(../images/buttonBig2.png) no-repeat 0px 3px; background-size: 100% 44px; padding: 0 1vw 0 0.75vw; xwidth: 236px; display: inline-block;
				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE8 */
				 filter: alpha(opacity=75); /* IE7 and earlier */
				 opacity: 0.75; xborder: 1px solid red;
				}
.menuItem img			{position: relative; top: 9px; margin-right: 3px;}
.menuItem:hover		{opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
.menuItemLarge		{margin-left: 0.1vw; margin-right: 0.1vw; background: url(../images/buttonLarge.png) no-repeat 0px 3px; background-size: 100% 44px; padding: 0 1vw 0 0.75vw; xwidth: 300px; display: inline-block;
				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE8 */
				 filter: alpha(opacity=75); /* IE7 and earlier */
				 opacity: 0.75; xborder: 1px solid blue;
				}
.menuItemLarge img		{position: relative; top: 9px; margin-right: 3px;}
.menuItemLarge:hover		{opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
.menuItemRed			{margin-left: 0.1vw; margin-right: 0%; background: url(../images/buttonRed.png) no-repeat 0px 3px; background-size: 100% 44px; padding: 0 1vw 0 0.75vw; xwidth: 162px; display: inline-block;
				 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE8 */
				 filter: alpha(opacity=75); /* IE7 and earlier */
				 opacity: 0.75;
				}
.menuItemRed img		{position: relative; top: 9px; margin-right: 3px;}
.menuItemRed:hover		{opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}


#current			{color: white; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}

#supersized-loader		{position: absolute; top: 50%; left: 50%; z-index: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; text-indent: -999em; background: url(../images/progress.gif) no-repeat center center;}
#supersized			{display: block; position: fixed; left: 0px; top: 0px; overflow: hidden; z-index: -999; height: 100%; width: 100%;}
#supersized img		{width: auto; height: auto; position: relative; display: none; outline: none; border: 1px solid #444444;}
#supersized.speed img	{-ms-interpolation-mode: nearest-neighbor; image-rendering: -moz-crisp-edges;}	/*Speed*/
#supersized.quality img	{-ms-interpolation-mode: bicubic; image-rendering: optimizeQuality;}			/*Quality*/
#supersized li		{display: block; list-style: none; z-index: -30; position: fixed; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/VSbg.gif);}
#supersized a			{width: 100%; height: 100%; display: block;}
#supersized li.prevslide	{z-index: -20;}
#supersized li.activeslide	{z-index: -10;}
#supersized li.image-loading{background: #111 url(../images/progress.gif) no-repeat center center; width: 100%; height: 100%;}
#supersized li.image-loading img {visibility: hidden;}
#supersized li.prevslide img, #supersized li.activeslide img {display: inline;}

#nextthumb,#prevthumb	{z-index: 2; display: none; position: fixed; bottom: 61px; height: 75px; width: 100px; overflow: hidden; background: #FF0000; border: 1px solid #fff; -webkit-box-shadow: 0 0 5px #000;}
#nextthumb			{right: 12px;}
#prevthumb			{left: 12px;}
#nextthumb img, #prevthumb img {width: 150px; height: auto;}
#nextthumb:active, #prevthumb:active {bottom: 59px;}
#nextthumb:hover, #prevthumb:hover {cursor: pointer;}

#thumb-tray			{position: fixed; z-index: 3; bottom: 37px; left: 0px; xbackground: url(../images/bg-black.png); height: 95px; width: 100%; overflow: hidden; text-align: center;
				 x-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; xfilter: alpha(opacity=60); xopacity: 0.60;
				 x-moz-box-shadow: 0px 0px 4px #000; x-webkit-box-shadow: 0px 0px 4px #000; xbox-shadow: 0px 0px 4px #000;}
#thumb-back, #thumb-forward {position: absolute; z-index: 5; bottom: 5px; height: 85px; width: 40px;}
#thumb-back			{left: 0px; background: url('../images/thumb-back.png') no-repeat center center;}
#thumb-forward		{right: 0px; background:url('../images/thumb-forward.png') no-repeat center center;}
#thumb-back:hover, #thumb-forward:hover {cursor: pointer; background-color: rgba(256,256,256, 0.3);}
#thumb-back:hover		{border-right: 1px solid rgba(256,256,256, 0.2);}
#thumb-forward:hover		{border-left: 1px solid rgba(256,256,256, 0.2);}

ul#thumb-list			{display: inline-block; list-style: none; position: relative; left: 0px; padding: 0px;}
ul#thumb-list:hover > li	{opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60);}
ul#thumb-list:hover > li img{opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60);}
ul#thumb-list li		{xbackground: #111; list-style: none; display: inline; width: 150px; height: 85px; overflow: hidden; float: left; margin: 5px;}
ul#thumb-list li img		{width: 150px; height: auto; opacity: 0.16; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;}
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
ul#thumb-list li:hover	{cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;}
ul#thumb-list li		{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.40;}

#prevslide, #nextslide	{position: absolute; height: 43px; width: 43px; top: 50%; margin-top: -21px; opacity: 0.6;}
#prevslide			{left: 10px; background: url('../images/back.png');}
#nextslide			{right: 10px; background: url('../images/forward.png');}
#prevslide:active, #nextslide:active {margin-top: -19px;}
#prevslide:hover, #nextslide:hover {cursor: pointer;}

#bottom			{display: none; margin:0 auto; height: 37px; width: 100%; bottom: 0px; left: 0px; z-index: 4; background: url(../images/bot-bg2.png) repeat-x; position: fixed;}
#pauseplay			{position: absolute; height: 36px; cursor: pointer; z-index: 1000;}
#NAW				{position: relative; top: 2px; text-align: center; z-index: 5; color: #CCCCCC; font-size: 18px;}
.NAWitem			{display: inline; margin-right: 20px; padding-right: 20px; border-right: 1px solid grey;}
#NAW img			{position: relative; top: 6px; height: 24px; margin-right: 4px;}
#VSbutton			{padding-top: 4px; padding-bottom: 5px; padding-left: 8px; padding-right: 20px; display: inline; background: url(../images/button2.png) no-repeat; font-family: 'Cantata One';}
#NAW:hover			{color: white;}
#ED				{position: absolute; bottom: 10px; right: 10px; color: #CCCCCC; font-size: 13px; z-index: 5;}

/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								Clubkaart				                                                            */
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
.photo				{position: absolute; top: 0px; left: 0px; width: 400px; height: 200px; z-index: 1;}
.photo.active			{z-index: 3;}
#LT				{position: absolute; top: -4px; left: -4px; z-index: 10;}
#RT				{position: absolute; top: -4px; left: 389px; z-index: 10;}
#LB				{position: absolute; top: 189px; left: -4px; z-index: 10;}
#RB				{position: absolute; top: 189px; left: 389px; z-index: 10;}

/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								CMS				                	                                              */
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
#wrapper			{position: relative; margin: auto; width: 1280px; color: white;}
#login				{position: relative; width: 600px; color: white; margin: auto; top: 100px;}
#loginImage			{position: relative; float: left; vertical-align: middle; margin-top: -60px; width: 200px;}
#label				{width: 100px; float: left; text-align: right;}
#loginName, #password	{width: 200px; text-align: left;}
#loginButton			{margin-top: 20px; width: 100px;}

.subject			{position: relative; padding-left: 202px; color: white; font-size: 15px; font-family: Arial; text-align: left; font-weight: bold; background-color: #AA0000;}
.label				{float: left; width: 190px; text-align: right; color: white; font-family: Arial;}
form input		{float: left; width: 1015px; color: blue; margin-left: 2px;}
input[type=file]		{width: 105px; xborder: 1px solid blue;}
input[type=checkbox]		{margin-left: 20px; width: 25px; height: 20px; outline: none;}
.small				{width: 200px;}
.narrow			{width: 100px;}
textarea			{position: absolute; left: 202px; height: 179px; color: blue; border: 1px solid yellow;}
#threeLines			{height: 50px; text-align: center;}
#fixedButton			{position: fixed; background-color: #2F2F2F; border-bottom: 2px solid #AA0000; width: 100%; height: 40px; left: 0px; top: 0px; z-index: 1000;}
#submitButton			{position: relative; width: 150px; height: 25px; left: 750px; top: 8px; color: red; font-weight: bold; cursor: pointer;}
#button			{position: relative; width: 150px; height: 25px; left: 550px; top: 8px; color: red; font-weight: bold; cursor: pointer; display: inline;}
.miniPhoto img		{position: relative; float: left; height: 150px; left: 5px; top: 0px; border: 1px solid #DDDDDD; margin-bottom: 10px;}
.delete			{position: relative; float: left; left: 7px; top: 0px; cursor: pointer;}
.right				{position: absolute; left: 600px; width: 600px; xborder: 1px solid yellow;}

/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								agenda					                                                            */
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
#showAgenda			{position: absolute; right: 0px; top: 0px; width: 20px; height: 20px; z-index: 10000;}
#agenda			{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 10000; display: none; text-align: center; font-size: 15px; overflow: hidden;}
	#closeButton		{position: absolute; top: 110px; right: 10px; width: 25px; box-shadow: 0px 2px 5px #000000; cursor: pointer; z-index: 1;}
.calendar			{position: absolute; left: 0px; top: 100px; margin: auto; right: 0px; background-color: rgba(200, 200, 200, 0.75); display: inline-block; padding: 2rem;}
	#calDays		{margin-bottom: 2rem; width: 600px; display: inline-block; vertical-align: top;}
	.calWeekday		{position: relative; width: 80px; display: inline-block; text-align: center; border: 1px solid transparent;}
	.calDay		{position: relative; width: 80px; line-height: 80px; display: inline-block; border: 1px solid #DDDDDD; background-color: #FFFFFF; text-align: center;}
		.calDay:hover	{border: 1px solid red; z-index: 1; cursor: pointer;}
	
	#legend		{position: relative; top: 50px; display: inline-block; width: 300px; text-align: left;}
		#showToday	{background-color: #0088EE; color: #FFFFFF; padding: 0.5rem 2rem 0.5rem 2rem; display: inline-block; border-radius: 0.5rem; box-shadow: 0px 2px 10px #000000; cursor: pointer; margin-bottom: 2rem;}
		.greenBlock	{width: 20px; height: 20px; background-color: #FFFFFF; display: inline-block; margin: 0px 5px 3px 0px; vertical-align: middle;}
		.orangeBlock	{width: 20px; height: 20px; background-color: #EE9900; display: inline-block; margin: 0px 5px 3px 0px; vertical-align: middle;}
		.redBlock	{width: 20px; height: 20px; background-color: #CCCCCC; display: inline-block; margin: 0px 5px 3px 0px; vertical-align: middle;}

	#prev			{position: relative; display: inline-block; width: 43px; height: 43px; background: url("../images/back.png") no-repeat center; xborder: 1px solid yellow; opacity: 0.6; vertical-align: middle;}
		#prev:hover	{opacity: 1;}
	#calMonthAndYear	{display: inline-block; font-size: 24px; padding: 0px 2rem 0px 2rem; height: 43px; line-height: 43px; xborder: 1px solid red;}
	#next			{position: relative; display: inline-block; width: 43px; height: 43px; background: url("../images/forward.png") no-repeat center; opacity: 0.6; vertical-align: middle;}
		#next:hover	{opacity: 1;}

.timeframe			{position: absolute; left: 3000px; top: 100px; margin: auto; right: 0px; width: 800px; xborder: 1px solid red; padding: 2rem;}
	.chosenDate		{display: inline-block; font-size: 24px; height: 43px; line-height: 43px; xborder: 1px solid red;}
	#calTimes		{width: 470px; line-height: 30px; display: inline-block; vertical-align: top;}
	.calTime		{position: relative; width: 75px; line-height: 25px; display: inline-block; border: 1px solid #DDDDDD; background-color: #FFFFFF; text-align: center;}
		.calTime:hover{border: 1px solid red; z-index: 1; cursor: pointer;}
	#adjustDate		{position: relative; display: inline-block; line-height: 43px; background: url("../images/back.png") no-repeat left center; padding-left: 45px; opacity: 0.6; text-align: left; margin: 0px 5rem 0px 5rem;}
	#adjustDate:hover	{opacity: 1;}
	#toPersonalData	{position: relative; display: inline-block; line-height: 43px; background: url("../images/forward.png") no-repeat right center; padding-right: 45px; opacity: 0.6; text-align: right;
				 margin: 0px 5rem 0px 5rem; display: none;}
	#toPersonalData:hover{opacity: 1;}

.personalData			{position: absolute; left: 6000px; top: 100px; margin: auto; right: 0px; width: 800px; padding: 2rem;}
	.chosenTime		{display: inline-block; font-size: 24px; height: 43px; line-height: 43px; xborder: 1px solid red;}
	.chosen		{background-color: #EE8800; color: #FFFFFF;}
	label			{color: #444444;}
	#name, #phone, #email{position: relative; margin: 0px 0px 5px 0px; padding: 0; left: 0px; width: 400px; color: #000000; font-family: inherit; font-size: inherit; text-align: center; xdisplay: inline-block;}
	#remarks		{position: relative; left: 0px; width: 600px; border: none; color: #000000; font-family: inherit; font-size: inherit;}
	.personalData b	{color: #FF0000; font-weight: normal;}
	#adjustTime		{position: relative; display: inline-block; line-height: 43px; background: url("../images/back.png") no-repeat left center; padding-left: 45px; opacity: 0.6; text-align: left;
				 margin: 0px 5rem 0px 5rem;}
	#adjustTime:hover	{opacity: 1;}
	#send			{padding: 0.5rem 2rem 0.5rem 2rem; background-color: #0088EE; color: #FFFFFF; display: inline-block; border-radius: 0.5rem; box-shadow: 0px 2px 10px #000000; margin: 0px 5rem 0px 5rem; cursor: pointer;}

.notAvailable			{background-color: #CCCCCC; color: #888888;}
.notAvailable:hover		{border: 1px solid #DDDDDD; cursor: default;}
.today				{color: #0088EE; font-weight: bold; text-decoration: underline;}

/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*								agenda	in CMS				                                                            */
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
form .calendar		{position: relative; top; 0px; padding: 0px; background-color: #666666; border: 1px solid red; text-align: center; color: black;}

.xui-datepicker {
    xwidth: 216px;
    xheight: auto;
    xmargin: 5px auto 0;
    font: 9pt Arial, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker-group		{display: inline-block; width: 25%; xmargin-right: 5%;}
.ui-datepicker table {
    width: 100%;
}
.ui-datepicker-header {
    color: #FFFFFF; background-color: #AAAAAA; border: 1px solid yellow;
    xfont-weight: bold;
    line-height: 30px;
}
.ui-datepicker-title {
    text-align: center; xcolor: red;
}
.ui-datepicker thead {
    xbackground-color: #FF0000;
    border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
    text-transform: uppercase;
    font-size: 10px;
    xpadding: 5px 0;
    xcolor: #666666;
    xtext-shadow: 1px 0px 0px #fff;
    xfilter: dropshadow(color=#fff, offx=1, offy=0);
}



.ui-datepicker-prev {
    float: left;
    background-position: center -30px;
}
.ui-datepicker-next {
    float: right;
    background-position: center -30px;
}
.ui-datepicker tbody td	{xpadding: 0; xborder: 1px solid #bbb; text-align: center; background-color: #666666;}