* {
   box-sizing: border-box;
}

.sheet-info-section {
    color: black;
	font-family: "Tahoma", "Arial";
    line-height: 110%;
}

div[class^="sheet-section"] {
    margin-top: -27px;
	display: none;
}

div.sheet-character,
div.sheet-monster {
    display: none;
}

div.sheet-monster {
    margin-top: -30px;
}

.sheet-header {
    height: 137px;
    background: -moz-linear-gradient(top, rgba(30,87,153,0) 50%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30,87,153,0) 50%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

input.sheet-type-character:checked ~ div.sheet-character,
input.sheet-type-monster:checked ~ div.sheet-monster {
    display: block;
}

input.sheet-main:checked ~ div.sheet-section-main,
input.sheet-class:checked ~ div.sheet-section-class,
input.sheet-items:checked ~ div.sheet-section-items,
input.sheet-materia:checked ~ div.sheet-section-materia,
input.sheet-skills:checked ~ div.sheet-section-skills,
input.sheet-feats:checked ~ div.sheet-section-feats,
input.sheet-spells:checked ~ div.sheet-section-spells,
input.sheet-notes:checked ~ div.sheet-section-notes {
	display: block;
}

input.sheet-tab {
	width: 70px;
	height: 25px;
	cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
	top: -29px;
	left: 3px;
	margin-left: -3px;
}

span.sheet-tab {
    color: #E8E8E8;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-family: "Tahoma", "Arial";
	line-height: 200%;
	letter-spacing: 1px;
	text-align: center;
	vertical-align: middle;
    display: inline-block;
	font-size: 90%;	
    background: rgb(122,122,122); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(89,89,89,1) 75%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%,rgba(89,89,89,1) 75%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(122,122,122,1) 0%,rgba(89,89,89,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: solid 1px black;
	font-weight: bold;
	border-radius: 2px;
	width: 70px;
    height: 25px;
    cursor: pointer;	
	position: relative;
	margin-left: -70px;
	top: -29px;
}

span.sheet-tab + input.sheet-tab {
    margin-left: -5px;
}

input.sheet-main:checked + span.sheet-main,
input.sheet-class:checked + span.sheet-class,
input.sheet-items:checked + span.sheet-items,
input.sheet-materia:checked + span.sheet-materia,
input.sheet-skills:checked + span.sheet-skills,
input.sheet-feats:checked + span.sheet-feats,
input.sheet-spells:checked + span.sheet-spells,
input.sheet-notes:checked + span.sheet-notes {
    background: rgb(163,163,163); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(163,163,163,1) 0%, rgba(127,127,127,1) 76%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(163,163,163,1) 0%,rgba(127,127,127,1) 76%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(163,163,163,1) 0%,rgba(127,127,127,1) 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #00E8E8;
}

.sheet-wrapper {
    min-width: 800px;
}

.sheet-background {
    background: rgb(4,0,255); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(4,0,255,1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: #E8E8E8;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-family: "Tahoma", "Arial";
	border-radius: 8px;
	white-space: normal;
}

.sheet-box-outer {
    border: 1px solid black;
    border-radius: 5px;
    height: 100%;
}

.sheet-box-middle {
    border: 2px solid lightgrey;
    border-radius: 4px;
    height: 100%;
}

.sheet-box-inner {
    border: 1px solid black;
    border-radius: 3px;
    height: 100%;
}

.sheet-box-title {
    padding: 3px;
    letter-spacing: 1px;
    text-align: center;
    font-weight: bold;
    font-size: 90%;
}

.sheet-box-content {
    padding: 5px;
}

.sheet-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    margin-top: -1px;
}

.sheet-table-row {
    display: table-row;
    vertical-align: middle;
}

.sheet-table-label {
    display: table-cell;
    font-size: 80%;
    text-align: center;
    vertical-align: middle;
    color: #00E8E8;
    height: 20px;
    line-height: 100%;
}

.sheet-table-label-left {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 0px 4px 0px 4px;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
}

.sheet-table-data {
    display: table-cell;
    text-align: center;
    padding: 0px;
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    margin: 0px 0px -1px 0px;
}

table.sheet-table-skill {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;
    vertical-align: middle;
    margin-top: -1px;
}

td.sheet-label-top {
    font-size: 80%;
    text-align: center;
    vertical-align: middle;
    color: #00E8E8;
    height: 20px;
    line-height: 100%;
}

td.sheet-label-left {
    text-align: center;
    vertical-align: middle;
    padding: 0px 4px 0px 4px;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
}

td.sheet-label-skill {
    vertical-align: middle;
    letter-spacing: 1px;
    line-height: 90%;
    padding-left: 8px;
    text-align: left;
}

.sheet-table-label-left-lb {
    text-align: center;
    vertical-align: middle;
    padding: 6px;
    color: grey;
    letter-spacing: 1px;
    line-height: 90%;
}

.sheet-materia-level {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 1px;
    line-height: 90%;
    color: #E8E8E8;
}

tr {
    vertical-align: middle;
}

tr.sheet-table-row-skill {
    vertical-align: middle;
    height: 25px;
}


tr.sheet-table-row-skill:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

tr.sheet-table-row-skill:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.4);
}

