misc stuff for the top right area in different widths

diff --git a/assets/spyglass.png b/assets/spyglass.png
new file mode 100644 (file)
index 0000000..59c4c4d
Binary files /dev/null and b/assets/spyglass.png differ

diff --git a/css/foundation.css b/css/foundation.css
index 452db98..e4b4428 100644 (file)
--- a/css/foundation.css
+++ b/css/foundation.css
@@ -270,6 +270,10 @@ select {
     position: relative;
     padding-left: 0.9375em;
     padding-right: 0.9375em;
+      
+    padding-left: 0em;
+    padding-right: 0em;
+      
     float: left; }
 
   .small-1 {
@@ -497,8 +501,8 @@ select {
   .columns {
     position: relative;
     padding-left: 0.9375em;
-    padding-right: 0.9375em;
-    float: left; }
+    padding-right: 0.9375em;      
+      float: left; }
 
   .medium-1 {
     width: 8.33333%; }

diff --git a/styles.css b/styles.css
index b4c63a3..ddec649 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -51,20 +51,69 @@ body {
         display: none;
         }
     }
-.vcard {
+/* Top Right */
+#topright {
     color: white;
     border: 0;
     float: right;
+    margin: 16px 0 0 0;
+    width: 220px;
     }
-.vcard a {
+#topright  a {
     color: white;
-    border-left: 1px solid white;
-    padding-left: 10px;
     margin-left: 5px;
+    text-decoration: underline;
+    }
+#topright span {
+    margin-left: 5px;
+    }
+#search {
+    position: relative;
+    height: 21px;
+    width: 193px;
+    border: 1px solid #aaa;
+    background: #f8f7f1;
+    border-radius: 5px;
+    margin: 10px 0 0 0;
+    }
+#search input[type=text] {
+    color: #5A91CE;
+    height: 21px;
+    background: transparent;
+    border: 0;
+    margin: 0;
+    width: 175px;  
     }
-.vcard input[type="text"] {
-    border-radius: 10px;
-    margin-top: 10px;
+#search ::-webkit-input-placeholder { font-size: 12px; }
+#search ::-moz-placeholder { font-size: 12px; } /* firefox 19+ */
+#search :-ms-input-placeholder { font-size: 12px; } /* ie */
+#search input:-moz-placeholder { font-size: 12px; }
+#search input[type=submit] {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    position: absolute;
+height: 16px;
+width: 17px;
+background: url(assets/spyglass.png) no-repeat scroll transparent;
+text-indent: -9999px;
+border: 0;
+cursor: pointer;
+    }
+@media only screen and (max-width: 40.063em) {
+    #topright {
+        width: 100%;
+        }
+    #search  {
+        margin-top: 0;
+        width: 140px;
+        }
+    #search input[type=text] {
+        125px;
+        }
+    #topright   {
+        font-size: 12px;
+        }
     }
 /* small logo */
 #logoSmall {

diff --git a/templates/template.html b/templates/template.html
index ac08d11..61e8c43 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -28,7 +28,7 @@ $(function() {
                 <section class="left-small">
                     <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
                 </section>
-                  <h1 id="logoSmall">Soo Locks Boat Tours</h1>  <!-- <img src="{baseURLDefined:h}assets/logoSmall.png" id="logoSmall" class="right"> -->
+                  <h1 id="logoSmall">Soo Locks Boat Tours</h1>
             </nav>
         </div>
         <aside class="left-off-canvas-menu">
@@ -52,18 +52,21 @@ $(function() {
         </aside>
         <section class="main-section">
             <div class="row">
-                <div class="small-1 medium-7 columns">
+                <div class=" medium-6 columns">
                     <h1 id="logo"><a href="{homePageUrl:h}"><img src="{mediaBaseURL:h}assets/logo.png" alt=""></a></h1>
                     <h2 id="saultstemarie" class="hide-text">Sault Ste. Marie, Michigan</h2>
                 </div>
-                <div class="small-11 medium-5 columns">
-                    <div class="vcard row">
-                        <div class="small-7 medium-12 columns">
-                            <span class="tel">(800) 432-6301</span>
+                <div class="small-12 medium-6 columns show-for-medium-up">
+                    <div class="row " id="topright">
+                        <div class="small-6 medium-12 columns left">
+                            <span class="tel">(800) 432-6301</span><span>|</span>
                             <a href="{baseURLDefined:h}contact-us-10/">Contact</a>
                         </div>
-                        <div class="small-5 medium-12 columns">
-                            <input type="text" placeholder="Search" />
+                        <div class="small-6 medium-12 columns right">
+                            <form action="#" id="search" class="right">
+                                <input type="text" placeholder="Search">
+                                <input type="submit">
+                            </form>
                         </div>
                     </div>
                 </div>