﻿/* ============================================================================== 
   File: print.css
	- Stylesheet for TipTool 
	- created: 11.MAY.2007
	- Author: Daniel Hugentobler
	- amended: 16.APR.2016, dropped iframes => don't print header, footer, navis
	- amended: 20.DEC.2017, added .noPrint for selective suppression from printing
                            ensured game-adversories are printed unwrapped
	- amended: 14.JUL.2021, more elements to take into account .noPrint
	
	The following blocks exist:
   	- HTML-ELEMENTS		(1 point +)
   	- CLASSES			(10 points +)
   	- PSEUDO-CLASSES 	(10 points +)
   	- NAMED-ELEMENTS	(100 points +)
   ============================================================================== */
@page { 
	size:29.7cm 21cm; 		/* Din A4 */
}

@media print {
	/* initial calibration of all elements */
	* { 
		padding: 0;
		border: none;
		margin: 0;
		clear: both;
	}

	body {
		color: black;
		background: white;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10pt;
		orphans: 3; 			/* min. 3 lines BEFORE page-break */
		widows: 3; 				/* min. 3 lines AFTER page-break */
	}

	h1, 
	h2 {
		font-family: verdana, Arial, Helvetica, sans-serif;
	}

	h1 {
		font-size: 24pt;
	}


	h2 {
		font-size: 18pt;
	}

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

	ol li {
		list-style:decimal inside; 
		margin-bottom: 10pt;
	}

	ul li {
		list-style-type: none;
		margin-bottom: 5pt;
	}

	/* margin for nested lists */
	ul ul,
	ol ol,
	ul ol,
	ol ul {
		margin-left: 20pt;
	}

	label,
	.label {
		display: inline-block;
		min-width: 20%;
		max-width: 20%;
		font-weight: bold; 
	}

	/* table layout */
	table {
		margin-top: 1rem;
		color: black;
		background-color: white;
		font-size: 11pt;
		page-break-inside: auto;
	}
	thead {
		display: table-header-group;	/* repeat on each page */
		margin-top: 20pt;
	}
	tfoot {
		display: inline-block;
	}
	tr {
		display: table-row;
		page-break-inside: avoid;		/* prevent broken rows */
		page-break-after: auto;
	}
	th, 
	td {
		display: table-cell;
		padding-top: 2pt;
		padding-left: 5pt;
		padding-right: 5pt;
		padding-bottom: 2pt;
		vertical-align: middle;
	}

	th {
		text-align: center;			/* dft */
		border-top: 1pt solid gray;
		border-left: 1pt solid gray;
		border-right: 1pt solid black;
		border-bottom: 1pt solid black;
	}

	td {
		text-align: left;			/* dft */
		border-top: 1pt solid silver;
		border-left: 1pt solid silver;
		border-right: 1pt solid gray;
		border-bottom: 1pt solid gray;
		height: 100%;
	}

	.vs_advs {
		display: none;
	}
	.vs,
	.vs_flag {
		display: none;
	}

	td.center {
		text-align: center;
	}

	th.right,
	td.right {
		text-align: right;
	}

	th.left {
		text-align: left;
	}

	th.buffer,
	td.buffer {
		padding-right: 15pt;
	}

	/* game-adversaries to be printed unwrapped  - taken from scr_size.css, yet without min/max-width */
	td span.vs_advs {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	/* webkit is for chrome/safari => is it really still needed? */
		display: -webkit-flex;
		flex-direction: -webkit-row;
		justify-content: -webkit-space-between;
		align-items: -webkit-center;
	}
/*	tfoot td,
	tfoot th {
		display: table-cell;
		text-align: right;
	}*/
	.noView,
	.flag {
		height: 1.2rem;
		width: 1.2rem;
		border-radius: 50%;
	}
	.champ_flag,
	.vs_flag {
		display: inline-block;
		text-align: center;
	}
	.vs {
		display: inline-block;
		vertical-align: top;
		text-align: center;
		margin-top: 0.1rem;
	}
	.champ_data {
		display: inline-block;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	/* webkit is for chrome/safari => is it really still needed? */
		display: -webkit-flex;
		flex-direction: -webkit-row;
		justify-content: -webkit-flex-start;
		align-items: -webkit-center;
	}
	.champ {
		display: inline-block;
		width: auto;
		vertical-align: top;
		text-align: center;
		margin-top: 0.1rem;
	}

	/* sort-arrows must not be printed */
	th.sort img {
		display: none;
	}

	.buffer {
		margin: 10pt; 
	}

	.buffer_side {
		margin-right: 10pt;
		margin-left: 10pt;
	}

	.nowrap {
		white-space:nowrap;
	}

	/* don't print these ! */
	.breadcrumb,
	.cookies,
	.explanation,
	.explanation_narrow,
	.skiplink,
	.linkHelp,
	.hide,
	.overlay_hide,
	.pushButtons,
	.sortNarrow,
	.toolbar,
	div.noPrint,
	span.noPrint,
	img.noPrint,
	p.noPrint,
	#header,
	#footer,
	#column_left,
	#pbToc,
	#navi_main,
	#navi_tips,
	#navi_profile,
	#navi_language,
	#navi_sponsors,
	#toolbar,
	#user_toolbar,
	#fullscreen_toolbar
	{
		display: none;
	}

	/* selective suppression e.g. of th/td
	do not display:none because of tips-colspan for sum-rows */
	th.noPrint,
	td.noPrint {
		display: none;
	/*	visibility: collapse;*/ /* does not do the trick: the collapsed <td> grows to half a page in height! */
		max-width: 0;
		margin: 0;
		padding: 0;
		border: none;
		border-collapse: collapse;
	}	

	a.print_href {
		color: gray;
		background: transparent;
		font-weight: bold;
		text-decoration: underline;
	}

	/* print only external links' URL */
	a.print_href[href]:after {
		content: " (URL: "attr(href)" ) ";
		font-size: 90%;
	}

	.icon {
		background: black;
		margin-top: 3pt;
	}
}
