/* ------------- MAIN WEBSITE STYLES --------------- */
/*  Date: 19-01-2017                                 */

body {
    font-family: "museo_sans300", Verdana;
	font-size: 100%;
    line-height: 1.5em;
    background-color: #0B1633;
    margin: 0.5em;
    min-width: 304px; /* accomodates smallest smartphone screen in portait mode minus 2 x 0.5em */
}

@media (max-width: 570px) {
   body {font-size: 90%;}
}

@media (max-width: 360px) {
   body {font-size: 85%;}
}

/* dropcap */
#content > h1 + p:first-letter,
#content > h2 + p:first-letter,
#content > h1 + img + p:first-letter,
#content > h2 + img + p:first-letter {
    float:left;
    font-size:310%;
    padding: 0.15em 0.1em 0 0;
    font-weight:bold;
    line-height:0.75em; /* speciaal voor Opera */
}

h1 {display: block;
    margin: 0 0 0.5em 0;
    padding-bottom: 0.1em;
    border-bottom: 1px solid #fcfca0;
    font-size: 2.0em;  /* 32px/16px */
    line-height:1.05em;
    color: #fcfca0;
}

h2 {margin: 0.6em 0 0.4em 0;
    padding-bottom: 0.1em;
    border-bottom: 1px solid #fcfca0;
    font-size: 1.8em;  /* 24px/16px */
    color: #fcfca0;
}

h3 {margin: 0.5em 0 0.3em 0;
    font-size: 1.3125em;  /* 21px/16px */
    color: #fcfca0;
}

h4 {font-size: 1.125em;   /* 18px/16px */
    color: #fcfca0;
    margin-bottom: 0.3em;
}

h5 {font-size: 1em;       /* 16px/16px */
    color: #fcfca0;
}

