roll20-character-sheets/WeirdFrontiers/WeirdFrontiers.css

::-moz-selection, ::selection
{
  background: #7777ff;
  color:black;
}

input.sheet-tab1:checked ~ div.sheet-tab1
{
    display: inline-block;
}

input.sheet-tab2:checked ~ div.sheet-tab2 {
    display:inline-block;
    width:100%;
}

input.sheet-tab3:checked ~ div.sheet-tab3 {
    display:inline-block;
    width:100%;
}

input.sheet-hexed:checked ~ select.sheet-fumble-die,
input.sheet-hexed:checked ~ input.sheet-hexes
{
/*    background-color:#ee9999; */
    background-color: rgba(224, 30, 30, .35);
}

input.sheet-booned:checked ~ input.sheet-boons
{
    background-color:#afcfa3;
}

div.sheet-tab1
{
    display:none;
}

div.sheet-tab2
{
    display:none;
}

div.sheet-tab3
{
    display:none;
}

span.sheet-tab1, span.sheet-tab2, span.sheet-tab3
{
    background-color:#eeeeee;
    padding:5px;
    border-bottom:1px solid #aaaaaa;
    margin-right:10px;
}

input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
input.sheet-tab3:checked + span.sheet-tab3
{
    border-top:1px solid #aaaaaa;
    border-left:1px solid #aaaaaa;
    border-right:1px solid #aaaaaa;
    border-bottom:none;
}

span.sheet-tab1:hover, span.sheet-tab2:hover, span.sheet-tab3:hover
{
    background-color:#a9cbeb;
}

input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
input.sheet-tab3:checked + span.sheet-tab3
{
    background: #eeeeee;
    color: #000000;
    border-radius: 5px 5px 0px 0px;
    vertical-align: middle;
}

.sheet-header
{
    text-align:left;
    font-size:200%;
    color: #aa2233;
    font-weight:bold;
    margin-left:15%;
}

/*.sheet-title
{
    height:40px;
    margin-left:130px;
    width:113%;
    margin-left:-30px;
    margin-right:-80px;
    margin-top:-30px;
    margin-bottom:-110px;
}*/

.sheet-title
{
    max-width:65%;
    max-height:10%;
    margin-left:35%;
    margin-top:-.5%;
    margin-bottom:-3.1%;
}

.sheet-page1
{
    width:100%;
    height:25em;
    display:inline-block;
}

.image
{
    width: 38%;
}

.sheet-main
{
    background-position: center; /* Center the image */
    background-size: cover; 
    width:800px;
    min-width:800px;
    height: 60em;
    font-family: "Duvall";
    display:inline-block;
    padding-left:21px;
    padding-right:22px; /* was 32px */
    margin-left:9px;
    box-sizing:border-box !important;
}

.sheet-barb
{
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/WeirdFrontiers/BarbedWireBorder.png");
    background-position: center; /* Center the image */
    /*background-size: 100% 150%; */
    background-size:100% 100%;
    /*width:844px;*/
    width:864px;
    height:1200px;
    margin-left:-15px;
}

input.sheet-derived
{
   /* background-color:#cccccc !important; */
    background-color: rgba(130, 130, 130, 0.35) !important;
}

input.sheet-opaque
{
    background-color:#ADC2FA; /* C5D4FB  d7dbed */
}

input.sheet-opaque-derived
{
    background-color:#dddddd; /* C5D4FB  d7dbed */
}

.sheet-zero-image, .sheet-bedlamite-image, .sheet-calavera-image, .sheet-gambler-image, .sheet-gunslinger-image, .sheet-hellbilly-image, .sheet-luchador-image, .sheet-mountebank-image, .sheet-mystic-monk-image, .sheet-occultist-image, .sheet-revelator-image, .sheet-sin-eater-image, .sheet-tommyknocker-image
{
    display:none;
    max-width:800px;
    margin-left:3.5em;
    margin-top:5.8em;
}

img.sheet-tab2
{
    display:inline-block;
    position:absolute;
    top:45px;
    left:25px;
    width:95%;
    opacity:.1;
    z-index:-1;
}

input.sheet-zero:checked ~ img.sheet-zero-image,
input.sheet-bedlamite:checked ~ img.sheet-bedlamite-image,
input.sheet-calavera:checked ~ img.sheet-calavera-image,
input.sheet-gambler:checked ~ img.sheet-gambler-image,
input.sheet-gunslinger:checked ~ img.sheet-gunslinger-image,
input.sheet-hellbilly:checked ~ img.sheet-hellbilly-image,
input.sheet-luchador:checked ~ img.sheet-luchador-image,
input.sheet-mountebank:checked ~ img.sheet-mountebank-image,
input.sheet-mystic-monk:checked ~ img.sheet-mystic-monk-image,
input.sheet-occultist:checked ~ img.sheet-occultist-image,
input.sheet-revelator:checked ~ img.sheet-revelator-image,
input.sheet-sin-eater:checked ~ img.sheet-sin-eater-image,
input.sheet-tommyknocker:checked ~ img.sheet-tommyknocker-image
{
   display:inline-block;
   position:absolute;
   top:45px;
   left:0px;
   width:100%;
   z-index:-1;
   opacity:.12;
}

