/* ***
   CSS3 stylesheet
   
   websiteman site 2.0
   (c) 2009 - 2010 websiteman 
   
   designed by Wil Stutterheim 
   wil(a)websiteman.nl
   
   Last update: 2010-08-29
   
   VALIDATION TIP: IF YOU USE THE W3C CSS VALIDATOR ON http://jigsaw.w3.org/css-validator/
   PLEASE MAKE SURE YOU SELECT CSS3! 
   
   We know you still get errors, but as you can see for yourself, these are all browser 
   specific css3 tags. Nothing to worry about. We can't help it that css3 isn't supported fully yet.  
   *** */

/* General */ 
html, body	{
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
}

body	{
	background: #eef6fc url(/images/76/background-body-lighter.jpg) repeat-x; 
	text-align: center; 
	overflow-x: hidden; 
	font: 12px Verdana, Arial, Helvetica, sans-serif; 
	color: #2d2d2d; 
}
body.page39, body.page157	{
	background: #fff url(/images/116/background-body-wood-very-light.jpg); 
}

td, th	{
	vertical-align: top; 
}

ul li	{
	list-style: disc; 
}

ul li, ol li	{
	margin: 5px 0; 
}

/* Fontfaces */

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     GUST e-foundry
 * @vendorurl:  http://www.gust.org.pl/projects-1/e-foundry
 * @licenseurl: http://www.fontsquirrel.com/license/TeX-Gyre-Adventor
 *
 *
 */

