body {background-color: #F5FFFF; color: #F5FFFF; font:62.5% sans-serif}
header {
	font-family: 'Concert One', cursive;
	font-size: 2.4em;
	text-align: center;
	color: #051a1a;
	margin: 0 auto;
}
h1, p {
	margin: 0;
	padding: 0 0 4px 0;
}
header p {color: #307AE8; font-family: 'Source Code Pro', monospace;}
.emphasis {font-style: italic;}
.bold {font-weight: bold;}
section {
	color: black;
	background-color: #5591EC;
	padding: 20px;
	margin: 40px 20% 0 20%;
	text-align: center;
	border: 7px double #307AE8;
}
#sheetContent {
	color: black;
	width: 1410px;
	clear: both;
	margin: 0 auto;
	padding: 0;
	margin-bottom: 68px;
}
button {
	color: black;
	width: 320px;
	height: 35px;
	font-size: 1.4em;
	margin: 12px 0 12px 0;
}
form {
	color: black;
	background-color: #FF851F;
	margin: 0;
	padding: 0;
}
fieldset {
	color: black;
	font-size: 1.2em;
	margin: 0;
	padding: 5px;
}
.label {
	font-size: 1.4em;
	margin: 0;
	padding: 0 0 0 2%;
	text-align: left;
}
.inputBox {
	padding: 0;
	margin: 0 0 10px 0;
	width: 95%;
}
#newInfo {display: none;}
footer {
	color: black;
	position: fixed;
	bottom: 0;
	padding: 0;
	width: 99%;
	margin: 0%;
	text-align: center;
	font-size: 1em;
	color: #004d4d;
	z-index: 4;
}
footer p {
	padding-top: 3px;
	background-color: #F5FFFF;
}
footer .footerTopBorder {
	height: 3px;
	background: linear-gradient(rgba(245, 255, 255, 0.25) 0%, rgba(245, 255, 255, 0.4) 30%, rgba(245, 255, 255, 0.9) 100%);
}
#file {
	position: absolute;
	text-align: left;
	top: 2px;
	left: 3%;
}
#fileMenuWindow {
	color: black;
	font-size: 1.4em;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	border: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: rgba(250, 250, 250, 0.6);
}
#fileMenuWindow ol {
	display: inline-block;
	margin-top: 60px;
	width: 300px;
	padding: 15px;
	border: 1px solid black;
	background-color: #FFF1E6;
	text-align: center;
	box-shadow: 4px 2px 12px;
}
#fileMenuWindow li {
	text-align: left;
	list-style-type: none;
	margin: 0;
	padding: 6px 18px;
}
#fileMenuWindow button {
	width: 100%;
}
#userName {
	position: absolute;
	text-align: right;
	top: 2px;
	right: 3%;
}
#sheetNav {
	width: 1410px;
	margin: 0 auto;
	margin-bottom: 50px;
}
#userNameMenu, #fileMenu, #smallScreenNav {display: none;}
header ul {
	position: relative;
	top: 2px;
	width: 120px;
	border: 1px solid black;
	background-color: #FFF1E6;
	list-style-position: outside;
	margin: 0;
	padding: 0;
}
header li {
	list-style-type: none;
	margin: 0;
	padding: 4px 10px 4px 10px;
}

#smallSheetMenu ul {
	display: none;
	position: absolute;
	top: 80px;
	width: 370px;
	margin: 9px;
}
.sheetLinks, #selectedSheet2 {
	float: left;
	width: 227px;
	font-family: 'Source Code Pro', monospace;;
	font-size: 0.7em;
	color: #FFFFFF;
	background-color: #FF851F;
	border: 3px outset #5591EC;
	margin: 1px;
	padding: 7px 0;
}
article {
	display: none;
	background-color: #E6FFFF;
	padding: 0;
	margin: 0;
	text-align: left;
}
.clearFloat {clear: both;}

/* font sizes and styles */
.majorContainerLabel {
	font-family: 'Source Code Pro', monospace;
	font-variant: small-caps;
	font-size: 2em;
	padding: 0 14px 2px 7px;
	background-color: #124ba1;
	color: #FFFFFF;
	margin: 0px;
	float:left;
}

/* initiative adjustment */
#userInitiativeLabel {margin-top: 1.3em;}
.minorContainerLabel {
	font-family: ariel;
	font-size: 1.4em;
	font-variant: small-caps;
	color: #000000;
	margin: 0 3px 12px 9px;
	float: left;
}
.spellsPerDayText {
	font-family: ariel;
	font-size: 1.8em;
	font-variant: small-caps;
	color: #000000;
	margin: 0;
	padding: 0;
	float: left;
}
.spellsPerDayText2 {
	font-family: ariel;
	font-size: 1.6em;
	font-variant: none;
	color: #000000;
	margin: 0;
	padding-top: 2px;
	float: left;
}
.standardLabelFont {
	font-family: Ariel;
	font-size: 1em;
	font-variant: small-caps;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}
