Footer with image

content/styles/_customstyles.scss

@@ -1,3 +1,5 @@
+$mainPadding: 15px;
+
 body {
   background-image: url(/img/bg.png);
   background-repeat: both;
@@ -7,11 +9,30 @@ a:hover, a:focus {
   text-decoration: none;
 }
 
+#footer {
+  #footerimage {
+    text-align: right;
+    border-bottom: 3px;
+    border-bottom-color: $cccsGreen;
+    border-bottom-style: solid;
+  }
+  footer {
+    margin-left: -$mainPadding;
+    margin-right: -$mainPadding;
+    padding-left: $mainPadding;
+    padding-right: $mainPadding;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    color: $grayLight;
+    background-color: $cccsBlue;
+  }
+}
+
 .container {
   background-color: $white;
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: $mainPadding;
+  padding-right: $mainPadding;
 }
 
 .navbar-static-top .navbar-inner {

layouts/default.html

@@ -51,6 +51,11 @@
     </div>
     <div class="container">
       <% render("#{@item[:kind]}_body") do %><%= yield %><% end %>
+    </div>
+    <div class="container" id="footer">
+      <div id="footerimage">
+        <img src="/img/silhouette.png">
+      </div>
       <footer>
         <a href="#">Impressum</a>
       </footer>