roll20-character-sheets-tester/Free Spacer/FreeSpacer.css

/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input, select
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 10px;
	font: inherit;
	vertical-align: baseline;
}
	/* Multiple Sheet Functionality */
	div.sheet-sheetType
	{
		display: none;
	}

	input.sheet-crewmemberSelector:checked ~ div.sheet-crewmemberSheet,
	input.sheet-shipSelector:checked ~ div.sheet-shipSheet,
	input.sheet-launchSelector:checked ~ div.sheet-launchSheet
	{
		display: block;
	}

	/* Multiple Tab Functionality */
	div.sheet-tabType
	{
		display: none;
	}

	input.sheet-tab1Selector:checked ~ div.sheet-tab1,
	input.sheet-tab2Selector:checked ~ div.sheet-tab2,
	input.sheet-tab3Selector:checked ~ div.sheet-tab3
	{
		display: block;
	}
	/*Hide Radio Buttons for tabs*/
	input[type="radio"].sheet-tabSelector
	{
		opacity: 0;
		position: relative;
		width: 150px;
		height: 20px;
		top: 18px;
		left: 400px;
		cursor: pointer;
		z-index: 3;
		white-space: nowrap;
		margin: 2px;
	}
		/*Fake tabs*/
		input[type="radio"].sheet-tabSelector + span::before
		{
			content: attr(title);
			border: solid 1px #a8a8a8;
			position: absolute;
			top: 185px;
			left: 410px;
			line-height: 20px;
			text-align: center;
			vertical-align: middle;
			background: #D3D3D3;
			width: 150px;
			height: 20px;
			z-index: 0;
			font-size: 10px;
		}

	input[type="radio"].sheet-tab2 + span::before
	{
		left: 572px;
	}

	input[type="radio"].sheet-tab3 + span::before
	{
		left: 730px;
	}
	/*Change selected tab appearence*/
	input.sheet-tabSelector:checked + span::before
	{
		background: #fff;
		border-bottom-color: #fff;
	}

/*General Sheet Style*/
body
{
	font-family: "PT Sans", Helvetica, sans-serif;
	font-size: 1em;
	color: #000;
	background-color: #FFF;
	line-height: 150%;
}

section.sheet-header
{
	display: block;
	vertical-align: middle;
	background-color: black;
	color: #fdf6ee;
}

img.sheet-BGImg
{
	z-index: -1;
}

h1, h2, h3, h4, th
{
	text-align: left;
	font-variant: small-caps;
	font-weight: 500;
}

h1
{
	font-size: 2em;
}

h2
{
	font-size: 1.3em;
}

h3
{
	font-size: 1.1em;
}

h4
{
	font-size: 0.9em;
}

td, p
{
	font-size: 1em;
}

br
{
	font-size: 0.5em;
	height: 50%;
}

hr
{
	border-top: 1px solid #D3D3D3;
}

/*All Hidden styles*/
.sheet-hidden
{
	display: none;
}

/*Grid*/
div.sheet-rowTop
{
	position: static;
}

div.sheet-row250
{
	position: absolute;
	top: 250px;
}

div.sheet-row300
{
	position: absolute;
	top: 300px;
}

div.sheet-row350
{
	position: absolute;
	top: 350px;
}


div.sheet-row400
{
	position: absolute;
	top: 400px;
}

div.sheet-row450
{
	position: absolute;
	top: 450px;
}

div.sheet-row500
{
	position: absolute;
	top: 500px;
}

div.sheet-row600
{
	position: absolute;
	top: 600px;
}

div.sheet-row650
{
	position: absolute;
	top: 650px;
}

div.sheet-row700
{
	position: absolute;
	top: 700px;
}

div.sheet-row800
{
	position: absolute;
	top: 800px;
}

div.sheet-row850
{
	position: absolute;
	top: 850px;
}

div.sheet-row900
{
	position: absolute;
	top: 900px;
}

div.sheet-row950
{
	position: absolute;
	top: 950px;
}

div.sheet-row1000
{
	position: absolute;
	top: 1000px;
}

div.sheet-row1050
{
	position: absolute;
	top: 1050px;
}

div.sheet-row1100
{
	position: absolute;
	top: 1100px;
}

div.sheet-row1150
{
	position: absolute;
	top: 1150px;
}

div.sheet-row1200
{
	position: absolute;
	top: 1200px;
}