.light_yellow {color:#fcfca0; }

.light_black {color:#3C3C3C; }

.blue {color:#3E5288; }

.dark_blue {color:#333366; }

.darker_blue {color: #000066; }  /*used for map uitleg*/ 

.highlight {color:#EEE; font-style:italic; padding-right:0.2em; }

.lightTxt {color:#DCDCDC; }

.lighterTxt {color:#D6D6D6; }

.darkTxt {color:#000; }

hr {height: .02em;
    border: none;
    background: white;
    margin: 2em 0;
    outline: none;
    display: block;
    clear: both;
    width: 100%;
    min-height: 1px;
}

.margin_top {margin-top:0.5em;}

.top_75em {margin-top:0.75em;}

.top1em {margin-top:1em;}

.margin_bottom {margin-bottom:0.5em;}

.margin_left {margin-left:0.5em;}

.margin_right {margin-right:0.5em;}

.anchor_space {padding-top:0.5em; margin-top:-0.2em;}

.note {padding-left: 0.5em; border-left: 3px solid #ccc; }

/* --------------------- IMAGE STYLES ----------------------------------*/

.lightBorder {border: 2px solid #DCDCDC; }

.darkBorder {border: 2px solid #333; }

.medBorder {border: 2px solid #7C8DA1; }

.pic_pos_h3 {margin-top:1.3125em; }  /* -- foto plaatsing in een H3-- */

.pic_pos_08 {margin-top:0.8em; }

.pic_pos_05 {margin-top:0.5em; }

.pic_pos_03 {margin-top:0.3em; }

.text_pos {margin-top:1em; }   /* --plaatst foto naast de text als de </p> voor de img een br bevat-- */

.text_pos_1 {margin-top:-0.2em; }


    /* Image map styles */
    .imageMap {position:relative; margin-bottom:0.5em;}
    .imageMap img {
        display:block;
        width:100%;
        border-radius:10px;
        -webkit-border-radius:10px;}
        
    .imageMap a {
/*        background: rgba(0, 0, 0, 0.5);  use to make the location visible */   
        display:block;
        position:absolute;}

    .imageMap a.dive_site {
        height:20px; /* make a circle of diameter 20px as clickable area */
        width:20px;
        border-radius:20px;
        -webkit-border-radius:20px;}
        
        .imageMap a.dive_site:hover {cursor:pointer;}
        .imageMap a.dive_site.no_choice:hover {cursor:help;}        
        
    .imageMap a.location {
        height:20px; /* make a circle of diameter 20px as clickable area */
        width:20px;
        border-radius:20px;
        -webkit-border-radius:20px;}
        
        .imageMap a.location:hover {cursor:pointer;}        
        .imageMap a.location.no_choice:hover {cursor:help;}        
        
    .imageMap a.map {
        background:#000;
        z-index:100;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:1px solid transparent;
        border-radius:5px;
        -webkit-border-radius:5px;}       
    
    div.imageMap.float-right {margin-left:0.5em;}
    div.imageMap.float-left {margin-right:0.1em;}
    
    .map_text_left {
        color:#333366;
        font-style:italic;
        float:left;
        font-size:95%;
        clear:both;}
    
    .map_text_right {
        color:#333366;
        font-style:italic;
        float:right;
        font-size:95%;
        margin-right:0.5em;
        clear:both;}
        
    /* POP-UP WINDOW SECTION */

    /* this class provides an opaque layer over the whole screen; position needs to be fixed otherwise :target causes a jump */    
    .overlay {
        position:fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        visibility: hidden;
        opacity: 0;
        z-index: 200;
        pointer-events: none;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        -ms-transition: opacity 400ms ease-in;
        -o-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;}
      
        .overlay:target {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;}
    
    .popup {
        position: relative;    
        width: 90%;
        max-width: 900px;
        margin: 5% auto;
        padding: 10px;
        border-radius: 5px;
        background: #fff;
        background: -webkit-linear-gradient(#dfe9e9, #669999);
        background: -moz-linear-gradient(#dfe9e9, #669999);
        background: -o-linear-gradient(#dfe9e9, #669999);
        background: -ms-linear-gradient(#dfe9e9, #669999);
        background: linear-gradient(#dfe9e9, #669999);       
        border-radius: 10px;
        -webkit-border-radius: 10px;
		-webkit-transition: all 1s ease-in-out;
   		-moz-transition: all 1s ease-in-out;
    	-ms-transition: all 1s ease-in-out;
    	-o-transition: all 1s ease-in-out;
    	transition: all 1s ease-in-out;}       
      
  
    .popup h2 {
        display:block;
        font-weight:bold;
        font-size:1.5em;
        color:#000;
        margin:0 0 5px 0;
        text-decoration:none;
        border-bottom:none;}
       
    .popup .popup_close {        
        background: #606061 !important;
        color: #FFFFFF !important;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        height: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
        opacity:1 !important; /* overrides the partial opacity from the CLOSE-button */
        filter:alpha(opacity=100) !important;}        
        
        .popup .popup_close:hover {background: #00d9ff !important;}
    
    .popup .pop_content {
        max-height: 85vh; /* determines the height of the pop-up window */   
        overflow-y:auto;
        *overflow-y:scroll;
        overflow-x:hidden;
        text-align:center;}            
        
    .popup .pop_content p {text-align:left; margin-right:0.5em;}
    
    @media (min-height: 750px) {
	    .popup .pop_content {max-height: 625px;} /* determines the height of the pop-up window */
    }

    @media (min-height: 875px) {
    	.popup .pop_content {max-height: 750px;}
    }
    
	.bg_white {background-color: #fff; }    
    
    
    /*----- hover over an image link and it grows -------*/   
    .grow img {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;}
       
    .grow img:hover {width:120%; height:120%; }
    
    /* MAKE IMAGES RESPONSIVE in the div "content" */
    img.ri, ul.ri, div.ri, span.ri {
    	border: none;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
      
    img.ri.right, ul.ri.right, div.ri.right {
        float:right;
        margin-left:0.5em;
        margin-bottom:0.5em;
        margin-top: 0.25em;}
        
    img.ri.left, ul.ri.left, div.ri.left {
        float:left;
        margin-right:0.5em;
        margin-bottom:0.5em;
        margin-top: 0.25em;}        
       
    img.shadow, ul.shadow, div.shadow {
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;            
    	box-shadow: 0 3px 6px rgba(0,0,0,0.9);
        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.9);
        -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.9);}        


	 /* new responsive table */

      table {
        *border-collapse: collapse; /* IE7 and lower */
        border-collapse:separate !important;
        border-spacing: 0;
        width:85%;}
		
      .rounded {
          -webkit-border-radius: 6px;
          border-radius: 6px;}		
      
      .rounded tr:first-child td:first-child {
          -webkit-border-radius: 6px 0 0 0;
          border-radius: 6px 0 0 0;}
      
      .rounded tr:first-child td:last-child {
          -webkit-border-radius: 0 6px 0 0;
          border-radius: 0 6px 0 0;}
      
      .rounded tr:only-child {
          -webkit-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;}
      
      .rounded tr:last-child td:first-child {
          -webkit-border-radius: 0 0 0 6px;
          border-radius: 0 0 0 6px;}
      
      .rounded tr:last-child td:last-child {
          -webkit-border-radius: 0 0 6px 0;
          border-radius: 0 0 6px 0;}

      td {
	    border-right:none;
        border-bottom:none;
        border-left:0.1em solid #444;
        border-top: 0.1em solid #444;
        line-height:1;
        padding:0.5em;
        text-align:left;}
		  
	  td:last-child {border-right:0.1em solid #444; font-style:italic;}  
		  
	  tr:last-child td {border-bottom:0.1em solid #444;}  

	  th {
        padding-left:0.5em;
        text-align:left;
		font-weight:bold;}
	  
	  /* make the table use all the available width */
      @media (max-width: 50em) {	  
           table {width:100%;}
	  }   	  
		
      /* Stack rows vertically on small screens */
      @media (max-width: 32em) {
        /* Hide column labels */
      	thead tr {
      		position: absolute;
      		top: -9999em;
      		left: -9999em;}
			
      	tr {
          border: 0.1em solid #444;
		  border-bottom:none;}
		  
      	/* Leave a space between table rows */
        tr + tr {
          margin-top: 1.5em;}
		  
        /* Get table cells to act like rows */
        tr,
        td {
      		display: block;}
	  
      	td {
      		border: none;
      		border-bottom: 0.1em solid #444;
      	/* Leave a space for data labels */
      		padding-left: 50%;}
						
		td:last-child {border-right:none;}
			
		.rounded tr {
		  -webkit-border-radius: 6px;
          border-radius: 6px;}

		.rounded td:first-child {
          -webkit-border-radius: 6px 6px 0 0 !important;
          border-radius: 6px 6px 0 0 !important;}
		  			
		.rounded td:last-child {
		  border-right:none;
          -webkit-border-radius: 0 0 6px 6px !important;
          border-radius: 0 0 6px 6px !important;}	
			
      	/* Add data labels */
        td:before {
          content: attr(data-label);
          display: inline-block;
          font-weight: bold;
          line-height: 1;
          margin-left: -100%;
          width: 8em;}
      }        
        
        
/*------------ START OF THE MAIN CONTAINERS -----------------*/

#page-wrap {
	max-width: 71.875em;    /* 1150px/16px */
    margin: 1em auto;  /*centers the page*/
}


/* -- HEADER LAYOUT STYLES ------------------------------------------------ */ 

#header {
    height: 175px;
    width: 100%;
	text-align: center;
    border-top-left-radius: 0.8em;
    -webkit-border-top-left-radius: 0.8em;
    -moz-border-top-left-radius: 0.8em;    
    border-top-right-radius: 0.8em;
    -webkit-border-top-right-radius: 0.8em;
    -moz-border-top-right-radius: 0.8em;
    margin-bottom:-1px; /* this overlap the blamed ghost line */
    padding-bottom:1px; /* this gave me my pixel back =) */     
}

.logo {
    margin-top: -45px;
    margin-left: 0.4em;
    margin-right: 0.4em;
}

.header_comment {
    position: absolute;
    right: 5px;
    top: 1px;
    margin-left: 0.2em;
    margin-right: 0.2em;   
    font-style: italic;
    color: #000;
    font-size: 0.9em;
}

/* -- SOCIAL MEDIA LAYOUT STYLES ------------------------------------------------ */
	   
#smedia {
    position:absolute;
    right: 5px;
    top: 1.4em;
    border-radius: 4px;
    display: block;
}
     
#smedia input[type=checkbox] {display: none; }

#smedia label {
    position: relative;
    display: block;
    height: 30px;
    width: 30px;
    cursor: pointer;
          
    margin-right: 5px;
    border-radius: 4px;
          
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA60lEQVRoge3ZsQ6CMBQF0H4YFD7h9Xtc3HDnA3A0cYSywuBiYiJEJhdXB9l0csAJB0KMxYT2xXuTNza5p4WlFQJBEMTp+JRTQFkRKN3NOpQVPuX0U/mAdDJ78cFI0svpO2+5fD8epaExQCpd2i7+PgWlS2OA7dLDAcD2OAOI4ro7nm7dWJwH7PbX0eIsAFFcfyzvPKBqWt6AsSxWh6/XOwkwWQ/AXwJMcn88eQOqpuUN2KYX3oBkc3YPwP4nBgAAAAAAAAAAAOAKYH+5y/56XQghJGVr2+UnP3D08SgNbXxOUuly8s4jCILMlhcn2mxW8ib/jwAAAABJRU5ErkJggg==);
    background-size: 45px 45px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color:#3F51B5;
    
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
}

/*  The ul will have display:none by default */
#smedia ul {
    position: absolute;
    top: 0;
    right: 45px;
    display: none;
    
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.7);
    
    /* slowly opaque the full menu in view */
    opacity: 0; 
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

#smedia li {float: left; }

#smedia ul li a {
    display: block;
    width: 44px;
    height: 44px;
    text-indent: -9999px;
}

.bottles-up {
    background: url(../images/Logo_90x90.png);
    background-size: 44px 44px;
    background-repeat: no-repeat;
}

.share {
    border-radius: 40px;
    border: 2px solid #000;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABfklEQVRoge2ZzW3CQBBGXwkuwSVQgktIB2wH0EHSQdJB6IB0QDowHUAH0EFyWFtaW/Z4xwdmVvKT5gIcvvnZ2U8LbGxseGAPtMBfF233mXsqhsLH0Xa/cYskPk3CJUeWxfcRbCTK5FTfdRdyxffhjmITqIB3dOKvJkon2AM39NUPBloH7IALeuHm1a+A7wlRfdyJAiXxZhfZAXjMCHsCH4m4wDCRK4Zj0yDP+Q9QG2kTqYEz8jg0RtpEt7i0Fp9E22BCjluUxuULYzep8Stp/BJXpykat5iuxTcDrZNoqj9eiy7QVt8dxScgXfHjeBBXqasRWnOIbzg6xKDrQhoXHKxRiCOx5BbvwvefOBmrwLxbrIgrVDofh1eKXUtNdJpzibQYmjkNDfJYnXFqp8cciTd0ztrd4/RttAJOyGu3iLfRHdGhrlnJrl7lAvL5mIvwcqUCS2vXfRd6tF1wR/EJaHyWm7fRlOL/4IC8Lrisfk+O23VxkS0RcPQ2urFREv9TV887y5R+ZAAAAABJRU5ErkJggg==);  
    background-color:#71B7CA;
    background-size: 32px 32px;
    background-position: 30% center;
    background-repeat: no-repeat;
}

share_2 {
    border-radius: 40px;
    border: 2px solid #000;
    background-image: url(../images/share-2.svg);  
    background-color:#71B7CA;
    background-size: 32px 32px;
    background-position: 30% center;
    background-repeat: no-repeat;
}

/*

a[href^="tel:"]:before {
    content: "\260E";
    display: block;
    margin-right: 0.5em;
}

a[target="_blank"]::after {
    content: '';
    background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAA/UlEQVQYV12QwWrCQBCG9yLFi2d76EVQDx576sHgbhTMA3jTPksh2STVUlBPfQkfqO8gqOzGmEKn808xiAvLkJlv//zzK2P9bvJBZKz7HecV6iF627dC675N6olvxT1SkxVD2dkESfGk41N/nJWdaEMPz1/UMImPp2sR+VGgAam7Y5JiJooMoyqTFhSmZQ/Dl09qovJv59GWlRiGMmwIGMTHbq2UugUgwPiGDXgWUL+XfTS1da88IMDXh/CMBVWYX2ho/aPOL4MpQ4BvbciCnIYsM1q6tjQZVncHiyI6iUfbcwhYlNkGPGNBgTg6MEoCX0lWBBvwXF/u/c/87g96DLwN1VorFQAAAABJRU5ErkJggg==);
    display: inline-block;
    height: 10px;
    margin: 0 3px 0 5px;
    width: 10px;
*/    

#smedia input[type=checkbox]:checked ~ label {background-color: #3D88BD; }

#smedia input[type=checkbox]:checked ~ ul {
     width: 100px;
     height: 50px;
     background-color:#3F51B5;
     display: block;
     border-radius: 4px;
     opacity: 1;
}

#smedia input[type=checkbox]:checked ~ ul li {      
     display: block;
     margin: 3px;
}

    
/* -- MAIN CONTENT STYLES ------------------------------------------------ */     
    
#water-edge {
    position: relative; /* used for absolute positioning of the media buttons */
    height: 75px;
    background: transparent url(../images/bg/pool_edge.png) repeat-x top left;
    margin-top: 0px;
}

#main-content-1 {
    overflow: hidden;
    width: 100%;
    margin-top: -10px;
    z-index: 2;           
    background: #71B7CA url(../images/bg/ver_grad_71b7ca_335d71.png) repeat-x bottom left;
}
	
#main-content-2 {
    float: right;
    width: 100%;
    background: transparent url(../images/bg/seamless_bubble_pattern_6_200x100.png);
}

#main-content-3 {
    overflow: hidden;
    max-width: 71.875em;
    min-height: 50em;
    z-index: 3;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 14em;
    -webkit-transition: padding-left 0.5s ease-in-out;
    -moz-transition: padding-left 0.5s ease-in-out;
    -ms-transition: padding-left 0.5s ease-in-out;
    -o-transition: padding-left 0.5s ease-in-out;
    transition: padding-left 0.5s ease-in-out;
}

#main-content-3 a {color: #0b1633; }
#main-content-3 a:hover {color: #fcfca0 }

/*---------------- CONTENT -----------------------*/

#content {
    float: right;
    width: 100%;}
    
#content p {margin-bottom: 0.5em;}    

#content a.default, #example_page a.default {
    color: #F5F5F5;   /* define link-colors seperately */
    letter-spacing:0.05em;
    padding-left:0.6em;
    padding-right:0.6em;}
    
    #content a:hover {color: #fcfca0; }

#content a.jump_back {
    border: 1px solid #69c;
    display: block;
    line-height:1.3em;
    width: 9em;
    color: #FFF;
    background-color: #036;
    margin-right: 0.4em;
    padding: .2em 0;
    text-align: center;
    text-decoration: none;
    font-size: 0.7em;
    font-weight:normal;
    border-radius: 0.6em;
    -webkit-border-radius: 0.6em;
    -moz-border-radius: 0.6em;
    float:right;}
    
    #content a:hover.jump_back {
       border: 1px solid #036;
       background-color: #69C;}
       
#content a.jump_back.h2_size {font-size: 0.4em;}
#content a.jump_back.h3_size {font-size: 0.55em;}
#content a.jump_back.h4_size {font-size: 0.64em;}   


/*------ RESPONSIVE I-FRAME ------------------------*/
/* HAVE TO USE PADDING; WITHOUT PADDING THERE IS NO WINDOW */
/* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) for media */

.fluid_frame {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden; }

.fluid_frame iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%; }		   
           
	
/*---------------- SIDEBAR -----------------------*/

#left-sidebar {
    background-color: rgba(255, 255, 255, 0.2);     
    width: 208px;
	float: left;
    margin-left: -216px;
    padding: 4px;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;        
    position:relative;
    z-index: 4;      /* always on top of main-content-2 and main-content-3 */
}

#left-sidebar p {
    font-size: 0.85em; }

#left-sidebar a {color: #244f7a; }
#left-sidebar a:hover {color: #fcfca0 }

#left-sidebar li.right_triangle {
    line-height: 1.4em;
    padding-left: 18px;
    margin-bottom: 0.6em;
    background: url(../images/sidebar_links/right_triangle_14x22.png) no-repeat center left;
}

.header_l {
    display: block;
    clear: both;
    font-weight: 600;
    font-size: 0.9em;
    color: #336699 !important;
    border-bottom: 1px solid #244F7A;
    text-transform: uppercase;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}

.subHeader_l {
    display: block;
    clear: both;
    font-weight: 600;
    color: #fff;    
}

#left-sidebar a.image_link {display: block;}
#left-sidebar a.image_link img {width:100%; height:100%;}
#left-sidebar a:hover.image_link img, #sidebar a:focus.image_link img {display: none; }    


/*------------ FOOTER ------------------------------*/

#footer {
    clear: both;
    width: 100%;
    height: 100px;
    font-size: 0.8em;
    color: #F5F8F9;
    background: #71B7CA url(../images/bg/sea_floor_hor_tiled_gradient_scaled.png) repeat-x top left;
    border-bottom-left-radius: 0.8em;
    -webkit-border-bottom-left-radius: 0.8em;
    -moz-border-bottom-left-radius: 0.8em;        
    border-bottom-right-radius: 0.8em;
    -webkit-border-bottom-right-radius: 0.8em;
    -moz-border-bottom-right-radius: 0.8em;
    margin-top:-1px; /* this overlap the blamed ghost line */
    padding-top:1px; /* this gave me my pixel back =) */
    z-index:4;  /* make sure that the footer overlaps the other layers */
    /* overflow:hidden; another way of getting rid of these mystery lines */
}

