From b6e7b9c023572b3e82e6d9b0437415986674a23d Mon Sep 17 00:00:00 2001
From: Ove Klykken <klykken@gmail.com>
Date: Fri, 20 Jun 2014 12:48:54 -0400
Subject: [PATCH] misc stuff for the top right area in different widths

---
 assets/spyglass.png     | Bin 0 -> 438 bytes
 css/foundation.css      |   8 +++--
 styles.css              |  63 +++++++++++++++++++++++++++++++++++-----
 templates/template.html |  19 +++++++-----
 4 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 assets/spyglass.png

diff --git a/assets/spyglass.png b/assets/spyglass.png
new file mode 100644
index 0000000000000000000000000000000000000000..59c4c4d5919eba98c0ce06da22ebbe6846b868c0
GIT binary patch
literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq000pH000mO0ssI2e^Ubp0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzSV=@dRCwB)lgWyMKoExQj<}3u(U=*6
zU=oN2-~VB9(3>FcBE}_Tn}6t`X%Z$3=~Gu(Use6pB^ifClBBlnin1Pt)9rSXo(`o{
z*HwFIPNxP;0w&GMJg=mGoYl(u`drGWzyU>39LHHK7Dzk{Lz<>#S&9rIKXgq-OC0ch
zpAeGg`T2aF&*$6iR#nwFjztXdGBhv)6#yI#htuiDgCef$uGj0Ts>X5T4B{yljh2d{
zU;sO;!fZAZ>mZ(r!?|28;^*u2dcWT%lgZ;4`K|AJltO#l14%I9|C33Q#4rq|8#OJ<
z!W~MQrg>mweyi&`iXuz`(aZxt)3nWIgLI-!Sxk^+8Kwl$(17<j9*?`-&bDpSG=m`M
zx{fQSB8D*l!xI5u4P#J9;dvf9{{^r}FO~(>!Z2jme!qtY@f4f)ddJ$f1%|nUhl%)i
gc9gvFFMJCy0G+whq3zQK-v9sr07*qoM6N<$g8bdVUjP6A

literal 0
HcmV?d00001

diff --git a/css/foundation.css b/css/foundation.css
index 452db98..e4b4428 100644
--- 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
--- 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
--- 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>
-- 
2.17.1