diff --git a/DFRPG/DFRPG.css b/DFRPG/DFRPG.css
index 76e6d3f6cb..e4e206fd97 100644
--- a/DFRPG/DFRPG.css
+++ b/DFRPG/DFRPG.css
@@ -1,3 +1,46 @@
+.sheet-rolltemplate-superb > div,
+.sheet-rolltemplate-great > div,
+.sheet-rolltemplate-good > div,
+.sheet-rolltemplate-fair > div,
+.sheet-rolltemplate-average > div,
+.sheet-rolltemplate-mediocre > div,
+.sheet-rolltemplate-poor > div,
+.sheet-rolltemplate-terrible > div {
+    background-image: url(http://i.imgur.com/TFX64KA.png);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    min-height: 193px;
+}
+
+.sheet-rolltemplate-superb h3,
+.sheet-rolltemplate-great h3,
+.sheet-rolltemplate-good h3,
+.sheet-rolltemplate-fair h3,
+.sheet-rolltemplate-average h3,
+.sheet-rolltemplate-mediocre h3,
+.sheet-rolltemplate-poor h3,
+.sheet-rolltemplate-terrible h3 {
+    text-align: center;
+    font-size: 200%;
+    padding-top: 35px;
+    font-family: "Lucida Handwriting" cursive;
+    color: #05356b;
+}
+
+.sheet-rolltemplate-superb div.sheet-roll,
+.sheet-rolltemplate-great div.sheet-roll,
+.sheet-rolltemplate-good div.sheet-roll,
+.sheet-rolltemplate-fair div.sheet-roll,
+.sheet-rolltemplate-average div.sheet-roll,
+.sheet-rolltemplate-mediocre div.sheet-roll,
+.sheet-rolltemplate-poor div.sheet-roll,
+.sheet-rolltemplate-terrible div.sheet-roll {
+    margin: 25px 0 25px 0;
+    text-align: center;
+    font-size: 150%;
+}
+
 .repcontainer[data-groupname=repeating_superb] .repitem,
 .repcontainer[data-groupname=repeating_great] .repitem,
 .repcontainer[data-groupname=repeating_good] .repitem,
@@ -66,7 +109,7 @@
 }
 
 input, select, textarea {
-    font-family: lucida-handwriting, cursive;
+    font-family: "Lucida Handwriting", cursive;
     color: #05356b
 }
 
