roll20-character-sheets/Feng Shui/Feng Shui.css

.sheet-tracker {
    position: absolute;
    left: 855px;
}
.sheet-shot_display {
    text-align:center;
    border:1px dotted black;
    border-radius:5px;
    background: transparent;
    box-shadow:none;
    position: relative;
    left:-20px;
    color:black;
}

.sheet-shot_display[type=number]::-webkit-outer-spin-button,
.sheet-shot_display[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sheet-shot_display[type=number] {
    -moz-appearance:textfield;
}
/*-----background-----*/

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

.sheet-banner { 
    background: url('http://2.bp.blogspot.com/-dNcHLergq0g/T_MSmDFasHI/AAAAAAAAAEw/MPmDwkUuqaU/s1600/logo.gif'); 
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right top;
}

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

/*  -----   Fonts   -----   */
@font-face {
    font-family: 'Bonzai';
    src: url('http://www.geeksville.us/fonts/Coal/ChowFun.ttf');
    font-weight: normal;
    font-style: normal;
}

, h1, h2, h3, h4, h5, h6 {
    font-family: 'Bonzai';
    }

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

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

.charsheet div[class^="sheet-section"] {     
    display: none;
    background: url('');
    background-size:100%;
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:20px;
}
            	
.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: 15px;
    font-family: '';
	background: white; 
	color: red; 
	font-weight: bold;
	border-radius: 4px;
	
	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;
    font-family: 'Bonzai';
}

.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: black;  /*originally ab8b57*/  
    color: white; /*originally white*/
	border-radius: 4px;
    border:2px solid red;
    font-family: 'Bonzai';
}

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

.charsheet span.sheet-tab99 {
	background: white; 
	color: green; 
	font-weight: bold;
	border-radius: 4px;
    border:2px solid green;
}
.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;
}

