/*
Agora Webdesign
CSS Document: Version 1.0 2009
Developer: Agora Webdesign
URL: http://www.agoraweb.computerservicerandstad.nl/
*/

body { height: 100%; width: 100%; margin: 0; padding: 0; font-family: "Arial"; font-size: 12px; color: #444748; background-color: #bec5c8; background-image: url(images/bg.jpg); background-repeat: repeat; }

/* Stuff */
form, img { margin: 0; padding: 0; border: none; }
.clear { clear: both; }
#shelfPicParams { display: none; }

a {
	color: #444748;
}
a:active { outline: none; }
a:hover { text-decoration: none; }

a.cont { color: #444748; background: url(images/dotted.gif) repeat-x 0 bottom; text-decoration: none; }
a.cont:hover { background: none; } 

h1 {
	font-family: Arial;
	line-height: 25px;
	font-size: 20px;
	color: #5f5f5f;
	padding: 0;
	margin: 0 0 10px 0;
	background-image: url(images/h1.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}
h1:first-letter { color: #FFFFFF; }

h2 { font-family: Arial; font-size: 16px; color: #475470; margin: 0 0 5px 0; padding: 0; }

#wrap { width: 100%; min-width: 980px; position: relative; }

/* Header */
#header { width: 100%; position: absolute; top: 0; left: 0; z-index: 1 }

#header #logo {
	position: absolute;
	top: 25px;
	left: 40px;
	z-index: 5;
	width: 267px;
	height: 47px;
}

#header .notOfficial {

}

#header .lang { width: 55px; height: 18px; position: absolute; top: 0; right: 0; z-index: 3; font-size: 11px; text-transform: lowercase; }
#header .lang a {  color: #525860; text-decoration: none; margin: 0 3px 0 0; } 
#header .lang a:hover { color: #818d9c; }
#header .lang span {color: #ffffff; text-decoration: none;margin: 0 5px 0 0; } 

#header ul.menu { margin: 0; padding: 0; width: 50%; position: absolute; top: 35px; right: 0; list-style: none; z-index: 6; }
#header ul.menu li { margin: 0; padding: 0; display: block; width: 20%; height: 30px; float: left; text-align: center; }
#header ul.menu li a, #header ul.menu li span.sel { padding: 0 0 2px 0;font-size: 17px; line-height: 27px; color: #525860; font-weight: bold; text-decoration: none; background: url(/images/dotted.gif) repeat-x 0 19px; }
#header ul.menu li a:hover span { color: #FFFFFF; }
#header ul.menu li span.sel { background: none; }
#header ul.menu li span.sel span { color: #FFFFFF; }

#header #loader { position: absolute; z-index: 3; }

#header #table {
	width: 959px;
	height: 456px;
	position: absolute;
	top: 65px;
	right: 0;
	z-index: 3;
	background-image: url(images/table.jpg);
}   

#header #display {
	width: 268px;
	height: 181px;
	position: absolute;
	top: 80px;
	right: 90px;
	z-index: 6;
	background-image: url(images/display.png);
}
#header #keyboard {
	width: 206px;
	height: 178px;
	position: absolute;
	top: 185px;
	right: 222px;
	z-index: 5;
	background-image: url(images/keyboard.gif);
}
#header #tablet {
	width: 166px;
	height: 199px;
	position: absolute;
	top: 220px;
	right: 0;
	z-index: 5;
	background-image: url(images/tablet.gif);
}
#header #flower {
	width: 148px;
	height: 158px;
	position: absolute;
	top: 47px;
	right: 0;
	z-index: 5;
	background-image: url(images/flower.gif);
}
#header #mouse {
	width: 62px;
	height: 68px;
	position: absolute;
	top: 305px;
	right: 175px;
	z-index: 5;
	background-image: url(images/mouse.gif);
}
#header #coffee {
	width: 96px;
	height: 102px;
	position: absolute;
	top: 87px;
	right: 330px;
	z-index: 5;
	background-image: url(images/coffee.gif);
}
#header #paper {
	width: 154px;
	height: 118px;
	position: absolute;
	top: 113px;
	right: 510px;
	z-index: 5;
	background-image: url(images/paper.gif);
}
#header #pear { width: 33px; height: 49px; background: url(images/pear.gif); position: absolute; top: 140px; right: 733px; z-index: 5;  }
#header #magazines {
	width: 208px;
	height: 223px;
	position: absolute;
	top: 110px;
	right: 660px;
	z-index: 5;
	background-image: url(images/magazines.gif);
}

