/* HIDE stuff we don't want to print */
.w3-bar, .scoundrel-tab, .buttons { display:none !important; }

/* print settings */
@page { margin:1cm; size: landscape; }

html section.print {
	display:flex;
	section { padding:0 4px; }
}

html, body { font-size:12px; margin:0; padding:0; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; background:white none !important; }
h3 { font-size:1em; z-index:1; color:white; background-color:black; border:0; height:20px; padding:0px 6px; margin:0; font-family:'Kirsty'; text-transform:uppercase; }
.w3-ul li { padding:0; }

.ticks {
	.tick { background: url('../img/tick.png') left -14px no-repeat; display:inline-block; background-size:contain; width:12px; height:36px; }
	.tick.active { background-image: url('../img/tick-full-grey.png'); }
}

.details {
	.w3-flex { width: 100%; }
	width:45%;
	span { display:inline-block; width:100%; font-size:1.2em; border:0; }
	label { display:inline-block; width:100%; font-size:0.8em; font-family:'Kirsty'; text-transform:uppercase; border-top:1px solid #555; margin-bottom:4px; }
	.stress {
		label { font-size:1em; color:white; background-color:black; border:0; width:auto; height:20px; padding-left:6px; padding-right:8px;}
		.ticks {
			padding-left:0px;
			border-top: 4px solid #000;
			.tick { background-image: url('../img/stress.png'); background-position: top; }
			.tick.active { background-image: url('../img/semi-tick-full-grey.png'); }
		}
	}
	.trauma {
		label { font-size:1em; z-index:1; color:white; background-color:black; border:0; width:auto; height:20px; padding:0px 8px 0px 16px; }
		.traumas { text-transform: uppercase; border-top:4px solid; padding:0px 8px; font-size:0.8em;
			span { display:inline;	}
			span.active { font-weight:bold; }
		}
	}
	.harm {
		flex-grow:1;
		.row { 
			border-bottom:1px solid #000;
			height:52px;
			label { border:0; background:#ccc; width:16px; padding:6px 3px; text-align:center; margin:0; }
			label.info { width:48px; }
		}
		.row:nth-child(4) { border-bottom:0; }
	}
	.healing {
		width:16%;
		svg { margin:2px auto 6px; display:block; }
		span { flex-grow:1; text-indent:6px; font-size:0.9em; }
		
	}
}
.abilities {
	width:40%;
	.abilities-list li { list-style-type: "\025CB"; list-style-position:inside; margin-right:4px; }
	.abilities-list li.active { list-style-type: "\025CF"; }
	.name { font-size:1em; }
	.desc { font-size:0.9em; }
	.extra { display:none; }
}
.right {
	h3.xp { margin-bottom: 4px; }
	width:15%;
	.attributes {
		h3 { margin-top:6px; margin-bottom:2px; }
		font-size:1em;
		div:not(.ticks) {
			i:nth-child(1) { border-right:1px solid #777; }
			i { color:#ccc; padding-top:3px; width:20px; display:inline-block; }
			i.active { color:#000; }
		}
		span { text-transform:uppercase; padding-left:6px; }
	}
	.tick { background-image: url('../img/tick.png'); background-position:top; width:9px; height:24px;}
}

.friends {
	i { color:#ccc;  width:12px; }
	.text-green.active, .text-green:hover { color: green; }
	.text-red.active, .text-red:hover { color: red; }
	span { text-indent:6px; }
}
.xptriggers {
	li { list-style-type: ' - '; list-style-position:inside; border:0; }
}