/* This is the css for the table handling*/


* {
    box-sizing: border-box;
}

body {
    margin: 0;

    background-color: white;
    color: black;

/*font-family: "Open Sans", arial, tahoma;*/

font-family:   Calibri;
font-size:18px;
      font-weight:100;
      -webkit-font-smoothing:antialiased;
}


img {max-width:100%;}


h1{
    font-family:"Calibri;
      font-weight:100;
      -webkit-font-smoothing:antialiased;
font-size:30px;
 margin-top: 0px;
color:black;
text-align: left;}

h2{
font-size:24px; margin-top: 15px;color:black;text-align: left;}

h3{
font-size:22px; margin-top: 30px;color:black;text-align: left;}






* {
  box-sizing: border-box;
}

.menu {
  float:left;
  width:25%;
  text-align:center;
  padding:40px;
  text-align:justify;
}
.menuitem {
  background-color:light-gray;
  padding:8px;
  margin-top:7px;
}
.main {
  float:left;
  width:50%;
  padding:0px; 
  padding-right:50px; 
  text-align:justify;"
}
.advert{

  float:left;
  width:25%;
  padding:15px;
  padding-right:80px; 
  margin-top:7px;
  text-align:justify;
}

.container{

float:left;

}

.tab-left{

float:left;
width: 55%;

}

.tab-right{
height: auto;
width: 45%;
float:right;
font-size:18px;
padding:20px;
padding-top:0px;
text-align: justify;

}


/* Style the spacer */
.spacer {
    background-color: darkgray;
    width: 100%;
    height: 500px: 
    padding-top: 0px;
    text-align: center;


}


.box{

float:left;
height: auto;

}




.button-left{

float:left;
width: 40%;
height: auto;

}

.button-right{
height: auto;
width: 60%;
float:right;
font-size:18px;
padding:20px;
text-align: justify;

}





.duo-box{

float:left;
width: 100%;
background-color:lightgray;
}


.column-A{
height: auto;
width: 50%;
float:left;
font-size:18px;
padding:20px,20px,20px,200px;

text-align: right;

}


.column-B{
height: auto;
width: 50%;
float:left;
font-size:18px;
padding:100px;
padding-top:40px;
text-align: justify;

}



.column-3{
height: auto;
width: 34%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}


.triptych-box{

float:left;
width: 100%;
background-color:gray;
}


.column-1{
height: auto;
width: 34%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}


.column-2{
height: auto;
width: 32%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}



.column-3{
height: auto;
width: 34%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}





.fineprint-box{

float:left;
width: 100%;
background-color:gray;
}


.column-a{
height: auto;
width: 25%;
float:left;
font-size:18px;
padding:20px;
padding-right:110px;
text-align: justify;

}


.column-b{
height: auto;
width: 25%;
float:left;
font-size:18px;
padding:20px;
padding-right:110px;
text-align: justify;

}



.column-c{
height: auto;
width: 25%;
float:left;
font-size:18px;
padding:20px;
padding-right:110px;
text-align: justify;

}



.column-d{
height: auto;
width: 25%;
float:left;
font-size:18px;
padding:20px;
padding-right:110px;
text-align: justify;

}






  /* start css for single buttons*/
.knoppie {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 22px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.knoppie:hover {
	text-decoration: none;
}
.knoppie:active {
	position: relative;
	top: 1px;
}


.sidebutt {
	color: #fef4e9;
	border: solid 1px #333333;
	background: #333333;
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#333333));
	background: -moz-linear-gradient(top,  #333333,  #333333);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#333333');
}
.sidebutt:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(darkgray), to(darkgray));
	background: -moz-linear-gradient(top,  darkgray,  darkgray);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='darkgray', endColorstr='darkgray');
}
.sidebutt:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}





#menu_wrap 
{width:100% ; }


a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}
a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}

a.black:link {color: black;text-decoration:none; }
a.black:active {color: black;  text-decoration:none;}
a.black:visited {color: black; text-decoration:none; }
a.black:hover {color: black; text-decoration:none;opacity: 0.6;}

a.area:link {color: white;text-decoration:none; }
a.area:active {color: red;  text-decoration:none;}
a.area:visited {color: white; text-decoration:none; }
a.area:hover {color: pink; text-decoration:none;opacity: 0.6;}

a.sitemap:link {color: darkgray;text-decoration:none; }
a.sitemap:active {color: black;  text-decoration:none;}
a.sitemap:visited {color: darkgray; text-decoration:none; }
a.sitemap:hover {color: black; text-decoration:none;opacity: 0.6;}

a.navy:link {color: MidnightBlue;text-decoration:none; }
a.navy:active {color: blue;  text-decoration:none;}
a.navy:visited {color: MidnightBlue; text-decoration:none; }
a.navy:hover {color: BlueViolet; text-decoration:none;opacity: 0.6;}


a.wow:link {color: turquoise;text-decoration:underline; text-decoration:underline;font-size:26}
a.wow:active {color: turquoise;  text-decoration:none;font-size:26}
a.wow:visited {color: turquoise; text-decoration:underline;font-size:26}
a.wow:hover {color: yellow; text-decoration:none;opacity: 0.6;font-size:26}


a.wow-big:link {color: turquoise;text-decoration:underline; text-decoration:underline;font-size:32}
a.wow-big:active {color: turquoise;  text-decoration:none;font-size:32}
a.wow-big:visited {color: turquoise; text-decoration:underline;font-size:32}
a.wow-big:hover {color: yellow; text-decoration:none;opacity: 0.6;font-size:32}






  

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

.main {
  float:left;
  padding:15px; 
  padding-right:80px; 
  text-align:justify;"
}

  }

  

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

  .menu, .main, .advert {
    width:100%;
  }

  .tab-left, .tab-right {
    width:100%;
  }

  }


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


.main {
  float:left;
  padding:15px; 
  padding-right:15px; 
  text-align:justify;"
}


.advert{

  float:left;
  padding:15px;
  padding-right:15px; 
  margin-top:7px;
  text-align:justify;
}


.column-A{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px,20px,20px,200px;

text-align: right;

}


.column-B{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:50px;
text-align: justify;

}

.column-1{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}


.column-2{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}



.column-3{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}


.column-a{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}


.column-b{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}



.column-c{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}



.column-d{
height: auto;
width: 100%;
float:left;
font-size:18px;
padding:20px;
text-align: justify;

}







}




<!-- With the following code, you can apply the centerImage class to an <img> tag without having to nest it in a block-level element. 
This method works for multiple images. -->

<style type="text/css">       
.centerImage
{
text-align:center;
display:block;
}
</style>

<!-- For exmaple use:
<img src="logo.gif" class="centerImage" alt="CH Logo" height="120" width="350">
-->


<style>       
.headerImage
{
display:block;
border: 0;
<!--text-align: center;  -->
}
</style>


 <style>
img {
    max-width: 100%;
    height: auto;
}
</style>

<!-- For exmaple use:
<img alt="Cape Dutch Architecture"  class="headerImage" src="logocapedutch-smartphone.jpg">
-->

<!-- End of CCS Template -->











/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 50px;
    text-align: center;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 25.00%;
    padding: 50px;
    <!-- <height: 300px; /* Should be removed. Only for demonstration */ -->
}







/* Style the footer */
.footer {
    background-color: #4d4d4d;
    padding-top: 30px;
    text-align: center;


}






/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
    }
}