input.sheet-calavera2:checked ~ input.sheet-calavera2,
input.sheet-bedlamite2:checked ~ input.sheet-bedlamite2,
input.sheet-gambler2:checked ~ input.sheet-gambler2,
input.sheet-gunslinger2:checked ~ input.sheet-gunslinger2,
input.sheet-hellbilly2:checked ~ input.sheet-hellbilly2,
input.sheet-luchador2:checked ~ input.sheet-luchador2,
input.sheet-mountebank2:checked ~ input.sheet-mountebank2,
input.sheet-mystic-monk2:checked ~ input.sheet-mystic-monk2,
input.sheet-occultist2:checked ~ input.sheet-occultist2,
input.sheet-revelator2:checked ~ input.sheet-revelator2,
input.sheet-sin-eater2:checked ~ input.sheet-sin-eater2,
input.sheet-tommyknocker2:checked ~ input.sheet-tommyknocker2
{
    display:inline-block;
}

input.sheet-bedlamite2:checked ~ span.sheet-bedlamite2,
input.sheet-luchador2:checked ~ span.sheet-luchador2,
input.sheet-calavera2:checked ~ span.sheet-calavera2,
input.sheet-gunslinger2:checked ~ span.sheet-gunslinger2,
input.sheet-hellbilly2:checked ~ span.sheet-hellbilly2,
input.sheet-mountebank2:checked ~ span.sheet-mountebank2,
input.sheet-mystic-monk2:checked ~ span.sheet-mystic-monk2,
input.sheet-occultist2:checked ~ span.sheet-occultist2,
input.sheet-gambler2:checked ~ span.sheet-gambler2,
input.sheet-revelator2:checked ~ span.sheet-revelator2,
input.sheet-sin-eater2:checked ~ span.sheet-sin-eater2,
input.sheet-tommyknocker2:checked ~ span.sheet-tommyknocker2
{
    display:inline-block;
}

input.sheet-revelator2:checked ~ br.sheet-revelator2
{
    display:inline-block;
}

input.sheet-gambler2:checked ~ button.sheet-gambler2,
input.sheet-hellbilly2:checked ~ button.sheet-hellbilly2,
input.sheet-mystic-monk2:checked ~ button.sheet-mystic-monk2
{
    display:inline-block;
}

.sheet-invis
{
    display:none;
}

.sheet-disabled
{
    cursor: not-allowed;
    pointer-events:none;
    background-color:#cccccc;
}

.sheet-rolltemplate-green
{
    /*color:#3f883f !important;*/
    color:#246b20;
}

.sheet-rolltemplate-red
{
    color:#a00801 !important;
}

.sheet-instructions
{
    font-size:1.1em;
    padding-left:25px;
}

.sheet-instructions > div
{
    margin-bottom:2px;
}

.sheet-basicinfo
{
    width:33%;
    display:inline-block;
    vertical-align:top;
}

.sheet-middlegap
{
    width:13%;
    display:inline-block;
    margin-left:1.5%;
    margin-right:1.5%;
    text-align:center;
    vertical-align:top;
}

.sheet-class-specific
{
    font-weight:bold;
    text-align:center;
    margin-right:20px;
    margin-top:8px;
}

.sheet-hp
{
    width:108%;
    height:140px;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/WeirdFrontiers/hp.png");
    background-size: cover;
    vertical-align:middle;
    z-index:-1;
    padding-top:70px;
    box-sizing:border-box;
    margin-left:-5px;
    margin-right;-5px;
    margin-top:-20px;
    font-weight:bold;
}
.sheet-ac
{
    height:116px;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/WeirdFrontiers/ac.png");
    background-size: cover;
    z-index:-1;
    padding-top:52px;
    padding-left:4px;
    margin-left:-8px;
    margin-right:-8px;
    margin-top:0px;
    box-sizing:border-box;
}

.sheet-grit
{
    padding-top:40px;
    padding-left:7px;
    margin-top:0px;
    /* margin-bottom:47px; */
    margin-bottom:6.7em;
    width:100%;
    height:96px;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/WeirdFrontiers/grit.png");
    background-size:cover;
    /* background-repeat: no-repeat; */
    background-position:center;
    box-sizing:border-box;
    z-index:-1;
}

