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

body{
	behavior:url(csshover.htc);
	font-family:"trebuchet ms","arial";
	font-size:10px;
	text-align:justify;
	font-weight:bold;
}

.preload{
display:none;
position:absolute;
top:0px
left:0px;
}

hr{
color:#888888;
margin: 3px 3px 3px 3px;
}

h1{
//color:#f69200;
color:#f38b00;
font-size:22px;
}

h5{
color:#888888;
font-size:9px;
}

h6{
//color:#f69200;
color:#f38b00;
font-size:9px;
}

p{
color:white;
margin: 0px 0px 0px 0px;
}

ul{
list-style-type:square;
list-style-position:inside;
//color:#f69200;
color:#f38b00;
}

a{
color:#888888;
text-decoration:none;
}

a:hover{
//color:#f69200;
color:#f38b00;
}

td{
padding-right:20px;
color:white;
}

form td{
padding-right:15px;
}

textarea, input{
font-size:11px;
}

.grey{
color:#888888;
}

.red{
color:red;
}

.green{
color:green;
}

.mail{
	text-decoration:none;
	color:white;
}

#main{
	position: absolute;
	left:50%;
	top:50%;
	margin-left:-405px;
	margin-top:-255px;
}

.block{
	position:absolute;
	display:block;
	width:140px;
	height:100px;
	z-index:10;
}

#one{
background:black url("portfolio/home/block_01.jpg") 0 0 no-repeat;	left: 52px;
	top: 52px;
}

#two{
background:black url('portfolio/home/block_02.jpg') 0 0 no-repeat;	left: 194px;
	top: 52px;
}

#three{
background:black url('portfolio/home/block_03.jpg') 0 0 no-repeat;	left: 336px;
	top: 52px;
}

#four{
background:black url('portfolio/home/block_04.jpg') 0 0 no-repeat;	left: 478px;
	top: 52px;
}

#five{
background:black url('portfolio/home/block_05.jpg') 0 0 no-repeat;	left: 620px;
	top: 52px;
}

#six{
background:black url('portfolio/home/block_06.jpg') 0 0 no-repeat;	left: 52px;
	top: 154px;
}

#seven{
background:black url('portfolio/home/block_07.jpg') 0 0 no-repeat;	left: 194px;
	top: 154px;	
}

#eight{
background:black url('portfolio/home/block_08.jpg') 0 0 no-repeat;	left: 336px;
	top: 154px;
}

#nine{
background:black url('portfolio/home/block_09.jpg') 0 0 no-repeat;	left: 478px;
	top: 154px;
}

#ten{
background:black url('portfolio/home/block_10.jpg') 0 0 no-repeat;	left: 620px;
	top: 154px;	
}

#eleven{
background:black url('portfolio/home/block_11.jpg') 0 0 no-repeat;	left: 52px;
	top: 256px;	
}

#twelve{
background:black url('portfolio/home/block_12.jpg') 0 0 no-repeat;	left: 194px;
	top: 256px;
}

#thirteen{
background:black url('portfolio/home/block_13.jpg') 0 0 no-repeat;	left: 336px;
	top: 256px;
}

#fourteen{
background:black url('portfolio/home/block_14.jpg') 0 0 no-repeat;	left: 478px;
	top: 256px;
}

#fifteen{
background:black url('portfolio/home/block_15.jpg') 0 0 no-repeat;	left: 620px;
	top: 256px;
}

#sixteen{
background:black url('portfolio/home/block_16.jpg') 0 0 no-repeat;	left: 52px;
	top: 358px;
}

#seventeen{
background:black url('portfolio/home/block_17.jpg') 0 0 no-repeat;	left: 194px;
	top: 358px;
}

#eighteen{
background:black url('portfolio/home/block_18.jpg') 0 0 no-repeat;	left: 336px;
	top: 358px;
}

#nineteen{
background:black url('portfolio/home/block_19.jpg') 0 0 no-repeat;	left: 478px;
	top: 358px;
}

#twenty{
background:black url('portfolio/home/block_20.jpg') 0 0 no-repeat;	left: 620px;
	top: 358px;
}



#one:hover{
background:black url("portfolio/youthey/block_01.jpg") 0 0 no-repeat;
}

#two:hover{
background:black url("portfolio/gsminfo/block_01.jpg") 0 0 no-repeat;
}

#three:hover{
background:black url("portfolio/javagame/block_01.jpg") 0 0 no-repeat;
}

#four:hover{
background:black url("portfolio/mosqio/block_01.jpg") 0 0 no-repeat;
}

#five:hover{
background:black url("portfolio/it/block_01.jpg") 0 0 no-repeat;
}