@font-face {
	font-family: 'TeXGyreAdventorRegular';
	src: url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-regular.eot');
	src: local('TeX Gyre Adventor Regular'), local('TeXGyreAdventor-Regular'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-regular.woff') format('woff'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-regular.otf') format('opentype'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-regular.svg#TeXGyreAdventor-Regular') format('svg');
}

@font-face {
	font-family: 'TeXGyreAdventorItalic';
	src: url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-italic.eot');
	src: local('TeX Gyre Adventor Italic'), local('TeXGyreAdventor-Italic'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-italic.woff') format('woff'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-italic.otf') format('opentype'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-italic.svg#TeXGyreAdventor-Italic') format('svg');
}

@font-face {
	font-family: 'TeXGyreAdventorBold';
	src: url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bold.eot');
	src: local('TeX Gyre Adventor Bold'), local('TeXGyreAdventor-Bold'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bold.woff') format('woff'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bold.otf') format('opentype'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bold.svg#TeXGyreAdventor-Bold') format('svg');
}

@font-face {
	font-family: 'TeXGyreAdventorBoldItalic';
	src: url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bolditalic.eot');
	src: local('TeX Gyre Adventor Bold Italic'), local('TeXGyreAdventor-BoldItalic'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bolditalic.woff') format('woff'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bolditalic.otf') format('opentype'), url('/includes/fonts/fontfacekit/TeX-Gyre-Adventor/texgyreadventor-bolditalic.svg#TeXGyreAdventor-BoldItalic') format('svg');
}

/* Fonts */ 
p, td, th, font, div, textarea, input, address, li	{
}

p, address	{
	margin: 7px 5px; 
	font-style: normal; 
	line-height: 18px; 
}

/*em, i	{
	font-family: 'CartoGothicStdItalic', 'QuicksandBookOblique'; 
}

strong, b	{
	font-family: 'CartoGothicStdBold', 'QuicksandBold'; 
}

em strong, stong em, i strong, strong i, em b, b em, i b, b i	{
	font-family: 'CartoGothicStdBoldItalic', 'QuicksandBoldOblique'; 
}
*/

a	{
	color: #166194; 
	text-decoration: none; 
	font-weight: bold; 
}
	a:hover	{
		color: #287fb9; 
	}

a.email	{
	color: #166194; 
	font-size: 12px; 
}

p a[target="_blank"], li a[target="_blank"]	{
	padding-right: 14px; 
	background: url(/images/47/icon-external-link.png) no-repeat right center; 
}

	p a[target="_blank"] img, li a[target="_blank"] img	{
		padding-right: 0; 
		background: none; 
	}

	p a.nolinkimg, li a.nolinkimg	{
		padding-right: 0; 
		background: none; 
	}

pre	{
	display: block; 
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	float: right; 
	width: 350px; 
	margin: 15px; 
	padding: 20px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	background: #fcdccc url(/images/25/background-submenu.png);
	border: 3px solid #ff6600; 
	word-wrap: text-overflow; 
	white-space: pre-wrap; 
	font-family: Verdana, sans-serif, Helvetica; 
	font-size: 11px; 
	font-weight: bold; 
	text-align: center; 
	-webkit-transform: rotate(2deg); 
/*	-moz-transform: rotate(2deg); */
	-moz-box-shadow: 0px 0px 6px #2d2d2d; 
	-webkit-box-shadow: 0px 0px 6px #2d2d2d; 
	box-shadow: 0px 0px 6px #2d2d2d; 
}

h1, h2, h3, h4	{
	font-family: 'TeXGyreAdventorRegular', Verdana, Helvetica;
	letter-spacing: normal; 
	margin: 7px 5px; 
	padding-left: 10px; 
	font-weight: normal; 
	color: #166194; 
	background: url(/images/27/heading-icon.png) no-repeat left center; 
}
	h1 strong, h2 strong, h3 strong, h4 strong	{
		font-family: 'TeXGyreAdventorBold', Verdana, Helvetica; 
		font-weight: bold; 
	}
	
	h1	{
		font-size: 23px; 
		line-height: 23px; 
		margin-top: 23px; 
		margin-bottom: 10px; 
	}
	h2	{
		font-size: 17px; 
		line-height: 17px; 
		margin-top: 17px; 
		margin-bottom: 8px; 
	}
	h3	{
		font-size: 15px; 
		line-height: 15px; 
		margin-top: 13px; 
		margin-bottom: 6px; 
	}
	h4	{
		font-size: 13px; 
		line-height: 13px; 
		margin-top: 9px; 
	}

div#top h1	{
	font: 28px/45px 'TeXGyreAdventorRegular', Verdana;
	font-weight: normal; 
	color: #ffffff; 
	padding: 0; 
	background: none; 
}
	header div#top h1 strong	{
		font-family: 'TeXGyreAdventorBold', Verdana; 
		font-weight: bold; 
	}

div#menu ul	{
	display: block; 
	width: 100%; 
	height: 100%; 
	font-family: 'TeXGyreAdventorBold', Verdana; 
	font-weight: bold; 
	letter-spacing: 2px; 
	color: #ffffff; 
	list-style: none; 
	padding: 0; 
	margin: 0; 
}
	div#menu ul li	{
		display: block; 
		width: 100%; 
		height: 40px; 
		margin: 0; 
		font-size: 20px; 
	}
		div#menu ul li:last-child	{
			height: 38px; 
		}
		div#menu ul li a	{
			display: block; 
			width: 160px; 
			height: 30px;
			margin: 0; 
			padding: 5px 15px;  
			color: #ffffff; 
			text-decoration: none; 
			background: url(/images/3/background-menu.png);
		}
		div#menu ul li:last-child a	{
			height: 28px; 
		}
		div#menu ul li a:hover, div#menu ul li.active a	{
			color: #ff6600; 
			background: url(/images/25/background-submenu.png); 
		}

div#menu ul li ul	{
	position: absolute; 
	top: 0; 
	right: 190px; 
	display: block; 
	width: 0; 
	height: 100%; 
	font-family: 'TeXGyreAdventorBold', Verdana; 
	font-weight: bold; 
	letter-spacing: 2px; 
	color: #ffffff; 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	background: url(/images/25/background-submenu.png); 
	-moz-transition: width 500ms ease-in-out; 
	-webkit-transition: width 500ms ease-in-out;
}
	div#menu ul li:hover > ul	{
		width: 160px; 
	}
	
	div#menu ul li > ul li	{
		display: block; 
		width: 100%; 
		height: 40px; 
		margin: 0; 
		font-size: 14px;
		overflow: hidden; 
	}
		div#menu ul li ul li:last-child	{
			height: 38px; 
		}
		div#menu ul li ul li a	{
			display: block; 
			width: 100%; 
			height: 18px;
			margin: 0; 
			padding: 11px 15px;  
			color: #ff6600; 
			text-decoration: none; 
			background: url(/images/25/background-submenu.png);
			overflow: hidden; 
		}
		div#menu ul li ul li a:hover, div#menu ul li ul li.active a	{
			color: #303030; 
			background: none; 
		}

