body
 {margin:0;

  padding:0;

  border:0;
   /* This removes the border around the viewport in old versions of IE */

  width:100%;
  background:ff7f00;
   /*  min-width:766px;*/
   /* Minimum width of layout - remove line if not required */

   /* The min-width property does not work in old versions of Internet Explorer */
  font-size:100%;
}





/* Header styles */


#header
 {clear:both;
/* float:left; */

  width:100%;

  }


#header
 {border-bottom:1px solid #000;

  border-top:1px solid #000;

}




/* 'widths' sub menu */


#layoutdims
 {clear:both;

  background:#eee;

  border-top:4px solid #000;

  margin:0;

  padding:6px 15px !important;

  text-align:right;
}


/* column container */


.colmask
 {position:relative;
    /* This fixes the IE7 overflow hidden bug */

  clear:both;

  float:left;

  width:100%;
    /* width of whole page */

  overflow:hidden;
   /* This chops off any overhanging divs */

  }


/* common column settings */


.colright,
.colmid,
.colleft
 {float:left;
  width:100%;
    /* width of page */

  position:relative;
}


.col1,
.col2,
.col3
 {float:left;

  position:relative;

  padding:0 0 1em 0;
    /* no left and right padding on columns, we just make them narrower instead 
       only padding top and bottom is included here, make it whatever value you need */

  overflow:hidden;
}


/* 3 Column blog style settings */


.blogstyle
 {background:ff7f00;

    /* right column background colour */

  }


.blogstyle .colmid
 {right:25%;
    /* width of the right column */

  background:cornsilk;
  border-right:1px solid #000;

    /* center column background colour */

  }


.blogstyle .colleft
 {right:50%;
   /* width of the middle column */

  background:ff7f00;
  border-right:1px solid #000;

   /* left column background colour */

  }


.blogstyle .col1
 {width:21%;
    /* width of center column content (column width minus padding on either side) */

  left:80%;
   /* 100% plus left padding of center column */

  }


.blogstyle .col2
 {width:46%;
   /* Width of left column content (column width minus padding on either side) */

  left:80%;
   /* width of (right column) plus (center column left and right padding) plus (left column left padding) */

  }


.blogstyle .col3
 {width:21%;
    /* Width of right column content (column width minus padding on either side) */

  left:85%;
    /* Please make note of the brackets here: 
       (100% - left column width) plus (center column left and right padding) plus 
      (left column left and right padding) plus (right column left padding) */
  }


/* Footer styles */


#footer
 {clear:both;

  float:left;

  width:100%;

  background:ff7f00;
  border-top:1px solid #000;
  
}





div#box_rechterkolomprijzen{
margin: 10 10 10 10;
width: 78%;
border: 2px solid red;
background: lightblue;
padding: 10px 20px 10px 20px;
text-align: center;
}

div#box_rechterkolomprijzen_kopje{
margin: 10 10 10 10;
width: 80%;
border: 1px solid red;
background: yellow;
padding: 10px 10px 10px 10px;
text-align: center;
}

p{
margin: 10 10 10 10;
width: 100%;
border: 2px solid red;
background: lightblue;
padding: 10px 20px 10px 20px;
}

h1{
margin: 10 10 10 10;
width: 87%;
border: 2px solid black;
background: orange;
padding: 10px 20px 10px 20px;
text-shadow: 0px 0px 8px #ffffff;
}

h3{
margin: 20 10 10 10;
width: 87%;
border: 1px solid black;
background: orange;
padding: 10px 20px 10px 20px;
text-shadow: 0px 0px 5px #ffffff;
}

.topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.topnav ul li {float: left;}

.topnav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.topnav ul li a:hover:not(.active) {background-color: #111;}

.topnav ul li a.active {background-color: #4CAF50;}

.topnav ul li.right {float: right;}

@media screen and (max-width: 600px){
    .topnav ul li.right, 
    .topnav ul li {float: none;}
}

div#weetje{
margin: 10 10 10 10;
width: 80%;
border: 1px solid red;
background: gray;
padding: 10px 20px 10px 20px;
}

div#weetje_kopje{
margin: 10 10 10 10;
width: 70%;
border: 1px solid red;
background: yellow;
padding: 10px 10px 10px 10px;
text-align: center;
}

div#foto{
margin: 8 10 10 10;
width: auto;
height: auto;
float: right;
border: 1px solid orange;
background: yellow;
padding: 10px 10px 10px 10px;
}

.fotoinkopcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
} 

/*een heel gedoe om de voet te centeren begin, werkt helaas niet goed op ipad*/
div#voet1{
 float:right;
 position:relative;
 left:-50%;
 text-align:left;
}
div#voet2{
 list-style:none; 
 position:relative;
 left:50%;
 } 
div#voet3 li{float:left;position:relative;}
/*een heel gedoe om de kop te centeren einde, werkt helaas niet goed op ipad*/


div#kijkrustigrond{
margin: 10 10 10 10;
width: 91%;
border: 1px solid red;
background: yellow;
padding: 10px 10px 10px 10px;
text-align: center;
}

/* menu in linker kolom begin */
.col1 ul
{
list-style-type:none;
margin:0;
padding:0;
}
.col1 a:link, .col1 a:visited
{
display:block;
font-weight:bold;
color:#000000;
background-color:#98bf21;
width:124px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
text-shadow: 0px 0px 8px #ffffff;
}
.col1 a:hover, .col1 a:active
{
background-color:#7A991A;
}
/* menu in linker kolom eind*/

/* dagkeuzen programma resorts begin */

div#dagprogramma
{
list-style-type:none;
margin:0;
padding:0;
}
div#dagprogramma a:link, div#dagprogramma a:visited
{
display:block;
font-weight:bold;
color:#000000;
background-color:#98bf21;
width:auto;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
text-shadow: 0px 0px 8px #ffffff;
}
div#dagprogramma a:hover, div#dagprogramma a:active
{
background-color:#7A991A;
font-size:125%;
}

/* dagkeuzen programma resorts eind*/

/* menu in voet begin */

#voet4{
 float:right;
 position:relative;
 left:-50%;
 text-align:left;
 }

div#voet4 ul{
 list-style:none; 
 position:relative;
 left:50%;
 } 

div#voet4 li{float:left;position:relative;}

div#voet4 a:link, div#voet4 a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:auto;
text-align:center;
padding:4px;
text-decoration:none;
text-shadow: 1px 1px #000000;
}
div#voet4 a:hover, div#voet4 a:active
{
background-color:#7A991A;
}
/* menu in voet eind*/

/* (niet) laten zien programmadagen bij resorts*/
.hidden { display: none; }
.unhidden { display: block; }