<style type="text/css">

/* By default a div element is a block element, i.e.
   it always starts on a new line and takes up the full width available 
   
   border-style: the border-style property sets the style of 
                 an element's four borders.*/

/* This determines the style of the horizontal lines */
hr { margin-left: 20px;
     margin-right: 20px;
	 margin-top: 0.0em;
	 margin-bottom: 0.0em;
   }  

a.nounderline { text-decoration: none;
              }
/* This determines the style of the balls for scenic beauty */
img.iconsinfo { vertical-align: -1px;
              }

/* border-collapse: collapse: borders of two adjacent boxes
                    are not separated.
   box-sizing: border-box:
   When you add something that enlarges the width of a box (e.g. padding or borders),
   the box will break. The box-sizing property allows us to include 
   the padding and border in the box's total width (and height), 
   making sure that the padding stays inside of the box 
   and that it does not break. */
* {
  border-collapse: collapse; 
  box-sizing: border-box;
  font-family: Calibri, Helvetica, Arial, sans-serif; 
  font-size: 16px;
}

/* style for an id element starts with # 
   margin: auto: this element is positioned in the centre of the page 
   border must be set for all elements of the table,
   in combination with border-collapse */
#whole_page {
  width: 1025px;
  margin: auto;
  display: table;
  background-color: rgb(204, 255, 255);
  border: 2px solid black;
  border-collapse: collapse;
}

/* float: left; The element floats to the left of its container */
.logo {
  width: 14%;
  height: 92px;
  float: left;
  display: table-cell;
  background-color: rgb(255, 255, 204);
}

/* centre the image within the logo box by setting the margins to auto */
.logo img {
  display: block;
  margin: auto;
}

.titel_klim_desktop {
  width: 72%;
  height: 92px;
  float: left;
  display: table-cell;
  background-color: rgb(255, 255, 204);
  text-align: center;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

.titel_klim_desktop h1 {
  font-size: 32px;
  color: rgb(204,0,0);
  vertical-align: center;
}

.sub-title_beauties_desktop h3 {
  font-size: 18px;
  color: rgb(204,0,0);
  margin-top:    0px;
  margin-bottom: 0px;
  padding-left: 15px;
  padding-right: 15px;
}

p.text_climbs_beauties {
  margin-top:    4px;
  margin-bottom: 4px;
}

/* style for a class element starts with . 
   The float property is used for positioning and formatting content,
   e.g. left - the element floats to the left of its container 
   Here side column floats to the left of row */
.left_column {
  width: 14%;
  float: left;
  display: table-cell;
  /* border: 2px solid black; */   
  /* border-collapse: collapse; */
  /* border-bottom-style: none; */
}

/* width: 80%; the element bezoekers occupies 80% of the width of its parent element
   margin: auto: margins on both sides of the element bezoekers have identical wirdth
                 (10%)
   text-align: center; the text within bezoekers in centrally aligned */
   
.bezoekers_desktop {
  width: 80%;
  margin: auto;
  text-align: center;
}

.middle_column_climb, .middle_column_region, .middle_column_ranking_heuvels {
  width: 72%;
  float: left;
  display: table-cell;
  border: 2px solid black;
  box-sizing: border-box;
  border-top-style: none;
  border-bottom-style: none; 
}

.tabel_middenkolom_klim, .tabel_middenkolom_regio, .tabel_heuvels_index {
  width: 100%;
  display: table;
}

.tabel_rij_middenkolom, .rij_heuvels_index1 {
  display: table-row;
  padding-top: 20px;
  padding-bottom: 20px;
}

.gegevens {
  float: left;
  width: 44%;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  display: table-cell;
}

.foto_vlaggen {
  float: right;
  width: 56%;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 0px;
  display: table-cell;
  text-align: center;
}

.columns_beauties {
  padding-top: 15px;
  text-align: center;
  padding-left:  20px;
  padding-right: 20px;
}

.columns_experience {
  padding-top:   15px;
  text-align: left;
  padding-left:  20px;
  padding-right: 20px;
}

img.img_aux_pages {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

p.waardering {
  text-align: center;
  padding-top: 0px;
}  

/* The CSS margin properties are used to create space around elements, 
   outside of any defined borders */
   
#vlaggen_desktop {
  margin-top: 0px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;
}

p#tekst_klim {
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

/* According to https://www.w3schools.com/css/css_website_layout.asp:
   Clear floats after the columns. 
   Own experience: for unknown reason, this is essential for the mobile version 
   The ::after selector inserts something after the selected element(s).
   Namely the content (in this case no text)
   clear: both: No floating elements allowed on either the left or the right side
   Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The problem with the setting width occurs when the browser window is smaller 
   than the width of the element. 
   The browser then adds a horizontal scrollbar to the page.   
   Using max-width instead, in this situation, 
   will improve the browser's handling of small windows */
   
img.profile_desktop, img.profile_mobile {
  display: block;
  max-width: 90%;
  margin: auto;
}

img.profile_desktop {
  padding-top: 20px;
  padding-bottom: 20px;
}

img#mapEurope_desktop {
  display: block;
  max-width: 100%;
  margin: auto;
}

