From 9d04096e58579922391d37bf6d5115dea709f991 Mon Sep 17 00:00:00 2001
From: samhed <samuel@cendio.se>
Date: Thu, 25 Jul 2013 14:05:52 +0200
Subject: [PATCH] Tweaked the media sizing rules to match the new buttons to
 the left.

---
 include/base.css | 73 +++++++++++++++++++-----------------------------
 1 file changed, 28 insertions(+), 45 deletions(-)

diff --git a/include/base.css b/include/base.css
index cc6575f3..d4f8501e 100644
--- a/include/base.css
+++ b/include/base.css
@@ -410,34 +410,41 @@ html {
   z-index: 0;
   position: absolute;
   width: 100%;
+  margin-left: 0px;
 }
 
 #noVNC_extra_keys {
   float: none;
   top: 0px;
 }
-
 #noVNC_extra_keys li {  
   display: inline;
 }
 
-#showExtraKeysButton {
-  display: none;
-}
-#toggleCtrlButton {
-  display: inline;
-}
-#toggleAltButton {
-  display: inline;
-}
-#sendTabButton {
-  display: inline;
-}
-#sendEscButton {
-  display: inline;
+#showExtraKeysButton { display: none; }
+#toggleCtrlButton { display: inline; }
+#toggleAltButton {  display: inline; }
+#sendTabButton { display: inline; }
+#sendEscButton { display: inline; }
+
+/* left-align the status text on lower resolutions */
+@media screen and (max-width: 800px){
+  #noVNC_status {
+    z-index: 1;
+    position: relative;
+    width: auto;
+    float: left;
+    margin-left: 4px;
+  }
 }
 
 @media screen and (max-width: 640px){
+  #noVNC_clipboard_text {
+    width: 410px;
+  }
+  #noVNC_logo {
+    font-size: 150px;
+  }
   .noVNC_status_button {
     font-size: 10px;
   }
@@ -447,12 +454,6 @@ html {
   .noVNC-buttons-right {
     padding-right: 0px;
   }
-  #noVNC_status {
-    z-index: 1;
-    position: relative;
-    width: auto;
-    float: left;
-  }
   #noVNC_extra_keys {
     float: right;
     top: -35px;
@@ -460,30 +461,12 @@ html {
   #noVNC_extra_keys li {
     display: block;
   }
-  #showExtraKeysButton {
-    display: inline;
-  }
-  #toggleCtrlButton {
-    display: none;
-  }
-  #toggleAltButton {
-    display: none;
-  }
-  #sendTabButton {
-    display: none;
-  }
-  #sendEscButton {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 481px) and (max-width: 640px) {
-  #noVNC_clipboard_text {
-    width: 410px;
-  }
-  #noVNC_logo {
-    font-size: 150px;
-  }
+  /* collapse the extra keys on lower resolutions */
+  #showExtraKeysButton { display: inline; }
+  #toggleCtrlButton { display: none; }
+  #toggleAltButton {  display: none; }
+  #sendTabButton { display: none; }
+  #sendEscButton { display: none; }
 }
 
 @media screen and (min-width: 321px) and (max-width: 480px) {