#six:hover{
background:black url("portfolio/experiment/block_01.jpg") 0 0 no-repeat;
}

#seven:hover{
background:black url("portfolio/pongnoise/block_01.jpg") 0 0 no-repeat;
}

#eight:hover{
background:black url("portfolio/captainsfloor/block_08.jpg") 0 0 no-repeat;
}

#ten:hover{
background:black url("portfolio/trein/block_01.jpg") 0 0 no-repeat;
}

#eleven:hover{
background:black url("portfolio/maatwerkenco/block_01.jpg") 0 0 no-repeat;
}

#twelve:hover{
background:black url("portfolio/luta/block_01.jpg") 0 0 no-repeat;
}

#thirteen:hover{
background:black url("portfolio/roosje/block_01.jpg") 0 0 no-repeat;
}

#fourteen:hover{
background:black url("portfolio/infofinder/block_01.jpg") 0 0 no-repeat;
}

#fifteen:hover{
background:black url("portfolio/cube/block_01.jpg") 0 0 no-repeat;
}

#sixteen:hover{
background:black url("portfolio/funko/block_01.jpg") 0 0 no-repeat;
}

#seventeen:hover{
background:black url("portfolio/ziennaarinzicht/block_01.jpg") 0 0 no-repeat;
}

#eighteen:hover{
background:black url("portfolio/schijnenwerkelijkheid/block_01.jpg") 0 0 no-repeat;
}

#nineteen:hover{
background:black url("portfolio/jijenzilverklei/block_01.jpg") 0 0 no-repeat;
}

#twenty:hover{
background:black url("portfolio/helekleine/block_01.jpg") 0 0 no-repeat;
}

#bar1{
	color:#ffffff;
	position:absolute;
	left: 0px;
	top: 52px;
	width: 50px;
	height: 304px;
	z-index: 2;
background:black url('portfolio/home/bar_01.jpg') 0 0 no-repeat;}

#bar1 div{
display:none;
}
		
#bar2{
	color:#ffffff;
	position: absolute;
	left: 478px;
	top: 0px;
	width: 282px;
	height: 52px;
	z-index: 2;
background:white url('portfolio/home/bar_02.jpg') 0 0 no-repeat;}

#bar2 div{
color:black;
width:282px;
height:202px;
overflow:hidden;
display: none;
}

#bar3{
	color:#ffffff;
	position: absolute;
	left: 762px;
	top: 154px;
	width: 50px;
	height: 304px;
	z-index: 2;
background:white url('portfolio/home/bar_03.jpg') 0 0 no-repeat;}

#bar3 div{
display: none;
}

#bar4{
	position: absolute;
	left: 52px;
	top: 460px;
	width: 282px;
	height: 50px;
	z-index: 2;
background:black url('portfolio/home/bar_04.jpg') 0 0 no-repeat;}

#bar4 div{
display:none;
}

#bar1:hover{
	width: 334px;
	height: 304px;
	z-index: 200;
	background-image:none;
	background-color:black;
	color:white;
	overflow:hidden;
}

#bar1:hover div{
display:block;
margin: 5px 10px 10px 5px;
}
		
#bar2:hover{
	z-index: 200;
}

#bar2:hover div{
	position:absolute;
	top:52px;
	display:block;
}

#bar2 div:hover{
	display:block;
}

#bar3:hover{
	z-index: 200;
	background-position:top right;
}

#bar3:hover div{
display:block;
}

#bar4:hover{
	left: 52px;
	top: 256px;
	width: 282px;
	height: 254px;
	z-index: 200;
	background-image:none;
	background-color:black;
	color:white;
}

#bar4:hover div{
display:block;
margin: 5px 10px 10px 5px;
}

.image{
text-align:center;
line-height:80%;
font-size:140px;
position:absolute;
font-size:100px;
color:white;
display:block;
right:0px;
width:50px;
height:102px;
}

.image:hover{
color:black;
}

.image:hover div{
position:absolute;
display:block;
left:-426px;
height:304px;
width:426px;
}

#image1{

}

#image1 div{
background:white url('portfolio/home/image_01.jpg') 0 0 no-repeat;}

#image1 div:hover{
display:none;	
}

#image1:hover div{
top:0px;
}

#image2{
top:102px;
}

#image2 div:hover{
display:none;	
}

#image2 div{
background:white url('portfolio/home/image_02.jpg') 0 0 no-repeat;}

#image2:hover div{
top:-102px;
}

#image3{
top:204px;
height:100px;
}

#image3 div:hover{
display:none;	
}

#image3 div{
background:white url('portfolio/home/image_03.jpg') 0 0 no-repeat;}

#image3:hover div{
top:-204px;
}