roll20-character-sheets/DresdenFilesAccelerated/DFA.css

input[type="text"] {
    display:            flex;
    background-color:   transparent;
    box-shadow:         none;
    border-radius:      0;
    flex:               1;
    vertical-align:     middle;
    width:              100%;
    height:             28px;
    margin:             auto;
    color:              black;
    min-width:          20px;
}

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

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

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:                black;
}

::-moz-placeholder { /* Firefox 19+ */
  color:                black;
}

:-ms-input-placeholder { /* IE 10+ */
  color:                black;
}

:-moz-placeholder { /* Firefox 18- */
  color:                black;
}

.sheet-box {
    height:             28px !important;
    padding-top:        2.5px;
    padding-bottom:     2.5px;
}

.sheet-checkbox {
    width:              28px !important;
    height:             28px !important;
    opacity:            0;
    position:           absolute;
    margin:             auto;
}

.sheet-checkbox + span::before {
    position:           relative;
    content:            url(http://i.imgur.com/nAAUXzD.png);
    z-index:            -1;
}

.sheet-checkbox:checked + span::before {
    content:            url(http://i.imgur.com/NckV8Nn.png);
    //z-index:            -1;
}

.sheet-button {
    width:              25px;
    height:             25px;
    margin-top:         auto !important;
    margin-bottom:      auto !important;
    font-size:          13px !important;
}

.itemcontrol {
    z-index:            1000 !important;
}

.sheet-outline {
    display:            flex !important;
    flex-flow:          row;
    flex-wrap:          wrap;
    border:             1px solid #4c2590;
}

.sheet-text-header {
    box-sizing:         border-box;
    background-color:   #4c2590;
    color:              white;
    font-weight:        bold;
    font-size:          14px;
    height:             34px;
    line-height:        34px;
    padding-left:       4px;
    z-index:            -2;
}

.sheet-text-other {
    color:              black;
    margin:             auto auto auto 0px;
    padding:            1px 4px 1px 4px;
    font-size:          13px;
}

.sheet-number {
    border:             1px solid #4c2590;
    border-radius:      100px;
    box-shadow:         none;
    height:             25px !important;
    width:              25px !important;
    text-align:         center;
    margin-top:         auto;
    margin-bottom:      auto;
    margin-left:        4px;
    margin-right:       4px;
    
}
.sheet-number-fate {
    height:             100% !important;
    width:              100% !important;
    text-align:         center;
    border:             none;
    background-color:   transparent;
    font-size:          15px;
}

.sheet-text-aspects {
    padding-left:       4px;
    color:              black;
    font-size:          10px;
    vertical-align:     center;
}

.sheet-title {
    width:              100%;
    color:              #4c2590;
    font-size:          30px;
    font-weight:        bold;
    text-align:         center;
    line-height:        30px;
}

.sheet-half {
    width:              50%;
}

.sheet-third {
    width:              calc(100%/3);
}

.sheet-quarter {
    width:              25%;
}

.sheet-container {
    box-sizing:         border-box;
    display:            flex;
    flex-flow:          column;
    flex-wrap:          wrap;
    border:             1px solid #4c2590;
}

.sheet-flexrow {
    display:            flex;
    flex-flow:          row;
}

.sheet-mantle {
    display:            inline-block;
    width:              35% !important;
}

.sheet-repeating-mantle {
    display:            inline-block;
    width:              100%;
}

.sheet-fate {
    margin:             auto;
}

.sheet-top {
    display:            flex;
    flex-flow:          column;
    justify-content:    space-around;
    flex-grow:          1;
}

.sheet-spacer {
    flex-grow:          1;
}

.sheet-tooltip {
    display:            none;
    pointer-events:     none;
    position:           absolute;
    bottom:             110%;
    left:               0%;
    word-wrap:          break-word;
    text-align:         left;
    background-color:   white;
    border:             1px solid black;
    border-radius:      5px;
    pointer-events:     none;
    padding:            5px;
    white-space:        pre-wrap;
    
    visibility:         hidden; 
    opacity:            0;
    transition:         visibility 500ms, opacity 500ms; 
    -webkit-transition-delay: 0s; /* Safari */
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition:    all 500ms ease-in-out;
    -ms-transition:     all 500ms ease-in-out;
    -o-transition:      all 500ms ease-in-out;
    transition:         all 500ms ease-in-out;
    transition-delay:   0s;
}

.sheet-hover:hover + .sheet-tooltip {
    display:            block;
    background-color:   white;
    opacity:            1.0 !important;
    visibility:         visible;
    pointer-events:     visible;
    box-shadow:         none;
    z-index:            1;
}

.sheet-hover-hidden {
    margin:             auto;
    opacity:            0;
    position:           relative;
    left:               32px;
}

.sheet-hover-hidden + span::before {
    height:             32px;
    width:              32px;
    content:            url(http://i.imgur.com/SvPkbOW.png);
    z-index:            -1;
}

.sheet-hover-hidden:checked + span::before {
    height:             32px;
    width:              32px;
    content:            url(http://i.imgur.com/SvPkbOW.png);
    z-index:            -1;
}

.sheet-hover-hidden:hover ~ .sheet-tooltip {
    left:               0%;
    pointer-events:     visible;
    box-shadow:         none;
    z-index:            1;
}

.sheet-hover-hidden:checked ~ .sheet-tooltip {
    display:            block;
    left:               0%;
    background-color:   #bbb;
    opacity:            1.0;
    visibility:         visible;
    pointer-events:     visible;
    z-index:            1;
}

.sheet-stress-tab {
    display:            none;
}

.sheet-stress-tab-config {
    display:            none;
    opacity:            .99;
    background-color:   red;
}

.sheet-stress-config {
    width:              28px !important;
    height:             28px !important;
    opacity:            0;
    position:           absolute;
}

.sheet-stress-config + span::before {
    height:             32px;
    width:              32px;
    position:           absolute;
    right:              0;
    top:                0;
    content:            url(http://i.imgur.com/vxAtLJG.png);
    z-index:            -1;
}

.sheet-stress-config:checked + span::before {
    background-color:   red;
    height:             32px;
    width:              32px;
    position:           absolute;
    right:              0;
    top:                0;
    content:            url(http://i.imgur.com/vxAtLJG.png);
    //z-index:            -1;
}

.sheet-stress-config:checked ~ .sheet-stress-tab-config {
    display:            block;
}

.sheet-stress-config:not(:checked) ~ .sheet-stress-tab {
    display:            block;
}

.sheet-stress-hidden {
    display:            none;
}

.sheet-stress-hidden:checked ~ span {
    display:            none;
}

.sheet-scale {
    justify-content:    center;
    margin-top:         auto;
    margin-bottom:      auto;
}