/* --------------------------------------------------*/ 
/*  Basis structuur							 		
/* --------------------------------------------------*/

html{
	min-width: 1024px;
	background: url('../img/bg.jpg') center top no-repeat;	
}
body, h1, h2, h3, p, ul, li{margin:0;padding:0;}

body{
	font-family: Georgia, times new roman;
}

a img{border: 0;}
ul{list-style: none;}
li a{display: block;}


.btn a{
	font-size: 22px;
	font-style: italic;
	
	color: #000;
	text-shadow: #fff 1px 1px 1px;
	text-decoration: none;
}

#bg{
	display: none;
}

/*  Header							 		
/* --------------------------------------------------*/

#container{
	width: 820px;
	margin: 0 auto;
}
h1{
	position: relative;
	width: 343px;
	height: 145px;
	margin: 80px auto 50px auto;	
}

#border{
	position: absolute;
	top: 0;
	left: 0;
	width: 343px;
	height: 147px;
	display: block;
	background: url('../img/border.png') no-repeat;
}

#nameTag{
	position: relative;
	width: 343px;
	height: 145px;
	display: block;
	
	margin: 80px auto 50px auto;	
}
#image1{	
	position: absolute;
	width: 341px;
	height: 145px;
	background: url('../img/tags.png') 0 0 no-repeat;	
}
#image2{	
	position: absolute;
	width: 341px;
	height: 145px;
	background: url('../img/secret.png') 0 0 no-repeat;	
}
#image2 a{	
	z-index: 2;
	
	width: 253px;
	height: 44px;
	
	display: block;
	border: 1px solid red;
	background: url('../img/secretBtn.png') no-repeat;	
}	


/*  Grote vakken
/*-----------------------------------------------------*/	

.incapeWide.left{
	width: 15px;
	height: 58px;
	
	background: url('../img/incapeWide.png') no-repeat;
	float: left;
}
.incapeWide.right{
	width: 15px;
	height: 58px;
	
	background: url('../img/incapeWide.png') -16px 0 no-repeat;
	float: left;	
}
.incapeWide.body{
	width: 762px;
	height: 45px;
	
	padding: 6px 14px 6px 14px;
	
	float: left;	
	background: #a59585 url('../img/incapeRepeat.jpg') repeat-x;
}

/*  Shared feeds
/*-----------------------------------------------------*/	

#sharedFeeds{
	position: relative;
	width: 762px;
	height: 45px;

	text-align: center;		
	margin: 0 auto;
}
#sharedFeeds li{
	display: inline-block;
}
#sharedFeeds #picasa a{
	width: 145px;
	height: 41px;
	
	padding: 10px 0 0 68px;
	
	background: url(../img/buttons.jpg) 0 0 no-repeat;
}
#sharedFeeds #picasa a:hover,
#sharedFeeds #picasa a:focus{
	background: url(../img/buttons.jpg) 0 -55px no-repeat;
}
#sharedFeeds #picasa a:active{
	height: 34px;
	position: relative;
	top: 2px;
	left: 2px;
	background: url(../img/buttons.jpg) 0 -105px no-repeat;
}
#sharedFeeds .single{
	position: relative;
	top: -1px;
}

/*  Bio
/*-----------------------------------------------------*/	

.persoon{
	width: 370px;
	margin-bottom: 35px;
	float: left;
}
#chantal_container{
	margin-left: 80px;
}

.bio{
	position: relative;
	width: 370px;
	height: 150px;
	
	margin: 35px 0 15px 0;
	
	float: left;
	background: url('../img/tags.png') 0 -154px no-repeat;
}
.bio h2{
	position: absolute;
	left: 150px;
	top: 16px; 
	
	font-size: 46px;
	font-weight: normal;
	color: #fff;
	text-shadow: #000 1px 2px 2px;
}
.bio p{
	position: absolute;
	left: 160px;
	top: 70px;

	font-style: italic;
	color: #2f86f6;
}
.bio img{
	position: absolute;
	top: 2px;
	left: 3px;
}


/*  Feeds
/*-----------------------------------------------------*/	

