ChimeraSheet.css

@import url('https://fonts.googleapis.com/css?family=Orbitron|Fira+Sans&display=swap');


.charsheet {
	background: rgb(253,177,0);
	background: linear-gradient(90deg, rgba(253,177,0,1) 36%, rgba(254,114,0,1) 100%);
	border-radius: 20px;
	border: 10px solid black;
	color: #000000;
	font-family: 'Fira Sans';
	font-size: 1.1em;
}

.charsheet .sheet-heading {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 8px;
	font-size: 2em; 
	font-family: Orbitron;
	border: 1px solid black;
	color: rgb(253,177,0);
	color: linear-gradient(90deg, rgba(253,177,0,1) 36%, rgba(254,114,0,1) 100%);
	background: #000000;
	letter-spacing: 0.3em;
	border-radius: 10px;
	font-weight: 900;
}

.charsheet .sheet-die-roller-tab {
	border-bottom-left-radius: 0px;
}

.charsheet .sheet-subheading {
	padding-top: 10px;
	font-size: 1.5em; 
	font-family: Orbitron;
	font-weight: 900;
}

.charsheet .sheet-section {
	padding-bottom: 20px;
}

.sheet-attribute-table {
	display: table; 
	width: 100%;
}

.sheet-attribute-table:hover {
	background: rgba(255, 239, 10, 0.3);
}

.sheet-attribute-name-cell {
	display: table-cell; 
	width: 55%;
}

.sheet-attribute-name-cell > div > span {
	font-size: 1.3em; 
	vertical-align: top;
}

.sheet-skill-name-cell > div > span {
	vertical-align: top
}

.sheet-attribute-die-code-cell {
	display: table-cell; 
	width: 45%; 
	text-align: right;
}

.sheet-attribute-die-code-cell > span {
	padding-left: 10px; 
	font-size: 14px
}

.sheet-skill-name-cell {
	display: table-cell; 
	width: 55%;
}

.sheet-skill-name-cell > div {
	padding-left: 10px; 
	font-size: 0.9em;
}

.sheet-skill-die-code-cell {
	display: table-cell; 
	width: 45%; 
	text-align: right; 
	padding-right: 2px;
}

.charsheet th {
	font-size: 1.3em;
	font-weight: 700;
	border-bottom: 3px solid black;
}

table.sheet-list {
	border-collapse: collapse;
	border-spacing: 0px;
}

.sheet-nested-table td {
	border-bottom: 1px solid black;
}

.sheet-nested-table tr:hover {
	background: rgba(255, 239, 10, 0.3);
}

.sheet-block-a,
.sheet-block-switch:checked ~ .sheet-block-b {
  display: block;
  padding-top: 10px;
}

.sheet-block-b,
.sheet-block-switch:checked ~ .sheet-block-a {
  display: none;
  padding-top: 10px;
}

.sheet-block-a button.btn.repcontrol_add,
.sheet-block-a button.btn.repcontrol_edit,
.sheet-block-switch:checked ~ button.btn.repcontrol_add,
.sheet-block-switch:checked ~ button.btn.repcontrol_edit {
	display: none;
}

button,
button:active
{
    background-image: none;
}

.sheet-die-roller {
	background-color: #000000; 
	border: 3px solid black; 
	border-bottom-left-radius: 10px; 
	border-bottom-right-radius: 10px; 
	border-top: 0px; 
	padding: 5px; 
	float: left;
	color: rgb(253,177,0);
	color: linear-gradient(90deg, rgba(253,177,0,1) 36%, rgba(254,114,0,1) 100%);
}

.charsheet button[type=roll]::before {
    display: none;
}

.charsheet button[type=roll]:not(.sheet-link-button) {
	color: #e67d00;
    background-color: #fff1a8;
	border-color: #e67d00;
	height: 1em;
}

.charsheet button[type=roll]:hover:not(.sheet-link-button) {
	color: #fff1a8;
    background-color: #e67d00;
	border-color: #fff1a8;
}

