add viewport, put the info below the list

2 files changed, 32 insertions, 40 deletions

diff --git a/webAO/index.html b/webAO/index.html
index 9bd24b7..7f367da 100644
--- a/webAO/index.html
+++ b/webAO/index.html
@@ -11,6 +11,8 @@
     <meta http-equiv="X-Content-Security-Policy"    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' *.aceattorneyonline.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' ws:;">
     <meta http-equiv="X-WebKit-CSP"                 content="default-src 'self' 'unsafe-inline' 'unsafe-eval' *.aceattorneyonline.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' ws:;">
 
+    <meta name="viewport" content="width=700, initial-scale=1">
+
     <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Oswald%7CRoboto+Condensed" rel="stylesheet">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
@@ -53,25 +55,24 @@
             </div>
         </div>
     </nav>
-    <div id="header">
-        <p id="serverinfo">Masterserver version - ...</p>
-        <p id="clientinfo">Client version - ...</p>
-        <br>
-        <textarea id="masterchat" readonly></textarea>
-    </div>
-    <div id="content">
-        <div id="serverdescription_box">
-
-            <p id="serverdescription_content">
-
-            </p>
-        </div>
+    <div id="serverlist_container">
+        <h2>Server List</h2>
         <ul class="serverlist" id="masterlist">
             <li id="server-1" class="unavailable" onmouseover="setServ(-1)"><p>Localhost</p>
 				<a class="button" href="client.html?mode=watch&ip=127.0.0.1:50001">Watch</a>
                 <a class="button" href="client.html?mode=join&ip=127.0.0.1:50001">Join</a>
             </li>
         </ul>
+        <div id="info_container">
+            <p id="serverinfo">Masterserver version - ...</p>
+            <p id="clientinfo">Client version - ...</p>
+            <br>
+            <textarea id="masterchat" readonly></textarea>
+        </div>
+    </div>
+    <div id="serverdescription_container">
+        <p id="serverdescription_content">
+        </p>
     </div>
 </body>
 
diff --git a/webAO/styles/master.css b/webAO/styles/master.css
index 5cfc6f3..2e2f265 100644
--- a/webAO/styles/master.css
+++ b/webAO/styles/master.css
@@ -32,30 +32,26 @@
 	padding: 1px;
 }
 
-#header {
+#info_container {
 	display: block;
-	float: left;
-	margin-top: 75px;
-	position: absolute;
-	left: 0;
 	font-size: 0.8em;
 }
 
 #masterchat {
-	width: 260px;
+	width: 100%;
 	height: 260px;
 	font-size: inherit;
 	background-color: darkgrey;
 	color: black;
 }
 
-#serverdescription_box {
-	display: inline-block;
+#serverdescription_container {
+	display: block;
+	top: 100px;
 	position: fixed;
+	right: 0;
 	width: 185px;
 	height: 276px;
-	top: 35%;
-	right: 0px;
 	padding: 0px;
 	background: url("../images/desc.png") no-repeat;
 	border: 2px solid #888;
@@ -75,28 +71,29 @@
 	overflow-y: auto;
 }
 
+#serverlist_container {
+	margin-right: 200px;
+}
 
 .serverlist {
 	display: block;
 	margin: auto;
-	width: 500px;
 }
 
 .serverlist li {
 	position: relative;
-	left: -55px;
+	right: 0;
 	background-color: #FFF;
 	border: 2px solid #BBB;
 	border-radius: 5px;
 	padding: 0px;
 	padding-left: 10px;
 	display: block;
-	width: 500px;
+	min-width: 400px;
 	height: 50px;
 	margin: 10px;
 	margin-left: auto;
 	margin-right: auto;
-	float: left;
 	text-align: center;
 	cursor: default;
 }
@@ -113,6 +110,12 @@
 	float: right;
 }
 
+#serverlist_container h2 {
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .serverlist .button {
 	position: relative;
 	top: 0px;
@@ -140,20 +143,8 @@
 	box-shadow: 0 0 0 1px #EFAD21; 
 }
 
-#content h2 {
-	vertical-align: top;
-	display: inline-block;
-	margin-top: 0px;
-	margin-left: auto;
-	margin-right: auto;
-}
-#content p {
-	vertical-align: top;
-	display: inline-block;
-}
+#content {
 
-#content > p {
-	margin-right: 50px;
 }
 
 ul.navbar-nav.ml-auto {