create avatar viewing window & add customizer-specific stylesheet

styles/app/avatar.styl

@@ -19,6 +19,7 @@
     color: black
 
 
+// basic avatar sprite group
 .avatar
     cursor: pointer
     position: relative
@@ -27,31 +28,19 @@
 
     .character-sprites
         position: absolute
-        top: -15px
 
     .lvl
         position: absolute
         bottom: 0px
         right: 10px
 
-.main-avatar
+// main and party avatars
+.main-avatar, .party-avatar
   margin-top: -12px
-  
+
+  .character-sprites
+    top: -15px
+
 
 .character-sprites span
-    position: absolute
-
-  table.customize td
-    padding: 10px
-    
-  table.customize td div
-    cursor: pointer
-    -webkit-transition: 0.5s ease-out
-    -moz-transition: 0.5s ease-out
-    transition: 0.5s ease-out
-
-  table.customize td div:active
-    background-color: rgb(255, 242, 204);
-    -webkit-transition: none
-    -moz-transition: none
-    transition: none
+    position: absolute

styles/app/customizer.styl

@@ -0,0 +1,29 @@
+// $customizations-modal layout
+
+.avatar-window
+  margin: 0
+  border: 1px solid darkgrey;
+  width: 107px;
+  float: right;
+
+  .char-name
+    margin-top: 6px;
+    border-top: 1px solid darkgrey;
+    text-align: center
+
+
+
+table.customize td
+  padding: 10px
+  
+table.customize td div
+  cursor: pointer
+  -webkit-transition: 0.5s ease-out
+  -moz-transition: 0.5s ease-out
+  transition: 0.5s ease-out
+
+table.customize td div:active
+  background-color: rgb(255, 242, 204);
+  -webkit-transition: none
+  -moz-transition: none
+  transition: none

styles/app/index.styl

@@ -5,6 +5,7 @@
 @import "./shop_sprites.styl";
 @import "./tasks.styl";
 @import "./avatar.styl";
+@import "./customizer.styl";
 @import "./items.styl";
 
 html,body,p,h1,ul,li,table,tr,th,td

views/app/index.html

@@ -138,13 +138,15 @@ do a find for the string after "→"
 
   <!-- $customizations-modal -->
   <app:myModal modalId="customizations-modal" header="Customize">
-      {#with _user.preferences}
+    {#with _user.preferences}
+    
+    <!-- user avatar preview -->
+    <figure class="avatar-window">
+        <app:avatar profile={_user} />
+        <figcaption class="char-name">{username(_user.auth)}</figcaption>
+    </figure>
 
-      <table>
-        <td>
-          <app:avatar profile={_user} />
-        </td>
-      </table>
+    
       <table class='customize'>
         <tr>Change Gender:</tr>
         <tr>