* { behavior: url(iepngfix.htc) }

img { behavior: url(iepngfix.htc) }

body {
	font: 100% Georgia;
	background: #464c33 url(images/bodybg.gif);
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	color: #fff;
	/* overflow-x:hidden; */
}

a, a:active{
 outline: none;
}

#container {
	width: 100%;  /* this will create a container 80% of the browser width */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#container #shade{
position:absolute;
top:0;
left:0;
height:400px;
width:70px;
/* background:url(images/shade.png); */}

#header {
position: relative;
z-index:2;
background: url(../images/headerbg.gif); 
padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	color:#EBEBEB;
	font-size:24px;
}

#header h1 a{
	font-weight:normal;
	color:#fff;
	text-decoration: none;
}

#header h1 a:hover{
	color:#fee197;
}

#header #contact{
}

#header #contact a {
	position: absolute;
	right:0;
	top:0;
	display:block;
	width:163px;
	height:47px;
	background: url(../images/contactlink.png);
	background-position: 0 0;
}

#header #contact a:hover {
	background-position: 0 -47px;
}

#header #tekstwolkinit{
position: absolute;
width:79px;
height:38px;
right:163px;
top:5px;
}

#header #tekstwolkinit a{
display:block;
width:79px;
height:38px;
background: url(../images/tekstwolk.png) no-repeat 0px -38px;
}

#header #tekstwolkinit a:hover{
background: url(../images/tekstwolk.png) no-repeat 0px 0px;
}

#mainContentwrap {
position: relative;
z-index:0;
width:100%;
margin:0;
background: url(../images/bg.gif);
}

#mainContent {
position: relative;
z-index:0;
	padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	overflow:hidden;
	width:100%;
	height:370px;
}



#footer { 
position:relative;
z-index:1;
height:163px;
padding: 0 10px;
background:url(../images/footerbg3.gif);
z-index:0;
}

#willem {
}

#willem a {
position:absolute;
width:190px;
height:163px;
background:url(../images/willemlink.png);
background-position: 0 0;
bottom:0;
right:0;
z-index:0;
}

#willem a:hover {
background-position: 0 -163px;
}

#ansicht {
}

#ansicht a {
position:absolute;
width:202px;
height:139px;
background:url(../images/ansichtlink2.png);
background-position: 0 0;
top:10px;
left:0;
z-index:1;
}

#ansicht a:hover {
background-position: 0 -139px;
}

#knoppen #links, #knoppen #rechts{
width:80px;
height: 370px;
position:absolute;
z-index: 0;
}

#knoppen #links {
left:0;
background: url(../images/linkspijlen2.png) no-repeat -10px 0;}

#knoppen #rechts {
right:0;
background: url(../images/rechtspijlen3.png);}

#tekstballon {
height:135px;
position:absolute;
bottom:15px;
right:240px;
max-width: 50%;
z-index:0;
}

#tekstballon #box #left{
position:absolute;
top:0;
left:-39px;
background: url(../images/praatbox_01.png);
width:39px;
height: 140px;
}

#tekstballon #box{
background: #5F6D4B url(../images/praatbox_02.png);
position: relative;
height: 140px;
min-width:550px;
}

#tekstballon #box a {
position: absolute;
left:-35px;
top:12px;
width:139px;
height:120px;
background: url(../images/leesvoorlink2.png) no-repeat;
background-position: 0 0;
list-style-type: none;
cursor:pointer;
}

#tekstballon #box a:hover {
background-position: 0 -120px;
}

#tekstballon #box #right{
position:absolute;
top:0;
right:-59px;
background: url(../images/praatbox_04.png);
width:59px;
height: 140px;
}

#tekstballon p{
font-size:14px;
padding:0px 10px 7px 110px;
margin:0;
line-height: 110%;
}

#tekstballon h1{
font-size:18px;
margin:0;
padding:10px 0px 15px 110px;
line-height: 120%;
font-weight: normal;
}

#tekstballon h2{
font-size:14px;
padding:4px 0px 2px 110px;
margin:0;
line-height: 120%;
font-weight: bold;
}



/* Brede DIV ------------------------------------------------------------------------------------------------------------------ */

.bredediv {
	font-family: "Times New Roman", Times, serif;
	font-size: 10px;
	height: 370px;
	width: 5050px;
font-weight: normal;

}
.bredediv ul {
	list-style-type: none;
	margin:0;
	padding:0;
}

.bredediv li {
float: left;
display: block;
border: none;
margin: 10px 35px 0px 35px;
/* height:320px; */
position:relative;
}

.bredediv a {
}

.bredediv img{
cursor:pointer;}

.bredediv #sch01 img:hover {
background:url(../schilderijen/01_02.png);
}

.bredediv a {
display:block;
background:url(../images/magnifier3.png);
background-position: 0 0;
width:20px;
height:20px;
position:absolute;
top:40px;
right:40px;
}

.bredediv a:hover {
background-position: 0 -20px;
}

.bredediv #sch02 img:hover {
background:url(../schilderijen/02_02.png);
}

.bredediv #sch03 img:hover {
background:url(../schilderijen/03_02.png);
}

.bredediv #sch04 img:hover {
background:url(../schilderijen/04_02.png);
}

.bredediv #sch05 img:hover {
background:url(../schilderijen/05_02.png);
}

.bredediv #sch06 img:hover {
background:url(../schilderijen/06_02.png);
}

.bredediv #sch07 img:hover {
background:url(../schilderijen/07_02.png);
}

.bredediv #sch08 img:hover {
background:url(../schilderijen/08_02.png);
}

.bredediv #sch09 img:hover {
background:url(../schilderijen/09_02.png);
}

.bredediv #sch10 img:hover {
background:url(../schilderijen/10_02.png);
}

.bredediv #sch11 img:hover {
background:url(../schilderijen/11_02.png);
}

.bredediv #sch12 img:hover {
background:url(../schilderijen/12_02.png);
}

.bredediv #sch13 img:hover {
background:url(../schilderijen/13_02.png);
}

.bredediv img {
border:none;}

#formwrap{
border:3px solid #333922;
border-right:none;
border-top:none;}

img.preload { display: none; }

.moreInfoWrapper
{
	position:absolute;
	right:0;
	top:0;
	padding:0px;
	width:260px;
	z-index:100;
}

.moreInfo
{
	float:right;
	background:#fff;
	width:260px;
	clear:both;
	opacity:.9;
}


.divToggle {
cursor:pointer;
margin-bottom:4px;
float:right;
	display:block;
	width:163px;
	height:47px;
	background: url(../images/contactlink.png);
	background-position: 0 0;
}

.divToggle:hover {
	background-position: 0 -47px;
}

#log_res {
	overflow: auto;
	color:red;
	font-size:14px;
}
 
#log_res.ajax-loading {
	padding: 10px 0;
	background: url(http://demos.mootools.net/demos/Group/spinner.gif) no-repeat center;
}