imagery updates to panels, responsive images

bmgdev · Feb 26, 2013 · a18b54a · a18b54a
1 parent 15a7584
commit a18b54a
Show file tree

Hide file tree

Showing 13 changed files with 675 additions and 602 deletions.
diff --git a/css/main-1.5.css b/css/main-1.5.css
@@ -1,3 +1,8 @@
+/** embedded font double rendering issue fix -- https://css-tricks.com/forums/discussion/10449/weird-mobile-safari-font-face-problem-font-doubled-and-offset-to-the-left-/p1 **/
+h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */
+    font-weight: normal;
+}
+
 /* ==========================================================================
    HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
    ========================================================================== */
@@ -24,7 +29,10 @@ body {
     background: #b3d4fc;
     text-shadow: none;
 }
-
+a {
+    color: #b1bf92;
+    text-decoration: none;
+}
 hr {
     display: block;
     height: 1px;
@@ -96,7 +104,7 @@ body {
 }
 #introtext {
     display: block;
-    padding: 30px 0 30px 0;
+    padding: 10px 0 10px 0;
     margin-bottom: 300px;
     background: black;
 
@@ -190,11 +198,11 @@ nav ul li a::-moz-focus-inner {border:0;}
    ============== */
 
 .main {
-    padding: 15% 0;
+    padding: 5% 0;
 }
 .main header {
     float: left;
-    width: 60%;
+    width: 80%;
 }
 
 /* ==========================================================================
@@ -294,7 +302,7 @@ section h2 {
 }
 .column p {
     font-size: 1em;
-    line-height: 140%;
+    line-height: 145%;
     padding: 0;
 }
 
@@ -329,6 +337,10 @@ section h2 {
         -webkit-animation:thedrop 1s 1;
     }
 
+    #introtext {
+        padding: 30px 0 30px 0;
+    }
+
     #introtext .head-sarah {
         font-size: 7em;
     }
@@ -363,7 +375,7 @@ section h2 {
     }
 
     nav a {
-        padding: 15px 2%;
+        padding: 15px 1%;
         margin-bottom: 0;
         display:inline-block;
         font-size: 60%;
@@ -390,8 +402,7 @@ section h2 {
     }
 
     section {
-        padding: 40px;
-
+        padding: 40px 40px 70px 40px;
     }
     section h1 {
         font-size: 3.1em;
@@ -422,16 +433,13 @@ section h2 {
 /* ====================
     WIDE: CSS3 Effects
    ==================== */
- 
+
     section h1 {
         font-size: 4.9em;
     }
     section h2 {
         font-size: 2.0em;
     }
-    .column p {
-        font-size: 1.4em;
-    }
 
 /* ============
     WIDE: Menu
@@ -465,9 +473,37 @@ section h2 {
     }
 
     nav a {
+        padding: 15px 2%;
         font-size: 90%;
     }
 }
+@media only screen and (min-width: 900px) {
+
+    section h1,
+    section h2 {
+        padding: 0 20px;
+    }
+    section h1 {
+        font-size: 5.9em;
+    }
+
+    .column.full {
+        clear: both;
+        float: none;
+        width: 100%;
+    }
+    .column {
+        float: left;
+        width: 50%;
+    }
+    .column p {
+        font-size: 1.4em;
+        line-height: 145%;
+        padding: 0 20px;
+    }  
+
+}
+
 
 @media only screen and (min-width: 1140px) {
 
@@ -476,6 +512,7 @@ section h2 {
    =============== */
 
     nav a {
+        padding: 15px 3%;
         font-size: 120%;
     }
 
@@ -507,25 +544,8 @@ section h2 {
         float: left;
         width: 100%;
     }
-    section h1,
-    section h2 {
-        padding: 0 20px;
-    }
-    section h1 {
-        font-size: 5.9em;
-    }
-    .column.full {
-        float: none;
-        width: 100%;
-    }
-    .column {
-        float: left;
-        width: 50%;
-    }
-    .column p {
-        line-height: 140%;
-        padding: 0 20px;
-    }    
+
+
 }
 
 /* ==========================================================================
@@ -759,3 +779,105 @@ section h2 {
         font-style: normal;
 }
 
+.responsive-image.proposal {
+    text-align: center;
+    margin: 60px auto 60px auto;
+}
+.responsive-image.proposal img {
+    border: 10px solid #090909;
+
+    -ms-border-radius: 8px;
+    -o-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+}
+
+img.theinn  {
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+div.bp h2 {
+    margin: 0;
+}
+div.bp .column p {
+    line-height: 180%;
+}
+
+#gmap {
+    text-align: center;
+    margin: 20px auto 20px auto;
+}
+
+#gmap iframe {
+    width: 93%;
+    height: 400px;
+
+    border: 10px solid #090909;
+
+    -ms-border-radius: 8px;
+    -o-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+}
+
+iframe, object, embed{max-width: 100%;}
+
+#gmap small a,
+#gmap small a:active,
+#gmap small a:visited {
+    color: #b1bf92;
+    text-decoration: none;
+    outline: none;
+}
+
+#gmap small a:hover {
+    color: #b1bf92;
+    text-decoration: underline;
+    outline: none;
+}
+
+.hr-t {
+    margin: 80px auto 0 auto;
+    width: 97%;
+    border-top:#1e1e1e solid 1px;
+    opacity:0.4;
+    filter:alpha(opacity=40); /* For IE8 and earlier */
+}
+
+.hr-b {
+    margin: 0 auto 80px auto;
+    width: 97%;
+    border-bottom:#808080 solid 1px;
+    opacity:0.4;
+    filter:alpha(opacity=40); /* For IE8 and earlier */
+}
+a[href^=tel] {
+    color: white;
+    text-decoration: none;
+    outline: none;
+}
+a.email {
+    color: #b1bf92;
+}
+
+.thumb {
+
+    height: 80px;
+    width: 80px;
+    background-color: black;
+    margin-right: 10px;
+    margin-bottom: 0;
+    float: left;
+
+    border: 4px solid #090909;
+
+    -ms-border-radius: 2px;
+    -o-border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+}
+