@font-face {
    font-family: 'Ronnia';
    src: url('./fonts/RonniaReg.otf');
    font-weight: normal;
    font-style: normal;
}

*{
	margin: 0px;
	padding: 0px;
}

body{
	color: #fff;
	line-height: 1.6;
	font-size: 14px;
	font-family: Droid Sans, sans-serif;
	background-color: #31363c;
}

h1 { padding-top:15px;}

h1,h2{
	font-family: Droid Sans, sans-serif;
	font-size: 36px;
	text-align: center;
	margin-bottom: 30px;	
}

h2 { padding:15px;}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 16px;
}

em { font-style: italic;}

a {
	text-decoration:none;
	
}
a: link
{
    COLOR: #FFF;
    TEXT-DECORATION: none;
}

a:active
{
    COLOR: #FFF;
    TEXT-DECORATION: underline;
}


a:visited
{
    COLOR: #6FF;
    TEXT-DECORATION: none;
}
a:hover
{
    COLOR: #CCC;
    TEXT-DECORATION: underline;
}
a img{
	border: 0px;
}

#banderas {
	background-color: #31363c;
	padding: 0px;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

div#menu{
	position: fixed;
	width: 100%;
	top: 20px;
	left: 0px;
	height: 62px;
	background: url('./images/background_menu.png') repeat-x;
	box-shadow: 0px 2px 0px 0px rgba(0,0,0,.1);
	z-index: 1;
	line-height: 2;
}

div#inner_menu{
	position: relative;
	margin:10px auto;
	width: 1002px;
	text-align:center;
}

div#menu ul li{
	cursor: pointer;
	display:inline;
	list-style: none;
	padding:30px;
	margin-top:15px; 
	font-size: 18px;
	font-family: Droid Sans, sans-serif;
	text-shadow: 1px 1px 1px #0c0e10;
}

div#menu ul li:hover{
	color: #bbc3ce;
}

div#wrapper{
	position: relative;
	margin: 62px auto 0px;
	width: 1002px;
	z-index: 0;
}






/* blauw vlak */
div#blue{
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
	width: 942px;
	background: url('./images/background_blue.png') repeat-y;	
	text-shadow: 1px 1px 1px #093187;		
}

div#blue h1{
	border-bottom: 1px solid #3d75bc;
}

div#photo{
	position: relative;
	float: left;
	width: 443px;
}

div#information{
	position: relative;
	margin-left: 30px;
	float: left;
	width: 600px;
	text-align: left;
}

div#information h2{
	margin-bottom: 0px;
	padding-top:0px;
	font-size: 28px;
	font-family: Droid Sans, sans-serif;	
	text-align: left;
	top:0px;
	z-index:-1;
}
div.space{
	margin-bottom: 15px;
}

div.blue_spacer{
	margin-top: 30px;
	margin-bottom: 30px;
	height: 8px;
	background: #17529c;
}








/* paars vlak */
div#purple{
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
	width: 942px;
	height: 726px;
	background: url('./images/background_purple.png') repeat-y;	
	text-shadow: 1px 1px 1px #461746;
}

div#purple h2{
	border-bottom: 1px solid #8a558a;
}

div#blue h2{
	border-bottom: 1px solid #427bc3;
}

div#button_next{
	position: absolute;
	cursor: pointer;
	top: 25px;
	right: 30px;
	height: 37px;
	width: 37px;
	background: url('./images/background_buttons.png') top right no-repeat;
}

div#button_next:hover{
	background-position: bottom right;
}

div#button_prev{
	display: none;
	position: absolute;
	cursor: pointer;
	top: 25px;
	left: 30px;
	height: 37px;
	width: 37px;
	background: url('./images/background_buttons.png') top left no-repeat;
}

div#button_prev:hover{
	background-position: bottom left;
}

div.column{
	position: relative;
	width: 308px;
	float: left;
	text-align: center;
}

div.column_latest{
	position: relative;
	width: 308px;
	float: left;
	text-align: center;
	-webkit-box-shadow: 0 8px 6px -6px #0f3360;
	   -moz-box-shadow: 0 8px 6px -6px #0f3360;
	        box-shadow: 0 8px 6px -6px #0f3360;

}

div.column h3{
	font-size: 18px;
	margin-top:10px;
}

div.column_image{
	position: relative;
	width: 308px;
	height: 207px;
	-webkit-box-shadow: 0 8px 6px -6px #462146;
	   -moz-box-shadow: 0 8px 6px -6px #462146;
	        box-shadow: 0 8px 6px -6px #462146;
	border: 1px solid #8a558a;
}

div.column_spacer{
	position: relative;
	margin-bottom: 50px;
}

img.overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 1;
}


div.even{
	margin-left: 9px;
	margin-right: 9px;
}

