Add responsive CSS

styles/all.css

@@ -263,7 +263,7 @@ select{min-width:30%;}
 .site-navigation{background:#EEE;-webkit-box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;-moz-box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;padding-top:20px !important;padding-right:20px !important;padding-bottom:20px !important;padding-left:20px !important;position:fixed;top:0;bottom:0;overflow:auto;width:240px;}
 .build-date{margin-bottom:20px !important;color:#AAA;font-family:Helvetica,Arial,sans-serif;font-size:11px;}
 .site-navigation ul{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;list-style:none;margin:0;padding:0;font-size:16px;}
-.site-navigation>ul>li{margin-bottom:20px !important;}
+.site-navigation>ul>li{margin-bottom:10px;}
 .site-navigation a{text-decoration:underline;}.site-navigation a:hover{text-decoration:none;}
 .site-navigation ul ul{margin-left:20px !important;padding-top:10px !important;font-size:12px;}.site-navigation ul ul a{text-decoration:none;}
 .site-content{padding:20px 40px 40px 320px;}.site-content h1{clear:both;}
@@ -271,3 +271,4 @@ select{min-width:30%;}
 .site-footer{clear:both;padding-top:40px !important;font-size:13px;text-align:center;}
 .site-footer img{margin-left:2px;position:relative;top:-2px;vertical-align:middle;}
 .site-footer ul{list-style:none;margin-right:0px !important;margin-left:0px !important;padding-right:0px !important;padding-left:0px !important;}
+@media only screen and (max-width:1024px){.build-date{text-align:center;} .site-header{height:220px;position:absolute;top:20px;left:0;width:100%;} .site-navigation{margin-top:240px;padding:20px;position:relative;width:auto;}.site-navigation ul{border:1px solid #999;border-bottom:none;} .site-navigation li{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;} .site-navigation a{background:#CCC;display:block;border-bottom:1px solid #999;padding:10px;text-decoration:none;} .site-navigation ul ul{border:none;margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;} .site-navigation ul ul a{background:transparent;} .site-content{padding:20px;} .top{display:inline-block;float:none;}}

styles/all.less

@@ -15,3 +15,55 @@
 @import "site/site-navigation.less";
 @import "site/site-content.less";
 @import "site/site-footer.less";
+
+/* Tablets and Smartphones */
+
+@media only screen and (max-width : 1024px) {
+    .build-date{
+        text-align: center;
+    }
+    .site-header{
+        height: 220px;
+        position: absolute;
+        top: 20px;
+        left: 0;
+        width: 100%;
+    }
+    .site-navigation{
+        margin-top: 240px;
+        padding: 20px;
+        position: relative;
+        width: auto;
+
+        ul{
+            border: 1px solid #999;
+            border-bottom: none;
+        }
+        li{
+            .man;
+            .pan;
+        }
+        a{
+            background: #CCC;
+            display: block;
+            border-bottom: 1px solid #999;
+            padding: 10px;
+            text-decoration: none;
+        }
+        ul ul{
+            border: none;
+            .man;
+            .pan;
+        }
+        ul ul a{
+            background: transparent;
+        }
+    }
+    .site-content{
+        padding: 20px;
+    }
+    .top{
+        display: inline-block;
+        float: none;
+    }
+}

styles/site/site-navigation.less

@@ -21,7 +21,7 @@
     font-size: 16px;
 }
 .site-navigation > ul > li{
-    .mbs;
+    margin-bottom: 10px;
 }
 .site-navigation a{
     text-decoration: underline;