From a34d1ec4e7f5d3b8642ca8f1abf3d47ef10b7e7f Mon Sep 17 00:00:00 2001
From: Ismo Vuorinen <ivuorinen@me.com>
Date: Mon, 18 Nov 2013 17:11:04 +0200
Subject: [PATCH] Add one possible way to show donation links, with styling.

---
 app/index.html       |  9 +++++++++
 app/styles/main.less | 29 +++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/app/index.html b/app/index.html
index 755c2c2..9c5cfbd 100644
--- a/app/index.html
+++ b/app/index.html
@@ -104,6 +104,15 @@
                             ja kannustaa pohtimaan liikkumisvalintoja.
                         </p>
 
+                        <h3>Lahjoita ympäristötyöhön</h3>
+                        <p>
+                            <div class="donationtarget">
+                                <a href="#" target="_blank">
+                                    <img src="http://placehold.it/200x200&text=Logo" width="200" height="200" alt="Logo" style="float: left">
+                                    <span>Tee lahjoitus X:lle</span>
+                                </a>
+                            </div>
+                        </p>
 
                     </div>
                     <div class="tab-pane" id="operation"></div>
diff --git a/app/styles/main.less b/app/styles/main.less
index b395f11..3c7f977 100644
--- a/app/styles/main.less
+++ b/app/styles/main.less
@@ -29,6 +29,35 @@ body {
   }
 }
 
+.donationtarget {
+  display: block;
+  margin-bottom: 15px;
+  border: 1px solid #999;
+  overflow: auto;
+
+  a {
+    display: block;
+    padding: 15px 10px;
+
+    img {
+      float: right;
+      width: auto;
+      height: 90px;
+      margin: 0px 15px 0px 0px;
+    }
+
+    span {
+      display: block;
+      padding: 35px 0px;
+    }
+  }
+
+  :hover {
+    background: #efefef;
+  }
+
+}
+
 .no-js .js-enabled-content {
   opacity: 0.2;
 }