/*
	MUS - Multimedia Unieke Service
	Basis Stylesheet
	25-05-2009 - www.m-us.nl
	door: Bas Muskens (sebas@m-us.nl)
*/

/*****************

	Standaard

*****************/

	html,body{
		font-family: Arial, Helvetica, sans-serif;
		color: #1f1f1f;
		margin:0;
		padding:0;
	}

	html{
		background:#c9da2c url(../img/bg-algemeen.jpg) repeat-x; /*grijs = #b5b5b5*/
	}

	body {
		font-size:62.5%;
	}

	h1,h2,h3,h4,h5,h6 {
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
	}

	ul, li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	fieldset, legend, label {
		margin: 0;
		padding: 0;
	}
	
	img,img a	{border:0;}
	
	a {
		color: #657400;
		text-decoration: underline;
	}

	a:hover {
		text-decoration: none;
	}

/*****************

	Site & Vormgeving

*****************/

	#Home {
		background: url(../img/sfeerbeeld-home.png) no-repeat bottom center;
		min-height: 539px;
		height: 539px;
	}
	
		#Home h1 {
			text-indent:-5000px;
		}

	#site {
		background: url(../img/bg-site.jpg) repeat-y top right;
		margin:auto;
		overflow:hidden;
		position:relative;
		width: 990px;
		min-height: 539px;
	}
		#Service,
		#Ontwerp,
		#Portfolio,
		#Mus,
		#Contact,
		#Categorieen,

		#Nieuws		{
			background: url(../img/sfeerbeeld-algemeen.png) no-repeat top center;	
		}
	
			#Service #siteBg,
			#Ontwerp #siteBg,
			#Portfolio #siteBg,
			#Mus #siteBg,
			#Contact #siteBg,
			#Categorieen #siteBg ,
			#Nieuws #siteBg{
				background: url(../img/bg-service.jpg) no-repeat top right;
				overflow:hidden;
			}
	
				#Home #site {
					background: url(../img/bg-home.jpg) no-repeat bottom right;
				}
		
					#Home #vormBoom {
						background: url(../img/vorm-boom.png) no-repeat bottom;
						width: 220px;
						height: 447px;
						position: absolute;
						z-index: -1;
						bottom: 0; /* -18 */
						left: 268px;
					}
					
						#Home #ontwerpSucces h3 a {
							text-indent: -5000px;
							display: block;
							width: 320px;
							height: 50px;
							position: absolute;
							right: 100px;
							bottom: 0;
						}
	
		#logo {
			padding-left:20px;
			padding-top:20px;
			position:relative;
			z-index:1;
			width:185px;
		}
		
			#logo a,
			#logo img { border:0; }
		
				#site h1 {
					font-size: 1.8em;
				/*	position: absolute;  */
					position: relative; 
					width: 280px;
					left: 480px;
					top: 0px; 
					padding: 8px 0;
					margin: 0;
				}
				
				  #skip {
					position: absolute;
					top: -100em;
					}
		
/* standaard formulier */
	.formulier fieldset{
		border: 1px solid #b8b8b8;
	}

	.formulier legend {
		font-family:Georgia, "Times New Roman", Times, serif;
		font-weight: bold;
		font-size: 1.4em;
		color: #1f1f1f;
		padding: 0 0.4em;
	}

	.formulier label {
		font-weight: bold;
		color: #5b5b5a;
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		float: left;
		width: 25%;
		cursor:pointer;
	}

	.formulier p {
		font-size: 1.1em;
		padding: 0;
		margin: 0;
	}

	.formulier input, .formulier select, .formulier textarea {
		width: 75%;
		/* background:#FFF url(../img/formulier-input.png) no-repeat top right; */
		background: none;
		border: 0;
		border-bottom: 1px solid #b8b8b8;
		border-right: 1px solid #b8b8b8;
		color: #333;
		font-style:normal;
		font-size: 1.2em;
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		padding:0.3em 0.2em;
		margin: 0.3em 0;
	}

	.formulier select { width: 50%; }

	.formulier #address {background: #FFF;}
	
	.formulier button {
		background:#8d9b0a;
		float: left;
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		color: #FFF;
		border: 0;
		cursor:pointer;
		font-weight: bold;
		font-size: 1.2em;
		padding: 0.5em 0.3em;
		margin-left: 20px;
	}
	
	.formulier .errorMessage {border-bottom: 1px solid #FF0000; border-right: 1px solid #FF0000;}
	
	.formulier label.errorMessage {display:none;}
		
		
/*****************

	display: none is out!

*****************/		

	#Home #sfeerbeeld h2,
	#Home #sfeerbeeld p,
	#Portfolio #content h2,
	#Portfolio #sfeerbeeld h2,
	#Portfolio #content ol li p,
	#footerContent h2 {
			position: absolute;
			left: -1000px;
			top: -1000px;
			width: 0;
			height: 0;
			overflow: hidden;
			display: inline;
	}
		
