1 files changed, 13 insertions, 8 deletions
diff --git a/dist/app.css b/dist/app.css
index 23ba99e..d8f02a0 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -1,5 +1,5 @@
 
-body { background: #f8f8f8; font-size: 14px }
+body { background: #fbfbfb; font-size: 14px; }
 div { float: left; padding: 10px;}
 form { display: inline-block; }
 a { color: #00f; }
@@ -12,18 +12,21 @@ a { color: #00f; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
 #uploaded-url { display: none; width: 400px; }
 #uploaded-url + br { display: none; }
-#header { clear: right; width:100%; padding: 0; font-size: 12px; }
-#shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; }
+#header { width:calc(100% - 10px); padding: 0; font-size: 12px; position: fixed; bottom:0; left: 0; padding: 5px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #888; z-index: 2;}
+.gallery { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; }
+.gallery::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
+.gallery::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }
 #shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; clear: right; }
 .shader { width: 100px; }
 .shader span { display: block }
-#help { float: right; }
 .dragging { cursor: -webkit-grabbing !important; }
 .ui-sortable-helper { cursor: -webkit-grabbing !important; }
-#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
-#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
-#instructions.dragging iframe { pointer-events: none; }
-#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+#commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); }
+#tutorial { top:40px;right:30px; width:290px;height:325px; display: block;}
+.iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+.iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+.iframe.dragging iframe { pointer-events: none; }
+.iframe .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 #frame-controls { display: none; }
 #frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
 #frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
@@ -38,3 +41,5 @@ a { color: #00f; }
 .status { font-size: 12px; }
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
+#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #243; }
+#corner { position: fixed; top: -5px; right: 0px; }