div.ev{
	margin-left: 9px;
	margin-right: 9px;
	-webkit-box-shadow: 0 8px 6px -6px #0f3360;
	   -moz-box-shadow: 0 8px 6px -6px #0f3360;
	        box-shadow: 0 8px 6px -6px #0f3360;

}


div.set{
	display: none;
	position: absolute;
}


div.first_set{
	display: block;
}

















/* groen vlak */
div#green{
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
	width: 942px;
	background: url('./images/background_green.png') repeat-y;	
	
}

div#green h2{
	border-bottom: 1px solid #31818c;
}

div#green h4 span.right{
	float: right;
}

div#green h4 span{
	padding: 5px;
	background: #fff;
	color: #0b5c67
}

div#green div.column_left{
	position: relative;
	float: left;
	padding-right: 0px;
	width: 900px;
	border-right: 1px solid #31818c;
}

div#green div.column_right{
	position: relative;
	float: left;	
	padding-left: 30px;
	width: 440px;
}

div#green a{
	color:#FFF;
	
}


div.green_spacer_small{
	margin-top: 15px;
	margin-bottom: 15px;
	height: 1px;
	background: #31818c;
}

div.green_spacer{
	margin-top: 15px;
	margin-bottom: 15px;
	height: 8px;
	background: #0b5c67;
}

div.review_image{
	position: relative;
	margin-top: -3px;
	float: left;
	width: 48px;
	box-shadow: 2px 2px 1px #043d48;
}

div.review_text{
	position: relative;
	margin-left: 30px;
	float: left;
	width: 359px;
}



div.stars{
	margin-bottom: 10px;
}

div.stars_5{
	background: url('./images/background_5stars.png') center right no-repeat;
}
div.stars_4{
	background: url('./images/background_4stars.png') center right no-repeat;
}
div.stars_3{
	background: url('./images/background_3stars.png') center right no-repeat;
}
div.stars_2{
	background: url('./images/background_2stars.png') center right no-repeat;
}
div.stars_1{
	background: url('./images/background_1stars.png') center right no-repeat;
}
div.green_spacer{
	margin-top: 15px;
	margin-bottom: 15px;
	height: 8px;
	background: #0b5c67;
}








/* grijs vlak */
div#grey{
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
	width: 942px;
	text-shadow: 1px 1px 1px #352423;
	background-image: url(images/background_7.jpg);
	background-repeat: no-repeat;
}

div#gracias{
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
	width: 942px;
	text-shadow: 1px 1px 1px #352423;
	
}

div#map{
	position: relative;
	margin-top: -30px;
	padding: 20px;
	border: 1px solid #72686e;
}

div#grey div.column_left{
	position: relative;
	float: left;
	padding-right: 30px;
	width: 440px;
}

div#grey div.column_right{
	position: relative;
	float: left;	
	padding-left: 30px;
	width: 439px;
	border-left: 1px solid #72686e;
}

div#grey div.column_right ul li{
	float: left;
	list-style: none;
	margin-top: 15px;
	margin-left: 15px;
}
div#grey div.column_right span{
	position: relative;
	float: right;	
	padding-right: 30px;
	width: 300px;
}

div#grey div.column_right strong{
	padding: 5px;
	background: #4a4147;
}
div#grey div.column_right p{
	margin-bottom: 10px;
}

input.textfield{
	margin-top: 15px;
	padding: 5px;
	width: 429px;
	height: 28px;
	color: #594e55;
	background: #fff;
	border: 0px;
}

textarea{
	padding: 5px;
	color: #594e55;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 429px;
	height: 82px;
	max-width:  429px;
	max-height: 82px;
	min-width:  429px;
	min-height: 82px;
	background: #fff;
	border: 0px;
	font-size: 14px;
}

input.button{
	position: relative;
	width: 104px;
	height: 35px;
	border: 0px;
	color: #fff;
	font-size: 14px;
	font-family: Droid Sans, sans-serif;	
	cursor: pointer;	
	background: url('./images/background_submitbutton.png') no-repeat;
}

textarea.error,
input.error{
	font-size: 14px;
	border: 1px solid red;
}



div#grey h4{
	margin-top: 20px;
}

div.grey_spacer_small{
	margin-top: 30px;
	margin-bottom: 30px;
	height: 1px;
	background: #72686e;
}

div.grey_spacer{
	margin-top: 30px;
	margin-bottom: 30px;
	height: 8px;
	background-color: #4D424A;
}
div.greybrown_spacer{
	margin-top: 15px;
	margin-bottom: 15px;
	height: 8px;
	background-color: #594E56;
}

div.vimeo{
	position: absolute;
	display: none;	
	left: 387px;

}

div.be{
	position: absolute;
	display: none;	
	left: 323px;

}

