@charset "UTF-8";

.pngfix{ behavior: url( "scripts/iepngfix.htc" ); }

body {
	font: 76% Calibri, Verdana, Arial, Helvetica, sans-serif;
	background:#ecf3f8;
	background-image: url( "img/bodyBack.png" );
	background-repeat:repeat-x;
	background-position: top;
	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #a50000;
}

.template #container {
		width: 940px;
		height: 650px;
	margin: 12px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	z-index: 1;
	padding: 0px 0px 0px 0px; 
}
	
.template #header {
	/*border: 1px solid #DDDDDD;*/
	padding: 0 0px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin:0px 0px 0px 0px;
	position:relative; 
		top:	0px;
		left:	1px;
		width: 940px;
		height:	223px;
	z-index: 3;
	background-image: url( "img/menuBack.png" );
	background-repeat: no-repeat;
	background-position: top;
} 
	#twitter_div {
		position:relative;
			top:0px;
			left:170px;
			width:600px;
			height:158px;
		color:#333;
	}
	
	#oslo{
		position:absolute;
			left:738px;
			top:38px;
	}
	#oslo img{border:0px;}
		#twitter_div img{	float:left; border:0; padding-right:30px}
		#twitter a{	display:none;}
		#twitter img{ border:0px; }
		#twitter_update_list{
			height:130px;
			overflow:auto;
			background-color:fff;
		}
		
	#navlist {
		position:relative;
			top:0px;
			left:-38px;
			width:900px;
			height:45px;
		margin:0px;
		padding:0px;
	}
	#submenu img{
		cursor:pointer;
		border:0px;
	}

.template #content {
	position: relative;
		top:-15px;
		left:0px;
		height:300px;
		width:943px;
	margin:0px;
	z-index: 200;
}
#leftColumn{
	position: relative;
		top:15px;
		left:0px;
		height:400px;
		width:200px;
	behavior: url( "scripts/iepngfix.htc" );
	background-image:url(img/itemBack.png);
	background-repeat:no-repeat;
}
	#menu{
		position:relative;
			left:20px;
			top:10px;
			width:175px;
		
	}
	
		#menu #referenties{
			text-align:center;
			width: 140px;
		}
#centerColumn{
	
	position: relative;
		top:12px;
		left:0px;
		height:400px;
		width:520px;
	margin:0 auto;
}
	#itemBack{ 
		width:520px; 
		background-image:url(img/itemBack.png);
		background-repeat:no-repeat; 
		behavior: url( "scripts/iepngfix.htc" );
		padding:20px;

}
	#pietroHidden{ 
		width:520px; 
		padding:20px;
		display:none;

}
		#itemBack a#zoom img{ 
			border: 4px solid #fff;
		}
	
#rightColumn{
	position: relative;
		top:15px;
		right:0px;
		height:400px;
		width:190px;
	behavior: url( "scripts/iepngfix.htc" );
	background-image:url(img/itemBack.png);
	background-repeat:no-repeat;
}
	#koppelingen{
		position:relative;
			left:20px;
			top:10px;
			width:165px;
			
}
	#koppeling{
		margin:10px;
		text-align:center;
		
	}
	#koppeling a img{
		border:0px;
	}
	.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
		float: right;
		margin-left: 8px;
	}
	.fltlft { /* this class can be used to float an element left in your page */
		float: left;
		margin-right: 8px;
	}
	.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
		clear:both;
		height:0;
		font-size: 1px;
		line-height: 0px;
	}

	#submenu {
		text-align:center;
		position:relative;
			top:0px;
			width:940px;
			height:170px;
		margin: 0px auto;
		padding:0px;
		background-image: url( "img/submenuBack.png" );
		background-repeat: no-repeat;
	}
		
		#sublist {
			height:39px;
			padding-left:135px;
		}
		
		
		
	#stage{
		text-align:center;
		position:relative;
			top:8px;
			left:0px;
			width:940px;
			height:530px;
		margin: 0 auto;
		padding:0px;
		background-image:url(img/stages/stage3.png);
		background-repeat:no-repeat;
	
	}
		#stagelist {
			position:relative;
				top:0px;
				left:355px;
				width:150px;
				height:26px;
		}
		#stageContent {
			background-color:#CCC;
		}
		#boeken{
			z-index:218;
		}
		#stageActs {
			position:absolute;
				left:151px;
				top:25px;
			height:505px;
			width:790px;
			z-index:209;
		}
		
			#stageAct1 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
			#stageAct2 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
			#stageAct3 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
			#stageAct4 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
			#stageAct5 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
			#stageAct6 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
			#stageAct7 { position:absolute;	height:200px; width:200px; z-index:210; cursor:move; display:none; }
		
		#stageInfo {
			position:absolute;
				left:1px;
			height:499px;
			width:200px;
			z-index:216;
			background-color:#2f0000;

			
			filter: alpha(opacity=70); /* internet explorer */
			-khtml-opacity: 0.7;      /* khtml, old safari */
			-moz-opacity: 0.7;       /* mozilla, netscape */
			opacity: 0.7;           /* fx, safari, opera */
	
		}
		#stageAct1info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stageAct2info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stageAct3info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stageAct4info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stageAct5info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stageAct6info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stageAct7info {	position:absolute;	left:1px;	height:499px;	width:200px;	z-index:218;	display:none;
		}
		#stage p{
			text-align: left;
		}
		#stage a#zoom img{ border:3px solid #FFF; margin-bottom:15px;}
		#stageChanger {
			text-align:center;
			position:absolute;
				left:0px;
				height:110px;
				width:938px;
			z-index:220;
			background-image: url( "img/submenuBack.png" );
			background-repeat: no-repeat;
			background-position: 0px -61px;
			display:none;

			filter: alpha(opacity=90); /* internet explorer */
			-khtml-opacity: 0.9;      /* khtml, old safari */
			-moz-opacity: 0.9;       /* mozilla, netscape */
			opacity: 0.9;           /* fx, safari, opera */
		}
			#stageChanger img{
				border: 5 px solid #fff;
				height:80px;
				margin:10px;
				cursor:pointer;
			}
			#stageChanger img:hover{
					
				filter: alpha(opacity=100); /* internet explorer */
				-khtml-opacity: 1;      /* khtml, old safari */
				-moz-opacity: 1;       /* mozilla, netscape */
				opacity: 1;           /* fx, safari, opera */
				border: 5 px solid #fedb93;
			}



