@charset "utf-8";

/*  
Theme Name: Remix
Theme URI: http://www.remixdesign.nl/
Description: Portfolio van een student en webdesigner Kevin van der Wijst
Version: 6.0
Author: Kevin van der Wijst
Author URI: http://www.remixdesign.nl/
*/



/*------------------------------------------------------------------
[Table of Contents]

1. Body
2. Top / #top
3. Content / #content
	3.1. Main / #main
	3.2. Side / #side
4. Foot / #foot
	
X. Misc
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
[1. Body]
*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
		
	body {
		background: #dad8d1;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #666;
		min-height: 100%;
	}
		
		
	img { border: none; margin: 0; padding: 0; }
		
	a, a:visited { color: #000; text-decoration: none; }
	a:hover { color: #000; text-decoration: underline; }
		
			
	ul { list-style-position: inside; }
		ul li { list-style-position: inside; }
	ol { list-style-type: decimal; list-style-position: inside; }
		ol li { list-style-type: decimal; list-style-position: inside; }
		
		
	input { background: #fff; border: 1px solid #e6e6df; font-family: Arial, Helvetica, sans-serif; padding: 4px; font-size: 12px; color: #85858c; }
	textarea { background: #fff; border: 1px solid #e6e6df; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #85858c; line-height: 17px; overflow: auto; }
		.submit-button { padding: 3px 0 5px; }
		.no-input { background: none; border: none; width: auto; }
		
	
		.left { float: left; display: inline; overflow: hidden; }
		.right { float: right; display: inline; overflow: hidden; }
		.clear { clear: both; font-size: 1px; }
			
	hr { height: 0; border: none; border-top: 1px solid #e6e6df; margin: 0 0 20px; }



/*------------------------------------------------------------------
[2. Top / #top]
*/

	#top { background: url(images/top-bg.png) bottom center no-repeat; width: 100%; height: 350px; position: relative; }
		#top.home { background-color: #57bfc5; }
		#top.diensten { background: #f2401c url(images/top-diensten-bg.png) bottom center no-repeat; }
		#top.werk { background-color: #2dad96; }
			#top.small { background-color: #2dad96; height: 280px; }
				#top.small .wrap .text { padding: 88px 0 0; }
					#top.small .wrap .text .date { font-size: 14px; color: #c6f1e9; margin: -40px 0 0; }
						#top.small .wrap .text .date span.cufon-canvas { margin: 0; height: 16px; }
		#top.informatie { background-color: #73bc0c; background-image: none; width: 100%; }
			#top.informatie .background { position: absolute; z-index: 1; width: 100%; }
				#top.informatie .background img { width: 100%; height: 350px; display: block; }
			#top.informatie .bg-wrap { position: relative; z-index: 9999; width: 960px; margin: 0 auto; }
		#top.contact { background-color: #8e9d94; background-image: none; width: 100%; }
			#top.contact .background { position: absolute; z-index: 1; width: 100%; }
				#top.contact .background img { width: 100%; height: 350px; display: block; }
			#top.contact .bg-wrap { position: relative; z-index: 9999; width: 960px; margin: 0 auto; }
	
		#top .wrap { background: url(images/top-wrap-bg.png) 0 92px repeat-x; width: 960px; margin: 0 auto; overflow: hidden; padding: 45px 0 0; }
			#top .wrap .logo { width: 103px; height: 33px; float: left; display: inline; overflow: hidden; }
			#top .wrap #nav { width: 420px; height: 43px; padding: 5px 0 0; font-size: 17px; float: right; display: inline; overflow: hidden; }
				#nav ul { list-style: none; padding: 0 0 29px; float: right; display: inline; overflow: hidden; }
					#nav ul li { float: left; display: block; font-weight: bold; }
						#nav ul li a, #nav ul li a:visited { display: inline-block; padding: 6px 18px 29px 3px; opacity: 1.0; filter: alpha(opacity=100); color: #fff; text-decoration: none; }
						#nav ul li a:hover { background: url(images/nav-hover.png) 0 38px repeat-x; color: #fff; text-decoration: none; }
					#nav ul li.current { background: url(images/nav-hover.png) 0 38px repeat-x; }
			#top .wrap .text { clear: both; padding: 108px 0 0; font-size: 45px; color: #fff; }
				#top .wrap .text p { margin: 0; padding: 0; }
					#top .wrap .text p span.cufon-canvas { margin: 6px 0 0; }
				#top.home .wrap .text { padding: 108px 0 0; }
					
		#top .image { position: absolute; z-index: 89; top: 0; }
			#top.home .image { top: 80px; left: 47%; }
			#top.diensten .image { top: 80px; left: 48%; }
			#top.werk .image { top: 85px; left: 49%; }
				#top.small .image { top: 100px; left: 49%; background: url(images/top-small.png) 0 0 no-repeat; padding: 20px 20px 7px 190px; }
			#top.informatie .image { top: 80px; left: 42%; }
			#top.contact .image { top: 85px; left: 39%; }



