@import url('css-reset.css');

/*	KLEUREN

lichtblauw:  	#4e73fd;
roze:			#ce6588;

*/
	

html {
	width:					100%;
	height:					100%;
	}

body {
	height:					100%;
	background:				#b1d1f7 url('../images/layout/large-bg.jpg') repeat-x;
	background-position:	bottom;
	background-attachment:	fixed;
	text-align:				center;
	font: 					0.7em/1.4em "Century Gothic", Century Gothic, Arial, Verdana, sans serif;
	color:					#404040;
	}
	
#wrapper {
	margin:					0 auto;
	width:					1015px;
	}

/**
		HEADER
**************************************/
	
#header {
	width:					1015px;
	height:					167px;
	position:				relative;
	}

#header h1 {
	position:				absolute;
	top:					45px;
	left:					0;
	}

#header h1 a,
#header h1 a:visited,
#header h1 a:hover {
	display:				block;
	width:					326px;
	height:					109px;
	text-indent:			-3000px;
	background:				url('../images/layout/logo.png') no-repeat top left;
	}

#header #navigation {
	background:				url('../images/layout/menu-pattern-bg.gif');
	width:					635px;
	height:					97px;
	position:				absolute;
	top:					45px;
	left:					380px;
	}

#navigation #top-menu {
	padding:				15px 5px 0 10px;
	}
	
#navigation #top-menu li {
	float:					left;
	padding:				0 2px;
	font-size:				26pt;
	font-weight:			bold;
	letter-spacing:			-1px;
	display:				block;
	height:					30px;
	line-height:			30px;
	}	

#navigation #top-menu li span {	
	color:					#4e73fd;
	}
	
#navigation #top-menu li a,
#navigation #top-menu li a:visited {
	text-decoration:		none;
	color:					#fff;
	}

#navigation #top-menu li a:hover,
#navigation #top-menu li.active a,
#navigation #top-menu li.active a:visited,
#navigation #top-menu li.active a:hover {
	color:					#4e73fd;
	}
	
#meta-nav {
	position:				absolute;
	right:					0;
	top:					20px;
	color:					#fff;
	}
	
#meta-nav span {
	padding:				0 3px;
	color:					#4e73fd;
	}
	
#meta-nav a,
#meta-nav a:visited {
	text-decoration:		none;
	color:					#fff;
	}
	
#meta-nav a:hover {
	color:					#4e73fd;
	text-decoration:		underline;
	}


/**
		CONTENT
**************************************/	
	
#content {
	width:					100%;
	background:				url('../images/layout/pattern-bg.gif');	
	position:				relative;
	margin-bottom:			17px;
	}
	
#left-column {
	width:					633px;
	margin:					17px 0 17px 17px;
	float:					left;
	text-align:				left;
	}
	
#right-column {
	width:					331px;
	margin:					17px 17px 17px 0;
	float:					right;
	text-align:				left;
	}	

#right-column h2 {
	font-size:				22pt;
	line-height:			22pt;
	font-weight:			bold;
	color:					#4e73fd;
	margin-left:			25px;
	}

/**
		HEADER SLIDESHOW
**************************************/	

#slideshow {
	width:					633px;
	height:					232px;
	margin-bottom:			17px;
	background:				#efefef;
	}
	
#slideshow img {
	width:					100%;
	height:					100%;
	}

/**
		CONTENT BLOCK
**************************************/	

.content-block {
	width:					100%;
	padding:				20px 0;
	background:				#fff;
	margin-bottom:			17px;
	}

.content-block div.spacer-block {
	margin:					0 25px;
	}

.content-block h2 {
	font-size:				22pt;
	line-height:			22pt;
	font-weight:			bold;
	color:					#4e73fd;
	
	}
	
.content-block h3 {
	font-size:				16pt;
	line-height:			16pt;
	font-weight:			bold;
	color:					#4e73fd;
	padding:				6px 0 0 0;
	}
	
.content-block h4 {
	font-size:				12pt;
	line-height:			12pt;
	font-weight:			bold;
	color:					#4e73fd;
	padding:				6px 0 0 0;
	}
	
.content-block h5 {
	font-size:				11pt;
	line-height:			11pt;
	font-weight:			normal;
	color:					#ce6588;
	padding:				6px 0 0 0;
	}

.content-block p {
	margin:					5px 0 10px 0;
	}

.content-block em {
	font-style:italic;
	}
	
.content-block strong {
	font-weight:bold;
	}

.content-block ul, .content-block ol {
	list-style:				disc;
	margin:					6px 0 6px 15px;
	}

.content-block a,
.content-block a:visited {
	text-decoration:		none;
	color:					#4e73fd;
	}
	
.content-block a:hover {
	text-decoration:		underline;
	}

.content-block .project-tasks {
	color:					#ce6588;
	padding-left:			25px;
	}
	
/**
		NIEUWS/BLOG SETTINGS
**************************************/	

.post-date {
	margin-left:			25px;
	color:					#ce6588;
	}
	
.read-more {
	}	
	
.read-more-project {
	margin-left:25px;
	}	

/**
*			PAGE NAVIGATION
**************************************/
	
#page-navigation {
	width:100%;
	align:right;
	height:24px;
	margin:5px 0;
	line-height:22px;
	color:#555;

	}
								 
#page-navigation .nav-info {
	float:left;
	padding-left:5px;
	width:275px;
	font-size:120%;
	}

#page-navigation .nav-info strong {
	font-weight:bold;
	border-bottom:1px dotted #333;
	color:#444;
	}

