From ca528591fc3830ff0fa63d454b71a6b39bcabd78 Mon Sep 17 00:00:00 2001
From: CoalPoweredPuppet <breederofpuppets@gmail.com>
Date: Sun, 5 Feb 2017 09:25:32 -0500
Subject: [PATCH] Mongoose Traveller Css update

To match the html
---
 Mongoose_Traveller/MongooseTraveller.css | 781 +++++++++++++++++++++--
 1 file changed, 739 insertions(+), 42 deletions(-)

diff --git a/Mongoose_Traveller/MongooseTraveller.css b/Mongoose_Traveller/MongooseTraveller.css
index 0aab6545ae..208c4e60b1 100644
--- a/Mongoose_Traveller/MongooseTraveller.css
+++ b/Mongoose_Traveller/MongooseTraveller.css
@@ -4,8 +4,10 @@
 }
 
 .sheet-banner { 
-    background: url('http://www.mongoosepublishing.com/media/catalog/category/Traveller_front4_2.jpg'); 
-    background-size: 100%;
+    position:relative;
+    top: -45px;
+    background: url('https://68.media.tumblr.com/fa7cad2b1fd796eec91a7aaa118dcdab/tumblr_okc37oHznD1s9slulo1_540.png'); 
+    background-size: 90%;
     background-repeat: no-repeat;
     background-position: right bottom;
 }
@@ -13,56 +15,73 @@
 .sheet-banner-content { 
     margin: 0 auto; 
     padding: 100px; 
+    margin-top:-5px;
 }
 /*====Tabs ====*/
-div.sheet-tab-content { 
-    display: none; 
-}
+/*========== tabs ==========*/
 
