roll20-character-sheets/Strike!/strike.css

.sheet-row input {
    width: 100%;   
    background-color: #b0b7d5;
    color: black;
}

.sheet-row:nth-child(even) input{
    background-color: #5f77ab;
}

.sheet-tabHeaderArea {
    text-align: center;   
    margin: auto;
    width: 100%;
}

.sheet-costType {
    width: 100px;   
}

.sheet-combatTable {
    margin: auto;
    width: 100%;
}

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

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

.sheet-featTable {
    background: #ebc555;   
    padding: 10px;
}

.sheet-roleTable {
    background: #bd4b4d;   
    padding: 10px;
    color: #fff;
}

.sheet-classTable {
    background: #5f77ab;   
    padding: 10px;
}

.sheet-boxText textarea {
    background: #b0b7d5;   
}

input.sheet-heading {
    background: #b0b7d5;   
}

input.sheet-heading[type="number"] {
    text-align: center;  
}

/*-----background-----*/

.charsheet {
    background: white;
    background-size:100%;
}

.sheet-banner { 
    background: url('http://www.strikerpg.com/uploads/4/5/5/4/45540963/1421987367.png'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right top;
}

.sheet-banner-content { 
    margin: 0 auto; 
    padding: 100px; 
}

/*-----Tabs-----*/

div.sheet-core-content { 
    display: none; 
    width:840px;
}

.charsheet div[class^="sheet-section"] {     
    display: none;
    background: url('');
    background-size:100%;
    padding-left:10px;
    padding-right:30px;
    padding-top:10px;
    padding-bottom:10px;
}

.charsheet input.sheet-tab1:checked ~ div.sheet-section-1,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-2,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-3,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-4,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-5,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-6,
.charsheet input.sheet-tab7:checked ~ div.sheet-section-7,
.charsheet input.sheet-tab8:checked ~ div.sheet-section-8,
.charsheet input.sheet-tab9:checked ~ div.sheet-section-9 {
    /*max-height: 999999px;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s linear 0s;
    overflow: auto;*/
    display: block;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { 	
	/*max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;*/
	display: block;
}

.charsheet input.sheet-tab {
    width: 100px;
    height: 40px;
    cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
    margin-bottom:10px;
}
.charsheet span.sheet-tab {
	text-align: center;
    display: inline-block; 
	font-size: 20px;
    font-family: '';
	background: #b0b7d5; 
	color: black; 
	font-weight: bold;
	border-radius: 4px;
    font-family: 'Bonzai';
	
	width: 100px; /*originally 87px*/
    height: 40px; /*originally 20px*/
    cursor: pointer;	
	position: relative;
	vertical-align: middle;
	margin-left: -101px;/*originally 91px*/
    text-shadow: none;
    border:2px solid black;
}
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
.charsheet input.sheet-tab9:checked + span.sheet-tab9,
.charsheet input.sheet-tab10:checked + span.sheet-tab10 {
    
    background: #5f77ab;  /*originally ab8b57*/  
    color: black; /*originally white*/
	border-radius: 4px;
    border:2px solid #a7c2ff;
}

.charsheet input.sheet-tab99:checked + span.sheet-tab99  {
    
    background: #ffcd2d;   
    color: white; 
    border-radius: 4px;
    border:2px solid #ffcd2d;
}

.charsheet span.sheet-tab99 {
	background: white; 
	color: #ffcd2d; 
	font-weight: bold;
	border-radius: 4px;
    border:2px solid #ffcd2d;
}
.charsheet input.sheet-tab3:hover + span.sheet-tab3 {
    background: url('http://www.bikebam.com/bam3.png');
    background-repeat:no-repeat;
    background-size: 100px 50px;
    background-position: center center;
    content:'';
    border:2px solid transparent;
    color:transparent;
}

/*----------- End Tab Setup -----------*/
.sheet-hidden {
    display:none;
}

/*----------- Text Formatting -----------*/
.sheet-seconadry_attribute {
    border:none;
    background:transparent;
    box-shadow:none;
}
.sheet-prime_attribute {
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:1px dotted black;
    background:transparent;
    box-shadow:none;
    
    color:blue;
    font-size:1.8em;
    font-weight:700;
    font-variant:small-caps;
    font-family:Georgia;
}

.sheet-heading {
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:1px dotted black;
    background:transparent;
    box-shadow:none;
    
    color:blue;
    font-size:1.8em;
    font-weight:700;
    font-variant:small-caps;
    font-family:Georgia;
}
.sheet-skill[type="number"] {
    border:none;
    background:transparent;
    box-shadow:none;
    text-align:center;
    
    color:white;
    font-size:1.4em;
    font-weight:700;
    text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black;  
}
.sheet-skill[type="text"] {
    border:none;
    background:transparent;
    box-shadow:none;
    text-align:center;
    
    color:white;
    font-size:1.4em;
    font-weight:700;
    text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black;  
}
.sheet-skill-text[type="text"] {
    border:none;
    background:transparent;
    box-shadow:none;
    text-align:left;
    
    color:black;
    font-size:1em;
    font-weight:400;
}
.sheet-skill-text:focus,
.sheet-heading:focus,
.sheet-weapon[type="text"]:focus,
.sheet-power:focus,
.sheet-skill:focus {
    background:#add8e6;
    color:black;
}

.sheet-weapon[type="number"]:focus,
.sheet-skill[type="number"]:focus{
    background:#add8e6;
    color:black;
    text-shadow: none; 
}

/*-----radio boxes-----*/

/* -----Hide actual radio----- */
input.sheet-normal[type="radio"]
{
    opacity: 0;
    width: 15px;
    height: 15px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* -----Fake radio----- */
input.sheet-normal[type="radio"] + span::before {
    margin-right: 2px;
    border: solid 1px #a8a8a8;
    line-height: 12px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
    
    color:black;
    content: "•";
    font-family: 'New Times Roman';
    width: 11px;
    height: 11px;
    font-size: 3em;
    text-shadow:none;
    
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

input.sheet-normal.sheet-nuke[type="radio"] + span::before {
    width: 11px;
    height: 11px;
    font-size: 1.4em;
    text-shadow:none;    font-family: 'Pictos Three';
    color:black;
    content: "l";
}

input.sheet-normal.sheet-nuke[type="radio"]:checked + span::before {
    font-family: 'Pictos Three';
    color:red;
    content: "l";
}

input.sheet-normal.sheet-yellow[type="radio"] + span::before {
    box-shadow: 0px 0px 5px yellow,0px 0px 5px yellow,0px 0px 5px yellow,0px 0px 7px black;
}

input.sheet-normal.sheet-red[type="radio"] + span::before {
    box-shadow: 0px 0px 5px red,0px 0px 5px red,0px 0px 5px red;
}

input.sheet-normal.sheet-gray[type="radio"] + span::before {
    box-shadow: 0px 0px 5px gray,0px 0px 5px gray,0px 0px 5px gray;
}
/* -----Remove dot from all radios _after_ selected one----- */
input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before {    
    content: "";
}

/*------------Better Checkbox-----------*/
/* Hide actual radio/checkbox */
input.sheet-bigcheck[type="checkbox"]
{
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin-top: -18px;
    margin-left: -10px;
    margin-right: -11px;
    margin-bottom: 0px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio/checkbox */
input.sheet-bigcheck[type="checkbox"] + span::before
{
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Fake checkbox */
input.sheet-bigcheck[type="checkbox"] + span::before {
    content: "";
    width: 14px;
    height: 14px;
    font-size: 12px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
input.sheet-bigcheck[type="checkbox"]:checked + span::before {
    content: "?";
}
/*------------End of Better Checkbox-----------*/

/* -------------------- Roll Templates -------------------- */

.sheet-rolltemplate-show table {
    width: 189px;
    padding: 1px;
    border: 1px solid;
    background-color: #ffffff;
}
 
.sheet-rolltemplate-show th {
	color: rgb(126, 45, 64);
    padding-left: 5px;
	line-height: 1.3em;
	font-size: 1.2em;
    text-align: left;
	font-family: "Times New Roman", Times, serif;
    font-variant: small-caps;
}
 
.sheet-rolltemplate-show td {
    padding-left: 5px;
}

.sheet-rolltemplate-magicshow table {
    width: 189px;
    padding: 1px;
    border: 1px solid;
    background-color: #ffffff;
}
 
.sheet-rolltemplate-magicshow th {
    color: #2d7e6b;
    padding-left: 5px;
	line-height: 1.3em;
	font-size: 1.2em;
    text-align: left;
	font-family: "Times New Roman", Times, serif;
    font-variant: small-caps;
}
 
.sheet-rolltemplate-magicshow td {
    padding-left: 5px;
}