div.sheet-row1250
{
	position: absolute;
	top: 1250px;
}

div.sheet-row1300
{
	position: absolute;
	top: 1300px;
}

div.sheet-row1350
{
	position: absolute;
	top: 1350px;
}

div.sheet-row1400
{
	position: absolute;
	top: 1400px;
}

div.sheet-row1500
{
	position: absolute;
	top: 1500px;
}

div.sheet-row1600
{
	position: absolute;
	top: 1600px;
}

div.sheet-row1650
{
	position: absolute;
	top: 1650px;
}

div.sheet-row1700
{
	position: absolute;
	top: 1700px;
}

div.sheet-row1800
{
	position: absolute;
	top: 1800px;
}

div.sheet-row1900
{
	position: absolute;
	top: 1900px;
}

div.sheet-row1950
{
	position: absolute;
	top: 1950px;
}

div.sheet-row2000
{
	position: absolute;
	top: 2000px;
}

div.sheet-row2100
{
	position: absolute;
	top: 2100px;
}

div.sheet-row2150
{
	position: absolute;
	top: 2150px;
}

div.sheet-row2200
{
	position: absolute;
	top: 2200px;
}

div.sheet-row2250
{
	position: absolute;
	top: 2250px;
}


div.sheet-row2300
{
	position: absolute;
	top: 2300px;
}

div.sheet-row2400
{
	position: absolute;
	top: 2400px;
}

div.sheet-row2500
{
	position: absolute;
	top: 2500px;
}

div.sheet-row2600
{
	position: absolute;
	top: 2600px;
}

div.sheet-row2650
{
	position: absolute;
	top: 2650px;
}


div.sheet-row2700
{
	position: absolute;
	top: 2700px;
}

div.sheet-row2750
{
	position: absolute;
	top: 2750px;
}

div.sheet-row2800
{
	position: absolute;
	top: 2800px;
}

div.sheet-row2850
{
	position: absolute;
	top: 2850px;
}

div.sheet-row2900
{
	position: absolute;
	top: 2900px;
}

div.sheet-row2950
{
	position: absolute;
	top: 2950px;
}

div.sheet-row3000
{
	position: absolute;
	top: 3000px;
}

div.sheet-row3100
{
	position: absolute;
	top: 3100px;
}

div.sheet-row3200
{
	position: absolute;
	top: 3200px;
}

div.sheet-row3300
{
	position: absolute;
	top: 3300px;
}

div.sheet-columnLeft
{
	justify-content: space-between;
	position: absolute;
	left: auto;
	top: auto;
}

div.sheet-column200
{
	justify-content: space-between;
	position: absolute;
	left: 200px;
	top: auto;
}

div.sheet-column225
{
	justify-content: space-between;
	position: absolute;
	left: 225px;
	top: auto;
}

div.sheet-column300
{
	justify-content: space-between;
	position: absolute;
	left: 300px;
	top: auto;
}

div.sheet-column400
{
	justify-content: space-between;
	position: absolute;
	left: 400px;
}

div.sheet-column450
{
	justify-content: space-between;
	position: absolute;
	left: 450px;
}

div.sheet-column500
{
	justify-content: space-between;
	position: absolute;
	left: 500px;
	top: auto;
}

div.sheet-column600
{
	justify-content: space-between;
	position: absolute;
	left: 600px;
	top: auto;
}

div.sheet-column700
{
	justify-content: space-between;
	position: absolute;
	left: 700px;
	top: auto;
}

/*select & text boxes*/
select, textarea, input[type="text"], input[type="number"]
{
	border-style: hidden;
	border-bottom: solid 1px #000;
	font-family: 'PT Sans', sans-serif;
	color: #000;
	height: 120%;
	font-variant: normal;
}

input[type="number"]
{
	text-align: center;
}

select.sheet-start
{
	border-style: hidden;
	border: none;
	font-weight: normal;
}

select.sheet-full,
input[type="text"].sheet-full,
input[type="number"].sheet-full,
p.sheet-full
{
	width: 95%;
}

input[type="text"].sheet-aspect,
select.sheet-aspect
{
	font-weight: bold;
}

select.sheet-most,
input[type="text"].sheet-most,
input[type="number"].sheet-most
{
	width: 80%;
}

select.sheet-threeQuarters,
input[type="text"].sheet-threeQuarters,
input[type="number"].sheet-threeQuarters
{
	width: 60%;
}

