/*
        MUS - Multimedia Unieke Service
        Basic Stylesheet
        09-03-2010 - www.m-us.nl
        door: Bas Muskens (sebas@m-us.nl)
*/

/****

        Standards

****/

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

	html {
		background: url(../img/background.gif) repeat;
	}

	body {
		background: url(../img/backgroundTop.gif) no-repeat top left;
		font-size:62.5%;
	}

	h1, h2, h3, h4, h5, h6 , ul, li , ol, p, a, dl, dd, dt, blockquote{
		list-style: none;
		margin: 0;
		padding: 0;
	}

	p {color: #464646;}

	a {
		color: #71d4d2;
		text-decoration: underline;
	}

	a:hover {text-decoration: none;}
	
/* standaard form */

	.form {float:left; width: 100%;}
	
	.form fieldset{
		border:0;
	}

	.form legend {
		display:none;
	}

	.form label {
		float:left;
		display:block;
		font-weight:bold;
		padding:0;
		margin:0 0 0 3px;
	}
		

	.form p {padding:0 !important;margin:0 0 10px 0 !important;}

	.form input,.form textarea {
		border: 0;
		border-right: 1px solid #bdbdbd;
		border-bottom: 1px solid #bdbdbd;
		background: url(../img/formBackground.gif) no-repeat top left;
		font-style:normal;
		font-size: 1.2em;
		color: #464646;
		padding:5px;
		margin: 3px 0 0 0;
	}
	
	.form input{width: 268px;}
	.form textarea {width: 334px;}
	
	.form button {
		background:#71d4d2 url(../img/formButton.gif) no-repeat right;
		float: left;
		color: #FFF;
		border: 0;
		cursor:pointer;
		font-weight: bold;
		font-size: 1.4em;
		padding: 3px 30px 3px 15px;
		margin: 0px;
	}
	
	.form .errorMessage {border-right: 1px solid red;
		border-bottom: 1px solid red;}
	.form label.errorMessage,
	.form #singleErrorMessage{display:none;}
/****

        Site wrapper

****/

	.wrapper {
		 width: 940px;
		 position: relative;
		 overflow: hidden;
		 padding: 0;
		 margin: auto;
	  }
/****

        Logo, header & showcase

****/ 

	#logo {
		padding-top:30px;
		padding-left: 30px;
		z-index:30;
		position:relative;
	}
	
		#logo a,
		#logo img {
			border:0;
		}

.monkHome h1 {
	background: white;
	color: #171717;
	letter-spacing:-1px;
	font-size:2.4em;
	float:left;
	padding: 30px 40px;
	font-weight:normal;
	line-height:1.6em;
}

.monkHome h1 a{text-underline:none;}

#showcase {
	background: url(../img/showcase.jpg) no-repeat;
	float:left;
	width:940px;
	height:389px;
	margin:20px 0;
	}

	#showcase blockquote p	{
		text-indent:-5000px;
	}
/****

        Content

****/

	#content {
		background: white;
		width: 940px;
		float:left;
		padding: 30px;
		margin-top: 20px;
		position:relative;
	}
	
		#content h1 {
			float:left;
			color: #171717;
			letter-spacing:-1px;
			font-size:2.4em;
			font-weight:normal;
			line-height:1.4em;
			width: 675px;
			padding-bottom: 20px;
		}
		
		#content h1 a{text-decoration:none; color:#70d4d2;}
		
			#content p {
			float:left;
			font-size:1.2em;
			line-height:1.6em;
			width: 675px;
			}
			
				#content img.workSelection  {padding-left: 50px; }
	
	#content ul {float:left;width:100%;}
	
	#content li {
		float:left;
		width:421px;
		border-bottom: 1px dotted #d9d9d9;
		padding: 0 0 20px 0;
		margin: 25px 19px 25px 0;
	}
	
		#content li a {
			float:left;
			width:421px;
			min-height:259px;
			display:block;
			margin-bottom: 10px;
		}
		
		#content li img {border: 0;}
		
			#content li p {
				font-size:1.2em;
				line-height: 1.6em;
				color: #464646;
				width:421px;
			}
	
	
	.monkContent #content {
		width:100%;
		min-height:489px;
		background: white url(../img/sfeerArrow.gif) no-repeat 548px 517px;
	}
	
	.monkContent #content h1,
	.monkContent #content h2,
	.monkContent #content p{
		float:left;
		width: 465px;
		clear:both;
	}
	
	.monkContent #content h1{
		font-size:2.4em;
		font-weight:normal;
		line-height:1.4em;
		padding-bottom: 20px;
	}
	.monkContent #content h2{
		color:#0b0b0b;
		font-size:1.6em;
		padding-bottom: 15px;
	}
	
	.monkContent #content p {
		font-size:1.2em;
		line-height:1.6em;
		padding-bottom: 35px;
	}
	
	.monkContent #content img.sfeerbeeld {
		position:absolute;
		top: 0;
		right:60px;
	}
	
	.monkPortfolio #content h1,
	.monkPortfolio #content p{
		width:880px;
	}
	
	.monkPortfolio #content .portfolioBig {
		width: 469px;
		float:left;
		margin-right:10px;
	}
	
	.monkPortfolio #content .portofiloSmall {
		width:380px;
		float:right;
		margin-right: 50px;
	}
	
	.monkPortfolio #content div.portofiloSmall img {
		margin-bottom: 10px;
	}
	
	.monkPortfolio #content .portfolio {
		float:left;
		width:910px;
		margin: 0px 0px 20px 0;
	}
	
	.portfolio p.backButton a {background: url(../img/backArrow.gif) no-repeat left; padding-left: 30px; display:block; float:right; margin-right: 20px; margin-bottom: 30px; margin-top:15px;}
	
	
	
