hansi.css

* {
	padding: 0%;
	margin: 0%;
}

:root {
	--cBildung: #f3f3f3;
	--cCharisma: #34a853;
	--cGeschick: #ff9900;
	--cIntelligenz: #4a86e8;
	--cStaerke: #ea4335;
	--cGlueck: #ebc950;
}

html {
	/*background-image: linear-gradient(to top, #5a5963 0%, #81808c 70%);
	background-repeat: no-repeat;*/
}

.left {
	width: 20%;
	height: 100%;
	position: fixed;
	right: 0px;
	top: 0px;
	border-left: solid black 3pt;
	padding: 1%;
	z-index: 6;
	background-color: white;
	box-shadow: 0 0 10pt black;
	overflow: auto;
}

.left h4 {
	font-family: sans-serif;
	font-size: 20pt;
	margin: 1%;
	margin-bottom: 10pt;
}

.left button {
	display: block;
	border: none;
	background: none;
	transition: 0.3s;
	transition: font-size 0.5s;
	font-size: 15pt;
	margin: 8pt;
	font-weight: 300;
	padding: 2pt;
	cursor: pointer;
}

.left button:hover {
	text-shadow: 0 0 10pt #424242;
	transition: 0.3s;
	transition: font-size 0.5s;
	font-size: 16.5pt;
}

.left button::before {
	content: "▶ ";
}

#character-list {
	font-size: 13pt;
	margin-left: 13pt;
	margin-top: 30pt;
}

#character-list::before{
	content: "Charakterliste";
	font-family: sans-serif;
	font-size: 20pt;
	font-weight: 700;
	margin-bottom: 20pt;
	padding: 0%;
	width: 100%;
	border-bottom: solid black 2pt;
}

#character-list li {
	font-size: 13pt;
	font-family: sans-serif;
	font-weight: 300;
	margin-left: 13pt;
}

#character-list li button {
	font-size: 13pt;
	border: solid black 1pt;
	display: inline;
}

.disclaimer {
	font-family: sans-serif;
	font-size: 13pt;
	font-style: italic;
	color: #424242;
	font-weight: 200;
	padding: 5pt;
	padding-top: 10pt;
	padding-bottom: 10pt;
	margin: 10pt;
	text-align: center;
	border: dashed #424242 2pt;
}

#dialog,
#sheet {
	width: 71%;
	padding: 3%;
	border: none;
}

#template-chooser {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: solid black 1pt;
	background-color: #d4d4d4;
}

#dialog input,
#sheet input {
	width: 100%;
}

#dialog .name input,
#sheet .name{
	display: block;
	text-align: center;
	font-weight: 900;
	border: none;
	font-size: 30pt;
	margin-bottom: 30pt;
}

#dialog h2,
#sheet h2 {
	font-family: sans-serif;
	font-size: 20pt;
	font-weight: 700;
	margin-bottom: 20pt;
	padding: 0%;
	width: 100%;
	border-bottom: solid black 2pt;
}

#dialog textarea,
#sheet textarea {
	width: 100%;
	height: 100pt;
	margin-bottom: 20pt;
	resize: vertical;
}

#cc-attributes,
#attributes {
	grid-gap: 20px 40px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 20pt;
}

#cc-attributes .slide-50-node,
#attributes .slide-50-node {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	text-align: center;
	height: 150pt;
	border: solid black 3pt;
	align: center;
	transition: 1s;
	text-decoration: none;
	padding: 4%;
}

#cc-stats .slide-50-node{
	margin-top: 20pt;
}

#cc-attributes div label,
#attributes div label {
	font-family: sans-serif;
	font-size: 18pt;
	font-weight: 300;
	margin-bottom: 20pt;
	padding: 0%;
	width: 100%;
}

#cc-attributes div input,
#attributes div input {
	font-family: sans-serif;
	text-align: center;
	padding: 0%;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#cc-attributes div span,
#attributes div span {
	display: inline-block;
	width: 40%;
}

#cc-attributes .bildung,
#attributes .bildung {
	background-color: var(--cBildung);
}

#cc-attributes .charisma,
#attributes .charisma {
	background-color: var(--cCharisma);
}

#cc-attributes .geschick,
#attributes .geschick {
	background-color: var(--cGeschick);
}

#cc-attributes .intelligenz,
#attributes .intelligenz {
	background-color: var(--cIntelligenz);
}

#cc-attributes .staerke,
#attributes .staerke {
	background-color: var(--cStaerke);
}

#cc-attributes .glueck,
#attributes .glueck {
	background-color: var(--cGlueck);
}

#cc-stats label,
#stats label {
	font-size: 14pt;
	font-family: sans-serif;
	weight: 300;
}
#cc-stats .item-50-info-container{
	width: 20%;
	display: inline-block;
}
#cc-stats input[type="range"]{
	width: auto;
	display: inline-block;
}
#cc-stats input[type="checkbox"]{
	margin: 5pt;
	width: 5%;
	display: inline-block;
}