.sheet-hexboons
{
    margin-top:30px;
    margin-bottom:20px;
    display:inline-block;
    padding-left:5px;
}

.sheet-init
{
    /*
    margin-left:28px;
    margin-right:-8px;
    */
    margin-left:15px;
}

.sheet-init2
{
    margin-top:8px;
    margin-right:-10px;
    margin-left:-10px;
}

.sheet-rightcol2
{
    margin-right:-65px;
    display:inline-block;
    margin-left:14px;
}
.sheet-rightcol
{
    width:56%;
    min-width:56%;
    display:inline-block;
    margin-right:-50px;
}
.sheet-special-abilities
{
    /*min-height:330px;*/
    min-height:32em;
}

.sheet-weapons
{
    /*min-height:330px;*/
    min-height:26.5em;
    vertical-align:top;
    /*margin-bottom:50px;*/
    margin-bottom:3em;
}

.sheet-sundries
{
    /*min-height:335px;*/
    min-height:25em;
}

.sheet-trail-notes
{
    /*min-height:525px;*/
    min-height:43em;
}

.sheet-stable
{
    /*min-height:185px;*/
    min-height:15em;
}

.sheet-valuables
{
    /*min-height:150px;*/
    min-height:15em;
}

.sheet-arcane
{
    /*min-height:185px;*/
    min-height:15em;
}

.sheet-saves
{
    width:118%;
    border-right:2px solid #333333;
    border-top:2px solid #666666;
    border-bottom:2px solid #666666;
    border-radius:0px 5px 5px 0px;
    margin-top:8px;
    padding: 3px 1px 3px 0px;
}

.sheet-luckyroll
{
    margin-top:3em;
}

.sheet-reflex
{
    margin-right:-5px;
}

.sheet-fortitude
{
    margin-right:-5px;
}

.sheet-will
{
    margin-right:-5px;
}

.sheet-crit-die, .sheet-fumble-die
{
    padding-left:8px;
}

.sheet-attrib
{
    margin-bottom:1px;
}

.sheet-width120
{
    width:120%;
}
.sheet-width100
{
    width:100%;
}

.sheet-width90
{
    width:90%;
}

.sheet-width85
{
    width:85%;
}

.sheet-width80
{
    width:76%;
}

.sheet-width75
{
    width:73%;
}

.sheet-width65
{
    width:65%;
}

.sheet-width55
{
    width:54%;
    display:inline-block;
}

.sheet-width52
{
    width:51.5%;
    display:inline-block;
}

.sheet-width50
{
    width:49%;
    /* display:inline-block; */
}

.sheet-width48
{
    width:47%;    
}

.sheet-width47
{
    width:46%;
}

.sheet-width45
{
    width:44%;
    /* display:inline-block; */
}

.sheet-width40
{
    width:39%;
}

.sheet-width38
{
    width:37%;
}

.sheet-width35
{
    width:34%;
}

.sheet-width33
{
    width:32%;
}

.sheet-width30
{
    width:29% !important;
}

.sheet-width28
{
    width:27% !important;
}

.sheet-width25
{
    width:24% !important;
}

.sheet-width24
{
    width:23% !important;
}

.sheet-width20
{
    width:19% !important;
}

.sheet-width19
{
    width:18% !important;
}

.sheet-width18
{
    width:17%;
}

.sheet-width15
{
    width:15% !important;
}

.sheet-width14
{
    width:14% !important;
}

.sheet-width13
{
    width:13% !important;
}

.sheet-width12
{
    width:12% !important;
}

.sheet-width11
{
    width:11% !important;
}

.sheet-width10
{
    width:10% !important;
}

.sheet-width9
{
    width:9%;
}

.sheet-width8
{
    width:8%;
}

.sheet-width7
{
    width:7%;
}

.sheet-width5
{
    width:5% !important;
}

.sheet-bignumber
{
    font-size:1.8em;
}

.sheet-smallnumber
{
    font-size:1em;
}

.sheet-biglabel
{
    display:inline-block;
    font-weight:bold;
    font-size:1.2em;
    text-align:left;
    box-sizing:border-box;
}

.sheet-inline
{
    display:inline-block;
}

.sheet-label {
    /*display:inline-block;*/
    font-weight:bold;
    font-size:1.1em;
    text-align:left;
    box-sizing:border-box;
}

.sheet-tinybreak
{
    font-size:1px;
}

.sheet-list
{
    background-color:transparent;
    border:2px solid black;
    padding:1px;
    box-sizing:border-box;
}

.sheet-list-item
{
    border-bottom:2px dashed gray;
/*    background-color:#596b8b;
    background-color: rgba(120, 140, 220, 0.35);*/
    background-color: #eeeeee;
    margin-bottom:4px;
    padding-top:4px;
    padding-bottom:3px;
}

