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

body{
background: #000;
font-family: verdana, arial, sans-serif;
font-size: 62.5%; /* = 10px */
}

#dl{
font-size: 1.2em;
margin: 0 0 0 0;
padding: 10px 50px 0 10px;
}


dl{
margin: 0 0 0 10px;
color: #ffc;
}

/*navigatie*/

#nav, #nav ul {
float:left;
padding:0 0 5px 10px;
margin:0;
list-style:none;
font-size: 100%;
font-family: verdana, arial, sans-serif;
border:1px solid #808080;
border-color:#888 #888 #888 #888;
border-width:1px 1px 1px 1px;
background:#000; position:relative; z-index:200;
}

#nav li li{
background: #000;
}

/* a hack for IE5.x and IE6 */
* html #nav li{
float:left;
}

#nav li a{
display:block;
color:#fc0;
margin:0 25px 0 10px;
height:20px;
line-height:20px;
text-decoration:none;
white-space:nowrap;
}

#nav li:hover{
position:relative;
z-index:300;
}

#nav ul{
position:absolute;
left:-9999px;
top:-9999px;
font-size: 75%
}

/* yet another hack for IE5.x and IE6 */

/* it could have been this simple if all browsers understood */

/* show next level */
#nav li:hover > ul{
left:-15px;
margin-left:100%;
top:-1px;
}

/* keep further levels hidden */
#nav li:hover > ul ul{
position:absolute;
left:-9999px;
top:-9999px;
width:auto;
}

/* show path followed */
#nav li:hover > a{
text-decoration:none;
color:#fff;
}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover ul,
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul{
left:-15px;
margin-left:100%;
top:-1px;
}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{
position:absolute;
left:-9999px;
top:-9999px;
}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a{
text-decoration:none;
color:#fff;
}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a{
text-decoration:none;
color:#fc0;
}

/*lettertypen*/

map{
font-family: verdana, arial, sans-serif;
font-size: 1.6em;
color: #FFFFCC;
font-weight: bold;
}

h1{
font-family: verdana, arial, sans-serif;
font-size: 1.6em;
color: #ffa;
font-weight: bold;
}

h2{
font-family: verdana, arial, sans-serif;
color: #ffa;
font-size: 1.3em;
font-weight: bold;
}

p{
font-family: verdana, arial, sans-serif;
color: #FFFFCC;
font-size: 1.3em;
}

p.groot{
font-family: verdana, arial, sans-serif;
color: #FFFFCC;
font-size: 1.4em;
font-weight: bold;
}

p.klein{
font-family: verdana, arial, sans-serif;
color: #FFFFCC;
font-size: 1.0em;
}

p.bijgewerkt{
font-family: verdana, arial, sans-serif;
color: #808080;
font-size: 1.2em;
text-align: left;
}

p.sitelokatie{
font-family: verdana, arial, sans-serif;
color: #808080;
font-size: 1.2em;
text-align: left;
}

p.footer{
font-family: verdana, arial, sans-serif;
color: #808080;
font-size: 1.2em;
}

p.image{
float: right;
margin: 15px 0 0 15px;
font-size: 1.0em;
color: #ffc;
text-align: center;
}

img{
border: 2px solid #ffc;
}

p.uitlijnen{
text-align: justify;
}

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

li{
font-family: verdana, arial, sans-serif;
color: #FFFFCC;
font-size: 1.2em;
}

li a{
font-family: verdana, arial, sans-serif;
color: #FFFFCC;
font-size: 1.1em;
}

a:link, a:visited{
color: #FC0;
background-color: transparent;
text-decoration: none;
}

a:active, a:hover{
color: #FFF;
background-color: transparent;
text-decoration: none;
}

fieldset{
background: transparent;
width: 430px;
padding: 5px 0 10px 10px;
border: 0;
font-family: verdana, arial, sans-serif;
}

legend{
color: #FFC;
padding: 0 6px 4px 0;
margin: 0 0 5px 0;
font-size: 1.3em;
}

label{
width: 120px;
float: left;
color: #FFC;
font-size: 1.2em;
padding: 4px 0 0 0;
}

input{
width: 300px;
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #808080;
background-color: transparent;
color: #FFC;
font-size: 1.3em;
cursor: default;
}

input.zoek{
width: 145px;
margin: 0 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #808080;
background-color: transparent;
color: #FFC;
font-size: 1.0em;
cursor: default;
}


select{
margin: 2px 0 15px 0;
padding: 1px 0 2px 3px;
border: 1px solid #808080;
background-color: #000;
color: #FFC;
z-index: -1;
}

#opmerkingen{
width: 300px;
height: 80px;
margin: 2px 0 9px 0;
padding: 1px 0 2px 3px;
border: 1px solid #808080;
font-family: verdana, arial, sans-serif;
color: #FFC;
background-color: transparent;
font-size: 1.3em;
cursor: default;
}

.button{
background-color: transparent;
color: #FFC;
font-weight: bold;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
float: left;
}

.buttonzoek{
background-color: transparent;
color: #fc0;
font-size: 1.0em;
width: auto;
margin: 0 5px 0 0;
padding: 1px 5px 2px 5px;
cursor: pointer;
float: left;
}

/* begin hack \*/
* html .button{
padding: 0;
}

* html .buttonzoek{
padding: 0;
}

* html legend{
margin-left: -5px;
}
/* einde hack */

/*ie6 hack*/
a:hover{
background-color: #000000;
}
/* einde ie6 hack*/