/*****************

	Twitter

*****************/
	
	#Tweets {position:relative;z-index: 2;}
	#Tweets h2 {padding:20px 0 10px 20px !important;color:white!important;font-weight:bold !important;font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif !important;text-shadow: 0.04em -0.04em #657400;}
	#Tweets ul {min-height: 100px;float:left;}
	#Tweets li {position:relative; padding: 0 20px; }
	#Tweets li span.twitterPrefix {display:block;}
	#Tweets li span.twitterPrefix a{ font-size: 1.6em; color:white; font-weight:bold;}
	#Tweets li span.twitterStatus {display:block;float:left;line-height: 1.4em;font-size: 1.6em; padding-top:5px;}
	#Tweets li span.twitterTime {font-size: 1.4em;color:white;font-weight:bold;position: absolute; top:4px; left: 125px;}

.bottom{
	float:left;
	background: url(../img/bottomIntro.gif) no-repeat bottom left;
	width: 927px;
	height: 21px;
	margin-top: -21px;
	margin-bottom: 20px
}
/*****************

	Content

*****************/
	
	#content {
		float: left;
		width: 445px;
		min-height: 398px;
		padding-top: 30px;
	}
	
	#Home #content {
		width: 480px;
		min-height: 200px;
		padding-top: 30px;
	}
	
		#content p {
			font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
			font-size: 1.3em;
			line-height: 1.4em;
			padding: 0 70px 15px 20px;
			margin: 0;
		}
		
			#content p a {color: #333; font-weight: bold;}
		
			#Home #content h2 {
				font-size: 2.5em;
				color:#303030;
				font-family: Arial, Helvetica, sans-serif;
				font-weight: normal;
				padding: 0 30px 10px 20px;
				margin: 0;
			}
			
			#Home #content h3 {
				font-size: 2.0em;
				color: #303030;
				font-weight: normal;
				font-style: italic;
				font-family: georgia, serif;
				padding: 0 20px 5px 20px;
				margin: 0;
			}
			
			#Home #content h3 a{font-weight:bold;}
			
			#Home #content h4 {
				font-size: 1.2em;
				color: #303030;
				font-weight: normal;
				font-style: italic;
				font-family: georgia, serif;
				padding: 0 30px 30px 20px;
				margin: 0;
			}
			
			#Home #content p.homeTxt {
				font-size: 1.8em;
				line-height: 1.3em;
				font-family: Arial, Helvetica, sans-serif;
				padding-bottom: 40px;
			}
			
			#Home #content p.homeNieuws strong {
				color: #FFF;
				font-size: 1.6em;
				font-weight: bold;
			}
			
			#Home #content p {padding: 0 40px 15px 20px;}
			
		
