/* html * {max-height: 999999px;} */
body {
	font-family: "Tinos", serif;
	font-size: 10pt;
	margin: 0;
	background-color: white;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}
h1, h2 {
	font-size: 170%;
	margin: 0;
}
td {padding: 0;}
textarea, input[type=text] {background-color: white;}
#content {
	width: 7in;
	position: relative;
	margin: 0 auto;
}
#main {display: none;} /* hide until the data is loaded */
/* #main {min-height: 9in;} /* force paper height */
#debug {
	display: none;
	top: 0;
	position: absolute;
	left: 7.5in;
	width: 4in;
}
.template {display: none;}
.error, input:invalid {color: red;}


/* NON-SCROLLING HEADERS */

.noscroll {
	position: absolute;
	left: 0;
	top: 0;
}
.noscroll > div {
	position: fixed;
	background: white;
	width: 7in;
	border-bottom: 1px solid silver;
	z-index: 1;
}
.noscroll input[type=button][value=cancel] {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
}
.spacer {
	height: 2.5em;
	width: 7in;
}

/* CONTROLS */

#controls > table {
	width: 7in;
	border-bottom: 1px solid silver;
	margin-bottom: 0.5em;
}
#controls td.left {text-align: left;}
#controls td.center {text-align: center;}
#controls td.right {text-align: right;}

/* can't let save form cover the top of the character sheet */
#saveForm {white-space: nowrap;}
/* allow undo/redo and open/save buttons to touch */ 
#saveForm [value=open], #undo {margin-right: 0;}
#saveForm [value=save], #redo {margin-left: 0;}
#openForm {display: none;} /* hide file selector until you need it */
#openForm iframe {border: 0; height: 0; width: 0;} /* stealth! */
/* let this cancel button flow inline with the form's other inputs */
#openForm [value=cancel] {position: static; display: inline-block;}


/* CHARACTER SHEET */

#characterSheet {
	font-size: 10pt;
	position: relative;
	padding-left: 5px;
}
/* give stats a handwritten look */
input[type=text], select, textarea, .characterAbility, .used {
	font-family: "Arimo", sans-serif;
	font-size: 10pt;
	font-style: italic;
}
/* show text inputs as blank lines */
input[type=text] {
	border: none;
	border-bottom: 1px solid gray;
	display: inline-block;
	text-align: center;
	width: .25in;
}
/* shrink checkboxes and radio buttons to fit text rows */
input[type=checkbox], input[type=radio] {
	height: 8pt;
	margin: 0;
	vertical-align: middle;
}
/* show larger fields as boxes */
textarea {border: 1px solid gray;}

/* headers */
#name input {width: 3.6in;}
#template input {width: 3.42in;}
#name {position: relative;}
#exampleNames {
	position: absolute;
	left: 1.3in;
	top: 1.7em;
	background: white;
	border: solid black 1px;
	padding: 0 0.2em;
	display: none;
}
.exampleName {
	margin: 0.2em;
	padding: 0.2em;
}

/* portrait */
#portrait {
	width: 2.6in;
	height: 2.6in;
	margin-top: 1em;
/*
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
*/
	position: relative;
}
#portrait > div {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
}
#portrait img {
	max-width: 2.6in;
	max-height: 2.6in;
}

/* basic actions */
#basicActions div:first-child {font-weight:bold;}

/* character points and action points*/
#characterPoints {
	position: absolute;
	top: 3em;
	left: 2.75in;
	text-align: center;
	width: 1.2in;
}
#characterPoints > div {
	margin-top: 0.5em;
	
}
#characterPoints input {
	font-size: 120%;
	width: 0.85in;
	padding: 0.14in;
	border: solid 1px gray;
}

/* other description */
#description {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.7in;
}
#description label {font-weight:bold;}
#description textarea {
	vertical-align: text-top;
	width: 1.7in;
	min-height: 4.1in;
	box-sizing: border-box;
	resize: none;
	overflow: hidden;
	padding: 0.1em 0.2em;
	border: none;
}

/* attributes */
#attributes {
	position: absolute;
	top: 0;
	right: 1.65in;
	width: 1.3in;
	text-align: center;
/*
	background-image: url(attriebutes.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 1.18in;
*/
}
#attributes > img {
	position: absolute;
	right: 15px;
	top: 20px;
	z-index: -1;
	width: 1.15in;
}
#attributes > div {
	padding-top: 0.165in;
	height: 0.495in;
/**/
	padding-top: 0.13in;
	height: 0.53in;
/**/
}
#attributes > div:first-child {
	padding-top: 0;
	height: auto;
	padding-bottom: 0.2em;
}
#attributes label {
	display: none;
}
#attributes input {
	border: none;
	background: none;
/**/
	font-size: 120%;
/**/
}
#power {width: .6in;}
.attribute {position: relative;}
#powerSelection {
	position: absolute;
	left: 0;
	top: 4em;
	background: white;
	border: solid black 1px;
	display: none;
	z-index: 1;
}
#powerSelection td {padding: 0.2em;}


/* abilities */
#abilitiesColumn {
	margin-top: 0.5em;
}
#abilitiesTable {
	width: 100%;
}
#abilitiesTable th:nth-child(1) {
	text-align: left;
	font-weight: bold;
}
#abilitiesTable th:nth-child(2) {width: 0.2em;}
#abilitiesTable th:nth-child(3) {
	width: 0.3in;
	text-align: center;
	font-weight: normal;
}
#characterAbilities {
	border: 1px solid gray;
}
.characterAbility td:first-child {
	text-indent: -1em;
	padding: 0.1em 0.2em 0.1em 1.2em;
}
.characterAbility td:last-child {
	vertical-align: top;
	text-align: center;
}
/* #basicActions div:not(:first-child):hover, */
.characterAbility td:first-child:hover, .characterAbility td:last-child:hover,
#abilityEditor .aka:hover, #powerSelection td:hover, .exampleName:hover, 
#portrait:hover, #d20:hover, #d6:hover {
	background-color:#ff9;
	cursor: pointer;
}