/****

       Intro

****/  
	 #intro {
	 background: white;
	 width: 940px;
	 float:left;
	 margin: 20px 0 60px 0;
	 padding: 30px 28px;
	 }
	 
	 #intro h2 {
		color:#0b0b0b;
		font-size:1.6em;
		border-bottom: 1px dotted #d9d9d9;
		padding-bottom: 10px;
		padding-left: 10px;
		margin-bottom: 20px;
	 }
	 
		#intro p, #intro li {
			font-size: 1.2em;
			line-height:1.6em;
			padding-left: 10px;
		}
		
		#intro .help {float:left; width:340px; margin-right: 45px;}
		
		#intro .work {float:left; width:180px; margin-right: 45px;}
		#intro .work li {
			float:left;
			background: url(../img/bullWork.gif) no-repeat 3px 7px;
			padding-left: 20px;
			width:100%;
		}
		
		#intro .social {float:left; width:220px; margin-right: 45px;}
		#intro .social li  {float:left; padding:0; margin:0;}
		#intro .social li a {
			float: left;
			background: url(../img/social.gif) no-repeat;
			text-indent: -5000px;
			width: 70px;
			height: 25px;
		}

			#intro .social li.behance a {background-position: -3px 0px;}
			#intro .social li.flickr a {background-position: -80px 0px;}
			#intro .social li.twitter a {background-position: -155px 0px;}
			#intro .social li.linkedin a {background-position: -2px -30px;}

	 
/****

        Footer

****/

	#footer {
		background:#111 url(../img/backgroundFooter.jpg) no-repeat top center;
		float:left;
		width:100%;
		font-size: 1.2em;
		min-height: 165px;
		position:relative;
	}
	
		#footer .navigation {
			float:left;
			width: 350px;
			color: #7d7c7c;
			padding: 30px 40px;
		}
		
		#footer .navigation a{padding: 0 5px;}
		
		#footer .copyright {
			float:right;
			color: #7d7c7c;
			width: 350px;
			padding: 30px 40px;
		}
		
		#footer .copyright img{padding-right:10px;}
	
/****

        Navigation

****/
	
	#navigation {
		overflow:hidden;
		width: 350px;
	}
	
		#navigation h2 {
			display: none
		}
		
			#navigation ul {
				position:absolute;
				z-index: 30;
				top: 2px;
				left: 590px; 
				padding: 0;
				margin: 0;
			}
			
				#navigation li {
					float: left;
					margin: 0;
					padding: 0;
				}

					#navigation li a {
						float: left;
						display:block;
						height: 87px;
						width: 71px;
						text-indent:-5000px;
						padding: 0 4px;
						margin: 4px 0 0 0;
					}
		
						#navigation li.hello a{background: url(../img/navHello.gif) no-repeat top;}
						#navigation li.hello a.active {background:url(../img/navHelloActive.gif) no-repeat top; min-height: 125px;}
						#navigation li.about a {background: url(../img/navAbout.gif) no-repeat top;}
						#navigation li.about a.active {background:url(../img/navAboutActive.gif) no-repeat top; min-height: 125px;}
						#navigation li.email a{background: url(../img/navEmail.gif) no-repeat top;}
						#navigation li.email a.active {background:url(../img/navEmailActive.gif) no-repeat top; min-height: 125px;}
						#navigation li.works a{background: url(../img/navWorks.gif) no-repeat top;}
						#navigation li.works a.active {background:url(../img/navWorksActive.gif) no-repeat top; min-height: 125px;}
						
						#navigation li.store a{background: url(../img/navStore.gif) no-repeat top;}
						#navigation li.store a.active {background:url(../img/navStoreActive.gif) no-repeat top; min-height: 125px;}

/****

       Style zone of MUS - Multimedia Unieke Servie

*****/

	#mus {
		float: right;
		position:absolute;
		bottom: 0;
		width: 100%;
		padding: 0;
		margin: 0;
	}

		#mus p {
			float: right;
			color: #7d7c7c;
			font-size: 0.9em;
			margin: 14px 5px 0 0;
		}

			#mus img {
				float: right;
				border: 0px none;
			}

				#mus a {
					text-decoration: underline;
				}

					#mus a:hover {
						text-decoration: none;
					}