From 06fcc9c6cb81987aa0bede7eacc2a94649e13d67 Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Tue, 28 Jun 2011 17:12:22 +0200
Subject: [PATCH] Nothing special, progress

---
 content/html/en/index.md   |  11 ++-
 content/html/fr/index.md   |  11 ++-
 multi/index.md             |  11 ++-
 site/Scratch/en/index.html |   8 +-
 site/Scratch/fr/index.html |   8 +-
 site/css/buttons.css       |  32 ++++----
 site/css/main.css          | 155 ++++++++++++++++++++++---------------
 site/img/buttons/cross.png | Bin 0 -> 655 bytes
 site/img/buttons/key.png   | Bin 0 -> 455 bytes
 site/img/buttons/tick.png  | Bin 0 -> 537 bytes
 site/index.html            |  15 ++--
 site/src/buttons.scss      |  47 +++++++++++
 site/src/main.sass         |  43 +++++++---
 13 files changed, 223 insertions(+), 118 deletions(-)
 create mode 100644 site/img/buttons/cross.png
 create mode 100644 site/img/buttons/key.png
 create mode 100644 site/img/buttons/tick.png
 create mode 100644 site/src/buttons.scss

diff --git a/content/html/en/index.md b/content/html/en/index.md
index b0af1cf..d9dfb01 100644
--- a/content/html/en/index.md
+++ b/content/html/en/index.md
@@ -34,9 +34,9 @@ $('document').ready(function() {
 <% end %>
 
 <div id="mainlinks">
-<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure") %>
-<%= block("Easy","javascript:return false;","Remember only one master password", "left easy") %>
-<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable") %>
+<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure clickable") %>
+<%= block("Easy","javascript:return false;","Remember only one master password", "left easy clickable") %>
+<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable clickable") %>
 </div>
 
 <div class="flush"></div>
@@ -65,6 +65,9 @@ Your password is copied, you can paste it.
 </div>
 
 <div class="flush"></div>
-<%= block("Get it!", "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8","On the Apple Store") %>
+<%= block("Get it!", 
+          "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8",
+          "On the Apple Store", 
+          "clickable") %>
 
 <div class="flush"></div>
diff --git a/content/html/fr/index.md b/content/html/fr/index.md
index b0af1cf..d9dfb01 100644
--- a/content/html/fr/index.md
+++ b/content/html/fr/index.md
@@ -34,9 +34,9 @@ $('document').ready(function() {
 <% end %>
 
 <div id="mainlinks">
-<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure") %>
-<%= block("Easy","javascript:return false;","Remember only one master password", "left easy") %>
-<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable") %>
+<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure clickable") %>
+<%= block("Easy","javascript:return false;","Remember only one master password", "left easy clickable") %>
+<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable clickable") %>
 </div>
 
 <div class="flush"></div>
@@ -65,6 +65,9 @@ Your password is copied, you can paste it.
 </div>
 
 <div class="flush"></div>
-<%= block("Get it!", "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8","On the Apple Store") %>
+<%= block("Get it!", 
+          "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8",
+          "On the Apple Store", 
+          "clickable") %>
 
 <div class="flush"></div>
diff --git a/multi/index.md b/multi/index.md
index b0af1cf..d9dfb01 100644
--- a/multi/index.md
+++ b/multi/index.md
@@ -34,9 +34,9 @@ $('document').ready(function() {
 <% end %>
 
 <div id="mainlinks">
-<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure") %>
-<%= block("Easy","javascript:return false;","Remember only one master password", "left easy") %>
-<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable") %>
+<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure clickable") %>
+<%= block("Easy","javascript:return false;","Remember only one master password", "left easy clickable") %>
+<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable clickable") %>
 </div>
 
 <div class="flush"></div>
@@ -65,6 +65,9 @@ Your password is copied, you can paste it.
 </div>
 
 <div class="flush"></div>
-<%= block("Get it!", "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8","On the Apple Store") %>
+<%= block("Get it!", 
+          "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8",
+          "On the Apple Store", 
+          "clickable") %>
 
 <div class="flush"></div>
diff --git a/site/Scratch/en/index.html b/site/Scratch/en/index.html
index a893145..6b7d5fb 100644
--- a/site/Scratch/en/index.html
+++ b/site/Scratch/en/index.html
@@ -70,7 +70,7 @@
             <div class="content">
                 
 <div id="mainlinks">
-<div class="block left secure">
+<div class="block left secure clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Secure 
@@ -82,7 +82,7 @@
             </p>
         </div>
     </div>
-<div class="block left easy">
+<div class="block left easy clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Easy 
@@ -94,7 +94,7 @@
             </p>
         </div>
     </div>
-<div class="block left portable">
+<div class="block left portable clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Portable 
@@ -134,7 +134,7 @@ Your password is copied, you can paste it.
 </div>
 
 <div class="flush"></div>
-<div class="block left">
+<div class="block clickable">
         <div class="inner">
             <h3>
                 <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&amp;mt=8"> Get it! 
diff --git a/site/Scratch/fr/index.html b/site/Scratch/fr/index.html
index cf601e9..b68d468 100644
--- a/site/Scratch/fr/index.html
+++ b/site/Scratch/fr/index.html
@@ -70,7 +70,7 @@
             <div class="content">
                 
 <div id="mainlinks">
-<div class="block left secure">
+<div class="block left secure clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Secure 
@@ -82,7 +82,7 @@
             </p>
         </div>
     </div>
-<div class="block left easy">
+<div class="block left easy clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Easy 
@@ -94,7 +94,7 @@
             </p>
         </div>
     </div>
-<div class="block left portable">
+<div class="block left portable clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Portable 
@@ -134,7 +134,7 @@ Your password is copied, you can paste it.
 </div>
 
 <div class="flush"></div>
-<div class="block left">
+<div class="block clickable">
         <div class="inner">
             <h3>
                 <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&amp;mt=8"> Get it! 
diff --git a/site/css/buttons.css b/site/css/buttons.css
index 006f7d2..2bc20cd 100644
--- a/site/css/buttons.css
+++ b/site/css/buttons.css
@@ -1,4 +1,4 @@
-/* line 18, ../../../../compass/buttons.scss */
+/* line 18, ../src/buttons.scss */
 a.button {
   display: inline;
   float: left;
@@ -17,7 +17,7 @@ a.button {
   border-color: #eeeeee #dedede #dedede #eeeeee;
   color: #565656;
 }
-/* line 75, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 75, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.button img {
   margin: 0 3px -3px 0 !important;
   padding: 0;
@@ -26,20 +26,20 @@ a.button img {
   height: 16px;
   float: none;
 }
-/* line 62, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 62, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.button:hover {
   background-color: #dff4ff;
   border-color: #d2f1ff #c2e1ef #c2e1ef #d2f1ff;
   color: #336699;
 }
-/* line 47, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 47, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.button:active {
   background-color: #6299c5;
   border-color: #72a9d5 #6299c5 #6299c5 #72a9d5;
   color: white;
 }
 
-/* line 31, ../../../../compass/buttons.scss */
+/* line 31, ../src/buttons.scss */
 button {
   display: inline;
   float: left;
@@ -60,7 +60,7 @@ button {
   border-color: #eeeeee #dedede #dedede #eeeeee;
   color: #565656;
 }
-/* line 75, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 75, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 button img {
   margin: 0 3px -3px 0 !important;
   padding: 0;
@@ -69,56 +69,56 @@ button img {
   height: 16px;
   float: none;
 }
-/* line 95, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 95, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 button[type] {
   padding: 4px 10px 4px 7px;
   line-height: 17px;
 }
-/* line 98, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 98, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 *:first-child + html button[type] {
   padding: 4px 10px 3px 7px;
 }
-/* line 62, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 62, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 button:hover {
   background-color: #dff4ff;
   border-color: #d2f1ff #c2e1ef #c2e1ef #d2f1ff;
   color: #336699;
 }
-/* line 47, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 47, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 button:active {
   background-color: #6299c5;
   border-color: #72a9d5 #6299c5 #6299c5 #72a9d5;
   color: white;
 }
 
-/* line 39, ../../../../compass/buttons.scss */
+/* line 39, ../src/buttons.scss */
 a.positive, button.positive {
   color: #529214;
 }
-/* line 62, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 62, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.positive:hover, button.positive:hover {
   background-color: #e6efc2;
   border-color: #d6e890 #c6d880 #c6d880 #d6e890;
   color: #529214;
 }
-/* line 47, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 47, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.positive:active, button.positive:active {
   background-color: #529214;
   border-color: #62a224 #529214 #529214 #62a224;
   color: white;
 }
 
-/* line 44, ../../../../compass/buttons.scss */
+/* line 44, ../src/buttons.scss */
 a.negative, button.negative {
   color: #d12f19;
 }
-/* line 62, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 62, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.negative:hover, button.negative:hover {
   background-color: #fbe3e4;
   border-color: #ffd2d4 #fbc2c4 #fbc2c4 #ffd2d4;
   color: #d12f19;
 }
-/* line 47, /var/lib/gems/1.8/gems/compass-0.11.1/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+/* line 47, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 a.negative:active, button.negative:active {
   background-color: #d12f19;
   border-color: #e13f29 #d12f19 #d12f19 #e13f29;
diff --git a/site/css/main.css b/site/css/main.css
index 0d5dd3b..d5aa6c2 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -1,38 +1,38 @@
-/* line 32, ../src/main.sass */
+/* line 33, ../src/main.sass */
 body {
-  background: #b4b8c5;
+  background: #efeff4;
 }
-/* line 34, ../src/main.sass */
+/* line 35, ../src/main.sass */
 body.bp {
   margin-top: 30px;
-  background: #b4b8c5;
+  background: #efeff4;
 }
-/* line 37, ../src/main.sass */
+/* line 38, ../src/main.sass */
 body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
   color: #60646c;
   font-weight: bold;
   letter-spacing: -0.05em;
   text-shadow: #41444a -1px -1px 0px, #efeff4 0px 1px 0px;
 }
-/* line 42, ../src/main.sass */
+/* line 43, ../src/main.sass */
 body.bp h1 a:hover, body.bp h2 a:hover, body.bp h3 a:hover, body.bp h4 a:hover, body.bp h5 a:hover, body.bp h6 a:hover {
-  text-shadow: #41444a -1px -1px 0px, #efeff4 0px 1px 0px, rgba(51, 0, 255, 0.7) 0 0 1px;
+  text-shadow: #41444a -1px -1px 0px, #efeff4 0px 1px 0px, rgba(51, 136, 204, 0.5) 0 0 4px;
 }
-/* line 44, ../src/main.sass */
+/* line 45, ../src/main.sass */
 body.bp a {
   text-decoration: none;
   color: #60646c;
 }
-/* line 47, ../src/main.sass */
+/* line 48, ../src/main.sass */
 body.bp a:visited {
   color: #60646c;
 }
-/* line 49, ../src/main.sass */
+/* line 50, ../src/main.sass */
 body.bp a:hover, body.bp a:active {
-  color: #2288cc;
+  color: #86adff;
 }
 
-/* line 53, ../src/main.sass */
+/* line 54, ../src/main.sass */
 * {
   -moz-transition-property: all;
   -webkit-transition-property: all;
@@ -45,22 +45,27 @@ body.bp a:hover, body.bp a:active {
 }
 
 /* line 64, ../src/main.sass */
+.clickable {
+  cursor: pointer;
+}
+
+/* line 68, ../src/main.sass */
 #container {
   width: 950px;
   margin: 0 auto;
 }
 
-/* line 69, ../src/main.sass */
+/* line 73, ../src/main.sass */
 a {
   text-decoration: none;
 }
 
-/* line 72, ../src/main.sass */
+/* line 76, ../src/main.sass */
 h1 {
   text-align: center;
 }
 
-/* line 82, ../src/main.sass */
+/* line 86, ../src/main.sass */
 .block {
   display: inline;
   float: left;
@@ -79,22 +84,22 @@ h1 {
   -ms-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
-  margin-right: 30px;
+  margin-right: 50px;
 }
 /* line 147, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_grid.scss */
 * html .block {
   overflow-x: hidden;
 }
-/* line 79, ../src/main.sass */
+/* line 83, ../src/main.sass */
 .block > * {
   padding: 20px;
 }
-/* line 88, ../src/main.sass */
+/* line 92, ../src/main.sass */
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 103, ../src/main.sass */
+/* line 122, ../src/main.sass */
 #choixlang {
   display: inline;
   float: left;
@@ -105,18 +110,19 @@ h1 {
 * html #choixlang {
   overflow-x: hidden;
 }
-/* line 105, ../src/main.sass */
+/* line 124, ../src/main.sass */
 #choixlang a {
-  width: 100%;
-  text-align: center;
-  text-size: 14px;
-  padding: 3px;
   text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: middle;
-  *vertical-align: auto;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px;
+  text-align: center;
+  display: inline;
+  float: left;
+  display: block;
   margin: 0.7em 0.5em 0.7em 0;
   border-width: 1px;
   border-style: solid;
@@ -126,19 +132,13 @@ h1 {
   font-weight: bold;
   text-decoration: none;
   cursor: pointer;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -o-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  border-radius: 3px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.5);
-  color: #c9cede;
-}
-/* line 7, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
-#choixlang a {
-  *display: inline;
+  width: auto;
+  overflow: visible;
+  padding: 4px 10px 3px 7px;
+  background-color: #e3e5ed;
+  border-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
+  color: #51555c;
+  width: 100%;
 }
 /* line 75, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
 #choixlang a img {
@@ -149,15 +149,43 @@ h1 {
   height: 16px;
   float: none;
 }
-/* line 99, ../src/main.sass */
+/* line 95, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+#choixlang a[type] {
+  padding: 4px 10px 4px 7px;
+  line-height: 17px;
+}
+/* line 98, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+*:first-child + html #choixlang a[type] {
+  padding: 4px 10px 3px 7px;
+}
+/* line 62, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+#choixlang a:hover {
+  background-color: #dff4ff;
+  border-color: #d2f1ff #c2e1ef #c2e1ef #d2f1ff;
+  color: #336699;
+}
+/* line 62, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+#choixlang a:hover {
+  background-color: #d2d4dc;
+  border-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
+  color: #caf1ff;
+}
+/* line 47, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/blueprint/stylesheets/blueprint/_buttons.scss */
+#choixlang a:active {
+  background-color: #d2d4dc;
+  border-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
+  color: #caf1ff;
+}
+/* line 117, ../src/main.sass */
 #choixlang a:hover {
   text-shadow: #3388cc 0 0 3px, rgba(0, 0, 0, 0.5) 0px -1px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
-  color: #efeff4;
+}
+/* line 119, ../src/main.sass */
+#choixlang a:active {
+  text-shadow: #33aaff 0 0 4px, rgba(0, 0, 0, 0.5) 0px -1px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
 }
 
-/* line 109, ../src/main.sass */
+/* line 128, ../src/main.sass */
 #mainlinks {
   display: inline;
   float: left;
@@ -165,7 +193,7 @@ h1 {
   margin: 0 -120px 1.5em 120px;
 }
 
-/* line 112, ../src/main.sass */
+/* line 131, ../src/main.sass */
 #choixrss {
   text-align: right;
   display: inline;
@@ -186,12 +214,13 @@ h1 {
 * html #choixrss {
   overflow-x: hidden;
 }
-/* line 118, ../src/main.sass */
+/* line 137, ../src/main.sass */
 #choixrss a {
   width: 100%;
   text-align: center;
   text-size: 14px;
-  padding: 3px;
+  padding: 4px;
+  height: 22px;
   text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
   display: -moz-inline-box;
   -moz-box-orient: vertical;
@@ -207,15 +236,15 @@ h1 {
   font-weight: bold;
   text-decoration: none;
   cursor: pointer;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -o-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 22px;
+  -webkit-border-radius: 22px;
+  -o-border-radius: 22px;
+  -ms-border-radius: 22px;
+  -khtml-border-radius: 22px;
+  border-radius: 22px;
   background-color: rgba(0, 0, 0, 0.2);
   border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.5);
-  color: #c9cede;
+  color: #41444a;
 }
 /* line 7, ../../../../../../var/lib/gems/1.8/gems/compass-0.11.3/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
 #choixrss a {
@@ -230,7 +259,7 @@ h1 {
   height: 16px;
   float: none;
 }
-/* line 99, ../src/main.sass */
+/* line 104, ../src/main.sass */
 #choixrss a:hover {
   text-shadow: #3388cc 0 0 3px, rgba(0, 0, 0, 0.5) 0px -1px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
   background-color: rgba(0, 0, 0, 0.3);
@@ -238,7 +267,7 @@ h1 {
   color: #efeff4;
 }
 
-/* line 123, ../src/main.sass */
+/* line 142, ../src/main.sass */
 #mainnav ul {
   padding-left: 0;
   list-style-type: none;
@@ -253,7 +282,7 @@ h1 {
 * html #mainnav ul {
   overflow-x: hidden;
 }
-/* line 129, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #mainnav ul li {
   display: inline;
   float: left;
@@ -264,14 +293,14 @@ h1 {
 * html #mainnav ul li {
   overflow-x: hidden;
 }
-/* line 131, ../src/main.sass */
+/* line 150, ../src/main.sass */
 #mainnav ul li * {
   display: block;
   text-align: center;
   width: 100%;
 }
 
-/* line 135, ../src/main.sass */
+/* line 154, ../src/main.sass */
 footer {
   display: inline;
   float: left;
@@ -284,7 +313,7 @@ footer {
   overflow-x: hidden;
 }
 
-/* line 139, ../src/main.sass */
+/* line 158, ../src/main.sass */
 .flush {
   clear: both;
 }
diff --git a/site/img/buttons/cross.png b/site/img/buttons/cross.png
new file mode 100644
index 0000000000000000000000000000000000000000..1514d51a3cf1b67e1c5b9ada36f1fd474e2d214a
GIT binary patch
literal 655
zcmV;A0&x9_P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!AxT6*R5;6(
zlj}|sQ51!ViOGr2pjL^7$dQ1=8$w$KD6I_$CeZtZUZjAurR}6mp*HFdO?(oc3q-}<
zu+o`!I@9H@m`W`r;m1zSWX}5bthM(H02sJT)z?DT&OUcv5HmU|-dF4oa@p;T*KAHh
zFQ6^X?4p&<LW?JRAa!4W*8^cRHn#BV<;v&k;?li;fWKno-=RgNB}6ngw>uEoyT++I
zn$b9r%cFfhHe2K68Pk<hKq}2z2~lh9z5zadf|kv-0cZq5T=w`mb%(MY1L(c%58!zI
zxmp(Hu69|_VhN_cj;WfM0p5Rrno6S{41>Bu*@^<$y+7xQ$wJ~;c5aBx$R=xq*41Wo
zhwQus_VOgm0hughj}MhOvs#{>Vg09Y8WxjWUJY5Y<Msg#Hz1}_nVr{4MuGi*zXu>W
zJ?&8eG!59Cz=|E%Ns@013KLWOLV)CObIIj_5{>{#k%TEAMs_GbdDV`x-iYsG<NRDe
z&F<oo(+wrG4$v4ShYJ*zTAVUyCyUEKWCOJq%P2g2jKiT}-UXn|;?x~V@D+7UK%!5l
zu+-wDffb%iu%q!uYSm;0f+3t(tT-AO#lfvX-T}~N2{oGoN+1Mj)d31iEk4tC0{b>H
z#=Z{USAQA>NY(}X7=3{K8#<xO0&SL1U06cNFs)HoJ!v1_9b#Vw@2F?RJt3C#MxpR@
plJ)zU4s^HK{`H%}g=4&I{RVQoq{rLsz7zle002ovPDHLkV1j2<C=vhw

literal 0
HcmV?d00001

diff --git a/site/img/buttons/key.png b/site/img/buttons/key.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9d5e4f8cc75240f6e6bbb9e73466a9e3effb610
GIT binary patch
literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzSxH1eR5;7s
zlRZm9VHk$bAMg(ZK~U`t_JJ)el?}CsHCQM5fTD(mmL?Ijph1di$iSqeqJ+k3D6JNI
z$&WJ2JZ0Gl^;Ja0kE5n=H#V7?Tf?<IT*J-vFaVfZVE%!C5Q17@2q7pIi+_Sr`XeYS
zDtsYgT|wx47IC+!dO_4~K$Og(kRqU#3B)-|<$~D55h7PC3JD_;ZWW?dCEoUj;JGkX
zCJ31qkdGZA7gQogw~)A3Lf}>4^nI0$7`a(T+P4hBKZ7hk58-_j0w;$<(*=f7ic$nT
z*Wgd55in08>183j3?S=MAoDDTLoLSL$!_UDxXqSf-?qdd@H%8(We~hQu&uVIo$6NV
z(zMY7wn6r5i617ZGZ)-J($xXssTcN*&WujcIDRIp6J4_PqOvJ}9!p6+yo8LmAGS3~
xN<Y>#Qq?aIt$6X#&>g<jO8k3M&4Z=xz5ziaJGfE`o~-}?002ovPDHLkV1nB+yafON

literal 0
HcmV?d00001

diff --git a/site/img/buttons/tick.png b/site/img/buttons/tick.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9925a06ab02db30c1e7ead9c701c15bc63145cb
GIT binary patch
literal 537
zcmV+!0_OdRP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzt4TybR5;7M
zli4mqVHAaX=Q!_TZq*o5LaK&TC+g@aMJbINs;8}1t3yf*$E6r*j>Hs{AQG2a)rMyf
zFQK~pm1x3+7!nu%-M`k}``c>^00{o_1pjWJUTfl8mg=3qGEl8H@}^@w`VUx0_$uy4
z2FhRqKX}xI*?Tv<H&*Dj)Tr<j*}f%KtVns|p$^k=7pCG)bZ)nz(p!uYhmcBtGG4MZ
zhBKz;vsk_?<x?$B#+(Sm9B-A&-Qq;?SOJwD!Fa)z^`0_M+_eepu5##IOknYS`&tC<
z#^ArRgWXi2%vG2uvgcE2i2di<+TKw6qc6;1IyMf?mMlSF4apWIQ-(bTzNj7ETMiu?
z3Y3nE5@K5(^<j-YCz?$CVH?a>1DJd8z#F#0c%*~rM30HE1@2o5m~}ZyoWhqv>ql{V
z1ZGE0lgcoK^lx+eqc*rAX1Ky;Xx3U%u#zG!m-;eD1Qsn@kf3|F9qz~|95=&g3(7!X
zB}JAT>RU;a%vaNOGnJ%e1=K6eAh43c(QN8RQ6~GP%O}Jju$~Ld*%`mO1p<rCAIZx2
bmuq|lzM`o-QVIh|00000NkvXXu0mjfO@{7Q

literal 0
HcmV?d00001

diff --git a/site/index.html b/site/index.html
index 4be8607..6b7d5fb 100644
--- a/site/index.html
+++ b/site/index.html
@@ -34,11 +34,12 @@
   <!--[if lt IE 8]>
     <link href="/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
   <![endif]-->
+  <!-- CSS: blueprint buttons -->
+   <link href="/css/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
 
   <!-- CSS: implied media="all" -->
   <!-- Google Fonts -->
-  <link href='http://fonts.googleapis.com/css?family=Expletus+Sans:bold' rel='stylesheet' type='text/css'>
-  <link href='http://fonts.googleapis.com/css?family=Kreon:regular,bold' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Molengo:regular,bold' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="/css/main.css">
 
   <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
@@ -69,7 +70,7 @@
             <div class="content">
                 
 <div id="mainlinks">
-<div class="block left secure">
+<div class="block left secure clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Secure 
@@ -81,7 +82,7 @@
             </p>
         </div>
     </div>
-<div class="block left easy">
+<div class="block left easy clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Easy 
@@ -93,7 +94,7 @@
             </p>
         </div>
     </div>
-<div class="block left portable">
+<div class="block left portable clickable">
         <div class="inner">
             <h3>
                 <a href="javascript:return false;"> Portable 
@@ -133,7 +134,7 @@ Your password is copied, you can paste it.
 </div>
 
 <div class="flush"></div>
-<div class="block left">
+<div class="block clickable">
         <div class="inner">
             <h3>
                 <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&amp;mt=8"> Get it! 
@@ -151,7 +152,7 @@ Your password is copied, you can paste it.
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>Modified: <time>05/14/2011</time></li>
+                    <li>Modified: <time>05/16/2011</time></li>
                     <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a></li>
                 </ul>
             </footer>
diff --git a/site/src/buttons.scss b/site/src/buttons.scss
new file mode 100644
index 0000000..f7c183f
--- /dev/null
+++ b/site/src/buttons.scss
@@ -0,0 +1,47 @@
+@import "compass/utilities/general/float";
+@import "blueprint/buttons";
+
+// Use the following HTML code to place the buttons on your site:
+//
+// <button type="submit" class="button positive">
+//   <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
+// </button>
+//
+// <a class="button" href="/password/reset/">
+//   <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
+// </a>
+//
+// <a href="#" class="button negative">
+//   <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
+// </a>
+
+a.button {
+  // you can pass "left" or "right" to +anchor-button to float it in that direction
+  // or you can pass no argument to leave it inline-block (cross browser safe!) within
+  // the flow of your page.
+  @include anchor-button(left);
+  // All the button color mixins take 4 optional arguments:
+  // font color, background color, border color, border highlight color
+  // the first three default to constants set in blueprint/buttons.sass
+  // the last one defaults to a shade lighter than the border color.
+  @include button-colors;
+  @include button-hover-colors;
+  @include button-active-colors; }
+
+button {
+  // The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
+  @include button-button(left);
+  @include button-colors;
+  @include button-hover-colors;
+  @include button-active-colors; }
+
+// We can change the colors for buttons of certain classes, etc.
+a.positive, button.positive {
+  color: #529214;
+  @include button-hover-colors(#529214, #e6efc2, #c6d880);
+  @include button-active-colors(white, #529214, #529214); }
+
+a.negative, button.negative {
+  color: #d12f19;
+  @include button-hover-colors(#d12f19, #fbe3e4, #fbc2c4);
+  @include button-active-colors(white, #d12f19, #d12f19); }
diff --git a/site/src/main.sass b/site/src/main.sass
index 14f671f..f6ef835 100644
--- a/site/src/main.sass
+++ b/site/src/main.sass
@@ -21,11 +21,12 @@ $ycolor7: #303237
 $ycolor8: #1F2024 
 $ycolor9: #0F1011
 
-$higlightcolor:  #28C
+// $higlightcolor:  #28C
+$higlightcolor:  $ycolor3 + #027
 $higlightcolor-shadow:  #058
 $higlightcolor-reflect:  #6AF
 
-$main-background-color: $ycolor1
+$main-background-color: $ycolorb
 
 
 // Background colors
@@ -40,7 +41,7 @@ body
       letter-spacing: -0.05em
       +text-shadow($ycolor6 -1px -1px 0px,$ycolorb 0px 1px 0px )
       a:hover
-        +text-shadow($ycolor6 -1px -1px 0px ,$ycolorb 0px 1px 0px ,rgba(#30F,0.7) 0 0 1px  )
+        +text-shadow($ycolor6 -1px -1px 0px ,$ycolorb 0px 1px 0px ,rgba(#38C,0.5) 0 0 4px  )
     a
       text-decoration: none
       color: $ycolor4
@@ -53,13 +54,16 @@ body
 * 
   +transition
 
-=debugblock
-  +box-shadow(#FFF 0 0 3px, rgba(#000,0.2) 0 0 3px inset)
-  background: rgba(#EA6,0.08)
-
+// =debugblock
+//   +box-shadow(#FFF 0 0 3px, rgba(#000,0.2) 0 0 3px inset)
+//   background: rgba(#EA6,0.08)
+// 
 // *
 //   +debugblock
 
+.clickable
+  cursor: pointer
+
 // large container
 #container
   width: span(24)
@@ -84,27 +88,42 @@ h1
   +prepend-top(10px)
   +append-bottom(20px)
   +innerblock
-  margin-right: +span(1)
+  margin-right: span(1) + 2 * 10px
   &:hover
     background-color: rgba(#000,0.05)
 
 =ybutton
   text-align: center
   text-size: 14px
-  padding: 3px
+  padding: 4px
+  height: 22px
   +text-shadow(rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
   +button-base
-  +border-radius(3px)
-  +button-colors($ycolor0, rgba(#000,0.2), rgba(#000,0.3), rgba(#FFF,0.5))
+  +border-radius(22px)
+  +button-colors($ycolor6, rgba(#000,0.2), rgba(#000,0.3), rgba(#FFF,0.5))
   &:hover
     +text-shadow(#38C 0 0 3px, rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
     +button-colors($ycolorb, rgba(#000,0.3), rgba(#000,0.5), rgba(#FFF,0.5))
 
+=button
+  +text-shadow(rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
+  +border-radius(3px)
+  text-align: center
+  +button-button(left)
+  +button-hover-colors
+  +button-colors($ycolor5, $ycolorc, rgba(#000,.3), rgba(#FFF,.3))
+  +button-hover-colors($higlightcolor + #446, $ycolorc - #111, rgba(#000,.3), rgba(#FFF,.3))
+  +button-active-colors($higlightcolor + #448, $ycolorc - #111, rgba(#FFF,.3), rgba(#000,.3))
+  &:hover
+    +text-shadow(#38C 0 0 3px, rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
+  &:active
+    +text-shadow(#3AF 0 0 4px, rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
+
 #choixlang
   +column(4)
   a
+    +button
     width: 100%
-    +ybutton
 
 #mainlinks
   +push(3)