roll20-character-sheets/Fate_Accelerated_ES/fate.css

/* === GENERAL === */
.charsheet {
    min-width: 800px;
}

.sheet-row .sheet-col {
    width: 100%;
}

.sheet-header {
    margin-bottom: 4px;
    padding: 2px 4px;

    background: black;
    color: white;
    font-weight: bold;
}

.sheet-section {
    float: left;
    width: 100%;

    margin: 4px 0;
    padding: 1px;
    box-sizing: border-box;
}

.sheet-break {
    clear: both;
}

label,
select {
    margin: 0;
}

.sheet-repitem,
.repitem {
    margin-bottom: 2px;
}

input, textarea, select, .uneditable-input {
    display: inline-block;
    width: 100%;
    padding: 2px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

input, select, .uneditable-input {
    height: 20px;
}

textarea {
    margin: 0;
    height: 120px;
    resize: vertical;
    box-sizing: border-box;
}

/* === LOGO === */
.sheet-logo {
    width: 300px;
    margin: 0 5px;
    float: left;
}

/* === ASPECT === */
.sheet-col-aspects input {
    width: 100%;
}

/* === APPROACHES === */
table.sheet-approaches {
    width:  100%;
    position: relative;
}

/* === STRESS === */
.sheet-section {
    width:  100%;
    border: 1px solid black;
    position: relative;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 5px;
}

table.sheet-stress {
    width:  100%;
    position: relative;
}

table.sheet-stress td {
    position: relative;
}

table.sheet-stress td div.sheet-checkbox-label-div {
    width: 50px;
    height: 50px;
    position: relative;
    border: 1px solid black;
    left: calc(50% - 25px) !important;
}

table.sheet-stress td div.sheet-checkbox-label-div label {
    position: relative;
    top:-50px;
    background: #ddd;
    height: 50px;
    width: 50px;
    display: block;
    padding-right: 0px;
    /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);

    /* Opera */
    background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #C7C7C7));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top left, #FFFFFF 0%, #C7C7C7 100%);

}
table.sheet-stress td div.sheet-checkbox-label-div label:hover {/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);

    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);

    /* Opera */
    background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);

    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #8FECFF));

    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);

    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top left, #FFFFFF 0%, #8FECFF 100%);}


input[type=checkbox].sheet-stress-check {
    margin: 0px;
    width: 50px;
    height: 50px;
    opacity: 0;
    z-index: 1;
    position: relative;
    left: calc(50% - 27px) !important;
    top: -2px;
}

input[type=checkbox].sheet-stress-check:checked ~ label {
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

/* === CONSEQUENCES === */
.sheet-col-consequences {
    position: relative;
}

.sheet-col-consequences select {
    width: 100px;
    float: left;
}

.sheet-col-consequences input {
    margin-left: 2px;
    width: calc(100% - 102px);
}