aside, aside p	{
	color: #4d4d4d; 
	line-height: 18px; 
}

aside article p	{
	margin: 5px 0; 
}

div#aboutWM dl	{
	margin: 0; 
	padding: 0; 
	color: #303030; 
}
	div#aboutWM dd, div#aboutWM dt	{
		font-size: 17px; 
		line-height: 22px; 
		margin: 5px; 
	}
	div#aboutWM dt	{
		font-family: 'TeXGyreAdventorBold', Verdana; 
		font-weight: bold; 
	}
	div#aboutWM dd	{
		margin-left: 10px; 
	}

footer h1	{
	font-family: 'TeXGyreAdventorRegular', Verdana; 
	font-weight: normal; 
	font-size: 15px; 
	color: #98ca3c; 
	margin: 20px 5px 14px 5px; 
	padding: 0; 
	background: none; 
}

	footer h1 strong	{
		font-family: 'TeXGyreAdventorBold', Verdana; 
		font-weight: bold; 
	}

footer p, footer address	{
	font-size: 11px; 
	color: #dfdfdf; 
	line-height: 14px; 
}

footer a	{
	color: #98ca3c; 
	font-weight: normal; 
	text-decoration: none; 
}
	footer a:hover	{
		color: #98ca3c; 
		text-decoration: underline; 
	}

/* Divs */
header, footer, nav, section, aside, article	{
	display: block; 
}

div#ie6warning	{
	display: none; 
	position: absolute; 
	z-index: 200; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 15px; 
	background: #fdffc4; 
	border-bottom: 1px solid #777; 
	text-align: left; 
}

