diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 2f2f518fc..c74574315 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -1,26 +1,61 @@
-$outline-width: 5px;
+$iso-paper-ratio: 70.7%;
 
 .letter {
 
   font-family: Helvetica, Arial, sans-serif;
-  box-shadow:
-  1px 1px 0 0 $panel-colour,
-  2px 2px 0 0 rgba($panel-colour, 0.5),
-  -1px 1px 0 0 $panel-colour,
-  -2px 2px 0 0 rgba($panel-colour, 0.5);
-  outline: $outline-width solid rgba($text-colour, 0.1);
   padding: 0;
-  margin: $outline-width $outline-width $gutter;
-  height: 50%;
-  overflow: hidden;
+  margin: 0 0 $gutter 0;
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    z-index: 10;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 0;
+    padding: $iso-paper-ratio 0 0 0;
+    width: 100%;
+    background: $highlight-colour;
+    transform: skew(-1deg, 0deg) scale(1, 0.99);
+    transform-origin: left bottom;
+    box-shadow: inset 0 0 0 2px $panel-colour;
+
+  }
 
   a {
+
     display: block;
+    overflow: hidden;
+    width: 100%;
+    height: 0;
+    padding: $iso-paper-ratio 0 0 0;
+    position: relative;
+    z-index: 20;
+    transition: all 0.1s ease-out;
+
+    &:focus {
+
+      outline: none;
+      box-shadow: 0 3px 0 0 $yellow;
+
+      img {
+        box-shadow: inset 0 0 0 3px $yellow;
+      }
+
+    }
+
   }
 
   img {
     display: block;
-    max-width: 100%;
+    width: 100%;
+    background: $white;
+    box-shadow: inset 0 0 0 2px $panel-colour;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
 }