#header #flowers { width: 214px; height: 182px; background: url(images/flowers.gif); position: absolute; top: 190px; right: 629px; z-index: 7; }
#header #camera {
	width: 118px;
	height: 92px;
	position: absolute;
	top: 103px;
	right: 410px;
	z-index: 5;
	background-image: url(images/camera.gif);
}
#header #flash {
	width: 44px;
	height: 52px;
	position: absolute;
	top: 150px;
	right: 778px;
	z-index: 5;
	background-image: url(images/flash.gif);
}
#header #cellphone {
	width: 42px;
	height: 46px;
	position: absolute;
	top: 245px;
	right: 425px;
	z-index: 5;
	background-image: url(images/cellphone.gif);
}
#header #notepad {
	width: 171px;
	height: 142px;
	position: absolute;
	top: 208px;
	right: 500px;
	z-index: 5;
	background-image: url(images/notepad.gif);
}

#header #palm {
	width: 219px;
	height: 370px;
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 7;
	background-image: url(images/palm.png);
}

#header #shelfToggle { display: block; width: 200px; height: 170px; position: absolute; top: 350px; right: 590px; z-index: 6;  }
#header #shelfTop {
	width: 381px;
	height: 206px;
	position: absolute;
	top: 169px;
	right: 536px;
	z-index: 5;
	background-image: url(images/shelf_top.gif);
}

#header #shelf {
	width: 354px;
	height: 211px;
	position: absolute;
	top: 270px;
	right: 517px;
	z-index: 4;
	background-image: url(images/shelf.png);
}
#header #shelf #shelfPic { width: 160px; height: 136px; position: absolute; top: 7px; left: 100px; overflow: hidden; }
#header #shelf #shelfInnerShadow { width: 169px; height: 143px; background: url(images/shelf_inner_shadow.png); position: absolute; top: 2px; left: 97px; }
#header #shelfTopShadow { width: 183px; height: 41px; background: url(images/shelf_top_shadow.png); position: absolute; top: 374px; right: 598px; z-index: 6;  }

#header #chair {
	width: 458px;
	height: 389px;
	position: absolute;
	top: 345px;
	right: 150px;
	z-index: 5;
	background-image: url(images/chair.png);
}
#header #chair2 { width: 451px; height: 388px; background: url(images/chair2.png); position: absolute; top: 410px; right: 0; z-index: 5; }

/* Not official */
#header #smile { width: 24px; height: 39px; background: url(images/smile.gif); position: absolute; top: 24px; left: 270px; z-index: 5; }
#header #tabletWithChips { width: 202px; height: 203px; background: url(/images/tablet_with_chips.gif); position: absolute; top: 211px; right: 1px; z-index: 5; }
#header #cigarettes { width: 59px; height: 51px; background: url(images/cigarettes.gif); position: absolute; top: 190px; right: 440px; z-index: 5; }
#header #ashTray { width: 85px; height: 92px; background: url(images/ashtray.gif); position: absolute; top: 87px; right: 350px; z-index: 5; }
#header #beer {
	width: 59px;
	height: 47px;
	background: url(images/beer.gif);
	position: absolute;
	top: 142px;
	right: 430px;
	z-index: 5;
}
#header #magazinesPorno {
	width: 215px;
	height: 226px;
	background: url(images/magazines_porno.gif);
	position: absolute;
	top: 108px;
	right: 657px;
	z-index: 5;
}
#header #notepadPorno {
	width: 171px;
	height: 142px;
	background: url(images/notepad_porno.gif);
	position: absolute;
	top: 208px;
	right: 500px;
	z-index: 5;
}