div#container	{
	position: relative; 
	width: 960px; 
	margin: 0 auto; 
	text-align: left; 
	padding-bottom: 10px; 
	background: url(/images/43/logo-websiteman-big-faded.png) no-repeat -450px 680px; 
}
div#container.page39, div#container.page157	{
	background: url(/images/117/spatel-faded.png) no-repeat 70px 430px; 
}

	header	{
		position: relative; 
		width: 960px; 
		margin: 0 0 20px 0; 
		padding: 10px 0 20px 0; 
		border-bottom: 1px solid #b3b3b3; 
	}
	
		div#top	{
			position: relative; 
			width: 100%; 
			margin: 20px 0 25px 0; 
			padding: 10px 0 0 0; 
			border-bottom: 1px solid #e5e5e5; 
		}
		
			div#buttons	{
				float: right; 
				width: 250px; 
				margin: 20px 0 0 0; 
			}
			
				div#buttons ul	{
					position: relative; 
					list-style: none; 
					padding: 0; 
					margin: 0; 
					height: 50px; 
				}
					div#buttons ul li	{
						display: inline; 
						float: left; 
						width: 60px; 
						height: 50px; 
						margin: 1px 10px; 
					}
					div#buttons ul li.chat div	{
						position: absolute; 
						bottom: -2px; 
						left: 10px; 
					}
					div#buttons ul li.chat span	{
						position: absolute; 
						display: none; 
						top: -40px; 
						left: -70px; 
						width: 210px;
						height: 59px; 
						background: url(/images/82/chat-met-een-websiteman.png) no-repeat; 
					}
					div#buttons ul li.chat:hover span	{
						display: block; 
					}
					div#buttons ul li a.contact	{
						position: absolute; 
						display: block; 
						width: 60px; 
						height: 48px; 
						background: url(/images/21/button-telefoon.png) no-repeat bottom center; 
					}
					div#buttons ul li a span	{
						position: absolute; 
						display: none; 
					}
						div#buttons ul li:hover a.contact	{
							background-position: top center; 
						}
						div#buttons ul li:hover a.contact span	{
							display: block; 
							width: 148px; 
							height: 50px; 
							top: -40px; 
							left: -58px; 
							background: url(/images/45/laat-websiteman-je-bellen.png) no-repeat; 
						}
					div#buttons ul li a.twitter	{
						position: relative; 
						display: block; 
						width: 39px; 
						height: 47px; 
						background: url(/images/7/button-twitter.png) no-repeat bottom center; 
					}
						div#buttons ul li:hover a.twitter	{
							background-position: top center; 
						}
						div#buttons ul li a.twitter:hover span	{
							display: block; 
							width: 79px; 
							height: 51px; 
							top: -38px; 
							left: -15px; 
							background: url(/images/5/volg-ons-op-twitter-websitemannl.png) no-repeat; 
						}

		nav	{
			position: relative; 
			width: 958px; 
			height: 238px; 
			border: 1px solid #4d4d4d; 
			background: #fff url(/images/30/header-5-filmstrip.jpg) no-repeat; 
		}
		
			div#logo	{
				position: absolute; 
				top: 0px; 
				left: 0px; 
				width: 400px; 
				height: 100%; 
				background: url(/images/2/header-logo-websiteman-schaduw.png) no-repeat -20px -15px; 
			}
			
			div#menu	{
				position: absolute; 
				top: 0; 
				right: 0; 
				width: 190px; 
				height: 100%; 
			}
			
			div.submenu	{
				position: absolute; 
				top: 0; 
				right: 190px; 
				width: 0; /*160px; */
				height: 238px; 
				background: url(/images/25/background-submenu.png) no-repeat; 
				overflow: hidden; 
			}
			
		div#bottom	{
			display: none; 
			position: relative; 
			width: 960px; 
			height: 200px; 
		}
		
			div#bottom.page1	{
				display: block; 
			}
			
			div#aboutWM	{
				position: relative; 
				float: left; 
				width: 310px; 
				height: 166px; 
				margin: 20px 0 0 0; 
				padding: 5px; 
				z-index: 10; 
			}
			
			div#bottom div.portfolioImg	{
				position: absolute; 
				top: 20px; 
				left: 338px; 
				width: 300px; 
				height: 170px; 
				border: 1px solid #4d4d4d; 
				overflow: hidden; 
				-webkit-transition: all 1s ease-in-out;
				-moz-transition: all 1s ease-in-out;
				z-index: 1; 
			}
				div#bottom div.portfolioImg.right	{
					left: auto; 
					right: 0; 
				}
				
				div#bottom div.portfolioImg div.wm-logo	{
					position: absolute; 
					top: 0; 
					right: 0; 
					width: 69px; 
					height: 79px; 
					background: url(/images/13/portfolio-websiteman-banner-logo.png) no-repeat; 
				}
				
				div#bottom div.portfolioImg:hover	{
					-webkit-transform: scale(1.1); 
					-moz-transform: scale(1.1); 
					transform: scale(1.1); 
					z-index: 5; 
				}
	section	{
		position: relative; 
		width: 960px; 
		clear: both; 
		margin-bottom: 30px; 
	}
	
		section aside	{
			position: relative; 
			float: left; 
			width: 290px; 
			margin: 5px 20px 0 0; 
			padding: 5px; 
		}
		
		/* SPATEL ACTIE */
		section aside#normal	{
			display: block; 
		}
		section.page39 aside#normal, section.page157 aside#normal	{
			display: none; 
		}
		
		section aside#spatel	{
			display: none; 
		}
		section.page39 aside#spatel, section.page157 aside#spatel	{
			display: block; 
		}
		
			aside#spatel article	{
				clear: both; 
				font-size: 11px; 
			}
			
				aside#spatel article img	{
					float: left; 
					margin: 5px; 
					width: 80px; 
					border: 1px solid #000; 
				}
		/* END SPATEL ACTIE */
		
			aside article	{
				margin: 10px 0; 
				padding: 5px; 
			}
	
			div#moben	{
				position: relative; 
				width: 100%; 
				text-align: center; 
				margin-top: 10px; 
			}
		
		div#content	{
			position: relative; 
			float: left; 
			width: 610px; 
			margin: 5px 0 0 20px; 
			padding: 5px; 
		}
		
			div#content.sidebar0	{
				width: 950px; 
				margin: 5px 0 90px 0; 
			}

