/* styles.css */
/* boven rechts onder links bij padding (binnenkant) en margin (buitenkant)  */

/* font-awesome iconen:*/
/*
<i class="fa-regular fa-hand-pointer"></i> \f25a (handje omhoog)
<i class="fa-regular fa-hand-point-right"></i> \f0a4 (handje naar rechts)
<i class="fa-solid fa-plus-minus"></i> \e43c (plus en min)
<i class="fa-regular fa-square-caret-down"></i> \f150(pijltje naar beneden)
<i class="fa-solid fa-bars"></i> \f0c9 (hamburger menu)
<i class="fa-solid fa-bars-staggered"></i> \f550 (menu-item)
<i class="fa-solid fa-arrow-right-from-bracket"></i> \f08b (uitgang)
<i class="fa-solid fa-arrow-right-to-bracket"></i> \f090 (ingang)
<i class="fa-solid fa-bicycle"></i> (renners)
<i class="fa-solid fa-medal"></i> (tussenstand)
<i class="fa-solid fa-gavel"></i> (jury)
<i class="fa-solid fa-user-tie"></i> (admin)
<i class="fa-solid fa-arrow-up-right-dots"></i> (stats)
<i class="fa-solid fa-people-line"></i> (deelnemers)
<i class="fa-solid fa-person-booth"></i> (meedoen)
<i class="fa-solid fa-person-circle-check"></i> (betaald)
<i class="fa-solid fa-person-circle-question"></i> (niet betaald)
<i class="fa-solid fa-users-between-lines"></i> (team)
<i class="fa-solid fa-filter"></i> \f0b0 (filter)
<i class="fa-solid fa-text-height"></i>  (tekstgrootte) \f034
<i class="fa-regular fa-copyright"></i> (copyright) \f1f9
<i class="fa-solid fa-check-double"></i> (vinkjes) \f560
<i class="fa-solid fa-check"></i> (vinkje) \f00c
<i class="fa-solid fa-backward"></i> (spoel terug) \f04a
<i class="fa-solid fa-forward"></i> (spoel vooruit) \f04e
<i class="fa-solid fa-left-long"></i> (pijl naar links) \f30a
<i class="fa-regular fa-trash-can"></i> (delete) \f2ed
<i class="fa-solid fa-arrow-right"></i> \f061
<i class="fa-solid fa-arrow-left"></i> \f060
<i class="fa-solid fa-person-biking"></i> (renner) \f84a
<i class="fa-solid fa-person-circle-xmark"></i> (person deleted) \e543
<i class="fa-regular fa-trash-can"></i> (vuilnisbak) \f2ed
<i class="fa-solid fa-chalkboard-user"></i> (user aan een computer) \f51c
<i class="fa-regular fa-message"></i> (mededeling) \f27a
<i class="fa-solid fa-person-circle-exclamation"></i> (waarschuwing) \e53f

*/

* 
{
  box-sizing: border-box;
}

body 
{
	margin: 0 0 0 2px;
	padding: 0px;
	font-family: monofont;
	color: black;
	background-color: #ffeead;
	width: 600px
}

@font-face
{
	font-family: "monofont";
	src: 	url('../layout/Inconsolata-Regular.woff') format('woff'),
	url('../layout/Inconsolata-Regular.ttf')  format('truetype'),
	url('../layout/Inconsolata-Regular.svg#svgFontName') format('svg');
}

#bovenbalkDIV
{
	background-color: #ffcc5c;
	height: 100px;
	width: 100%;
	padding: 5px 0 0 5px;
}

#paginatitel
{
	font-size: 32px;
}

#logoDIV
{
	width: 100px;
}

#subleagueLOGO
{
	max-height: 80px;
}

#logoDIV
{
width:100px;
float: left;
}

.titel-container 
{
	float: left;
	position: relative;
	left:35%;
}

.titel-fixer
{
	float: left;
	position: relative;
	left: -50%;  
	text-align: center;	
  color: black;
}

#onderbalkDIV
{
	background-color: #ffcc5c;
	height: 40px;
	width: 100%;
	padding: 10px;
	margin-top: 40px;
}

#contentDIV
{
	width:600px;	
/* 	width:100%; */
}

#bezoekerTEKST, #bezoekerTEKST2
{
	font-size: 20px;
}

#nieuwtjeDIV
{
	width: 100%;
	height: 64px;
}

