roll20-character-sheets-tester/Mutants and Masterminds 3E/mutants-and-masterminds.css

.sheet-macro-show:not(:checked)~.sheet-macro {
    display:none;
}

input[type="checkbox"] + span::before
{
    margin-right: 4px;
    line-height: 10px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    
    content: "►";
    width: 10px;
    height: 10px;
    font-size: 10px;
}
input[type="checkbox"]:checked + span::before
{
    content: "▼";
}

hr {
    border-color:black;
}

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

.sheet-table-row {
    display:table-row;
    vertical-align:middle;
    width:100%;
}

.sheet-table-header {
    display:table-cell;
    text-align:center;
    font-weight:bold;
    vertical-align:bottom;
}

.sheet-table-data {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

input[type="text"], select {
    width:100%;
    margin:0;
}

textarea {
    width:95%;
}

/* Fake tabs style1 (reskinned radio button; fixed to work properly in firefox */
div.sheet-tab-content { display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab11:checked ~ div.sheet-tab11,
input.sheet-tab12:checked ~ div.sheet-tab12,
input.sheet-tab13:checked ~ div.sheet-tab13,
input.sheet-tab99:checked ~ div.sheet-tab99 {
    display: block;
}

input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
input.sheet-tab11:checked ~ span.sheet-tab11,
input.sheet-tab12:checked ~ span.sheet-tab12,
input.sheet-tab13:checked ~ span.sheet-tab13,
input.sheet-tab99:checked ~ span.sheet-tab99 {
    background: rgba(200,200,200,100);
    color: black;
}

input.sheet-tab {
    width: 263px;
    height: 24px;
    position: relative;
    top: 8px;
    left: 6px;
    margin: 2.4px;
    cursor: pointer;
	opacity: 0;
    z-index: 9999;
}
span.sheet-tab {
	text-align: center;
	display: inline-block;
	font-size: 13px;
	background: white;
	color: black;
	font-weight: bold;
	width: 259px;
	height: 20px;
	position: relative;
    margin-left: -263.4px;
	 margin-top: 4px;
}

input.sheet-tab11, input.sheet-tab12, input.sheet-tab13, input.sheet-tab99 {
	width: 124px;
}

span.sheet-tab11, span.sheet-tab12, span.sheet-tab13, span.sheet-tab99 {
    width: 120px;
	 margin-left: -124.4px;
}

input.sheet-tab::before {
    content: attr(title);

    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;
    
    background: #fff;
    background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    
    width: 240px;
    height: 20px;
    font-size: 18px;
}

input.sheet-tab:checked::before {
    background: #dcdcdc;
    background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    border-bottom-color: #fff;
}

input.sheet-tab:not(:first-child)::before { border-left: none; }

div.sheet-tab-content {
    border: 1px solid #a8a8a8;
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}

/* tabs style2 (with span) works even in firefox */
.sheet-character-sheet,
.sheet-expand {
    display: none;
    padding: 3px;
}

.sheet-expand:checked ~ .sheet-show {
    display: block;
    background-color: white;
    margin: 1px 0px 0px -2px;
}

.sheet-tab {
    display: inline-block;
    text-align: center;
    margin: -2px;
    padding: 2px;
    width: 124px;
    height: 24px;
    background-color: gray;
    border-top-left-radius: 1em 3em;
    border-top-right-radius: 1em 3em;
    border: solid thin gray;
    border-bottom: none;
}

.sheet-expand:checked ~ .sheet-tab { background-color: white; }
//span { display: inline; }
//span, span div { font-size: 12px;    font-weight: normal; }
textarea { height: auto;	color: black; }
input {	color: black; }
input, select { width:100%; }