﻿/* CSS-sheet voor www.eddenouden.nl, gemaakt door Ed den Ouden, versie 6.0 */

/* adaptive layout, de tegels */
.boxsizing {
	box-sizing: border-box;
}
.row::after {
	content: "";
	clear: both;
	display: block;
}
[class*="col-"] {
	float: left;
	padding: 5px;
}
.header {
	background-color: #ffffff;
	color: #000080;
	padding: 5px;
}
.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.menu li {
	padding: 5px;
	background-color : #38558F; /* was 000080 en 003399 */;
	color: #ffffff;
	margin-bottom: 5px;
	border-style: solid;
	border-color: #999999;
	border-width: 1px;
}
.menu li:hover {
	background-color: #659FCB; /* was 0099cc */
}
.aside ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.aside li {
	padding: 5px;
	background-color: #e9e9e9;
	color: #ffffff;
	margin-bottom: 5px;
	border-style: solid;
	border-color: #c0c0c0;
	border-width: 1px;
}
.aside li:hover {
	background-color: #f5f5f5;
}
.footer {
	background-color: #c0c0c0;
	padding: 5px;
	color: #ffffff;
	border-style: solid;
	border-color: #999999;
	border-width: 1px;
}
/* gangbare schermen in pixels breedte */
/* tablet 768, IPhone 6 1080, Samsing S7 1440 */
/* 15 inch laptop 1366 */
/* 17 inch laptop 1600 */
/* 21 inch desktop 1920 */
/* adaptive layout, size voor smartphones: */
[class*="col-"] {
	width: 100%;
}
/* adaptive layout, size voor tablets */
@media 
{
.col-m-1 {
	width: 8.33%;
}
.col-m-2 {
	width: 16.66%;
}
.col-m-3 {
	width: 25%;
}
.col-m-4 {
	width: 33.33%;
}
.col-m-5 {
	width: 41.66%;
}
.col-m-6 {
	width: 50%;
}
.col-m-7 {
	width: 58.33%;
}
.col-m-8 {
	width: 66.66%;
}
.col-m-9 {
	width: 75%;
}
.col-m-10 {
	width: 83.33%;
}
.col-m-11 {
	width: 91.66%;
}
.col-m-12 {
	width: 100%;
}
}
/* adaptive layout, size voor normale schermen (PC en laptop) */
@media 
{
.col-1 {
	width: 8.33%;
}
.col-2 {
	width: 16.66%;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.33%;
}
.col-5 {
	width: 41.66%;
}
.col-6 {
	width: 50%;
}
.col-7 {
	width: 58.33%;
}
.col-8 {
	width: 66.66%;
}
.col-9 {
	width: 75%;
}
.col-10 {
	width: 83.33%;
}
.col-11 {
	width: 91.66%;
}
.col-12 {
	width: 100%;
}
}
/* adaptive layout, breedte kopfoto altijd 100% */
.kopfotoresize {
	width: 100%;
	height: auto;
}
/* huisstijl */
html {
	font-family: "Verdana", Verdana, Sans-serif;
	font-size: 10pt;
}
img {
	margin: 1px;
	border-style: solid;
	border-color: #c0c0c0;
	border-width: 1px;
}
.geenborder {
	border-style: none;
}
.celachtergrond {
	background-color: #F5F5F5;
	color: #000080;
}
.celachtergrond2 {
	background-color: #F5F5F5;
	color: #666666;
}
/* google vindt vanaf 8px prima */
.spacingtbvmobilebuttons {
	margin-top: 10px;
	margin-bottom: 10px;
}
/* standaardlinks */
a:visited {
	color: #0099CC;
	text-decoration: none;
}
a:link {
	color: #0099CC;
	text-decoration: none;
}
a:active {
	color: #000080;
	text-decoration: none;
}
a:hover {
	color: #000080;
	text-decoration: none;
}
/* linkskopmenu */
a.kopmenulink:visited {
	color: #E9E9E9;
	text-decoration: none;
}
a.kopmenulink:link {
	color: #E9E9E9;
	text-decoration: none;
}
a.kopmenulink:active {
	color: #000080;
	text-decoration: none;
}
a.kopmenulink:hover {
	color: #000080;
	text-decoration: none;
}
/* logo */
.koptekst1 {
	color: #000080;
	font-weight: bold;
}
.koptekst2 {
	color: #595959;
	font-weight: bold;
}
.koptekst3 {
	font-size: large;
	color: #4472C4;
	text-align: center;
}
/* tekstopmaak */
p {
	font-size: 9pt;
	color: #666666;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 10;
}
h1 {
	font-size: 9pt;
	color: #000080;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 10;
}
h2 {
	font-size: 9pt;
	color: #333333;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 10;
}
h3 {
	font-size: 9pt;
	color: #000080;
	font-weight: normal;
	font-style: italic;
	margin-top: 0;
	margin-bottom: 10;
}
h4 {
	font-size: 9pt;
	color: #333333;
	font-weight: normal;
	font-style: italic;
	margin-top: 0;
	margin-bottom: 10;
}
h5 {
	font-size: 9pt;
	color: #666666;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 10;
}
h6 {
	font-size: 9pt;
	color: #666666;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 10;
}
body {
	font-size: 9pt;
	color: #666666;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 10;
}
table {
	color: #666666;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 10;
}
td {
	vertical-align: top;
	text-align: left;
}
tr {
	vertical-align: top;
	text-align: left;
}
.celcenter {
	vertical-align: bottom;
	text-align: center;
}
.opvallen1 {
	color: #0099CC;
}
.opvallen2 {
	color: #CC0000;
}
.opvallen3 {
	color: #009900;
}
.opvallen4 {
	color: #FF6600;
}
.opvallen4centreren {
	color: #FF6600;
	text-align: center;
}

