roll20-character-sheets-tester/Tesoro-y-Gloria/tesoroygloria.css

/* General styling */

.charsheet {
  background-color: #fff;
  min-width: 800px;
}

input {
  display: inline-block;
  width: 165px;
}

.sheet-margin{
    margin-left: 5px;
    margin-bottom: 5px;
}

input.sheet-w240{
  width:240px;
}
input.sheet-w200{
  width:200px;
}
input.sheet-w150{
  width:150px;
}
input.sheet-w125{
  width:125px;
}
input.sheet-w120{
  width:120px;
}
input.sheet-w110{
  width:110px;
}
input.sheet-w100{
  width:100px;
}
input.sheet-w85{
  width:85px;
}
input.sheet-w70{
  width:70px;
}
input.sheet-w60{
  width:60px;
}
input.sheet-w32{
  width:32px;
}

p {
    margin: 5px;
}

textarea {
  padding: 6px 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 2px;
  background-color: #f8f8f8;
  resize: none;
  display: block;
  margin: 5px;
}

table  {  
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 90%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 2px;
  height: 28px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

col {
    column-width: 300px;
    column-gap: 10px;
}

textarea {
  padding: 6px 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 2px;
  background-color: #f8f8f8;
  resize: none;
}


/* Section specific */


/* Page 1 */

/* Main info block */

div.sheet-main-info{
  display: grid;
  grid-template-columns: 2fr 5fr 2fr 3fr 5fr 2fr;
  grid-template-rows: 1fr 1fr;
  width: 710px;
  height: 60px;
  margin: 5px;
  border: 3px solid #ddd;
}

div.sheet-main-info{
  background-color: #ddd;
}

div.sheet-main-info span.sheet-title {
  font-weight: bold;
  padding-left: 4px;
}

div.sheet-main-info button + span.sheet-title {
  padding-left: 0px;
}

.sheet-main-stats input[type="text"] {
  width: 450px;
}



/* CARACTERÍSTICAS info block */

div.sheet-car-info{
  display: grid;
  grid-template-columns: 2fr repeat(2, 1fr) 5fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 710px;
  margin: 5px;
  border: 3px solid #ddd;
}

div.sheet-car-info .sheet-top{
  background-color: #ddd;
}

div.sheet-car-info span.sheet-top {
  font-weight: bold;
  padding-left: 4px;
}

div.sheet-car-info span.sheet-bot {
  padding-left: 4px;
  font-size: 110%;
}

div.sheet-car-info button + span.sheet-top {
  padding-left: 0px;
}

.sheet-car-stats input[type="text"] {
  width: 450px;
}

/* ARMAS info block */

div.sheet-arma-info{
  display: grid;
  grid-template-columns: 205px 60px 95px 250px 50px 50px;
  grid-template-rows: 28px;
  width: 710px;
  margin: 5px;
  border: 3px solid #ddd;
}

div.sheet-arma-info .sheet-wep{
  background-color: #ddd;
}

div.sheet-arma-info span.sheet-wep {
  font-weight: bold;
  padding-left: 4px;
}


div.sheet-arma-info button + span.sheet-wep {
  padding-left: 0px;
}

.sheet-arma-stats input[type="text"] {
  width: 450px;
}

/* PROTECCIONES info block */

div.sheet-prot-info{
  display: grid;
  grid-template-columns: 180px 55px 55px 55px 70px 235px 60px;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  width: 710px;
  margin: 5px;
  border: 3px solid #ddd;
}

div.sheet-prot-info .sheet-def{
  background-color: #ddd;
}

div.sheet-prot-info span.sheet-def {
  font-weight: bold;
  padding-left: 4px;
}

div.sheet-prot-info span.sheet-def {
  padding-left: 4px;
  font-size: 100%;
}


div.sheet-prot-info button + span.sheet-def {
  padding-left: 0px;
}

.sheet-prot-stats input[type="text"] {
  width: 450px;
}

/* MONSTRUOS info block */

div.sheet-mon-info{
  display: grid;
  grid-template-columns: 205px 60px 95px 250px;
  grid-template-rows: 28px;
  width: 610px;
  margin: 5px;
  border: 3px solid #ddd;
}

div.sheet-mon-info .sheet-dang{
  background-color: #ddd;
}

div.sheet-mon-info span.sheet-dang {
  font-weight: bold;
  padding-left: 4px;
}


div.sheet-mon-info button + span.sheet-dang {
  padding-left: 0px;
}

.sheet-mon-stats input[type="text"] {
  width: 450px;
}


/* Page 1 - shield & images */
img.sheet-skull{
  width:45px;
  height: 45px;
}
img.sheet-armor{
  width:45px;
  height: 60px; 
}
img.sheet-sword{
  width:45px;
  height: 45px;
}
select.sheet-sword{
  margin-top: 17px;
  margin-bottom: 0px;
}
img.sheet-foot{
  width: 45px;
  height: 60px;
}

/* Page 1 - Protecciones */

.sheet-protec input.sheet-tipo{
  width: 55px;
}

.sheet-protec input.sheet-prop{
  width: 250px;
}

select.sheet-dtype {
  vertical-align: top;
  width: 60px;
}


/* Page 2 */

/* Page 2 Talentos */

.sheet-talentos textarea{
  width: 350px;
  height: 71px;
}
.sheet-talentos .sheet-talentos-prestigio textarea{
  width: 200px;
  height: 52px;
}

/* Page 4 DEVOCIÓN  */

.sheet-dominos input{
  width: 95px;
}

/* Tabs */

.sheet-pericias,
.sheet-tesoro,
.sheet-diario,
.sheet-devocion,
.sheet-monstruos{
	display: none;
}

.sheet-tabstoggle[value="pericias"] ~ div.sheet-pericias,
.sheet-tabstoggle[value="tesoro"] ~ div.sheet-tesoro,
.sheet-tabstoggle[value="diario"] ~ div.sheet-diario,
.sheet-tabstoggle[value="devocion"] ~ div.sheet-devocion,
.sheet-tabstoggle[value="monstruos"] ~ div.sheet-monstruos {
	display: block;
}