/* Coded style sheet used in site Henk Verbeek */
/* Last revision: 20130406 */


/* ELEMENTS  */

body {
background-color: #ddf;
/* background-image: url(images/page-bg.gif); */
width: 1000px;
margin: 0;
color: #000000;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 1em;
}

h1 {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 1.2em;
font-style: italic;
font-weight: bold;
text-align: right;
letter-spacing: 5px;
}

h2 {
font-family: verdana, helvetica, arial, sans-serif;
margin-top: 1.1em;
font-size: 1.1em;
text-decoration: underline;
}

h3 {
font-family: verdana, helvetica, arial, sans-serif;
margin-top: 0.5em;
font-size: 1.0em;
font-weight: bold;
text-decoration: none;
}

h4 {
font-family: verdana, helvetica, arial, sans-serif;
margin-top: 0.4em;
font-size: 0.8em;
font-weight: bold;
text-decoration: none;
}

h5 {
font-family: verdana, helvetica, arial, sans-serif;
margin-top: 0.4em;
font-size: 0.8em;
font-weight: normal;
text-decoration: none;
}

p {
font-size: 0.8em;
line-height: 1.7em;
text-align: justify;
}

p.order {
font-size: 0.8em;
line-height: 1.7em;
text-align: center;
}

p.footer {
font-size: 0.7em;
font-weight: bold;
text-align: center;
}

ol, ul {
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 0.8em; 
}

ul.disc {
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 0.8em;
line-height: 1.7em;
list-style-type: circle;
}

table.repertoire
{
background-color: #ffd; 
table-layout: fixed;
width: 800px;
border: solid gray 0px;
padding: 10px;
}

.repertoire th
{
background-color: #ffb;
padding:5px 10px;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 1.0em;
font-weight: bold;
}

.repertoire td
{
background-color: #ffd;
width: 50%;
border: solid gray 0px;
padding: 2px 10px 2px 10px;
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 0.8em;
}

table.agenda
{
background-color: #ffd; 
/* table-layout: fixed; */
width: 800px;
border: solid gray 0px;
padding: 10px;
}

.agenda th
{
background-color: #ffb;
padding:5px 10px;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 1.0em;
font-weight: bold;
text-align: left; 
}

.agenda td
{
background-color: #ffd;
border: solid gray 0px;
padding: 2px 10px 2px 10px;
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 0.8em;
}

table.prijslijst
{
background-color: #ffd; 
/* invalid
table-layout: automatic;
*/
border: solid gray 1px;
padding: 10px;
}

.prijslijst th
{
background-color: #ffb;
padding: 5px 10px;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 1.0em;
font-weight: bold;
}

.prijslijst td
{
background-color: #ffd;
border: solid gray 0px;
padding: 2px 10px 2px 10px;
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 0.8em;
}



/*  PSEUDO CLASSES  */

a:link {
color: #666666;
background-color: #a5dafb;
text-decoration: none;
}

a:visited {
color: #666666;
background-color: #a5dafb;
text-decoration: none;
}

a:hover {
color: #222222;
background-color: #87cefa;
text-decoration: none;
}

a:active {
color: #222222;
background-color: #7ab9e1;
text-decoration: none;
}



/* ID's  */

#content {
position: relative;
width: 990px;
}

#header {
background-color: #87cefa;
margin: 0;
border: solid #000000 1px;
padding: 0 50px;
}

#header p {
font-size: 1.5em;
text-align: center;
}

#main-inbetween-very-small {
background-color: #ffc;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: none #000000 1px;
margin-left: 130px;
height: 50px;
width: 858px;
padding: 0px;
}


#main-inbetween-small {
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: none #000000 1px;
margin-left: 130px;
height: 100px;
width: 858px;
padding: 0px;
}

#main-inbetween-foto {
background-color: #ffd;
border-left: solid #000 1px;
border-right: solid #000 1px;
border-bottom: none #000 1px;
margin-left: 130px;
height: 300px;
width: 858px;
padding: 0px;
}

#inner-image {
height: 199px;
background-image: url(images/inner-image.jpg);
background-repeat: no-repeat;
background-position: 198px 0px;
}

#inner-inbetween-foto-noborder {
background-color: #ffd;
position: absolute;
border: solid #000000 0px;
margin: 2px 2px 2px 2px;
height: auto;
width: 854px;
padding: 10px 0px 10px 0px;
}

