﻿/* ============================================================================== 
   File: print.css
	- Stylesheet for ArchiComix (taken from TipTool and amended) 
	- Author: Daniel Hugentobler (DH)
	- created: 25.SEP.2020
	- amended: -
	
	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 */
}


/* -------------
   HTML-ELEMENTS 
   ------------- */
/* 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;
	margin-top: 6pt;
}

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%;
}

td.center {
	text-align: center;
}

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

th.left {
	text-align: left;
}

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

.flag {
	height: 1.2rem;
	width: 1.2rem;
	border-radius: 50%;
}
/* sort-arrows must not be printed */
th.sort img {
    display: none;
}


/* -------
   CLASSES
   ------- */
.buffer {
	margin: 10pt; 
}

.buffer_side {
	margin-right: 10pt;
	margin-left: 10pt;
}
.myMap,
.buffer_top {
	margin-top: 8pt;
}
.mapContainer img {
	max-width: 40%;	/* limit images' width */
}

.nowrap {
	white-space:nowrap;
}

/* don't print these ! */
.areaDetail,
.breadcrumb,
.cookies,
.explanation,
.explanation_narrow,
.skiplink,
.linkHelp,
.hide,
.motion_none .motion,
.motion_run .motion,
.overlay_hide,
.pushButtons,
.sortNarrow,
.toolbar,
div.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;
}
.quotationBalloon {
	background-color: lightgray;
	border-radius: 0.8em;
	color: black;
	font-size: 10pt;
	padding: 1em;
	position: absolute;
	top: 20%;
	left: 40%;
	min-width: 40%;
	min-width: 12em;
	max-width: 60%;
	height: auto;
	/* shadow */
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #a8a8a8; /* shade of lightgray */
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #a8a8a8;
	box-shadow: 0.3rem 0.3rem 0.5rem #a8a8a8;
}
.quotationBalloon::after {
	border-right: 1.2em solid lightgray;
	border-top: 0.6em solid transparent;
	border-bottom: 0.6em solid transparent;
	content: "";
	position: absolute;
	left: -1.2em; /* place the arrow LEFT of the balloon */
	top: 33%;
}