.incapeSmall.top{
	width: 370px;
	height: 15px;
	float: left;
	background: url('../img/incapeSmall.png') no-repeat;
}
.incapeSmall.bottom{
	width: 370px;
	height: 15px;
	float: left;
	background: url('../img/incapeSmall.png') 0 -15px no-repeat;
}
.incapeSmall.body{
	width: 358px;
	
	padding: 10px 0 0 11px;
	
	float: left;
	background: #a59585 url('../img/incapeSmallRepeat.jpg') repeat-y;
}

.feeds .btn{
	position: relative;
	width: 370px;
	height: 50px;
	
	margin: 0 0 10px 0;
	
	float: left;
	display: block;
}

.persoon .btn span{
	position: absolute;
	top: 0;
	left: 4px;
	z-index: 1;
	
	width: 56px;
	height: 44px;
	
	display: block;
	background-image: url('../img/spriteIcon.png');
	background-repeat: none;
}

.btn.mail span{
	background-position: 0 0;	
}
.btn.twitter span{
	background-position: -62px 0;	
}
.btn.linkedin span{
	background-position: -125px 0;	
}
.btn.rss span{
	background-position: -188px 0;	
}
.btn.www span{
	background-position: -251px 0;	
}
.btn.delicious span{
	background-position: -314px 0;	
}

.feeds .btn a{
	width: 277px;
	height: 43px;
	
	padding: 10px 0 0 70px;
	
	float: left;
	background: url('../img/buttons.jpg') 0 -158px repeat-y;	
}
.feeds .btn a:hover,
.feeds .btn a:focus{
	background: url('../img/buttons.jpg') 0 -211px repeat-y;	
}
.feeds .btn:active a{
	position: relative;
	top: 2px;
	left: 2px;
	background: url('../img/buttons.jpg') 0 -264px repeat-y;	
}
.feeds .btn:active span{

	top: 2px;
	left: 4px;
}


/*  Footer
/*-----------------------------------------------------*/	

#footer{
	width: 100%;
	height: 100px;
	float: left;
}
#footer .body{
	padding-left: 0;
}
#footer ul.singleBtns{
	height: 50px;
	width: 500px;
	float: left;
}


#hyperlinks{
	width: 100%;
	height: 50px;
	text-align: center!important;
	float: left;
}

#footer ul.singleBtns,
#footer li{
	height: 50px;
}
#footer li{
	display: inline-block!important;
}



.singleBtns span{
	width: 13px;
	height: 50px;
	display: block;
	float: left;	
}
.singleBtns .btn_left{
	background: url('../img/buttons.jpg') 0 -317px;
}
.singleBtns .btn_right{
	background: url('../img/buttons.jpg') -23px -317px;
}
.singleBtns .btn a{
	padding: 10px 5px 0 5px;
	height: 40px;
	
	float: left;
	display: block;
	background: url('../img/btnRepeat.jpg') repeat-x;
}



.singleBtns .btn:hover .btn_left,
.singleBtns .btn:focus .btn_left{
	background: url('../img/buttons.jpg') -38px -317px;
}
.singleBtns .btn:active .btn_left,
.singleBtns .btn:active .btn_left{
	position: relative;
	top: 2px;
	left: 2px;
	height: 45px;
	background: url('../img/buttons.jpg') -67px -317px;
}
.singleBtns .btn:hover .btn_right,
.singleBtns .btn:focus .btn_right{
	background: url('../img/buttons.jpg') -53px -317px;
}
.singleBtns .btn:active .btn_right,
.singleBtns .btn:active .btn_right{
	position: relative;
	top: 2px;
	left: 2px;	
	height: 45px;	
	background: url('../img/buttons.jpg') -80px -317px;
}
.singleBtns .btn:hover a,
.singleBtns .btn:focus a{
	background: url('../img/btnRepeat.jpg') left -50px repeat-x;
}
.singleBtns .btn:active a{
	position: relative;
	top: 2px;
	left: 2px;
	
	background: url('../img/btnRepeat.jpg') left -105px repeat-x;
}