roll20-character-sheets/TormentaRPG_Tabbed/TormentaRPG_Tabbed.css

.sheet-container {
    width: 750px;
    padding: 20px;
    background-color: white;
    position: relative;
}

.sheet-header {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85em;
    display: inline-block;
}

.sheet-header label {
    font-size: 1em;
    display: inline-block;
    font-weight:normal;
    margin: 0px;
    padding: 0px;
}

.sheet-container label {
    font-size: 1em;
    display: inline-block;
    font-weight:normal;
    margin: 0px;
    padding: 0px;
}

.sheet-header input, select{
    font-family: Tahoma, Geneva, sans-serif;
    border-bottom: 1px solid black;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: black;
    margin-bottom: 0px;
}

.sheet-texto {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7em;
    display: inline-block;
}

.sheet-texto input, textarea {
    width: 50px;
    height: 30px;
    text-align:center;
    font-family: Tahoma, Geneva, sans-serif;
    border: none;
    border-bottom: 1px solid black;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: black;
    margin-bottom: 0px;
}


.sheet-header select{
    line-height: 20px;
}

.sheet-atrib {
    font-family: 'Roboto', sans-serif;
    font-size: 0.7em;
    display: inline-block;
}

.sheet-atrib input {
    width: 50px;
    height: 30px;
    text-align:center;
    font-family: Tahoma, Geneva, sans-serif;
    font-size:2em;
    border: 1px solid black;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: black;
    margin-bottom: 0px;
}

.sheet-block {
    font-family: 'Colibri', sans-serif;
    font-weight: bold;
    font-size:1.5em;
    display: inline-block;
    text-align: center;
    background-color: black;
    color: white;
    padding: 7px 15px 4px 15px;
    line-height: 8px;
}

.sheet-container button[type=roll] {
    border: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    background: white;
}

