button {
    background-color: #000000; color: #FFFFFF;
    text-align: center; text-decoration: none;
    padding: 0.2em 1em; margin: 4px 2px; display: inline-block; 
    font-size: 1em; font-weight: bold; cursor: pointer;
}

.button, input[type="submit"] {
	border: 1px solid; border-color: #8A774F; font-weight: normal; font-size: 1em;
	color: #8A774F; cursor: pointer; background-color: #FFFFFF; margin-top: 1em;
}

a { text-decoration: none; cursor: pointer; }
a:link { color: #bb7f11; }
a:visited { color: #bb7f11; }
a:hover { color: #BE311A; }
a:active { color: #bb7f11; }

/* a:visited a:hover a:active */

/*
** First ensure that all HTML elements have the box-sizing property set to border-box.
** This makes sure that the padding and border are included in the total width and height of the elements.
*/

* { box-sizing: border-box; }

/*
** If the max-width property is set to 100%, the image will scale down if it has to,
** but never scale up to be larger than its original size
*/
img, video { max-width: 100%; height: auto; }

/* Test img { outline: #00FF00 solid thick; } *?

/*
**The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page,
** and other elements will be placed as if the columns does not exist.
** To prevent this, we will add a style that clears the flow
*/
.row::after { content: ""; clear: both; display: block; vertical-align: bottom; }

/* Ter test beg **
** [class^="col-"] { float: left; padding: 25px; border: 1px solid blue; background-color: lime; }
** body { border: 1px solid red; margin-left: 0px; }
** .header, .footer { border-style: solid; border-width: 2px; border-color: yellow; }
** .row::after { border: solid; border-width: 2px; border-color: pink; }
** Ter test end */

/* nope vernachtelt de gouden achtergrondkleur in de padding
** .row { width: 100%; background-color: #000000; margin: 0px; padding-left: 1em; display: inline-block; vertical-align: bottom; }
*/

.col-heel { width: 100%; }

[class^="col-"] { float: left; }

/* mobile devices */
[class^="col-"] { width: 100%; }

@media only screen and (min-width: 768px) {
	.col-half { width: 50%; }
	.col-derde { width: 33.33%; }
}

.CelLinks { padding: 10px 10px 10px 0; }
.CelRechts { padding: 10px 0 10px 10px; }
.CelTussen { padding: 10px 5px 10px 5px; }

.KnopLinks { padding: 0px 10px 0px 0; }
.KnopRechts { padding: 0px 0 0px 10px; }
.KnopTussen { padding: 0px 5px 0px 5px; }

.content { color: #000000; background-color: #FFFFFF; padding: 10px;}

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em; color: #000000;

	background-color: #8A774F;
	/* TMP Ter migratie-herkenning background-color: #eeccff; */

	/* background-image: url('background.jpg'); background-position: top center; */
	text-align: left; /* text-align: justify; */
	width: 100%;
	padding: 0px;
}

@media only screen and (min-width: 1180px) {
	body { width: 1180px; margin-left: auto; margin-right: auto; }
}

/* de stijlen mbt floaten */
.Left { float: left; }
.Right { float: right; }
.Clear { clear: both; }

figure { display:table; }
figure.Right { float: right; margin: 5px 0 5px 5px; }
figcaption { display:table-caption; caption-side:bottom; font-size: 0.8em; font-style: italic; }

/* navigatie icons */
ul.NavIcons { display: inline; white-space: nowrap; margin-top: 0; margin-bottom: 0 }
ul.NavIcons li { display: inline-block; float: left; list-style-type: none; background-image: none; }
li.topline { border-style: solid; border-color: #FFFFFF; border-width: 10px 0 0 0; width: 25%;  }

ul.NavIcons li a { display: block; margin: 0 0 0 0; text-indent: 0px; }

/* font-size 0 levert geen witruimte voor spaties in de html-code, bij li kun je weer een grootte opgeven */
ul.HorNavIcons  { display: inline; margin: 0; padding: 0; font-size: 0px; }
ul.HorNavIcons li { display: inline-block; float: left; list-style-type: none; background-image: none; font-size: 1em; }
ul.HorNavIcons li.vierde { max-width: 25%; }
ul.HorNavIcons li.derde { max-width: 33.33%; }


/* Zo loopt het logo er niet uit. Waarom niet?? */
.header, .footer { width: 100%; background-color: #000000; margin: 0px; padding-left: 1em; display: inline-block; vertical-align: bottom; }
.footer { padding: 1em; color: #FFFFFF; }


/*[class^="col-"] { float: left; padding: 05px; border: 0px solid blue; background-color: lime; }*/

/* .navbutton { text-indent: 0; display: inline-block; margin: 0; padding: 20; background-color: #000000; color: #FFFFFF; font-size: 1.5em; font-weight: bold; } */
/* li.NavCon { font-size: 2em; width: 25%; } */
/* test li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } */
/* ul.NavIcons li a { display: block; margin: 0 10px 0 0; text-indent: -99999px; height: 56px; width: 48px; }*/
/* ul.NavIcons li a { display: block; margin: 0 0 0 0; text-indent: 0px; height: 56px; }*/

/*
** ul.NavIcons li a.Twitter { background: transparent url("../images/nav/twitter.gif"); }
** ul.NavIcons li a.Facebook { background: transparent url("./images/nav/facebook.gif"); }
** ul.NavIcons li a.Instagram { background: transparent url("./images/nav/instagram.gif"); }
*/

/*
** ul.NavIcons li a.Join { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
** ul.NavIcons li a.Mgz { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
** ul.NavIcons li a.Faq { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
** ul.NavIcons li a.Con { background: transparent url("../images/nav/contact.gif"); text-indent: -99999px; }
*/

/*.header { width: 100%; background-color: #000000; margin: 0px; padding-left: 10em; display: block; }*/

h1 { font-size: 1.5em; padding: 0 0 0 0; margin: 0.5em 0 0.5em 0; }
h2 { font-size: 1.2em; padding: 0 0 0 0; margin: 0 0 0 0; } 
p { padding: 0 0 0 0; margin: 0 0 1em 0; } 
.smalltext { font-size: 0.8em; font-style: italic; }