/* Kleuren
Roze: #f00090;
Donker blauw: #c0d0e0;
Licht blauw: #ecf1f4;
**********************************/
/* Cleared elements
**********************************/	
body, #header h1, #intro h2, #intro p, #contents h1, form, .sIFR-flash{
	margin: 0;
	padding: 0;
}
/* Set Sprite elements
**********************************/
#intro h2, #jflow-content-slider, a.jFlowPrev, 
a.jFlowNext, ul.navigation li a, ul#footer li.copy, ul#footer li a, button{
	background: url(../images/sprite/bg_sprite.png) no-repeat bottom right;
}
/* Background images
**********************************/
#header h1 a, #intro h2, ul#controller li a, ul.navigation li a, ul#footer li a, button{
	display:block;
	text-indent:-5555px;
}
/*Line image
*********************************/
#header, #intro, #contents{
	background: url(../images/background/line.png) bottom left no-repeat;
}
/* Clean lists
**********************************/
ul#controller, ul.navigation, ul#footer{
	list-style:none;
	margin:0;
	padding:0;
}
/* General layout
**********************************/

body{
	background: #e7f2f8 url(../images/background/body_bg.png) repeat-x;
	font-family: Georgia;
	font-size: 10px;
}

a{
	color: #f00090;
	text-decoration: none;
	outline: none;
}
a:hover{
	text-decoration: underline;
}
.hide{
	display: none;
}
object{
	outline: none;
}
.break{
	clear: both;
}
#container {
	position:relative;
	width:960px;
	margin:0 auto;
	padding: 0;
	text-align: left;
}
#header{
	height: 102px;
}
#header h1{
	position: relative;
	top: 18px;
	visibility: visible;
}
#header h1 a{
	width: 203px;
	height: 67px;
	background: url(../images/background/logo.png) no-repeat;
}
/* Intro
**********************************/
#intro{
	height: 151px;
}
#intro h2{
	width: 498px;
	height: 89px;
	background-position: -483px -872px; 

	position: relative;
	top: 28px;
}
body.portfolio #intro h2{
	width: 531px;
	height: 90px;
	background-position: 0 -107px;
}
body.over-mij #intro h2{
	width: 534px;
	height: 113px;
	background-position: 0 -749px;
}
body.contact #intro h2{
	width: 473px;
	height: 89px;
	background-position: 0 -872px;
}
#intro p{
	position: absolute;
	right: 0;
	top: 126px;
	width: 380px;
	font-size: 2.4em;
	text-align: justify;
	line-height: 33px;
	font-style: oblique;
}
/* Content
**********************************/
#contents{
	padding: 32px 0;
}
#contents h1{
	color: #f00090;
	font-size: 3.0em;
}
#contents p{
	font-size: 2.0em;
	text-align: justify;
	line-height: 30px;
	padding: 0;
	margin: 1em 0 1.5em 0;
}
#contents p.last{
	margin-bottom: 0;
}
#left{
	float: left;
	width: 460px;
	margin-right: 40px;
}
#right{
	float: left;
	width: 460px;
}
/* Portfolio
**********************************/
div.kolom{
	width: 300px;
	float: left;
}
div#col1{
	padding-right: 30px;
}
div#col3{
	padding-left: 30px;
}
#contents p.frame{
	border: 1px solid #d1d6dc;
	overflow: hidden;
	display: block;
	width: 298px;
	height: 148px;
	position: relative;
	margin: 0 0 0.5em 0;
	clear: left;
}
a.view{
	position: absolute;
	top: 65px;
	left: 1px;
	text-align: center;
	width: 296px;
	display: block;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.7);
}
*html a.view{
	background-color: #000;
}
p.frame img{
	border: 1px solid #ebf0f4;
	margin: 0;
}
#container #contents p.title{
	margin: 0 0 3.2em 0;
	padding: 0;
	font-size: 1.4em;
	line-height: 16px;
}
#contents p.left{
	float: left;
}
#contents p.right{
	float: right;
}
#container #contents p.last{
	margin: 0;
}