.standardCalculationFont {
	font-family: Ariel;
	font-size: 1.6em;
	font-variant: small-caps;
	float: left;
	padding: 0;
	margin: 0;
}
.standardCalculationFont img {
	vertical-align: bottom;
	height: 24px;
}
.standardCalculationFontAlt {
	font-family: Ariel;
	font-size: 1.7em;
	font-variant: small-caps;
	float: left;
	padding: 0;
	margin: 0;
}
.standardCalculationFontAlt img {
	vertical-align: bottom;
	height: 28px;
}
.experienceCalculationFont {
	font-family: Ariel;
	font-size: 1.75em;
	font-variant: small-caps;
	float: left;
	padding: 0;
	margin: 0;
}
.largeCalculationFont {
	font-family: Ariel;
	font-size: 2em;
	font-variant: small-caps;
	float: left;
	padding: 0;
	margin: 0;
}
.smaller {
	font-size: 0.7em;
}
.conditionalText {
	font-family: ariel;
	font-size: 1.2em;
	font-variant: small-caps;
	color: #000000;
	margin: 0 3px 12px 9px;
	padding: 2px 0 1px 0;
	float: left;
}
.conditionalText2 {
	font-variant: none;
	font-size: 0.8em;
}
.standardInfoFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.4em;
	padding: 0;
	margin: 0;
}
.experienceInfoFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.5em;
	padding: 0;
	margin: 0;
}
.normalInfoFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1em;
	padding: 0;
	margin: 0;
}
#deityTitle {
	font-family: 'Source Code Pro', monospace;
	font-size: 2em;
	padding: 0;
	margin: 0;
}
.mathSignFont {
	font-family: Ariel;
	font-size: 1.8em;
	font-variant: small-caps;
	float: left;
	text-align: center;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
}
.trainedOnlyFont {
	font-family: Ariel;
	font-size: 1.2em;
	font-variant: small-caps;
	float: left;
	text-align: center;
	vertical-align: text-bottom;
	padding: 4px 0 5px 0;
	margin: 0;
}
.cellFont {
	font-family: Courier;
	font-size: 1.8em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.cellFontCentered {
	font-family: Courier;
	font-size: 1.8em;
	text-align: center;
	padding: 0;
}
.cellFontCentered2 {
	font-family: Courier;
	font-size: 1.3em;
	text-align: center;
	padding: 0;
}
.cellStatBlock {
	font-family: Courier;
	font-size: 1.0em;
	text-align: center;
	padding: 0;
}
.classFeatureCell {
	width: 45px;
}
.cellFontCenteredLarge {
	font-family: Courier;
	font-size: 2.7em;
	text-align: center;
	padding: 6px 0px;
}
.dropDownFont {
	font-family: Courier;
	font-size: 1.4em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.dropDownFont2 {
	font-family: Courier;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.dropDownFont3 {
	font-family: Courier;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.orangeOnDarkBlueFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
	padding: 2px;
	margin: 0;
	background-color: #0D3673;
	color: #FF851F;
}
.skillsFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.2em;
	padding-top: 0.45em;
}
.skillsFontSmaller {
	font-family: 'Source Code Pro', monospace;
	font-size: 0.9em;
	padding-top: 0.6em;
}
.alignmentFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.8em;
	padding: 0;
	margin: 0;
	font-variant: small-caps;
}
.notesText {
	font-family: Ariel;
	font-size: 1.4em;
	margin: 0;
	padding: 0;
}
.levelLabel {
	float: left;
	font-family: 'Black Ops One', cusive;
	font-size: 2em;
	color: #FF851F;
	background: #000000;
	text-align: center;
	padding: 4px 0 0 0;
	margin: 0 3px 0 0;
}
.headerCalculationFont {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.6em;
	padding: 0 14px;
	margin: 0;
	font-variant: small-caps;
	border-bottom: 1px solid #124ba1;
}
.headerCalculationFont button {
	float: right;
	font-family: 'Black Ops One', cursive;
	font-size: 0.8em;
	margin: 0px;
	padding: 0px;
	height: 20px;
	background-color: #5591EC;
	color: white;
}
.headerCalculationFontCreationWindow {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.0em;
	padding: 0 14px;
	margin: 0;
	font-variant: small-caps;
	border-bottom: 1px solid #124ba1;
}
.itemNameText {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.2em;
	padding: 0 7px;
	margin: 0;
	font-variant: small-caps;
	color: #D6DBDF;
	background-color: black;
}
.itemSectionText {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	font-variant: small-caps;
	border-bottom: 1px solid black;
}
.statBlockNameText {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.6em;
	padding: 0 7px;
	margin: 0;
	font-variant: small-caps;
	color: #E6FFFF;
	background-color: black;
}
.statBlockSectionText {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.4em;
	padding: 0;
	margin: 0;
	font-variant: small-caps;
	border-bottom: 1px solid black;
}
.preselectedChoiceFont {
	font-family: Courier;
	font-size: 1.3em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#designDrone {width: 30%;}
#designCustomRig {width: 40%;}
.smallerHeader {
	font-size: 0.8em;
	padding-top: 2px;
}
.centeredPadding7 {
	padding: 4px 0 3px 0;
}
.addLineAbove {
	border-top: 2px solid black;
}
/* specific situations */
#characterExperience {
	text-align: right;
	font-family: courier;
	font-size: 1em;
	width: 90%;
}
#experienceNext {
	font-family: courier;
	font-size: 1.8em;
	padding: 3px 0 0 0;
}
#nameProfession1, #nameProfession2, #nameProfession3 {
	padding-left: 1.5%;
}
.classFeaturesContainer {
	padding-left: 5.5em;
	text-indent: -5.5em;
}
#characterSenses, #characterLanguages, #characterClass {
	height: 23px;
	resize: none;
	box-shadow: none;
    outline: none;
    border: 1px solid lightgrey;
}
input {
	box-shadow: none;
    outline: none;
    border: 1px solid lightgrey;
}
.secondLinePadding {padding-top: 1.3em;}
.middleLinePadding {padding-top: 0.65em;}
.middleLinePaddingMinorLabels {padding-top: 0.35em;}
.rightAlignText {text-align: right; padding-right: 3px;}
.leftAlignedPadding {text-align: left; padding-left: 7px;}
.verticalPaddedToHeight {padding-top: 9px;}
.dropdownPaddedToHeight {padding-top: 6.5px;}
.labelFillWidth {width: 100%; box-sizing: border-box;}
.classFeatureSelectMargin {margin: 5px 0 5px 3px;}
.classFeatureSelectMargin2 {margin: 5px 0 5px 60px;}
.centered {text-align: center;}
.horizontalSpacer30 {width: 30px;}
/* large containers */
.majorContainer {
	border: 2px solid #124ba1;
	padding: 3px;
	margin: 0 0 1% 0;
}
.container100 {
	display: table;
	width: 99%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container80 {
	display: table;
	width: 79%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container74 {
	display: table;
	width: 73%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container70 {
	display: table;
	width: 69%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container68 {
	display: table;
	width: 67%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container67 {
	display: table;
	width: 66%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container66 {
	display: table;
	width: 65.6%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container65 {
	display: table;
	width: 64%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container50 {
	display: table;
	width: 49%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container36 {
	display: table;
	width: 35.6%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container35 {
	display: table;
	width: 34%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container34 {
	display: table;
	width: 33%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container33 {
	display: table;
	width: 32.3%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container32 {
	display: table;
	width: 31%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container30 {
	display: table;
	width: 29%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box; 
}
.container26 {
	display: table;
	width: 25%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container20 {
	display: table;
	width: 19%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}

/* inside containers with margins */
.innerContainerIndent {
	width: 97%
	float: left;
	margin: 0 0 0 3%;
	box-sizing: border-box;
}
.container100i {
	width: 99.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container99i {
	width: 98.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container98i {
	width: 97.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container97i {
	width: 96.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container96i {
	width: 95.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container95i {
	width: 94.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container94i {
	width: 93.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container93i {
	width: 92.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container92i {
	width: 91.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container91i {
	width: 90.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container90i {
	width: 89.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container89i {
	width: 88.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container88i {
	width: 87.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container87i {
	width: 86.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container86i {
	width: 85.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container85i {
	width: 84.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container84i {
	width: 83.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container83i {
	width: 82.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container82i {
	width: 81.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container81i {
	width: 80.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container80i {
	width: 79.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container79i {
	width: 78.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container78i {
	width: 77.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container77i {
	width: 76.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container76i {
	width: 75.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container75i {
	width: 74.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container74i {
	width: 73.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container73i {
	width: 72.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container72i {
	width: 71.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container71i {
	width: 71.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container70i {
	width: 69.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container69i {
	width: 68.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container68i {
	width: 67.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container67i {
	width: 66.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container66i {
	width: 65.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container655i {
	width: 65%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container65i {
	width: 64.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container64i {
	width: 63.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container63i {
	width: 62.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container62i {
	width: 61.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container61i {
	width: 60.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container60i {
	width: 59.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container59i {
	width: 58.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container58i {
	width: 57.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container57i {
	width: 56.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container56i {
	width: 55.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container55i {
	width: 54.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container54i {
	width: 53.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container53i {
	width: 52.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container52i {
	width: 51.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container51i {
	width: 50.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container50i {
	width: 49.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container50iS {
	width: 49%;
	float: left;
	margin: 0.5%;
	box-sizing: border-box;
}
.container50alt {
	width: 50%;
	float: left;
	margin: 0;
	box-sizing: border-box;
}
.container495i {
	width: 49%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container49i {
	width: 48.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container48i {
	width: 47.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container47i {
	width: 46.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container46i {
	width: 45.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container45i {
	width: 44.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container44i {
	width: 43.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container43i {
	width: 42.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container42i {
	width: 41.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container41i {
	width: 40.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container40i {
	width: 39.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container39i {
	width: 38.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container38i {
	width: 37.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container37i {
	width: 36.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container36i {
	width: 35.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container35i {
	width: 34.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container34i {
	width: 33.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container33i {
	width: 32.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container32i {
	width: 31.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container31i {
	width: 30.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container30i {
	width: 29.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container29i {
	width: 28.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container28i {
	width: 27.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container27i {
	width: 26.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container26i {
	width: 25.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container25i {
	width: 24.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container24i {
	width: 23.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container23i {
	width: 22.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container22i {
	width: 21.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container21i {
	width: 20.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container205i {
	width: 20%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container20i {
	width: 19.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container19i {
	width: 18.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container18i {
	width: 17.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container17i {
	width: 16.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container16i {
	width: 15.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container15i {
	width: 14.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container145i {
	width: 14%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container14285i {
	width: 13.785%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container14i {
	width: 13.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container13i {
	width: 12.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container12i {
	width: 11.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container11i {
	width: 10.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container10i {
	width: 9.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container9i {
	width: 8.5%;
	float: left;
	margin: 0; /* DIFFERENT */
	padding: 0;
	box-sizing: border-box;
}
.container8i {
	width: 7.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container7i {
	width: 6.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container6i {
	width: 5.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container6iCheckbox {
	width: 4.75%;
	float: left;
	margin: 8px 0.25% 0.25% 1%;
	box-sizing: border-box;
}
.container5i {
	width: 4.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container4i {
	width: 3.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container3i {
	width: 2.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container2i {
	width: 1.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container1i {
	width: 0.5%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.containerPoint5i {
	width: 0.5%;
	float: left;
	margin: 0;
	box-sizing: border-box;
}
.container81s {
	width: 70%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container25s {
	width: 36.4%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container12s {
	width: 17%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container10s {
	width: 14%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.container6s {
	width: 8.2%;
	float: left;
	margin: 0.25%;
	box-sizing: border-box;
}
.addHeight21 {
	height: 21px;
}
#zeroHeight68 {
	width: 67.5%;
	float: left;
	margin: 0;
	padding: 0;
	height: 1px;
	box-sizing: border-box;
}
#zeroHeight32 {
	width: 32.5%;
	float: left;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	height: 1px;
	border-top: 2px solid #124ba1;
}
/* inside containers without margins */
.containerfill {
	width: 100%;
}
.verticalSpacer30 {
	height: 30px;
}
.verticalSpacer20 {
	height: 20px;
}
.verticalSpacer18 {
	height: 18px;
}
.verticalSpacer15 {
	height: 15px;
}
.verticalSpacer14 {
	height: 14px;
}
.verticalSpacer7 {
	height: 7px;
}
.verticalSpacer6 {
	height: 6px;
}
.alignment33 {
	position: relative;
	width: 33.3%;
	float: left;
	box-sizing: border-box;
	border: 1px solid black;
	background-color: #8CB5F2;
}
.alignmentContent {
	position: absolute;
	padding-top: 42%;
	width: 100%;
	text-align: center;
}
.alignment33:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.philosophySplit {
	width: 48.5%;
	margin: 0;
	float: left;
}
.alignmentContentB {
	position: absolute;
	padding: 17% 0;
	width: 100%;
	text-align: center;
	z-index: 2;
}
.alignmentContentC {
	position: absolute;
	padding: 67% 0 17.25% 0;
	width: 100%;
	text-align: center;
	z-index: 1;
}
.alignmentContentD {
	position: absolute;
	padding: 4% 0;
	width: 100%;
	text-align: center;
	z-index: 4;
}
.alignmentContentE {
	position: absolute;
	padding: 29% 0 5% 0;
	width: 100%;
	text-align: center;
	z-index: 3;
}
.alignmentContentF {
	position: absolute;
	padding: 54% 0 5% 0;
	width: 100%;
	text-align: center;
	z-index: 2;
}
.alignmentContentG {
	position: absolute;
	padding: 79% 0 5% 0;
	width: 100%;
	text-align: center;
	z-index: 1;
}
.levelLabel {
	float: left;
	font-family: 'Black Ops One', cursive;
	font-size: 3em;
	color: #FF851F;
	background: #000000;
	text-align: center;
	padding: 6px 0 2px 0;
	margin: 0 3px 7px 0;
}
.levelLabelFeatures {
	float: left;
	font-family: 'Black Ops One', cursive;
	font-size: 1.5em;
	color: #FF851F;
	background: #000000;
	text-align: center;
	padding: 3px 3px 0 3px;
	margin: 0 3px 3px 0;
	width: 10%;
}
.levelLabelFeaturesSpacer {
	float: left;
	padding: 3px 3px 0 3px;
	margin: 0 3px 3px 0;
	width: 10%;
}
.initiativeContainerException {
	width: 70%;
	float: left;
	margin: 0;
}
.textareaContainer {
	width: 100%;
	margin: 0;
	padding: 4px 14px 2px 7px;
	border: 2px solid #124ba1;
	box-sizing: border-box;
	white-space: pre-wrap;
	resize: none;
}
.textareaEquipment {
	width: 98%;
	margin: 1%;
	padding: 4px 14px 2px 7px;
	border: none;
	box-sizing: border-box;
	white-space: pre-wrap;
	resize: none;
}
#backgroundStory {
	height: 100px;
}
#userNotesBox {
	height: 222px;
}
.spellSelectionContainer {
	padding: 0;
	font-family: Ariel;
	font-size: 1.2em;
	font-variant: none;
}
.traitContainer {
	padding: 0 0 6px 3%;
	font-family: Ariel;
	font-size: 1.4em;
	font-variant: none;
}
.traitContainer button {
	font-family: 'Black Ops One', cursive;
	font-size: 0.9em;
	padding: 0;
	margin: 5px;
}
.traitContainer img {
	float: left;
	vertical-align: top;
	height: 45px;
	padding-right: 6px;
}
.traitContainer table {
	border-collapse: collapse;
}
.traitContainer table th, table td {
	border-right: 18px solid #E6FFFF;
	border-left: 18px solid #E6FFFF;
}
.traitContainer table img {
	float: left;
	vertical-align: top;
	height: 24px;
	padding-right: 0;
}
.traitContainer .revelationImages {
	float: right;
	padding-top: 4px;
	padding-right: 18px;
}
.traitContainer .revelationImages img {
	float: none;
	vertical-align none;
	height: 20px;
	padding: 0;
	margin: 0;
}
.traitContainerCreationWindow {
	padding: 0 0 6px 3%;
	font-family: Ariel;
	font-size: 1.0em;
	font-variant: none;
}
.traitContainerSpecialAbilityIndent {
	padding: 2px 0 2px 3%;
	font-family: Ariel;
	padding-left: 2em;
	text-indent: -1em;
	font-size: 1.0em;
	font-variant: none;
}
.statContainerSpecialAbilityIndent {
	padding: 2px 0 2px 3%;
	font-family: Ariel;
	padding-left: 2em;
	text-indent: -1em;
	font-size: 1.4em;
	font-variant: none;
}
.removeSpaces {
	margin: 0px;
	padding: 0 0 0 16px;
}
.skillAlt {
	background-color: #D1E1FA;
	border-color: #D1E1FA;
}
.spellName {
	border-right: 9px solid #E6FFFF;
	border-left: 0 solid #E6FFFF;
}
.spellLevels {
	border-top: 0 solid #D1E1FA;
	border-right: 2px solid #D1E1FA;
	border-bottom: 2px solid #D1E1FA;
	border-left: 0 solid #D1E1FA;
}
.spellIcon {
	border: 0 solid white;
	border-bottom: 2px solid #D1E1FA;
	padding-left: 9px;
}
.calculatedRange {
	color: #327AE8;
	padding: 0 7px;
}
.cellSpacer {
	border: 0 solid white;
	padding: 0 3px;
}
.skillContent {
	margin: 0 7px;
	padding: 0 4px;
	color: #327AE8;
	font-size: 1.2em;
}
.skillContentSmaller {
	margin: 0 7px;
	padding: 0 4px;
	color: #327AE8;
	font-size: 1.1em;
}
.selectedTask {
	border-bottom: 3px inset #327AE8;
}
.featSpan {
	padding: 0 0 6px 3%;
	font-family: Ariel;
	font-size: 0.9em;
	font-variant: none;
}
.philosohpyFont {
	padding: 0;
	font-family: Ariel;
	font-size: 1em;
	font-variant: none;
}
.CalculatedSkillsContainer {
	padding: 0 0 6px 3%;;
	font-family: Ariel;
	font-size: 0.8em;
	font-variant: none;
}
.noIndent {
	padding: 0;
}
.addIndent {
	padding-left: 7px;
}
.addIndentSelectedFeatures {
	padding-left: 14px;
}
.floatRight {
	float: right;
}
.alignRight {
	text-align: right;
}
.leveledThemeAbility {font-variant: small-caps;}
.L6ThemeAbility, .L12ThemeAbility, .L18ThemeAbility {color: #BBBBD0;}
.classImage img {
	width: 100%;
	height: auto;
}
#mysticConnectionImage {
	position: absolute;
}
#mysticConnectionImage img {
	width: 59px;
	height: auto;
	z-index: 2;
	padding: 80px 0 0 80px;
}
.connectionSpellsKnownContainer {
	font-family: Ariel;
	font-size: 1.1em;
	text-align: center;
	color: maroon;
	padding-top: 0;
	margin-top: 0;
}
.orangeDivider {
	border-bottom: 1px inset #FF851F;
}
#symbolPlaceholder {text-align: center;}
#symbolPlaceholder img {width: auto; height: 290px;}
.placeholderSLAs {
	height: 50px;
	float: right;
}
#addRemoveEQ {float: right; margin: 0 1% 0 0;}

.ui-autocomplete {
	list-style-type: none;
	color: #124BA1;
	width: 30%;
	background-color: #F0F5F5;
	font-family: Courier;
	font-size: 1.75em;
	padding-left: 1%;
	z-index: 4;
}
#creationWindow {
	color: black;
	font-size: 1.4em;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	border: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: rgba(153, 180, 225, 0.5);
}
#creationWindow button {
	position: absolute;
	width: 20%;
	left: 40%;
	bottom: 0;
	margin: 1%;
	padding: 0;
}
#droneCol1, #droneCol2, #droneCol3, #itemCol1, #itemCol2 {
	position: relative;
	overflow: auto;
}
.disableScrolling {overflow: hidden;}
.mainOverlayContainer {
	position: relative;
	display: inline-block;
	margin: 5%;
	width: 80%;
	height: 80%;
	padding: 1%;
	border: 4px solid #FF851F;
	background: linear-gradient(to bottom, #CACACA, #F2F2F2, #DBDBDB, #EAEAEA);
	text-align: center;
	box-shadow: 6px 3px 18px;
}
.equipmentInfo {
	font-size: 0.8em;
	padding: 2px 0 0 0;
	margin: 0.25%;
	max-height: 2%;
	max-width: 2%;
	height: auto;
	width: auto;
	border: none;
}
.expandedEquipmentInfo {
	background-color: #D6DBDF;
	margin-top: 0;
	margin-bottom: 15px;
}
.descriptionContainer {display: none;}
.equipmentDescriptionText {
	padding: 0.5% 1% 1% 3%;
	font-family: Ariel;
	font-size: 1.2em;
	font-variant: none;
}
.equipmentDescriptionHeader1 {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.3em;
	padding: 0.5% 1% 0 3%;
	margin: 0;
	font-variant: small-caps;
}
.equipmentDescriptionHeader2 {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.3em;
	padding: 0.5% 0 0 0;
	margin: 0;
	font-variant: small-caps;
}
.hintLink {
	color: #5591EC;
}
#customInfoBox1,#customInfoBox2,#customInfoBox3,#customInfoBox4,#customInfoBox5,#customInfoBox6,#customInfoBox7,#customInfoBox8,#customInfoBox9,#customInfoBox10,#customInfoBox11,#customInfoBox12,#customInfoBox13,#customInfoBox14,#customInfoBox15,#customInfoBox16,#customInfoBox17,#customInfoBox18,#customInfoBox19,#customInfoBox20,#customInfoBox21,#customInfoBox22,#customInfoBox23,#customInfoBox24 {
	position: relative;
	z-index: 2;
}
#customInfo1,#customInfo2,#customInfo3,#customInfo4,#customInfo5,#customInfo6,#customInfo7,#customInfo8,#customInfo9,#customInfo10,#customInfo11,#customInfo12,#customInfo13,#customInfo14,#customInfo15,#customInfo16,#customInfo17,#customInfo18,#customInfo19,#customInfo20,#customInfo21,#customInfo22,#customInfo23,#customInfo24 {
	position: relative;
	z-index: 3;
}
.combatDiagram {
	float: left;
	border-collapse: collapse;
	border: 4px solid black;
}
.combatDiagram caption {
	font-family: 'Source Code Pro', monospace;
	font-weight: bold;
}
.combatDiagram td {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.3em;
	border: 2px solid #D6DBDF;
	height: 60px;
	width: 60px;
	padding: 0;
	margin: 0;
}
.combatImageSpace {
	position: relative;
	float: left;
	left: -143px;
	top: 66px;
	z-index: 0;
}
.combatImageIntersection {
	position: relative;
	float: left;
	left: -174px;
	top: 98px;
	z-index: 0;
}
.combatImageSpace img, .combatImageIntersection img {
	width: 94px;
	height: 94px;
}
.combatDiagram .smallGrid {
	border: none;
	height: 30px;
	width: 30px;
}
.combatDiagram .smallGridW {
	border: 0px solid #D6DBDF;
	height: 62px;
	width: 30px;
}
.combatDiagram .noGrid {
	font-family: 'Source Code Pro', monospace;
	font-size: 1.4em;
	border: none;
	height: 62px;
	width: 62px;
}
#gridIntersectionOverlay {
	position: relative;
	z-index: 2;
	top: -254px;
}
.gridIntersectionOverlayFixMargin {
	position: relative;
	margin-bottom: -254px;
	z-index: 1;
}
#gridIntersectionOverlayFix {
	position: relative;
	top: -254px;
}
#combatSlotsContainer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"c1-1 c1-2 c1-3"
		"c2-1 c2-2 c2-3"
		"c3-1 c3-2 c3-3"
		"c4-1 c4-2 c4-3"
		"c5-1 c5-2 c5-3"
		"c6-1 c6-2 c6-3";
	grid-column-gap: 2%;
}
.equipmentSlotsUsed {
	text-align: right;
	font-family: Ariel;
	font-size: 1.4em;
	font-variant: small-caps;
	padding-top: 9px;
}
#mainInventory, #equippedInventory {
	list-style-type: none;
	padding: 0;
}
#equipArmor, #equipWeapons, #equipPersonalArmorUpgrades, #equipPersonalUpgrades, #equipAugments, #equipMagicItems {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#createNewInventoryItem, #createNewInventoryLocation {
	width: 50%;
	height: 38px;
	margin: 0;
	float: left;
	box-sizing: border-box;
	border-radius: 4px;
	text-align: center;
}
.createItemOuterBorder {
	position: relative;
	margin-top: 2px;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	height: 19px;
	border-top: 2px solid #BCCAE1;
	border-left: 2px solid #BCCAE1;
	border-radius: 3px;
}
.createItemInnerBorder {
	position: relative;
	font-family: 'Source Code Pro', monospace;
	font-size: 1.4em;
	color: #E6FFFF;
	background-color: #BCCAE1;
	margin: 1px;
	width: 300px;
	border: 1px solid #BCCAE1;
	border-radius: 3px;
	padding: 1px;
}
.createItemTitleArea {
	float: left;
	color: #D1E1FA;
	background-color: #E6FFFF;
}
.removeLocation {
	position: relative;
	top: 7px;
	margin: 0;
	float: right;
	box-sizing: border-box;
	border-radius: 4px;
	text-align: center;
}
.removeOuterBorder {
	position: relative;
	top: -3px;
	margin-top: 2px;
	margin-left: auto;
	margin-right: auto;
	width: 180px;
	height: 19px;
	border-top: 2px solid #D1E1FA;
	border-left: 2px solid #D1E1FA;
	border-radius: 3px;
}
.removeInnerBorder {
	position: relative;
	font-family: 'Source Code Pro', monospace;
	font-size: 1.4em;
	color: #BCCAE1;
	background-color: #E6FFFF;
	margin: 1px;
	width: 180px;
	border: 1px solid #D1E1FA;
	border-radius: 3px;
	padding: 1px;
}
.removeTitleArea {
	float: right;
	color: #E6FFFF;
	background-color: #D1E1FA;
}
.inventoryCard {
	height: auto;
	margin: 0px 0px 8px 0px;
	float: left;
	box-sizing: border-box;
	border-radius: 7px;
	background: linear-gradient(to bottom, #ADA996, #f2f2f2, #DBDBDB, #EAEAEA);
	padding: 3px 1px 3px 1px;
}
.inventoryCardText {
	padding: 0;
	margin: 0;
	font-variant: small-caps;
	font-family: ariel;
	font-size: 1.5em;
}
.inventoryCardTextSmall {
	padding: 0;
	margin: 0;
	font-variant: small-caps;
	font-family: ariel;
	font-size: 1.2em;
}
.inventoryCardInfoText {
	padding: 0;
	margin: 0;
	font-family: Courier;
	font-size: 1.5em;
}
.inventoryCardInfoTextSmall {
	padding: 0;
	margin: 0;
	font-family: Courier;
	text-transform: none;
	font-size: 0.8em;
}
.inventoryButtons {
	font-family: ariel;
	font-size: 1.0em;
	padding: 3px;
	color: #2b2922;
	border: 3px outset #dddcd4;
	background: linear-gradient(to left, #dddcd4, #c7c4b7);
}
.connectedFusion {
	font-family: Ariel;
	text-transform: uppercase;
	font-size: 1.6em;
	margin: -5px 0 14px 0;
	padding: 2px 0 2px 6px;
	background: black;
	color: white;
}
.connectedLevel {
	position: relative;
	font-family: 'Source Code Pro', monospace;
	text-transform: uppercase;
	font-size: 1.4em;
	margin: -14px 0 0 -19%;
	padding: 2px 0 2px 6px;
	background: red;
	color: white;
	border: 2px solid white;
}
.connectedSlots {
	position: relative;
	font-family: 'Source Code Pro', monospace;
	text-transform: uppercase;
	font-size: 1.4em;
	margin: -14px 0 0 -19%;
	padding: 2px 0 2px 6px;
	background: blue;
	color: white;
	border: 2px solid white;
}
.removeFusionSealButton {
	font-family: ariel;
	text-transform: none;
	font-size: 0.4em;
	padding: 1px 2px;
	margin: 0 0 0 0;
	border: 2px outset #6d6c64;
	background: linear-gradient(to left, #6d6c64, #575447);
	color: white;
}


.confirmButton {
	width: 300px;
	margin: 5px auto 0 auto;
	font-family: Courier;
	font-size: 1.4em;
	color: white;
	border: 3px outset #FF851F;
	background: linear-gradient(to left, #FF851F, #CC5C00);
}
.confirmButtonSplit {
	width: 146px;
	float: left;
	margin: 5px 0;
	padding: 1px 0;
	font-family: Courier;
	font-size: 1.2em;
	color: white;
	border: 3px outset #FF851F;
	background: linear-gradient(to left, #FF851F, #CC5C00);
}
.confirmButtonTrifoldOn {
	width: 92px;
	float: left;
	margin: 5px 0;
	padding: 1px 0;
	font-family: Courier;
	font-size: 1.2em;
	color: white;
	border: 3px outset #FF851F;
	background: linear-gradient(to left, #FF851F, #CC5C00);
}
.confirmButtonTrifoldOff {
	width: 92px;
	float: left;
	margin: 5px 0;
	padding: 1px 0;
	font-family: Courier;
	font-size: 1.2em;
	color: white;
	border: 3px solid #A1B1CA;
	background: linear-gradient(to left, #A1B1CA, #8C9AB1);
}
.confirmButtonOff {
	width: 300px;
	margin: 5px auto 0 auto;
	font-family: Courier;
	font-size: 1.4em;
	color: black;
	border: 3px solid #C6D5F7;
	background: linear-gradient(to left, #D1E1FA, #BCCAE1);
}
.systemWrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}
.systemMessage {
	width: 30%;
	height: auto;
	padding: 15px;
	border: 4px solid #FF851F;
	background: linear-gradient(to bottom, #CACACA, #F2F2F2, #DBDBDB, #EAEAEA);
	box-shadow: 6px 3px 18px;
}
#closeMessage {
	margin: 25px auto 0 auto;
	padding: 2px;
	width: 85px;
	border: 1px solid black;
	background: lightgray;
}
.systemButton {
	margin: 25px auto 0 auto;
	padding: 4px;
	border: 1px solid black;
	background: lightgray;
}

#itemCol1, #itemCol2 {
	height: 640px;
}
#itemCol2 {
	border-left: 1px solid #4666FF;
	padding-left: 10px; 
}
#sortInventory {
	color: #FFFFFF;
	background-color: #416FB3;
	font-family: 'Source Code Pro', monospace;
	font-variant: small-caps;
	font-size: 1.4em;
	padding: 1px 6px 2px 7px;
	margin: 0 0 0 15px;
	border: 1px outset #FFFFFF;
	float: left;
}
.batteryContainer {
	position: relative;
	top: -3px;
	left: 7px;
	background-color: #333333;
	color: orange;
	height: 18px;
	padding: 1px 1px 1px 3px;
	border: 1px inset #999999;
	transform: skew(-15deg);
}
.batteryCharge {
	background-color: #FF851F;
}

/* TWO Column ViewPort (iPad) */
@media screen and (max-width: 1439px) {
	#sheetContent, #sheetNav {width: 994px;}
	.sheetLinks {font-size: 0.8em;width: 323px;}
	/* overview sheet */
	#userNotesBox {height: 100px;}
	/* features sheet */
	#mysticConnectionImage img {
		width: 39px;
		padding: 55px 0 0 55px;
	}
	/* combat sheet */
	#combatSlotsContainer {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"c1-1 c1-2"
			"c1-3 c2-1"
			"c2-2 c2-3"
			"c3-1 c3-2"
			"c3-3 c4-1"
			"c4-2 c4-3"
			"c5-1 c5-2"
			"c5-3 c6-1"
			"c6-2 c6-3";
		grid-column-gap: 2%;
	}
}
/* ONE Column ViewPort LARGE (iPhone) */
@media screen and (max-width: 1023px) {
	/* home screen */
	button {
		width: 220px;
		height: 35px;
		font-size: 1.1em;
		margin: 10px 0;
	}
	.label, #timeline {font-size: 0.9em;}
	.label {padding-top: 7px;}
	/* character sheet */
	#sheetContent, #sheetNav {width: 738px;}
	.sheetLinks {width: 361px;}
	/* background sheet */
	.philosophySplit {width: 100%;}
	/* features sheet */
	#mysticConnectionImage img {
		width: 29px;
		padding: 40px 0 0 40px;
	}
	/* combat sheet */
	#combatSlotsContainer {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"c1-1"
			"c1-2"
			"c1-3"
			"c2-1"
			"c2-2"
			"c2-3"
			"c3-1"
			"c3-2"
			"c3-3"
			"c4-1"
			"c4-2"
			"c4-3"
			"c5-1"
			"c5-2"
			"c5-3"
			"c6-1"
			"c6-2"
			"c6-3";
		grid-column-gap: 2%;
	}
}
/* ONE Column ViewPort SMALL (smaller phone)*/
@media screen and (max-width: 767px) {
	/* home screen */
	section {margin-left: 10%; margin-right: 10%; margin-top: 20px;}
	#timeline {font-size: 0.8em;}
	button {font-size: 0.8em;}
	#fileMenuWindow ol {width: 240px}
	/* character sheet */
	header {margin-top: 20px; width: 390px; font-size: 1.8em;}
	#sheetContent {width: 384px;}
	#sheetNav {display: none;}
	#smallScreenNav {display: block; margin: 0 auto;}
	.sheetLinks, #selectedSheet2 {
		font-size: 1.2em;
		width: 384px;
		padding: 3px 0;
		margin: 0 auto 2px auto;
	}
	/* FONTS */
	body {font:45% sans-serif;}
	.traitContainer {
		font-size: 2.0em;
	}
	/* background sheet */
	#symbolPlaceholder img {width: auto; height: 200px;}
	/* features sheet */
	#mysticConnectionImage img {width: 29px; padding: 44px 0 0 44px;}
	.preselectedChoiceFont {font-size: 1.1em;}
}