roll20-character-sheets/Pendragon/Pendragon.css

.sheet-container {
    position: relative;   
    width: 1350px;
    padding: 60px;
}

.sheet-background {
    width: 100%;
    height: 100%;
}

.sheet-background::after {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
    background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pendragon/Images/Pendragon%20Background.png');
    background-size: 100% 100%;
}

/* TABS */
div.sheet-tab-content { display: none; }

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,
input.sheet-tab5:checked ~ div.sheet-tab5,
input.sheet-tab6:checked ~ div.sheet-tab6,
input.sheet-tab7:checked ~ div.sheet-tab7,
input.sheet-tab8:checked ~ div.sheet-tab8,
input.sheet-tab9:checked ~ div.sheet-tab9

{
    display: block;
}

input.sheet-tab
{
    width: 100px;
    height: 20px;
    position: relative;
    top: 0px;
    left: 5px;
    margin: -1.5px;
    margin-bottom: 5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-tab + span::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: 100px;
    height: 20px;
    font-size: 18px;
    
    position: absolute;
    top: 57px;
    left: 62px;
}

input.sheet-tab:checked + span::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) + span::before
{
    border-left: none;
}

input.sheet-tab2 + span::before
{
    /*left: 180px;*/
	left: 165px;
    
    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);
}

input.sheet-tab3 + span::before
{
    /* left: 330px; */
	left: 267px;
}


input.sheet-tab4 + span::before
{
	/*left: 480px;*/
    left: 369px;
}

input.sheet-tab5 + span::before
{
	/*left: 630px;*/
    left: 471px;
}

input.sheet-tab6 + span::before
{
    /*left: 780px;*/
	left: 573px;
}

input.sheet-tab7 + span::before
{
	/*left: 930px;*/
    left: 675px;
}

input.sheet-tab8 + span::before
{
	/*left: 1080px;*/
    left: 777px;
}

input.sheet-tab9 + span::before
{
	/*left: 1230px;*/
    left: 879px;
}

div.sheet-tab-content
{
    margin: 2px 0 0 5px;
    padding: 5px;
}

/* NPC TAB */

div.sheet-Etab-content { display: none; }

input.sheet-Etab1:checked ~ div.sheet-Etab1,
input.sheet-Etab2:checked ~ div.sheet-Etab2,
input.sheet-Etab3:checked ~ div.sheet-Etab3

{
    display: block;
}

input.sheet-Etab
{
    width: 100px;
    height: 20px;
    position: relative;
    top: 0px;
    left: 5px;
    margin: -1.5px;
    margin-bottom: 5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-Etab + span::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: 100px;
    height: 20px;
    font-size: 18px;
    
    position: absolute;
    top: 81px;
    left: 0px;
}

input.sheet-Etab:checked + span::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-Etab:not(:first-child) + span::before
{

    border-left: none;
}

input.sheet-Etab2 + span::before
{
    /* left: 155px */
    left: 102px;
    
    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);
}

input.sheet-Etab3 + span::before
{

    
    /* left: 305px */
    left: 204px;
}

/* sheet */

.sheet-col strong.sheet-dee {
    font-size: 1em;
    font-weight: bold;
}
.charsheet input,.charsheet select {
   font-weight:bold;
   text-align:center;
}

.charsheet input.sheet-long {
    width: 10em;
}

.charsheet select.sheet-long {
    width: 12em;
}
.charsheet input.sheet-short {
    width: 4em;
}
.charsheet checkbox {
    margin-left: 50px;
}

.sheet-carac1  {
    font-size: 1em;
     width: 8em;
 
}

.sheet-carac2, .sheet-carac3  {
    font-size: 1em;
     width: 2em;
 
}
.sheet-comp  {
    font-size: 1em;
     width: 2em;
 
}

.sheet-carac3 {

    color: #00B7FF;
}

.charsheet table td, .charsheet table th {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

select.sheet-dtype {
    width: 60px;
    vertical-align: top;
}
.sheet-baseinfo {
    display: inline-block;
    width: 145px;
    margin-right: 3px;
  
}

/*Hiding Sections*/

input.sheet-arrow {
    float: left;
}

div.sheet-body {
    display: block;
}

input.sheet-arrow:checked ~ div.sheet-body {
    display: none;
}

input.sheet-toggle {
    float: left;
}

div.sheet-enemy {
    display: none;
}

input.sheet-toggle:checked ~ div.sheet-enemy {
    display: block;
}

/* compétences */
.sheet-comp{
   
}

/*.sheet-comp label {
     display: inline;     

    
}

.sheet-comp input, .sheet-comp button,  .sheet-comp checkbox {
    display: inline;     
}*/
sheet-titre2 {
   display: inline-block; 
   width: 120px;
}