.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; }