footer	{
	position: relative; 
	bottom: 0; 
	left: 0; 
	width: 100%; 
	height: 230px; /*75px*/
	text-align: center; 
}

	div#footer	{
		position: relative; 
		width: 950px; 
		height: 100%; 
		margin: 0 auto; 
		padding: 5px; 
		border-bottom-right-radius: 10px; 
		border-bottom-left-radius: 10px; 
		-webkit-border-top-right-radius: 10px; 
		-moz-border-radius-topright: 10px; 
		-webkit-border-top-left-radius: 10px; 
		-moz-border-radius-topleft: 10px; 
		background: #4d4d4d url(/images/28/the-green-fan-faded.png) no-repeat 0px 110px; 
		overflow: hidden; 
		text-align: left; 
		z-index: 99;  
	}
	
		div#footer_icons	{
			position: relative; 
			float: right; 
			width: 400px; 
			height: 350px; 
			margin-top: 20px; 
			margin-left: 25px; 
			padding-left: 25px; 
			border-left: 1px dashed #777777; 
		}

			div#footer_icons span	{
				display: block; 
				position: relative; 
				float: left; 
				height: 20px; 
				margin: 5px; 
				cursor: pointer; 
			}
				span#ico_Adobe	{
					width: 20px; 
					background: url(/images/16/icon-adobe.png) top left; 
				}
				span#ico_Debian	{
					width: 77px; 
					background: url(/images/17/icon-debian.png) top left; 
				}
				span#ico_iDEAL	{
					width: 23px; 
					background: url(/images/18/icon-ideal.png) top left; 
				}
				span#ico_intel	{
					width: 31px; 
					background: url(/images/19/icon-intel.png) top left ; 
				}
				span#ico_PayPal	{
					width: 74px; 
					background: url(/images/20/icon-paypal.png) top left; 
				}
				span#ico_crossBrowser	{
					width: 20px; 
					background: url(/images/22/icon-cross-browser.png) top left; 
				}
				div#footer_icons span:hover	{
					background-position: bottom center; 
				}

			p#footerIconText	{
				clear: both; 
			}

div.spacer	{
	position: relative; 
	clear: both; 
	width: 100%; 
}

/* Images */
img	{
	border: none; 
}

img.linec, img.linel, img.nolinel, img.liner, img.noliner	{
	border: 1px #4d4d4d solid; 
	margin: 4px; 
}
	
img.linec	{
	display: block; 
	margin: 4px auto; 
}

img.nolinec	{
	display: block; 
	margin: 4px auto; 
	border: none; 
}

img.linel	{
	float: left; 
}

img.nolinel	{
	float: left; 
	border: none; 
}

img.liner	{
	float: right;
}

img.noliner	{
	float: right; 
	border: none; 
}

img#pricetag	{
	position: absolute; 
	top: 30px; 
	right: -70px; 
	z-index: 40; 
}

img.portfolio	{
	float: left; 
	border: 1px solid #4d4d4d; 
	margin: 5px 4px; 
	clear: both; 
}

a.emailhover img	{
	cursor: pointer; 
	margin-top: 0; 
	margin-bottom: -1px; 
}


/* TinyMCE specific rules */
.mceContentBody a { 
	color: #166194 !important; 
	text-decoration: none !important; 
	font-weight: bold !important; 
 }
.mceContentBody { background: transparent; text-align: left; }