Reorganize CSS stylesheet

public_html/static/css/style.css

@@ -1,3 +1,7 @@
+/**************************************
+ *            PAGE LAYOUT             *
+ **************************************/
+
 body
 {
 	padding: 0px;
@@ -6,17 +10,25 @@ body
 	font-family: Lato, sans-serif;
 }
 
-.clear
-{
-	clear: both;
-}
-
 .wrapper
 {
 	width: 960px;
 	margin: 0px auto;
 }
 
+/**************************************
+ *             CLEARFIX               *
+ **************************************/
+
+.clear
+{
+	clear: both;
+}
+
+/**************************************
+ *              HEADER                *
+ **************************************/
+
 .header h1
 {
 	color: #7AAA3E;
@@ -31,6 +43,10 @@ body
 	color: #587532;
 }
 
+/**************************************
+ *             MAIN AREA              *
+ **************************************/
+
 .main
 {
 	background-color: #FCFFF7;
@@ -49,6 +65,46 @@ body
 	color: #3B4A28;
 }
 
+/**************************************
+ *               FOOTER               *
+ **************************************/
+
+.footer
+{
+	margin-top: 16px;
+	font-size: 15px;
+	margin-bottom:24px;
+	text-align: right;
+}
+
+.footer a
+{
+	color: #008600;
+	text-decoration: none;
+}
+
+.footer a:after
+{
+	content: " | ";
+	color: silver;
+}
+
+.footer a:hover
+{
+	color: black;
+}
+
+.footer a:nth-last-child(1):after
+{
+	content: "";
+}
+
+/**************************************
+ *              LANDING               *
+ **************************************/
+
+/* Layout */
+
 .main .details, .main .subscribe
 {
 	margin-top: 16px;
@@ -69,21 +125,6 @@ body
 	padding-left: 3%;
 }
 
-.main h3
-{
-	margin: 0px;
-}
-
-.main .subscribe h3
-{
-	margin-bottom: 32px;
-}
-
-.main .leader
-{
-	font-size: 18px;
-}
-
 .main .more
 {
 	margin-top: 16px;
@@ -98,6 +139,13 @@ body
 	margin: 0px auto;
 }
 
+/* Header */
+
+.main h3
+{
+	margin: 0px;
+}
+
 .main h3.section
 {
 	margin-top: 16px;
@@ -105,11 +153,25 @@ body
 	padding-top: 16px;
 }
 
-.subscribe p
+.main .subscribe h3
+{
+	margin-bottom: 32px;
+}
+
+/* Text styles */
+
+.main .leader
+{
+	font-size: 18px;
+}
+
+.main .subscribe p
 {
 	font-size: 18px;
 }
 
+/* Form */
+
 #field_currency
 {
 	text-align: right;
@@ -139,6 +201,14 @@ body
 	width: 335px;
 }
 
+/* Button - thanks, Ari! */
+
+p.pledge-button
+{
+	 padding-left: 15px;
+	 padding-top: 10px;
+}
+
 .green-button 
 {
 	margin-top:				0px;
@@ -188,39 +258,3 @@ body
 	-ms-filter:				grayscale(100%);
 	filter:					grayscale(100%); 
 }
-
-p.pledge
-{
-	 padding-left: 15px;
-	 padding-top: 10px;
-}
-
-.footer
-{
-	margin-top: 16px;
-	font-size: 15px;
-	margin-bottom:24px;
-	text-align: right;
-}
-
-.footer a
-{
-	color: #008600;
-	text-decoration: none;
-}
-
-.footer a:after
-{
-	content: " | ";
-	color: silver;
-}
-
-.footer a:hover
-{
-	color: black;
-}
-
-.footer a:nth-last-child(1):after
-{
-	content: "";
-}

public_html/templates/landing.tpl

@@ -42,7 +42,7 @@
 		<input type="text" id="field_amount" value="5.00">
 		a month.
 	</p>
-	<p class="pledge">
+	<p class="pledge-button">
 		<button class="green-button" id="button_subscribe">Pledge!</button>
 	</p>