a:link img, a:visited img, a:focus img{
border: 2px #FFCC00 solid;
}

a:hover img{
border: 2px #FFFFFF solid;
}

a:active img{
border: 2px #FFCC00 solid;
}


#main_container{
float: left;
width: 100%;
min-height: 100%;
_height: 100%;
margin: -80px 0 0 0;
background: url(images/.jpg) no-repeat;
}

/* container boxen */
#header_container{
width: 100%;
height: 150px;
padding: 80px 0 0 0;
}

#links_container{
float: left;
min-height: 100%;
width: 150px;
padding: 0 0 0 10px;
}

/* ie6 hack */
* html #links_container{
margin-right: 1px;
}

* html #content{
height: 1%;
margin: 12px 0 0 0;
}
/* einde hack */

#content_container{
margin: 0 259px 0 164px;
}

#rechts_container{
float: right;
width: 259px;
}

#footer_container{
clear: both;
height: 46px;
width: 100%;
text-align: center;
}

/* content boxen */

#header{
width: 100%;
height: 81px;
padding: 10px 0;
background: url(images/nieuwstelogokoot.jpg) no-repeat 140px 10px;
}

#content{
padding: 10px 50px 0 20px;
}

body{
margin: 0;
background: #000 url(images/achtergrondfoto.jpg) fixed no-repeat 200px 0;
}

#rechts{
padding: 25px 10px 0 65px;
}

#links{
padding: 10px 5px 10px 5px;
margin: 15px 0 0 0;
}

#sitelokatie{
position: absolute;
top: 100px;
left: 184px;
width: 500px;
height: 20px;
}

#sitelokatie a:link, #sitelokatie a:visited{
color: #808080;
}

#sitelokatie a:hover, #sitelokatie a:active{
color: #FFF;
}

#occpiano{
width: 380px;
height: 145px;
border: 1px solid #808080;
color: #FFFFCC;
font-size: 1.0em;
margin: 10px 0 20px 10px;
padding: 10px 10px 4px 10px;
margin-bottom: 10px;
}

#verkocht{
width: 380px;
height: 145px;
border: 1px solid #808080;
color: #FFFFCC;
font-size: 1.0em;
margin: 10px 0 20px 10px;
padding: 10px 10px 4px 10px;
margin-bottom: 10px;
background: url(images/verkochtdia.jpg) no-repeat 10px 20px;
}

#map{
color: #000;
font-size: 1.3em;
}

/*fotootjes*/

#fotos1{
width: 85px;
height: 110px;
background: url(images/gevel.jpg);
}

#fotos2{
width: 85px;
height: 110px;
background: url(images/gk.jpg);
}

#fotos3{
width: 85px;
height: 110px;
background: url(images/stoeltjes.jpg);
}

#fotos4{
width: 85px;
height: 110px;
background: url(images/pianoman.jpg);
}

#fotos5{
width: 85px;
height: 110px;
background: url(images/pianotoonzaal1.jpg);
}

#fotos6{
width: 85px;
height: 110px;
background: url(images/pianotoonzaal2.jpg);
}

#fotos7{
width: 85px;
height: 110px;
background: url(images/pianotoonzaal3.jpg);
}

#fotos8{
width: 85px;
height: 110px;
background: url(images/vleugeltoonzaal.jpg);
}

#fotos9{
width: 85px;
height: 110px;
background: url(images/vleugeltoonzaal2.jpg);
}

#fotos10{
width: 85px;
height: 110px;
background: url(images/vleugeltoonzaal3.jpg);
}

#fotos11{
width: 85px;
height: 110px;
background: url(images/wnk.jpg);
}

#fotos12{
width: 85px;
height: 110px;
background: url(images/pianotuningforbeginners.jpg);
}

#fotos13{
width: 85px;
height: 110px;
background: url(images/tuningkit.jpg);
}

#fotos14{
width: 85px;
height: 110px;
background: url(images/rentalpipes.jpg);
}

#fotos15{
width: 85px;
height: 110px;
background: url(images/granddetail.jpg);
}

#fotos16{
width: 85px;
height: 110px;
background: url(images/Bowedpiano.jpg);
}

#fotos17{
width: 85px;
height: 110px;
background: url(images/nude.jpg);
}

#fotos18{
width: 85px;
height: 110px;
background: url(images/strand.jpg);
}

#fotos19{
width: 85px;
height: 110px;
background: url(images/bodypiano.jpg);
}

#fotos20{
width: 85px;
height: 110px;
background: url(images/cart.jpg);
}

#fotos21{
width: 85px;
height: 110px;
background: url(images/pianoman.jpg);
}

#fotos22{
width: 85px;
height: 110px;
background: url(images/groovy.jpg);
}

#fotos23{
width: 85px;
height: 110px;
background: url(images/lady_at_piano.jpg);
}

#fotos24{
width: 85px;
height: 110px;
background: url(images/lady_piano_player.jpg);
}

#fotos25{
width: 85px;
height: 110px;
background: url(images/abstract.jpg);
}


#footer{
padding: 20px 163px 20px 0;
}

/* background image boxen */

#top_left{
position: absolute;
width: 163px;
height: 89px;
top: 22px;
left: 5px;
background: url(images/1913dia.jpg) no-repeat 0 0;
}

#top_right{
position: absolute;
width: 264px;
height: 89px;
top: 100px;
right: 0;
text-align: right;
background: url(3_kolommen_layout/top_right.gif) no-repeat 0 0;
}