select.sheet-half,
input[type="text"].sheet-half,
input[type="number"].sheet-half,
p.sheet-half
{
	width: 47%;
}

select.sheet-third,
input[type="text"].sheet-third,
input[type="number"].sheet-third
{
	width: 32%;
}

select.sheet-quarter,
input[type="text"].sheet-quarter,
input[type="number"].sheet-quarter
{
	width: 28%;
}

select.sheet-fifth,
input[type="text"].sheet-fifth,
input[type="number"].sheet-fifth
{
	width: 21%;
}

select.sheet-sixth,
input[type="text"].sheet-sixth,
input[type="number"].sheet-sixth
{
	width: 12%;
}

select.sheet-typeSelector
{
	font-variant: small-caps;
	width: 37%;
	border: none;
}

textarea
{
	border: none;
	font-variant: normal;
	width: 92%;
	overflow: hidden;
}

	textarea.sheet-description
	{
		height: 2.5em;
	}

	textarea.sheet-data
	{
		height: 6em;
	}

	textarea.sheet-trailer
	{
		height: 4em;
		width: 95%;
	}

/*Tables*/

/* Aspects */
div.sheet-fullPage
{
	width: 900px;
	box-sizing: content-box;
}

table.sheet-twoThirdPage,
div.sheet-twoThirdPage
{
	width: 600px;
	box-sizing: content-box;
}

table.sheet-halfPage,
div.sheet-halfPage
{
	width: 430px;
	box-sizing: content-box;
}

/*Departments, skills, specialties, tools*/
table.sheet-thirdPage,
div.sheet-thirdPage
{
	width: 280px;
	box-sizing: content-box;
}

table.sheet-quarterPage,
div.sheet-quarterPage
{
	width: 200px;
	box-sizing: content-box;
}


tr.sheet-skill,
tr.sheet-specialty,
p.sheet-skill,
p.sheet-specialty
{
	width: 128px;
	box-sizing: content-box;
	text-align: left;
}

tr.sheet-specialty,
p.sheet-specialty
{
	text-indent: 10px;
}

td.sheet-skilldice
{
	text-indent: -30px;
}

td.sheet-right,
p.sheet-right
{
	text-align: right;
}

td.sheet-department
{
	font-variant: small-caps;
	font-weight: 500;
}

td.sheet-smallCell
{
	width: 30px;
}

/*Lists*/
div.sheet-doubleColumn
{
	width: 580px;
	box-sizing: content-box;
}

/* Hide actual radio/checkbox for dice tracks*/
input[type="radio"].sheet-D10,
input[type="checkbox"].sheet-Overcharge,
input[type="radio"].sheet-Boost,
input[type="radio"].sheet-D6,
input[type="checkbox"].sheet-D6,
input[type="radio"].sheet-Reactor,
input[type="checkbox"].sheet-armourConditionSlot,
input[type="checkbox"].sheet-resilienceConditionSlot,
input[type="checkbox"].sheet-integertyConditionSlot,
input[type="checkbox"].sheet-vitalityConditionSlot,
input[type="checkbox"].sheet-checkbox,
input[type="checkbox"].sheet-patch
{
	opacity: 0;
	width: 16px;
	height: 16px;
	position: relative;
	top: 5px;
	left: 6px;
	margin: -10px;
	cursor: pointer;
	z-index: 1;
}

	/* Fake checkbox for general checkboxes*/
	input[type="checkbox"].sheet-checkbox + span::before
	{
		margin-right: 4px;
		line-height: 14px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		content: "◎";
		width: 14px;
		height: 14px;
		font-size: 12px;
	}

/* Fake checkbox checks as filled general checkboxes*/
input[type="checkbox"]:checked.sheet-checkbox + span::before
{
	content: "◉";
}

/* Fake checkbox as Armour condition slot*/
input[type="checkbox"].sheet-armourConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 22px;
	font-family: "Pictos Custom";
	content: "e";
}

/* Fake checkbox checks as filled Armour condition slots*/
input[type="checkbox"]:checked.sheet-armourConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 22px;
	font-family: "Pictos Three";
	content: "b";
}

/* Fake checkbox as Resilience condition slot*/
input[type="checkbox"].sheet-resilienceConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 22px;
	font-family: "Pictos Custom";
	content: "e";
}