@@ -79,7 +122,7 @@ input, select, textarea {
 .sheet-ladder ul {
     list-style-type: none;
     margin: 0;
-    font-family: trajan, serif;
+    font-family: "Trajan Pro", serif;
     font-variant: small-caps;
 }
 
@@ -132,7 +175,7 @@ input, select, textarea {
 .sheet-fair-skills .sheet-slots,
 .sheet-average-skills .sheet-slots,
 .sheet-mediocre-skills .sheet-slots {
-    font-family: trajan serif;
+    font-family: "Trajan Pro" serif;
     font-variant: small-caps;
     margin: 5px;
     margin-top: 5px;
@@ -145,16 +188,16 @@ input, select, textarea {
     letter-spacing: 4.6px;
     position: relative;
     width: 76px;
-    padding: 2px 0 0 2px;
+    padding: 0 0 2px 2px;
 }
 
 .sheet-slots button[type=roll]::before {
     content: '0000';
-    font-family: dicefontd6;
+    font-family: 'dicefontd6';
     letter-spacing: 0;
     position: absolute;
-    left: 3px;
-    top: 1px;
+    left: 4px;
+    top: 0;
 }
 
 .sheet-superb-skills .sheet-repeating,
@@ -352,7 +395,7 @@ input.sheet-tab[value=city-locs]:checked ~ div.sheet-tab-city-locs,
 input.sheet-tab[value=city-face]:checked ~ div.sheet-tab-city-face { display: block; }
 
 h1,h2,h3,h4,p.sheet-consequence {
-    font-family: trajan, serif;
+    font-family: "Trajan Pro" serif;
     font-variant: small-caps;
     font-weight: normal;
     text-align: center;
@@ -579,7 +622,7 @@ table.sheet-consequences input[type=number] {
 
 .sheet-input-left,
 .sheet-input-right {
-    font-family: trajan, serif;
+    font-family: "Trajan Pro" serif;
     font-variant: small-caps;
     position: absolute;
     left: 5px;
@@ -750,13 +793,13 @@ input.sheet-invisible:focus {
 }
 
 @font-face {
-    font-family: lucida-handwriting;
+    font-family: "Lucida Handwriting";
     src: local('Lucida Handwriting'),
          url(http://static.cmdr-class.com/lucida-handwriting.ttf) format('truetype');
 }
 
 @font-face {
-    font-family: trajan;
+    font-family: "Trajan Pro";
     src: local('Trajan Pro'),
          url(http://static.cmdr-class.com/trajan-pro.otf) format('truetype');
 }
\ No newline at end of file
diff --git a/DFRPG/DFRPG.html b/DFRPG/DFRPG.html
index 23f72104ab..fb21cccf00 100644
--- a/DFRPG/DFRPG.html
+++ b/DFRPG/DFRPG.html
@@ -1,4 +1,52 @@
-<input type="radio" class="sheet-tab" name="attr_page" value="worksheet" checked="checked" /><span title="Worksheet"></span>
+<rolltemplate class="sheet-rolltemplate-superb">
+    <div>
+        <h3>Superb!</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-great">
+    <div>
+        <h3>Great!</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-good">
+    <div>
+        <h3>Good</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-fair">
+    <div>
+        <h3>Fair</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-average">
+    <div>
+        <h3>Average...</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-mediocre">
+    <div>
+        <h3>Mediocre...</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-poor">
+    <div>
+        <h3>Poor</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<rolltemplate class="sheet-rolltemplate-terrible">
+    <div>
+        <h3>Terrible&#8253;</h3>
+        <div class="sheet-roll">{{roll}}</div>
+    </div>
+</rolltemplate>
+<input type="radio" class="sheet-tab" name="attr_page" value="worksheet" checked="checked" /><span title="Worksheet"></span>
 <input type="radio" class="sheet-tab" name="attr_page" value="character" /><span title="Character"></span>
 <input type="radio" class="sheet-tab" name="attr_page" value="city-high" /><span title="City"></span>
 <input type="radio" class="sheet-tab" name="attr_page" value="city-locs" /><span title="Locations"></span>
@@ -606,7 +654,7 @@
                     <div class="sheet-slots">
                         # of Slots:
                         <input type="number" name="attr_superb-count" title="@{superb-count}" min="0" value="0" />
-                        <button type="roll" name="roll_superb" title="%{superb}" value="/r 4df+5+?{Bonus|0} [SUPERB]">&nbsp;</button>
+                        <button type="roll" name="roll_superb" title="%{superb}" value="&{template:superb} {{roll=[[4df+5+?{Bonus|0}]]}}">&nbsp;</button>
                     </div>
                 </div>
                 <div class="sheet-great-skills">
@@ -619,7 +667,7 @@
                     <div class="sheet-slots">
                         # of Slots:
                         <input type="number" name="attr_great-count" title="@{great-count}" min="0" value="0" />
-                        <button type="roll" name="roll_great" title="%{great}" value="/r 4df+4+?{Bonus|0} [GREAT]">+-&nbsp;+</button>
+                        <button type="roll" name="roll_great" title="%{great}" value="&{template:great} {{roll=[[4df+4+?{Bonus|0}]]}}">+-&nbsp;+</button>
                     </div>
                 </div>
                 <div class="sheet-good-skills">
@@ -632,7 +680,7 @@
                     <div class="sheet-slots">
                         # of Slots:
                         <input type="number" name="attr_good-count" title="@{good-count}" min="0" value="0" />
-                        <button type="roll" name="roll_good" title="%{good}" value="/r 4df+3+?{Bonus|0} [GOOD]">-+++</button>
+                        <button type="roll" name="roll_good" title="%{good}" value="&{template:good} {{roll=[[4df+3+?{Bonus|0}]]}}">-+++</button>
                     </div>
                 </div>
                 <div class="sheet-fair-skills">
@@ -645,7 +693,7 @@
                     <div class="sheet-slots">
                         # of Slots:
                         <input type="number" name="attr_fair-count" title="@{fair-count}" min="0" value="0" />
-                        <button type="roll" name="roll_fair" title="%{fair}" value="/r 4df+2+?{Bonus|0} [FAIR]">+&nbsp;++</button>
+                        <button type="roll" name="roll_fair" title="%{fair}" value="&{template:fair} {{roll=[[4df+2+?{Bonus|0}]]}}">+&nbsp;++</button>
                     </div>
                 </div>
                 <div class="sheet-average-skills">
@@ -658,15 +706,15 @@
                     <div class="sheet-slots">
                         # of Slots:
                         <input type="number" name="attr_average-count" title="@{average-count}" min="0" value="0" />
-                        <button type="roll" name="roll_average" title="%{average}" value="/r 4df+1+?{Bonus|0} [AVERAGE]">++++</button>
+                        <button type="roll" name="roll_average" title="%{average}" value="&{template:average} {{roll=[[4df+1+?{Bonus|0}]]}}">++++</button>
                     </div>
                 </div>
                 <div class="sheet-mediocre-skills">
                     <div class="sheet-slots">
                         <h4 style="margin-left:0">Mediocre (+0)</h4>
-                        <button type="roll" name="roll_mediocre" title="%{mediocre}" value="/r 4df+?{Bonus|0} [MEDIOCRE]">----</button>
-                        <button type="roll" name="roll_poor" style="display:none" value="/r 4df-1+?{Bonus|0} [POOR]"></button>
-                        <button type="roll" name="roll_terrible" style="display:none" value="/r 4df-2+?{Bonus|0} [TERRIBLE]"></button>
+                        <button type="roll" name="roll_mediocre" title="%{mediocre}" value="&{template:mediocre} {{roll=[[4df+?{Bonus|0}]]}}">----</button>
+                        <button type="roll" name="roll_poor" style="display:none" value="&{template:poor} {{roll=[[4df-1+?{Bonus|0}]]}}"></button>
+                        <button type="roll" name="roll_terrible" style="display:none" value="&{template:terrible}} {{roll=[[4df-2+?{Bonus|0}]]}}"></button>
                     </div>
                 </div>
             </div>
@@ -858,4 +906,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file