* { margin: 0; }
html, body { height: 100%; }

body {
	font: 12px Arial, Helvetica, sans-serif;
    color: #333;
    background: #111;
    line-height: 20px;
    overflow: hidden;    
	}

h1 { font-size: 17px; margin: 0 0 20px 0; padding: 0 0 3px 0; line-height: normal; border-bottom: 1px solid #aaa; clear: both; }
h2 { font-size: 17px; margin: 0 0 5px 0; line-height: normal; clear: both; }
h3 { font-size: 14px; margin: 0 0 10px 0; line-height: normal; }
a { text-decoration: none; color: #0095da; }
a:active, a:focus { outline: 0px; }
p { margin: 0 0 20px; overflow: hidden; }
img { border: 0; }
input, textarea { font: 12px Arial, Helvetica, sans-serif; color: #444; }
form { margin: 0 0 20px 0; overflow: hidden; }
label { float: left; width: 100px; float: left; clear: both; }

#wrapper {
	width: 100%;
    height: 100%;
    }

#container {
	width: 800px;
    height: 570px;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -276px 0 0 -400px;
	}

#footer {
	width: 800px;
    text-align: center;
    color: #555;
    position: relative;
    font-size: 11px;
    padding-top: 560px;
    line-height: 12px;
    }
    #footer a { color: #777; border: 0; }
    #footer a:hover { color: #999; }

#PageContainer { background: #ccc; }
.page {
	width: 800px;
	height: 550px;
	background: #ccc !important;
	position: absolute;
    color: #de0000;  
    z-index: 2;
    text-align: center;
    cursor: pointer;
	}

#first, #second, #third, #fourth {
	visibility: hidden;
    width: 750px;
    height: 60px;
    padding: 20px;
    margin: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: auto;
    color: #fff;
    text-align: left;
    }
    #first { background: url(../img/bg/orange.png); }
    #second { background: url(../img/bg/green.png); }
    #third { background: url(../img/bg/blue.png); }
    #fourth { background: url(../img/bg/pink.png); }

#nav {
    list-style: none;
    padding: 0;
	}
    #nav li { display: inline; }
    #nav li a { display: block; position: absolute; }
    #nav .easteregg a { left: 30px; top: 88px; }
	#nav .overhetwerk a { left: 215px; top: 20px; }
    #nav .collectie a { left: 415px; top: 20px; }
    #nav .recentwerk a { left: 175px; top: 120px; }
    #nav .werkplaats a { left: 305px; top: 273px; }
    #nav .verkoopschilderijen a { left: 434px; top: 205px; }
    #nav .verhuurschilderijen a { left: 545px; top: 205px; }
    #nav .curriculumvitae a { left: 425px; top: 290px; }
    #nav .cursustekenen a { left: 20px; top: 355px; }
    #nav .links a { left: 500px; top: 398px; }
    #nav .contact a { left: 606px; top: 342px; }
    #nav .tekeningen a { left: 589px; top: 462px; }

#easteregg, #overhetwerk, #collectie, #recentwerk, #werkplaats, #verkoopschilderijen, #verhuurschilderijen, #curriculumvitae, #cursustekenen, #links, #contact, #tekeningen {
	overflow-y: scroll;
    width: 680px;
    height: 460px; /* Dit was eertst 432px */
    padding: 0 30px;
    text-align: justify;
    outline: 0;
    position: fixed;
    background: #ccc;
    }
	#easteregg a:hover, #overhetwerk a:hover, #collectie a:hover, #recentwerk a:hover, #werkplaats a:hover, #verkoopschilderijen a:hover, #verhuurschilderijen a:hover, #curriculumvitae a:hover, #cursustekenen a:hover, #links a:hover, #contact a:hover, #tekeningen a:hover { border-bottom: 1px dotted #444; }

#dhtmltooltip {
    position: absolute;
    border: 1px solid #000;
    padding: 3px 7px;
    background: #0095da;
    visibility: hidden;
    z-index: 1000;
    font-weight: bold;
    color: #fff;
    }

#js {
	width: 100%;
    height: 24px;
    padding: 6px 0 0 0;
    color: #fff;
    background: #960000;
    border-bottom: 2px solid #b00000;
    text-align: center;
    }
    #js img { display: inline; margin: 0 5px 0 0; vertical-align: middle; }
    #js p { display: inline; }

.galerij { padding: 0; list-style: none; margin: 0 0 20px 0; width: 640px; overflow: hidden; }
.galerij li { display: inline; }
.galerij li a { float: left; padding: 5px; background: #fff; border: 1px solid #444; margin: 0 20px 20px 0; }
.galerij li a:hover { border-bottom: 6px solid #444 !important; padding: 5px 5px 0 5px; }

.imgr { float: right; margin: 0 0 0 20px; border: 1px solid #444; padding: 5px; background: #fff; }
a:hover .imgr { border-bottom: 6px solid #444; padding: 5px 5px 0 5px; }

.show { visibility: visible !important; }
.hide { visibility: hidden; }
.nocursor { cursor: auto; }
.label { width: 40px; display: block; float: left; color: #666; }
.nofont { font-size: 0; }

.wolk { width: 370px; height: 291px; background:url(../img/bg/werkplaats-wolk.jpg); padding: 40px 40px 300px 40px; font-size: 18px; font-style: italic; line-height: 24px; }

.flexcroll ul { margin: 0 0 20px 0; padding: 0 0 0 20px; }
.flexcroll ul li { list-style: inside disc; }
.flexcroll .info { width: 90px; font-weight: bold; float: left; }
.flexcroll .infolinks { width: 400px; font-weight: bold; float: left; }

.scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; }
.vscrollerbase { width: 10px; background: #fff; }
.vscrollerbar { width: 10px; background: #444; }
.hscrollerbase { height: 10px; background: #fff; }
.hscrollerbar { height: 10px; background: #aaa; }
.scrollerjogbox { width: 10px; height: 10px; top: auto; left: auto; bottom: 0px; right: 0px; background: gray; }

.input { border: 1px solid #ccc; float: left; padding: 5px; width: 160px; margin: 0 0 5px 0; }
.input:focus { border: 1px solid #444; }
.textarea { border: 1px solid #ccc; float: left; padding: 5px; width: 320px; height: 160px; margin: 0 0 5px 0; }
.textarea:focus { border: 1px solid #444; }
.submit { margin: 0 0 0 100px; padding: 5px; float: left; clear: both; }