/*****************

	Sfeerbeeld

*****************/

			#Home #sfeerbeeld {
				float: right;
				width: 495px; /*525*/
			}
			
			#sfeerbeeld {
				float: right;
				width: 525px;
			}
			
			#sfeerbeeld p {
				font-size: 1.2em;
				margin-left: 25px;
			}
			
				#Portfolio #sfeerbeeld p {
					font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
					font-size: 1.3em;
					line-height: 1.4em;
					margin: 0 220px 0 20px;
				}
	
				#Service #sfeerbeeld h2,
				#Mus #sfeerbeeld h2,
				#Ontwerp #sfeerbeeld h2,
				#Nieuws #sfeerbeeld h2{
					margin: 0 0 0 15px; 
					padding: 0 0 10px 0; 
					font-size: 1.4em;
				}
				
				#Service #sfeerbeeld p,
				#Mus #sfeerbeeld p,
				#Ontwerp #sfeerbeeld p,
				#Nieuws #sfeerbeeld p{
					width: 450px;
					line-height: 1.6em;
					margin: 0 0 0 15px; 
					padding: 0 0 10px 0;
				}
				
				#sfeerbeeld h2.header {height: 30px;}
/*
	pagina service + ontwerp
*/

	#Ontwerp #sfeerbeeld h3 {
		font-size: 1.4em;
		color: #787878;
		margin: 20px 0 10px 15px;
	}
	
		#Ontwerp #sfeerbeeld .inhoud ul,
		#Service #sfeerbeeld .inhoud ul {
			padding: 0;
			margin: 0 0 0 30px;
		}

			#Ontwerp #sfeerbeeld .inhoud li,
			#Service #sfeerbeeld .inhoud li {
				float: left;	
				width: 430px;
				font-size: 1.2em;
				margin: 0px 0 10px 15px;
			}
				
/*
	pagina mus
*/

				#Mus #sfeerbeeld .inhoud ul {
					padding: 0;
					margin: 0 0 0 30px;
				}

					#Mus #sfeerbeeld .inhoud li {
						float: left; 		
						width: 160px;
						margin: 0 0 20px 0;
						padding: 0;
					}
					
					#Mus #sfeerbeeld .inhoud li strong {display: none;}

					#Mus #sfeerbeeld .inhoud li strong {font-size: 1.2em;}
					#Mus #sfeerbeeld .inhoud li img {float: left; margin: 5px 5px 5px 0px;}
					#Mus #sfeerbeeld .inhoud li p {float: left; padding: 0; margin: 5px 0 0 0;}
					
/*
	Cursor pointer onder H2 bij sfeerbeeld
*/
	
   	#sfeerbeeld h2.openu	{
		background: url(../img/openu.gif) no-repeat top left; 
		cursor:pointer;
		width: 320px;
	}
	
	#sfeerbeeld h2.openu a {padding-left: 20px;}
	#sfeerbeeld h2.active {background-position: 0 -34px;}
		
	
/*****************

	Porftolio op Home

*****************/	
		
	#Home #sfeerbeeld {
		background: url(../img/porftolio-home.png) no-repeat top;
		min-height: 270px;
	}
	
		#Home #sfeerbeeld img {
			border: 0;
			/*	margin: 12px 0 0 28px; */
			padding: 0;
			margin: 0;
		}
	
		.next, .prev {
	cursor:pointer;
}

#screen{
	position:relative;
	display: block;
	float: left;
	width: 469px;
	height: 266px;
	margin: 0 0 0 13px;
	padding: 0;
}
	#screen .next, #screen .prev{
		position:absolute;
		top:110px;
	}
	#screen .prev{
		left:22px;
	}
	#screen .next{
		right:18px;
	}
	
#sections{
	clear:left;
	width: 413px;
	display: block;
	z-index: -1200;
	height: 220px;
	overflow: hidden;
	padding: 0;
	margin: 15px 0 0 30px;
}
	
	#sections ul{
		width: 3600px;
	}
	
		#sections li{
			float:left;
			padding:0;
		}

	#navigation{
		display:none;
	}

