First pass at images

Author: swisspol

images/editing.gif

@@ -38,7 +38,7 @@ <h1 class="header-title">
 
     <section class="mainFeature" id="live-map">
       <figure class="mainFeature-image">
-        <img src="images/fpo.jpg" alt="" />
+        <img src="images/map.gif" alt="" />
       </figure>
 
       <div class="mainFeature-subSection">
@@ -64,7 +64,7 @@ <h2 class="mainFeature-subSection-title">Quick View</h2>
 
     <section class="mainFeature" id="undo-redo">
       <figure class="mainFeature-image">
-        <img src="images/fpo.jpg" alt="" />
+        <img src="images/snapshots.gif" alt="" />
       </figure>
 
       <div class="mainFeature-subSection">
@@ -96,7 +96,7 @@ <h2 class="mainFeature-subSection-title">Snapshots</h2>
 
     <section class="mainFeature" id="quick-keys">
       <figure class="mainFeature-image">
-        <img src="images/fpo.jpg" alt="" />
+        <img src="images/editing.gif" alt="" />
       </figure>
 
       <div class="mainFeature-subSection">
@@ -125,7 +125,7 @@ <h2 class="mainFeature-subSection-title">GitUp gets out of the way</h2>
     <section id="more-features">
       <section class="secondaryFeature" id="speed">
         <figure class="secondaryFeature-image">
-          <img src="images/fpo.jpg" alt="" />
+          <img src="images/speed.png" alt="" />
         </figure>
 
         <h3 class="secondaryFeature-title">Serious Speed</h3>
@@ -136,7 +136,7 @@ <h3 class="secondaryFeature-title">Serious Speed</h3>
 
       <section class="secondaryFeature" id="search">
         <figure class="secondaryFeature-image">
-          <img src="images/fpo.jpg" alt="" />
+          <img src="images/search.png" alt="" />
         </figure>
 
         <h3 class="secondaryFeature-title">Instant Search</h3>

images/fpo.jpg

@@ -50,8 +50,7 @@ body {
   height: 400px;
   overflow: hidden;
 
-  background: #ccc;
-  border-radius: 3px;
+  border:1px solid #ccc;
 }
 .mainFeature-image > img {
   display: block;
@@ -89,18 +88,17 @@ body {
 .secondaryFeature-image {
   position: relative;
   display: block;
-  width: 378px;
-  height: 200px;
+  width: 378px;  /* TODO: Why do we need to subtract 2px? */
+  height: 198px;  /* TODO: Why do we need to subtract 2px? */
   overflow: hidden;
   margin-bottom: 24px;
 
-  background: #ccc;
-  border-radius: 3px;
+  border:1px solid #ccc;
 }
 .secondaryFeature-image > img {
   display: block;
   width: 378px;
-  height: 200;
+  height: 200px;
 }
 
 #download {