@charset "utf-8";

/*  
Theme Name: Remix
Theme URI: http://www.remixdesign.nl/
Description: Portfolio van student en webdesigner Kevin van der Wijst
Version: 7.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. Sidebar / #sidebar
4. Footer / #footer
	
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: #d4d3cf;
		-webkit-font-smoothing: antialiased;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 13px;
		color: #444;
		text-shadow: rgba(0, 0, 0, 0.0078125) 0px 0px 1px;
		min-height: 100%;
		position: relative;
	}
		
		
	img { border: none; margin: 0; padding: 0; }
		
	a, a:visited { color: #00a3bb; text-decoration: none; }
	a:hover { color: #5cbb00; 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: #666; }
	textarea { background: #fff; border: 1px solid #e6e6df; padding: 3px 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666; line-height: 17px; overflow: auto; }
		input:focus, textarea:focus { outline: none; }
		.no-input { background: none; border: none; width: auto; }
		
	
		.left { float: left; display: inline; overflow: hidden; }
		.right { float: right; display: inline; overflow: hidden; }
		.wrap { 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 { width: 100%; height: 420px; position: relative; overflow: hidden; }
			#top.alt { height: 170px; }
	
	
		#top #head { height: 420px; position: absolute; z-index: 1; width: 100%; }
			#scroller { position:relative; overflow:hidden; height: 420px; width: 100%; }
				#scroller .items { position:absolute; height:20000em; width: 100%; }
					#scroller .items .item { width: 100%; height: 420px; }
						#scroller .items .item .header { width: 960px; margin: 0 auto; height: 420px; position: relative; z-index: 100; }
						#scroller .items .item h1 { font-size: 45px; color: #fff; }
							#scroller .items .item h1 .cufon-canvas { margin: 5px 0 0; }
						#scroller .items .item h2 { font-size: 20px; color: #fff; padding: 160px 0 5px; }
							#scroller .items .item h2 a, #scroller .items .item h2 a:visited { color: rgba(255,255,255,0.7); text-decoration: none; }
							#scroller .items .item h2 a:hover { color: #fff; text-decoration: none; }
						#scroller .items .item h3 { font-size: 15px; color: #fff; padding: 10px 0 0; }
							#scroller .items .item h3 a, #scroller .items .item h3 a:visited { background: url(images/go-arrow.png) top right no-repeat; display: inline-block; padding: 0 15px 3px 0; 
									color: rgba(255,255,255,0.7); text-decoration: none; }
							#scroller .items .item h3 a:hover { color: #fff; text-decoration: none; }
						#scroller .home { background: url(images/head/home.png) top center no-repeat; }
							#scroller .home h1 { padding: 190px 0 0; }
								#scroller .home .circle { display: block; text-align: center;
											font-size: 25px; font-weight: 500; color: #fff; text-shadow: 1px 2px 2px rgba(0,0,0,0.3); padding: 28px 0 0; height: 112px;
											-webkit-transform: scale(1); -webkit-transition-timing-function: ease-in-out; -webkit-transition-duration: 100ms; -webkit-backface-visibility: visible; 
											-webkit-perspective: 0; -moz-transition-timing-function: ease-in-out; -moz-transition-duration: 100ms; -moz-border-radius: 85px; 
											border-radius: 85px; border: none; line-height: 82px; z-index: 50; width: 140px; position: absolute; -moz-box-shadow: 1px 3px 3px rgba(0,0,0,0.1); 
											-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.1); box-shadow: 1px 3px 3px rgba(0,0,0,0.1); }
								#scroller .home .circle:hover { text-shadow: 1px 2px 1px rgba(0,0,0,0.25); box-shadow: 1px 2px 2px rgba(0,0,0,0.1); z-index: 9999; cursor: pointer; }
									#scroller .home .concept { background: rgba(166,184,35,0.6); top: 190px; left: 535px; }
										#scroller .home .concept:hover { -webkit-transform: scale(1.6) rotate(-15deg); -moz-transform: scale(1.6) rotate(-15deg); }
									#scroller .home .design { background: rgba(21,156,219,0.6); top: 150px; left: 655px; }
										#scroller .home:hover .design { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); }
											#scroller .home .design:hover, #scroller .home:hover .design:hover { -webkit-transform: scale(1.6) rotate(5deg); -moz-transform: scale(1.6) rotate(5deg); }
									#scroller .home .create { background: rgba(255,0,120,0.6); top: 190px; left: 775px; }
										#scroller .home .create:hover { -webkit-transform: scale(1.6) rotate(15deg); -moz-transform: scale(1.6) rotate(15deg); }
									#scroller .home a, #scroller .home a:visited { display: inline-block; color: #fff; text-decoration: none; }
									#scroller .home a:hover { color: #fff; text-decoration: none; cursor: pointer; }
						#scroller .versheid { background: url(images/head/versheid.png) top center no-repeat; overflow: hidden; }
							#scroller .versheid .logo { background: url(images/head/versheid-logo.png) top left no-repeat; display: block; width: 400px; height: 400px; 
									-webkit-transform: scale(0.85); -webkit-transition-timing-function: ease-in-out; -webkit-transition-duration: 100ms; -webkit-backface-visibility: visible;  
									-webkit-perspective: 0; -moz-transform: scale(0.85); -moz-transition-timing-function: ease-in-out; 
									-moz-transition-duration: 100ms; z-index: 55; position: absolute; top: 100px; left: 570px; cursor: pointer; }
								#scroller .versheid:hover .logo { -webkit-transform: scale(1); -moz-transform: scale(1); }
						#scroller .school { background: url(images/head/school.png) top center no-repeat; }
				#scroller .nav-wrap { width: 960px; margin: 0 auto; height: 420px; position: relative; }
					#scroller .navi { position: absolute; width: 42px; top: 390px; right: 0; margin: 0 auto; text-align: center; z-index: 9999; }
						#scroller .navi a { width: 8px; height: 8px; float: left; margin: 3px; background: url(images/head/bullets.png) 0 -16px no-repeat; display: block; font-size: 1px; }
						#scroller .navi a:hover { background-position: 0 -8px; }
						#scroller .navi a.active { background-position: 0 0; }
			
			#head.head { display: block; }
				#head.head .header { width: 960px; margin: 0 auto; height: 420px; position: relative; z-index: 100; }
					#head.head .header h1 { font-size: 45px; color: #fff; padding: 190px 0 0; }
						#head.head .header h1 .cufon-canvas { margin: 5px 0 0; }
					#head.head .header h2 { font-size: 20px; color: #fff; padding: 160px 0 5px; }
						#head.head .header h2 a, #head.head .header h2 a:visited { color: rgba(255,255,255,0.7); text-decoration: none; }
						#head.head .header h2 a:hover { color: #fff; text-decoration: none; }
					#head.head .header h3 { font-size: 15px; color: #fff; padding: 10px 0 0; }
						#head.head .header h3 a, #head.head .header h3 a:visited { background: url(images/go-arrow.png) top right no-repeat; display: inline-block; padding: 0 15px 3px 0; 
								color: rgba(255,255,255,0.7); text-decoration: none; }
						#head.head .header h3 a:hover { color: #fff; text-decoration: none; }			
			#head.diensten { background: url(images/head/diensten.png) top center no-repeat; }
			#head.werk,
			#head.project { background: url(images/head/werk.png) top center no-repeat; }
				#head.werk .header { background: url(images/head/werk-graphic.png) top right no-repeat; width: 1000px; height: 420px; }
					#head.werk .header h1 { padding: 190px 0 0 20px; }
				#head.werk .projecten { background: url(images/head/werk-projecten.png) top left no-repeat; display: block; width: 300px; height: 220px; 
						-webkit-transform: scale(0.7); -webkit-transition-timing-function: ease-in-out; -webkit-transition-duration: 100ms; -webkit-backface-visibility: visible;  
						-webkit-perspective: 0; -moz-transform: scale(0.7); -moz-transition-timing-function: ease-in-out; 
						-moz-transition-duration: 100ms; z-index: 55; position: absolute; top: 125px; left: 690px; }
					#head.werk:hover .projecten { -webkit-transform: scale(1); -moz-transform: scale(1); left: 698px; }
			#head.informatie { background: url(images/head/informatie.png) top center no-repeat; }
			#head.contact { background: url(images/head/contact.png) top center no-repeat; }
		
		
		#top .wrap { width: 960px; height: 100px; border-bottom: 1px solid rgba(255,255,255,0.25); overflow: hidden; margin: 0 auto; position: relative; z-index: 999; }
		
			#top .wrap .logo { width: 114px; height: 30px; padding: 52px 0 0; float: left; display: inline; overflow: hidden; }
				#top .wrap .logo img { width: 114px; height: 30px; }
				
			#top .wrap #nav { width: 600px; height: 51px; padding: 52px 0 0; font-size: 17px; float: right; display: inline; overflow: hidden; }
				#nav ul { list-style: none; padding: 0 0 19px; 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 23px 15px 0; opacity: 1.0; filter: alpha(opacity=100); color: #fff; text-decoration: none; }
						#nav ul li a:hover { border-bottom: 5px solid rgba(255,255,255,0.25); color: #fff; text-decoration: none; }
					#nav ul li.current { display: block; }
						#nav ul li.current a, #nav ul li.current a:visited { border-bottom: 5px solid rgba(255,255,255,0.25); }
						#nav ul li.current a:hover { border-bottom: 5px solid rgba(255,255,255,0.4); }



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

	#content { background: #fff; width: 100%; }
		#content .container { width: 960px; padding: 40px 0 60px; margin: 0 auto; overflow: hidden; }
		
		#content h1 { font-weight: bold; font-size: 24px; color: #000; }
		
		#content .bottom-wrap { clear: both; padding: 30px 0 0; }
		
			
			/* Home */
			#home .recent-werk { width: 630px; float: left; display: inline; overflow: hidden; }
				#home .recent-werk .title { overflow: hidden; padding: 0 0 20px; }
					#home .recent-werk .title h1 { float: left; display: inline; overflow: hidden; }
					#home .recent-werk .title .meer { width: 315px; float: right; display: inline; overflow: hidden; text-align: right; padding: 4px 0 0; }
						#home .recent-werk .title .meer a, #home .recent-werk .title .meer a:visited { background: url(images/go-arrow.png) top right no-repeat; display: inline-block; 
								padding: 4px 16px 4px 0; color: #888; text-decoration: none; }
						#home .recent-werk .title .meer a:hover { color: #444; text-decoration: none; }
				#home .recent-werk .item { width: 300px; float: left; display: block; }
					#home .recent-werk .item .image { margin: 0 0 20px; }
						#home .recent-werk .item .image img { padding: 0; margin: 0; }
					#home .recent-werk .item h2 { font-size: 20px; padding: 0 0 10px; }
						#home .recent-werk .item h2 a, #home .recent-werk .item h2 a:visited { color: #555; text-decoration: none; }
						#home .recent-werk .item h2 a:hover { color: #000; text-decoration: none; }
					#home .recent-werk .item p { font-size: 12px; color: #666; text-align: justify; line-height: 23px; }
					#home .recent-werk .item.alt { padding: 0 0 0 30px; }
					
			#content .twitter { background: #0dacda url(images/sidebar-twitter.png) top left no-repeat; width: 300px; min-height: 160px; }
					#home .twitter { margin: 49px 0 0; float: right; display: inline; overflow: hidden; }
				#content .twitter h2 { display: block; padding: 19px 20px 11px 74px; font-size: 19px; color: #fff; }
					#content .twitter h2 a, #content .twitter h2 a:visited { color: #fff; text-decoration: none; }
					#content .twitter h2 a:hover { color: rgba(255,255,255,0.7); text-decoration: none; }
				#content .twitter ul { list-style: none; padding: 5px 20px 20px; font-weight: 500; color: rgba(255,255,255,0.75); }
					#content .twitter ul .status { padding: 0 0 5px; font-size: 12px; text-shadow: -1px -1px 1px rgba(0,0,0,0.15); line-height: 21px; }
						#content .twitter ul .status a, #content .twitter ul .status a:visited { color: #fff; text-decoration: underline; }
						#content .twitter ul .status a:hover { color: #fff; text-decoration: none; }
					#content .twitter ul .tijd { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 0 0; }
						#content .twitter ul .tijd a, #content .twitter ul .tijd a:visited { font-weight: normal; color: rgba(255,255,255,0.7); text-decoration: none; }
						#content .twitter ul .tijd a:hover { color: #fff; text-decoration: none; }
						
			
			/* Diensten */		
			#diensten .diensten { width: 960px; overflow: hidden; }
				#diensten .diensten .item { width: 300px; padding: 0 30px 0 0; float: left; display: inline; overflow: hidden; }
						#diensten .diensten .item.wordpress { padding: 0; }
					#diensten .diensten .item .title { padding: 0 0 16px; }
						#diensten .diensten .item .title h3 { font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; padding: 0 0 6px; }
							#diensten .diensten .ontwerpen .title h3 { color: #91b80c; }
							#diensten .diensten .html .title h3 { color: #0da4c4; }
							#diensten .diensten .wordpress .title h3 { color: #e60e5b; }
						#diensten .diensten .item .title h2 { font-size: 24px; color: #555; min-height: 58px; }
							#diensten .diensten .item .title h2 .cufon-canvas { margin: 0 0 6px; }
					#diensten .diensten .item .image { width: 300px; height: 240px; padding: 0 0 15px; }
					#diensten .diensten .item .info { font-size: 13px; color: #666; }
						#diensten .diensten .item .info p { line-height: 23px; padding: 10px 0; }
							#diensten .diensten .item .info p acronym { border-bottom: 1px dotted #666; font-style: italic; }
							
			
			/* Werk */
			#werk { background: #fff url(images/loading.gif) 472px 120px no-repeat; }
				#werk .title { width: 960px; padding: 0 0 20px; overflow: hidden; position: relative; }
					#werk .title .selector { width: 200px; position: absolute; top: 0; left: 380px; text-align: center; }
						#werk .title .selector a, #werk .title .selector a:visited { background: #bbb; display: inline-block; font-weight: 500; 
								text-shadow: -1px -1px 1px rgba(0,0,0,0.15); color: #fff; text-decoration: none; }
						#werk .title .selector a:hover { background: #aaa; color: #fff; text-decoration: none; }
							#werk .title .selector .left { float: none; margin: 0 1px 0 0; padding: 3px 10px 6px 12px;
									-moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
							#werk .title .selector .right { float: none; padding: 3px 12px 6px 10px; 
									-moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
						#werk .title .selector a.current, #werk .title .selector a.current:visited { background: #999; text-decoration: none; }
						#werk .title .selector a.current:hover { background: #888; text-decoration: none; }
						
				#werk .overzicht { width: 960px; overflow: hidden; margin: 0 0 -30px; }
						#werk #school.overzicht { display: none; }
					#werk .overzicht .block { background: #fff; width: 300px; min-height: 340px; float: left; display: inline; overflow: hidden; padding: 0 30px 30px 0; }
							#werk .overzicht .block.alt { padding: 0 0 30px; }
						#werk .overzicht .block .image { margin: 0 0 20px; }
							#werk .overzicht .block .image img { padding: 0; margin: 0; }
						#werk .overzicht .block h2 { font-size: 20px; padding: 0 0 10px; }
							#werk .overzicht .block h2 a, #werk .overzicht .block h2 a:visited { color: #555; text-decoration: none; }
							#werk .overzicht .block h2 a:hover { color: #000; text-decoration: none; }
						#werk .overzicht .block p { font-size: 12px; color: #666; text-align: justify; line-height: 23px; }
						
						
			/* Project */
			#project { overflow: hidden; }
				#project .top { width: 960px; padding: 0 0 20px; overflow: hidden; }
					#project .top .title { float: left; display: inline; overflow: hidden; }
						#project .top .title h1 { font-size: 30px; font-weight: bold; color: #000; padding: 0 0 10px; }
						#project .top .title h3 { font-size: 14px; font-weight: normal; color: #888; }
					#project .top .back { float: right; display: inline; overflow: hidden; padding: 7px 0 0; }
						#project .top .back a, #project .top .back a:visited { background: #bbb; display: inline-block; padding: 3px 12px 6px; font-weight: 500; 
								text-shadow: -1px -1px 1px rgba(0,0,0,0.15); color: #fff; text-decoration: none; -moz-border-radius: 15px; border-radius: 15px; }
						#project .top .back a:hover { background: #aaa; color: #fff; text-decoration: none; }
				#project .content { width: 960px; overflow: hidden; }
					#project .content .slider { width: 600px; height: 430px; overflow: hidden; }
				
				#project #main { width: 600px; padding: 0 30px 0 0; }
					#project #main .informatie { display: block; padding: 15px 0 0; }
						#project #main .informatie p { font-size: 13px; color: #666; line-height: 23px; padding: 10px 0; }
				#project #sidebar { width: 330px; }
					#project #sidebar .entry { padding: 0 0 5px; font-size: 13px; }
						#project #sidebar .entry p { line-height: 23px; color: #666; padding: 0 0 15px; }
							#project #sidebar .entry p a, #project #sidebar .entry p a:visited { font-weight: 500; text-decoration: none; }
							#project #sidebar .entry p a:hover { text-decoration: underline; }
					#project #sidebar .info { overflow: hidden; }
						#project #sidebar .info h3 { font-weight: 500; font-size: 16px; color: #94b50f; padding: 0 0 10px; }
						#project #sidebar .info .diensten { width: 110px; padding: 0 20px 0 0; float: left; display: inline; overflow: hidden; }
							#project #sidebar .info .diensten ul { list-style: none; margin: 0; padding: 0; }
								#project #sidebar .info .diensten ul li { background: url(images/list.png) 0 9px no-repeat; margin: 0; padding: 0 0 0 18px; line-height: 23px; }
						#project #sidebar .info .meer { width: 200px; text-align: left; float: right; display: inline; overflow: hidden; }
							#project #sidebar .info .meer ul { list-style: none; }
								#project #sidebar .info .meer ul li { padding: 0 0 5px; }
									#project #sidebar .info .meer ul li a, #project #sidebar .info .meer ul li a:visited { background: #6ccec1; 
											display: inline-block; padding: 3px 12px 6px; font-weight: 500; 
											text-shadow: -1px -1px 1px rgba(0,0,0,0.15); color: #fff; text-decoration: none; 
											-moz-border-radius: 15px; border-radius: 15px; }
									#project #sidebar .info .meer ul li a:hover { background: #39a9b6; color: #fff; text-decoration: none; }
						
				/* Orbit */
				#project #project-slider { background: #000 url(images/loading-black.gif) 284px 184px no-repeat; width: 600px; height: 400px; overflow: hidden; }
					#project #project-slider img, #project #project-slider div, #project #project-slider a { display: none; }
				
					/* Timer */
					#project div.timer { display: none; /* width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; 
							opacity: 0.6; cursor: pointer; z-index: 1001; */ }
					
						#project span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(images/orbit/rotator-black.png) no-repeat; z-index: 3; }
							#project span.rotator.move { left: 0; }
						#project span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; opacity: 0.3; filter: alpha(opacity=30); }
							#project span.mask.move { width: 40px; left: 0; background: url(images/orbit/timer-black.png) repeat 0 0; opacity: 0.3; filter: alpha(opacity=30); }
						#project span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url(images/orbit/pause-black.png) no-repeat; 
								z-index: 4; opacity: 0; }
							#project span.pause.active { background: url(images/orbit/pause-black.png) no-repeat 0 -40px; }
						
						#project div.timer:hover span.pause,
						#project span.pause.active { opacity: 0.3; }
					
					/* Nav */
					#project div.slider-nav { display: block; }
						#project div.slider-nav span { width: 300px; height: 400px; text-indent: -9999px; position: absolute; top: 0; z-index: 1000; cursor: pointer; opacity: 0; }
							#project div.slider-nav span:hover { opacity: 1.0; }
							#project div.slider-nav span.right { background: url(images/orbit/right-arrow.png) 267px 187px no-repeat; right: 0; }
							#project div.slider-nav span.left { background: url(images/orbit/left-arrow.png) 15px 187px no-repeat; left: 0; }
					
					/* Bullets */
					#project .orbit-bullets { position: absolute; z-index: 1000; list-style: none; top: 410px; left: 50%; padding: 0; margin: 0 0 0 -20px; }
						#project .orbit-bullets li { float: left; margin: 3px; cursor: pointer; color: #999; text-indent: -9999px; 
								background: url(images/orbit/bullets.png) no-repeat 0 -16px; width: 8px; height: 8px; overflow: hidden; }
							#project .orbit-bullets li.active { color: #222; background-position: 0 0; }
							#project .orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; }
							#project .orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; }
	
			
			/* Contact */
			#contact .form { padding: 25px 0 0; }
				#contact .form fieldset { padding: 5px 0; overflow: hidden; }
						#contact .form fieldset.buttonfield { padding: 10px 0 0 177px; }
					#contact .form fieldset label { float: left; display: inline; overflow: hidden; width: 180px; padding: 3px 0 0; }
						#contact .form fieldset label span { display: inline-block; padding: 0 0 0 1px; font-weight: bold; color: #f95237; }
					#contact .form fieldset input { background: #fdfdfd; font-size: 15px; color: #777; margin: 0; padding: 4px; width: 220px; border: 1px solid #ddd; 
							border-top: 1px solid #bbb; border-left: 1px solid #bbb; -moz-border-radius: 2px; border-radius: 2px; }
					#contact .form fieldset textarea { background: #fdfdfd; font-size: 13px; color: #777; margin: 0; padding: 3px; min-width: 320px; max-width: 420px; min-height: 150px; max-height: 220px; 
							border: 1px solid #ddd; border-top: 1px solid #bbb; border-left: 1px solid #bbb; -moz-border-radius: 2px; border-radius: 2px; }
						#contact .form fieldset input:focus, #contact .form fieldset textarea:focus { background: #fff; border: 1px solid #ddd; }
					#contact .form fieldset .submit-button { float: left; display: inline; overflow: hidden; padding: 0 14px 0 0; }
					#contact .form fieldset .info { float: left; display: inline; overflow: hidden; font-size: 12px; color: #666; }
						#contact .form fieldset .info p { line-height: 31px; }
							#contact .form fieldset .info p span { display: inline-block; padding: 0 1px 0 0; font-weight: bold; color: #f95237; }
				#contact .form .alert { background: #f2f1f0; margin: 0 0 30px; padding: 18px 25px 22px; font-size: 13px; line-height: 21px; }
					#contact .form .alert h2 { font-size: 16px; color: #444; padding: 0 0 10px; }
 		
		

	/*--------------------------------------------------------------
	[3.1. Main / #main]
	*/
	
		#main { width: 630px; padding: 0 30px 0 0; float: left; display: inline; overflow: hidden; }
			
			#main h1 { padding: 0 0 15px; }
			#main .entry { font-size: 15px; }
				#main .entry p { line-height: 33px; color: #444; }
				#main .entry a, #main .entry a:visited { font-weight: bold; text-decoration: none; }
				#main .entry a:hover { text-decoration: none; }
			#main .text { font-size: 13px; padding: 10px 0 0; }
				#main .text p { padding: 10px 0; line-height: 25px; color: #666; }
				#main .text a, #main .text a:visited { font-weight: 500; text-decoration: none; }
				#main .text a:hover { text-decoration: underline; }
			
			
			#home #main .entry { float: left; display: inline; overflow: hidden; width: 300px; }
			#home #main .blog { width: 300px; min-height: 200px; float: right; display: inline; overflow: hidden; }
				#home #main .blog .image { background: #fff; width: 300px; height: 180px; }
				#home #main .blog .block { background: #a6b823; padding: 18px 20px 20px; }
					#home #main .blog .block .info { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); padding: 0 0 7px; overflow: hidden; }
					#home #main .blog .block h2 { font-size: 19px; color: #fff; }
						#home #main .blog .block h2 a, #home #main .blog .block h2 a:visited { color: #fff; text-decoration: none; }
						#home #main .blog .block h2 a:hover { color: rgba(255,255,255,0.7); text-decoration: none; }
		
		

	/*--------------------------------------------------------------
	[3.2. Sidebar / #sidebar]
	*/
	
		#sidebar { width: 300px; float: right; display: inline; overflow: hidden; }
		
			
			#sidebar .block { margin: 0 0 30px; display: block; overflow: hidden; }
			
				#sidebar .testimonial { font-size: 13px; color: #fff; }
					#sidebar .testimonial h2 { display: block; padding: 13px 20px 11px; width: 300px; height: 31px; font-size: 19px; color: #fff; }
					#sidebar .testimonial .entry { padding: 17px 20px; font-size: 13px; color: #fff; }
						#sidebar .testimonial .entry p { line-height: 23px; }
						#sidebar .testimonial .entry .author { background: url(images/testimonial-quote-2.png) top right no-repeat; font-size: 10px; 
								text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); margin: 0 -20px 0 0; padding: 10px 0 0; }
							#sidebar .testimonial .entry .author p { line-height: 17px; }
					#sidebar .albelli { background: #f85902 url(images/testimonial-quote-1.png) 0 63px no-repeat; }
						#sidebar .albelli h2 { background: url(images/testimonial-albelli.png) top left no-repeat; }
						
				#sidebar .contact-me { background: #0b9eb3 url(images/sidebar-contact-me.png) top left no-repeat; font-size: 13px; color: #fff; min-height: 160px; }
					#sidebar .contact-me h2 { display: block; padding: 19px 20px 11px 74px; font-size: 19px; color: #fff; }
						#sidebar .contact-me h2 a, #sidebar .contact-me h2 a:visited { color: #fff; text-decoration: none; }
						#sidebar .contact-me h2 a:hover { color: rgba(255,255,255,0.7); text-decoration: none; }
					#sidebar .contact-me .entry { padding: 10px 20px 20px; font-weight: 500; text-shadow: -1px -1px 1px rgba(0,0,0,0.15); line-height: 21px; }
						#sidebar .contact-me .entry p { color: rgba(255,255,255,0.75); }
							#sidebar .contact-me .entry p a, #sidebar .contact-me .entry p a:visited { color: #fff; text-decoration: underline; }
							#sidebar .contact-me .entry p a:hover { color: #fff; text-decoration: none; }
						#sidebar .contact-me a.button, #sidebar .contact-me a.button:visited { background: rgba(0,0,0,0.2); border: none; outline: none; box-shadow: none; 
								display: inline-block; margin: 10px 0 23px; padding: 3px 12px 6px; 
								color: #fff; -moz-border-radius: 15px; border-radius: 15px; text-decoration: none; }
						#sidebar .contact-me a.button:hover { background: rgba(0,0,0,0.3); text-decoration: none; }
						
				#sidebar .logos { min-height: 198px; padding: 40px 0 0; }
					#sidebar .logos .entry { padding: 5px 0 0; font-size: 13px; line-height: 23px; }
					#sidebar .macbook { background: url(images/informatie-macbook.png) top left no-repeat; width: 300px; height: 198px; position: relative; }
					#sidebar .macbook .slider-wrap { width: 204px; height: 128px; position: absolute; z-index: 550; top: 21px; left: 48px; overflow: hidden; }
					#sidebar .macbook .shine { background: url(images/informatie/shine.png) top left no-repeat; width: 204px; height: 128px; position: absolute; z-index: 560; top: 21px; left: 48px; }
					#sidebar .macbook #slider { background: #000 url(images/loading-black.gif) 86px 48px no-repeat; width: 204px; height: 128px; overflow: hidden; }
					#slider img, #slider div, #slider a { display: none; }
					
				#sidebar .email { font-size: 13px; margin: 0 0 20px; }
					#sidebar .email h2 { font-size: 19px; color: #555; padding: 0 0 12px; }
					#sidebar .email .entry { padding: 0; line-height: 23px; }
						#sidebar .email .entry p { padding: 5px 0 10px; }
							#sidebar .email .entry p a, #sidebar .email .entry p a:visited { font-weight: 500; text-decoration: none; }
							#sidebar .email .entry p a:hover { text-decoration: underline; }



