div, button, textarea, span, input, select, table, tr, td, th{ box-sizing: border-box; } table{ width: 100%; } td{ text-align: center; vertical-align: middle; } div{ margin: none; padding: none; background-color: transparent; } div.sheet-main{ width: 832px; text-align:center; font-family: cursive; background-image: url('https://lh3.googleusercontent.com/-PEUr5SrYlkU/Vpt_kkrpDXI/AAAAAAAAYEE/0cfcTYxEEbI/s720-Ic42/Supersix_fond.png'); background-repeat:no-repeat; background-position:center center; background-size: cover; } div.sheet-lib1{ display: inline-block; font-family: cursive; font-weight: bolder; font-size: 16px; text-transform: uppercase; font-style: italic; width: 125px; white-space: nowrap; text-align: right; } div.sheet-lib2{ display: inline-block; font-family: cursive; font-weight: bolder; font-size: 16px; text-transform: uppercase; font-style: italic; width: 150px; white-space: nowrap; } div.sheet-ligne{ display: block; width: 100%; white-space: nowrap; text-align: center; } div.sheet-info{ font-size: 12px; white-space: nowrap; text-align: center; width: 100%; text-transform: capitalize; font-family: cursive; } div.sheet-mycol{ display: inline-block; vertical-align: top; width: 400px; min-height: 80px; text-align: left; margin: 3px; background-color: #EEEEEE; border: 10px solid transparent; padding: 0px 0px 24px 0px; border-image-source: url('https://lh3.googleusercontent.com/-fKPp8eLKtjQ/VptzCukizaI/AAAAAAAAYDo/p4cZllhW_gQ/s450-Ic42/boxcol.png'); border-image-repeat: round; border-image-slice: 60; border-image-width: 45px; } div.sheet-jauge{ width:250px; min-height: 250px; display: inline-block; vertical-align: top; text-align: center; /* border: 1px solid blue; */ } div.sheet-centre{ width:550px; display: inline-block; min-height: 475px; /* border: 1px solid blue; */ background-image: url('https://lh3.googleusercontent.com/-cxnOoyx_NcI/Vpt7bXV06SI/AAAAAAAAYD4/AtQl6z3J6Uc/s550-Ic42/Supersix_logo2.png'); background-repeat:no-repeat; background-position:center center; background-size: cover; padding:10px; position: relative; } div.sheet-bulle{ width: 150px; height: 80px; border-radius: 40px; background-color: transparent; text-align: center; display: inline-block; } span.sheet-carac{ text-align: center; background-color: black; color: white; text-transform: capitalize; font-weight: bold; font-size: 16px; width: 100px; display: inline-block; margin: 5px; border-radius: 10px; } span.sheet-jaugetitre{ text-align: center; background-color: white; color: black; text-transform: uppercase; font-weight: bold; font-size: 14px; width: 130px; display: inline-block; margin: 5px; border-radius: 10px; } input{ display: inline-block; font-family: cursive; padding: none; margin: none; font-size: 12px; } input[type="text"].sheet-biginptxt{ font-size: 16px; width: calc(100% - 130px); } input[type="text"].sheet-inptxt1{ width: calc(100% - 130px); } input[type="text"].sheet-inpnom{ font-size: 13px; font-weight: bold; width: 100px; } input[type="text"].sheet-inpdesc{ font-size: 12px; font-weight: normal; width: 250px; } input[type="text"].sheet-inpeffet{ font-size: 13px; font-weight: bold; width: 210px; } input[type="number"]{ text-align: right; font-family: cursive; } input[type="number"].sheet-carac{ font-size: 20px; font-weight: bold; } select{ padding: none; margin: none; vertical-align: top; } button[type=roll].sheet-btDesc{ color: inherit; height:24px; width:26px; line-height: 16px; vertical-align: middle; padding:none; border:none; margin: 0px 0px 0px -4px; background:none; border-radius:10px; opacity: 0.4; } button[type=roll].sheet-btDesc:before{ content:none; } button[type=roll].sheet-btDesc:hover{ box-shadow: 1px 1px 1px 1px #888888; opacity: 0.7; } button[type=roll].sheet-macrobt { padding: 2px 0px 0px 0px; margin: 0px 0px 0px 0px; text-shadow: none; box-shadow: none; text-align:center; vertical-align: middle; line-height: 0px; height: 25px; width: 25px; font-weight: normal; color:black; background-color: white; border-style: none; } button[type=roll].sheet-macrobt:before{ font-family: "dicefontd6"; font-size: 1.8em; content: 'f'; } button[type=roll].sheet-macrobt:hover{ border-width: 2px; border-color:#CC0000; color: #CC0000; font-weight: bold; } /* Hide actual radio */ input[type="radio"].sheet-jauge { opacity: 0; width: 40px; height: 40px; position: relative; top: 5px; left: 6px; margin: -40px; cursor: pointer; z-index: 1; } /* Fake radio */ input[type="radio"].sheet-jauge + span::before { margin-right: 4px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; content: "X"; width: 40px; height: 40px; font-size: 24px; border-width: 2px 0px 0px 2px; border-color: black; box-shadow: 5px 5px 3px #888888; vertical-align: middle; color: #FF8080; background-color: #FF8080; } /* Remove dot from all radios _after_ selected one */ input[type="radio"].sheet-jauge:checked ~ input[type="radio"].sheet-jauge + span::before { content: ""; content: attr(value); color:#80D180; background-color: #80D180; } .sheet-rolltemplate-supersix table{ background-color: white; border: 1px solid black; width: 189px; padding: 2px; font-family: cursive; color: black; font-size: 1em; } .sheet-rolltemplate-supersix tr{ padding-top: 2px; padding-bottom: 2px; padding-right: 0px; padding-left: 0px; } .sheet-rolltemplate-supersix th{ padding: 3px; font-size: 1.1em; text-align: center; font-variant: small-caps; font-weight: bold; color: white; background-color: black; } .sheet-rolltemplate-supersix td{ padding: 2px; font-size: 1em; } .sheet-rolltemplate-supersix .sheet-subheader{ font-style: italic; text-align: right; border-bottom: 1px dashed black; } .sheet-rolltemplate-supersix td.sheet-tcat{ font-color: #FF8080; font-style: italic; font-size: 0.9em; } .sheet-rolltemplate-supersix .inlinerollresult{ font-size: 1em; background-color: transparent; border-width: 0px 0px 0px 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none; } .sheet-rolltemplate-supersix .inlinerollresult.fullcrit{ color: #3FB315; font-size: 1em; background-color: transparent; border-width: 0px 0px 0px 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none; } .sheet-rolltemplate-supersix .inlinerollresult.fullfail{ color: #B31515; font-size: 1em; background-color: transparent; border-width: 0px 0px 0px 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none; } .sheet-rolltemplate-supersix .inlinerollresult.importantroll{ color: #4A57ED; font-size: 1em; background-color: transparent; border-width: 0px 0px 0px 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none; }