changed layout of getting_started to two columns and reorganized typographic styles and heirarchy

assets/scripts/app/templates/no_owned_repos.hbs

@@ -1,43 +1,60 @@
 <div id="getting-started">
   <h3>Welcome to Travis CI!</h3>
 
-  <h2>Hey, it looks like you're new around here and have yet to set up your first repository on Travis CI. We're here to help you get started, it's easy!</h2>
+  <h2>Hey, it looks like you're new around here and have yet to set up your first<br>repository on Travis CI. We're here to help you get started, it's easy!</h2>
-
-
-  <span class="steps">STEP 1: &nbsp; Enabling your projects</span>
 
+  <div class="getting-started-row">
+    <div class="column">
       <img src="/images/getting-started/project-switch.png">
+    </div>
   
+    <div class="column-right">
+      <span class="steps">Step 1: &nbsp; Enabling your projects</span>
       <p>
         Start by going to your {{#linkTo "profile.index"}}profile{{/linkTo}} and enable one of your projects. We've been
         synchronizing all repositories you have administrative access to. Pick one and flip the switch next to it.
       </p>
+    </div>
+  </div>
 
-  <span class="steps">STEP 2: &nbsp; Adding Travis</span>
+  <div class="getting-started-row">
-
+    <div class="column">
       <img src="/images/getting-started/first-build.png">
+    </div>
 
+    <div class="column-right">
+      <span class="steps">Step 2: &nbsp; Adding Travis</span>
       <p>
         Once you've enabled one of your projects, add a <a
         href="http://about.travis-ci.org/docs/user/build-configuration/#.travis.yml-file%3A-what-it-is-and-how-it-is-used"><code>.travis.yml</code></a> to your project, push some code, and we'll start processing your builds. Wait a
         whee while and reload the page, and your newly setup and built project will show up on the right.
       </p>
+    </div>
+  </div>
 
-  <span class="steps">STEP 3: &nbsp; Wait for your build to finish</span>
+  <div class="getting-started-row">
-
+    <div class="column">
       <img src="/images/getting-started/build-email.png">
+    </div>
 
-  <p class="end-of-steps">
+    <div class="column-right">
+      <span class="steps">Step 3: &nbsp; Wait for your build to finish</span>
+      <p>
         We'll be sending you an email once the build has finished. Then, it's up to you to do the happy dance.
       </p>
+    </div>
+  </div>
 
-  <p class="after-steps">
+  <div class="getting-started-row">
+    <span class="after-steps steps">Build Configuration</span>
+    <p>
       We use sensible defaults for <a href="http://about.travis-ci.org/docs/">most languages</a>, but you can customize
       both the <a href="http://about.travis-ci.org/docs/user/build-configuration/">build process</a> and the <a
       href="http://about.travis-ci.org/docs/user/build-configuration/">build
       environment</a> to fit your project's needs.
     </p>
 
+    <span class="steps">Notifications</span>
     <p>
       You can also configure how you want to be notified of build results. Email is only one channel you can use. We
       support <a href="http://about.travis-ci.org/docs/user/notifications/#Campfire-notification">Campfire</a>, <a
@@ -50,9 +67,11 @@
       configuration settings</a>.
     </p>
 
+    <span class="steps">Questions</span>
     <p>
       Should you have any questions or issues, have a look at <a href="http://about.travis-ci.org/docs/" location="_top">our
       documentation</a>, <a href="https://github.com/travis-ci/travis-ci/issues/new" location="_top">open an issue</a> or
       <a href="mailto:support@travis-ci.com">send us an email</a>.
     </p>
+  </div>
 </div>

assets/styles/getting_started.sass

@@ -1,42 +1,29 @@
 #getting-started
-  min-width: 600px
+  width: 850px
-  max-width: 800px
   margin: 0 auto
   padding-top: 30px
   font-family: 'Source Sans Pro'
-  text-align: center
+  text-align: left
 
   h2
     color: #919191
     font-weight: 400
     line-height: 30px
+    text-align: center
 
   h3
-    font-size: 35px
+    font-size: 30px
     color: #337389
+    text-align: center
 
-  span
+  .getting-started-row
     display: inline-block
-    margin-top: 50px
+    clear: all
-
+    padding-top: 30px
-  .steps
-    font-size: 20px
-    font-weight: 600
-    color: #939386
-
-  p
-    font-size: 15px
-
-  .end-of-steps
-    padding-bottom: 50px
-    border-bottom : 1px solid #AAAAAA
-
-  .after-steps
-    padding-top: 50px
 
     a
-    color: #a53230
+      color: #337389
-    text-decoration: none
+      text-decoration: underline
 
       &:hover
         color: #607a84
@@ -46,8 +33,7 @@
       padding: 0 
       float: none
       margin: 15px 0 0 0
-    max-width: 800px
+      width: 450px
-    min-width: 600px
 
       &.spinner
         border: 0px
@@ -55,3 +41,35 @@
         float: none
         margin: 0px
         margin-left: 5px
+
+    p
+      font-size: 17px
+      line-height: 26px
+
+    .after-steps
+      padding-top: 50px
+      border-top : 1px solid #AAAAAA
+
+    .column
+      padding-right: 20px
+      max-width: 450px
+      display: block 
+      float: left
+      clear: all
+
+    .column-right
+      width: 40%
+      display: block
+      float: left
+      clear: all
+
+    .steps
+      display: block
+      margin-top: 10px
+      font-size: 22px
+      line-height: 30px
+      font-weight: 400
+      color: #bc3c3c
+
+    .end-of-steps
+      padding-bottom: 50px