Minor style changes - makes it usable in uzbl

1 files changed, 61 insertions, 56 deletions

diff --git a/design/style.css b/design/style.css
index 19cacc1..3aaff45 100644
--- a/design/style.css
+++ b/design/style.css
@@ -1,3 +1,6 @@
+
+/* STUFF FOR MOBILE VERSION - MUST BE OVERWRITTEN IN SECTON FOR LARGE SCREENS */
+
 body {
   background: #FBFBFB;
   padding: 0px;
@@ -5,26 +8,6 @@ body {
   width: 400px;
 }
 
-@media (min-device-width: 400px) and (min-width: 400px) {
-	body {
-	  	width: 100%;
-	}
-}
-
-a {
-  color: #007;
-  text-decoration: none;
-}
-
-h1 {
-  clear: both;
-  margin: 0px;
-  padding: 0px;
-  font-size: 1.2em;
-  text-align: center;
-  text-transform: uppercase;
-}
-
 .menu {
   padding: 4px;
   margin-bottom: 8px;
@@ -32,42 +15,48 @@ h1 {
   border-bottom: 1px solid #F0F0F0;
 }
 
-.menu .right {
-	float: right;
+.contents-left, .contents-right {
+	padding: 2px;
 }
 
-.menu .right a {
-	text-align: right;
-}
-
-.menu a {
-	display: inline-block;
-	padding: 8px;
-}
+/* SUTFF FOR LARGE SCREENS */
 
 @media (min-device-width: 400px) and (min-width: 400px) {
+	body {
+	  	width: 100%;
+	}
+
+
 	.menu {
-		padding-left: 20px;
-		padding-right: 20px;
+		padding-left: 10px;
+		padding-right: 10px;
+		position: fixed;
+		top: 0px;
+		left: 0px;
+		right: 0px;
+	}
+
+	.menu .right {
+		float: right;
+	}
+
+	.menu .right a {
+		text-align: right;
 	}
 
 	.menu a {
+		display: inline-block;
 		padding: 4px;
 		padding-left: 25px;
 		padding-right: 25px;
 	}
-}
-
-.contents-left, .contents-right {
-	padding: 2px;
-}
 
-@media (min-device-width: 400px) and (min-width: 400px) {
+	
 	.contents-left {
-		position: absolute;
+		position: fixed;
 		top: 50px;
 		left: 0px;
-		bottom: 16px;
+		bottom: 0px;
 		width: 300px;
 		border-right: 1px solid #ddd;
 		overflow: auto;
@@ -75,26 +64,12 @@ h1 {
 	}
 
 	.contents-right {
-		position: absolute;
-		top: 50px;
-		left: 332px;
-		bottom: 16px;
-		right: 0px;
-		overflow: auto;
+		margin-top: 50px;
+		margin-left: 332px;
 		padding: 16px;
 	}
-}
 
-dt {
-	font-weight: bold;
-}
-
-iframe, textarea {
-	width: 98%;
-	min-height: 200px;
-}
 
-@media (min-device-width: 400px) and (min-width: 400px) {
 	label {
 		border-bottom: 1px dashed gray;
 	}
@@ -139,6 +114,36 @@ iframe, textarea {
 	}
 }
 
+/* GENERAL STUFF */
+
+
+
+a {
+  color: #007;
+  text-decoration: none;
+}
+
+h1 {
+  clear: both;
+  margin: 0px;
+  padding: 0px;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+
+
+dt {
+	font-weight: bold;
+}
+
+iframe, textarea {
+	width: 98%;
+	min-height: 200px;
+}
+
+
 .error {
   margin-top: 8px;
   margin-bottom: 8px;