#inner-inbetween-small-noborder {
background-color: #ffb;
position: absolute;
border: none #000000 1px;
margin: 2px 2px 2px 2px;
height: 80px;
width: 772px;
padding: 0px 40px 0px 40px;
}

#inner-table {
background-color: #ffd;
padding: 20px 0px 0px 150px;
}

#inner-top {
background-color: #ffd;
position: absolute;
border: solid #000000 1px;
margin: 2px 2px 1px 2px;
height: 40px;
width: 832px;
padding: 10px;
}

#inner-top-noborder {
background-color: #ffd;
position: absolute;
border: none #000000 1px;
margin: 2px 2px 1px 2px;
height: 40px;
width: 832px;
padding: 10px;
}

#main-bottom {
background-color: #ffd;
border-top: none #000 1px;
border-right: solid #000 1px;
border-bottom: solid #000 1px;
border-left: solid #000 1px;
margin-left: 130px;
width: 858px;
height: 60px;
padding: 0px;
}

#main-text {
background-color: #ffd;
border-left: solid #000 1px;
border-right: solid #000 1px;
border-bottom: none #000 1px;
margin-left: 130px;
/* obsolete ??
width: 830px;
*/
padding: 20px;
}

#main-text-smallpad {
background-color: #ffd;
border-left: solid #000 1px;
border-right: solid #000 1px;
border-bottom: none #000 1px;
margin-left: 130px;
/* obsolete ??
width: 830px;
*/
padding: 10px;
}

#main-text-nopad {
background-color: #ffd;
height: 1210px;
border-right: solid #000000 1px;
border-bottom: solid #000000 1px;
border-left: solid #000 1px;
margin-left: 120px;
padding: 0px;
}

#main-top {
background-color: #ffd;
border-top: none #000 1px;
border-right: solid #000 1px;
border-bottom: none #000 1px;
border-left: solid #000 1px;
margin-left: 130px;
width: 858px;
height: 66px;
padding: 0px;
}

#navbar {
background-color: #ddf;
position: absolute;
width: 110px;
top: 178px;
left: 10px;
}

#navbar ul {
border-top: solid #000 1px;
margin: 0;
padding: 0;
}

#navbar ul li {
list-style-type: none;
font-size: 0.9em;
margin: 0;
padding: 0;
}

#navbar ul li a:link {
display: block;
text-decoration: none;
font-weight: bold;
border-bottom: solid #000 1px;
border-left: solid #000 1px;
border-right: solid #000 1px;
padding: 2px 10px;
}

#navbar ul li a:visited {
display: block;
text-decoration: none;
font-weight: bold;
border-bottom: solid #000 1px;
border-left: solid #000 1px;
border-right: solid #000 1px;
padding: 2px 10px;
}

#navbar ul li a:hover {

}

#navig {
background-color: #ddf;
position: relative;
width: 130px;
top: 0px;
left: 0px;
}

#navtop {
background-color: #ddf;
position: absolute;
width: 100px;
top: 10px;
left: 10px;
/*
text-align: center;
font-family: verdana; 
font-size: 10pt; 
font-weight: bold; 
color: #00c;
*/
}

#outer-image {
height: 199px;
background-image: url(images/outer-image.jpg);
background-position: center top;
}

/*
#text-footer {
background-color: #ffd;
position: absolute;
border: 0px #ffd solid;
margin-left: 2px;
margin-top: 1100px;
height: 15px;
width: 800px;
padding: 10px;
}
*/

#text-left-1 {
background-color: #ffb;
position: absolute;
border: solid #000 1px;
margin-top: 20px;
margin-left: 2px;
height: 200px;
width: 400px;
padding: 10px;
}

#text-right-1 {
background-color: #ffb;
position: absolute;
border: solid #000 1px;
margin-left: 427px;
margin-top: 20px;
height: 200px;
width: 375px;
padding: 10px;
}

#text-left-2 {
background-color: #ffb;
position: absolute;
border: 1px #000 solid;
margin-left: 2px;
margin-top: 245px;
height: 400px;
width: 400px;
padding: 10px;
}

#text-right-2 {
background-color: #ffffbb;
position: absolute;
border: solid #000 1px;
margin-left: 427px;
margin-top: 245px;
height: 370px;
width: 345px;
padding: 25px;
}


#text-left-3 {
background-color: #ffb;
position: absolute;
border: solid #000 1px;
margin-left: 2px;
margin-top: 670px;
height: 400px;
width: 400px;
padding: 10px;
}

