new loading spinner gif, header styles and columns for first_sync page

assets/scripts/app/templates/first_sync.hbs

@@ -1,29 +1,37 @@
-<div id="getting-started">
-  <h3>Just one more thing...<img class="spinner" width="20" src="/images/getting-started/mustache-spinner.gif"/></h3>
+<div id="first_sync">
+  <img src="/images/getting-started/mustache-spinner.gif" class="spinner" width="300">
 
-  <p>
-    We're almost done getting you on board, just a few more seconds as we talk to GitHub to find out which
-    repositories belong to you.
-  </p>
+  <p class="first-sync-head">Just one more thing</h3>
 
-  <p>
-    If you're part of an organization that already has repositories set up on Travis CI, we'll take you to the list
-    once we're done.
-  </p>
+  <div class="sync-row">
+    <div class="sync-column">
+      <p>
+        We're almost done getting you on board, just a few more seconds as we talk to GitHub to find out which
+        repositories belong to you.
+      </p>
 
-  <p>
-    If this is your first time on Travis CI, and you're not part of any existing organizations yet, we'll take you to
-    a handy getting started guide to get you off the ground quickly.
-  </p>
+      <p>
+        If you're part of an organization that already has repositories set up on Travis CI, we'll take you to the list once we're done.
+      </p>
+    </div>
 
-  <p>
-    Now hold tight while we sync the last bits from GitHub, we should be done here any minute now.
-  </p>
+    <div class="sync-column">
+      <p>
+        If this is your first time on Travis CI, and you're not part of any existing organizations yet, we'll take you to
+        a handy getting started guide to get you off the ground quickly.
+      </p>
+      <p>
+        Now hold tight while we sync the last bits from GitHub, we should be done here any minute now.
+      </p>
+    </div>
+  </div>
 
-  {{#unless isSyncing}}
-    <h3>Great news!</h3>
-    <p>
-      We've successfully synchronized your details from GitHub. We will redirect you to your profile in a few seconds.
-    </p>
-  {{/unless}}
+  <div class="sync-row">
+    {{#unless isSyncing}}
+      <p class="great-news">Great news!</p>
+      <p>
+        We've successfully synchronized your details from GitHub. We will redirect you to your profile in a few seconds.
+      </p>
+    {{/unless}}
+  </div>
 </div>

assets/styles/getting_started.sass

@@ -1,3 +1,48 @@
+#first_sync
+  width: 850px
+  margin: 0 auto
+  padding-top: 30px
+  font-family: 'Source Sans Pro'
+  font-size: 17px
+  line-height: 26px
+  text-align: center
+
+  .first-sync-head
+    font-size: 35px
+    color: #337389
+    font-weight: 800
+    text-align: center
+    margin: 0
+  
+  .great-news
+    font-size: 35px
+    color: #337389
+    text-align: center
+    color: #c44845
+    font-weight: 800
+    margin: 0
+
+  p
+    text-align: left
+    padding-bottom: 10px
+
+  .spinner
+    border: 0px
+    padding-bottom: 30px
+    align: center
+
+  .sync-row
+    display: inline-block
+    clear: all
+    padding-top: 30px
+
+  .sync-column
+    padding-right: 28px
+    max-width: 380px
+    display: block 
+    float: left
+    clear: all
+
 #getting-started
   width: 850px
   margin: 0 auto
@@ -35,13 +80,6 @@
       margin: 15px 0 0 0
       width: 450px
 
-      &.spinner
-        border: 0px
-        padding: 0px
-        float: none
-        margin: 0px
-        margin-left: 5px
-
     p
       font-size: 17px
       line-height: 26px