media-queries.diff

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index ab712a2..ab86687 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -59,6 +59,10 @@ $(function() {
       hideLightbox();
   });
 
+  $("#lightbox-alternate-close").click(function() {
+    hideLightbox();
+  });
+
   $(document).click(function(event) {
     if ($("#slide-down").css("display") != "none") {
       if (event.pageY > ($("#slide-down").position().top + $("#slide-down").outerHeight()))
diff --git a/app/assets/javascripts/twitter.js b/app/assets/javascripts/twitter.js
index 8f29296..71f3b72 100644
--- a/app/assets/javascripts/twitter.js
+++ b/app/assets/javascripts/twitter.js
@@ -33,6 +33,6 @@ $(function() {
   if ($("#twitter-feed").length == 1) {
     var count = calculate_tweet_quantity();
     $("<script src='http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mmrambotics&count=" + count + "&callback=twitter_callback'></script>").appendTo("body");
-    $("#twitter-feed").show();
+    $("#twitter-feed").addClass("visible");
   }
 });
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index ad4613f..45e2997 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -108,7 +108,31 @@ div#container {
           word-spacing: 6px;
         }
       }
+    }
+
+    @media (max-width: 900px) {
+      width: 100%;
+
+      div#content {
+        width: auto;
+        float: none;
+        margin-left: 150px;
+        div#header {
+          text-align: left;
+          margin-left: 15px;
+        }
+      }
 
+      div#sidebar {
+        width: 150px;
+        padding-left: 0px;
+        padding-right: 0px;
+        #twitter-feed { display: none; }
+        #rotating-ads { display: none; }
+        #first-logo img { width: 135px; }
+        #main-menu > li { width: 150px; }
+        ul.sub-menu { left: 152px; }
+      }
     }
   }
 }
@@ -355,6 +379,15 @@ div#slide-down {
           border-top: 2px solid #696969;
         }
       }
+
+      @media (max-width: 900px) {
+        margin-left: 0px;
+        margin-right: 0px;
+        table-layout: auto;
+        td {
+          width: 30%;
+        }
+      }
     }
 
     span.highlight {
@@ -381,7 +414,7 @@ div#lightbox {
   display: none;
 
   div#lightbox-header {
-    width: 1045px;
+    width: 985px;
     text-align: right;
     cursor: pointer;
     z-index: 50;
@@ -391,7 +424,7 @@ div#lightbox {
   }
 
   div#lightbox-content {
-    width: 960px;
+    width: 900px;
     margin: -12px auto 50px auto;
     z-index: 48;
     background-color: #fff;
@@ -401,6 +434,38 @@ div#lightbox {
     @include box-shadow(4px 4px 16px rgba(82, 168, 236, 0.6));
     overflow: auto;
   }
+
+  div#lightbox-alternate-close {
+    display: none;
+    width: 100%;
+    height: 30px;
+    background-color: #fff;
+    color: #000;
+    cursor: pointer;
+    text-align: center;
+    &:hover {
+      @include box-shadow(inset 1px 1px 8px rgba(255, 0, 0, 0.4));
+    }
+
+    span {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+  @media (max-width: 980px) {
+    div#lightbox-header { display: none; }
+    div#lightbox-alternate-close {
+      display: table;
+    }
+
+    div#lightbox-content {
+      width: 100%;
+      margin: 0px;
+      padding: 15px 5px;
+      @include border-radius(0px);
+    }
+  }
 }
 
 .hidden {
@@ -450,6 +515,8 @@ input[type="submit"] {
   width: 670px;
   height: 400px;
   color: #000;
+
+  @media (max-width: 900px) { width: 95% }
 }
 
 #share-this-container {
@@ -469,6 +536,7 @@ input[type="submit"] {
 
 #twitter-feed {
   display: none;
+  &.visible { display: block; }
   background: image-url("twitter_bird.png") no-repeat top right;
   .tweet {
     margin: 10px;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 236ca24..3251808 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -20,6 +20,7 @@
 
   <div id="lightbox">
     <div id="lightbox-header"><%= image_tag "lightbox-close.png" %></div>
+    <div id="lightbox-alternate-close"><span>Close</span></div>
     <div id="lightbox-content"></div>
   </div>
 
diff --git a/app/views/menus/_menu.html.erb b/app/views/menus/_menu.html.erb
index 28dfc86..ffcf0e3 100644
--- a/app/views/menus/_menu.html.erb
+++ b/app/views/menus/_menu.html.erb
@@ -10,4 +10,4 @@
 
 <br />
 
-<%= link_to image_tag(image_path("frc_logo.png")), "http://usfirst.org", :target => "_blank", :class => "left-offset" %>
+<%= link_to image_tag(image_path("frc_logo.png")), "http://usfirst.org", :target => "_blank", :class => "left-offset", :id => "first-logo" %>