/* Layout kookboekenbeschrijvingen*/
* {
    box-sizing: border-box;
}

/* Add a  background color*/
body {
    font-family: Verdana;
    background: #000037;
}

/* Header/Blog Title */
.header {      
    width:100%;
    position: relative;  
    background-color:#C8DCEC;
    padding: 5px; 
    text-align: center;
    font-family: Verdana; 
	font-size: 10pt;     
}

/* border in de header en de rest*/
#border1 {
    border: 3px solid  #C0C0C0;
    padding: 5px;
}

/* Header/Blog Title: ; de header bij grote schermen versmallen */
/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    .header {width: 65%;
    text-align: center;
         font-family: Verdana; 
	 font-size: 10pt;  
      background-color:#C8DCEC;
      padding: 5px; }
}  
/*kolommen gelijke hoogte houden door in één blok -container te doen te doen, geldt voor 2, 3, 4 kolommen */
.column-container {
  display: table;
  width: 100%;
}

.column {
  float: left;
  width: 99%;
}
.left {
  width: 30%;
 
}

.right {
  width: 69%;
  margin-left: 5px;
 
}
/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  padding: 5px;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
 
/* Create two unequal columns that floats next to each other: indexpagina,kolommen zonder tabellen*/
/* Left column */
.leftcolumn {   
    float: left;
    width: 30%;
    background-color:#C8DCEC;   
}

/* Right column  */
.rightcolumn {
    float: left;
    width: 69%;
    background-color:#C8DCEC;
}

/* zorgt er voor dat allebei de kolommen even hoog zijn, maar het is niet responsive bij ongeveer 368 */
    .row  
    {width: 100%;  content: ""; 
    display: table;background-color:#C8DCEC;
    clear: both;}
    
/* Clear floats after the columns, ??????? */

.row:after {
    content: "";
    display: table;  clear: both;
}
    
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other, voor telefoontjes */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;}
}
/* NIEUW */
.col-12 {float: left; width: 100%; background-color:#C8DCEC;}
    
/* Extra large devices (large laptops and desktops, 1400px and up) kolom versmallen bij grote schermen */
@media only screen and (min-width: 1400px) {
    .row {width: 65%;  content: "";
    display: table;background-color:#C8DCEC;
    clear: both;}
}

/* Add a card effect for articles , met tekstblokken werken, die je in de kolommen plaatst*/
.card {
     background-color:#C8DCEC;
     padding: 5px;
     margin-top: 5px;
     margin-left: 5px;  
     margin-bottom: 5px;
     font-family: Verdana; 
	 font-size: 10pt; 
	 text-align: left;
}
/* Float 2 columns side by side */
.column2 {
  float: left;
  width: 49.9%;
  padding: 5px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards, kleur was  C8DCEC*/
.card2 {
  background-color:#;
  padding: 20px;
  
  font-family: Verdana; 
  font-size: 10pt; 
  text-align: left;
  width: 100%; 
}


/* Float 3 columns side by side */
.column3 {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column3 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards, kleur was  C8DCEC*/
.card3 {
  background-color:#;
  padding: 20px;
  
  font-family: Verdana; 
  font-size: 10pt; 
  text-align: left;
  width: 100%; 
}


/* Float 4 columns side by side */
.column4 {
  float: left;
  width: 24.9%;
  padding: 5px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column4 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards, kleur was  C8DCEC*/
.card4 {
  background-color:#;
  padding: 5px;
  font-family: Verdana; 
  font-size: 10pt; 
  text-align: left;
  width: 100%; 
}

/* Float 5 columns side by side */
.column5 {
	float: left;
	width: 20%;
	padding: 5px; 
}


/* Responsive columns */
@media screen and (max-width: 600px) {
  .column5 {
    width: 100%;
    display: block;
    margin-bottom: 20px; 
  }
}
/* Style the counter cards, kleur was  C8DCEC*/
.card5 {
  background-color:#;
  padding: 5px;
  font-family: Verdana; 
  font-size: 10pt; 
  text-align: left;
  width: 100%; 
}

/* Footer */
.footer {
    width:100%;
    padding: 10px;
    text-align: center;
    background-color:#C8DCEC;
    margin-top: 20px;
      font-family: Verdana; 
  font-size: 10pt; 
}

/* Footer voor groot scherm kolom versmallen*/
/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    .footer {
    width: 65%; 
    padding: 10px;
    text-align: center;
    background-color:#C8DCEC;
    margin-top: 10px;
    font-family: Verdana; 
  font-size: 10pt; }
}



/*  NU VOLGT DE GEWONE OPMAAK*/
/* table voor de titel van het boek*/
table#t01 {
  width: 100%; 

    font-family: Verdana; 
	font-size: 10pt;    
}
/* lettertypen, andere h1 */
h1 {
	color: #000037;
	font-family: Verdana; 
	font-size: 18pt; 
	font-weight: bold;
}

h2 {
	color: #000037;
	font-family: Verdana; 
	font-size: 14pt; 
font-weight: bold;
}

/* margin-top en bottom 0, omdat h3 anders te veel ruimte inneemt*/
h3 {
	color: #000037;
	font-family: Verdana; 
	font-size: 10pt; 
	font-weight: bold;
	margin-top: 0;
 	margin-bottom: 0;
}

h4 {
	color:  #4A79A6;
	font-family: Verdana; 
	font-size: 10pt; 
	font-weight: bold;
}
h5 {
	color:  #000037;
	font-family: Verdana; 
	font-size: 24pt; 	
}

img {
    max-width:100%;
    height: auto;
}