roll20-character-sheets-tester/Qin Warring States/Qin.css

table.sheet-armored {
    background:white;
    border-collapse: separate; /* IE7 and lower */
    border-spacing: 0; 
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    border:1px solid black;
    text-align:right;
    width:30%;
    font-size:0.8em;
    padding:0px;
}
table.sheet-armored th {
    font-family: 'Distress';
    font-variant: small-caps;
    border-bottom:1px solid black;
    border-top:1px solid black;
    text-align:center;
    font-size:1.4em;
    font-weight:normal;
}

table.sheet-armored td {
    height:28px;
    margin:0;
    padding:0;
}
div.sheet-health {
    width: 20px;
    height: 20px;
    position: relative;
}

input.sheet-health {
    margin: 10px 0 0 00px;
    opacity: 00;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
}

span.sheet-health {
    margin: 10px 0 0 00px;
    display: none;
}

input.sheet-square { z-index: 2; }

input.sheet-square:checked + input.sheet-slash,
input.sheet-slash:checked + input.sheet-exe { z-index: 3; }

input.sheet-square:checked ~ span.sheet-square,
input.sheet-slash:checked ~ span.sheet-slash,
input.sheet-exe:checked ~ span.sheet-exe { display: inline-block; }

.sheet-square {
    width: 20px;
    height: 20px;
    background: url("http://ylwebsite.com/uploads/grey-box-shadow-418px-ylwebsite-transparent.png") no-repeat 0 0;
    background-size: 100%;
}

.sheet-slash {
    width: 20px;
    height: 20px;
    background: url("http://images.clipartpanda.com/line-clipart-1194994615287196054line.svg.med.png") no-repeat 0 0;
    background-size: 100%;
}

.sheet-exe {
    width: 20px;
    height: 20px;
    background: url("http://www.iconpng.com/png/vista-software/red-x.png") no-repeat 0 0;
    background-size: 100%;
}

.sheet-grid {
    margin-bottom: 25px;
}

div.sheet-tab-content { display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4,
input.sheet-tab5:checked ~ div.sheet-tab5

{
    display: block;
}
input.sheet-tab
{
    width: 150px;
    height: 20px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
}

input.sheet-tab::before
{
    content: attr(title);


    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;
    
    background: #fff;
    background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    
    width: 150px;
    height: 20px;
    font-size: 18px;
}

input.sheet-tab:checked::before
{
    background: #dcdcdc;
    background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    border-bottom-color: #fff;
}

input.sheet-tab:not(:first-child)::before
{
    border-left: none;
}

input.sheet-tab2::before
{
    background: #fff;
    background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
}

input.sheet-tab2:checked::before
{
    background: #dcdcdc;
    background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    border-bottom-color: #fff;
}

div.sheet-tab-content
{
    border: 1px solid #a8a8a8;
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}

div.sheet-tab2
{
    background-color: #dcdcdc;
}