/* Fake checkbox checks as filled Resilience condition slots*/
input[type="checkbox"]:checked.sheet-resilienceConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 20px;
	font-family: "dicefontd6";
	content: "C";
}

/* Fake checkbox as Integrity condition slot*/
input[type="checkbox"].sheet-integertyConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 22px;
	font-family: "Pictos Custom";
	content: "e";
}

/* Fake checkbox checks as filled Integrity condition slots*/
input[type="checkbox"]:checked.sheet-integertyConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 21px;
	color: darkred;
	font-family: "Pictos";
	content: "*";
}

/* Fake checkbox as Vitality condition slot*/
input[type="checkbox"].sheet-vitalityConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 22px;
	font-family: "Pictos Custom";
	content: "e";
}

/* Fake checkbox checks as filled Integrity condition slots*/
input[type="checkbox"]:checked.sheet-vitalityConditionSlot + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	font-size: 18px;
	color: darkred;
	font-family: "Pictos";
	content: "D";
}

/* Fake checkbox for patches*/
input[type="checkbox"].sheet-patch + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	content: "☐";
	width: 14px;
	height: 14px;
	font-size: 18px;
}

/* Fake checkbox checks as filled patches*/
input[type="checkbox"]:checked.sheet-patch + span::before
{
	content: "☒";
}


/* Fake radio as D10s*/
input[type="radio"].sheet-D10 + span::before
{
	margin-right: 6px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 24px;
	font-family: "dicefontd10";
	content: "J";
}

/* Remove fill from all radios _after_ selected D10 */
input[type="radio"]:checked.sheet-D10 ~ input[type="radio"].sheet-D10 + span::before
{
	margin-right: 6px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 24px;
	font-family: "dicefontd10";
	content: "0";
}

/* Fake checkbox as Overcharge*/
input[type="checkbox"].sheet-Overcharge + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 22px;
	color: lightgray;
	font-family: "Pictos";
	content: "!";
}

/* Remove fill from unchecked Overcharge */
input[type="checkbox"]:checked.sheet-Overcharge + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 22px;
	color: orange;
	font-family: "Pictos";
	content: "!";
}


/* Fake radio as Uparrows*/
input[type="radio"].sheet-Boost + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	letter-spacing: 0.12em;
	width: 12px;
	height: 12px;
	font-size: 24px;
	font-family: "dicefontd4";
	content: "A";
}

/* Remove fill from all radios _after_ selected Uparrows */
input[type="radio"]:checked.sheet-Boost ~ input[type="radio"].sheet-Boost + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	letter-spacing: 0.12em;
	width: 12px;
	height: 12px;
	font-size: 24px;
	font-family: "dicefontd4";
	content: "0";
}

/* Alter the 0 die to a different font */
input[type="radio"].sheet-ZeroDie + span::before
{
	font-size: 14px;
	color: lightgray;
	content: "|";
}

/* Description Damage*/
em.sheet-techlevelBoost
{
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 22px;
	font-style: normal;
	font-family: "dicefontd4";
}

/* Description Advantage */
em.sheet-FittingAdv,
select.sheet-FittingAdv
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	height: 120%;
	font-size: 22px;
	font-family: "dicefontd10";
	border: none;
	font-weight: normal;
}

/* Fake radio as Reactor Capacity*/
input[type="radio"].sheet-Reactor + span::before
{
	margin-right: 4px;
	text-align: center;
	vertical-align: baseline;
	width: 18px;
	height: 18px;
	font-size: 18px;
	font-family: 'Pictos';
	content: "Q";
}

/* Remove fill from all radios _after_ selected Reactor Capacity */
input[type="radio"]:checked.sheet-Reactor ~ input[type="radio"].sheet-Reactor + span::before
{
	margin-right: 4px;
	text-align: center;
	vertical-align: baseline;
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: lightgray;
	font-family: 'Pictos';
	content: "Q";
}

}
/* Fake radio D6 */
input[type="radio"].sheet-D6 + span::before,
input[type="checkbox"].sheet-D6 + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 22px;
	font-family: "dicefontd6";
	content: "0";
}

input[type="radio"]:checked.sheet-D6 + span::before,
input[type="checkbox"]:checked.sheet-D6 + span::before
{
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	font-size: 20px;
	font-family: "dicefontd6";
	content: "F";
}

/* Roll Button Appearance*/
button[type=roll].sheet-rollButton::before
{
}