/* positionering */
.centreren {
	text-align: center;
}
.linksuitlijnen {
	text-align: left;
}
.rechtsuitlijnen {
	text-align: right;
}
.inspringen {
	margin-left: 10px;
}
/* opmaak invoervelden */
input {
	font-family: Verdana;
	font-size: 8pt;
	color: #666666;
}
option {
	font-family: Verdana;
	font-size: 8pt;
	color: #666666;
}
textarea {
	font-family: Verdana;
	font-size: 8pt;
	color: #666666;
}
select {
	font-family: Verdana;
	font-size: 8pt;
	color: #666666;
}
button {
	font-family: Verdana;
	color: #000080;
}
/* opmaak prive blogs */
.onderstrepen {
	text-decoration: underline;
}
.boldgrijs {
	font-weight: bold;
	color: #333333;
}
.cursiefkop3 {
	font-style: italic;
}
.blauw {
	color: #000080;
}
.bijschriftfoto {
	font-size: 8pt;
	color: #666666;
	text-decoration: none;
	text-align: center;
	top: 0px;
}
.titel {
	font-size: large;
	color: #000099;
	text-decoration: none;
	text-align: center;
	top: 0px;
}
.achtergrondgrijs {
	background-color: #F4F4F4;
}
.achtergrondgroen {
	background-color: #CAFFFF;
}
.achtergrondblauw {
	background-color: #D5F1FF;
}
.achtergrondlichtblauw {
	background-color: #E6F7FF;
}
.achtergrondrood {
	background-color: #FFE6E6;
}
.achtergrondoranjecel {
	background-color: #FFE7D7;
	text-align: center;
}
.achtergrondgroencel {
	background-color: #CEFFCE;
	text-align: center;
}
.achtergrondroodcel {
	background-color: #FFDFDF;
	text-align: center;
}
.tabelborder {
	border: 1px solid #999999;
}
.scrabbleletters {
	border-width: 0px;
	width: 30px;
	height: 30px;
}
.scrabbleletters30 {
	border-width: 0px;
	width: 30px;
	height: 30px;
}
.scrabbleletters40 {
	border-width: 0px;
	width: 40px;
	height: 40px;
}
.scrabbleletters50 {
	border-width: 0px;
	width: 50px;
	height: 50px;
}
.inspringen25px {
	margin-left: 25px;
}