.rechts
{
	float: right;
}

.links
{
	float: left;
}

.midden
{
  text-align: center;
}

.kleine-tabel
{
	font-size: 0.8em;
}

.logo-klein
{
	height: 24px;
	padding-right: 0px;
}

/* standaard-class voor knoppen en input */
.stoerspel
{
	padding:2px;
	display:block;
	border: 1px solid gray;
	background-color: #FFEFD5!important;
	height: 24px;
}

.invoer
{
	align-items: center;
	border-radius: 2px;
	background-color: floralwhite;
	border: 1px solid gray;
	font-size: 0.8em;
	font-family: monofont;
}

.knop
/* geldt voor alle knoppen */
{
	cursor: pointer;
	box-shadow: 2px 2px lightgray;
	border-radius: 12px;
	margin-right: 2px;
	color: black;
	height: 24px;
	border: 2px solid gray;
	background-color: #FFEFD5!important;
}

.knop::before 
{
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  }

.breed48
{
	width: 48px;
}

.teksticoon
{
	height: 48px;
	margin-top: 8px;
	margin-right: 8px;
	color: tomato;
}

.teksticoon::before 
{
  font: var(--fa-font-solid);
  content: '\f034';
  font-size: 36px;
}

.mededeling
{	
	padding: 3px;
	border-radius: 6px;
	background-color: #dcefe6;
	color: black;
	font-style: italic;
	width: 300px;
	margin-top: 2px;
}

.mededeling::before
{
  font: var(--fa-font-regular);
  content: '\f27a';
  color: #73bf9c;
  padding-right: 8px;
}

.waarschuwing
{
	color: red;
	font-weight: 300;
}

.wijzignaam
{
	width: 100px;
	height: 20px;
}

.teambaas
{	
	color: darkgrey;
	font-style: italic;
}

.grijs
{	
	color: darkgrey;
}

.geenkleur
{
	background-color: #ffeead;
}

.breed40
{
	width: 40px;
}

.breed60
{
	width: 60px;
}

.breed80
{
	width: 80px;
}

.breed100
{
	width: 100px;
}

.breed120
{
	width: 120px;
}

.breed180
{
	width: 180px;
}

.breed240
{
	width: 240px;
}

.breed300
{
	width:300px;
}

.breed360
{
	width:360px;
}

.breed420
{
	width:420px;
}

.breed480
{
	width: 480px;
}

.tabel-titel-rij
{
	margin-top: 5px;
}

.tabel-titel
{
	font-size: 1.4em;
	font-style: italic;
/* 	text-align: left; */
}

.eenpunttwee
{
	font-size: 1.2em;
}

.rijnummer
{
	text-align: center;
	font-size: 1.2em;
}

.driekwart-em
{
	font-size: 0.75em;
	padding-left: 5px;
}

.ruimte-na-tabel, .ruimte-na-content
{
	margin-bottom: 12px;
}

.dropdownregel
{
	background-color: #F0F0F0;
}

h3 
{
    display: block;
    text-align: center;
    font-style: italic;
    font-size: 1.4em;
    font-weight: 400;
    margin-block-start: 0.4em;
    margin-block-end: 0.4em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    color: tomato;
}

table tr:nth-child(odd)
{
/* 	lichtgrijs #F2F2F2*/
	background-color: #FFEECC;
}

table
{
	border-spacing: 0px;
	width: 580px;
}

td
{
  padding: 2px;
}

a 
{
  text-decoration: none; 
  color: black;
}

.collapsible 
{
	background-color: #ffcc5c;
	color: black;
	cursor: pointer;
	padding: 10px;
	margin-bottom: 2px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-family: monofont;
	font-size: 1.4em;
	border-radius: 5px;
}

.tussenstand
{
	font-size: medium;
}

.collapsible::before 
{
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  }
  
.handje::before 
{
  font: var(--fa-font-regular);
  content: '\f150 ';
}

.subhandje::before
{  
	font: var(--fa-font-regular);
  content: '\f150';
  font-size: medium;
}

.active 
{
  background-color: #ffcc5c;
}

.collapsible:hover 
{
  background-color: white;
}

.content 
{
  display: none;
  overflow: hidden;
  margin: 0px 0px 2px 5px;
  background-color: #ffeead;
}

.submenu
{
	font-style: italic;
	font-variant-caps: all-petite-caps;
}