:root
{
    --hoofdachtergrond: #ececec;
    --menuachtergrond: #fafafa;
    --zwarteranden: #d0d0d0;
    --achtergrond: #ffffff;
    --tekst: #222222;
    --standaardlink: #336699;
}

.DonkereModus
{
    --hoofdachtergrond: #181818;
    --menuachtergrond: #202020;
    --zwarteranden: #303030;
    --achtergrond: #222222;
    --tekst: #e5e5e5;
    --standaardlink: #66a3d2;
}

/* Standaard */ 
a:link, a:visited { color: var(--standaardlink); text-decoration: underline; }
a:hover, a:active { color: #ab0102; text-decoration: none; }

/* Black */ 
a.b:link, a.b:visited { color: var(--tekst); text-decoration: underline; }
a.b:hover, a.b:active { color: #ab0102; text-decoration: none; }

/* Menu */ 
a.menu:link, a.menu:visited { color: var(--tekst); text-decoration: none; }
a.menu:hover, a.menu:active { color: #ab0102; text-decoration: underline; }

/* Red */ 
a.r:link, a.r:visited { color: #ab0102; text-decoration: underline; }
a.r:hover, a.r:active { color: #ab0102; text-decoration: none; }

/* Black-solid */ 
a.bs:link, a.bs:visited, a.bs:hover, a.bs:active { color: var(--tekst); text-decoration: none; }

/* InText */ 
a.intext:link, a.intext:visited { color: #0288d1; text-decoration: underline; }
a.intext:hover, a.intext:active { color: #0288d1; text-decoration: none; }

/* Logo */ 
a.logo:link, a.logo:visited, a.logo:hover, a.logo:active { color: #fff200; text-decoration: underline; }

/* LogoSmall */ 
a.logosmall:link, a.logosmall:visited, a.logosmall:hover, a.logosmall:active { color: #ffffff; text-decoration: none; }

/* button Link */ 
a.buttonlink:link, a.buttonlink:visited, a.buttonlink:hover, a.buttonlink:active { display: block; width: 100%; }

/* Emoticon */ 
a.emo:link, a.emo:visited { color: #ab0102; font-size: 20px; text-decoration: none; cursor: pointer; }
a.emo:hover, a.emo:active { color: #ab0102; font-size: 24px; text-decoration: none; cursor: pointer; }

body
{
background: var(--hoofdachtergrond);
background-repeat: repeat;
width: 1250px;
height: 100%;
margin: 0 auto;
font-family: Roboto, sans-serif;
font-size: 16px;
color: var(--tekst);
line-height: 175%;
}

h1, p {
  margin: 0;
  font: inherit;     /* neemt het font over van de parent */
  font-size: inherit;
  font-weight: inherit;
}

.logotxtbig, .logotxtsmall	{ font-family: Trebuchet MS; font-weight: bold; text-shadow: 5px 2px 2px #000000; letter-spacing: 2px; }
.logotxtbig				{ font-size: 44px; color: #f9f300; padding-left: 10px; padding-top: 5px; }
.logotxtsmall			{ font-size: 22px; color: #ffffff; padding-left: 70px; padding-top: 5px; }

.header
{
    display: flex;
    align-items: center;

    background: linear-gradient(to bottom, #a50000 0%, #8b0000 100%);
    border: 1px solid var(--zwarteranden);
    margin: 0 0 10px 0;

    min-height: 103px;
}
@media (max-width: 768px)
{
    .header
    {
        min-height: 50px;
    }
}

.headerleft
{
    flex: 1;
}

.headerright
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ButtonModus,
.ButtonMenu
{
    cursor: pointer;
    width: 27px;
    height: 21px;

    align-self: flex-start;
    margin-top: 5px;
}
.ButtonMenu
{
    display: none;
}
@media (max-width: 768px)
{
    .ButtonMenu
    {
        display: block;
    }
}
.mainmenu		{ float: left; width: 250px; }
.menublock		{ width: 240px; height: auto; padding-top: 5px; margin-bottom: 5px; background: var(--menuachtergrond); border: 1px solid var(--zwarteranden); box-sizing: border-box; }
.maincontent	{ float: left; width: 1000px; min-height: 1000px; padding: 5px; background: var(--achtergrond); border: 1px solid var(--zwarteranden); box-sizing: border-box; }

.vet, .tab	{ width: 100%; clear: both; margin-bottom: 8px; }
.vet		{ font-weight: bold; }
img		{ border-width: 0px; }
.nobm	{ margin-bottom: 0px; }
.sr		{ color: #ab0102; font-size: 12px; }
.txtcenter	{ text-align: center; }
.floatright	{ float: right; }
.txtheader	{ font-size: 20px; text-align: center; }

.r10l { float: left; width: 10%; }
.r15l { float: left; width: 15%; }
.r20l { float: left; width: 20%; }
.r25l { float: left; width: 25%; }
.r30l { float: left; width: 30%; }
.r35l { float: left; width: 35%; }
.r40l { float: left; width: 40%; }
.r45l { float: left; width: 45%; }
.r50l { float: left; width: 50%; }
.r55l { float: left; width: 55%; }
.r60l { float: left; width: 60%; }
.r65l { float: left; width: 65%; }
.r70l { float: left; width: 70%; }
.r75l { float: left; width: 75%; }
.r80l { float: left; width: 80%; }

input[type=TEXT], input[type=PASSWORD], TEXTAREA, select
{
background: #ffffff;
border: 1px solid black;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
font-family: Arial, Helvetica, Sans-Serif;
height: 25px;
margin-top: 5px;
margin-bottom: 5px;
}

input[type=CHECKBOX]
{
background-color: #ffffff;
border: 1px solid black;
border-radius: 5px;
box-sizing: border-box;
}

input[type=SUBMIT]
{
background: #eaeaea;
border: 1px solid black;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
font-family: Arial, Helvetica, Sans-Serif;
height: 25px;
margin-top: 5px;
margin-bottom: 5px;
}

.imgintext1
{
float: right;
width: 250px;
height: 250px; 
border: solid 1px black;
margin-bottom: 10px;
margin-left: 10px;
}

.whiteblock,
.transblock,
.redblock,
.greenblock,
.greyblock
{
    margin: 1px;
    padding: 4px;
    border-radius: 5px;
    text-decoration: none;
    width: auto;
    min-height: 20px;
    clear: both;
}
.whiteblock
{
    border: 1px solid #e2e2e2;
    background: var(--achtergrond);
    color: var(--tekst);
}

.transblock
{
    border: 1px solid transparent;
    background: var(--achtergrond);
    color: var(--tekst);
}

.redblock
{
    border: 1px solid #e3b4b4;
    background: #fdf0f0;
    color: #222;
}

.greenblock
{
    border: 1px solid #b8d8b8;
    background: #f2faf2;
    color: #222;
}

.greyblock
{
    border: 1px solid #d8d8d8;
    background: #f8f8f8;
    color: #222;
}

.hetverhaal		{ border: 0px; padding: 4px;	}

.profilethumb
{
width: 200px;
height: 200px;
border-radius: 5%;
border: 1px solid black;
box-sizing: border-box;
margin-left: 5px;
margin-right: 5px;
display: block;
}

.profilethumbdiv
{
font-size: 12px;
display: inline-block;
margin-bottom: 10px;
}

.txt_tip
{
outline: none;
position: relative
}

.txt_tip span
{
z-index: 10;
position: absolute;
display: none;
padding: 2px;
font-size: 13px;
color: #000000;
background: #fafafa;
text-decoration: none;
width: 500px;
height: auto;
border: 1px solid black;
box-shadow: 3px 3px 5px 0px #888888;
text-overflow: ellipsis;
border-radius: 5px;
padding: 5px;
}

.txt_tip.Overzicht 
{
float: left;
width: auto;
}

.txt_tip:hover span
{
display: block;
}

.txt_tip span
{
top: 15px;
}

.txt_tip.Overzicht span
{
left: 200px;
}

.txt_tip.LaatsteReacties span
{
left: 100px;
}

.profielfotopopup
{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.profielfotopopup img {
    max-width: 75vw;
    max-height: 75vh;
    width: auto;
    height: auto;
}

.ppround,
.ppround75
{
    float: left;
    margin: 0 10px 10px 0;
    border-radius: 50%;
    border: 1px solid #E8E8E8;
}

.ppround
{
    width: 50px;
    height: 50px;
}

.ppround75
{
    width: 75px;
    height: 75px;
}

@media (max-width: 768px)
{
	body
	{
		width: auto;
	}

	.logotxtbig
	{
		font-size: 32px;
		padding-left: 25px;
	}

	.logotxtsmall
	{
		font-size: 16px;
		padding-left: 75px;
	}

	.header
	{
		height: 65px;
		width: 100%;
	}
	.headerright
	{
		display: none;
	}

	.mainmenu
	{
		position: absolute;
		left: 0;
		top: 65px;
		display: none;
	}

	.maincontent
	{
		width: auto;
		padding: 2px;
		border: 0;
	}

	.profilethumb
	{
		width: 150px;
		height: 150px;
	}

	.imgintext1
	{
		width: 150px;
		height: 150px;
	}
}