html, body { padding: 0; margin: 0; }
body { background: linear-gradient(180deg,#2b2c31,#4c4d52 20%) no-repeat fixed !important; }

section.print { display:none; }

.topmenu, .w3-tab, .tabs { max-width: 800px; margin:0 auto; }
.topmenu img { height:60px; }
.w3-card {
	background-color: rgba(255,255,255,.7);
	header {
		background-color: rgba(255,255,255,.9);
		h2 { color: black; }
		.small-avatar {
			width:128px;
			height: 128px;
		}
	}
}
.scoundrel-tab { padding-bottom:16px; background-color: rgba(255,255,255,.75	); }
.w3-bar-item.active { background:#ccc; color:black; }
.w3-tab header h2 i { position:relative; top:8px; }
.details-div {
	label { margin-top: 6px; display: inline-block; color: #333; }
	label.linked { text-decoration: underline; text-decoration-style: dashed; cursor: pointer; }
}
.w3-container header {
	h2 i { color:#777; }
}
h1 {
	i { height:24px; width:24px; font-size:0.6em; }
	button { font-size: 0.8em; }
}

/* modal stuff */
.fa-square-plus { display:inline-block; }
.fa-square-minus { display:none; }
.sub { display: none; cursor:pointer; }
.opened {
	.fa-square-plus { display:none; }
	.fa-square-minus { display:inline-block; }
	.sub { display: block; }
}

h3 { color:#fff; background-image: linear-gradient(to bottom, black 0%, black 36px, rgba(0,0,0,0) 36px); padding-left:16px; margin:0px; }
h3.with-ticks { margin-bottom:8px; height:60px; }
h3.w3-red { background-color:#f44336; background-image:none; }
.white { color:white; }
.light-grey { color:#ccc; }
.dark-grey { color:#333; }
.gold { color:gold; }

.w3-tag { margin: 0 2px; border-radius:6px; }

.names .name { cursor: pointer; }
.playbook {
	max-width: 400px;
	padding: 10px;
	min-height: 150px;
	background: linear-gradient(180deg,#0d0e13,#2b2c31 80%);
	border-radius: 10px;
	display: inline-block;
	margin: 10px;
	position: relative;
	p { color: #7a7b83; font-size:1.3em;}
	.names {
		position: absolute;
		cursor: pointer;
		width: calc(100% - 20px);
		top: 50%;
		text-align: center;
		text-shadow: 1px 1px 4px black;
		background: rgba(0,0,0,.75);
		.name {
			color: #ece0a1 !important;
			font-family: 'KirstyBold';
			font-size: 4em;
		}
		.alias {
			color: #b47f6f;
			font-family: 'Kirsty';
			font-size: 2em;
		}
	}
	img { width: 100%; }
}
.heritage .name { font-size: 2em; font-family: 'KirstyBold'; }
.larger { font-size: 1.5em; }
.playbook-abilities { display:none; list-style-type: 'none'; color: #ccc; list-style-position: inside; padding:0px; }
.playbook-abilities li { display: inline-block; padding: 0px 4px; }
.playbook-abilities li::before { content: " | "; color: #777; }
.playbook-abilities li:first-child::before { content: ""; }
.worldmap { max-width: 40%; min-width: 150px; }

.attributes {
	label { width: 150px; float: left; }
	.fa-circle-info { padding-left:8px; padding-top:8px; font-size:0.8em; }
	.fa-circle-info.inactive { color:#999; }
	.attrDesc { color:#555; display:inline-block; }
	.xp { background-image: url('../img/tick.png'); }
	.xp.active { background-image: url('../img/tick-full-grey.png'); }
}
.ticks {
	padding-left:16px;
	i { display:inline-block; cursor:pointer; background-repeat:no-repeat; background-size:contain; width:20px; height:60px; }
}

.friendStanding { 
	font-size: 1.2em;
	padding-right: 12px;
	i { cursor:pointer; }
	.text-green.active, .text-green:hover { color: green; }
	.text-red.active, .text-red:hover { color: red; }
}

/* ITEMS */
.char-items {
	.w3-button { background:#aaa; color:black; cursor:pointer; }
	.w3-button.active { background:#eee; }
	li label { padding-left:8px;}
	li i { margin-top:5px; }
	.default-items li.half { width: 50%; float:left; }
}

/* STRESS and TRAUMA */
.stress-div {
	.stress { background-image: url('../img/tick.png'); }
	.stress.active { background-image: url('../img/tick-full-grey.png'); }
	.trauma { background-image: url('../img/trauma.png'); }
	.trauma.active { background-image: url('../img/trauma-full.png'); }
	.traumas span { cursor:pointer; font-size:1.2em; }
	.traumas span.active { color:red; }
	label { padding-right:8px; }
	.info { padding:0px; text-align:center; flex-basis:50px; }
}

.clock { display:inline-block; height:64px; width:64px; border-radius:32px; border:1px solid #000; overflow:hidden; }
.clock div { background-color:#fff; height:50%;width:50%; float:left; }
.clock div:nth-child(1) { border:1px solid #000; border-top:0px; border-left:0px; }
.clock div:nth-child(2) { border-bottom:1px solid #000; }
.clock div:nth-child(3) { border-right:1px solid #000; }

.healing {
	height:124px;
	.healing-clock { padding:0px 24px 0px 16px; }
	svg { width:80px; height:72px; }
	input { margin-right:6px; }
	.armor-uses .boxes { font-size:0.8em; color:black;	}
}