Make design responsive

app/assets/stylesheets/theme1/bootstrap_and_overrides.css.sass

@@ -5,3 +5,4 @@ body
       > a
         &:hover
           background-color: transparent
+@import bootstrap-responsive

app/assets/stylesheets/theme1/cartoon.css.sass

@@ -1,7 +1,7 @@
 ul#cartoon
   list-style: none
   li
-    float: left
-    div
-      width: 280px
-    .cartoon-image
+    display: inline-block
+    width: 280px
+    height: 382px
+    vertical-align: top

app/assets/stylesheets/theme1/home.css.sass

@@ -0,0 +1,10 @@
+.home-tablet-phone
+  right: 0
+  top: -200px
+  position: absolute
+  z-index: 120
+.introduction
+  padding-top: 20px
+.home-qr
+  float: left
+  margin: 0 20px 20px 0

app/assets/stylesheets/theme1/theme1.css.sass

@@ -1,8 +1,31 @@
+@import bourbon
+$cth-height: 48px
+=content-top-background
+  .left
+    position: absolute
+    bottom: 0
+    left: 0
+    background-image: image-url('theme1/floor-left.jpg')
+    background-position: right
+    height: $cth-height
+    width: 50%
+  .right
+    position: absolute
+    bottom: 0
+    right: 0
+    background-image: image-url('theme1/floor-right.jpg')
+    background-position: left
+    height: $cth-height
+    width: 50%
+  .container
+    position: relative
+    max-width: $content-max-width
 $green-original: #99CB23
 $green: #7BB459 //Heineken
 $font-family-content: Georgia, serif
 $font-family-navigation: Verdana,serif
 $font-family-headers: Verdana,serif //'Pacifico', serif
+$content-max-width: 962px
 body
   background-color: #333
   margin: 0
@@ -47,7 +70,6 @@ body
             width: 315px
             height: 140px
             float: left
-            z-index: 2
             &.light1
               background-image: image-url('theme1/light-1.jpg')
               margin-left: 15px
@@ -58,14 +80,12 @@ body
             &.light3
               background-image: image-url('theme1/light-3.jpg')
         .container
-          width: 960px
+          max-width: 960px
           padding-top: 40px
           position: relative
-          z-index: 4
           margin: 0 auto
           #header
-            margin-bottom: 20px
-            height: 14px
+            margin-bottom: 10px
             #logo
               a
                 margin: 20px
@@ -90,32 +110,30 @@ body
                   &.wsite-social-rss
                     background-position: -141px 0
     #nav-wrap
-      .container
-        clear: both
-        overflow: hidden
-        z-index: 100
-        position: relative
-        width: 900px
+      max-width: 960px
+      position: relative
+      .navbar-inner
         height: 48px
-        padding: 11px 25px 24px 25px
-        background-image: image-url('theme1/nav-bar.png')
-        background-repeat: no-repeat
-        background-position: 0 0
-        margin: 0 auto
+        background-image: image-url('theme1/nav-bar-left.png'), image-url('theme1/nav-bar-right.png'), image-url('theme1/nav-bar-middle.png')
+        background-repeat: no-repeat, no-repeat, repeat-x
+        background-position: left center, right center, center center
+        background-color: transparent
+        border: 0
+        .nav-collapse
+          &.in.collapse
+            background-color: rgba(0,0,0,0.4)
+            z-index: 400
         ul.nav
-          float: left
           margin: 0
           padding: 0
           list-style: none
           li 
             position: relative
-            float: left
             list-style: none
             a
               border: 0
               color: white
               display: block
-              float: left 
               font-family: $font-family-navigation
               text-decoration: none
               font-size: 18px
@@ -129,53 +147,75 @@ body
             &.active
               a
                 color: $green
-    #banner-wrap
-      z-index: 2
+                background-color: inherit
+    #home-splash
+      height: 318px - 10px
       position: relative
-      .left
-        position: absolute
-        bottom: 0
-        left: 0
-        background-image: image-url('theme1/floor-left.jpg')
-        background-position: right
-        height: 48px
-        width: 50%
-      .right
-        position: absolute
-        bottom: 0
-        right: 0
-        background-image: image-url('theme1/floor-right.jpg')
-        background-position: left
-        height: 48px
-        width: 50%
-      .container
-        background-image: image-url('theme1/floor-center.jpg')
-        background-position: center bottom
-        background-repeat: no-repeat
-        margin: 0 auto 
-        width: 982px
-        #banner
-          background-image: image-url('theme1/banner-bg.png')
-          background-position: 2px bottom
-          background-repeat: no-repeat
-          padding-bottom: 38px
+      #home-splash-content
+        z-index: 12
+        height: 318px - 61px - 10px
+        max-width: $content-max-width
+        #home-splash-content-inner
+          background-color: white
+          height: 260px
+          margin-left: 49px
+          margin-right: 53px
           position: relative