/* Hint */
#header .hint { height: 33px; line-height: 27px; background: url(/images/hint_bg.gif) repeat-x; position: absolute; color: #FFFFFF; text-align: center; z-index: 20; display: none; }
#header .hint .l { width: 5px; height: 33px; position: absolute; top: 0; left: -5px; background: url(/images/hint_left.gif); }
#header .hint .r {
	width: 5px;
	height: 33px;
	position: absolute;
	top: 0;
	right: -5px;
	background: url(images/hint_right.gif);
}
#header .hint .a { width: 13px; height: 8px; position: absolute; top: 25px; left: 15px; background: url(/images/hint_arrow.gif) no-repeat; }

#header .path { color: #5f5f5f; font-size: 10px; position: absolute; top: 485px; left: 50px; z-index: 4; }
#header .path a { color: #5f5f5f; }

/* Content */
.content { line-height: 19px; padding: 516px 50px 0 50px; position: relative; z-index: 1; }
.content .shortLeft {
	width: 49%;
	font-size: 16px;
}

.content .projectScreen { width: 71%; float: left; }
.content .projectDetails { width: 250px; margin: 250px 0 0 0; float: right; }

.content .slideLink { margin: 0 0 5px 0; }
.content .slideLink a { vertical-align: top; margin: 0 0 0 5px; text-decoration: none; font-size: 15px; color: #475470; background: url(/images/dotted.gif) repeat-x 0 bottom; }
.content .slideLink a:hover { background-image: none; }
.content .slideText { padding: 0 0 0 23px; margin: 0 0 5px 0; display: none; }

.content .weCanColumn {
	width: 26%;
	padding: 0 1% 0 3%;
	margin: 0 0 0 2%;
	float: left;
	background-image: url(images/vertical_divider.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
.content .weCanColumn.first { background: none; }

.content .weCanColumn .head { padding: 0 0 7px 0; margin: 0 0 7px 0; border-bottom: #d5d8da 2px solid; font-weight: bold; background: url(images/we_can_line.gif) no-repeat 0 46px; }
.content .weCanColumn .head .title { font-size: 16px; color: #5f5f5f; margin: 0 0 5px 0; padding: 7px 0 0 0; line-height: 18px; float: left; }
.content .weCanColumn .head .num { font-size: 43px; line-height: 45px; padding: 0 5px 0 0; color: #ebebeb; float: left; }

.content .portfolioBox { width: 21%; padding: 0 0 40px 0 !important; padding: 0 0 25px 0; float: left; z-index: 5; position: relative; text-align: center; } 
.content .portfolioBox .border { text-decoration: none; cursor: pointer; display: block; width: 184px; height: 167px; margin: 0 auto; position: relative; z-index: 3; }
.content .portfolioBox .border img { position: relative; z-index: 3; }
.content .portfolioBox .border .loading { position: absolute; top: 11px; left: 13px; z-index: 1; }
.content .portfolioBox .border .image {
	display: block;
	width: 184px;
	height: 163px;
	position: absolute;
	top: 0;
	left: 0;
	background-position: 13px 10px;
	background-repeat: no-repeat;
	z-index: 1;
	background-image: url(images/pjkooij.jpg);
}
.content .portfolioBox .title { display: block; width: 184px;  color: #4f4f4f;  }

.content .portfolioDivider { width: 5%; height: 163px; float: left; background: url(images/portfolio_divider.gif) no-repeat center bottom; }

/* .content .map { width: 439px; height: 357px; background: url(/images/map.png); margin: 0 auto; } */

/* Footer */
#footer {
	width: 100%;
	height: 300px;
	position: relative;
	z-index: 0;
	background-image: url(images/wall.jpg);
	background-repeat: repeat-x;
	background-position: 0 bottom;
}
#footer #copy { width: 485px; position: absolute; bottom: 100px; left: 31%; text-align: center; z-index: 1; }
#footer #copy a { color: #444748; text-decoration: none; }
#footer #copy a:hover { text-decoration: underline; }
#footer #bottomTable {
	width: 306px;
	height: 422px;
	position: absolute;
	bottom: 0;
	left: 0;
	color: #6f8fb7;
	background-image: url(images/bottom_table.jpg);
}
#footer #crap {
	width: 409px;
	height: 417px;
	position: absolute;
	bottom: 38px;
	right: 0;
	background-image: url(images/crap.png);
}
#footer #window {
	width: 519px;
	height: 105px;
	position: absolute;
	bottom: 0;
	left: 31%;
	background-image: url(images/window.png);
}