:root
{
    --hoofdachtergrond: #edf2f7;
    --menuachtergrond: #ffffff;
    --zwarteranden: #d9e2ec;
    --achtergrond: #ffffff;
    --tekst: #2d3748;
    --standaardlink: #2563eb;
}

.DonkereModus
{
    --hoofdachtergrond: #121212;
    --menuachtergrond: #121212;
    --zwarteranden: #2a2a2a;
    --achtergrond: #121212;
    --tekst: #e0e0e0;
    --standaardlink: #0288d1;
}

/* 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: 1280px;

    margin: 0 auto;

    font-family: Roboto, sans-serif;
    font-size: 16px;
    color: var(--tekst);

    line-height: 180%;
}

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, sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,.5);
}

.logotxtbig
{
    font-size: 44px;
    color: #ffe600;
    letter-spacing: 1px;
    padding-left: 15px;
    padding-top: 10px;
}

.logotxtsmall
{
    font-size: 20px;
    color: #ffffff;
    padding-left: 70px;
    padding-top: 5px;
}

.headerwrapper
{
    overflow: hidden;
    min-height: 120px;

    background: linear-gradient(
        135deg,
        #c00000 0%,
        #8b0000 60%,
        #6f0000 100%
    );

    border: 1px solid #780000;
    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);

    margin: 0 0 15px 0;
}

.headerleft
{
    float: left;
    min-height: 120px;
    width: 35%;
}

.headerright
{
    float: left;
    min-height: 120px;
    width: 55%;
}

.mainwrapper	{ overflow: hidden; height: 100%; }
.mainmenu		{ float: left; width: 280px; }
.menublock
{
    width: 270px;
    height: auto;
    padding: 15px;

    background: var(--menuachtergrond);

    border: 1px solid var(--zwarteranden);

    border-radius: 12px;

    box-sizing: border-box;

    box-shadow: 0 2px 8px rgba(0,0,0,.05);

    margin-bottom: 15px;
}
.maincontent
{
    float: left;
    width: 1000px;
    min-height: 1000px;

    padding: 20px;

    background: var(--achtergrond);

    border: 1px solid var(--zwarteranden);

    border-radius: 12px;

    box-sizing: border-box;

    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

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

.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		{ margin: 1px; padding: 4px; border: 1px solid #e8e8e8; border-radius: 5px; background: var(--achtergrond); color: var(--tekst); text-decoration: none; width: auto; min-height: 20px; height: 100%; clear: both; }
.transblock		{ margin: 1px; padding: 4px; border: 1px solid var(--achtergrond); border-radius: 5px; background: var(--achtergrond); color: var(--tekst); text-decoration: none; width: auto; min-height: 20px; height: 100%; clear: both; }
.redblock		{ margin: 1px; padding: 4px; border: 1px solid #ff0000; border-radius: 5px; background: #fccacc; color: #000000; text-decoration: none; width: auto; min-height: 20px; height: 100%; clear: both; }
.greenblock		{ margin: 1px; padding: 4px; border: 1px solid #008800; border-radius: 5px; background: #80ff80; color: #000000; text-decoration: none; width: auto; min-height: 20px; height: 100%; clear: both; }
.greyblock		{ margin: 1px; padding: 4px; border: 1px solid #dcdedc; border-radius: 5px; background: #fafafa; color: #000000; text-decoration: none; width: auto; min-height: 20px; height: 100%; clear: both; }
.hetverhaal		{ border: 0px; padding: 4px;	}

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

.profilethumbdiv
{
font-size: 15px;
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(-10%, -75%);
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
text-align: center;
}

.profielfotopopup img
{
width: 600px;
height: 600px;
}

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

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