/* Slider
**********************************/
#jflow-content-slider{
	background-position: 0 -207px;
	margin: 0 auto;
	text-align: left;
	width: 942px;
	height: 532px;
	padding: 2px 0 0 2px;
}
ul#controller{
	position: absolute;
	top: 520px;
	left: 0;
	width: 100%;
}
ul#controller li{
	position: absolute;
}
ul#controller li.prev{
	left: 0;
}
ul#controller li.next{
	right: 0;
}
* html ul#controller li.next{
	right: -17px;
}
ul#controller li a{
	width: 59px;
	height: 59px;

}
a.jFlowPrev{
	background-position: -602px 0;
}
a.jFlowPrev:hover{
	background-position: -671px 0;
}
a.jFlowNext{
	background-position: -464px 0;
}
a.jFlowNext:hover{
	background-position: -533px 0;
}
/* Navigation
**********************************/
ul.navigation{
	position: absolute;
	top: 39px;
	left: 389px;
}
ul.navigation li{
	float: left;
}
ul.navigation li a{
	height: 25px;
}
ul.navigation li.home a{
	background-position: -741px -749px;
	width: 105px;
}
ul.navigation li.portfolio a{
	background-position: 0 0;
	width: 145px;
	margin-left: 17px;
}
ul.navigation li.over-mij a{
	background-position: -165px 0;
	width: 140px;
	margin-left: 17px;
}
ul.navigation li.contact a{
	background-position: -325px 0;
	width: 129px;
	margin-left: 17px;
}
ul.navigation li.home a:hover{
	background-position: -741px -784px;
}
ul.navigation li.portfolio a:hover{
	background-position: 0 -35px;
}
ul.navigation li.over-mij a:hover{
	background-position: -165px -35px;
}
ul.navigation li.contact a:hover{
	background-position: -325px -35px;
}
body.home ul.navigation li.home a{
	background-position: -741px -819px;
}
body.portfolio ul.navigation li.portfolio a{
	background-position: 0 -72px;
}
body.over-mij ul.navigation li.over-mij a{
	background-position: -165px -72px;
}
body.contact ul.navigation li.contact a{
	background-position: -325px -72px;
}
/* Contact formulier
**********************************/
form{
	height: 294px;
}
form label{
	width: 468px;
	height: 78px;
	margin-right: 20px;
	float: left;
}
* html form label{
	margin-right: 16px;
}
form label.email, form label.bericht{
	margin: 0;
}
form label.bericht{
	width: 960px;
	height: 171px;
	
}
form label input,
form label textarea{
	width: 450px;
	height: 34px;
	padding: 10px 0 0 20px;
	border: 1px solid #c6d2de;
	-moz-border-radius-bottomleft:6px;
	-moz-border-radius-bottomright:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-topright:6px;
	font: italic bold 2.0em Georgia;
	color: #c6d2de;
}
form label textarea{
	width: 940px;
	height: 127px;
}
form label input:hover, form label input:focus,
form label textarea:hover, form label textarea:focus{
	border: 1px solid #f00090;
	color: #000;
}
input.error,
textarea.error{
	border: 1px solid #f00090;
}
label.error {
	color:#525252;
	float: left;
	font: italic bold 1.5em "Arial", sans-serif;
	width:auto;
	height: auto;
}
button{
	width: 187px;
	height: 44px;
	background-position: -544px -749px;
	border: none;
	float: right;
	cursor: pointer;
}


/* Footer
**********************************/
ul#footer{
	padding: 21px 0 41px 0;
	text-indent: -5555px;
}
ul#footer li{
	float: left;
	height: 15px;
	margin-right: 6px;
}
ul#footer li a{
	height: 15px;
}
ul#footer li.copy{
	background-position: -464px -71px;
	width: 155px;
}
ul#footer li.portfolio a{
	background-position: -629px -71px;
	width: 78px;
}
ul#footer li.portfolio a:hover{
	background-position: -629px -96px;
}
ul#footer li.over-mij a{
	background-position: -717px -71px;
	width: 75px;
}
ul#footer li.over-mij a:hover{
	background-position: -717px -96px;
}
ul#footer li.contact a{
	background-position: -802px -70px;
	width: 62px;
}
ul#footer li.contact a:hover{
	background-position: -802px -96px;
}
ul#footer li.mail{
	float: right;
	margin: -2px 0 0 0;
}
ul#footer li.mail a{
	width: 258px;
	height: 19px;
	background-position: -740px 0;
}
ul#footer li.mail a:hover{
	background-position: -740px -29px;
}
/* sIFR
**********************************/
.sIFR-flash {
visibility: visible !important;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt; 
padding: 0pt; 
overflow: auto; 
letter-spacing: 0px; 
float: none;
}
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
}