/* combat sheet */
.combatSheet {
	position: relative;
	margin: 1em 0;
	height: 1.7in;
}
.combatSheet .derivedStatistic label {font-weight: bold;}
.combatSheet .otherModifiers {
	position: absolute;
	width: 4in;
	left: 0;
	top: 0;
}
.combatSheet .defenseModifiers {
	position: absolute;
	width: 1.5in;
	left: 0;
	top: 4.5em;
}
.combatSheet .coordinationModifiers {
	position: absolute;
	width: 2.2in;
	left: 1.7in;
	top: 4.5em;
}
.combatSheet .healthStates {
	position: absolute;
	width: 2in;
	left: 3.9in;
	top: 0;
}
.combatSheet .staminaContainer {
	position: absolute;
	width: 2in;
	left: 5.5in;
	top: 1em;
}
.combatSheet .simpleStates {
	position: absolute;
	left: 5.5in;
	top: 5em;
}
.combatSheet .focusContainer {
	position: absolute;
	width: 4in;
	left: 5in;
	top: 1.45in;
}
.combatSheet .hitPoints {
	font-size: 120%;
	width: 1.5in;
	border: solid 1px gray;
	padding: 35pt 0;
	margin: 1pt 0 6pt 0;
}

/* rolls */
#rollsHeader {margin-top: 0.8em;}
#rollsHeader > span:first-child {font-weight: bold;}
#rolls {
	height: 1in;
	overflow-y: scroll;
	margin-bottom: 1em;
}

/* MENUS */

.menu {
	display: none;
	position: relative;
}
.menu .item {
	padding: 0 0.2em;
	border: solid transparent 1px;
	border-radius: 0.3em;
	margin-bottom: .5em;
	cursor: pointer;
}
.menu .item:hover {
	background: #ff9;
	border: solid #c90 1px;
}

/* ability editor */
#abilityEditor .alias {font-weight: bold;}
#abilityEditor .rankRow {margin: 1em 0;}
#abilityEditor .aliasRow {
	margin: 1em 0;
	padding-left: 2em;
	text-indent: -2em;
}
/*#abilityEditor .aka:last-of-type .comma {display: none;}*/
#abilityEditor .otherAlias {white-space: nowrap;}
#abilityEditor .otherAlias input {width: 2in;}
#abilityEditor .orderRow {margin: 1em 0;}

/* template menu */
#templateMenu .item .name {font-weight: bold;}
#templateMenu .item ul {
	font-size: 10pt;
	list-style: none;
	margin: 0;
	padding: 0;
}
#templateMenu .ability {
	text-indent: -1em;
	padding: 0 0 0 1em;
}
#templateMenu .description {
	margin-bottom: 0.3em;
}
#templateMenu .item {
	position: relative;
}
#templateMenu img {
	float:right;
}
#templateMenuControls {
	position: absolute;
	width: 7in;
	bottom: 0;
	left: 0;
	text-align: center;
}

/* ability menu */
#abilityMenu .item .name {font-weight: bold;}
#abilityMenu .aliases {font-size: 10pt;}
#abilityMenuControls {
	position: absolute;
	width: 7in;
	bottom: 0;
	left: 0;
	text-align: center;
}

/* portrait menu */
#portraitMenu .item {
	width: 132px;
	height: 132px;
	padding: 0;
	float: left;
	background-position: center;
	background-repeat: no-repeat;
}
#portraitMenuControls {
	position: absolute;
	width: 7in;
	bottom: 0;
	left: 0;
	text-align: center;
}

/* SINGLE COLUMN MODE */
@media screen and (max-width:670px) {
	#content {width: 99%;} /* so boxes with borders don't cause scrolling */
	td {display: block; width: 100%;} /* convert tables to a single column */
	
	/* make a bunch of things full screen width instead of specific widths */
	table, .spacer, .noscroll > div, #controls > table, #headers,
		#templateMenuControls, #portraitMenuControls,
		#statsColumn, #abilitiesTable, #description textarea {width: 100%;}

	#portrait {margin-bottom: 1em;}
	#description, #attributes {
		position: relative; 
		float: left;
		right: 0;
	}
	#description {width: 2.6in;}
	#basicActions {clear: both;}
	#templateMenu .ability {width: auto;}
	#templateMenu .noscroll > div {height: 3.5em;} 
	#portraitMenu .noscroll > div {height: 3.5em;}
	#templateMenu .spacer, #portraitMenu .spacer {height: 4em;}
	#controls td.center, #controls td.right {text-align: left;}
	#headers td {width: 2.9in;}
	#characterAbilities {min-height: 1in;}
	#statsColumn {
		position: static;
		width: 1.5in;
	}
	.combatSheet .healthStates, .combatSheet .defenseModifiers,
	.combatSheet .simpleStates,
	.combatSheet .coordinationModifiers, .combatSheet .otherModifiers {
		position: static;
		width: 100%;
		margin: 0.5em 0;
	}
}


/* PRINTED CHARACTER SHEETS */
@media print {
	#controls, #addAbility, #rollsHeader, #rolls, 
	.characterAbility td:last-child {display: none;}
	.combatSheet .otherModifiers {top: 9.5em;}
	#abilitiesColumn {min-height: 2.5in;}
}