roll20-character-sheets/Fate_Freeport/fate.css

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

/* Fix for annoying one column sizing issue */
.sheet-row .sheet-col {
    width: 100%;
}

/* Background image that is way too dark and busy to use in its default rendering */
.sheet-character-bg {
    padding: 50px;
    background-image:url(http://www.evilhat.com/home/wp-content/uploads/2014/01/Fate_Freeport_The_Story.png);
    background-repeat:no-repeat;
    background-origin: border-box;
    background-size: 100% 100%;
}

/* Using white gradient with varying opacity to overwrite background so character sheet is readable */
.sheet-character {
    padding: 0px;
    margin-bottom: 0px;
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,.3),rgba(255,255,255,0)); /*Safari 5.1-6*/
    background: -o-linear-gradient(bottom,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,.3),rgba(255,255,255,0)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(bottom,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,.3),rgba(255,255,255,0)); /*Fx 3.6-15*/
    background: linear-gradient(to bottom, rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,.3),rgba(255,255,255,0)); /*Standard*/
}


/* use big bold and black section headers */
.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;
}

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

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


/* === APROACHES === */
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-td-corruption-div,
table.sheet-stress td div.sheet-td-stress-div {
    width: 50px;
    height: 50px;
    position: relative;
    border: 1px solid black;
    left: calc(50% - 25px) !important;
}


table.sheet-stress td div.sheet-td-corruption-div,
table.sheet-stress td div.sheet-td-corruption-div label {
    border-radius: 50%;
}


table.sheet-stress td div.sheet-td-corruption-div label,
table.sheet-stress td div.sheet-td-stress-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-td-corruption-div label:hover,
table.sheet-stress td div.sheet-td-stress-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-corruption-check,
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-corruption-check:checked ~ label,
input[type=checkbox].sheet-stress-check:checked ~ label {
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

table.sheet-stress tr.sheet-stress-labels,
table.sheet-stress tr.sheet-stress-labels th {
    position: relative;
    padding: 0px;
}

table.sheet-stress tr.sheet-stress-labels th h3 {
    position: relative;
    line-height: 24px;
    font-size: 24px;
    top: -10px;
}

h3.sheet-outline {
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* === 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);
}

/* === INSANITY === */
.sheet-insanity-area {
	height: 70px;
}

/* === SPELLS === */
.sheet-col-spells {
    width: 100%;
}

/* === SPELLS === */
.sheet-col-stunts {
    width: 100%;
}