From b5a35d2ee576bee515e23bc5d2e2e0de4a74fd1a Mon Sep 17 00:00:00 2001
From: danimagaming <63368514+danimagaming@users.noreply.github.com>
Date: Sat, 17 Aug 2024 19:28:41 -0400
Subject: [PATCH] Update DODAS.css

Added a number of changes. Explainer popups throughout sheet, more consistent style and header uses, tab redesign, full attribute names, updated styled rolltemplates for attributes, 1d6 rolls, etc.
---
 Duels of Dreams - DODAS/DODAS.css | 1158 +++++++++++++++++++++++++++--
 1 file changed, 1105 insertions(+), 53 deletions(-)

diff --git a/Duels of Dreams - DODAS/DODAS.css b/Duels of Dreams - DODAS/DODAS.css
index 5f73fbc0bb..71e77f0a11 100644
--- a/Duels of Dreams - DODAS/DODAS.css	
+++ b/Duels of Dreams - DODAS/DODAS.css	
@@ -5,7 +5,24 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
     padding: 0;
     border: 0;
     font-size: 100%;
-    font: inherit;
+    /* font: inherit; */
+    /* font-style: inherit; */
+    font-variant-ligatures: inherit;
+    font-variant-caps: inherit;
+    font-variant-numeric: inherit;
+    font-variant-east-asian: inherit;
+    font-variant-alternates: inherit;
+    font-variant-position: inherit;
+    /* font-weight: inherit; */
+    font-stretch: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    font-optical-sizing: inherit;
+    font-size-adjust: inherit;
+    font-kerning: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
     vertical-align: baseline;
 }
 
@@ -16,7 +33,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
     display: block;
 }
 
-body {
+body {i
     line-height: 1.42857143;
     background-color: #C5C3B6
 }
@@ -88,8 +105,9 @@ div.tabbuttoncontainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 470px;
+  width: 794px;
   margin-left: 5px;
+  border-bottom: 2px solid #e0e0e0;
 
 }
 