div.linkedin{
	position: absolute;
	display: none;	
	left: 263px;

}

div.googleplus{
	position: absolute;
	display: none;	
	left: 197px;

}

div.dribbble{
	position: absolute;
	display: none;	
	left: 152px;

}

div.facebook{
	position: absolute;
	display: none;	
	left: 87px;

}

div.twitter{
	position: absolute;
	display: none;
	left: 37px;

}

div.tooltip{
	bottom: -25px;
	padding-top: 3px;
	padding-left: 10px;
	padding-right: 10px;
	height: 26px;
	background: url('./images/background_tooltip.png') top center no-repeat;
}


div#footer{
	position: relative;
	text-align: center;
	padding-top: 30px;
	margin-bottom: 60px;
	background: url('./images/background_grey_bottom.png') top left no-repeat;
	font-family: Droid Sans, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;	
}




div.clear{
	clear: both;
}














div#icon_contact{
	position: absolute;
	top: 0px;
	right: -58px;
	width: 59px;
	height: 60px;
	background: url('./images/background_icon_contact.png') top left no-repeat;		
}

div#icon_resume{
	position: absolute;
	top: 0px;
	right: -58px;
	width: 59px;
	height: 60px;
	background: url('./images/background_icon_resume.png') top left no-repeat;		
}

div#icon_showcase{
	position: absolute;
	top: 0px;
	right: -58px;
	width: 59px;
	height: 60px;
	background: url('./images/background_icon_showcase.png') top left no-repeat;		
}

div#icon_welcome{
	position: absolute;
	top: 0px;
	right: -58px;
	width: 59px;
	height: 60px;
	background: url('./images/background_icon_welcome.png') top left no-repeat;		
}




input,
textarea,
div.item,
div.item 
div.review_item,
div.stars h4,
div#grey p,
div#grey h4,
span.client,
div#information p{
	font-family: "Trebuchet MS", sans-serif;
	text-decoration: none;
}

span.client { line-height:16px;}

div#overlay{
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('./images/background_popup.png');
	z-index: 99999;
}

div#popup{
	position: relative;
	top: 40%;
	left: 45%;
	padding: 10px;
	height: 100px;
	width: 200px;
	background: #fff;
	opacity: 1;
	color: #000;
	font-family: "Trebuchet MS", sans-serif;	
}

div#popup h3{
	font-family: Droid Sans, sans-serif;	
}




div#slider{
	position: relative;
	width: 443px;
	height: 284px;
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
	border: 2px solid #fff;
}

div.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
div.nivoSlider a {
	border:0;
	display:block;
}

/* navigatie knoppen */
div.nivo-controlNav {
	position: absolute;
	right: 0px;
	bottom: 5px;
}

div.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
	display:block;
	width:22px;
	height:22px;
	background:url('./images/carousel/bullets.png')  no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}

/* actieve bolletje */
div.nivo-controlNav a.active {
	background-position:0 -22px;
}

/* volgende vorige knop */
div.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
	display:block;
	width:30px;
	height:30px;
	background:url('./images/carousel/arrows.png')  no-repeat;
	text-indent:-9999px;
	border:0;
}

/* vorige knop */
div.nivo-prevNav {
	left:0px;
}

/* volgende knop */
div.nivo-nextNav {
	right:0px;
}

/* volgende knop afbeelding */
div.nivo-directionNav a.nivo-prevNav {
	left:15px;
}

/* vorige knop afbeelding */
div.nivo-directionNav a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
} 
 
/* afbeelding met link erom */
div.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}

/* slice blokken */
div.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
div.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}

/* title tag kopjes voor afbeelding */
div.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:8;
}

div.nivo-caption p {
	padding:5px;
	margin:0;
}

div.nivo-caption a {
	display:inline !important;
}

div.nivo-html-caption {
    display:none;
}

/**************************************/
/*metanav*/
/**************************************/
.metanav
{
	PADDING-TOP: 0px;
	TEXT-ALIGN: right;
	COLOR: #FFF;
	FONT-SIZE: 14px;
	WHITE-SPACE: nowrap;
	OVERFLOW: visible;
	HEIGHT: 30px;
	padding-right: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #31363c;
	width: 960px;
}
.metanav A
{
    COLOR: #FFF;
    TEXT-DECORATION: none;
}
.metanav A:link
{
    COLOR: #FFF;
    TEXT-DECORATION: none;
}
.metanav A:visited
{
    COLOR: #FFF;
    TEXT-DECORATION: none;
}
.metanav A:active
{
	COLOR: #FFF;
	TEXT-DECORATION: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
}
.metanav A:hover
{
    COLOR: #6FF;
    TEXT-DECORATION: none;
}
.metanav_highlight
{
	COLOR: #CCC;
}