add rudimentary responsive design

style.css

@@ -62,6 +62,7 @@ div, p, a, li, img{
   -moz-transition:all 1s;
   -o-transition:all 1s;
   -webkit-transition:all 1s;
+  hyphens: auto;
 }
 
 #container{
@@ -82,7 +83,7 @@ div, p, a, li, img{
 
 #header-content {
   margin: auto;
-    width: 620px;
+  max-width: 620px;
 }
 
 body{
@@ -90,7 +91,7 @@ body{
   font-family:'Anaheim', sans-serif;
   font-size:14px;
   line-height:1.15;
-  min-width:620px;
+  /*min-width:620px;*/
   word-wrap:break-word;
 }
 
@@ -284,12 +285,11 @@ a:visited{
 }
 
 .featured-box-big{
-  width:620px;
+  max-width:620px;
   margin:0 15px 10px; 
   display:inline-block; 
   text-align:justify; 
   vertical-align:top;
-  background:#DDDDDD;
   background:none repeat scroll 0 0 rgba(255, 255, 255, 0.35);
   border-left:8px solid #ccc;
   margin-bottom:15px;
@@ -329,10 +329,13 @@ a:visited{
   margin:0;
 }
 
-#featured-boxs img.box-image{
+#featured-boxs img.box-image {
-  border:3px solid #EEEEEE;
+  border: 3px solid #eeeeee;
-  width:350px;
+  display: block;
-  height:70px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 350px;
+  width: 98%;
 }
 
 #featured-boxs img.box-image:hover{
@@ -399,3 +402,28 @@ blockquote p, q p {
   display:inline;
 }
 
+@media only screen and (max-device-width: 400px) {
+  .featured-box {
+    max-width: 90%;
+  }
+
+}
+
+@media only screen and (max-device-width: 350px) {
+  .info {
+    display: flex;
+    right: 0;
+    top:50px;
+    background: #333;
+    padding: 5px;
+  }
+  
+  .info p {
+    margin-left: 15px;
+    margin-bottom: 0px;
+  }
+
+  #simplicity-main-menu li {
+    margin: 0;
+  }
+}