@@ -100,11 +118,11 @@ button[type="action"].tabbutton {
   height: 12pt;
   width: 75pt;
 
-  background-color: black;
+  background-color: #5c5653;
   color: white;
 
   border: 1px solid gray;
-  border-radius: 80px;
+  border-radius: 6px;
 
   -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
   box-shadow: 1px 1px 8px 1px rgba(53, 39, 25, 0.45);
@@ -128,6 +146,19 @@ button[type="action"].tabbutton {
 	display: block;
 }
 
+/* style active tab button */
+.sheet-tabstoggle[value="allsection"] ~ .tabbutton0 .tabbutton, .sheet-tabstoggle[value="wepnstab"] ~ .tabbutton1 .tabbutton,
+.sheet-tabstoggle[value="skillsandpoints"] ~ .tabbutton2 .tabbutton,
+.sheet-tabstoggle[value="spellstab"] ~ .tabbutton3 .tabbutton,
+.sheet-tabstoggle[value="story"] ~ .tabbutton4 .tabbutton,
+.sheet-tabstoggle[value="pointstab"] ~ .tabbutton5 .tabbutton,
+.sheet-tabstoggle[value="inventorytabsection"] ~ .tabbutton6 .tabbutton {
+  background-color: #000000;
+  box-shadow: 4px 4px 8px 4px rgb(1 1 1 / 38%);
+  border: 1px solid #b5b3af;
+}
+
+
 
 
 /* LAYOUT */
@@ -175,7 +206,7 @@ div.ATRTable, div.weapontable, div.armor, div.spelltable {
   background: none;
   outline-color: transparent;
   border-style: none;
-  color: white;
+  color: black;
   font-weight: 200;
   font-size: 100%;
   padding: 0px 0px 0px 0px;
@@ -187,7 +218,7 @@ div.ATRTable, div.weapontable, div.armor, div.spelltable {
 
 div.ATRTable {
   background-color: gray;
-  width: 148pt;
+  width: 210pt;
   height: 125pt;
   /* from style reset */
   border: 0px solid #403635;
@@ -203,12 +234,15 @@ div.ATRTable {
 div.ATRTableHeader {
   display: grid;
   font-family: 'Girassol';
-  grid-template-columns: 23pt 41pt 3pt 64pt 19pt;
+  grid-template-columns: 8pt 78pt 3pt 91pt 31pt;
   font-size: 95%;
     /*padding: .1em;*/
     text-align: center;
-    font-style: italic;
+    /* font-style: italic; */
+    background-color: black;
+    color: white;
     height: 15pt;
+
 }
 
 /*
@@ -241,11 +275,12 @@ div.ATRTableQuestion {
     font-style: italic;
     height: 15pt;
     padding-right: 0.2em;
+    margin-left: 15pt;
 }
 
 div.ATRTableRow {
   display: grid;
-  grid-template-columns: 20pt 27pt 25pt 4pt 27pt 25pt 20pt;
+  grid-template-columns: 20pt 54pt 25pt 4pt 62pt 25pt 20pt;
   font-size: 100%;
   text-align: center;
   height: 15pt;
@@ -279,11 +314,12 @@ div.derivedATRLetter {
   font-family: 'Girassol';
   font-style: normal;
   font-size: 85%;
-  background-color: black;
-  color: white;
+  background-color: #dbd8cc;
+  color: black;
 
   text-align: center;
   padding: 0;
+  padding-top: 1.1px;
   height: 15pt;
 }
 
@@ -304,7 +340,7 @@ div.resolvetable {
   width: 210pt;
   height: 48pt;
 
-  margin-top: 23px;
+  margin-top: 22px;
   margin-left: 5px;
   margin-bottom: 10px;
   padding: 0;
@@ -323,7 +359,9 @@ div.resolvetable {
 }
 
 div.resolvetabletoprow {
-  height: 17pt;
+  height: 18pt;
+  display: grid;
+  grid-template-columns: 35pt 35pt 28pt 28pt 28pt 28pt 28pt;
 }
 
 span.resolveword, span.resolvemax, span.fatigueword {
@@ -349,9 +387,10 @@ div.resolvetabletoprow span {
   border: 1px solid gray;
 }
 
-div.resolvetabletoprow, div.resolvetablesecondrow, div.resolvetablethirdrow {
+div.resolvetablesecondrow, div.resolvetablethirdrow {
   display: grid;
   grid-template-columns: 70pt 28pt 28pt 28pt 28pt 28pt;
+  height: 14pt;
 
 }
 
@@ -381,7 +420,7 @@ div.pointbuytable input[type="text"] {
 div.initiativetable {
   font-family: 'Girassol';
   width: 180pt;
-  height: 36pt;
+  height: 35pt;
 
   margin-top: 5px;
   margin-left: 5px;
@@ -430,6 +469,7 @@ div.initiativetabletoprow span {
 div.initiativetabletoprow, div.initiativetablesecondrow, div.initiativetablethirdrow {
   display: grid;
   grid-template-columns: 70pt 28pt 28pt 28pt 28pt 28pt;
+  height: 17pt;
 
 }
 
@@ -453,6 +493,55 @@ div.initiativetable input[type="text"] {
 
 }
 
+/* SPECIAL ROLLS table */
+div.specialrollstable {
+  font-family: 'Girassol';
+    width: 165pt;
+    height: 17pt;
+    margin-top: 5px;
+    margin-left: 5px;
+    padding: 0;
+    column-gap: 0;
+    padding: 0in 1.5pt 0in 1.5pt;
+    font-size: 8.0pt;
+    background-color: #b2b7b7;
+    border: 0px solid #403635;
+    outline: 3px solid #9a9489;
+    outline-offset: 1px;
+    -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+    box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+}
+
+div.specialrollsrow {
+  display: grid;
+  grid-template-columns: 70pt 19pt 19pt 19pt 19pt 19pt;
+  height: 17pt;
+  background-color: #dbd8cd;
+}
+
+div.specialrollsrow span {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  color: white;
+}
+
+.specialrollstitle {
+  background-color: black;
+  font-size: 9pt;
+}
+
+div.specialrollsrow img {
+  /* height: auto; */
+  padding: 0pt;
+  border: 1px solid #343434;
+  height: 15pt;
+  width: 16pt;
+  background-color: #b2b7b7;
+
+}
+
+
 /* Passives and LuckSanity FLEX */
 div.passives_luck_flexcontainer {
     display: flex;
@@ -466,7 +555,7 @@ body {
 
 div.passiveperceptiontable {
   font-family: 'Girassol';
-  width: 189pt;
+  width: 185pt;
   height: 62pt;
 
   margin-top: 5px;
@@ -486,11 +575,15 @@ div.passiveperceptiontable {
 
 }
 
-div.passiveperceptiontabletoprow {
-  height: 17pt;
+div.passiveperceptiontable .passiveperceptiontabletoprow {
+  height: 18pt;
 }
 
-span.passiveperceptiontotal {
+div.passiveperceptionsimage {
+  text-align: center;
+}
+
+div.passiveperceptiontabletoprow span.passiveperceptiontotal {
   background-color: black;
   color: white;
 }
@@ -507,12 +600,13 @@ span.passiveperceptionsword {
 
 div.passiveperceptiontabletoprow span {
   border: 1px solid gray;
+  background-color: #d8d8d8;
 }
 
 div.passiveperceptiontabletoprow, div.passiveperceptiontableinputrow {
   display: grid;
-  grid-template-columns: 80pt 28pt 28pt 28pt 28pt 28pt;
-
+  grid-template-columns: 74pt 28pt 28pt 28pt 28pt 28pt;
+  height: 14pt;
 }
 
 
@@ -544,10 +638,10 @@ span.passiveperceptionword, span.enemydetectionword, span.passiveinsightword {
 /* SANITY AND LUCK */
 div.lucksanitytable {
   font-family: 'Girassol';
-  width: 180pt;
-  height: 55pt;
+  width: 185pt;
+  height: 49pt;
 
-  margin-top: 12px;
+  margin-top: 22px;
   margin-left: 5px;
   padding: 0;
   column-gap: 0;
@@ -564,7 +658,7 @@ div.lucksanitytable {
 
 }
 
-div.lucksanitytabletoprow {
+div.lucksanitytable .lucksanitytabletoprow {
   height: 18pt;
 }
 
@@ -595,8 +689,8 @@ div.lucksanitytabletoprow span {
 
 div.lucksanitytabletoprow, div.lucksanitytablesecondrow, div.lucksanitytablethirdrow {
   display: grid;
-  grid-template-columns: 70pt 28pt 28pt 28pt 28pt 28pt;
-  height: 18pt;
+  grid-template-columns: 74pt 28pt 28pt 28pt 28pt 28pt;
+  height: 14pt;
 
 }
 
@@ -866,7 +960,7 @@ div.armortable {
   font-style: normal;
   */
   font-family: 'Girassol';
-  width: 435pt;
+  width: 444pt;
   padding: 0;
   column-gap: 0;
   padding: 3pt 0pt 0in 3pt;
@@ -891,7 +985,7 @@ div.armortable span {
 
 div.armortbtoprow {
     display: grid;
-    grid-template-columns: 70pt 72pt 20pt 72pt;
+    grid-template-columns: 79pt 72pt 20pt 72pt;
     column-gap: 0;
     height: 12.8pt;
     font-size: 8.0pt;
@@ -925,10 +1019,15 @@ span.atTopWeapon, span.atTopBD {
   background-color: none;
 }
 
+img.ArmorBodyImg {
+  height: 13pt;
+  width: 13pt;
+}
+
     /* second row stuff */
 div.armorsecondrow {
     display: grid;
-    grid-template-columns: 70pt 18pt 18pt 18pt 18pt 20pt 18pt 18pt 18pt 18pt 30pt 30pt 30pt 110pt;
+    grid-template-columns: 79pt 18pt 18pt 18pt 18pt 20pt 18pt 18pt 18pt 18pt 30pt 30pt 30pt 110pt;
     height: 14pt;
     column-gap: 0;
     color: #292929;
@@ -938,7 +1037,7 @@ div.armorsecondrow {
 div.armor-fillinrepeating,
 div.armor-fillinrepeating input[type="text"] {
     display: grid;
-    grid-template-columns: 70pt 18pt 18pt 18pt 18pt 20pt 18pt 18pt 18pt 18pt 30pt 30pt 30pt 110pt;
+    grid-template-columns: 79pt 18pt 18pt 18pt 18pt 20pt 18pt 18pt 18pt 18pt 30pt 30pt 30pt 110pt;
     font-family: 'Verdana';
     font-weight: 100;
     height: 14pt;
@@ -962,7 +1061,7 @@ div.armorsecondrow span, div.armortbtoprow span {
 }
 
 span.atArmor, span.atDR {
-    font-weight: 900;
+    /* font-weight: 900; */
     background: black;
     color: #ffffff;
 }
@@ -982,9 +1081,11 @@ span.atStealth {
 }
 
 span.atBD {
-  background-color: #D6BEA3;
+  background-color: #dbd8cd;
   color: black;
+  /*
   font-weight: 600;
+  */
   border-bottom: 1px solid #BCBCBC;
   border-left: 1px solid black;
   border-right: 1px solid black;
@@ -1009,6 +1110,7 @@ div.rangedefensetable {
 
   margin-top: 0px;
   margin-left: 5px;
+  margin-rigth: 13px;
   padding: 0;
   column-gap: 0;
   padding: 0in 1.5pt 0in 1.5pt;
@@ -1181,7 +1283,6 @@ div.strepeating input[name="attr_spellorability"] {
    /* ALTERNATE LAYOUT button and display */
    .hidemathtext {
      font-family: 'Verdena';
-     font-style: italic;
      font-size: 9pt;
      position: relative;
        margin: 0pt;
@@ -1194,6 +1295,24 @@ div.strepeating input[name="attr_spellorability"] {
      display: none;
    }
 
+      /* combat table changes */
+      .sheet-block-combatfulltable, .charsheet .sheet-combathidemathcheckbox:checked ~ .sheet-block-combatnomathtable {
+        display: block;
+      }
+
+      .charsheet .sheet-block-combatnomathtable, .charsheet .sheet-combathidemathcheckbox:checked ~ .sheet-block-combatfulltable {
+        display: none;
+      }
+
+.sheet-combathidemathcheckbox, .sheet-hidemathcheckbox {
+  display: none;
+}
+
+.sheet-duplicatecheckbox {
+  height: 10pt;
+  width: 10pt;
+}
+
 div.skilltablerow input.sheet-fakehidemathcheckbox {
   position: relative;
   top: 1px;
@@ -1201,7 +1320,7 @@ div.skilltablerow input.sheet-fakehidemathcheckbox {
   height: 15px;
 }
 
-.charsheet input.sheet-hidemathcheckbox {
+.charsheet input.sheet-hidemathcheckbox, .charsheet input.sheet-combathidemathcheckbox {
   position: relative;
 top: 22px;
 left: 202px;
@@ -1241,7 +1360,7 @@ div.adventuringgridalttable {
   column-gap: 0;
   padding: 0in 1.5pt 0in 1.5pt;
   font-size: 8.0pt;
-  margin-top: 5px;
+  margin-top: 13px;
   color: black;
   background-color: #b2b7b7;
   border: 0px solid #403635;
@@ -1279,6 +1398,7 @@ div.skilltablerow span, div.skilltablerow2 span, div.adventuringgridalttabletitl
 div.skilltablerow {
   display: grid;
   grid-template-columns:  150pt 26pt 44pt 24pt 125pt 48pt 24pt 24pt 88pt 80pt;
+  height: 14pt;
 }
 
 div.skilltablerow2 {
@@ -1377,10 +1497,14 @@ div.adventurecompactskillrowsecondspec input.skilltotalfield {
 }
 
     /* hide math table styling */
-    div.adventurecompactskillrowspec input.skilltotalfield {
+    div.adventurecompactskillrowspec input.skilltotalfield, div.skillsfillrepeatingsecondary input.skilltotalfield {
     padding-left: 8.5pt;
 }
 
+div.skillsfillrepeatingtertiary input.skilltotalfield {
+  padding-left: 15.5pt;
+}
+
 div.adventuringgridalttable input.skillnamefield {
     border: none;
     height: 14pt;
@@ -1419,8 +1543,10 @@ div.skilltable input.skillnamefield {
     justify-content: center;
   font-family: georgia;
   font-size: 8.5pt;
-  -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 12px, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
   clip-path: polygon(calc(100% - 0px) 0, 100% 10px, 100% 100%, 11px 100%, 0 calc(100% - 10px), 0 0);
+  /* this one clips top right as well, not needed at the moment
+  -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 12px, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
+  */
 }
 
 .skillnamefieldprimary {
@@ -1428,16 +1554,80 @@ div.skilltable input.skillnamefield {
     color: #e0e0e0;
     border: 2px solid #363434;
     display: flex;
-    /*
     align-items: center;
-    */
     justify-content: center;
   font-family: georgia;
   font-size: 8.5pt;
-  -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 12px, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
   clip-path: polygon(calc(100% - 0px) 0, 100% 10px, 100% 100%, 11px 100%, 0 calc(100% - 10px), 0 0);
+  /* this one clips top right as well, not needed at the moment
+  -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 12px, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 0);
+  */
 }
 
+
+
+/*
+div.adventurecompactskillrowgroup:after, div.skillsfillrepeating:after {
+  content: '';
+  z-index: 2;
+    position: relative;
+    top: 4pt;
+    left: -49pt;
+    border-top: 8px solid #3f3b3b;
+    border-left: 9px solid #b2b7b7;
+    width: 0pt;
+    height: 0pt;
+}
+
+div.meleeandrangerow:after {
+  content: '';
+  z-index: 2;
+    position: relative;
+    top: 4pt;
+    left: -49pt;
+    border-top: 8px solid #3f3b3b;
+    border-left: 9px solid #b2b7b7;
+    width: 0pt;
+    height: 0pt;
+}
+
+div.adventurecompactskillrowspec:after {
+  content: '';
+  z-index: 2;
+    position: relative;
+    top: 4pt;
+    left: -49pt;
+    border-top: 8px solid #3f3b3b;
+    border-left: 9px solid #b2b7b7;
+    width: 0pt;
+    height: 0pt;
+}
+*/
+/*
+span.skillnamefieldprimary:before {
+  content: '';
+    position: relative;
+    top: 4pt;
+    left: -49pt;
+    border-top: 8px solid #3f3b3b;
+    border-left: 9px solid #b2b7b7;
+    width: 0pt;
+    height: 0pt;
+}
+
+span.skillnamefield:before {
+  content: '';
+    position: relative;
+    top: 4pt;
+    left: -49pt;
+    border-top: 8px solid #3f3b3b;
+    border-left: 9px solid #b2b7b7;
+    width: 0pt;
+    height: 0pt;
+}
+*/
+
+
 div.skillsfillrepeating input[name="attr_skillsandabilities"], div.adventuringskillsfillrepeating input[name="attr_skillsandabilities"] {
     background-color: #4a4545;
     color: #e0e0e0;
@@ -1480,7 +1670,13 @@ div.adventuringgridalttabletitlerow {
   grid-template-columns: 150pt 26pt 20pt 9pt 150pt 26pt 20pt 9pt 150pt 26pt 20pt 9pt;
 }
 
-div.adventuringgridalttabletitlerow span {
+div.combatalttabletitlerow {
+  display: grid;
+  grid-template-columns: 150pt 26pt 20pt 400pt;
+  height: 14pt;
+}
+
+div.adventuringgridalttabletitlerow span, div.combatalttabletitlerow span {
   display: grid;
   align-items: center;
   justify-content: center;
@@ -1493,6 +1689,12 @@ div.adventurecompactcolumn1 {
   grid-column-start: 1;
 }
 
+div.combatcompactcolumn1 {
+  display: flex;
+  flex-direction: column;
+  grid-column-start: 1;
+}
+
 div.adventurecompactcolumn2 {
   display: flex;
   flex-direction: column;
@@ -1525,6 +1727,10 @@ div.gridalttablecontainer div[data-groupname=repeating_knowledgespec].repcontrol
   display: none;
 }
 
+div.gridalttablecontainer [data-groupname=repeating_allcombatspec].repcontrol, div.gridalttablecontainer [data-groupname=repeating_meleespec].repcontrol, div.gridalttablecontainer [data-groupname=repeating_rangedspec].repcontrol {
+  display: none;
+}
+
   /* images for skill table */
 
   div.adventuringgridalttable img {
@@ -1542,6 +1748,14 @@ div.gridalttablecontainer div[data-groupname=repeating_knowledgespec].repcontrol
     left: -10px;
   }
 
+  div.combatskilltable img {
+    position: relative;
+    height: 15px;
+    width: 15px;
+    top: 0px;
+    left: -10px;
+  }
+
 
 
 
@@ -1758,9 +1972,7 @@ div.sbmodifiersfill input[name="attr_sbmodifier4"] {
 
 div.inventorytable {
   font-family: 'Girassol';
-  width: 259pt;
-
-
+  width: 635pt;
   margin-top: 12px;
   margin-left: 0px;
   margin-bottom: 8px;
@@ -1768,7 +1980,7 @@ div.inventorytable {
   column-gap: 0;
   padding: 0in 1.5pt 0in 1.5pt;
   font-size: 8.0pt;
-  background-color: #404040;
+  background-color: #b2b7b7;
 
   border: 0px solid #403635;
   outline: 3px solid #9a9489;
@@ -1788,10 +2000,15 @@ span.inventorytabletotalsword, span.inventorytableinventoryword {
   color: white;
 }
 
-span.inventorytableweightword, span.inventorytablebulkword, span.inventorytablemobilityword, span.inventorytableapmodword, span.inventoryequippedword {
+span.inventorytableamount, span.inventorytableweightword, span.inventorytablebulkword, span.inventorytablemobilityword, span.inventorytableapmodword, span.inventoryequippedword {
     background-color: #D8D8D8;
     color: black;
 }
+ /*
+span.inventorynotesword {
+  color: white;
+}
+*/
 
 div.inventorytabletoprow span {
   border: 1px solid gray;
@@ -1799,18 +2016,18 @@ div.inventorytabletoprow span {
 
 div.inventorytabletoprow, div.inventorytotalsrow {
   display: grid;
-  grid-template-columns: 100pt 32pt 32pt 32pt 32pt 32pt;
+  grid-template-columns: 144pt 32pt 32pt 32pt 32pt 32pt 32pt 302pt;
 
 }
 
 div.inventorytablerepeatinginputsrow,
 div.inventorytablerepeatinginputsrow input[type="text"], div.inventorytablerepeatinginputsrow input[type="checkbox"] {
     display: grid;
-  grid-template-columns: 100pt 32pt 32pt 32pt 32pt 32pt;
+  grid-template-columns: 144pt 32pt 32pt 32pt 32pt 32pt 32pt 302pt;
     font-family: 'Verdana';
     font-weight: 100;
-    height: 12.8pt;
-    font-size: 7.0pt;
+    height: 14pt;
+    font-size: 8.0pt;
     width: 100%;
     color: black;
 }
@@ -1827,6 +2044,12 @@ div.inventorytabletoprow span, div.inventorytotalsrow span {
     font-size: 9pt;
 }
 
+div.inventorytablerepeatinginputsrow input.inventorytitlestyle {
+    background-color: #3a3636;
+    color: #ececec;
+    border: 1px solid #5d5d5d;
+  }
+
 
 
 
@@ -1850,8 +2073,14 @@ div.inventorytabletoprow span, div.inventorytotalsrow span {
 .storychunk {
   border: 1px solid #554811;
   font-family: Cambria;
-  padding: 0px 0px 8px 0px;
+  padding: 0px 0px 0px 0px;
   width: 100%;
+  margin-top: 5px;
+}
+
+div.dodaslayout .storychunk textarea {
+    /* padding: 0px 0px 0px 0px; */
+    margin-bottom: 0pt;
 }
 
 .storyHeader {
@@ -2462,7 +2691,10 @@ button[type=roll].sheet-d6-dice::before {
 /* SKILL ROLL TEMPLATE */
 .sheet-rolltemplate-dodasadventureskills .sheet-container {
   width: 173pt;
+  /*
   background-color: #9c9696;
+  */
+  background-color: #c5c3b8;
     border: 0px solid #403635;
     outline: 3px solid #9a9489;
     outline-offset: 1px;
@@ -2601,3 +2833,823 @@ button[type=roll].sheet-d6-dice::before {
   border: 0px solid #901616a8;
   background-color: #2e5545;
 }
+
+
+
+
+  /* duplicate dodasadventureskills but for ATTRIBUTES */
+
+.sheet-rolltemplate-dodasattributerolls .sheet-container {
+  width: 173pt;
+  /*
+  background-color: #9c9696;
+  */
+  background-color: #c5c3b8;
+    border: 0px solid #403635;
+    outline: 3px solid #9a9489;
+    outline-offset: 1px;
+    -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+     box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+  font-family: Verdena;
+  margin-bottom: 7px;
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplateheaderrow {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplatebottomrow {
+  display: grid;
+  grid-template-columns: 74pt 57pt;
+  margin-left: 42pt;
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplateheader {
+  display: grid;
+  text-align: center;
+  grid-column-start: 1;
+  border: 1px solid gray;
+  /*
+  background-color: #3f3b3b;
+  */
+  color: black;
+
+  -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 100%, 13px 100%, 0 calc(100% - 10px), 0 0);
+  /*
+  clip-path: polygon(calc(100% - 0px) 0, 100% 12px, 100% 100%, 28px 100%, 0 calc(100% - 18px), 0 0);
+  */
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-templateskillname {
+  font-family: Times New Roman, Verdena;
+  font-size: 15pt;
+  padding-top: 3px;
+  margin-left: 3pt;
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-templateskillcharactername {
+  font-family: Times New Roman, Georgia;
+  font-size: 10pt;
+  font-style: italic;
+  padding-bottom: 2px;
+  padding-top: 0px;
+  color: black;
+}
+
+
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplaterollplus {
+  display: grid;
+  text-align: center;
+  padding-left: 12px;
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplaterollplusname {
+  justify-content: center;
+  padding-top: 10px;
+  font-size: 12pt;
+  color: black;
+  font-weight: bold;
+  background-color: #C5C3B6;
+  margin-left: -40px;
+  padding-left: 34px;
+}
+
+.sheet-rolltemplate-dodasattributerolls .textchatcontainer .inlinerollresult {
+  background-color: none;
+  border: none;
+  padding: none;
+  font-size: 1em;
+}
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplatediceroll {
+  display: grid;
+  text-align: center;
+  border: 1px solid gray;
+  font-size: 20pt;
+  font-weight: 900;
+  padding-top: 0pt;
+  padding-bottom: 9pt;
+  background-color: black;
+}
+
+.sheet-rolltemplate-dodasattributerolls span.sheet-bignumber {
+  height: 8pt;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+
+.sheet-rolltemplate-dodasattributerolls .sheet-skilltemplatediceroll span.inlinerollresult {
+    background-color: black;
+    display: block;
+    padding-top: 4px;
+    padding-bottom: 2px;
+    width: 36px;
+    height: 18px;
+    margin-left: 13pt;
+    border: none;
+    color: white;
+}
+
+.sheet-rolltemplate-dodasattributerolls img {
+    position: absolute;
+    height: 31px;
+    width: 31px;
+    left: 50px;
+    bottom: 52px;
+}
+
+/*
+.sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasattributerolls .inlinerollresult {
+  background: unset;
+}
+*/
+
+.sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasattributerolls .inlinerollresult.fullfail {
+  border: 0px solid #901616a8;
+  background-color: #652e0e;
+}
+
+.sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasattributerolls .inlinerollresult.fullcrit {
+  border: 0px solid #901616a8;
+  background-color: #2e5545;
+}
+
+.sheet-rollemplate-dodasattributerolls .sheet-skilltemplatediceroll .inlinerollresult.fullfail {
+  border: 0px solid #901616a8;
+  background-color: #652e0e;
+}
+
+.sheet-rollemplate-dodasattributerolls .sheet-skilltemplatediceroll .inlinerollresult.fullcrit {
+  border: 0px solid #901616a8;
+  background-color: #2e5545;
+}
+
+
+    /* duplicate attributes for special rolls */
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-container {
+    width: 173pt;
+    /*
+    background-color: #9c9696;
+    */
+    background-color: #c5c3b8;
+      border: 0px solid #403635;
+      outline: 3px solid #9a9489;
+      outline-offset: 1px;
+      -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+       box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+    font-family: Verdena;
+    margin-bottom: 7px;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplateheaderrow {
+    display: grid;
+    grid-template-columns: 1fr;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplatebottomrow {
+    display: grid;
+    grid-template-columns: 74pt 57pt;
+    margin-left: 42pt;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplateheader {
+    display: grid;
+    text-align: center;
+    grid-column-start: 1;
+    border: 1px solid gray;
+    /*
+    background-color: #3f3b3b;
+    */
+    color: black;
+
+    -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 100%, 13px 100%, 0 calc(100% - 10px), 0 0);
+    /*
+    clip-path: polygon(calc(100% - 0px) 0, 100% 12px, 100% 100%, 28px 100%, 0 calc(100% - 18px), 0 0);
+    */
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-templateskillname {
+    font-family: Times New Roman, Verdena;
+    font-size: 15pt;
+    padding-top: 3px;
+    margin-left: 3pt;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-templateskillcharactername {
+    font-family: Times New Roman, Georgia;
+    font-size: 10pt;
+    font-style: italic;
+    padding-bottom: 2px;
+    padding-top: 0px;
+    color: black;
+    }
+
+
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplaterollplus {
+    display: grid;
+    text-align: center;
+    padding-left: 12px;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplaterollplusname {
+    justify-content: center;
+    padding-top: 10px;
+    font-size: 12pt;
+    color: black;
+    font-weight: bold;
+    background-color: #C5C3B6;
+    margin-left: -40px;
+    padding-left: 34px;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .textchatcontainer .inlinerollresult {
+    background-color: none;
+    border: none;
+    padding: none;
+    font-size: 1em;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplatediceroll {
+    display: grid;
+    text-align: center;
+    border: 1px solid gray;
+    font-size: 20pt;
+    font-weight: 900;
+    padding-top: 0pt;
+    padding-bottom: 9pt;
+    background-color: black;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls span.sheet-bignumber {
+    height: 8pt;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    }
+
+
+    .sheet-rolltemplate-dodasspecialrolls .sheet-skilltemplatediceroll span.inlinerollresult {
+      background-color: black;
+      display: block;
+      padding-top: 4px;
+      padding-bottom: 2px;
+      width: 36px;
+      height: 18px;
+      margin-left: 13pt;
+      border: none;
+      color: white;
+    }
+
+    .sheet-rolltemplate-dodasspecialrolls img {
+      position: absolute;
+      height: 31px;
+      width: 31px;
+      left: 50px;
+      bottom: 52px;
+    }
+
+    /*
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasspecialrolls .inlinerollresult {
+    background: unset;
+    }
+    */
+
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasspecialrolls .inlinerollresult.fullfail {
+    border: 0px solid #901616a8;
+    background-color: #652e0e;
+    }
+
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasspecialrolls .inlinerollresult.fullcrit {
+    border: 0px solid #901616a8;
+    background-color: #2e5545;
+    }
+
+    .sheet-rollemplate-dodasspecialrolls .sheet-skilltemplatediceroll .inlinerollresult.fullfail {
+    border: 0px solid #901616a8;
+    background-color: #652e0e;
+    }
+
+    .sheet-rollemplate-dodasspecialrolls .sheet-skilltemplatediceroll .inlinerollresult.fullcrit {
+    border: 0px solid #901616a8;
+    background-color: #2e5545;
+    }
+
+
+
+
+
+    /* duplicate attributes for BLOOD LOSS rolls */
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-container {
+    width: 173pt;
+    /*
+    background-color: #9c9696;
+    */
+    background-color: #c5c3b8;
+      border: 0px solid #403635;
+      outline: 3px solid #9a9489;
+      outline-offset: 1px;
+      -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+       box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+    font-family: Verdena;
+    margin-bottom: 7px;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplateheaderrow {
+    display: grid;
+    grid-template-columns: 1fr;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplatebottomrow {
+    display: grid;
+    grid-template-columns: 74pt 57pt;
+    margin-left: 42pt;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplateheader {
+    display: grid;
+    text-align: center;
+    grid-column-start: 1;
+    border: 1px solid gray;
+    /*
+    background-color: #3f3b3b;
+    */
+    color: black;
+
+    -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 100%, 13px 100%, 0 calc(100% - 10px), 0 0);
+    /*
+    clip-path: polygon(calc(100% - 0px) 0, 100% 12px, 100% 100%, 28px 100%, 0 calc(100% - 18px), 0 0);
+    */
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-templateskillname {
+    font-family: Times New Roman, Verdena;
+    font-size: 15pt;
+    padding-top: 3px;
+    margin-left: 3pt;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-templateskillcharactername {
+    font-family: Times New Roman, Georgia;
+    font-size: 10pt;
+    font-style: italic;
+    padding-bottom: 2px;
+    padding-top: 0px;
+    color: black;
+    }
+
+
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplaterollplus {
+    display: grid;
+    text-align: center;
+    padding-left: 12px;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplaterollplusname {
+    justify-content: center;
+    padding-top: 10px;
+    font-size: 12pt;
+    color: black;
+    font-weight: bold;
+    background-color: #C5C3B6;
+    margin-left: -40px;
+    padding-left: 34px;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .textchatcontainer .inlinerollresult {
+    background-color: none;
+    border: none;
+    padding: none;
+    font-size: 1em;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplatediceroll {
+    display: grid;
+    text-align: center;
+    border: 1px solid gray;
+    font-size: 20pt;
+    font-weight: 900;
+    padding-top: 0pt;
+    padding-bottom: 9pt;
+    background-color: black;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss span.sheet-bignumber {
+    height: 8pt;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    }
+
+
+    .sheet-rolltemplate-dodasbloodloss .sheet-skilltemplatediceroll span.inlinerollresult {
+      background-color: black;
+      display: block;
+      padding-top: 4px;
+      padding-bottom: 2px;
+      width: 36px;
+      height: 18px;
+      margin-left: 13pt;
+      border: none;
+      color: white;
+    }
+
+    .sheet-rolltemplate-dodasbloodloss img {
+      position: absolute;
+      height: 31px;
+      width: 31px;
+      left: 50px;
+      bottom: 52px;
+    }
+
+    /*
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasbloodloss .inlinerollresult {
+    background: unset;
+    }
+    */
+
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasbloodloss .inlinerollresult.fullfail {
+    border: 0px solid #901616a8;
+    background-color: #652e0e;
+    }
+
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasbloodloss .inlinerollresult.fullcrit {
+    border: 0px solid #901616a8;
+    background-color: #2e5545;
+    }
+
+    .sheet-rollemplate-dodasbloodloss .sheet-skilltemplatediceroll .inlinerollresult.fullfail {
+    border: 0px solid #901616a8;
+    background-color: #652e0e;
+    }
+
+    .sheet-rollemplate-dodasbloodloss .sheet-skilltemplatediceroll .inlinerollresult.fullcrit {
+    border: 0px solid #901616a8;
+    background-color: #2e5545;
+    }
+
+
+
+
+
+
+    /* duplicate LUCKSANITY attribute template rolls */
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-container {
+    width: 173pt;
+    /*
+    background-color: #9c9696;
+    */
+    background-color: #c5c3b8;
+      border: 0px solid #403635;
+      outline: 3px solid #9a9489;
+      outline-offset: 1px;
+      -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+       box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45);
+    font-family: Verdena;
+    margin-bottom: 7px;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplateheaderrow {
+    display: grid;
+    grid-template-columns: 1fr;
+    background-color: black;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplatebottomrow {
+    display: grid;
+    grid-template-columns: 74pt 57pt;
+    margin-left: 42pt;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplateheader {
+    display: grid;
+    text-align: center;
+    grid-column-start: 1;
+    border: 1px solid gray;
+    /*
+    background-color: #3f3b3b;
+    */
+
+    -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 100%, 13px 100%, 0 calc(100% - 10px), 0 0);
+    /*
+    clip-path: polygon(calc(100% - 0px) 0, 100% 12px, 100% 100%, 28px 100%, 0 calc(100% - 18px), 0 0);
+    */
+    background-color: black;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-templateskillname {
+    font-family: Times New Roman, Verdena;
+    font-size: 15pt;
+    padding-top: 3px;
+    margin-left: 3pt;
+    color: white;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-templateskillcharactername {
+    font-family: Times New Roman, Georgia;
+    font-size: 10pt;
+    font-style: italic;
+    padding-bottom: 2px;
+    padding-top: 0px;
+    color: white;
+    }
+
+
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplaterollplus {
+    display: grid;
+    text-align: center;
+    padding-left: 12px;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplaterollplusname {
+    justify-content: center;
+    padding-top: 10px;
+    font-size: 12pt;
+    color: black;
+    font-weight: bold;
+    background-color: #C5C3B6;
+    margin-left: -40px;
+    padding-left: 34px;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .textchatcontainer .inlinerollresult {
+    background-color: none;
+    border: none;
+    padding: none;
+    font-size: 1em;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplatediceroll {
+    display: grid;
+    text-align: center;
+    border: 1px solid gray;
+    font-size: 20pt;
+    font-weight: 900;
+    padding-top: 0pt;
+    padding-bottom: 9pt;
+    background-color: black;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls span.sheet-bignumber {
+    height: 8pt;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    }
+
+
+    .sheet-rolltemplate-dodaslucksanityrolls .sheet-skilltemplatediceroll span.inlinerollresult {
+      background-color: black;
+      display: block;
+      padding-top: 4px;
+      padding-bottom: 2px;
+      width: 36px;
+      height: 18px;
+      margin-left: 13pt;
+      border: none;
+      color: white;
+    }
+
+    .sheet-rolltemplate-dodaslucksanityrolls img {
+      position: absolute;
+      height: 31px;
+      width: 31px;
+      left: 50px;
+      bottom: 52px;
+    }
+
+    /*
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodaslucksanityrolls .inlinerollresult {
+    background: unset;
+    }
+    */
+
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodaslucksanityrolls .inlinerollresult.fullfail {
+    border: 0px solid #901616a8;
+    background-color: #652e0e;
+    }
+
+    .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodaslucksanityrolls .inlinerollresult.fullcrit {
+    border: 0px solid #901616a8;
+    background-color: #2e5545;
+    }
+
+    .sheet-rollemplate-dodaslucksanityrolls .sheet-skilltemplatediceroll .inlinerollresult.fullfail {
+    border: 0px solid #901616a8;
+    background-color: #652e0e;
+    }
+
+    .sheet-rollemplate-dodaslucksanityrolls .sheet-skilltemplatediceroll .inlinerollresult.fullcrit {
+    border: 0px solid #901616a8;
+    background-color: #2e5545;
+    }
+
+
+
+
+
+
+
+/* fix margins and stuff. can move later to be more organized */
+
+div.spelltable {
+  margin-top: 13px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+}
+
+div.rangedefensetable {
+  margin-top: 13px;
+  margin-bottom: 12px;
+}
+
+div.armortable {
+  margin-top: 13px;
+  margin-right: 7px;
+}
+
+div.weapontable {
+  margin-top: 13px;
+  margin-bottom: 0px;
+}
+
+div.rangedweapontable {
+  margin-top: 13px;
+  margin-right: 13px;
+}
+
+div.ATRTable {
+  margin-top: 11px;
+}
+
+div.resolvetable {
+  margin-top: 29px;
+}
+
+div.lucksanitytable {
+  margin-top: 29px;
+}
+
+div.storychunk {
+  margin-top: 9px;
+}
+
+div.skilltable {
+  margin-top: 13px;
+  margin-bottom: 0px;
+}
+
+/* POPUP WINDOW */
+
+
+.box {
+  /*
+  width: 90%;
+  margin: 0;
+  background: none;
+  padding: 35px;
+  border: 2px solid gray;
+  border-radius: 20px/50px;
+  background-clip: padding-box;
+  text-align: center;
+  */
+}
+
+
+.button {
+  /*
+  font-size: 1em;
+  padding: 10px;
+  color: black;
+  background-color: orange;
+  border: 1px solid #06D85F;
+  border-radius: 20px/50px;
+  text-decoration: none;
+  */
+  cursor: help;
+
+}
+
+.button:hover {
+  /*
+  background: gray;
+  */
+  color: green;
+}
+
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 500ms;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 20;
+}
+
+.overlay:target {
+  visibility: visible;
+  opacity: 1;
+}
+
+.popup {
+  margin: 0px auto;
+  /* padding: 13px; */
+  background: #292328;
+  color: #deddd7;
+  border-radius: 5px;
+  border: 1px solid gray;
+  width: 37%;
+  position: relative;
+  left: 0px;
+  top: 56px;
+  font-family: georgia, palatino, times new roman;
+  /*
+  transition: all 5s ease-in-out;
+  */
+}
+
+.popup h2 {
+  margin-top: 0px;
+  margin-bottom: 8pt;
+  padding-top: 6px;
+  padding-bottom: 2px;
+  color: white;
+  height: 22px;
+  font-family: Girassol, Garamond, Tahoma, Arial, sans-serif;
+  text-align: center;
+  vertical-align: bottom;
+  background: black;
+  font-size: 12pt;
+
+}
+.popup .close {
+  position: absolute;
+  top: 0px;
+  right: 20px;
+  /*
+  transition: all 200ms;
+  */
+  font-size: 30px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #cc8c47;
+  opacity: .9;
+}
+div.popup .close:hover {
+  color: #ffffff;
+}
+.popup .content {
+  max-height: 30%;
+  overflow: auto;
+}
+
+@media screen and (max-width: 700px){
+  .box{
+    width: 70%;
+  }
+  .popup{
+    width: 70%;
+  }
+}
+
+div.popup .content {
+  text-indent: 16px;
+  text-align: left;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-bottom: 12px;
+  font-size: .93rem;
+  font-family: Garamond, Georgia, Palatino;
+}
+
+b {
+  font-weight: bold;
+}
+
+/* fix top tabs */
+.nav-tabs>li {
+    font-family: helvetica;
+    font-size: 10pt;
+}
+
+div.popup ul li {
+  margin-bottom: 9px;
+  margin-left: 19pt;
+  list-style-position: outside;
+  text-indent: 0px;
+  list-style: circle;
+}
+
+div.box a:hover {
+  color: inherit;
+}