/**
 * @package TinyPortal
 * @version 2.0.0
 * @author IchBin - http://www.tinyportal.net
 * @founder Bloc
 * @license MPL 2.0
 *
 * The contents of this file are subject to the Mozilla Public License Version 2.0
 * (the "License"); you may not use this package except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Copyright (C) 2019 - The TinyPortal Team
 *
 */

/**
 * Stylesheet for custom styling 
 * This stylesheet is NOT deleted upon uninstalling TinyPortal, 
 * but it will be overwritten with an empty file when installing a new version.
 */

 /*Styles ingevoegd FJR-Club.
------------------------------------------------------- */

/* font awesome iconen voor FA thema's*/
.fa-Over_de_FJR:before {
	content: "\f21c"; 
	}
.fa-Shop:before {
	content: "\f07a";
	}
.fa-Evenementen:before {
	content: "\f783";
	}
.fa-downloads:before {
	content: "\f019";
	}
.fa-gallery:before {
	content: "\f302";
	}

/* Class voor menu-icons */
img.menu_icon {
	vertical-align: middle;
	}
/* fix voor broken images in chrome en firefox > standaard Alt tekst*/	
.post .inner img.bbc_img {
	font-style: italic;
	font-size: 0.8em;
	}
/* achtergrond van eigen menu opties*/	
.generic_icons.Over_de_FJR {
	background: url(../images/Over_de_FJR.png);
	}
.generic_icons.Evenementen {
	background: url(../images/Evenementen.png);
	}
.generic_icons.Shop {
	background: url(../images/Shop.png);
	}

/* AW en dan nu ale css voor gebruik in artikelen */
/* class emailadressen om verborgen karakters in te voegen */
span.obfuscate { 
	display: none; 
	}

/* iframe voor Youtube weergave, standaard maat iframe width="300" height="200" */
iframe.tube {
	width: 380px;
	height: 210px;
	max-width: 100%;
}
/* class afbeeldingen in artikelen */
img.intekst {
	padding-top:5px;
	padding-bottom:5px;
	padding-right:10px;
	padding-left:10px;
	width:33%;
	}
img.intekst50 {
	padding-top:5px;
	padding-bottom:5px;
	padding-right:10px;
	padding-left:10px;
	width:50%;
	}
/* class afbeeldingen die NIET responsive hoeven zijn*/
img.vastintekst {
	padding-top:5px;
	padding-bottom:5px;
	padding-right:10px;
	padding-left:10px;
	min-width:100px;
	max-width:50%;
	}
/* class tabellen die de hele paginabreedte moeten hebben */
table.breed {
	empty-cells: show;
	width: 100%
	}
/* Div stijl voor nieuws items om te voorkomen dat foto's overlappen. */
div.overlap {
	clear:both;
	height:1px;
	overflow:hidden;
	}
/* Div Style voor nieuws op website en forum met scrolling list. */
div.nieuws {
	display: inline-block;
	width:auto;
	height:230px;
	overflow:auto;
	direction:rtl;  /* Right To Left */ 
	text-align:left; /* Override direction */
	padding: 5px;
	}
/* stijl voor div met class:beeldvullende_tabel (smoelenboek en video pagina's) op website en forum met scrolling list. */
.beeldvullende_tabel {
	width:100%;
	max-height:1550px;
	overflow:auto;
	padding-top:5px;
	padding-bottom:5px;
	text-align: justify;
	}
.beeldvullende_tabel > div {
	display: inline-block;
	vertical-align: top;
	padding:10px;
	}
.beeldvullende_tabel:after {
	content: "";
	width: 100%;
	display: inline-block;
	}
/* Supersmall: gebruikt in kalender blok */
.supersmalltext, tr.supersmalltext th {
	font-size: 0.85em;
	font-family: verdana, sans-serif;
	letter-spacing: -0.9px;
	}
/* de specificaties tabellen in over de FJR */
table.specificaties {
	empty-cells: show;
	width: 100%;
	}
table.specificaties, .specificaties tr, .specificaties td  {
	border: 0px;
	border-spacing: 0px;
	padding: 2px;
	text-align: left;
	vertical-align: top;
	}
.specificaties tr:nth-of-type(odd) {
	background: none;
	}
.specificaties tr:nth-of-type(even) {
	background-color: rgba(210,210,210,0.2);
	}
.specificaties tr.titel {
	background-color: rgba(9,102,208,0.5);
}
.specificaties tr.titel td {
	color: #ffffff;
	font-weight: bold;
	}
/* Styling for Link tags in artikelen */
.article_inner a, .article_inner a:visited, .article_inner a:link {
	text-decoration: underline;
	text-decoration-color: #a8b6cf;
	text-underline-position: under;
	border-bottom: 0;
	}
.article_inner a:hover, .article_inner a:focus {
	text-decoration-color: #003366;
	}

@media screen and (max-width: 480px) {
	/* Class voor afbeeldingen in de Tinyportal artikelen */
	img.intekst {
		padding-top:5px;
		padding-bottom:5px;
		padding-right:0px;
		padding-left:0px;
		width:100%;
		max-width:100%;
		}
	img.intekst50 {
		padding-top:5px;
		padding-bottom:5px;
		padding-right:0px;
		padding-left:0px;
		width:100%;
		max-width:100%;
		}
	} 

@media screen and (max-width: 720px) {
.hiddensmall {
		display: none;
		}
	}

@media screen and (min-width: 480px) and (max-width: 720px) {
	/* Class voor afbeeldingen in de Tinyportal artikelen */
	img.intekst {
		padding-top:5px;
		padding-bottom:5px;
		padding-right:10px;
		padding-left:10px;
		width:50%;
		}
	}

/* -------------------- */
/* Changes to display child boards in columns */ 
.children {
	 order: 5;
	 width: 100%;
	 margin: 0;
	 padding: 5px 5px 5px 80px;
	 border: 0;
	 border-top: 1px solid #ddd;
}
.up_contain:first-child .children {
	 padding-top: 8px;
}
[id^="board_"][id$="_children"] > p {
	 column-count: 2;
}
[id^="board_"][id$="_children"] > p > span {
	 display: block;
	 padding: 0 5px 0 0;
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
}
[id^="board_"][id$="_children"] span::after {
	 content: '';
}

@media screen and (max-width: 900px) {
[id^="board_"][id$="_children"] > p {
	 column-count: 2;
	}
}
@media screen and (max-width: 720px) {
.children {
	 padding: 5px;
}
[id^="board_"][id$="_children"] > p {
	 column-count: 1;
	}
[id^="board_"][id$="_children"] > p > span {
	 padding: 2px 5px 2px 0;
}
}
/* Changes to display child boards in columns */

/*Quick and dirty fix for quickactions */
@media screen and (max-width: 720px) {
	#quick_actions > select[name="qaction"] {
    width: 80px;
}
}