-          width: 982px
-          .wsite-header
-            border: 10px solid white
-            margin-left: 61px
-            width: 840px
+          overflow: hidden
+          #home-splash-content-inner-bar
+            position: absolute
             height: 260px
+            left: 10px
+            right: 10px
+            top: 10px
+            z-index: 20
             background-image: image-url("theme1/home_qwaiter_den_haag.png")
-          &.standard
-            background-image: image-url("theme1/no-banner-bg.png")
-            .wsite-header
-              display: none
+            background-repeat: no-repeat
+            background-position: center top
+      #home-splash-footer
+        +content-top-background
+        #home-splash-footer-inner
+          background-color: transparent
+          background-repeat: no-repeat, no-repeat
+          height: 61px
+          max-width: $content-max-width
+          background-position: left bottom, right bottom
+          background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
+          color: $green
+          border-width: 0
+          border-radius: 0
+          height: 61px
+          #home-splash-footer-inner-bar
+            margin-left: 49px
+            margin-right: 53px
+            background-color: white
+            background-repeat: repeat-x
+            background-position: center bottom
+            background-image: image-url('theme1/button-bar-middle.png')
+            //min-height: 61px
+            height: 61px
+    #content-header
+      position: relative
+      height: $cth-height
+      +content-top-background
+      .container
+        height: $cth-height
+        margin: 0 auto
+        background-image: image-url("theme1/no-banner-bg-left.png"), image-url('theme1/no-banner-bg-right.png')
+        background-repeat: no-repeat, no-repeat
+        background-position: left bottom, right bottom
+        .top-ribbon
+          background-image: image-url("theme1/no-banner-bg-middle.png")
+          height: $cth-height
+          background-repeat: repeat-x
+          background-position: bottom
+          margin: 0 69px 0 42px
     #main-wrap
       font-size: 14px
       font-family: $font-family-content
       line-height: 1.5
       color: #848585
+      position: relative
       h1
         font-size: 28px
         padding: 0.5em 0 0.2em 0
@@ -192,65 +232,50 @@ body
       background-image: image-url('theme1/wall-bg.jpg')
       background-position: center top
       overflow: visible
-      z-index: 2
       position: relative
       .container
-        background-image: image-url('theme1/content-bg.png')
-        background-position: 2px
-        min-height: 400px
         margin: 0 auto
-        width: 974px
-        .content-top
-          width: 960px
-          height: 30px
-          margin-left: 9px
-          background-image: image-url('theme1/content-top.jpg')
+        max-width: $content-max-width
         .main-inner
-          width: 894px
-          padding: 0 40px 30px 40px
+          +linear-gradient(#d6d6d6 0, white 70px)
+          position: relative
+          padding: 10px 40px 30px 40px
+          margin-left: 2px
+          margin-right: 2px
+          min-height: 400px
           h1.page-title
             margin: 0
             padding: 0
             margin-bottom: 12px
-          #wsite-content 
     #footer-wrap
       color: white
       background-image: image-url('theme1/footer-bg.jpg')
       background-position: center
-      text-align: right
       overflow: visible
+      position: relative
       .footer-shadow
-        height: 72px
-        width: 100%
-        background-image: image-url('theme1/footer-top-shadow.png')
-        background-repeat: repeat-x
-        position: relative
-        z-index: 4
+        height: 1px
+        +box-shadow(0px 4px 10px #000)
       .container
-        background-color: #420F03
-        width: 838px
-        padding: 72px 30px 20px 30px 
+        max-width: 838px
+        .footer-content
+          background-color: #420F03
+          text-align: right
+          padding: 72px 30px 20px 30px 
+          overflow: visible
+          margin: 0 auto
+          a
+            margin-left: 20px
+      .footer-bottom
+        background-image: image-url('theme1/footer-bottom.png')
+        position: relative
+        height: 35px
+        padding-left: 30px 
+        padding-right: 30px 
+        max-width: 838px
         position: relative
-        top: -72px
-        z-index: 3
         overflow: visible
         margin: 0 auto
-        .footer-top
-          width: 974px
-          height: 4px
-          position: relative
-          top: -72px
-          left: -60px
-          overflow: visible
-          background-image: image-url('theme1/footer-top.png')
-        .bottom
-          background-image: image-url('theme1/footer-bottom.png')
-          width: 898px
-          height: 35px
-          position: relative
-          bottom: -35px
-          left: -30px
-          overflow: visible
   a
     color: $green
     text-decoration: none