/* 
Theme Name: Mediabom
Theme URL: http://www.mediabom.nl
Description: Wordpress Thema van Mediabom.nl
Author: Mediabom
Author URI: http://www.mediabom.nl
Version: 1.0
*/

/* ****************************************************************
CSS RESET *********************************************************
********************************************************************/

/*  The following CSS Reset was written by Dejan Cancarevic http://stylizedweb.com/2008/02/14/10-best-css-hacks/         */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, del, dfn, em, font, img, ins, kbd, q, s, samp, acronym, address, big, cite, code,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;}caption, th, td {text-align:left;font-weight:normal;}table {border-collapse:separate;border-spacing:0;}blockquote:before,blockquote:after,q:before,q:after {content: "";}blockquote, q {quotes: "" "";}

/* ****************************************************************
GLOBAL STYLES ******************************************************
********************************************************************/

* {margin:0;padding:0; line-height: 1.5;}
body, html {font-family: arial, sans-serif; font-size: 12px;}

h1 {color: #fff; font-size: 24px;}
h2 {font-size: 20px;}
h3 {font-size: 16px;}
h4 {font-size: 12px; color: #fff; font-weight: bold; margin: 0 0 10px 0; padding: 0;}

a {color: #fff; text-decoration: none;}
	a:hover {}

strong {font-weight: bold; color: #000;}	
pre {overflow: hidden;}
	
/* ****************************************************************
SPECIAL STYLES ******************************************************
********************************************************************/	
	
.zwart (color: #000;)	

h1.anchor {background: #000; width: 100px; height: 100px;}
	h1.anchor a {color: #000; background: #fff; position: absolute; top: -53px; }
	
/* ****************************************************************
LAYOUT ************************************************************
********************************************************************/

#container{position: relative;}
	
	#header {background:#fff;position:relative;}
		#header .content {}
	
	#portfolio {background:#ba2864; position:relative; }
		#portfolio-container {position: relative; }
			#portfolio-container .content { border-top: 1px solid #9d0c55; border-bottom: 1px solid #9d0c55;}
		#werkwijze-container {position: relative;}
			.werkwijze {width: 300px; float: left; display: block; margin: 0 5px 0 0;}
	
	#about {background:#29a7d4; position: relative;}
		#user-container {}
			#user-container li, #user-container ul {list-style: none;}
			#user-container .content {border-top: 1px solid #1591be; border-bottom: 1px solid #1591be; padding: 10px 0 7px 0;}
	
	#media {background:#fabe1e; position:relative;}
		#media-links {width: 550px; float: left; margin: 0 20px 0 0; display: inline;}
			#media-links .wallpaper {border-bottom: 1px solid #cb9b1c;}
				#media-links .wallpaper img {float: left; margin: 0 10px 10px 0;}
			#media-links .wallpapers {border-bottom: 1px solid #cb9b1c; padding: 10px 0 10px 0; margin: 0 0 10px 0;}
				#media-links .wallpapers-left{float: left; display: inline; width: 220px; margin: 0 10px 0 0;}
				#media-links .wallpapers-right {float: left; display: inline;}
				#media-links a {display: block;}
				#media-links h5 {margin: 0 0 10px 0;}
			#media-links .smileyset {border-bottom: 1px solid #cb9b1c;}	
				#media-links .smileyset img {float: left; margin: 0 10px 10px 0;}
				#media-links .smileysetcontent {padding: 10px 0 10px 0;}
				
		#media-rechts {float: left; display: inline; width: 380px;}
			
			#media-foto {margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #cb9b1c; position: relative;}
				#media-foto img {}
			
			#media-foto-nav {padding: 0 0 10px 0;}
				#media-foto-nav li {list-style: none; float:left; margin: 0 5px 5px 0;}
					#media-foto-nav li a {background: #fabe1e; display: block; height: 15px; width: 15px; border: 1px solid #996600;}
						#media-foto-nav li a:hover {background: #996600;}
						#media-foto-nav li a.current {background: #996600;}
						
	#contact {background:#85bb40; position:relative; padding: 0 0 10px 0;}
		#contact-left {width: 500px; float: left;}
		#contact-right {float: left; width: 450px;}
	
	#footer-top {background:#000;position:relative;}
		#footer-logo {background:url(images/footer_logo.jpg) no-repeat; height: 236px; width: 159px; }
	
	#footer-mid {background: #fff; position: relative; height: 80px;}
		#footer-title {background:url(images/footer_titel.jpg) no-repeat; height: 25px; width: 159px; }
	
	#footer-bottom {position: relative; height: 80px; color: #cccccc;}
		#footer-bottom a {color: #cc3366;}
			#footer-bottom a:hover {text-decoration: underline;}
	
		.content {width: 950px; position: relative; text-align: left; padding: 10px 0 0 0;}
			 .content p {padding: 0 0 10px 0;}

/* Posts */

.portfolio-item  {position: relative; width: 234px; height: 130px; background: url('images/werk_leeg.jpg') no-repeat; display: block; float: left;}			
	.portfolio-item a span{background: url('images/werk-pijl.png'); width: 11px; height: 6px; z-index: 9999; position: absolute; top: 0; left: 30px; display: none;}
		.portfolio-item a:hover span {display: block;}
	
	.portfolio-title {color: #a01f55;}
		.portfolio-title span{color: #fff;}
		.portfolio-item.leeg .portfolio-title {text-align: center;}
	
/* - comments */

div#comments {}
	ol#comments_list {}
		.user-avatar {}
		.comments_meta {}
		.comments_text {}
		.author {}
		.comment {}
		.standard {}
		.alt {}

#authors {position: relative; width: 320px; }
	ul#authorlist {}
			#authorlist li {float: left;}
			#authorlist li a{margin: 0 0 5px 0; float: left; display: inline; position: relative;}
				.current-pijl {background: url('images/author-selected.png'); width: 11px; height: 6px; z-index: 999; position: absolute; top: 0; left: 30px; display: none;}
					#authorlist li a.current .current-pijl {display: block;}
				#authorlist li a.current span{}
			#authorlist img {width: 73px; height: 97px;}
		
#author-panes {width: 630px; position: absolute; top: 10px; left: 320px;}
	#author-panes label {float: left; width: 60px; color: #fff; font-weight: bold;}
	#author-panes li {clear: both;}
		#author-panes li.links {position: absolute; top: 0; color: #000; left: 230px;}
		#author-panes li.networks a{margin: 0 5px 0 0;}

.textwidget {margin: 0 0 10px 0;}
		
/* ****************************************************************
CLEARFIX ***********************************************************
********************************************************************/
		
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix {display: inline-block; } 
html[xmlns] .clearfix {display: block;}
* html .clearfix { height: 1%;}

.clear {clear: both;}

/* ****************************************************************
MENU ***********************************************************
********************************************************************/

#menu { position: fixed; top: 0; left: 0; z-index: 999999; /*--Keeps the panel on top of all other elements--*/
	background: url('images/menu_bg.png') repeat-x; width: 100%; height: 57px;}

*html #menu { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
	position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}	
	
	#menu ul, #menu li {list-style: none;}
	#menu ul {text-align: left; width: 825px; margin: 0 0 0 125px;}
		#menu ul li {float: left; display: block; }
			#menu ul li a {color: #000; display: block; font-weight: bold;}
				#menu ul li a span {display: block; font-weight: normal;}
				#menu ul li a:hover {}
				#menu ul li a:active {}			
		
				#menu ul li.home a{margin: 2px 0 0 0; width: 262px; height: 49px; display: block; background: url('images/menu_logo.jpg') no-repeat;}
				#menu ul li.werk a{width: 147px; height: 53px; display: block; background: url('images/menu_werk.jpg') no-repeat;}
					/* #menu ul li.werk.active a {width: 147px; height: 53px; display: block; background: url('images/menu_werk_on.jpg') no-repeat;} */
				#menu ul li.info a{width: 128px; height: 53px; display: block; background: url('images/menu_info.jpg') no-repeat;}
				#menu ul li.media a{width: 126px; height: 53px; display: block; background: url('images/menu_media.jpg') no-repeat;}
				#menu ul li.contact a{width: 134px; height: 53px; display: block; background: url('images/menu_contact.jpg') no-repeat;}
			
/* ****************************************************************
PRELOADER ***********************************************************
********************************************************************/
.QOverlay { background-color: #000000; z-index: 9999999; }
.QLoader { background-color: #ffffff; height: 1px; }

/* ****************************************************************
FORMULIER ***********************************************************
********************************************************************/

.wpcf7{position: relative; margin: 0 0 10px 0;}
	
	.wpcf7-form {}
		.wpcf7-form br{display: none;}
		
	.wpcf7-form p{clear: both; padding: 5px 0 5px 0;}
		.wpcf7-form label {float: left; display: block; width: 150px; margin: 0 0 10px 0;}
		.wpcf7-form input {float: left;}
		.wcpf7-form textarea {width: 100px;}
	
	.wpcf7-list-item {}
		.wpcf7-list-item input {}
		.wpcf7-list-item-label {}
	
	.wpcf7-form span {}
		.wpcf7-form span.wpcf7-checkbox {}
		.wpcf7-form .Product {background: #000;}
			.wpcf7-form .wpcf7-list-item {margin: 0 0 0 150px;}
			
		.wpcf7-form .wpcf7-list-item {display: block; padding: 5px 0 5px 0;}
			.wpcf7-form .wpcf7-list-item input {margin: 0 10px 0 0;}
		.wpcf7-form span.wpcf7-form-control-wrap {}
		
		.wpcf7-submit {width: 80px; margin: 0 10px 0 0;}
		
/* ****************************************************************
WERK - OVERLAY ***********************************************************
********************************************************************/	

.werk_overlay {display:none; z-index:10000; background-color:#ba2864; width:950px; min-height:580px; position: relative;} 
	.werk_overlay .details {padding: 10px 0 0 0;}
.werk_overlay  .close { 
    background-image:url(http://static.flowplayer.org/tools/img/overlay/close.png); 
    position:absolute; right:0px; top:20px; cursor:pointer; height:35px; width:35px; z-index: 999;}

.gallery  {position: relative; width: 937px; height: 355px; overflow: hidden; padding: 0; spacing: 0; text-align: left;}
	.gallery .gallery-item {margin: 0 !important;}
		.gallery .gallery-item img{border: 0 !important; }
		.gallery .gallery-item span.gallery-icon {}


.werk-nav {position: absolute; top: 60px; right: 30px; z-index: 3;}
	.werk-nav ul, .werk-nav li {list-style: none;}
	.werk-nav li {display: block; margin: 0 0 10px 0;}
		.werk-nav li a {background: #ba2864; display: block; height: 15px; width: 15px; border: 1px solid #660033;}	
			.werk-nav li a.current{background: #660033;}
	
.werk-afbeelding {width: 937px; height: 355px; background: #fff; position: relative; text-align: center; z-index: 1; margin: 0 0 10px 0;}
.werk-info {position: absolute; top: 400px;}
	.werk-info span{color: #fff; margin: 0 5px 0 0;}
		.werk-info span b {color: #000; font-weight: normal;}
		
.werk-content {padding: 10px 0 0 0; margin: 35px 0 0 0;  border-top: 1px solid #9d0c55;}
	.werk-content .column{width: 300px; float: left; display: block; margin: 0 5px 0 0;}