/*****************

	Portfolio Pagina

*****************/
	
	#Portfolio #content {
		float: left;
		width: 443px;
		min-height: 428px;
	}
		
		#Portfolio #content #portfolioStuk {
				background: url(../img/portfolio-bg.jpg) repeat-y;
				float: right;
				position: relative;
				overflow: hidden;
				width: 267px;
				/* margin: 30px 0 0 0; */
				margin: 0;
				padding: 0;
		}
		
				#Portfolio #content #portfolioStuk h3 {
					background: url(../img/portfolio-top.jpg) no-repeat top;
					text-indent: -5000px;
					overflow: hidden;
					width: 267px;
					padding: 150px 0 0 0;
					margin: 0;
				}
		
					#Portfolio #content ol {
						background: url(../img/portfolio-bottom.jpg) no-repeat bottom;
						position: relative;
						float: left;
						top: -50px;
						left: 0px;
						min-height: 330px;
						width: 267px;
						padding: 0 0 40px 0;
						margin: -120px 0 -50px 0;
					}
	
						#Portfolio #content ol li {
							float: left;
							background: url(../img/porfolio-blok-bg.gif) no-repeat;
							width: 35px;
							margin: 20px -15px -5px 25px;
							padding: 3px 0 3px 3px;
						}

								#Portfolio #content ol img {
									border: 0px;
									width: 29px;
									height: 29px;
								}
			
									#Portfolio #content ol img:hover {
										filter: alpha(opacity=50); 
										opacity: .5; 
										-moz-opacity: .5;
									}
									
			
			#Portfolio #sfeerbeeld {
				position: relative;
				font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
			}
			
				#Portfolio #sfeerbeeld img {
					border: 0;
				}
				
					#Portfolio #sfeerbeeld ul,li {
						padding: 0;
						margin: 0;
					}
					
					#Portfolio #sfeerbeeld ul {
						padding: 80px 0 0 0;
					}
				
						#Portfolio #sfeerbeeld li {
							float: left;
							width: 200px;
							margin: 0;
							padding: 0;
						}
							
							#Portfolio #sfeerbeeld li p {
								color: #333;
								font-size: 1.2em;
								padding: 0 2em 1em 0;
								margin: 0;
							}
							
							#Portfolio #sfeerbeeld li a {
								color: #999;
								text-align:center;
							}
							
								#Portfolio #sfeerbeeld li h3 {
									font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
									font-size: 1.2em;
									padding: 0 0 1em 0;
								}
								
									#Portfolio #sfeerbeeld li em {
										color: #666;
										font-style: normal;
										text-transform:uppercase;
									}
					
						
/*****************

	Contact

*****************/	

	
	#Contact #content {
		width: 400px;
		margin: 30px 0 0 20px;
	}
	
	#Contact address {
		font-style:normal;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.4em;
		color: #5b5b5a;
		margin: 0 0 15px 20px
	}
	
		#Contact #content p {
			padding: 0;
			margin: 5px 0;
		}
	
		#Contact fieldset {border: 0;}
	
		#Contact legend {display:none;}
		
		#Contact #sfeerbeeld h2 {
			font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
			color: #5b5b5a;
			font-size: 1.8em;
			margin: 0 0 10px 20px;
		}
		
		#googlemap {
			border: 4px solid #b8b8b8;
			width: 400px;
			height: 250px;
			overflow: hidden;
			margin: 0 0 20px 0px;
		}
		
		#googlemap span {display:none;}

			#Contact #gmaddress fieldset {
				font-size: 1.2em;
				border: 0;
			}
		
				#Contact #gmaddress fieldset label {
					width:100%;
					float: left;
					font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
					font-size: 1.2em;
					display: block;
					color: #5b5b5a;
					padding: 0 0 10px 0px;
				}
		
					#Contact #gmaddress fieldset input {
						width:60%;
						float: left;
						margin: 0 0 0 0px;
					}
		
						#Contact #gmaddress fieldset button {
							float: left;
							margin-left:10px;
							padding: 0.3em 0.2em;
						}
						
/*****************

	Categorieen

*****************/

	#Categorieen #sfeerbeeld li a {
	/*	background: url(../img/categorieen-pijl.gif) no-repeat left top; */
		display: block;
		padding: 0px 0 5px 15px;
		margin: 0 0 0 10px;
	}
	
	#Categorieen #sfeerbeeld li h2 {
		font-size: 1.4em; 
		}
	
	/* #Categorieen #sfeerbeeld #CatPhp p.overText {display: inline;}	*/
	
	#Categorieen #sfeerbeeld p.inhoud {
				display:none;
				font-size: 1.2em;
				line-height: 1.6em;
				padding: 5px 50px 5px 10px;
				margin: 0;
			}
			
	