-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,
-input.sheet-tab6:checked ~ div.sheet-tab6 {
-    display: block;
+input.sheet-tab1:not(:checked) ~ .sheet-tab1,
+input.sheet-tab2:not(:checked) ~ .sheet-tab2,
+input.sheet-tab3:not(:checked) ~ .sheet-tab3,
+input.sheet-tab4:not(:checked) ~ .sheet-tab4,
+input.sheet-tab5:not(:checked) ~ .sheet-tab5,
+input.sheet-tab6:not(:checked) ~ .sheet-tab6 {
+    display: none;
 }
 
+input.sheet-tab1[type=radio], 
+input.sheet-tab2[type=radio], 
+input.sheet-tab3[type=radio], 
+input.sheet-tab4[type=radio], 
+input.sheet-tab5[type=radio], 
+input.sheet-tab6[type=radio] {
+    display:none;
+    }
 input.sheet-tab {
-    width: 120px;
-    height: 20px;
+    width: 110px;
+    line-height: 30px;
+    
+    outline: none !important;
     position: relative;
-    top: 5px;
-    left: 6px;
-    margin: -1.5px;
     cursor: pointer;
     z-index: 1;
+    
 }
 
-input.sheet-tab::before {
+input.sheet-tab1 {
+    margin-left: 1px;
+}
+
+input.sheet-tab[type=radio] + label {
+    width: 110px;
     content: attr(title);
-    
-    border: solid 2px black;
-    border-bottom-color: black;
-    color: black;
-    text-align: center;
-    display: inline-block;
-    
+    display: inline;
+    line-height: 20px;
     background: white;
-    
-    width: 120px;
-    height: 20px;
-    font-size: 18px;
-}
+    padding-left:10px;
+    padding-right:10px;
+    padding-top:10px;
+    padding-bottom:10px;
 
-input.sheet-tab:checked::before {
-
-    background: black;
-    color:white;
     border: solid 2px red;
-    border-bottom-color: red;
+
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
+    color: black;
+    font-family:"Trebuchet MS", Helvetica, sans-serif;
+    text-shadow: none;
 
 }
+    
+input.sheet-tab[type=radio]:checked + label {
+    border: solid 2px red;
+    background: black;
+    line-height: 30px;
+    
+    color:white;
+    text-shadow: none;
+    }
 
 input.sheet-tab:not(:first-child)::before {
     border-left: none;
@@ -73,6 +92,13 @@ div.sheet-tab-content {
     margin: 2px 2px 2px -5px;
     padding: 5px;
 }
+
+div.sheet-topbar {
+    border: 2px solid red;
+    margin: 2px 2px 2px -5px;
+    padding: 5px;
+    padding-bottom:-10px;
+}
 /*==== Number boxes ====*/
 input[type="number"] {
     -moz-appearance: textfield;
@@ -105,6 +131,11 @@ input[type="number"]:hover {
     -moz-border-radius: 3px;
     border-radius: 3px;
 }
+
+
+input[type="text"].sheet-input {
+    width:200px;
+}
 input[type="number"].sheet-input_II {
     display: inline-block;
     border: 1px dotted gray;
@@ -132,6 +163,9 @@ input[type="number"].sheet-input_II {
     font-weight: bold;
 }
 
+.sheet-big {
+    font-size:1.4em;
+}
 .sheet-header {
     display: inline-block;
     font-weight: bold;
@@ -159,7 +193,7 @@ table.sheet-skilltable input[type="number"] {
 }
 
 table.sheet-characteristics tr:nth-child(odd) {
-    background-color:white;
+    background-color:transparent;
 }
 
 table.sheet-characteristics tr:nth-child(even) {
@@ -172,10 +206,10 @@ table.sheet-weapontable {
     margin-left:auto;
 }
 
-table.sheet-weapontable tr:nth-child(odd) {
+table.sheet-weapontable tr:nth-child(even) {
     border-bottom: none;
 }
-table.sheet-weapontable tr:nth-child(even) {
+table.sheet-weapontable tr:last-child {
     border-bottom: 5px ridge red;
 }
 
@@ -183,7 +217,6 @@ table.sheet-weapontable tr:nth-child(1) {
     border: none;
 }    
 
-
     /*==== headings ====*/
 .sheet-oval {
     width: 150px;
@@ -191,8 +224,8 @@ table.sheet-weapontable tr:nth-child(1) {
     padding: 15px;
     background: silver;
     -moz-border-radius: 150px / 50px;
-	-webkit-border-radius: 150px / 50px;
-	border-radius: 150px / 50px;
+    -webkit-border-radius: 150px / 50px;
+    border-radius: 150px / 50px;
     text-align:center;
 }
 
@@ -231,6 +264,48 @@ textarea {
     resize:vertical;
 }
 
+/*========== sheet skillbox ==========*/
+
+/* ----Hide actual sheet-skillbox checkbox---- */
+
+input.sheet-skillbox[type="checkbox"] {
+    opacity: 0;
+    width: 100px;
+    position: relative;
+    top: 0px;
+    left: 20px;
+    margin: -30px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* -----Fake sheet-gear skillbox----- */
+
+input.sheet-skillbox[type="checkbox"]::before + span::before
+{
+    margin-right: 4px;
+    margin-left: 0px;
+    line-height: 14px;
+    display: inline-block;
+    vertical-align: middle;
+    text-align:center;
+    content: "";
+    width: 100px;
+    height: 14px;
+    color:silver;
+    position: relative;
+}
+span.sheet-skillbox {
+    position: relative;
+    left:-40px;
+    width: 100px;
+    text-shadow: none;
+    font-weight:bold;
+    }
+input.sheet-skillbox[type="checkbox"]:checked + span {
+    color: red;
+}
+
     /*==== Button Reset ====*/
 button[type="roll"]:before {
     content: ""!important;
@@ -286,6 +361,75 @@ button[type="roll"]:hover label, button[type="roll"]:hover input {
     border: none;
 }
 
+.sheet-button_header {
+    display: inline-block;
+    font-weight: bold;
+    margin:0px;
+    padding:0px;
+    font-size: 0.8em;
+}
+
+    /*==== sheet-button Reset ====*/
+
+button.sheet-button[type="roll"] {
+    width: 95%;
+    height:24px;
+    padding-bottom: 0;
+    display: inline-block;
+    margin: 0;
+    font-weight: 400;
+    text-align: center;
+    cursor: pointer;
+    background-image: none;
+    background-color: white;
+    border: 1px solid red;
+    white-space: nowrap;
+    border-radius: 4px;
+    -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.sheet-button[type="roll"]:hover {
+    background-color: black;
+    border-color: red;
+    color:white
+}
+
+button.sheet-button[type="roll"] label, button[type="roll"] input {
+    height:24px;
+    line-height: 24px;
+    text-align:center;
+    width: 100%;
+    cursor: pointer;
+    background: none;
+    box-shadow: none;
+    transition: none;
+    border-radius: none;
+    border:none;
+    font-weight:700;
+}
+
+
+button.sheet-button[type="roll"]:hover label, button[type="roll"]:hover input {
+    color: white;
+    border: none;
+}
+/* ==== sheet 2 colrow ====*/
+
+.charsheet .sheet-2colrow .sheet-col {
+    width: calc(50% - 3px) !important;
+    margin-right: 2px !important;
+}
+
+.charsheet .sheet-2colrow .sheet-col:last-child {
+    margin-right: 0 !important;
+}
+
 .sheet-button_header {
     display: inline-block;
     font-weight: bold;
@@ -317,6 +461,55 @@ div.sheet-body {
 input.sheet-arrow:checked ~ div.sheet-body {
     display: block;
 }
+input.sheet-hider:checked ~ div.sheet-body {
+    display: block;
+}
+
+
+.sheet-hidden {
+    display:none;
+}
+
+/*========== Hide actual sheet reset ==========*/
+input.sheet-reddot[type="checkbox"] {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    top: 5px;
+    left: 8px;
+    top:0px;
+    margin: 0px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* -----Fake sheet-reset checkbox----- */
+
+input.sheet-reddot[type="checkbox"] + span::before
+{
+    position: relative;
+    left:-7px;
+    margin-right: 0px;
+    line-height: 20px;
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    font-family: "Pictos";
+    content: "2";
+    width: 20px;
+    height: 20px;
+    font-size:15px;
+    background:transparent;
+    color:black;
+}
+
+input.sheet-reddot[type="checkbox"]:active + span::before {
+    color:green;
+    font-family: "Pictos";
+    content: "0";
+    font-size:15px;
+}
 
 /* ----Hide actual sheet-arrow checkbox---- */
 
@@ -356,5 +549,509 @@ input.sheet-arrow[type="checkbox"]:checked + span::before
     text-shadow: 3px 0 black;
     content: "▼";
 }
+/*%%%%% =====   %%%%%*/
+/* ----Hide actual sheet-arrow checkbox---- */
 
- /*-------sheet select---------*/
+input.sheet-untrained[type="checkbox"]
+{
+    opacity: 0;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    margin: -10px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* -----Fake sheet-arrow checkbox----- */
+
+input.sheet-untrained[type="checkbox"] + span::before
+{
+    position: relative;
+    top: 0px;
+    left: -5px;
+    color:green;
+    text-shadow: none;
+    margin-right: 4px;
+    line-height: 14px;
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    font-family: "Pictos";
+    content: "3";
+    width: 14px;
+    height: 14px;
+    font-size: 12px;
+    box-shadow: none;
+}
+input.sheet-untrained[type="checkbox"]:checked + span::before
+{
+    color:red;
+    content: "D";
+    box-shadow: none;
+}
+
+ /*------------------------------*/
+ /*------------------------------*/
+ /*-------  Shhet crate ---------*/
+ /*------------------------------*/
+ /*------------------------------*/
+
+/* ----Hide actual sheet-arrow checkbox---- */
+
+input.sheet-crate[type="checkbox"]
+{
+    opacity: 0;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    margin: -10px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* -----Fake sheet-arrow checkbox----- */
+
+input.sheet-crate[type="checkbox"] + span::before
+{
+    position: relative;
+    top: 0px;
+    left: -5px;
+    color:green;
+    text-shadow: none;
+    margin-right: 4px;
+    line-height: 14px;
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    font-family: "Pictos";
+    content: "-";
+    width: 14px;
+    height: 14px;
+    font-size: 12px;
+    box-shadow: none;
+}
+input.sheet-crate[type="checkbox"]:checked + span::before
+{
+    color:red;
+    content: "+";
+    box-shadow: none;
+}
+
+
+ /*------------------------------*/
+ /*------------------------------*/
+ /*-------  Sheet Power ---------*/
+ /*------------------------------*/
+ /*------------------------------*/
+/* ----Hide actual sheet-power checkbox---- */
+
+input.sheet-power[type="checkbox"]
+{
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    top: 0px;
+    left: 20px;
+    margin: -10px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+/* -----Fake sheet-power checkbox----- */
+
+input.sheet-power[type="checkbox"] + span::before
+{
+    position: relative;
+    top: 0px;
+    left: 10px;
+    margin-right:5px;
+    color:black;
+    text-shadow: 3px 0 black;
+    margin-right: 4px;
+    line-height: 14px;
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    font-family: "Pictos";
+    content: "Q";
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    text-shadow: 0px 0px 5px green;
+}
+input.sheet-power[type="checkbox"]:checked + span::before
+{
+    color:black;
+    text-shadow: 0px 0px 5px red;
+}
+
+ /*------------------------------*/
+ /*------------------------------*/
+ /*-------Roll Templates---------*/
+ /*------------------------------*/
+ /*------------------------------*/
+ 
+ /*----  general ----*/
+.sheet-rolltemplate-skill-general table {
+    width: 100%;
+    background: white;
+    border: 3px ridge gray;
+    color: black;
+    font-size: 0.9em;
+    font-family: "Contrail One", sans-serif;
+    box-shadow: -5px -5px 5px black;
+    color: #596a72;
+}
+
+.sheet-rolltemplate-skill-general th {
+    color: white;
+    padding: 4px;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    width: 100%;
+    height: 100%;
+    border-spacing: 0;
+    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
+    
+    background: #cedce7; /* Old browsers */
+    background: -moz-radial-gradient(center, ellipse cover, #cedce7 0%, #596a72 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, #cedce7 0%,#596a72 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+    
+    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
+}
+
+.sheet-rolltemplate-skill-general .sheet-tcat {
+    font-weight: bold;
+}
+
+.sheet-rolltemplate-skill-general td {
+    padding: 0px;
+    text-align:center;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-general .inlinerollresult  {
+    display: inline-block;
+    min-width: 1.2em;
+    text-align: center;
+    border: 1px solid #596a72; 
+    background:transparent;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-general .inlinerollresult.fullfail {
+    border: 1px solid #596a72;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-general .inlinerollresult.importantroll {
+	border: 1px solid #596a72;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-general .sheet-no_border .inlinerollresult {
+    display: inline-block;
+    min-width: 1.5em;
+    border: 2px solid transparent; 
+    background:transparent;
+    font-weight:400;
+    text-shadow: none;
+}
+/*----  attrib ----*/
+.sheet-rolltemplate-skill-attrib table {
+    width: 100%;
+    background: white;
+    border: 3px ridge gray;
+    color: black;
+    font-size: 0.9em;
+    font-family: "Contrail One", sans-serif;
+    box-shadow: -5px -5px 5px black;
+    color: #596a72;
+}
+
+.sheet-rolltemplate-skill-attrib th {
+    color: white;
+    padding: 4px;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    width: 100%;
+    height: 100%;
+    border-spacing: 0;
+    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
+    
+    background: #a90329; /* Old browsers */
+    background: -moz-radial-gradient(center, ellipse cover, #a90329 0%, #8f0222 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a90329), color-stop(100%,#8f0222)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, #a90329 0%,#8f0222 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, #a90329 0%,#8f0222 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, #a90329 0%,#8f0222 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, #a90329 0%,#8f0222 100%); /* W3C */
+    
+    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
+}
+
+.sheet-rolltemplate-skill-attrib .sheet-tcat {
+    font-weight: bold;
+}
+
+.sheet-rolltemplate-skill-attrib td {
+    padding: 0px;
+    text-align:center;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-attrib .inlinerollresult  {
+    display: inline-block;
+    min-width: 1.2em;
+    text-align: center;
+    border: 1px solid #596a72; 
+    background:transparent;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-attrib .inlinerollresult.fullfail {
+    border: 1px solid #596a72;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-attrib .inlinerollresult.importantroll {
+	border: 1px solid #596a72;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-skill-attrib .sheet-no_border .inlinerollresult {
+    display: inline-block;
+    min-width: 1.5em;
+    border: 2px solid transparent; 
+    background:transparent;
+    font-weight:400;
+    text-shadow: none;
+}
+/*----  weapons ----*/
+/*----  range ----*/
+.sheet-rolltemplate-range table {
+    width: 100%;
+    background: white;
+    border: 3px ridge gray;
+    color: black;
+    font-size: 0.9em;
+    font-family: "Contrail One", sans-serif;
+    box-shadow: -5px -5px 5px black;
+    color: #006e2e;
+}
+
+.sheet-rolltemplate-range th {
+    color: white;
+    padding: 4px;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    width: 100%;
+    height: 100%;
+    border-spacing: 0;
+    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
+    
+    background: #a90329; /* Old browsers */
+    background: -moz-radial-gradient(center, ellipse cover, #b4ddb4 0%, #006e2e 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b4ddb4), color-stop(100%,#006e2e)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, #b4ddb4 0%,#006e2e 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, #b4ddb4 0%,#006e2e 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, #b4ddb4 0%,#006e2e 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, #b4ddb4 0%,#006e2e 100%); /* W3C */
+    
+    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
+}
+
+.sheet-rolltemplate-range .sheet-tcat {
+    font-weight: bold;
+}
+
+.sheet-rolltemplate-range td {
+    padding: 0px;
+    text-align:center;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-range .inlinerollresult  {
+    display: inline-block;
+    min-width: 1.2em;
+    text-align: center;
+    border: 1px solid #006e2e; 
+    background:transparent;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-range .inlinerollresult.fullfail {
+    border: 1px solid #006e2e;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-range .inlinerollresult.importantroll {
+	border: 1px solid #006e2e;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-range .sheet-no_border .inlinerollresult {
+    display: inline-block;
+    min-width: 1.5em;
+    border: 2px solid transparent; 
+    background:transparent;
+    font-weight:400;
+    text-shadow: none;
+}
+
+/*                          */
+/*----  melee ----*/
+.sheet-rolltemplate-melee table {
+    width: 100%;
+    background: white;
+    border: 3px ridge gray;
+    color: black;
+    font-size: 0.9em;
+    font-family: "Contrail One", sans-serif;
+    box-shadow: -5px -5px 5px black;
+    color: #006e2e;
+}
+
+.sheet-rolltemplate-melee th {
+    color: white;
+    padding: 4px;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    width: 100%;
+    height: 100%;
+    border-spacing: 0;
+    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
+    
+    background: #a90329; /* Old browsers */
+    background: -moz-radial-gradient(center, ellipse cover, #b4ddb4 0%, #006e2e 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b4ddb4), color-stop(100%,#006e2e)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, #b4ddb4 0%,#006e2e 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, #b4ddb4 0%,#006e2e 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, #b4ddb4 0%,#006e2e 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, #b4ddb4 0%,#006e2e 100%); /* W3C */
+    
+    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
+}
+
+.sheet-rolltemplate-melee .sheet-tcat {
+    font-weight: bold;
+}
+
+.sheet-rolltemplate-melee td {
+    padding: 0px;
+    text-align:center;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-melee .inlinerollresult  {
+    display: inline-block;
+    min-width: 1.2em;
+    text-align: center;
+    border: 1px solid #006e2e; 
+    background:transparent;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-melee .inlinerollresult.fullfail {
+    border: 1px solid #006e2e;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-melee .inlinerollresult.importantroll {
+	border: 1px solid #006e2e;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-melee .sheet-no_border .inlinerollresult {
+    display: inline-block;
+    min-width: 1.5em;
+    border: 2px solid transparent; 
+    background:transparent;
+    font-weight:400;
+    text-shadow: none;
+}
+/*  %%%%%   %%%%%   %%%%%*/
+/*  %%%%%   %%%%%   %%%%%*/
+/*  %%%%%   %%%%%   %%%%%*/
+/*  %%%%%   %%%%%   %%%%%*/
+
+/*----  power ----*/
+.sheet-rolltemplate-power table {
+    width: 100%;
+    background: white;
+    border: 3px ridge gray;
+    color: black;
+    font-size: 0.9em;
+    font-family: "Contrail One", sans-serif;
+    box-shadow: -5px -5px 5px black;
+    color: #596a72;
+}
+
+.sheet-rolltemplate-power th {
+    color: white;
+    padding: 4px;
+    line-height: 1.4em;
+    font-size: 1.2em;
+    width: 100%;
+    height: 100%;
+    border-spacing: 0;
+    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;
+    
+    background: rgb(97,153,199); /* Old browsers */
+    background: -moz-linear-gradient(left,  rgba(97,153,199,1) 10%, rgba(58,132,195,1) 29%, rgba(65,154,214,1) 45%, rgba(75,184,240,1) 63%, rgba(58,139,194,1) 80%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left,  rgba(97,153,199,1) 10%,rgba(58,132,195,1) 29%,rgba(65,154,214,1) 45%,rgba(75,184,240,1) 63%,rgba(58,139,194,1) 80%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right,  rgba(97,153,199,1) 10%,rgba(58,132,195,1) 29%,rgba(65,154,214,1) 45%,rgba(75,184,240,1) 63%,rgba(58,139,194,1) 80%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6199c7', endColorstr='#26558b',GradientType=1 ); /* IE6-9 */
+
+    
+    box-shadow: inset 5px 0px 20px 0px black, inset -5px 0px 20px 0px black;
+}
+
+.sheet-rolltemplate-power .sheet-tcat {
+    font-weight: bold;
+}
+
+.sheet-rolltemplate-power td {
+    padding: 0px;
+    text-align:center;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-power .inlinerollresult  {
+    display: inline-block;
+    min-width: 1.2em;
+    text-align: center;
+    border: 1px solid #596a72; 
+    background:transparent;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-power .inlinerollresult.fullfail {
+    border: 1px solid #596a72;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-power .inlinerollresult.importantroll {
+	border: 1px solid #596a72;
+    text-shadow: none;
+}
+
+.sheet-rolltemplate-power .sheet-no_border .inlinerollresult {
+    display: inline-block;
+    min-width: 1.5em;
+    border: 2px solid transparent; 
+    background:transparent;
+    font-weight:400;
+    text-shadow: none;
+}