<? 
$containerbreedte=825;
$breedte=750;
$margeLR=10;

?>

* {
	box-sizing: border-box;
}

body {
 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}


.hamburger {
  position: fixed;
  z-index: 100;
  top: 1rem;
  right: 1rem;
  padding: 4px;
  border: black solid 1px;
  background: lightblue;
  cursor: pointer;
}


.closeIcon {
  display: none;
}


div. {
        font-family:Arial, Helvetica, sans-serif;
        font-size:10px;
        line-height:18px;
}


div.Opties
{
        float:left;
        padding: 8px;
        margin-left 44px;
width: 500px;
        text-align: center;
        border: 3px outset grey;
        border-radius: 8px;
box-shadow: 2px 2px 3px grey;
          font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;  

    background-color:black;
    color: white;

}


/*
tekstpagina's
*/


.TextDropDownButton:hover{
    background-color: #efebe5;
    background-image: url('pla/AchtergrondHover.jpg');  

}

.TextDropDownButton{
    background-color:#e1dbd2;
    background-image: url('pla/AchtergrondKnop.png'); 
    clear:both; 
    height:45px; 
    margin-right:20%; 
    width:100%; 
    vertical-align: middle;
    padding:5px;
    position:relative;
}


   .g { text-decoration-line: underline overline; 
    }
    .Heletekst{
	font-size: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
    }


    .ToutPortret{
        width:75px;
        height:125px;
        float:left;
        /*border:1px solid black; */
        margin-right:-20px;
    }

    
/*
einde tekstpagina's
*/


.menuH {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;

  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.2s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: red;
  color: white;
  list-style: none;
  padding-top: 4rem;
}

.showMenu {
  transform: translateY(0);
}


div.Songscriptregels {
width:100%; 
display: flex; 
justify-content: center; 
margin-bottom: 15px; 
margin-top: 15px; 
font-size: 15px;
float: none;
}


div.TopKop {
width:100%; 
display: flex; 
justify-content: center; 
margin-bottom: -15px; 
margin-top: 20px; 
}

.h1 {
font-size: 30px;

}

.h2 {
font-size: 18px;
}

.btn-link {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #0000EE;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;

}

.button  {
  background-color: #4CAF50;
  border: none;
  color: black;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}


div.container {  
 
        width:775px; /*825px;*/
        margin: auto;
        position: relative;
}


/* header */
div.header {
        font-size:20px;
        width:100%;
        height:50px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:17px;
        line-height:18px;
position:relative;
top: 45px;
}

/* menu */
div.menu {
        color: white;
        width:100%;
        height:20px;
        background-color:#000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
} 


/* maincontent */
div.maincontent {

  margin: 2px ;
margin-top: 31px;

  }


/* Middlecontent1 */
div.Middlecontent1 {
        position: absolute;
        left: 1;
        top: 0;
        margin: 0px auto; 
        width:2px;
  }

/* Middlecontent2 */
div.Middlecontent2 {
        position: absolute;
        left: 1;
        top: 0;
         margin-left: 33px;
        width:749px;
          font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;

  }


/* Middlecontent3 */
div.Middlecontent3 {
background-color: linen;
        position: relative;
        float:left;
        padding: 8px;
        margin-left 44px;
	  width: 750px;
        max-width: 100%;
        text-align: center;
        border: 3px outset grey;
        border-radius: 8px;
box-shadow: 2px 2px 3px grey;
          font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;  
}


/* Middlecontent3b */
div.Middlecontent3breed {
background-color: linen;
        position: relative;
        float:left;
        padding: 8px;
        margin-left 44px;
width: 750px;
        max-width: 100%;
        text-align: center;
        border: 3px outset grey;
        border-radius: 8px;
box-shadow: 2px 2px 3px grey;
          font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;  
}


div.PlatteTekst {
	margin: 50px;

      text-align: left;
}

div.Alineakop {
margin-top:20px;
weight:bold;
color:red;
}


/* headerrightcontent */
div.headerrightcontent {
        padding: 8px;
        float:right;
        margin: 0px auto;  
        width:10px;

} 

/* footercontent */
div.footercontent {
        width:100%;                    
}


 /* unvisited link */
a:link {
  color: grey;
}

/* visited link */
a:visited {
  color: grey;
}

/* mouse over link */
a:hover {
  color: blue;
}

/* selected link */
a:active {
  color: blue;
} 


div.Snaar {
        float:left;
}
      
div.kleurblok {
        float:left;
        width:30px;
        height:32px;
        border: 1px outset grey;


    text-shadow: -0.25px 0 4px white, 0 0.25px 4px white,
      0.25px 0 4px white, 0 -0.25px 4px white;
        }   

div.kleurblok2 {
        float:left;
        width:30px;
        height:32px;
        border: 1px outset grey;
        }  


div.kleurblokLangwerpig {
        position: relative;
  float:left;
        height:auto;
        border: 1px outset grey;
        padding: 5px;

        }

div.kleurblokhalf {
        float:left;
        width:29px;
        height:20px;
        border: 1px outset grey;
        color: white;
  		font-size: 10px;
        } 

div.akkoordblok {
        float:left;
        width:85px;
        height:20px;
        }   
        

div.Scheidingsblok {
        float:left;
        width:1px;
        height:32px;
        border: 2px outset black;
        }   	
        
div.Scheidingsblokbrug {
        float:left;
        width:1px;
        height:32px;
        border: 2px outset black;
        }   
div.Snaarnaam {
        float:left;
        width:40px;
        height:32px;
        }   	

div.VorigeToonladder
{
        float:center;
        }   

div.TussenBlokje {
background-color: ; 
height: 20px; 
width: 4px;
margin-top: 60px; 
color: lightgrey;

}


div.binair {
        float:left;
        width:110px;
          height:25px;
        font-size:15px;
          background-color:#000000;
           margin: auto;
  text-align: center;
        } 

div.binaire {
          float:left;
        width:110px;
          height:75px;
           margin: auto;
  text-align: center;
        } 

div.kop {
          float:left;
        width:110px;
          height:35px;
           margin: auto;
  text-align: center;
}

div.dec {
        float:left;
        width:35px;
        height:75px;
    text-align: center;
        } 


div.IANS {
          float:left;
        width:110px;
          height:20px;
        background-color:#C0C0C0;
           margin: auto;
  text-align: center;
        } 

div.FYS {
          float:right;
        width:110px;
          height:20px;
        background-color:#C0C0C0;
           margin: auto;
  text-align: center;
        } 

div.ZOEKMACHINES {
      
        width:110px;
          height:20px;
        background-color:#C0C0C0;
           margin: auto;
  text-align: center;
        } 


// De Divs bij de toonomschrijvingen
.A1{
    width:100px;
    background-color:;
    text-align: right;
    margin-right:10px;
    font-weight:bold;
    margin-bottom:5px;
    float:left;
}

.A2{
   width:245px; 
   float:left;
   background-color:;
   text-align: left;
   margin-bottom:5px;
}
.A3{
   width:99%; 
   float:none;
   background-color:;
   margin-bottom:5px;
}


    #basis {
background-color: red;
height:80px;
    }

#HiddenText{
display:none;
width:450px;
background-color: ;
text-align: center; 
    float:left; 
    margin:20px; 
    margin-top:0px;
    background-image: url('pla/Doorzichtig.png');
    background-repeat:no-repeat;

}
#bron {
    background-color: ;
    width:120px;
    float:left; 
    }

#bron:hover + #HiddenText {
    display:block;
}