tr.sheet-table-row-skill:nth-child(even):hover {
    background-color: rgba(255, 255, 255, 0.25);
}

td {
    vertical-align: middle;
    text-align: center;
    padding: 0px;
}

td.sheet-data-skill {
    vertical-align: middle;
    text-align: center;
    padding-left: 1px;
}

table.sheet-table-skill-monster {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;
    vertical-align: middle;
    margin-top: -1px;
    font-size: 80%;
    line-height: 100%;
}

table.sheet-table-skill-monster td.sheet-data-skill {
    padding: 0px;
}

table.sheet-table-skill-monster td.sheet-label-top {
    font-size: 100%;
}

table.sheet-table-skill-monster tr.sheet-table-row-skill {
    vertical-align: middle;
    height: 19px;
}

table.sheet-table-skill-monster tr,
table.sheet-table-skill-monster input {
    height: 18px;
}

.sheet-lb { display: none; }

.sheet-inactive:checked ~ .sheet-table-label-left-lb { 
    color: #E8E8E8;
    border: 1px solid #00E8E8;
    background: #232323; /* Old browsers */
    background: -moz-linear-gradient(top, #232323 0%, #4c4c4c 50%, #6b6b6b 90%, #3d3d3d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #232323 0%,#4c4c4c 50%,#6b6b6b 90%,#3d3d3d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #232323 0%,#4c4c4c 50%,#6b6b6b 90%,#3d3d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.sheet-active:checked ~ .sheet-table-label-left-lb { 
    color: yellow; 
    border: 1px solid #00E8E8;
    background: #9e38a5; /* Old browsers */
    background: -moz-linear-gradient(top, #9e38a5 0%, #ffccff 40%, #ffe5ff 50%, #ffccff 60%, #d17ddb 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #9e38a5 0%,#ffccff 40%,#ffe5ff 50%,#ffccff 60%,#d17ddb 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #9e38a5 0%,#ffccff 40%,#ffe5ff 50%,#ffccff 60%,#d17ddb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.sheet-materia-type-none:checked ~ .sheet-materia-level { color: #E8E8E8; }
.sheet-materia-type-ability:checked ~ .sheet-materia-level { color: #ffff4d; }
.sheet-materia-type-independent:checked ~ .sheet-materia-level { color: #cc00cc; }
.sheet-materia-type-spell:checked ~ .sheet-materia-level { color: #00e600; }
.sheet-materia-type-summon:checked ~ .sheet-materia-level { color: #e60000; }
.sheet-materia-type-support:checked ~ .sheet-materia-level { color: #8080ff; }

.sheet-materia-type-none:checked ~ .sheet-materia-icon { 
    background-image: none; 
    background-repeat: no-repeat;
    background-position: center; 
}
.sheet-materia-type-ability:checked ~ .sheet-materia-icon { 
    background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-yellow.png"); 
    background-repeat: no-repeat;
    background-position: center; 
}
.sheet-materia-type-independent:checked ~ .sheet-materia-icon {
    background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-purple.png");
    background-repeat: no-repeat;
    background-position: center; 
}
.sheet-materia-type-spell:checked ~ .sheet-materia-icon {
    background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-green.png"); 
    background-repeat: no-repeat;
    background-position: center; 
}
.sheet-materia-type-summon:checked ~ .sheet-materia-icon {
    background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-red.png");
    background-repeat: no-repeat;
    background-position: center; 
}
.sheet-materia-type-support:checked ~ .sheet-materia-icon {
    background-image: url("http://www.finalfantasyd20.com/ffd20/images/materia-blue.png"); 
    background-repeat: no-repeat;
    background-position: center; 
}

.sheet-cs-show {
    text-align: center;
    vertical-align: middle;
    padding: 0px 4px 0px 4px;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
}

.sheet-lb { display: none; }

input[class^="sheet-spells-interface"] { 	
	display: none;
}

input.sheet-spells-interface-0:checked ~ div.sheet-spells-section-0,
input.sheet-spells-interface-1:checked ~ div.sheet-spells-section-1,
input.sheet-spells-interface-2:checked ~ div.sheet-spells-section-2,
input.sheet-spells-interface-3:checked ~ div.sheet-spells-section-3,
input.sheet-spells-interface-4:checked ~ div.sheet-spells-section-4,
input.sheet-spells-interface-5:checked ~ div.sheet-spells-section-5,
input.sheet-spells-interface-6:checked ~ div.sheet-spells-section-6,
input.sheet-spells-interface-7:checked ~ div.sheet-spells-section-7,
input.sheet-spells-interface-8:checked ~ div.sheet-spells-section-8,
input.sheet-spells-interface-9:checked ~ div.sheet-spells-section-9 {
    display: none;
}

input.sheet-spells-interface-0:not(:checked) ~ div.sheet-spells-section-0,
input.sheet-spells-interface-1:not(:checked) ~ div.sheet-spells-section-1,
input.sheet-spells-interface-2:not(:checked) ~ div.sheet-spells-section-2,
input.sheet-spells-interface-3:not(:checked) ~ div.sheet-spells-section-3,
input.sheet-spells-interface-4:not(:checked) ~ div.sheet-spells-section-4,
input.sheet-spells-interface-5:not(:checked) ~ div.sheet-spells-section-5,
input.sheet-spells-interface-6:not(:checked) ~ div.sheet-spells-section-6,
input.sheet-spells-interface-7:not(:checked) ~ div.sheet-spells-section-7,
input.sheet-spells-interface-8:not(:checked) ~ div.sheet-spells-section-8,
input.sheet-spells-interface-9:not(:checked) ~ div.sheet-spells-section-9 {
    display: block;
}

input[type=checkbox] {
    text-align: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

input[type=number] {
    color: black;
    width: 100% !important;
    border: 1px solid #00E8E8;
    font-family: "Tahoma", "Arial";
    text-align: center;
    padding: 2px 4px 2px 4px;
    border-radius: 0px;
    height: 24px;
    margin: 0px;
}


input[type=text] {
    color: black;
    width: 100%;
    text-align: left;
    border: 1px solid #00E8E8;
    font-family: "Tahoma", "Arial";
    padding: 2px 4px 2px 4px;
    border-radius: 0px;
    height: 24px;
    margin: 0px;
}

input[readonly] {
    border: 1px solid #00E8E8;
    box-shadow: none !important;
    background-color: transparent;
    font-family: "Tahoma", "Arial";
    color: #F8F8F8;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    vertical-align: middle;
    padding: 2px 4px 2px 4px;
    height: 24px;
}

input[readonly].sheet-total {
    color: yellow;
    background-color: rgba(0, 232, 232, 0.4);
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input:focus { 
    background-color: #00E8E8;
}

button[type=roll] {
    width: 24px;
    height: 24px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    color: black;
}

table.sheet-table-skill-monster button[type=roll] {
    width: 18px;
    height: 18px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    color: black;
}

button[type=roll].sheet-text-button {
    padding-top: 3px;
    margin: 0px;
    vertical-align: middle;
    color: black;
}

button[type=roll]:hover {
    background-image: none;
    color: #00E8E8;
}

textarea {
    resize: none;
    border: 1px solid #00E8E8;
    height: 100%;
    font-family: "Tahoma", "Arial";
    color: black;
    border-radius: 0px;
    margin: 0px;
    padding: 2px 4px 2px 4px;
    overflow-x: hidden;
}

textarea.sheet-notes {
    border: 1px solid #00E8E8;
    height: 100%;
    font-family: "Tahoma", "Arial";
    color: black;
    border-radius: 0px;
    margin: 0px;
    padding: 2px 4px 2px 4px;
    overflow-x: hidden;
    background-image: url("http://www.finalfantasyd20.com/ffd20/images/Mog_US.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}

textarea:focus { 
    background-color: #00E8E8;
}

input[type="checkbox"].sheet-spells-show {
    opacity: 0;
    width: 18px;
    height: 18px;
    position: relative;
    left: 9px;
    bottom: 2px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

input[type="checkbox"].sheet-spells-show + span::before {
    text-align: center;
    display: inline-block;
    content: "▼";
    color: yellow;
    width: 18px;
    height: 18px;
    margin: 2px 0px 2px 0px;
    font-size: 120%;
    left: 11px;
    border: 1px solid #00E8E8;
    border-radius: 2px;
}
input[type="checkbox"].sheet-spells-show:checked + span::before {
    content: "►";
    background-color: transparent;
    color: #F8F8F8;
}

select {
    width: 100% !important;
    height: 24px;
    vertical-align: center;
    padding: 0px;
    margin: 0px;
    color: black;
    border: 1px solid #00E8E8;
    border-radius: 0px;
    font-family: "Tahoma", "Arial";
}

select.sheet-spell-type {
    font-size: 80%;
    border: 1px solid #00E8E8;
    box-shadow: none !important;
    background-color: transparent;
    font-family: "Tahoma", "Arial";
    color: #00E8E8;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    vertical-align: middle;
}

.repcontrol_add,
.repcontrol_edit,
.repcontrol_del,
.repcontrol_move {
    height: 24px;
    width: 60px;
    margin: 1px 1px 0px 0px;
    padding: 0px;
    vertical-align: middle;
    text-align: center;
}

.repcontrol_del,
.repcontrol_move {
    width: 23px;
    margin: 1px;
    font-size: 140%;
    border-radius: 0px;
}

.repitem {
    margin-top: -1px;
}

.repcontrol {
    width: 122px;
    float: left;
    margin: 0px 0px 1px 1px;
}

.sheet-rolltemplate-weapon-attack .sheet-background {
    background: rgb(4,0,255); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(4,0,255,1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-family: "Tahoma", "Arial";
	border-radius: 8px;
	white-space: normal;
	min-width: 233px;
}

.sheet-rolltemplate-weapon-attack .sheet-box-outer {
    border: 1px solid black;
    border-radius: 5px;
}

.sheet-rolltemplate-weapon-attack .sheet-box-middle {
    border: 2px solid lightgrey;
    border-radius: 4px;
}

.sheet-rolltemplate-weapon-attack .sheet-box-inner {
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px;
}



.sheet-rolltemplate-weapon-attack td.sheet-title {
    padding: 3px;
    letter-spacing: 1px;
    text-align: center;
    font-weight: bold;
    font-size: 90%;
    color: #E8E8E8;
}

.sheet-rolltemplate-weapon-attack td.sheet-label {
    text-align: center;
    vertical-align: middle;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 90%;
}

.sheet-rolltemplate-weapon-attack .sheet-label-small {
    text-align: left;
    vertical-align: middle;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 75%;
}

.sheet-rolltemplate-weapon-attack hr.sheet-divider {
	border: 1px solid transparent; 
	border-top: 1px solid #00E8E8; 
	margin: 2px 0px 2px 0px;
}

.sheet-rolltemplate-weapon-attack td.sheet-roll-result {
    text-align: left;
    vertical-align: middle;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 90%;
    text-shadow: none;
    color: black;
    padding-left: 5px;
    width: 38px;
}

.sheet-rolltemplate-weapon-attack td.sheet-weapon-critical {
    text-align: left;
    vertical-align: middle;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 90%;
    color: yellow;
    font-weight: bold;
    font-style: italic;
    padding-left: 5px;
}

.sheet-rolltemplate-weapon-attack table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 1px;
    width: 100%;
}

.sheet-rolltemplate-roll-check .sheet-background {
    background: rgb(4,0,255); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(4,0,255,1) 20%, rgba(1,0,12,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(4,0,255,1) 20%,rgba(1,0,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-family: "Tahoma", "Arial";
	border-radius: 8px;
	white-space: normal;
	min-width: 233px;
}

.sheet-rolltemplate-roll-check .sheet-box-outer {
    border: 1px solid black;
    border-radius: 5px;
}

.sheet-rolltemplate-roll-check .sheet-box-middle {
    border: 2px solid lightgrey;
    border-radius: 4px;
}

.sheet-rolltemplate-roll-check .sheet-box-inner {
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px;
}

.sheet-rolltemplate-roll-check td.sheet-title {
    padding: 3px;
    letter-spacing: 1px;
    text-align: center;
    font-weight: bold;
    font-size: 90%;
    color: #E8E8E8;
}

.sheet-rolltemplate-roll-check td.sheet-label {
    text-align: center;
    vertical-align: middle;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 90%;
}

.sheet-rolltemplate-roll-check td.sheet-label-small {
    text-align: left;
    vertical-align: middle;
    color: #00E8E8;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 75%;
}

.sheet-rolltemplate-roll-check hr.sheet-divider {
	border: 1px solid transparent; 
	border-top: 1px solid #00E8E8; 
	margin: 2px 0px 2px 0px;
}

.sheet-rolltemplate-roll-check td.sheet-roll-result {
    text-align: left;
    vertical-align: middle;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 90%;
    text-shadow: none;
    color: black;
    padding-left: 5px;
    width: 38px;
}

.sheet-rolltemplate-roll-check td.sheet-weapon-critical {
    text-align: left;
    vertical-align: middle;
    letter-spacing: 1px;
    line-height: 90%;
    font-size: 90%;
    color: yellow;
    font-weight: bold;
    font-style: italic;
    padding-left: 5px;
}

.sheet-rolltemplate-roll-check table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 1px;
    width: 100%;
}