@font-face {
    font-family: "baroque_scriptregular";
    src: url("./fonts/baroquescript-webfont.eot");
    src: url("./fonts/baroquescript-webfont.eot?#iefix") format("embedded-opentype"),
         url("./fonts/baroquescript-webfont.woff2") format("woff2"),
         url("./fonts/baroquescript-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

BODY { font-family: Palatino Linotype; color: #EDEDA0; background-color: #000000; line-height: normal; height: auto;}

h1 {  color: #FFFFE8; font-size: 22px; padding: 10px 70px 0px 70px; margin-left: 0px; margin-right: 0px; margin-top: 0px; letter-spacing: 4px; font-family: 'baroque_scriptregular', Palatino Linotype, serif; font-weight: normal; font-style: normal; text-align: center; text-shadow: 2px 2px 1px #b07060; border-style: solid none none none; border-width: 1px; border-color: #A0A080;}

h2 { clear: both; font-size:1.3em; font-style: italic; font-weight:bold; text-align:left; color: #F5F5C8; padding: 2px; margin-bottom: 0px; margin-right: 0px;
border-style: solid none;
border-radius: 0px;
border-width: 1px;
border-color: #505030;
background: linear-gradient(#000000, #302810 ,#201810);}

h3 { font-size: 14px; }

p { font-family: Lucida Sans Unicode; font-size: 13px; letter-spacing: 1px; }

p.titel { 
color: #FFFFE8;
font-size: 20px; 
margin-left: 0px; 
padding: 2px 40px 8px 40px;
margin-top: 0px;
margin-right: 0px; 
letter-spacing: 2px; 
font-family: Palatino;
text-align: center;
text-shadow: 2px 2px 1px #000000;
border: 1px;
border-style: solid none none none;
border-radius: 0px;
border-color: #707040 #000000 #000000 #303010;
background-color: #000000;
background: linear-gradient(180deg, #102010, #000000);
}

p.subtitel { margin-left: 50px; padding: 2px 2px 2px 0px; font-style: italic; font-family: Georgia; font-size: 16px; text-align: center; letter-spacing: 1px;}

.divtop {
position: relative;
width: 900px; 
min-height: 220px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
background: url("top_piano.jpg"); 
background-position: left top;
background-repeat: no-repeat;
background-color: #000000;
}

#homelink {
width: 100%;
height: 0px;
}

#elements {
position: relative;
float: left;
height: 220px;
margin-left: 400px;
margin-top: 0px;
width: 100px;
background-color: #000000;
background: linear-gradient(90deg, #26381A, #103008);
border: 1px;
border-style: solid solid none solid;
border-color: #707040 #505030 #505030 #909070;
border-radius: 5px 5px 0px 0px;
}

#nav { 
text-align: center;
clear: both;
float: left;
margin-top: 10px;
margin-bottom: 0px;
list-style: none;
font-family: Verdana, sans-serif;
color: #FFFFFF; 
font-size: 13px; 
font-weight: bold;
padding: 0px;
}

#nav li {
clear: both;
float: left;
width: 100%;
margin-left: 0px;
margin-right: 7px;
padding: 0px 5px 10px 5px;
}

.footer {
padding-top: 5px;
color: #B0B0B0;
font-family: Arial;
clear: both;
text-align: center;
font-size: 12px;
letter-spacing: 1px;
border-style: solid none none none;
border-color: #000000;
border-width: 1px;
}

#videocontainer{
 float: left;
 width: 512px;
 background-color: #101010;
 padding: 5px;
border-style: solid;
border-radius: 5px;
border-width: 1px;
border-color: #808050 #303010 #303010 #808050;
}

#videocontainer p{
 clear: both;
 }
 
#videocontainer ol {
 }

#videocontainer ol li {
 font-family: Arial;
 background: linear-gradient(180deg, #000000, #1A1A05);
 padding-left: 0px;
 padding: 2px;
 border: 2px;
 border-color: #000000;
 border-radius: 4px;
 }
 
.videoactive a:link {
 font-weight: bold;
 color: #EDEDA0;
 }
 
.videonotactive a:link {
 font-weight: normal;
 color: #FFFFFF;
 }


iframe {
float: left;
height: 288px;
width: 100%;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
border-style: none;
border-radius: 5px;
border-width: 1px;
border-color: #808050 #303010 #303010 #808050;
background: linear-gradient(#505030, #202008);
}

#playertext {
font-family: Arial;
color: #BDBDA0;
font-size: 75%;
float: left;
}

.options {
float: right;
text-align: left;
width: 350px;
margin-top: 0px;
margin-left: 10px;
}

.opsommingrechts {
font-family: Palatino;

float: right;
display: inline-block;
list-style-type: circle;
}

.opsomming {
font-family: Palatino;

float: left;
display: inline-block;
list-style-type: circle;
}

.opsomming li { letter-spacing: 2px; margin-bottom: 10px;}
.opsommingrechts li {letter-spacing: 2px; margin-bottom: 10px;}

.tegel {
text-align: center;
width: 98%;
float: left;
padding: 6px;
height: auto;
margin-top: 7px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 7px;
letter-spacing: 1px;
}

.divmain {
position: relative;
width: 900px; 
overflow: hidden;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-top: 0px;
background: url("down_piano.jpg"); 
background-repeat: no-repeat; 
background-position: center bottom;
background-attachment: scroll;
background-color: #000000;
background-size: 900px;
}

ul.rep { font-family: Arial; font-size: 12px; white-space: normal;}

table {
 margin-left: 20px;
 margin-top: 20px;
}

table td {
 padding: 10px;
 vertical-align: top;
}

.tabellinkerkolom {
 width: 300px;
}

.tabelprijskolom {
 width: 100px;
 text-align: right;
 font-weight: bold;
}

.smaller {
 font-size: 75%;
 color: #ADADA0;
}

li.actief {
margin-right: 12px;
height: 100%;
background-color: #808050;
background: linear-gradient(0deg, #70704A, #A0A070);
border-radius: 2px 2px 0px 0px;
}

form {
margin-left: 6px;
}

textarea, input {
background-color: #202000;
color: #FFFFFF;
border: solid 1px #505050;
margin-bottom: 10px;
}

.sendbutton {
margin-top: 10px;
font-size: 16px;
background-color: #202000;
color: #EDEDA0;
background: linear-gradient(#506030, #303010);
border-radius: 2px;
}

#repkolom1 {
clear: left;
float: left;
width: 50%;
}

#repkolom2 {
float: right;
width: 50%;
}

a:link, a:visited, a:active { color: #FFFFFF; text-decoration: none; text-shadow: 2px 2px 1px #303030; }
a:hover { color: #DFFFDF; text-decoration: none; text-shadow: 2px 2px 1px #303030; }

hr {
clear: both;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
color: #303030;
}

.buttonrow {
margin-left: auto;
margin-right: auto;
text-align: center;
clear: both;
}

@media only screen and (max-width: 880px), only screen and (max-device-width: 880px) {

html {
-webkit-text-size-adjust: 100%;
}

body {
font-size: 16px;
background-color: #000000;
width: 100%;
margin-left: 0px;
margin-right: 0px;
}

.divtop {
width: 100%;
min-height: 20px;
height: 161px;
margin-left: 0px;
background: url("top_piano_mob.jpg"); 
background-size: 500px 161px;
background-position: center 0%;
background-repeat: no-repeat;
margin-bottom: 0px;
}

.footer {
font-size: 14px;
letter-spacing: 1px;
}

.options {
margin-left: 1px;
width: 98%;
}

p {
font-size: 16px;
margin-left: 10px;
}

.divmain {
float: left;
position: relative;
width: 100%; 
padding: 0px;
}

h1 { font-size: 20px; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px; border: none;}
h2 { font-size: 28px; padding-left: 10px;}

p.titel { margin-left: 1px; font-size: 18px; padding: 0px 10px 20px 10px;}
p.subtitel { font-size: 16px; margin-left: 10px; text-align: left;}

.opsomming { margin-left: 5px; padding-left: 15px; }

.opsomming li { margin-bottom: 20px;}

.opsomming a { 
font-size: 18px; 
margin-left: 0px;
}

.opsommingrechts {
float: left;
}

ul.rep { font-size: 16px; line-height: normal;}

#homelink {
height: 157px;
}

#videocontainer {
 width: 99%;
 padding: 0px;
 }

#videocontainer ol li {
 padding: 10px;
 }
 
iframe {
width: 100%;
margin-left: 0px;
}

#elements {
margin-left: 0px;
width: 100%;
height: auto;
margin-top: 0px;
background-color: #000000;
background: linear-gradient(180deg, #283810, #102008);
border-style: solid none solid none;
border-color: #A0A080 #505030 #505030 #A0A080;
border-radius: 0px;
}

#nav { 
margin-top: 0px;
float: right;
display: inline;
clear: none;
height: auto;
padding: 10px 0px 10px 5px;
}