.sheet-link-button {
  background-image: none;
  background: none!important;
  border: none;
  box-shadow: none;
  padding: 0!important;
  color: #000000;
  cursor: pointer;
  text-shadow: none;
}

.sheet-skill-die-code-cell > .sheet-link-button > span {
	font-size: 0.7em;
}

.sheet-link-button:hover {
	color: #fff1a8;
	text-decoration: underline;
}

.charsheet textarea{
    resize:vertical;
	background-color: #FCE5CD;
	border-color: #B85B14;
}
  
.charsheet input[type=number].sheet-smallnumber{
    width:40px;
	background-color: #FCE5CD;
	border-color: #B85B14;
}

.charsheet input[type=text].sheet-smalltext{
    width:55px;
    height: 18px;
    margin:0px;
	background-color: #FCE5CD;
	border-color: #B85B14;
}
.charsheet input[type=text].sheet-shorttext{
    padding-top:2px;
    padding-bottom:2px;
	background-color: #FCE5CD;
	border-color: #B85B14;
}

.charsheet input[type=text].sheet-skilltext{
    width:100px;
    padding:2px;
    margin-left:3px;
	background-color: #FCE5CD;
	border-color: #B85B14;
}

.charsheet input[type=text].sheet-regular-textbox {
    padding:2px;
	background-color: #FCE5CD;
	border-color: #B85B14;
}

.charsheet .sheet-right{
    float:right;
}

.charsheet .sheet-bold{
    font-size: 12pt;
    margin-bottom: 10px;
}

.charsheet .sheet-border{
    border: 2px solid white;
    vertical-align:top;
    width:100%;
    padding: 2px;
    margin: 2px;
}

.charsheet input[type=number].sheet-smallshortnumber{
    width:40px;
    padding-top:2px;
    padding-bottom:2px;
    display: inline-block;
    float:right;
}

.charsheet input[type=number].sheet-shortnumber{
    padding-top:2px;
    padding-bottom:2px;
}

.charsheet label {
	color: #000000;
	font-weight: 700;
	display: inline;
}

.charsheet label.sheet-tooltip-pointer {
	cursor: help;
}

.charsheet input[type=button].roll-small{
	font-size: 12px;
}

.charsheet .btn:not(.sheet-link-button) {
	color: #e67d00;
    background-color: #fff1a8;
	border-color: #e67d00;
	height: 1.5em;
}

.sheet-tooltip {
    display:inline-block;
    position:relative;
    text-align:left;
	vertical-align: middle;
	cursor: help;
}

.sheet-tooltip h3 {
	margin:12px 0;
	color: #FEA600;
	font-weight: 700;
	font-family: Orbitron;
	font-size: 1.5em;
}

.sheet-tooltip .sheet-text-content {
    padding:10px 20px;
}

.sheet-tooltip + span {
	vertical-align: middle;
}


.sheet-tooltip + input[type=text] {
	vertical-align: text-bottom;
}

.sheet-tooltip .sheet-right {
	font-family: 'Fira Sans';
    min-width:350px;
    max-width:600px;
    top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:0;
    background-color:#444444;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; 
	opacity:0; 
	transition:opacity 0.8s;
	transition-delay: 0.6s;
}

.sheet-tooltip .sheet-text-content > p {
	font-family: 'Fira Sans';
	color:#EEEEEE;
	font-weight:100;
    font-size:1em;
}

.sheet-tooltip:hover .sheet-right {
    visibility:visible; 
	opacity:1;
}

.sheet-tooltip .sheet-right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}
.sheet-tooltip .sheet-right i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#444444;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.sheet-tooltip .sheet-left {
	font-family: 'Fira Sans';
    min-width:350px;
    max-width:600px;
    top:50%;
    right:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:0;
    color:#EEEEEE;
    background-color:#444444;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; 
	opacity:0; 
	transition:opacity 0.8s;
	transition-delay: 0.6s;
}

.sheet-tooltip:hover .sheet-left {
    visibility:visible; 
	opacity:1;
}

.sheet-tooltip .sheet-left i {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}
.sheet-tooltip .sheet-left i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    right:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#444444;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}