/*----------- tables  -----------*/
table.sheet-outlinetable {
    margin-left:auto;
    margin-right:auto;
}
table.sheet-outlinetable th.sheet-right,
table.sheet-outlinetable td.sheet-right {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
table.sheet-outlinetable th.sheet-left,
table.sheet-outlinetable td.sheet-left {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}

table.sheet-outlinetable-right {
    margin-left:auto;
}
table.sheet-outlinetable-right th.sheet-right,
table.sheet-outlinetable-right td.sheet-right {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
table.sheet-outlinetable-right th.sheet-left,
table.sheet-outlinetable-right td.sheet-left {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}
/*----------- Text Formatting -----------*/
.sheet-prime_attribute[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-seconadry_attribute {
    border:none;
    background:transparent;
    box-shadow:none;
}
.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:black;
    font-size:1em;
    font-weight:400;
    text-shadow: none;
}
.sheet-heading:focus,
.sheet-weapon[type="number"]:focus,
.sheet-weapon[type="text"]:focus,
.sheet-power:focus,
.sheet-skill:focus,
.sheet-misc_tracker:focus {
    background:#add8e6;
    color:black;
}

.sheet-power {
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:1px dotted black;
    background:transparent;
    box-shadow:none;
    
}
.sheet-weapon[type="number"],
.sheet-weapon[type="text"] {
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:1px dotted black;
    background:transparent;
    box-shadow:none;
    text-align:center;
    width:100%;
    
    color:white;
    font-size:1.4em;
    font-weight:700;
    text-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px black;  
}

select *.sheet-bold { 
    background: black;
    color:white;
}

select.sheet-skillselect {
    margin:0;
    overflow: hidden;
    -webkit-appearance: none;
    background:transparent;
    box-shadow:none;
    margin-top: 0px;
    padding-top:0px;
    
    text-align: center;
    text-indent: 0.01px; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 00px;
    -moz-padding-end: 00px;
    
    border:1px dotted black;
    border-radius: 5px;
}
textarea.sheet-powerdata,
textarea.sheet-textarea,
textarea.sheet-equipment {
    resize:vertical;
}

textarea.sheet-powerdata:focus,
textarea.sheet-textarea:focus,
textarea.sheet-equipment:focus {
    background:#add8e6;
    color:black;
}

.sheet-misc_tracker {
    box-shadow:none;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:1px dotted black;;
    background:transparent;
    font-family: 'Bonzai';
    font-weight:bold;
    text-align:center;
    font-size:1.5em;
    
    }
/*-----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: 11px;
    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: "•";
    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: "";
}

/*------------empty traits-----------*/
input.sheet-zero[type="radio"]:checked + span::before
{
    opacity: 0;
}

input.sheet-zero[type="radio"]:hover + span::before
{
    opacity: 1;
}

input.sheet-zero[type="radio"] + span::before
{
    font-size: 14px;
    content: "✖";
    opacity: 0.25;
}
/*------------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-----------*/
/*------------buttons-----------*/
button[type="roll"].sheet-2ndattribute:before,
button[type="roll"].sheet-attribute:before, 
button[type="roll"].sheet-skillroll:before {
    content: ""!important;
    display: none;
}

button[type="roll"].sheet-attribute {
    width: 100%;
    height:24px;
    margin: 0;
    font-weight: 700;
    text-align: center;
    vertical-align: center;
    cursor: pointer;
    background-image: none;
    
    background-color: white;
    border: 2px solid black /* 1px solid black */;
    border-style: outset;
    padding: 2px;
    padding-left:2px;
    font-size: 1.2em;
    color: black; 
    text-shadow: 0px 0px 0.2em white; 
    font-family: 'Bonzai';
    
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

button[type="roll"].sheet-attribute:hover {
    background-color: black;
    border: 2px solid red;
    color:white;
}
button[type="roll"].sheet-2ndattribute {
    width: 100%;
    height:24px;
    margin: 0;
    font-weight: 700;
    text-align: center;
    vertical-align: center;
    cursor: pointer;
    background-image: none;
    
    background-color: white;
    border: 2px solid black /* 1px solid black */;
    border-style: outset;
    padding: 2px;
    padding-left:2px;
    font-size: 0.8em;
    color: black; 
    text-shadow: 0px 0px 0.2em white; 
    font-family: 'Bonzai';
    
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

button[type="roll"].sheet-2ndattribute:hover {
    background-color: black;
    border: 2px solid red;
    color:white;
}
    /*      skillroll       */
button[type="roll"].sheet-skillroll {
    width: 100%;
    height:24px;
    margin: 0;
    font-weight: 700;
    text-align: center;
    vertical-align: center;
    cursor: pointer;
    background-image: none;
    
    background-color: white;
    border: 2px outset white /* 1px solid black */;
    padding-top:2px;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:2px;
    font-size: 0.8em;
    color: black; 
    text-shadow: 0px 0px 0.2em white;     
    font-family: 'Bonzai';
    
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

button[type="roll"].sheet-skillroll:hover {
    background-color: black;
    border: 2px inset gray;
    color:white;

    padding-top:4px;
    padding-left:4px;
    padding-right:0px;
    padding-bottom:0px;
}

button[type="roll"].sheet-skillroll:active {
    background-color: blue;
    border: 2px inset gray;
    color:white;

    padding-top:4px;
    padding-left:4px;
    padding-right:0px;
    padding-bottom:0px;
}

        /*      Attack Button        */

.sheet-attack button[type="roll"]:before,
.sheet-attack:before  {
    content: ""!important;
    display: none;
    border:none;
}
.sheet-attack button[type="roll"],
.sheet-attack {
    display: block;
    background: black;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0;
    background: radial-gradient(circle at 20px 20px, #add8e6, #000);
    border:none;
    box-shadow: none;

}

.sheet-attack button[type="roll"]:hover,
.sheet-attack:hover  {
    display: block;
    background: black;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0;
    background: radial-gradient(circle at 15px 15px, #add8e6, #000);
}

.sheet-attack button[type="roll"]:active,
.sheet-attack:active  {
    display: block;
    background: black;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    margin: 0;
    background: radial-gradient(circle at 20px 20px, #fff, #0080ff);
}
/*========== sheet arrow ==========*/

/* ----Hide actual sheet-arrow checkbox---- */

input.sheet-arrow[type="checkbox"] {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* -----Fake sheet-arrow checkbox----- */

input.sheet-arrow[type="checkbox"] + span::before
{
    margin-right: 4px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    float: left;
    content: "►";
    width: 14px;
    height: 14px;
    font-size: 12px;
}

input.sheet-arrow[type="checkbox"]:checked + span::before {
    content: "▼";
}

/* -----Hiding areas with sheet-arrow ----- */

input.sheet-arrow {
    float: left;
}

input.sheet-arrow:checked ~ div.sheet-body {
    display: block;
}

div.sheet-body {
    display: none;
}
/* -------------------- 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;
}