From 1e82cd274502d6c25779b071ba871fe3bcd8c190 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <gamedev@alamantus.com>
Date: Wed, 6 Jul 2016 12:44:02 -0600
Subject: [PATCH] Got things looking nice on mobile!

---
 css/lexiconga.css |  3 +--
 css/mobile.css    | 26 ++++++++++++++++++--------
 css/styles.css    | 28 +++++++++++++++++-----------
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/css/lexiconga.css b/css/lexiconga.css
index 59ea3fb..679d8f4 100644
--- a/css/lexiconga.css
+++ b/css/lexiconga.css
@@ -90,9 +90,8 @@ input, textarea, select, option {
     background: #c0c088;
 }
 
-#dictionaryContent {
+#dictionaryColumn {
 	background: #bd7251;
-	padding: 15px;
 	border: none;
 	-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
 	-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
diff --git a/css/mobile.css b/css/mobile.css
index 0362a34..faad8ea 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -21,6 +21,7 @@ and (max-device-width : 910px) {
 
     #leftColumn {
         width: 100%;
+        margin: 0;
     }
 
     #wordEntryForm {
@@ -28,9 +29,6 @@ and (max-device-width : 910px) {
         width: 100%;
         max-width: 450px;
         margin: 10px auto;
-        -webkit-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
-        -moz-box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
-        box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.75) !important;
     }
 
     #wordEntryForm label {
@@ -66,18 +64,30 @@ and (max-device-width : 910px) {
         margin: 0px auto;
     }
     
-    #dictionaryContent {
+    #dictionaryColumn {
         width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    #dictionaryContent {
         margin: 0 auto;
         padding: 15px;
     }
 
-    #dictionaryContent {
-        padding: 15px;
+    #dictionaryDescription {
+        margin: 0 auto;
     }
 
-    #dictionaryDescription {
-        margin: 0;
+    #searchFilterArea {
+        width: 90%;
+        min-width: 200px;
+        padding: 10px 10px 3px;
+        margin: 0 auto;
+    }
+
+    entry {
+        margin: 0 auto 5px;
     }
 
     #formLockButton {
diff --git a/css/styles.css b/css/styles.css
index 28660ad..0da4433 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,3 +1,9 @@
+* {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
 html {
     width: 100%;
 }
@@ -72,6 +78,8 @@ td:last-child, th:last-child {
 
 #leftColumn {
     float: left;
+    width: 30%;
+    margin: 15px 0 15px 15px;
 }
 
 form {
@@ -79,11 +87,8 @@ form {
 }
 
 #wordEntryForm {
-    width: 30%;
     max-width: 400px;
     min-width: 260px;
-    margin: 15px 0 15px 15px;
-    border: outset 3px;
 }
 
 .wbr:after {
@@ -122,8 +127,8 @@ input[type=checkbox] {
 }
 
 .longDefinition {
-    width: 80%;
-    min-width: 260px;
+    width: 100%;
+    min-width: 230px;
     height: 150px;
 }
 
@@ -175,16 +180,18 @@ input[type=checkbox] {
     box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
 }
 
-#dictionaryContainer {
+#dictionaryColumn {
+    width: 60%;
     margin: 15px 0 36px 15px;    /* bottom margin must clear footer */
     padding: 0;
     float: left;
 }
 
 #dictionaryContent {
-    width: 60%;
+    width: 100%;
     min-width: 260px;
     max-width: 800px;
+    padding: 15px;
 }
 
 #dictionaryName {
@@ -253,7 +260,6 @@ entry {
     width: 90%;
     min-width: 200px;
     padding: 10px 10px 3px;
-    border: outset 3px;
     margin-bottom: 5px;
 }
 
@@ -372,10 +378,10 @@ searchTerm {
 #settingsOptions, #infoPage, #loadAfterDeletePage,
 #accountSettingsPage, #fullScreenTextboxPage {
     position: fixed;
-    top: 6%;
+    top: 5%;
     left: 6%;
     right: 6%;
-    bottom: 6%;
+    bottom: 10%;
     min-width: 260px;
     min-height: 260px;
     padding: 5px 5% 5%;
@@ -434,7 +440,7 @@ searchTerm {
     clear: both;
 }
 #settingsSaveButtons {
-    position: fixed;
+    position: absolute;
     right: 10%;
     bottom: 8%;
     font-size: 14px;