#page-navigation #nav-links {
	float:left;
	width:335px;
	text-align:right;
	}
							 
#page-navigation #nav-links a,
#page-navigation #nav-links a:visited {
	display:inline-block;
	margin-left:3px;

	padding:0 3px 1px 3px;
	text-decoration:none;
	color:#000;
	}				
									 
#page-navigation #nav-links a:hover,
#page-navigation #nav-links a.active,
#page-navigation #nav-links a.active:visited,
#page-navigation #nav-links a.active:hover {
	/*border:1px solid #777;*/
	background:#4e73fd;
	text-decoration:none;
	font-weight:normal;
	color:#fff;
	}						 					 

#page-navigation #nav-links a.active,
#page-navigation #nav-links a.active:visited,
#page-navigation #nav-links a.active:hover {
font-weight:bold;
	}

/**
		PROJECTEN
**************************************/

.project-images {
	margin:					15px 0 0 0;
	}
	
.project-images a,
.project-images a:visited {
	float:					left;
	margin:					0 0 20px 35px;
	}
	
.project-images a img {
	width:					255px;
	height:					160px;
	}

/**
		LATEST PROJECT
**************************************/	

.latest-project-item {
	float:					left;
	margin-top:				10px;
	margin-left:			25px;
	width:290px;
	}
	
.latest-project-item h3 {
	margin-left:			0;
	margin-bottom:			5px;
	font-size:				12pt;
	}

.latest-project-image {
	background:				url('../images/layout/pattern-bg.gif');	
	}

.latest-project-image img {
	width:					275px;
	height:					120px;
	padding:				6px;
	}

.latest-project-description {
	margin:					4px 0;
	}

.latest-project-description a,
.latest-project-description a:visited {
	text-decoration:		none;
	color:					#4e73fd;
	}
	
.latest-project-description a:hover {
	text-decoration:		underline;
	}
	
.latest-project-tasks {
	color:					#ce6588;
	}

.portfolio-link img {
	width: 580px;
	margin:10px 0 10px 25px;
	}

/**
		TAG CLOUD
**************************************/	

#tag-cloud {
	text-align:				left;
	width:					100%;
	height:					232px;
	background:				#fff;
	margin-bottom:			17px;
	}

#tag-cloud div {
	font-size:				22pt;
	font-weight:			bold;
	line-height:			20pt;
	letter-spacing:			-1px;
	padding:				20px;
	color:					#4e73fd;
	}

/**
		DIENSTEN
**************************************/	
	
#diensten {
	width:					100%;
	height:					303px;
	margin-bottom:			17px;
	background:				#efefef;
	}

/**
		LATEST BLOG POSTS
**************************************/	

#latest-blog {
	background:				#fff;
	width:					100%;
	padding:				20px 0;
	}
	
.latest-blog-item {
	margin:					17px 0 0 25px;
	}
	
.latest-blog-title a,
.latest-blog-title a:visited {
	color:					#4e73fd;
	text-decoration:		none;
	font-weight:			bold;
	font-size:				12pt;
	}
	
.latest-blog-title a:hover {
	text-decoration:		underline;
	}
	
.latest-blog-date {
	color:					#ce6588;
	}

/**
		CONTACT FORMULIER
**************************************/	

.contact-info {
	width:100%;
	padding:6px 0;
	border:1px solid #ccc;
	margin:10px 0;
	font-weight:bold;
	}
	
.contact-info div{
	margin:5px 15px;
	}
	
.success {
	color:#006600;
	border:1px dotted #006600;
	background:#E9FCEE;
	}
	
.error {
	border:1px dotted #990000;
	background:#F9DFE1;
	color:#990000;
	}


#contact-form {
	width:					100%;
	margin:					20px 0 10px 0;
	}

#contact-form form {
	width:					100%;
	}

#contact-form form div.form-spacer {
	width:					100%;
	height:					28px;
	clear:					both;
	margin-bottom:			5px;
	}
		
#contact-form form div.form-spacer span {
	display:				block;
	width:					160px;
	height:					28px;
	line-height:			28px;
	float:					left;
	text-indent:			5px;
	font-weight:			bold;
	}
	
#contact-form form div.form-spacer input.text-input {
	float:					left;
	width:					350px;
	height:					18px;
	padding:				3px 0 0 3px;
	margin-top:				1px;
	color:					#333;
	font: 					12px/1.4em "Century Gothic", Century Gothic, Arial, Verdana, sans serif;
	}

#contact-form form div.form-spacer .textarea-input {
	dsplay:					block;
	width:					350px;
	height:					150px;
	padding:				3px 0 0 3px;
	float:					left;
	color:					#333;
	font: 					12px/1.4em "Century Gothic", Century Gothic, Arial, Verdana, sans serif;
	margin-bottom:			15px;
	}

#contact-form form div.form-spacer select.select-option {
	float:					left;
	width:					246px;
	height:					23px;
	padding:				1px;
	margin-top:				1px;
	color:					#333;
	}

#contact-form form div.form-spacer select.price-select {
	float:					left;
	width:					120px;
	height:					23px;
	padding:				1px;
	margin-top:				1px;
	color:					#333;
	}

#contact-form form input.submit-btn {
	display:				block;
	margin:					15px 0 0 0;
	height:					2.6em;
	width:					8em;
	color:					#333;
	}


/**
		OVERIGE STYLES
**************************************/	
	
.clearer {
	width:					100%;
	height:					1px;
	clear:					both;
	}