.sheet-container button[type=roll]::before {
    content: "";   
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-table,
.sheet-rolltemplate-trpg .sheet-trpg-table{
    display:table;
    background-color:white;
    width: 178px;
    padding: 10px;
    text-align:center;
    text-size:8px;
    border: 1px solid black;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-row,
.sheet-rolltemplate-trpg .sheet-trpg-row{
    display:table-row;
    width:100%;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-col,
.sheet-rolltemplate-trpg .sheet-trpg-col{
    display:inline-block;
    width:100%;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-header,
.sheet-rolltemplate-trpg .sheet-trpg-header{
    width:200px;
    text-align:center;
    line-height:1.8em;
    background-color:black;
    color:white;
    font-family: 'Roboto', sans-serif;
    font-variant:small-caps;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-roll,
.sheet-rolltemplate-trpg .sheet-trpg-roll{
    padding-top:5px;
    font-size:23px;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-dmgroll,
.sheet-rolltemplate-trpg .sheet-trpg-dmgroll{
    padding-top:5px;
    font-size:23px;
}

.sheet-rolltemplate-trpgmagia .inlinerollresult,
.sheet-rolltemplate-trpg .inlinerollresult  {
	display: inline-block;
	color: black;
	background-color: white;
	border:none;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-dmgroll .inlinerollresult,
.sheet-rolltemplate-trpg .sheet-trpg-dmgroll .inlinerollresult  {
	display: inline-block;
	color: black;
	background-color: white;
	border:none;
}

.sheet-rolltemplate-trpgmagia .inlinerollresult.fullcrit,
.sheet-rolltemplate-trpg .inlinerollresult.fullcrit {
	color: #3FB315;
	border: none;
}

.sheet-rolltemplate-trpgmagia .inlinerollresult.fullfail,
.sheet-rolltemplate-trpg .inlinerollresult.fullfail {
	color: #B31515;
	border:none;
}

.sheet-rolltemplate-trpgmagia .sheet-subtitulo,
.sheet-rolltemplate-trpg .sheet-subtitulo{
    font-style:italic;
    text-size:8px;
}

.sheet-rolltemplate-trpgmagia .sheet-trpg-footer,
.sheet-rolltemplate-trpg .sheet-trpg-footer{
    width:200px;
    height:10px;
    background-color:black;
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    padding-top:-5px;
}

div.sheet-npc-content,
div.sheet-tab-content { 
    display: none;
}

input.sheet-npc1:checked ~ div.sheet-npc1,
input.sheet-npc2:checked ~ div.sheet-npc2,
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 {
    display: block; 
}

input.sheet-tab {
    width: 90px;
    height: 20px;
    line-height: 30px;
    position: relative;
    top: 0px;
    left: 45px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-tab + span::before {
    font-family: 'Colibri', sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    content: attr(title);
    border: solid 1px black;
    border-bottom-color: white;
    text-align: center;
    display: inline-block;
    background: #fff;
    width: 90px;
    line-height: 20px;
    left: -45px;
    position: relative;
}

input.sheet-tab:checked + span::before {
    background: black;
    color:white;
    border-bottom-color: black;
    
}

.repcontrol > .btn {
    background:black;
    color:white;
    border: none;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
}

.sheet-npc
{
    opacity: 0;    
    position: relative;
    top: 0px;
    right: -20px;
    width: 25px;
    height: 25px;
    z-index: 2;
}

.sheet-npc + span
{
    position: relative;
    top: 0px;
    right: 0px;
    white-space: nowrap;
    width: 18px;
    height: 18px;
    font-size: 16px;
    font-family: pictos;
    background-color:white;
    color: white;
    cursor: pointer;
    margin-top: 0px;
    border-radius:30px;
    border: 1px solid black;
}

.sheet-npc:checked + span
{
    color:black;
}

.sheet-treinadaflag
{
    opacity: 0;    
    position: relative;
    top: 24px;
    right: 165px;
    width: 25px;
    height: 25px;
    z-index: 2;
}

.sheet-treinadaflag + span
{
    position: relative;
    top: 25px;
    right: 185px;
    white-space: nowrap;
    width: 18px;
    height: 18px;
    font-size: 16px;
    font-family: pictos;
    background-color:black;
    color: white;
    cursor: pointer;
    margin-top: 0px;
}


.sheet-treinadaflag:checked + span
{
    background-color: white;
    color:black;
}

.sheet-preparadaflag
{
    opacity: 0;    
    position: absolute;
    top: 31px;
    right: 178px;
    width: 30px;
    height: 30px;
    z-index: 2;
}

.sheet-preparadaflag + span
{
    position: absolute;
    top: 28px;
    right: 183px;
    white-space: nowrap;
    width: 18px;
    height: 18px;
    font-size: 16px;
    font-family: pictos;
    color: #A0A0A0;
    cursor: pointer;
    margin-top: 0px;
}

.sheet-preparadaflag:checked + span
{
    color:black;
}

.sheet-inventorysubflag
{
    opacity: 0;    
    position: absolute;
    top: 3px;
    right: 25px;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.sheet-talentosubflag,
.sheet-classesubflag,
.sheet-raciaissubflag
{
    opacity: 0;    
    position: absolute;
    top: 3px;
    right: -5px;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.sheet-inventorysubflag + span
{
    position: absolute;
    top: 0px;
    right: 30px;
    white-space: nowrap;
    width: 10px;
    height: 10px;
    font-size: 12px;
    font-family: pictos;
    color: #A0A0A0;
    cursor: pointer;
    margin-top: 0px;
    display: none;
}

.sheet-talentosubflag + span,
.sheet-classesubflag + span,
.sheet-raciaissubflag + span
{
    position: absolute;
    top: 0px;
    right: 0px;
    white-space: nowrap;
    width: 10px;
    height: 10px;
    font-size: 12px;
    font-family: pictos;
    color: #A0A0A0;
    cursor: pointer;
    margin-top: 0px;
    display: none;
}

.sheet-armassubflag
{
    opacity: 0;    
    position: absolute;
    top: 8px;
    right: 330px;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.sheet-armassubflag + span
{
    position: absolute;
    top: 5px;
    right: 5px;
    white-space: nowrap;
    width: 340px;
    height: 10px;
    font-size: 12px;
    font-family: pictos;
    color: #A0A0A0;
    cursor: pointer;
    margin-top: 0px;
    display: none;
}

.sheet-periciasubflag
{
    opacity: 0;    
    position: relative;
    top: 25px;
    right: 173px;
    width: 25px;
    height: 20px;
    z-index: 2;
}

.sheet-periciasubflag + span
{
    position: relative;
    top: -17px;
    right: -139px;
    white-space: nowrap;
    width: 15px;
    height: 15px;
    font-size: 16px;
    font-family: pictos;
    color: white;
    cursor: pointer;
    margin-top: 0px;
    display: none;
    padding-left:2px;
}

.sheet-atuacaosubflag
{
    opacity: 0;    
    position: relative;
    top: 25px;
    right: 173px;
    width: 25px;
    height: 20px;
    z-index: 2;
}

.sheet-atuacaosubflag + span
{
    position: relative;
    top: -17px;
    right: -139px;
    white-space: nowrap;
    width: 15px;
    height: 15px;
    font-size: 16px;
    font-family: pictos;
    color: white;
    cursor: pointer;
    margin-top: 0px;
    display: none;
    padding-left:2px;
}

.sheet-conhecimentosubflag
{
    opacity: 0;    
    position: relative;
    top: 25px;
    right: 173px;
    width: 25px;
    height: 20px;
    z-index: 2;
}

.sheet-conhecimentosubflag + span
{
    position: relative;
    top: -17px;
    right: -139px;
    white-space: nowrap;
    width: 15px;
    height: 15px;
    font-size: 16px;
    font-family: pictos;
    color: white;
    cursor: pointer;
    margin-top: 0px;
    display: none;
    padding-left:2px;
}

.sheet-oficiosubflag
{
    opacity: 0;    
    position: relative;
    top: 25px;
    right: 173px;
    width: 25px;
    height: 20px;
    z-index: 2;
}

.sheet-oficiosubflag + span
{
    position: relative;
    top: -17px;
    right: -139px;
    white-space: nowrap;
    width: 15px;
    height: 15px;
    font-size: 16px;
    font-family: pictos;
    color: white;
    cursor: pointer;
    margin-top: 0px;
    display: none;
    padding-left:2px;
}

.sheet-magiaflag
{
    opacity: 0;    
    position: absolute;
    top: 13px;
    right: 179px;
    width: 30px;
    height: 30px;
    z-index: 2;
}

.sheet-magiaflag + span
{
    position: absolute;
    top: 10px;
    right: 184px;
    white-space: nowrap;
    width: 18px;
    height: 18px;
    font-size: 16px;
    font-family: pictos;
    color: #A0A0A0;
    cursor: pointer;
    margin-top: 0px;
}

.sheet-talentosubflag:checked + span,
.sheet-classesubflag:checked + span,
.sheet-raciaissubflag:checked + span,
.sheet-magiaflag:checked + span,
.sheet-armassubflag:checked + span,
.sheet-inventorysubflag:checked + span
{
    color: black;
    display: block;
}

.sheet-oficiosubflag:checked + span,
.sheet-conhecimentosubflag:checked + span,
.sheet-atuacaosubflag:checked + span,
.sheet-periciasubflag:checked + span
{
    color: black;
    display: block;
    background:white;
}

.sheet-talentosubflag + span,
.sheet-classesubflag + span,
.sheet-raciaissubflag + span,
.sheet-componenteflagmagia + span,
.sheet-danoflagmagia + span,
.sheet-ataqueflagmagia + span,
.sheet-resistenciaflagmagia + span,
.sheet-magiaflag + span,
.sheet-oficiosubflag + span,
.sheet-conhecimentosubflag + span,
.sheet-atuacaosubflag + span,
.sheet-periciasubflag + span,
.sheet-armassubflag + span,
.sheet-inventorysubflag + span
{
    display:block;
}

.sheet-talentosubflag:checked ~ .sheet-subtalento,
.sheet-classesubflag:checked ~ .sheet-subclasse,
.sheet-raciaissubflag:checked ~ .sheet-subraciais,
.sheet-componenteflagmagia:checked ~ .sheet-submagiacomponente,
.sheet-danoflagmagia:checked ~ .sheet-submagiadano,
.sheet-ataqueflagmagia:checked ~ .sheet-submagiaataque,
.sheet-resistenciaflagmagia:checked ~ .sheet-submagiaresistencia,
.sheet-magiaflag:checked ~ .sheet-submagia,
.sheet-oficiosubflag:checked ~ .sheet-suboficio,
.sheet-conhecimentosubflag:checked ~ .sheet-subconhecimento,
.sheet-atuacaosubflag:checked ~ .sheet-subatuacao,
.sheet-periciasubflag:checked ~ .sheet-subpericia,
.sheet-armassubflag:checked ~ .sheet-subarma,
.sheet-inventorysubflag:checked ~ .sheet-subitem
{
    display: inherit;
}

.sheet-subitem{
    width: calc(100% - 40px);
    font-size: 9px;
    padding: 0px 5px 0px 15px;
    min-height: 15px;
    height: 15px;
    margin: 0px;
    margin-bottom: 30px;
    display:none;
}

.sheet-subitem textarea {
    width: 95%;
    height: 30px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
}

.sheet-subitem span {
    width: 28px;
    padding: 0px 0px 0px 15px;
    display: inline-block;
}

.sheet-subarma{
    width: calc(100% - 40px);
    font-size: 9px;
    padding: 5px;
    margin: 0px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:20px;
    display:none;
    text-align:center;
    border: 1px solid black;
    border-radius:5px;
}

.sheet-subarma textarea {
    width: 95%;
    height: 30px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
}

.sheet-subarma span {
    padding: 0px 0px 0px 15px;
    display: inline-block;
}

.sheet-subpericia{
    width: 100%;
    font-size: 9px;
    height: 35px;
    display:none;
}

.sheet-subpericia textarea {
    width: 95%;
    height: 50px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
    margin-bottom:10px;
}

.sheet-subpericia span {
    width: 28px;
    padding: 0px 0px 0px 15px;
    display: inline-block;
}

.sheet-subatuacao{
    width: 100%;
    font-size: 9px;
    height: 35px;
    display:none;
}

.sheet-subatuacao textarea {
    width: 95%;
    height: 50px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
    margin-bottom:10px;
}

.sheet-subatuacao span {
    width: 28px;
    padding: 0px 0px 0px 15px;
    display: inline-block;
}

.sheet-subconhecimento{
    width: 100%;
    font-size: 9px;
    height: 35px;
    display:none;
}

.sheet-subconhecimento textarea {
    width: 95%;
    height: 50px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
    margin-bottom:10px;
}

.sheet-subconhecimento span {
    width: 28px;
    padding: 0px 0px 0px 15px;
    display: inline-block;
}

.sheet-suboficio{
    width: 100%;
    font-size: 9px;
    height: 35px;
    display:none;
}

.sheet-suboficio textarea {
    width: 95%;
    height: 50px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
    margin-bottom:10px;
}

.sheet-suboficio span {
    width: 28px;
    padding: 0px 0px 0px 15px;
    display: inline-block;
}

.sheet-subtalento,
.sheet-subclasse,
.sheet-subraciais,
.sheet-submagiadano,
.sheet-submagiacomponente,
.sheet-submagiaataque,
.sheet-submagiaresistencia,
.sheet-submagia{
    width: 100%;
    font-size: 9px;
    display:none;
    padding-top:10px;
    padding-bottom:10px;
}

.sheet-subtalento textarea,
.sheet-subclasse textarea,
.sheet-subraciais textarea,
.sheet-submagiadano textarea,
.sheet-submagiacomponente textarea,
.sheet-submagiaataque textarea,
.sheet-submagiaresistencia textarea,
.sheet-submagia textarea {
    width: 95%;
    height: 50px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    display:inline-block;
    border: 1px solid black;
    margin-bottom:10px;
}

.sheet-subtalento span,
.sheet-subclasse span,
.sheet-subraciais span,
.sheet-submagia span {
    display: inline-block;
}