img#mapEurope_mobile {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
  margin: auto;
} 

#photo_ranking_heuvels {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  margin-bottom: 15px;
  margin-top: 20px;
}

img.auxilPages {
   display: block;
   margin: auto;
   margin-top: 20px;
}

.textAuxilPages {
   max-width: 95%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

#vlaggen_AuxilPages {
   text-align: center;
   margin-top: 20px;
   margin-bottom: 20px;
}	

#mapopen_mainpage {
  display: none;
  /* overflow: visible; */
}

/* max-width: the width is the maximum of the width of the container and 
   the specified width */
#mapid {
  max-width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

#mapmidned, #mapzuidlim {
  max-width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}	

p.titleMap {
  font-size: 20px;
  font-weight: bold;
  color: rgb(204, 0, 0);
}

button.general {
  font-size: 20px;
  font-weight: bold;
  color: rgb(204, 0, 0);
  background-color: rgb(255, 255, 204);
}

button.gpx {
  color: rgb(204, 0, 0);
  background-color: rgb(255, 255, 204);
  margin-top: 12px;
  margin-bottom: 12px;
}

button.ocm, button.ocm_heuvelsfietsen, button.ocm_lowCyclingup {
  color: rgb(204, 0, 0);
  background-color: rgb(255, 255, 204);
}

button.ocm {
  margin-top: 12px;
}

.centerText {
  text-align: center;
}

.table_climbs_desktop {
  padding-top:    15px;  
  padding-bottom: 15px;  
  padding-left:   10px;  
  padding-right:  10px;  
}

.table_ranking_heuvels_mobile, .table_ranking_heuvels_desktop {
  padding-top:    15px;  
  padding-bottom: 15px;  
  padding-left:   10px;  
  padding-right:  10px;  
}

table.ranking { 
  background-color: #FFFFCC;
  margin: auto;
}

.right_column {
  width: 14%;
  float: left;
  display: table-cell;
  /* border: 2px solid black; */  
  /* border-bottom-style: none; */
}

.ads_region_climb, .ads_all_pages {
  font-size: 14px;
  max-width: 90%;
  margin: auto;
}

.Google_ad {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 100%;
}

.picture_side_column {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-bottom: 20px;
}

.gps_mobile {
  margin-bottom: 10px;
}

@media only screen and (min-width: 633px) {

  img.photo_mobile, .titel_klim_smartphone, .heading_mobile,
     img.profile_mobile, br.line_feed_mobile, hr.line_mobile,
	 #tableopen, .tabel_en_tekst_regio_mobile, .gps_mobile,
     button.map_table_mobile {
        display: none;
  }
  
  .columns_beauties, .columns_experience {
     width: 50%;
     display: table-cell;
	 vertical-align: top;
  }

  #mapMN {
     float: left;
     width: 50%;
     display: table-cell;
     text-align: center; 
   }

  #mapZL {
     float: right;
     width: 50%;
     display: table-cell;
     text-align: center; 
  }

  .row {
     display: table-row;
     border: 2px solid black; 
  }

 }   
		
@media only screen and (max-width: 632px) {

  #whole_page {   
     width: 100%;
     font-size: 17px; 
	 background-color: #ffffff;
	 border-style: none;
  }
  
  .row, .titel_klim_desktop, .middle_column_climb, .middle_column_region, 
     .tabel_rij_middenkolom, .gegevens, .foto_vlaggen, 
     .middle_column_ranking_heuvels {   
     width: 100%;
  }
  
  .middle_column_region {
	 border-style: none;
  }
  
  .row {
     display: table-row;
     border: none;
  }

  .heading_mobile {
     margin-bottom: 15px;
  }
  
  .titel_klim_smartphone {
     text-align: left;
     padding-left: 20px;
     padding-bottom: 1llkx;
     padding-top: 1px;
     background-color: rgb(204, 255, 255);
     border: 2px solid black;
  }

  .titel_klim_smartphone h1 {
    font-size: 22px;
    color: rgb(204,0,0);
  }
  
  #vlaggen_mobile {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 4px;
  }
  
  p#other_climbs_mobile {
	 width: 100%;
	 text-align: center;
	 margin-bottom: 0px;
	 margin-top: 10px;
  }

  img.photo_mobile {
     max-width: 90%;
     height: auto;
     display: block;
     margin-left: auto;     
     margin-right: auto;     
     margin-top: 15px;
     margin-bottom: 15px;
  }
  
  /* The overflow property only works for block elements with a specified height 
     white_space: nowrap: 
     The text continues on the same line until a <br> tag is encountered */
  #tableopen {
     white-space: nowrap;
	 height: 300px;
	 overflow: auto;
     margin-top: 15px;
     margin-bottom: 10px;
	 margin-left: 10px;
  }
  
  .table_ranking_heuvels_mobile {
	 display: block;
     white-space: nowrap;
	 height: 600px;
	 overflow: auto;
  }	  
  
  button.map_table_mobile {
	 height: 40px;
     width: 100%;
     background-color: rgb(0, 153, 255);
     color: white;
     font-size: 18px;
  }

  p#tekst_regio_mobile {
     max-width: 90%;
     margin: auto;
     margin-top: 20px;
     padding-bottom: 25px;
  }
  
  .search_facility_mobile {
     text-align: center;
  }

  .logo, .left_column, .right_column, .foto_vlaggen, .titel_klim_desktop,
     br#search_facility, img.profile_desktop, p.other_climbs_desktop,
     .tabel_middenkolom_regio, .table_climbs_desktop, hr.line_desktop,
     img#mapEurope_desktop, #vlaggen_AuxilPages, br.br_desktop,
     #vlaggen_desktop, .rij_heuvels_index1, p.titleMap,
     .table_ranking_heuvels_desktop, button.ocm_lowCyclingup	{
     display: none !important;
  }
  
  /*p.other_climbs_desktop {
	 display:none;
  }*/

