created mobile stylesheet for nat parks proj

2 files changed, 194 insertions, 54 deletions

diff --git a/media/sass/base.sass b/media/sass/base.sass
index 28b9df3..d1297af 100644
--- a/media/sass/base.sass
+++ b/media/sass/base.sass
@@ -273,54 +273,18 @@ footer[role="contentinfo"]
         border-top: 1px $brown dotted
         border-bottom: 1px $brown dotted
 
+.figure
+    margin: 0
+    position: relative
 
-#parks
-    margin-top: 36px
-    article
-        position: relative
-        display: block
-        margin-top: 36px
-        clear: both
-        margin-bottom: 72px
-    .figure
-        img
-            border: none
-            min-height: 5em
-    h1
-        display: block
-        color: #888888
-        padding: 10px 10px 10px 0px
-        background: $brown
-        +transparent_class
-        
-        color: white
-        margin: 0
-        width: 100%
-        text-align: left
-
-    .legend
-        display: block
-        padding: 10px 10px 10px 0px
-        background: $brown
-        +transparent_class
-        height: 45px
-        font-size: 10px
-        line-height: 16px
-        color: white
-        width: 100%
-    h2
-        line-height: 36px
-        font-size: 18px
-        margin: 0
-        padding: 0
-        float: left
-    .buttons
-        display: block
-        clear: left
-        padding-bottom: 1em
-
-
-
+.legend
+    background: $brown
+    color: #999999
+    display: block
+    position: absolute
+    bottom: 0
+    width: auto
+    +transparent_class
 
 
 /* ######### layout large  ################*/
diff --git a/media/sass/dark.sass b/media/sass/dark.sass
index 4315d18..0b67f2c 100644
--- a/media/sass/dark.sass
+++ b/media/sass/dark.sass
@@ -32,13 +32,6 @@ header[role="banner"]
   h2
     background: url('../img/text-dark.png') left bottom no-repeat !important
 
-.legend h2
-  float: left
-  width: 40%
-  background: #f3f
-.buttons
-  float: left
-  background: #fff
       
 #breadcrumbs
   color: white
@@ -92,3 +85,186 @@ h4 a.disqus-link-count
     border: none
   .legend
     padding: 8px
+
+
+#parks article
+  position: relative
+  display: block
+  margin: 0 0 2em 0
+  h1
+    display: block
+    background: $brown
+    +transparent_class
+    color: white
+    margin: 0 0 0 10px
+    width: 100%
+    text-align: left
+    
+  .figure
+    position: relative
+    border: none
+  .legend 
+    position: relative
+    width: 100%
+    padding: 0
+    margin: 0
+    h2
+      font: normal .875em Helvetica, Verdana, sans-serif
+      color: white
+      margin: 0 0 1.3em 1em
+
+  .buttons
+    display: block
+    padding: 0
+    background: $brown
+    font-size: 10px
+    line-height: 1em
+    color: white
+    text-align: center
+    text-transform: uppercase
+    margin: 0 auto
+    li
+      display: inline
+      margin: 0 .25em
+      font: normal 1em Helvetica, Verdana, sans-serif
+    a
+      font-weight: bold
+    
+
+  .map-container
+    width: 469px
+    height: 392px
+    position: absolute
+    right: 20px
+    bottom: 60px
+    z-index: 2000
+    margin: 0
+    padding: 0
+    background: url("../img/mapbg-dark.png") no-repeat top left
+  .map-wrapper
+    width: 400px
+    height: 328px
+    margin: 37px 0 0 44px
+
+  .meta
+    height: 0
+  .more-container
+    width: 405px
+    height: 260px
+    position: absolute
+    right: -30px
+    bottom: 40px
+    z-index: 2000
+    background: url("../img/parkbg.png") no-repeat top left
+    dl
+      margin-top: 45px
+      margin-left: 45px
+      dt,dd
+        font-size: 0.9em
+        line-height: 25px
+        margin: 4px 0
+        font-family: Helvetica, Verdana, sans-serif
+        color: white
+      dt
+        clear: left
+        float: left
+        width: 65px
+        //border-bottom: 1px solid #999
+        font-weight: bold
+        line-height: 25px
+        font-size: 0.7em
+        text-transform: uppercase
+      dd
+        float: left
+        width: 250px
+        overflow: hidden
+        //border-bottom: 1px solid #999
+        a:hover
+          color: $orange
+
+
+@media only screen and (min-width: 800px)
+  #parks article
+    h1
+      margin: 0
+      font-size: 2em
+      padding-left: .25em
+      position: absolute
+      top: 10px
+      left: 10px
+      line-height: 2em
+      z-index: 1000
+    .legend 
+      position: absolute  
+      padding: .25em 1em
+      height: 4em
+      h2
+        float: left
+        font-size: 1.2em
+        margin: 0
+        line-height: 2.6em
+    .buttons
+      +transparent_class
+      float: right
+      margin: 2em 2em 0 0
+      a
+        padding: .875em 1.75em .75em
+        background: #463215
+        color: #fff
+        -moz-border-radius: 25px
+        -webkit-border-radius: 25px
+        border-radius: 25px
+      a:hover
+        background: $orange
+        color: white   
+  
+    .map-container
+      width: 469px
+      height: 392px
+      position: absolute
+      right: 20px
+      bottom: 60px
+      z-index: 2000
+      margin: 0
+      padding: 0
+      background: url("../img/mapbg-dark.png") no-repeat top left
+    .map-wrapper
+      width: 400px
+      height: 328px
+      margin: 37px 0 0 44px
+  
+    .meta
+      height: 0
+    .more-container
+      width: 405px
+      height: 260px
+      position: absolute
+      right: -30px
+      bottom: 40px
+      z-index: 2000
+      background: url("../img/parkbg.png") no-repeat top left
+      dl
+        margin-top: 45px
+        margin-left: 45px
+        dt,dd
+          font-size: 0.9em
+          line-height: 25px
+          margin: 4px 0
+          font-family: Helvetica, Verdana, sans-serif
+          color: white
+        dt
+          clear: left
+          float: left
+          width: 65px
+          //border-bottom: 1px solid #999
+          font-weight: bold
+          line-height: 25px
+          font-size: 0.7em
+          text-transform: uppercase
+        dd
+          float: left
+          width: 250px
+          overflow: hidden
+          //border-bottom: 1px solid #999
+          a:hover
+            color: $orange