/* stylesheet */
/*            */

.mystyle { font-family: Arial; font-size: 10pt; color: #000000; }
.hide    { visibility:collapse; display:none; }

html     { height:100%; }
body     { font-family: Arial; font-size: 10pt; color: #000000;
           background-image:url('balk-brandweer-50.png'); 
	   background-repeat:repeat-x; 
	   background-position: bottom; 
	   background-attachment: fixed; }

p        { font-family: Arial; font-size: 10pt; color: #000000; }
p.titel  { font-weight: bold; text-align: center; margin-bottom: 0; margin-top: 0; }
p.small  { color: silver; font-size: 8pt; text-align: center; }

/*
H1    { color: firebrick;
        minimal-width: 570Px;
        background-color: #a2c3a2;
        border-bottom: 10px solid #3c5d3c;
        border-left: 5px solid #3c5d3c;
        border-radius: 20px;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 2px;
        padding-bottom: 2px;
        margin: 10px;
        display: inline-block;
}
*/

h1       { color: black; font-weight: bold; text-align: center; margin-bottom: 0; margin-top: 0; }
h2       { color: black; font-size: 10pt; font-weight: bold; text-align: center; margin-bottom: 0; margin-top: 5px; }

table    { border-spacing: 10px; }
td       { font-family: Arial; font-size: 10pt; color: #000000; padding: 10px; vertical-align: top; background-color: gray; }

ul       { width: 100%; margin: 0; padding: 0; list-style-type: none; }
li       { width: 100%; margin: 0; padding: 0; }

a:link, a:visited  { font-family: Verdana; font-size: 8pt; color: dimgray; text-decoration: underline; }
a:active, a:hover  { font-family: Verdana; font-size: 8pt; color: firebrick; text-decoration: none; }

li > a , .flip	 { display: block; padding: 0.5em; margin: 4; font-family: Verdana; font-size: 8pt; font-weight: bold;
		   text-decoration: none; text-transform:uppercase; text-align: center; line-height: 12px; letter-spacing: 0px;
        	   border-top: 1px solid lightgray; border-right: 1px solid lightgray; border-bottom: 1px solid black; border-left: 1px solid black;
	 	 }

a.menu:link,  a.menu:visited     { color: black; background-color: silver; }

li > .groen  { color: darkgreen; background-color: silver; }
li > .rood   { color: firebrick; background-color: silver; }
li > .blauw   { color: midnightblue; background-color: silver; }
li > .oranje  { color: orangered; background-color: silver; }

li > a:link  { text-decoration: none;; }
li > a:hover  { background-color: whitesmoke; }

a.menu:hover,  a.menuR:hover,  a.menuB:hover,  a.menuG:hover,  a.menuO:hover	{ background-color: whitesmoke; }
a.menu:active, a.menuR:active, a.menuB:active, a.menuG:active, a.menuO:active	{ background-color: whitesmoke; }

.lock:after { font-family: "Material Icons"; font-size: 18px; font-weight: normal; content: "\E899"; float: right; margin-right: 2px; }
.lock2:after { font-family: "Material Icons"; font-size: 18px; font-weight: normal; content: "\E897"; float: right; margin-right: 2px; }

fieldset { font-family: Arial; font-size: 12pt; color: #000000; }

img        { vertical-align:middle; z-index: -2; }
div.footer { position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; color: dimgray; z-index: -1; }

.flex-container {
        display: inline-flex;
        flex-direction: row;
	flex-wrap: wrap;
        }

.flex-container > div {
        width: 275px;
        padding: 5px;
        margin: 5px;
        display: flex;
        flex-direction: column;
        }

.flex-container > H2  { font-weight: bold; text-align: center; margin-bottom: 0; margin-top: 0; }

.flex-container > div > ul {
        background-color: grey;
        border: 1px solid #d0e1d0;
        border-radius: 15px;
        padding-top: 0px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        margin: 5px;
        display: inline-block;
        }

/* MENU */

button { border: none; }

.dropbtn {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    color: darkgreen;
    padding: 4px;
    font-size: 16px;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: floralwhite;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover { background-color: cornsilk; }

.dropdown:hover .dropdown-content { 
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: darkgreen;
    color: white;
    border: none;
}

/* Responsive */

@media screen and (max-width: 1200px) {
        .flex-container { flex-direction: row; flex-wrap: wrap; }
        .flex-container > div { width: 250px; }
}

@media screen and (max-width: 830px) {
        .flex-container { flex-direction: row; flex-wrap: wrap; }
        .flex-container > div { width: 240px; }
}

@media screen and (max-width: 800px) {
        .flex-container { flex-direction: row; flex-wrap: wrap; }
        .flex-container > div { width: 225px; }
}

@media screen and (max-width: 400px) {
        .flex-container { flex-direction: column; padding: 1px; margin: 0px; }
        .flex-container > div { width: 250px; }
}