.baseinfo span::after {
	border: solid black 1pt;
	margin: 2pt;
	font-size: 9pt;
	padding: 1pt;
	padding-bottom: 0pt;
}

.baseinfo .bildung::after {
	content: "BI";
	background-color: var(--cBildung);
}

.baseinfo .charisma::after {
	content: "CA";
	background-color: var(--cCharisma);
}

.baseinfo .geschick::after {
	content: "GE";
	background-color: var(--cGeschick);
}

.baseinfo .intelligenz::after {
	content: "IN";
	background-color: var(--cIntelligenz);
}

.baseinfo .staerke::after {
	content: "ST";
	background-color: var(--cStaerke);
}

.baseinfo .glueck::after {
	content: "GL";
	background-color: var(--cGlueck);
}

.append-button-div {
	border: solid black 2pt;
	padding: 10pt;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10pt;
	display: block;
}

.append-button-div input {
	font-size: 14pt;
	font-family: sans-serif;
	padding: 2pt;
}

.append-button-div select {
	font-size: 10pt;
	font-family: sans-serif;
	padding: 2pt;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: auto;
	margin-top: 2pt;
}

.append-button {
	display: block;
	font-size: 30pt;
	weight: 700;
	margin-left: auto;
	margin-right: auto;
	border: none;
	background: none;
	cursor: pointer;
	transition: 0.3s;
}

.append-button:hover {
	text-shadow: 0 0 10pt #424242;
	transition: 0.3s;
}

#cc-points,
#points {
	width: 40%;
	margin-left: 20%;
	margin-bottom: 1%;
	height: auto;
	position: fixed;
	left: 0px;
	bottom: 0px;
	border: solid black 3pt;
	padding: 0pt;
	z-index: 4;
	background-color: white;
	box-shadow: 0 0 10pt black;
}

.cc-submit,
.submit {
	margin: 0%;
	width: 40%;
	padding: 2pt;
	display: inline-block;
}

.cc-submit button,
.submit button {
	display: block;
	border: none;
	background: none;
	transition: 0.3s;
	transition: font-size 0.5s;
	font-size: 14pt;
	font-weight: 300;
	padding: 2pt;
	padding-left: 30pt;
	cursor: pointer;
}

.cc-submit button:hover,
.submit button:hover {
	text-shadow: 0 0 10pt #424242;
	transition: 0.3s;
}

.cc-submit button::before,
.submit button::before {
	content: "▶ ";
}

#cc-points-display,
#points-display {
	margin: 0%;
	width: 45%;
	padding: 2pt;
	font-weight: 300;
	display: inline-block;
}

#cc-points-display .tr,
#points-display .tr {
	font-size: 14pt;
	font-family: sans-serif;
	display: table-row;

}

#cc-points-display .td,
#points-display .td {
	display: table-cell;
	padding-right: 20pt;
}

#cc-skills,
#skills {
	display: block;
	margin: auto;
}

#cc-inventory .tr,
#cc-skills .tr,
#inventory .tr,
#skills .tr {
	display: table-row;
	width: 100%;
	padding: 2pt;

}

#cc-inventory .td,
#cc-skills .td,
#inventory .td,
#skills .td {
	display: table-cell;
}

#cc-skills label,
#skills label {
	font-size: 14pt;
	font-family: sans-serif;
}
#cc-stats .medium,
#stats .medium,
#cc-stats .extreme,
#stats .extreme{
 font-size: 14pt;
 font-family: sans-serif;
 margin: 2pt;
}

#cc-stats .medium::before,
#stats .medium::before{
 content: "½: ";
}
#cc-stats .extreme::before,
#stats .extreme::before{
 content: "⅕: ";
}
#cc-attributes .baseinfo,
#attributes .baseinfo{
 display: none;
}




/*Dinge, die nicht im Hauptding liegen*/
#upload {
	width: 40%;
	margin-left: 20%;
	margin-top: 10%;
	display: block;
	vertical-align: middle;
	padding: 20pt;
	box-shadow: 0 0 10pt black;
	background-color: white;
	position: fixed;
}

#upload input {
	margin: auto;
	margin-top: 10%;
	display: block;
}

#upload button {
	margin: auto;
	margin-top: 10%;
	display: block;
	border: none;
	background: none;
	transition: 0.3s;
	transition: font-size 0.5s;
	font-size: 15pt;
	font-weight: 300;
	padding: 2pt;
	cursor: pointer;
}

#upload button:hover {
	text-shadow: 0 0 10pt #424242;
	transition: 0.3s;
	transition: font-size 0.5s;
	font-size: 16.5pt;
}

#upload button::before {
	content: "▶ ";
}