/*------------------------------------------------------------------
[3. Content / #content]
*/

	#content { background: #fff; width: 100%; }
	
		#container { width: 960px; margin: 0 auto; padding: 30px 0; overflow: hidden; position: relative; }


	/*--------------------------------------------------------------
	[3.1. Main / #main]
	*/
	
		#main { width: 630px; float: left; display: inline; overflow: hidden; }
			
			#main h1 { background: #ffea00; font-size: 20px; color: #000; display: inline-block; padding: 5px 5px 4px; }
			
			#main hr { border: none; border-top: 1px solid #e0e0e0; width: 300px; margin: 0; }
			
			#main .intro { font-size: 19px; color: #30332d; min-height: 168px; padding: 0 0 30px; }
				#main .intro p { margin: 0; padding: 0; line-height: 35px; padding: 0 0 12px; }
					#main .intro p span.cufon-canvas { margin: 5px 0 12px; }
			
			#main .info { font-size: 19px; color: #30332d; min-height: 168px; padding: 0 0 20px; }
				#main .info h1 { margin: 0 0 20px; }
				#main .info p { margin: 0; padding: 0; line-height: 35px; padding: 0 0 6px; }
					#main .info p span.cufon-canvas { margin: 5px 0 12px; }
				#main .info a, #main .info a:visited { background: #ddd; display: inline-block; padding: 10px 5px 3px; color: #000; text-decoration: none; }
				#main .info a:hover { background: #ffea00; color: #000; text-decoration: none; }
					#main .info a span.cufon-canvas { margin: -6px 0 0; }
					
			#main .entry { padding: 0 0 5px; }
				#main .entry p { margin: 10px 0; padding: 0; line-height: 25px; font-size: 14px; color: #444; }
				#main .entry a, #main .entry a:visited { background: #ddd; font-weight: bold; color: #000; text-decoration: none; }
				#main .entry a:hover { background: #ffea00; color: #000; text-decoration: none; }
				
			#main .recent-werk { overflow: hidden; }
				#main .recent-werk .top { overflow: hidden; }
					#main .recent-werk .top h1 { background: #ffea00; font-size: 20px; color: #000; display: inline; float: left; overflow: hidden; padding: 5px 5px 4px; }
					#main .recent-werk .top a, #main .recent-werk .top a:visited { background: url(images/link-go.png) top right no-repeat; float: right; display: inline; overflow: hidden; 
							padding: 9px 20px 5px 0; font-weight: bold; font-size: 13px; color: #666; text-decoration: none; }
					#main .recent-werk .top a:hover { background: url(images/link-go.png) top right no-repeat; color: #000; text-decoration: none; }
				#main .recent-werk .wrap { width: 630px; overflow: hidden; padding: 20px 0 0; }
					#main .recent-werk .wrap .item { width: 300px; float: left; display: block; }
						#main .recent-werk .wrap .item .image { background: #fff; margin: 0 0 20px; height: 160px; }
						#main .recent-werk .wrap .item h2 { font-size: 18px; padding: 0 0 5px; }
							#main .recent-werk .wrap .item h2 a, #main .recent-werk .wrap .item h2 a:visited { color: #555; text-decoration: none; }
							#main .recent-werk .wrap .item h2 a:hover { color: #000; text-decoration: none; }
						#main .recent-werk .wrap .item p { font-size: 12px; color: #666; line-height: 23px; }
						#main .recent-werk .wrap .item.last { padding: 0 0 0 30px; }
						
			#main .text { padding: 0 0 30px; }
				#main .text p { font-size: 13px; color: #555; line-height: 23px; padding: 16px 0 30px; }
				
			#main .form { padding: 0; width: 630px; overflow: hidden; }
				#main .form fieldset { overflow: hidden; padding: 0 0 15px; }
					#main .form fieldset label { float: left; display: inline; overflow: hidden; font-weight: bold; font-size: 12px; margin: 9px 0 0; color: #666; width: 150px; padding: 0 20px 0 0; cursor: text; }
						#main .form fieldset label span { color: #ee0955; display: inline-block; padding: 0 0 0 2px; }
					#main .form fieldset .input { float: right; display: inline; overflow: hidden; width: 430px; }
						#main .form fieldset input { background: #fff; border: 1px solid #e0e0e0; margin: 2px; padding: 6px 5px; width: 250px; font-weight: bold; font-size: 15px; color: #666;
								border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; 
								outline-radius: 4px; -moz-outline-radius: 4px; -webkit-outline-radius: 4px; }
						#main .form fieldset textarea { background: #fff; border: 1px solid #e0e0e0; margin: 2px; padding: 5px; width: 400px; font-size: 12px; color: #666; line-height: 21px;
								border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; 
								outline-radius: 4px; -moz-outline-radius: 4px; -webkit-outline-radius: 4px; }
							#main .form fieldset input:focus, 
							#main .form fieldset textarea:focus { border-color: #5e98d1; outline-color: #b8cfe5; outline-style: solid; outline-width: 2px; }
								@media screen and (-webkit-min-device-pixel-ratio:0) {
									#main .form fieldset input:focus, #main .form fieldset textarea:focus { outline-style: none; outline: none; }
								}
					#main .form fieldset .input.last { float: none; display: block; overflow: hidden; padding: 0 0 0 200px; }
						#main .form fieldset .input.last .button { float: left; display: inline; overflow: hidden; }
						#main .form fieldset .input.last .tip { float: left; display: inline; overflow: hidden; padding: 6px 0 0 16px; font-size: 11px; color: #777; }
							#main .form fieldset .input.last .tip span { color: #ee0955; display: inline-block; padding: 0 2px 0 0; }
				#main .form .alert { padding: 0 0 30px; }
					#main .form .alert h2 { font-size: 16px; color: #000; }
					#main .form .alert p { font-size: 13px; color: #555; line-height: 23px; padding: 10px 0 30px; }


	/*--------------------------------------------------------------
	[3.2. Side / #side]
	*/
	
		#side { width: 300px; float: right; display: inline; overflow: hidden; }
		
			#side .block { overflow: hidden; }
				#side .block h3 { font-size: 16px; color: #000; padding: 0 0 5px; }
					#side .block h3 span { display: none; }
				#side .block hr { border: none; border-top: 1px solid #e0e0e0; clear: both; width: 150px; margin: 0 0 10px 16px; }
				#side .block p { font-size: 12px; color: #666; line-height: 23px; }
				
			#side .block.testimonial { padding: 6px 0 20px; min-height: 178px; }
				#side .testimonial blockquote { font-size: 13px; line-height: 23px; color: #555; padding: 5px 0; }
				#side .testimonial p { text-align: right; line-height: 23px; font-size: 11px; color: #888; }
				
			#side .block.twitter { overflow: hidden; }
				#side .block.twitter h3 { background: url(images/twitter-heading.png) 0 0 no-repeat; width: 22px; height: 42px; display: block; }
				#side .block.twitter #twitter_div { background: url(images/loading.gif) 16px 5px no-repeat; min-height: 20px; overflow: hidden; display: block; padding: 0 0 16px; }
					#twitter_div #twitter_updates { list-style: none; width: 300px; float: right; display: inline; overflow: hidden; }
						#twitter_updates li { background: #fff url(images/twitter-quote.png) top left no-repeat; display: block; overflow: hidden; padding: 0 0 0 16px; }
							#twitter_updates li .status { background: url(images/twitter-quote-2.png) bottom right no-repeat; display: inline; padding: 0 16px 0 0; 
									font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 21px; }
								#twitter_updates li .status a, #twitter_updates li .status a:visited { color: #000; text-decoration: none; }
								#twitter_updates li .status a:hover { background: #fc0; color: #000; text-decoration: none; }
							#twitter_updates li .tijd { display: block; padding: 8px 0 0; text-align: left; }
								#twitter_updates li .tijd a, #twitter_updates li .tijd a:visited { font-size: 10px; padding: 3px 0 5px; color: #aaa; text-decoration: none; }
								#twitter_updates li .tijd a:hover { color: #555; text-decoration: none; }
				#side .block.twitter .link-container { padding: 4px 0 0 16px; overflow: hidden; }
					#side .block.twitter .link-container .gravatar { width: 35px; height: 35px; float: left; display: inline; overflow: hidden; padding: 0 10px 0 0; }
					#side .block.twitter .link-container p { float: left; display: inline; overflow: hidden; margin: 0; padding: 12px 0 10px 7px; color: #777; }
						#side .block.twitter .link-container p:hover { color: #333; }
				
				#side .block.twitter p { padding: 4px 0 0 16px; font-size: 13px; }
					#side .block.twitter p a, #side .block.twitter p a:visited { color: #555; text-decoration: none; }
					#side .block.twitter p a:hover { color: #000; text-decoration: none; }
			
			#side .block.chat { padding: 0 0 30px; }
				#side .block.chat h3 { background: url(images/chat-heading.png) 0 0 no-repeat; width: 30px; height: 40px; display: block; }
				#side .block.chat p { padding: 0 0 20px; }
			
			#side .block.contact { padding: 0 0 30px; }
				#side .block.contact h3 { background: url(images/contact-heading.png) 0 0 no-repeat; width: 32px; height: 40px; display: block; }
				#side .block.contact p { padding: 4px 0 20px; }
					
			#slider { background: url(images/paspoort.png) 0 0 no-repeat; width: 200px; height: 328px; padding: 22px 0 0 56px; overflow: hidden; position: absolute; z-index: 9999; top: 25px; left: 660px; }
					#slider .wrapper { width: 150px; height: 150px; overflow: hidden; }
						#slider .wrapper ul { width: 9999px; list-style: none; margin: 0; }
							#slider .wrapper ul li.slider { list-style: none; width: 150px; height: 150px; overflow: hidden; float: left; }
					#slider #start-stop, #slider .back, #slider .forward, #slider .arrow { display: none; }
					
					
	/*--------------------------------------------------------------
	[3.3. Portfolio / #portfolio]
	*/
		
		#portfolio { width: 960px; overflow: hidden; }
		
			#portfolio .top { overflow: hidden; }
				#portfolio .top h1 { background: #ffea00; font-size: 20px; color: #000; display: inline; float: left; overflow: hidden; padding: 5px 5px 4px; }
				
				#portfolio .top a, #portfolio .top a:visited { float: right; display: inline; overflow: hidden; 
						padding: 9px 20px 5px 0; font-weight: bold; font-size: 13px; color: #666; text-decoration: none; }
				#portfolio .top a:hover { color: #000; text-decoration: none; }
					#portfolio .top a#showclient, #portfolio .top a#showclient:visited, #portfolio .top a#showclient:hover { background: url(images/link-go.png) top right no-repeat; }
					#portfolio .top a#hideclient, #portfolio .top a#hideclient:visited, #portfolio .top a#hideclient:hover { background: url(images/link-close.png) top right no-repeat; }
				
			#portfolio .klantenlijst { display: none; margin: 20px 0 10px; overflow: hidden; }
				#portfolio .klantenlijst hr { border: none; border-top: 1px solid #e0e0e0; width: 300px; margin: 0; clear: both; }
				#portfolio .klantenlijst h2 { font-size: 16px; color: #000; margin: 20px 0 10px; }
				#portfolio .klantenlijst ul { width: 300px; float: left; display: inline; overflow: hidden; list-style: none; font-size: 13px; padding: 0 30px 20px 0; }
				#portfolio .klantenlijst ul.last { padding: 0; float: right; display: inline; overflow: hidden; }
					#portfolio .klantenlijst ul li { background: url(images/list-item.png) 0 8px no-repeat; list-style: none; display: block; padding: 3px 0 3px 16px; }
			
			#portfolio .wrap { width: 960px; overflow: hidden; padding: 20px 0 0; }
				#portfolio .wrap .item { width: 300px; float: left; display: block; padding: 0 30px 30px 0; }
					#portfolio .wrap .item .image { background: #fff; margin: 0 0 20px; height: 160px; }
					#portfolio .wrap .item h2 { font-size: 18px; padding: 0 0 5px; }
						#portfolio .wrap .item h2 a, #portfolio .wrap .item h2 a:visited { color: #555; text-decoration: none; }
						#portfolio .wrap .item h2 a:hover { color: #000; text-decoration: none; }
					#portfolio .wrap .item p { font-size: 12px; color: #666; line-height: 23px; }
					#portfolio .wrap .item.last { padding: 0 0 30px; }
					
		#single { width: 960px; overflow: hidden; }
			
			#single .information { width: 300px; float: left; display: inline; overflow: hidden; }
				#single .information h2 { font-size: 16px; color: #000; margin: 0 0 10px; }
				#single .information p { margin: 0 0 20px; padding: 0; line-height: 21px; font-size: 12px; }
					#single .information p a, #single .information p a:visited { font-weight: bold; color: #000; text-decoration: none; }
					#single .information p a:hover { color: #000; text-decoration: underline; }
				#single .information ul { list-style: none; padding: 0 0 18px; }
					#single .information ul li { list-style: none; background: url(images/link-go.png) 0 0 no-repeat; font-weight: bold; color: #555; display: block; padding: 7px 0 4px 24px; }
						#single .information ul li a, #single .information ul li a:visited { color: #555; text-decoration: underline; }
						#single .information ul li a:hover { color: #000; text-decoration: none; }
				
			#single .gallery { width: 630px; min-height: 400px; float: right; display: inline; overflow: hidden; }
				#gallery { position: relative; color: #fff; }
					#gallery .wrapper { width: 600px; overflow: hidden; height: 400px; position: absolute; top: 0; left: 15px; }
						#gallery .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; overflow: hidden; }
						
						#gallery li { width: 630px; height: 400px; overflow: hidden; float: left; position: relative; }
							#gallery li img { max-width: 600px; max-height: 400px; display: inline-block; position: relative; right: 0; z-index: 10; }
						
						#single .arrow { position: absolute; top: 185px; z-index: 20; float: left; display: inline; overflow: hidden; width: 30px; height: 30px; text-indent: -9999px; }
						#single .forward { background: url(images/slider-right.png) top left no-repeat; cursor: pointer; right: 0; }
							#single .forward:hover { background: url(images/slider-right.png) bottom right no-repeat; }
						#single .back { background: url(images/slider-left.png) top left no-repeat; cursor: pointer; left: 0; }
							#single .back:hover { background: url(images/slider-left.png) bottom right no-repeat; }
						#single #start-stop { display: none; }


	/*--------------------------------------------------------------
	[3.4. Diensten / #diensten]
	*/
	
		#diensten { width: 960px; overflow: hidden; clear: both; }
			
			#diensten .info { overflow: hidden; }
				#diensten .info h1 { background: #ffea00; font-size: 20px; color: #000; display: inline; padding: 5px 5px 4px; margin: 0 0 20px; }
				#diensten .info p { margin: 20px 0 0; font-size: 19px; color: #30332d; line-height: 35px; padding: 0 0 6px; }
					#diensten .info p span.cufon-canvas { margin: 5px 0 12px; }
				#diensten .info a, #diensten .info a:visited { background: #ddd; display: inline-block; padding: 10px 5px 3px; color: #000; text-decoration: none; }
				#diensten .info a:hover { background: #ffea00; color: #000; text-decoration: none; }
					#diensten .info a span.cufon-canvas { margin: -6px 0 0; }
				#diensten .info hr { border: none; border-top: 1px solid #e0e0e0; width: 300px; margin: 0; clear: both; }
			
			#diensten .diensten { overflow: hidden; padding: 20px 0 0; }
				#diensten .diensten .block { width: 300px; float: left; display: inline; overflow: hidden; padding: 0 30px 0 0; }
					#diensten .diensten .block .image { width: 300px; height: 240px; margin: 0 0 20px; }
					#diensten .diensten .block h2 { font-size: 18px; color: #333; padding: 0; }
					#diensten .diensten .block p { font-size: 13px; color: #666; line-height: 23px; padding: 5px 0; }
						#diensten .diensten .block p acronym { border-bottom: 1px dotted #666; font-style: italic; }
					#diensten .diensten .block.last { padding: 0; }