.template #footer {
	text-align:center;
	padding: 00px;
	position: relative;
		top:15px;
		left:0px;
		height:40px;
		width:943px;
	z-index: 2;
	background-image:url(img/footerBack.png);
	background-position: -15px 0px;
	background-repeat:no-repeat; 
}

.template p {
	font-size:1.1em;
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}



h1 {font-size:1.6em;
	font-family:georgia;
	}
h2 {font-size:1.2em;
	font-family:georgia;
	margin:0px; margin-left:30px; margin-top:5px; }
h3 {font-size:1.1em;
	font-family:georgia;
	margin:0px;padding-top:10px;}
h4 {font-family:georgia;
	margin:0px;}
p {margin:0px;}
li {margin:0px;}
ul {margin:0px;}
#twitter_update_list li a { display:none;}
/*a{ font-size:16px;}*/

a:link.active	{	text-decoration: none;	font-weight: bold;	color:#FDFFC4;}

a:link 		{	text-decoration: none;	font-weight: bold;	color:#a50000;}
a:visited 	{	text-decoration: none; font-weight: bold; color:#a50000;}
a:hover 	{	text-decoration: none; font-weight: bold; color:#cc6600;}

#navlist a:link 		{	text-decoration: none;	font-weight: bold;	color:#FFF;}
#navlist a:visited 	{	text-decoration: none; font-weight: bold; color:#FFF;}
#navlist a:hover 	{	text-decoration: none; font-weight: bold; color:#FDFFC4;}

#navlist ul{
	text-align:left;
}
#navlist li{
	font-size:1.1em;
	display: inline;
	list-style-type: none;
	color:#600;	
	text-align:center;
	
	background-image: url(img/menuButton.png);
	background-repeat: no-repeat;
	background-position: 0 0px;
	float: left;
	height: 35px;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-top: 11px;
	width: 100px;
}
#navlist li.hover	{	background-position: 0 -50px;	}
#navlist li.down	{	background-position: 0 -100px;	}
#navlist li.active	{	background-position: 0 -150px;	}
#navlist li.space	{	background: none;	width:87px;}

#sublist ul{	text-align:center;}
#sublist li{
	
	font-size:1.1em;
	display: inline;
	list-style-type: none;
	color:#600;	
	text-align:center;
	
	background-image: url(img/submenuButton.png);
	background-repeat: no-repeat;
	background-position: 0 0px;
	float: left;
	height: 31px;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-top: 7px;
	width: 147px;			
}
#sublist li.hover	{	background-position: 0 -40px;	}
#sublist li.down	{	background-position: 0 -80px;	}
#sublist li.active	{	background-position: 0 -80px;	}
#sublist li	a{	color:#000	}
#sublist li.active a{	color:#a50000	}

#stagelist ul{	text-align:center;}
#stagelist li{
	font-size:1.1em;
	display: inline;
	list-style-type: none;
	color:#600;	
	text-align:center;
	
	background-image: url(img/submenuButton.png);
	background-repeat: no-repeat;
	background-position: 0 0px;
	float: left;
	height: 17px;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-top: 7px;
	width: 147px;			
}
#stagelist li.hover	{	background-position: 0 -40px;	}
#stagelist li.down	{	background-position: 0 -80px;	}
#stagelist li.active	{	background-position: 0 -80px;	}
#stagelist li	a{	color:#000	}
#stagelist li.active a{	color:#a50000	}


#stage h2{	color:#ffd172;	font-size:1.6em;margin:10px;margin-top:23px;	}
#stage p{	color:#fff;	margin:10px; font-size:14px	}



				
fieldset { border:0;margin-left:50px;padding:0; }
label { display:block; }
input.text,textarea { width:340px;font:13px/13px calibri,verdana,arial,sans-serif;color:#300;padding:3px;margin:1px 0;border:1px solid #ccc; }
input.submit {  padding:2px 5px;font:bold 13px/13px verdana,arial,sans-serif; }
					
                    
 a {color:a50000;font-weight: bold}