/* Style the navigation menu for small devices
   from: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp */

/* The overflow property specifies what should happen 
   if content overflows an element's box.
   This property specifies whether to clip content 
   or to add scrollbars when an element's content is too big 
   to fit in a specified area.
   Note: The overflow property only works for block elements with a specified height.
   hidden: The overflow is clipped, and the rest of the content will be invisible
   
   The position property specifies the type of positioning method used for an element.
   relative: The element is positioned relative to its normal position, 
   so "left:20px" adds 20 pixels to the element's LEFT position
*/
   
  .topnav {
    overflow: hidden;
    position: relative;
    font-size: 17px;
    border: 2px solid black;
  }

  /* Style all navigation menu links under topnav */
  .topnav a {
    padding-top: 7px;
    padding-bottom:	7px;
	padding-left: 10px;
	padding-right: 10px;
    text-decoration: none;
    display: block;
    border: 1px solid black;
  }

  /* Style the a-element of the homebar */
  .topnav a.homebar {
    background-color: rgb(0, 153, 255);
    color: white;
    padding-top: 14px;
    padding-bottom:	14px;
  }

  /* Style the hamburger menu */
  .topnav a.hamburger {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 0px;
    padding-bottom:	0px;
    padding-right: 0px;
    padding-left:	0px;
	border-left-style: none;
	border-bottom-style: none;
  }

  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #toplinks {
    display: none;
    background-color: rgb(255, 255, 204);
  }

  .topnav #toplinks a {
    color: rgb(204,0,0);
  }

  /* Style navigation menu links */
  .subbar {
    overflow: hidden;
    position: relative;
  }

  .subbar a {
    text-decoration: none;
    display: block;
  } 

  /* Style the icon menu */
  .subbar a.downarrow {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 0px;
    padding-bottom:	0px;
    padding-right: 20px;
    padding-left:	0px;
	border-left-style: none;
	border-bottom-style: none;
  }

  /* Hide the links inside the navigation menu (except for logo/home) */
  .subbar #linksregio {
    display: none;
    background-color: rgb(255, 255, 255);
  }

  .subbar #linksregio a {
     padding-left: 20px;
  }
  
  .subbar #linksLimburg { 
    display: none;
    background-color: rgb(255, 255, 255);
  }

  .subbar #linksLimburg a {
     padding-left: 20px;
  }
  
  .subbar #linksranking {
    display: none;
    background-color: rgb(255, 255, 255);
  }

  .subbar #linksranking a {
     padding-left: 20px;
  }
  
  .subbar #linkstoertochten {
    display: none;
    background-color: rgb(255, 255, 255);
  }

  .subbar #linkstoertochten a {
     padding-left: 20px;
  }
  
  #mapopen, #tableopen, #mapMN, #mapZL {
	 display: none;
  }
  
}

  
}


/* Dit gedeelte is voor het uitklapmenu in de linkerkolom */
/* http://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html#vstart */
/* Dit script voorziet in een derde niveau (dat nu niet ingevuld is) */

#menu {
width: 12em;
background: rgb(204, 255, 255);
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 1000;
}

#menu a, #menu h2 {
font-family: Calibri, Helvetica, Arial, sans-serif;
font-size: 16px;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 5px 5px;
text-align: center;
}

#menu h2 {
color: #fff;
color: #CC0000;
background: #D8D8D8; 
text-transform: uppercase;
}

#menu a {
color: #CC0000;
background-color: rgb(255, 255, 204);
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 0;
}

#menu ul ul ul a {
background: #F2F5A9;
}

#menu li {position: relative;}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

nav#menu ul ul ul 
{display: none;}

nav#menu ul ul li:hover ul 
{display: block;}

nav#menu ul ul ul,
nav#menu ul ul li:hover ul ul
{display: none;}

nav#menu ul ul li:hover ul 
{display: block;}

nav#menu ul ul ul,
nav#menu ul ul li:hover ul ul
{display: none;}

nav#menu ul ul li:hover ul,
nav#menu ul ul ul li:hover ul
{display: block;}

#menu li {position: relative;}

</style>

/* Om problemen met Internet Explorer te voorkomen /*

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
} 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em Times New Roman, serif, helvetica, sans-serif;
} 
</style>
<![endif]-->



       

