Donation++

I was told that you could hardly tell that it was possible to make
donations. This should make it more prominent, though I did my best to
not make it annoying.

index.htm

@@ -25,19 +25,22 @@
 
     <div id="gl"></div>
 
-    <div id="card">
+    <div id="donationanim" class="card">
+        Like it?<br/>
+        Consider donating :)<br/>
+        <img src="images/donate-color.png" />
+    </div>
+
+    <div class="right card">
 
         <h1>MINECRAFT ARMORSTAND</h1>
         <div class="padding">
             <center>
                 <a href="https://github.com/haselkern/Minecraft-ArmorStand" target="_blank"><img src="images/github.png" alt="GitHub" title="GitHub" /></a>
                 <a href="http://www.twitter.com/haselcode" target="_blank"><img src="images/twitter.png" alt="Twitter" title="Twitter" /></a>
-                <div id="donate">
-                  <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RRRKAAH4JNBZ8" target="_blank" title="Like it? Donate :)">
-                    <img src="images/donate.png" alt="Donate" />
-                    <img class="colorful" src="images/donate-color.png" alt="Donate" />
-                  </a>
-                </div>
+                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GRVLAZE7UED9Y" target="_blank" title="Like it? Donate :)">
+                  <img src="images/donate-color.png" alt="Donate" />
+                </a>
             </center>
                 <br>
                 <span class="padding" style="cursor: pointer;" onclick="javascript:$('#troubleshooting').slideToggle();">
@@ -184,7 +187,7 @@
 
     </div>
 
-    <div id="card">
+    <div class="right card">
         <span class="padding" style="cursor: pointer;" onclick="javascript:$('#getcommandblock').slideToggle();">
             + Obtain a command block
         </span>

js/main.js

@@ -124,6 +124,29 @@ $(document).ready(function(){
         }
     });
 
+	// Animate donation div
+	var donationheight = $("#donationanim").height() * 1.5;
+	$("#donationanim").css({
+		"transform" : "translateY(-"+donationheight+"px)",
+		"visibility" : "visible"
+	});
+
+	// Slide in
+	setTimeout(function(){
+		$("#donationanim").css({
+			"transform" : "translateY(0px)",
+			"transition" : "400ms",
+		});
+
+		// Slide out
+		setTimeout(function(){
+			$("#donationanim").css({
+				"transform" : "translateY(-"+donationheight+"px)",
+			});
+		}, 4000);
+
+	}, 2000);
+
 });
 
 function setup(){

style.css

@@ -30,20 +30,14 @@ a{
 	color: #000000;
 }
 
-#donate{
-	width: 64px;
-	height: 64px;
-	display: inline;
-	position: relative;
-}
-#donate .colorful{
-	opacity: 0;
+#donationanim{
 	position: absolute;
-	left: 0;
-	transition: 0.5s;
-}
-#donate:hover .colorful{
-	opacity: 1;
+	width: 300px;
+	left: 50%;
+	margin-left: -150px;
+	padding: 5px;
+	text-align: center;
+	visibility: hidden;
 }
 
 #gl{
@@ -54,10 +48,14 @@ a{
 	position: fixed;
 }
 
-#card{
+.card{
 	background-color: #ffffff;
 	box-shadow: 0 2px 4px #555555;
 	margin: 0.5em;
+	border-radius: 3px;
+}
+
+.right{
 	margin-left: 60%;
 }
 
@@ -70,6 +68,7 @@ a{
 	padding: 1em;
 	font-family: monospace;
 	background-color: #37474f;
+	border-radius: 3px;
 	color: #ffffff;
 }