diff --git a/print/resources/style.css b/print/resources/style.css
index 7d0339ecd..a083ff4f5 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -232,7 +232,6 @@ div {
     height: 30mm;
     width: 30mm;
     margin: 2.5mm;
-    border: 1px solid gray;
   }
 
   figure.brandlogo img {
@@ -268,7 +267,7 @@ div {
     display: inline-block;
   }
 
-  div.jobDetails {
+  div.job-details {
     display: flex;
       display: -webkit-flex;  /* old webkit */
       display: -ms-flexbox;   /* IE 10 */
@@ -278,46 +277,46 @@ div {
     font-size: 10pt;
   }
 
-  div.jobDetails > div {
+  div.job-details > div {
     flex-grow: 1;
   }
 
-  div.jobDetails .table {
+  div.job-details .table {
     display: table;
     width: 100%;
   }
 
-  div.jobDetails > div:last-child {
+  div.job-details > div:last-child {
     font-size: 12pt;
   }
 
-  div.jobDetails p {
+  div.job-details p {
     margin: 0;
     display: table-row;
   }
 
-  div.jobDetails p span {
+  div.job-details p span {
     display: table-cell;
   }
 
-  div.jobDetails p span:first-child {
+  div.job-details p span:first-child {
     font-weight: bold;
     padding-right: 1mm; 
   }
 
-  div.jobDetails p span:last-child {
+  div.job-details p span:last-child {
     text-align: left; 
   }
 
-  div.jobDetails > div:last-child span {
+  div.job-details > div:last-child span {
     text-align: right !important; 
   }
 
-  div.print-detail .jobDetails {
+  div.print-detail .job-details {
     font-size: 12pt;
   }
 
-  div.print-detail .jobDetails > div:first-child {
+  div.print-detail .job-details > div:first-child {
     text-align: left;
   }
 
@@ -373,7 +372,7 @@ div {
 
 /* Color Swatches */
 
-  .colorPalette {
+  .color-palette {
     width: 100%;
     height: 40mm;
     background: #fff;
@@ -388,12 +387,7 @@ div {
       flex-wrap: wrap;
   }
 
-  .colorPalette.detailed > div {
-    width: 50%;
-    height: 100%;
-  }
-
-  .colorSwatch {
+  .color-swatch {
     font-family: "Barlow", sans-serif;
 
     /* white text on dark colors doesn't print well unless it's bold */
@@ -409,14 +403,14 @@ div {
     flex-grow: 1;
   }
 
-  .swatchInfo {
+  .swatch-info {
       text-align: left;
       min-width: 20mm;
       position: relative;
       height: 100%;
   }
 
-  .swatchInfo .title {
+  .swatch-info .title {
     font-weight: 800;
   }
 
@@ -427,6 +421,32 @@ div {
     line-height: 30mm;
     text-align: center;
   }
+  
+  /* detailedview color swatch */
+  
+  .color-palette.detailed > div {
+    height: 100%;
+    position: relative;
+  }
+  
+  .color-palette.detailed .color-info {
+    position: absolute;
+    top: 2mm;
+    left: 45mm;
+  }
+  
+  .color-palette.detailed .color-info > div {
+    display: table;
+  }
+  
+  .color-palette.detailed .color-info p {
+    display: table-row;
+  }
+  
+  .color-palette.detailed .color-info span {
+    display: table-cell;
+    padding-right: 5mm;
+  }
 
 /* Footer */
 
@@ -470,131 +490,131 @@ div {
 /* reference : http://jsfiddle.net/jrulle/btg63ezy/3/ */
 
   /* one item */
-  .colorSwatch:first-child:nth-last-child(n+1),
-  .colorSwatch:first-child:nth-last-child(n+1) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+1),
+  .color-swatch:first-child:nth-last-child(n+1) ~ .color-swatch {
       font-size: 12pt;
       height: 100%;
   }
 
   /* two items */
-  .colorSwatch:first-child:nth-last-child(n+2),
-  .colorSwatch:first-child:nth-last-child(n+2) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+2),
+  .color-swatch:first-child:nth-last-child(n+2) ~ .color-swatch {
       width: calc(100% / 2);
   }
 
   /* three items */
-  .colorSwatch:first-child:nth-last-child(n+3),
-  .colorSwatch:first-child:nth-last-child(n+3) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+3),
+  .color-swatch:first-child:nth-last-child(n+3) ~ .color-swatch {
     font-size: 12pt;
     width: calc(100% / 3);
   }
 
   /* four items */
-  .colorSwatch:first-child:nth-last-child(n+4),
-  .colorSwatch:first-child:nth-last-child(n+4) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+4),
+  .color-swatch:first-child:nth-last-child(n+4) ~ .color-swatch {
       font-size: 10pt;
       width: calc(100% / 4);
   }
 
   /* five items */
-  .colorSwatch:first-child:nth-last-child(n+5),
-  .colorSwatch:first-child:nth-last-child(n+5) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+5),
+  .color-swatch:first-child:nth-last-child(n+5) ~ .color-swatch {
     font-size: 9pt;  
     width: calc(100% / 5);
   }
 
   /* six items */
-  .colorSwatch:first-child:nth-last-child(n+6),
-  .colorSwatch:first-child:nth-last-child(n+6) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+6),
+  .color-swatch:first-child:nth-last-child(n+6) ~ .color-swatch {
     font-size: 8pt;
     width: calc(100% / 6);
   }
 
   /* seven items */
-  .colorSwatch:first-child:nth-last-child(n+7),
-  .colorSwatch:first-child:nth-last-child(n+7) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+7),
+  .color-swatch:first-child:nth-last-child(n+7) ~ .color-swatch {
       width: calc(100% / 4);
       height: calc(100% / 2);
   }
 
   /* nine items */
-  .colorSwatch:first-child:nth-last-child(n+9),
-  .colorSwatch:first-child:nth-last-child(n+9) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+9),
+  .color-swatch:first-child:nth-last-child(n+9) ~ .color-swatch {
       width: calc(100% / 5);
   }
 
   /* eleven items */
-  .colorSwatch:first-child:nth-last-child(n+11),
-  .colorSwatch:first-child:nth-last-child(n+11) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+11),
+  .color-swatch:first-child:nth-last-child(n+11) ~ .color-swatch {
       width: calc(100% / 6);
   }
 
   /* thirteen items */
-  .colorSwatch:first-child:nth-last-child(n+13),
-  .colorSwatch:first-child:nth-last-child(n+13) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+13),
+  .color-swatch:first-child:nth-last-child(n+13) ~ .color-swatch {
       width: calc(100% / 5);
       height: calc(100% / 3);
   }
 
   /*  fourteen items */
-  .colorSwatch:first-child:nth-last-child(n+14),
-  .colorSwatch:first-child:nth-last-child(n+14) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+14),
+  .color-swatch:first-child:nth-last-child(n+14) ~ .color-swatch {
     width: calc(100% / 5); 
   }
 
   /*  sixteen items */
-  .colorSwatch:first-child:nth-last-child(n+16),
-  .colorSwatch:first-child:nth-last-child(n+16) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+16),
+  .color-swatch:first-child:nth-last-child(n+16) ~ .color-swatch {
     width: calc(100% / 6);
   }
 
   /* nineteen items */
-  .colorSwatch:first-child:nth-last-child(n+19),
-  .colorSwatch:first-child:nth-last-child(n+19) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+19),
+  .color-swatch:first-child:nth-last-child(n+19) ~ .color-swatch {
     height: calc(100% / 4);
     width: calc(100% / 5);
   }
-    .colorSwatch:first-child:nth-last-child(n+19) .swatchInfo,
-    .colorSwatch:first-child:nth-last-child(n+19) ~ .colorSwatch .swatchInfo {
+    .color-swatch:first-child:nth-last-child(n+19) .swatch-info,
+    .color-swatch:first-child:nth-last-child(n+19) ~ .color-swatch .swatch-info {
       margin-left: -1mm;
       margin-top: -1mm;
       height: calc(100% + 1mm);
     }
 
   /* twenty-one items */
-  .colorSwatch:first-child:nth-last-child(n+21),
-  .colorSwatch:first-child:nth-last-child(n+21) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+21),
+  .color-swatch:first-child:nth-last-child(n+21) ~ .color-swatch {
     width: calc(100% / 6);
   }
 
   /* twenty-five items */
-  .colorSwatch:first-child:nth-last-child(n+25),
-  .colorSwatch:first-child:nth-last-child(n+25) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+25),
+  .color-swatch:first-child:nth-last-child(n+25) ~ .color-swatch {
     width: calc(100% / 7);
     font-size: 6pt;
   }
 
   /* twenty-nine items */
-  .colorSwatch:first-child:nth-last-child(n+29),
-  .colorSwatch:first-child:nth-last-child(n+29) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+29),
+  .color-swatch:first-child:nth-last-child(n+29) ~ .color-swatch {
     width: calc(100% / 9);
   }
 
   /* thirty-seven items */
-  .colorSwatch:first-child:nth-last-child(n+37),
-  .colorSwatch:first-child:nth-last-child(n+37) ~ .colorSwatch {
+  .color-swatch:first-child:nth-last-child(n+37),
+  .color-swatch:first-child:nth-last-child(n+37) ~ .color-swatch {
     width: calc(100% / 10);
   }
 
   /* fourty items */
-    .colorSwatch:first-child:nth-last-child(n+40),
-    .colorSwatch:first-child:nth-last-child(n+40) ~ .colorSwatch {
+    .color-swatch:first-child:nth-last-child(n+40),
+    .color-swatch:first-child:nth-last-child(n+40) ~ .color-swatch {
       width: calc(100% / 12);
   }
     
   /* fourty-nine items */
-    .colorSwatch:first-child:nth-last-child(n+49),
-    .colorSwatch:first-child:nth-last-child(n+40) ~ .colorSwatch {
+    .color-swatch:first-child:nth-last-child(n+49),
+    .color-swatch:first-child:nth-last-child(n+40) ~ .color-swatch {
       height: calc(100% / 5);
       width: calc(100% / 12);
   }
diff --git a/print/templates/color_swatch.html b/print/templates/color_swatch.html
index 07acdf1db..d365dcbc7 100644
--- a/print/templates/color_swatch.html
+++ b/print/templates/color_swatch.html
@@ -1,24 +1,48 @@
-  <div class="colorSwatch">
-    <div class="swatchInfo">
-       <svg width="100%" height="100%" class="colorSwatchSVG" xmlns="http://www.w3.org/2000/svg">
+  
+  {% if view != 'detailedview' %}
+  <div class="color-swatch">
+    <div class="swatch-info">
+       <svg width="100%" height="100%" class="color-swatch-svg" xmlns="http://www.w3.org/2000/svg">
         <rect fill="rgb{{ color_block.color.rgb }}" width="100%" height="100%" />
-        <text fill="rgb{{ color_block.color.font_color }}" x="2mm" y="2mm">
-            <tspan dy="1.2em" x="10" class="colorName">{{ _('Color') }}: {{ color_block.color.thread_name }}</tspan>
+        <text fill="rgb{{ color_block.color.font_color }}">
+            <tspan dy="1.2em" x="2mm" y="2mm" class="color-name">{{ _('Color') }}: {{ color_block.color.thread_name }}</tspan>
             {# We don't want to see rgb and thread_used if we have more than 7 colorSwatches to show #}
-            {% if view == 'detailedview' or (view != 'detailedview' and color_blocks|length < 7) %}
-            <tspan dy="1.2em" x="10" class="colorRgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan>        
-            <tspan dy="1.2em" x="10" class="swatchThread">{{ _('thread used') }}: {{ color_block.color.thread_description }}</tspan>
+            {% if color_blocks|length < 7 %}
+            <tspan dy="1.2em" x="2mm" class="color-rgb">{{ _('rgb') }}: {{ color_block.color.rgb }}</tspan>        
+            <tspan dy="1.2em" x="2mm" class="swatch-thread">{{ _('thread used') }}: {{ color_block.color.thread_description }}</tspan>
             {% endif %}
             {# We don't want to see num_stitch if we have more than 49 colorSwatches to show #}
-            {% if view == 'detailedview' or (view != 'detailedview' and color_blocks|length < 49) %}
-            <tspan dy="1.2em" x="10" class="swatchStitches">{{ _('# stitches') }}: {{ color_block.num_stitches }}</tspan>
+            {% if color_blocks|length < 49 %}
+            <tspan dy="1.2em" x="2mm" class="swatch-stitches">{{ _('# stitches') }}: {{ color_block.num_stitches }}</tspan>
             {% endif %}
             {# We don't want to see stops and trims if we have more than 13 colorSwatches to show #}
-            {% if view == 'detailedview' or (view != 'detailedview' and color_blocks|length < 13) %}
-            <tspan dy="1.2em" x="10" class="swatchStops">{{ _('# stops') }}: {{ color_block.num_stops }}</tspan>
-            <tspan dy="1.2em" x="10" class="swatchTrims">{{ _('# trims') }}: {{ color_block.num_trims }}</tspan>
+            {% if color_blocks|length < 13 %}
+            <tspan dy="1.2em" x="2mm" class="swatch-stops">{{ _('# stops') }}: {{ color_block.num_stops }}</tspan>
+            <tspan dy="1.2em" x="2mm" class="swatch-trims">{{ _('# trims') }}: {{ color_block.num_trims }}</tspan>
             {% endif %}
           </text>
       </svg>
     </div>
-</div>
+  </div>
+  
+  {% else %}
+  
+  <div class="color-swatch">
+    <div class="swatch-info">
+       <svg width="100%" height="100%" class="colorSwatchSVG" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="rgb{{ color_block.color.rgb }}" width="40mm" height="100%" />
+       </svg>
+       <div class="color-info">
+        <div>    
+          <p><span class="color-name">{{ _('Color') }}:</span><span>{{ color_block.color.thread_name }}</span></p>
+          <p><span class="color-rgb">{{ _('rgb') }}:</span><span>{{ color_block.color.rgb }}</span></p>
+          <p><span class="swatch-thread">{{ _('thread used') }}:</span><span>{{ color_block.color.thread_description }}</span></p>
+          <p><span class="swatch-stitches">{{ _('# stitches') }}:</span><span>{{ color_block.num_stitches }}</span></p>
+          <p><span class="swatch-stops">{{ _('# stops') }}:</span><span>{{ color_block.num_stops }}</span></p>
+          <p><span class="swatch-trims">{{ _('# trims') }}:</span><span>{{ color_block.num_trims }}</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  {%endif %}
diff --git a/print/templates/footer.html b/print/templates/footer.html
index d6d57c058..6a7fee148 100644
--- a/print/templates/footer.html
+++ b/print/templates/footer.html
@@ -1,5 +1,5 @@
 <footer>
-    <p class="num_pages">{{ _('Page') }} {{ page_count[0] }}/{{ num_pages }} </p> {# TODO: count pages!!!! #}
+    <p class="num_pages">{{ _('Page') }} {{ page_count[0] }}/{{ num_pages }} </p>
     <p>Proudly generated with <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></p>
 </footer>
 
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index 644591091..d79190b6a 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -1,6 +1,6 @@
         <header>
             {% include 'headline.html' %}
-            <div class="jobDetails">
+            <div class="job-details">
                 <div>
                     <div class="table">
                       <p><span>{{ _('PO.NR') }}:</span><span>{{color_block.color.po_nr}}</span></p>
@@ -21,7 +21,7 @@
                 <figcaption>{{ _('Scale') }} {{ svg_scale }}</figcaption>
             </figure> 
             
-            <div class="colorPalette detailed">
+            <div class="color-palette detailed">
                 {% include 'color_swatch.html' %}
             </div>
         </main>
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index e09ab9a5d..b2fcd8034 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -1,6 +1,6 @@
         <header>
             {% include 'headline.html' %}
-            <div class="jobDetails">
+            <div class="job-details">
                 <div>
                     <div class="table">
                         <p><span>{{ _('Unique Colors') }}:</span><span>{{ job.num_colors }}</span></p>
@@ -30,7 +30,7 @@
                 <figcaption>{{ _('Scale') }} {{ svg_scale }}</figcaption>
             </figure> 
             
-            <div class="colorPalette">
+            <div class="color-palette">
                 {% for color_block in color_blocks %}
                     {% include 'color_swatch.html' %}
                 {% endfor %}