#text-right-3 {
background-color: #ffb;
position: absolute;
border: solid #000 1px;
margin-left: 427px;
margin-top: 670px;
height: 370px;
width: 345px;
padding: 25px;
}

#text-upper h1 {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 1.2em;
font-style: italic;
font-weight: bold;
text-align: right;
letter-spacing: 5px;
}


/* CLASSES  */

div.image-small-margin
{
  margin: 0px 8px;
/*
  padding: 20px;  
  border: 1px solid #0000ff;
*/
  height: auto;
  width: auto;
  float: left;
}

div.image-text p {
clear: both;
color: #808040;
font-family: verdana, helvetica, arial, sans-serif; 
font-size: 0.8em;
font-weight: bold;
letter-spacing: 0.1em;
text-align: center;
}

div.image-with-margin
{
  margin: 0px 30px;
/*
  padding: 20px;  
  border: 1px solid #0000ff;
*/
  height: auto;
  width: auto;
  float: left;
}

div.image-without-margin
{
  margin: 0px 0px 10px 0px;
/*
  padding: 20px;  
  border: 1px solid #0000ff;
*/
  height: auto;
  width: auto;
  float: left;
}

div.img img
{
  display: inline;
  margin: 3px;
  border: solid #fff 1px;
}

div.img a:hover img {
border: solid #00f 1px;
}

div.img_desc {
  padding: 10px;
  text-align: center;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold; 
  color: #00c;
}

div.img_lft
{
  margin: 0 10px 10px 0;
/*
  padding: 10px; 
  border: 1px solid #0000ff;
*/
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}


div.img_rgt
{
  margin: 0 0 10px 10px;
/*
  padding: 10px;
  border: 1px solid #0000ff;
*/
  height: auto;
  width: auto;
  float: right;
  text-align: center;
}



div.innerpart-halfunit-image {
background-color: #ffd;
float:left;
border: none #000000 1px;
margin: 15px 26px;
height: 220px;
width: 300px;
padding: 0;
}

div.innerpart-image-text {
background-color: #ffc;
float:left;
border: none #000000 1px;
margin: 20px 0px 10px 26px;
height: auto;
width: 400px;
padding: 0px;
}


div.innerpart-unit-image {
background-color: #ffc;
float:left;
border: none #000000 1px;
margin: 40px 0px 10px 26px;
height: auto;
width: 300px;
padding: 0px;
}


div.innerpart-small-unit-image {
background-color: #ffd;
float:left;
border: none #000000 1px;
margin: 0px 0px 0px 0px;
height: 330px;
width:  250px;
padding: 10px 8px;
}

div.main-smallunit {
clear: both;
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: none #000000 0px;
margin-left: 130px;
height:100px;
width: 858px;
padding: 0px;
}

div.main-halfunit {
clear: both;
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: none #000000 0px;
margin-left: 130px;
height:286px;
width: 858px;
padding: 0px;
}

div.main-image-text-unit {
clear: both;
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: solid #000000 0px;
margin-left: 130px;
height: 325px;
width:  858px;
padding: 0px;
}

div.main-unit {
clear: both;
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: solid #000000 0px;
margin-left: 130px;
height: 450px;
width:  858px;
padding: 0px;
}

div.main-unit-long {
clear: both;
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: solid #000000 0px;
margin-left: 130px;
height: 500px;
width:  858px;
padding: 0px;
}

div.main-unit-verylong {
clear: both;
background-color: #ffd;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-bottom: solid #000000 0px;
margin-left: 130px;
height: 700px;
width:  858px;
padding: 0px;
}

div.part-halfunit {
background-color: #ffd;
float:left;
/* position: relative; */
border: none #000 1px;
margin: 2px 1px 1px 1px;
height: 260px;
width:  404px;
padding: 10px;
}

div.part-big-unit {
background-color: #ffd;
float:left;
/* position: relative; */
border: none #000 1px;
margin: 2px 1px 1px 1px;
height: 400px;
width:  544px;
padding: 10px;
}

div.part-small-unit {
background-color: #ffd;
float:left;
/* position: relative; */
border: none #000 1px;
margin: 2px 1px 1px 1px;
height: 400px;
width:  264px;
padding: 40px 0px 10px 20px;
}

div.part-unit-full-width {
background-color: #ffd;
float: left;
border: none #000 1px;
margin: 1px 1px 1px 1px;
/* height: 500px; */
width:  824px;
padding: 10px;
}