/*------------------------------------------------------------------
[4. Footer / #footer]
*/

	#footer { background: url(images/footer.png) top center no-repeat; width: 100%; min-height: 180px; }
		
		#footer .wrap { width: 960px; margin: 0 auto; padding: 40px 0 0; overflow: hidden; }
			
			#footer .social { float: left; display: inline; overflow: hidden; }
				#footer .social ul { list-style: none; overflow: hidden; width: 300px; height: 50px; }
					#footer .social ul li { width: 50px; height: 50px; float: left; padding: 0 10px 0 0; }
						#footer .social ul li a { display: block; width: 50px; height: 50px; }
						#footer .social ul li span { display: none; }
					#footer .social ul li.twitter a, #footer .social ul li.twitter a:visited { background: url(images/footer-buttons.png) 0 0 no-repeat; }
						#footer .social ul li.twitter a:hover { background-position: 0 -50px; }
					#footer .social ul li.facebook a, #footer .social ul li.facebook a:visited { background: url(images/footer-buttons.png) -50px 0 no-repeat; }
						#footer .social ul li.facebook a:hover { background-position: -50px -50px; }
					#footer .social ul li.lastfm a, #footer .social ul li.lastfm a:visited { background: url(images/footer-buttons.png) -100px 0 no-repeat; }
						#footer .social ul li.lastfm a:hover { background-position: -100px -50px; }
					#footer .social ul li.versheid a, #footer .social ul li.versheid a:visited { background: url(images/footer-buttons.png) -150px 0 no-repeat; }
						#footer .social ul li.versheid a:hover { background-position: -150px -50px; }
					#footer .social ul li.dribbble a, #footer .social ul li.dribbble a:visited { background: url(images/footer-buttons.png) -200px 0 no-repeat; }
						#footer .social ul li.dribbble a:hover { background-position: -200px -50px; }
			
			#footer .copyright { float: right; display: inline; overflow: hidden; }
				#footer .copyright p { padding: 14px 0 0; font-size: 15px; color: #fff; }
					
		

		

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

	::-moz-selection { background: rgba(29,175,197,0.25); }  
   	::selection { background: rgba(29,175,197,0.25); }
	
	
	.button { background: #eee url(images/alert-overlay.png) top left repeat-x; margin: 2px; padding: 4px 8px 6px 10px; border: 1px solid #e0e0e0; 
			border-bottom: 1px solid #d1d1d1; font-size: 13px; color: #555; cursor: pointer; float: left; display: inline; overflow: hidden; 
			box-shadow: 1px 1px 2px rgba(0,0,0,0.2); border-radius: 13px; -moz-border-radius: 13px; -webkit-border-radius: 13px; }
		.button:hover { background-color: #f7f7f7; color: #333; text-decoration: none; border-color: #ddd; }
		.button:focus { background-color: #f7f7f7; border-top-width: 2px; border-bottom-width: 1px; border-color: #ccc; }
		
		@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;
	}
	
	
	div.orbit-wrapper {
		width: 1px;
		height: 1px;
		position: relative;
	}
					
	div.orbit {
		width: 1px;
		height: 1px;
		position: relative;
		overflow: hidden;
	}
					
	div.orbit>img {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}
					
	div.orbit>a {
		border: none;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 0; 
		display: none;
	}
					
	.orbit>div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}