.sheet-item-field
{
    margin-right:-2px;
}

.sheet-item-name
{
    font-weight:bold;
    color:#223366;
    margin-left:2px;
    font-size:1.05em;
}

.sheet-list-header
{
    padding-left:20px;
    padding-right:20px;
    color:#333333;
}

.sheet-textarea
{
    rows:25;
    maxlength:600;
    background-color:#a9cbeb;
    border: 2px solid black;
    opacity:1;
    resize:none;
}

.sheet-white
{
    color:white;
}

.sheet-rolltemplate-italic
{
    font-style: italic;
}

.sheet-center
{
    text-align:center;
}

.sheet-right
{
    text-align:right;
}

.sheet-path
{
    border:2px solid black;
    padding:4px 6px 4px 6px;
    box-sizing:border-box;
}

.sheet-theline
{
    margin-right:10px;
    display:inline-block !important;
}

.sheet-indent
{
    margin-left:10px;    
}

.sheet-bigindent
{
    margin-left:13%;
}

.sheet-up4
{
    margin-top:-4px;
}

.sheet-up6
{
    margin-top:-6px;    
}

.sheet-up8
{
    margin-top:-8px;
}

.sheet-up10
{
    margin-top:-10px;
}

.sheet-down10
{
    margin-top:10px;
}

.sheet-left20
{
    margin-left:-16px;    
}

.sheet-gap55
{
    margin-right:55%;
}

.sheet-gap30
{
    margin-right:50%;
}

.sheet-gap1
{
    margin-right:1%;
}

.sheet-inverted
{
    background-color:#000000;
    color:white;
    padding:4px;
    margin-bottom:-1px;
}

.sheet-table-header
{
    background-color:#cccccc;
    border-right:2px solid black;
    border-left:2px solid black;
    padding-left:8px;
    padding-bottom:2px;
    padding-top:2px;
}

.sheet-radio
{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sheet-rolltemplate-header
{
    background-color:black;
    color:white;
    padding:8px;
    border-radius:5px 5px 0px 0px;
    text-align:center;
    font-family:"Duvall";
}

.sheet-rolltemplate-heading
{
    font-size:1.4em;
}

.sheet-rolltemplate-subheading
{
    font-size:1.1em;
    font-variant:small-caps;
    padding-top:8px;
}

.sheet-rolltemplate-results
{
    text-align:center;
    font-family:"Duvall";
    background-color:#eeeeee;
    color:black;
    padding-bottom:8px;
    padding-left:13px;
    padding-top:20px;
    border-left:1px solid black;
    border-right:1px solid black;
    border-bottom:1px solid black;
    border-radius:0px 0px 5px 5px;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/WeirdFrontiers/cthulhoid_background.png");
    background-size:contain;
}

.sheet-rolltemplate-result
{
    font-weight:bold;
    font-size:2.3em;
    margin-top:15px;
}

.sheet-rolltemplate-extra-results
{
    text-align:left;
    font-weight:bold;
    font-size:1.1em;
    line-height:1.4;
}

.sheet-rolltemplate-extra-result
{
   
}

.sheet-rolltemplate-ability-check, .sheet-rolltemplate-saving-throw
{
    height:13em;
}

button[type="roll"]
{
    font-size:1em !important;
    border:1px solid #2222aa;
}

button.sheet-small
{
    font-size:.9em !important;
    margin-right:-1px !important;
}

input.sheet-tab1:checked + button[type="action"],
input.sheet-tab2:checked + button[type="action"],
input.sheet-tab3:checked + button[type="action"]
{
    border-top:1px solid black;
    border-right:1px solid black;
    border-left:1px solid black;
    border-bottom:none;
    background-color:#ffffff;
}

button[type="action"]
{
    border:1px solid black;
    margin-right:-3px;
    outline:none;
    background-color:#dddddd;
    border-radius:6px 6px 0px 0px;
}

.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del
{
    height:1.4em;
    padding:2px;
    padding-left:5px;
    padding-right:5px;
}

input, select
{
   /* background-color:#a9cbeb; */
/*    background-color: rgba(155, 170, 232, 0.35);*/
    background-color: rgba(22, 81, 241, 0.3);
    border:2px solid black;
    font-weight:550;
    z-index:2;
    border-radius:0px;
    color:#444444;
    box-sizing:border-box;
    line-height:1em;
    padding:3px;
}

textarea
{
    resize:none;
    background: rgba(155, 170, 232, 0.35);
    box-sizing:border-box !important;
    border:2px solid black;
    border-radius:0px 0px 3px 3px;
}

select
{
    vertical-align:top;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    height:26px;
}

select:disabled
{
    color:black;
}


input[type=number] {
    -moz-appearance:textfield;
    text-align:center;
}


/* Webkit  like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}