new map-focused redesign

css/site.css

@@ -1,38 +1,33 @@
-/* Page Specific CSS */
-
 body {
   font-family: "Lato", sans-serif;
   background: #fff;
   color: #333;
-  font-size: 18px;
+  font-size: 16px;
   margin: 0px;
-  padding: 20px 0px;
+  padding: 0px;
 }
 h1 {
-  font-size: 80px;
+  font-size: 40px;
   font-family: "Acme", sans-serif;
   font-weight: normal;
   margin: 0px;
 }
 h2 {
-  font-size: 40px;
+  font-size: 30px;
   font-family: "Acme", sans-serif;
   font-weight: normal;
   margin: 0px 0px;
 }
 h3 {
   font-family: "Acme", sans-serif;
-  font-size: 30px;
+  font-size: 20px;
   margin: 10px 0px;
 }
 h4 {
   font-family: "Lato", sans-serif;
-  font-size: 24px;
+  font-size: 14px;
 }
 
-img {
-  width: 100%;
-}
 p a,
 a {
   color: #333;
@@ -43,10 +38,6 @@ a {
 a:hover {
   color: #47ccfc;
 }
-small {
-  padding: 10px 0px;
-  font-size: 10px;
-}
 p {
   margin: 0px;
   padding: 0px;
@@ -56,22 +47,14 @@ li {
   line-height: 19px;
   font-size: 15px;
 }
-ol {
-  line-height: 24px;
-}
-.clearfix {
-  clear: both;
-}
 .hidden {
   display: none;
 }
 
 #map {
-  height: 500px;
-  width: 480px;
-  min-width: 300px;
+  height: 100vh;
+  width: 100%;
   background: #ffffff;
-  float: left;
 }
 #map a {
   border: none;
@@ -83,13 +66,19 @@ ol {
 }
 
 #wrapper {
-  margin: 0px auto;
-  padding: 40px;
-  max-width: 1000px;
+  max-width: 500px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  overflow: scroll;
 }
 
-.container {
-  margin: 24px 0px;
+.bubble {
+  background-color: white;
+  margin: 10px 0px;
+  padding: 10px;
+  border-radius: 3px;
 }
 
 ul.nav {
@@ -105,7 +94,7 @@ ul.nav li {
 }
 ul.nav li:not(:first-child) {
   border-left: 1px #333 solid;
-  padding-left: 10px;
+  padding-left: 5px;
 }
 ul.nav li h2 {
   font-family: "Lato";
@@ -126,15 +115,9 @@ ul.nav li a:hover {
   font-weight: 700;
 }
 
-#selected {
-  max-width: 500px;
-  width: 100%;
-  float: left;
-  padding: 5px 10px;
-}
 #selected .description {
+  padding-top: 7px;
   font-size: 16px;
-  padding: 4px 0px;
   line-height: 22px;
   text-align: justify;
 }
@@ -143,27 +126,17 @@ ul.nav li a:hover {
   margin: 15px 0px;
   padding: 0px;
 }
-
-#info {
-  max-width: 500px;
-  width: 100%;
-  float: left;
-  padding: 5px 10px;
-}
 .storeDetails {
   font-size: 15px;
   display: inline;
-  padding-right: 6px;
 }
 #info p {
   font-size: 15px;
-  padding: 4px;
   line-height: 22px;
   text-align: justify;
 }
 #info details {
   font-size: 15px;
-  padding: 4px;
   line-height: 22px;
   text-align: justify;
 }
@@ -174,40 +147,34 @@ ul.nav li a:hover {
 
 #Stores {
   margin: 0 auto;
-  width: 80%;
 }
 #Stores tr {
   cursor: pointer;
 }
 #Stores tr td {
-  padding: 4px 10px;
+  padding: 2px 0px;
 }
 #Stores tr:not(:last-child) td {
   border-bottom: 1px #ddd solid;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (max-width: 1120px) {
-  h1 {
-    font-size: 60px;
-  }
-  body {
-    margin: 0px;
-    padding: 5px;
-  }
   #wrapper {
-    max-width: 480px;
-    padding-top: 20px;
+    position: static;
+    padding: 10px;
+  }
+  .bubble {
+    margin: 0px;
+    padding: 0px;
+    border-radius: 0px;
+  }
+  #map {
+    height: 400px;
   }
   #Stores,
-  #map {
-    min-width: 224px;
-    width: 100%;
-  }
   #map,
   #info,
   #selected {
     width: 100%;
-    margin: 10px 0px;
-    padding: 0;
   }
 }