#footerLeft {
    float: left;
    width: 39em;
    height: 100px;
    line-height:1.5em;
    text-align: left;
    padding-left: 0.8em;
}

#footerRight {
    float: right;
    width: 14em;
    height: 100px;
    line-height:1.5em;
    text-align: right;
    padding-right: 0.8em;
    padding-top: 1em;
    position:relative;
}

#footerLeft dl {margin-top: 1em; }

#footerLeft dt {float: left; }

#footerLeft dt.space {padding-right: 2em; }

#footerLeft a.link, #footerRight a.link {color: #0B1633;}
    
#footerLeft a:hover.link, #footerRight a:hover.link {
    text-decoration: underline;
    color: #FFF;
}

.sitemap {
    font-style:normal;
    font-weight:bold;
    position:absolute;
    /* bottom:1em; */
    right:1em;    
}

#footerRight ul {margin-top: 0.25em; }
    
#footerRight li {
    width: 30px;
    height: 19px;  /* hoogte vlaggetje + 3px verschuiven */
    float: right;
    margin: 0em 0.8em 0em 0.2em;
    overflow: hidden;   /* anders verchuift de hele pagina tijdens het springen in de HTML met anchors */
}
 
#footerRight li a {
    background-position: 0px 0px;
    display: block;
    float: right;
    width: 30px;        /* --- dezelfde breedte als de vlag anders wordt de vlag zo lang als de tekst ----- */
    margin-right: 0px;
    padding-top: 30px;  /* ----- dit verschuift de tekst naar beneden en uit beeld met overflow: hidden  ----- */
    background-repeat: no-repeat;
}
        
#footerRight li a:hover, #footerRight li a.active {background-position: 0px -47px; }  /* ----- sliding-door techniek --- */
    
#footerRight li.EN a {background-image: url(../images/menu/uk_2tone.png); }      
    
#footerRight li.NL a {background-image: url(../images/menu/nl_2tone.png); }
    
#footerRight li.DE a {background-image: url(../images/menu/de_2tone.png); }

/* ------ WHEN SCREEN SIZE CHANGES ---- */

@media screen and (max-width: 560px) {

   .sitemap {bottom: 1.5em; right: 1.5em;}
}

@media screen and (max-width: 450px) {
    
   #footerRight {display: none;}
    
}