/*------------------------------------------------------------------
[4. Foot / #foot]
*/

	#foot { background: #dad8d1; width: 100%; }
		
		#footer { width: 960px; margin: 0 auto; overflow: hidden; padding: 30px 0; }
			#footer p { background: #fff; padding: 12px 12px 10px; display: inline-block; font-size: 14px; color: #555; }
				#footer p a, #footer p a:visited { color: #000; text-decoration: none; }
				#footer p a:hover { color: #000; text-decoration: underline; }


		

/*------------------------------------------------------------------
[X. Misc]
*/

	::-moz-selection { background: #ffea00; color: #000; }  
   	::selection { background: #ffea00; color: #000; }
	
	
	.button { background: #eee url(images/alert-overlay.png) top left repeat-x; padding: 7px 8px 5px 10px; border: 1px solid #e0e0e0; 
			border-bottom: 2px solid #d1d1d1; font-size: 13px; color: #555; cursor: pointer; float: left; display: inline; overflow: hidden; 
			border-radius: 13px; -moz-border-radius: 13px; -webkit-border-radius: 13px; 
			outline-radius: 16px; -moz-outline-radius: 16px; -webkit-outline-radius: 16px; margin: 2px; }
		.button:hover { background-color: #f7f7f7; color: #333; text-decoration: none; border-color: #5e98d1; outline-color: #b8cfe5; outline-style: solid; outline-width: 2px; }
		.button:focus { background-color: #f7f7f7; border-top-width: 2px; border-bottom-width: 1px; border-color: #5e98d1; outline-color: #b8cfe5; outline-style: solid; outline-width: 2px; }
		
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			.button, .button:hover, .button:focus { outline-style: none; outline: none; }
			.button:hover, .button:focus { border-color: #ccc; }
		}
	
	
	img.centered,
	img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	img.alignright {
		padding: 4px 0 0;
		margin: 0 0 2px 16px;
		display: inline;
	}
	
	img.alignleft {
		padding: 4px 0 0;
		margin: 0 16px 2px 0;
		display: inline;
	}
	
	.alignright {
		float: right;
	}
	
	.alignleft {
		float: left;
	}