Add specific media queries for better layout presentation.

.gitignore

+/UNL_Search.esproj/
\ No newline at end of file

www/index.php

@@ -96,17 +96,13 @@ $page->maincontentarea = '
 <div id="searchform">
   <form action="./" method="get">
       <fieldset>
-      <div class="grid10 first">
           <label for="q">Search</label>
           <input class="search-query" type="text" name="q" id="search_q" title="search" />';
 if (!empty($local_results)) {
     $page->maincontentarea .= '<input type="hidden" name="u" value="'.htmlentities($_GET['u'], ENT_QUOTES).'" />';
 }
 $page->maincontentarea .= '
-      </div>
-      <div class="grid2">
-          <input class="search-button" title="search" type="submit" value="Search" />
-      </div>
+      <input class="search-button" title="search" type="submit" value="Search" />
       </fieldset>
   </form>
   <noscript>
@@ -116,12 +112,12 @@ $page->maincontentarea .= '
     </form>
   </noscript>
 </div>
-<div class="grid8 first">
+<div class="grid8 first" id="search_results">
     '.$local_results.'
     <h3 class="sec_header">UNL Web</h3>
     <div id="unl_results" class="google-results"></div>
 </div>
-<div class="grid4">
+<div class="grid4" id="directory_results">
     <h3 class="sec_header">UNL Directory</h3>
     <div id="ppl_results"></div>
     <a href="http://www1.unl.edu/wdn/wiki/About_Peoplefinder">About the UNL Directory</a>

www/searchCSS.css

@@ -8,14 +8,7 @@
 #searchform fieldset {
 	
 }
-#searchform .grid10 {
-	width: 90%;
-}
-#searchform .grid2 {
-	margin-left:0;
-	width: 10%;
-	text-align: right;
-}
+
 #searchform label {
 	display: none;
 }
@@ -28,8 +21,11 @@
     border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
-    width:auto;
+    width:100%;
     overflow: auto;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 #searchform input.search-query {
@@ -38,7 +34,7 @@
     font-size: 1.5em;
     height: 31px;
     padding: 2px 0 0 8px;
-    width: 99%;
+    width: 70%;
 }
 #searchform input.search-button {
     -moz-border-radius: 5px;
@@ -52,12 +48,30 @@
     cursor: pointer;
 }
 
-@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
-	#searchform .grid10,
-	#searchform .grid2 {
-        width: auto;
-        float: none;
+@media (min-width: 480px) and (max-width: 599px) {
+    #maincontent .grid8 {
+        width: 49%;
+        margin-left: 0; /* It's the first column */
     }
+    #maincontent #directory_results.grid4 {
+        width: 49%;
+        clear: none;
+        margin-left: 2%;
+    }
+}
+@media (min-width: 600px) {
+    #maincontent .grid8 {
+        width: 65.78%;
+        margin-left: 0; /* It's the first column */
+    }
+    #maincontent .grid4 {
+        width: 31.62%;
+        margin-left: 2.54%;
+        clear: none;
+    }
+}
+@media (min-width: 768px) {
+
 }
 
 /** Overridden directory styles **/