#nav li {
display: inline;
float: none;
margin-left: 3px;
margin-right: 14px;
font-size: 16px;
}

#nav li a {
padding: 10px 0px 10px 0px;
}

img.foto { width: 132px; height: 108px;}

#nav a { border: none; line-height: normal;
padding: 0px; background-color: transparent;}

#repkolom1 {
width: 100%;
float: none;
}

#repkolom2 {
clear: both;
width: 100%;
float: none;
}

.tegel {
width: 94%;
}

form { font-size: 18px; width: 95%; margin-left: 6px; margin-right: 6px;}
textarea, input[type=text] {font-size: 16px; width: 96%; padding: 5px; margin-left: 6px; margin-right: 6px;}
.sendbutton { font-size: 20px; width: 100%; }

}

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {

#homelink {
height: 150px;
}



.divtop {
 background-size: 100%;
}
}

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
#homelink {
height: 145px;
}
}

@media only screen and (max-width: 415px), only screen and (max-device-width: 415px) {
#homelink {
height: 120px;
}
#over {
display: none;
}
}

@media only screen and (max-width: 391px), only screen and (max-device-width: 391px) {
#homelink {
height: 115px;
}
}

@media only screen and (max-width: 361px), only screen and (max-device-width: 361px) {
#homelink {
height: 105px;
}
}