/*****************

	Footer

*****************/

    #Home #footerBGSteun {
		background:url(../img/footerhome-bg.jpg) repeat-x top;
		min-height: 480px;
	}
	
	#footerBGSteun {
		background: url(../img/footer-bg.jpg) repeat-x top;
		min-height: 350px;
	}

		#footer {
			background: url(../img/footer-bg.png) no-repeat top center; 
			min-height: 300px;
		}
		
			#Home #footer {
				background: url(../img/footer-bg-home.png) no-repeat top center; 
				height: 410px;
			}
	
				#footer #footerContent {
					background: url(../img/footer-algemeen.png) no-repeat top right; 
					overflow:hidden;
					margin:auto;
					width: 970px;
					min-height: 120px;
					padding: 100px 0 0 20px;
					font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
					font-size: 1.1em;
					color: #FFF; 
				}
			
					#Home #footer #footerContent {
						background: url(../img/footer-algemeen-home.jpg) no-repeat top right; 
						min-height: 410px;
					}	
						
						#footerContent ul { 
							list-style-type: none;	
							overflow: hidden;
							line-height: 200%;
							display: block;
							width: 410px;
							margin: -50px 0 0 0;
						}
						
							#footerContent li {
								float: left;
								padding: 2px 0px;
								margin: 0px 6px;
							}
							
								#footerContent li a {color: #FFF; text-decoration: none;}
								#footerContent li a:hover {color: #c9da2c;}
							
								#Contact #footerContent address {margin:0;}
								
								#footerContent address {
									font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
									font-size: 1.1em;
									font-style: normal;
									color: #FFF;
									float: right;
									padding: 75px 0 0 0px;
								}
								
								#Home #footerContent address { padding: 215px 0 0 0px; }
								
									#footerContent p {
										font-size: 1em;
										float: right;
										color: #FFF;
										margin: 10px 0 0 500px;
									}
										#footerContent p a {color: #FFF;}
										
			/*#Categorieen #footer ul {display:none;}
			#Categorieen #footerContent address,
			#Categorieen #footerCentent p  {margin-top: 80px;} */
			#footer ul {display:none;}
			#footerContent address,
			#footerCentent p  {margin-top: 80px;}	

/*****************

	Navigatie

*****************/	

	#navigatie {
		width: 990px;
		z-index: 999;
		margin: auto;
	}
	

	#navigatie h2 {
		position: absolute;
		left: -1000px;
		top: -1000px;
		width: 0;
		height: 0;
		overflow: hidden;
		display: inline;
	}

	#navigatie ul {
		position:absolute;
		width: 500px;
		top: 105px;
		padding: 0;
	}

	#navigatie li {
		float: left;
		background: url(../img/navigatie-bg.png) no-repeat top right;
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		font-size: 1.5em;
		font-weight: bold;
		text-align: center;
		display: block;
		padding: 1em 1.4em;
		margin: 0;
	}	

	#navigatie li a {
		color: #EFEFEF;
		text-decoration: none;
		padding: 0;
		margin: 0;
	}	

	#navigatie li p {
		padding: 0;
		margin: 0;
	}	

	#navigatie li a:hover,
	#navigatie li.actief a {
		/* background: url(../img/navigatie-mus.png) no-repeat top center; */
		color: #657400;
		padding: 1em 0 0 0;
	}
	

/* Sub-Menu Portfolio */

	#Portfolio #content ul {
		float: left;
		width: 150px;
		margin: 30px 0 0 0;
		padding: 0;
	}	

		#Portfolio #content ul li {
			border-bottom: 1px dotted #333;
			padding: 10px 0;
			margin-left: 20px;
		}

			#Portfolio #content ul li a {
				font-size: 1.6em;
				font-weight: bold;
				font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				text-decoration: none;
				color: #333;
			}			

			#Portfolio #content ul li a:hover,
			#Portfolio #content ul li.actief a {
				color: #FEFEFE;
			}
			
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */

.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
}