Added pure (aside from two images!) markup and CSS concerto screen

app/assets/stylesheets/application/index-manifest.scss

@@ -17,3 +17,4 @@
 @import "layout/topmenu";
 @import "layout/modalselector";
 @import "layout/alerts-badges";
+@import "layout/screenmodel";

app/assets/stylesheets/application/layout/screenmodel.scss.erb

@@ -0,0 +1,32 @@
+/*
+ * screenmodel.scss.erb
+ * ------------------------------------------------------------------------------------------- */
+
+
+.screen-model {
+  background: $black;
+  @include border-radius(3px);
+  border: solid 3px #6b7f77;
+  z-index: 1;
+  position: relative;
+  padding: 25px 25px 0px 25px;
+
+  .inner {
+    @include box-shadow(inset 0px -2px 0px #7b7d80);
+    @include vertical-gradient(#292929, #383839);
+    border: solid 1px $grayDark;
+  }
+
+  .bevel {
+    background: image-url('miniscreen/bevel_bg.png') center center repeat-x;
+    text-align: center;
+    height: 55px;
+    margin-left: -25px;
+    margin-right: -25px;
+  }
+
+  .pos {
+    z-index: 99;
+    position: absolute;
+  }
+}

app/views/screens/_screen_body.html.erb

@@ -1,5 +1,16 @@
 <article>
-  <h1>See screen preview and modify subscriptions</h1>
+  <div class="screen-model" style="width: 800px; height: 505px;">
+    <div class="inner" style="width: 800px; height: 450px;">
+      <% @screen.template.positions.each do |pos| %>
+        <div class="pos" style="top: <%= pos.top %>%; left: <%= pos.left %>%; width: <%= pos.right * 100 %>%; height: <%= pos.bottom * 100 %>%; <%= pos.style %>">
+          <%= pos.id %>
+        </div>
+      <% end %>
+    </div>
+    <div class="bevel">
+      <%= image_tag("miniscreen/bevel_logo.png", :alt => "Concerto" ) %>
+    </div>
+  </div>
 </article>
 
 <aside>