div.part-image-unit {
background-color: #ffc;
float: left;
border: solid #000000 1px;
margin: 1px 1px 1px 1px;
height: 300px;
width:  404px;
padding: 2px 2px;
}

div.part-text-unit {
background-color: #ffc;
float: left;
border: solid #000000 1px;
margin: 1px 1px 1px 1px;
height: 300px;
width:  404px;
padding: 20px 10px;
}

div.part-unit {
background-color: #ffc;
float: left;
border: solid #000000 1px;
margin: 1px 1px 1px 1px;
height: 425px;
width:  404px;
padding: 10px;
}

div.part-unit-long {
background-color: #ffc;
float: left;
border: solid #000000 1px;
margin: 1px 1px 1px 1px;
height: 450px;
width:  404px;
padding: 10px;
}




/*

NOT USED: ID's

*/

/*

#img_lft_hrz_md {
  float: left;
  width: 385px;
  margin-top: 0 10px 10px 10px;
  padding: 10px;
  text-align: center;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold; 
  color: #0000cc;
}

#img_lft_md {
  float: left;
  width: 233px; 
  margin-top: 5px 3px 5px 5px;
  padding: 5px;
}

#img_lft_md_nf {
  float: none;
  width: 233px; 
  margin-top: 5px 3px 5px 5px;
  padding: 5px;
}

#img_lft_vrt_sm {
  float: left;
  width: 233px; 
  margin-top: 0 10px 10px 10px;
  padding: 10px;
  text-align: center;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold; 
  color: #0000cc;
}

#img_rgt_hrz_sm {
  float: right;
  width: 304px;
  margin-top: 0 10px 10px 10px;
  padding: 10px;
  text-align: center;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 0.8em;
  font-weight: bold; 
  color: #0000cc;
}

#img_rgt_md {
  float: left;
  width: 233px; 
  margin-top: 5px 5px 5px 3px;
  padding: 5px;
}

#inner-inbetween {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 2px;
height: 445px;
width: 824px;
padding: 0px 20px 0px 20px;
}

#inner-inbetween-half {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 2px;
height: 260px;
width: 844px;
padding: 10px;
}

#inner-inbetween-half-noborder {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 none;
margin: 2px 2px 2px 2px;
height: 260px;
width: 844px;
padding: 10px;
}

#inner-inbetween-half-left {
background-color: #ffffdd;
position: absolute;
border: 1px #000000 none;
margin: 2px 2px 2px 2px;
height: 260px;
width: 400px;
padding: 10px;
}

#inner-inbetween-half-right {
background-color: #ffffdd;
position: absolute;
border: 1px #000000 none;
margin: 2px 2px 2px 426px;
height: 240px;
width: 310px;
padding: 20px 65px 20px 65px;
}

#inner-inbetween-left-image {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 2px;
height: 405px;
width: 280px;
padding: 20px 60px 20px 60px;
}

#inner-inbetween-left-text {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 2px;
height: 425px;
width: 400px;
padding: 10px;
}

#inner-inbetween-right-image {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 426px;
height: 405px;
width: 310px;
padding: 20px 65px 20px 65px;
}

#inner-inbetween-right-text {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 426px;
height: 425px;
width: 420px;
padding: 10px;
}

#inner-inbetween-small {
background-color: #ffffbb;
position: absolute;
border: 1px #000000 solid;
margin: 2px 2px 2px 2px;
height: 80px;
width: 772px;
padding: 0px 40px 0px 40px;
}

#inner-main {
background-color: #ffffdd;
position: absolute;
border: 0px #000000 solid;
margin: 5px 5px 5px 5px;
height: auto;
width: 600px;
padding: 5px 30px 5px 200px;
}

#main-inbetween {
background-color: #ffffdd;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 0px #000000 solid;
margin-left: 120px;
height: 450px;
width: 870px;
padding: 0px;
}

#main-inbetween-half {
background-color: #ffffdd;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 0px #000000 solid;
margin-left: 120px;
height:286px;
width: 870px;
padding: 0px;
}


#medley {
font-size: .8em;
line-height: 1.7em;
text-align: justify;
}

*/

/*

NOT USED: Classes

*/

/* obsolete ??
div.image-text
{
font-family: verdana, helvetica; arial, sans-serif; 
font-size: 0.8em; 
font-weight: bold;
text-align: center;
color: #0000cc;
}
*/