diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1d09271
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_*
diff --git a/css/style.css b/css/style.css
index b3d3fa1..88b305c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -65,13 +65,20 @@ html {
 overflow-y : scroll;
 background : rgb(255,255,255) /* url(../img/tmp/grid.png) repeat-y 50% 0 */; }
 
-body { 
+body {
+	margin : 0 auto;
+	padding : 0 0;
+	font : 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
+	font-weight: 100;
+	color : rgb(40,40,40); 
+	background-color : transparent;
+}
+
+#page { 
 margin : 0 auto;
-padding : 24px 0;
+padding : 0 0;
 width : 90% /* 252px */;
-font : 100%/1.4 Cambria, Georgia, Times, "Times New Roman";
-color : rgb(40,40,40); 
-background-color : transparent; }
+}
 
 /* 2.HEADINGS */
 
@@ -80,31 +87,20 @@ h2,
 h3, 
 h4, 
 h5, 
-h6 { font-family : "Helvetica Neue", Helvetica, Arial; font-weight : bold; }
+h6 { font-family : "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial; font-weight : 700; }
 
-h1 { margin-bottom : .75em; font-size : 3em; /* 48 / 16 = 3 */ line-height : 1.2; }
+h1 { margin-bottom : .5em; font-size : 3em; /* 48 / 16 = 3 */ line-height : 1.2; font-weight: 900; text-align: center; }
+h1:before { content: "\2731"; display: block; font-size: 3em; margin-top: 0; text-align: center; }
 
-h2 { 
-margin-bottom : .75em;
-font-size : 2em; /* 36 / 16 = 2 */
-line-height : 1.2; }
+h2 { margin-bottom : .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2; text-align: center; }
 
-h3 { 
-margin-bottom : 1em;
-font-size : 1.5em; /* 24 / 16 = 1.5 */
-line-height : 1.3; }
+h3 { margin-bottom : 1em; font-size : 1.5em; /* 24 / 16 = 1.5 */ line-height : 1.3; }
 
-h4 { 
-margin-bottom : 1.25em;
-font-size : 1.25em; /* 20 / 16 = 1.25 */
-line-height : 1.25; }
+h4 { font-family: "museo-sans-1","museo-sans-2", sans-serif; margin-bottom : 0.25em; font-size : 1.25em; /* 20 / 16 = 1.25 */ line-height : 1.25; font-weight: 500; }
 
-h5 { 
-margin-bottom : 1.5em;
-font-size : 1em; /* 16 / 16 = 1 */ }
+h5 { margin-bottom : 1.5em; font-size : 1em; /* 16 / 16 = 1 */ }
 
-h6 { 
-font-size : 1em; /* 16 / 16 = 1 */ }
+h6 { font-size : 1em; /* 16 / 16 = 1 */ }
 
 /* 3.TYPOGRAPHY */
 
@@ -132,6 +128,10 @@ li ol {
 margin : 0;
 font-size : 1em; /* 16 / 16 = 1 */ }
 
+section { border-top: 2px solid black; padding-top: 1em; }
+
+section ul, section ol { list-style: none; }
+
 dl, 
 dd { 
 margin-bottom : 1.5em; }
@@ -421,7 +421,11 @@ page-break-after : avoid; }
 @media only screen and (min-width: 480px) {
 
 /* 1.ROOT */
+body { font-size: 1.05em; }
 /* 2.HEADINGS */
+h1 { margin-top: 0.5em; text-align: left; }
+h1:before { float: right; font-size: 2em; position: relative; top: -0.28em; text-align: right; margin-bottom: -0.5em; }
+h2 { text-align: left; }
 /* 3.TYPOGRAPHY */
 /* 4.LINKS */
 /* 5.FIGURES & IMAGES */
@@ -444,9 +448,9 @@ page-break-after : avoid; }
 @media only screen and (min-width: 768px) {
 
 /* 1.ROOT */
-
-/* 1.ROOT */
+body { font-size: 1.1em; }
 /* 2.HEADINGS */
+h1 { font-size: 5em; margin-bottom: 0.25em; }
 /* 3.TYPOGRAPHY */
 /* 4.LINKS */
 /* 5.FIGURES & IMAGES */
@@ -455,6 +459,7 @@ page-break-after : avoid; }
 /* 8.BANNER */
 /* 9.NAVIGATION */
 /* 10.CONTENT */
+#skills { float: right; width: 30%; margin-left: 4em; }
 /* 11.MAIN */
 /* 12.COMPLIMENTARY */
 /* 13.CONTENTINFO */
@@ -469,6 +474,7 @@ page-break-after : avoid; }
 @media only screen and (min-width: 992px) {
 
 /* 1.ROOT */
+#page { width: 890px; }
 /* 2.HEADINGS */
 /* 3.TYPOGRAPHY */
 /* 4.LINKS */
diff --git a/index.html b/index.html
index 99d7a99..63803fa 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
 <head>
 <meta charset="utf-8">
 
-<title>320 and up</title>
+<title>Dan Barber - Web Developer &amp; Designer</title>
 <meta name="description" content="">
 <meta name="author" content="">
 
@@ -31,9 +31,13 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
 <!-- For all browsers -->
 <link rel="stylesheet" href="css/style.css?v=1">
 
-<!-- JavaScript at bottom except for Modernizr -->
+<!-- JavaScript at bottom except for Modernizr and Typekit-->
 <script src="js/libs/modernizr-1.7.min.js"></script>
 
+<!-- Typekit -->
+<script type="text/javascript" src="http://use.typekit.com/ewi2mjz.js"></script>
+<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
 <!-- For iPhone 4 -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
 <!-- For iPad 1-->
@@ -59,143 +63,146 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
 </head>
 
 <body class="clearfix">
-
-<header role="banner" class="clearfix">
-  <h1>Dan Barber</h1>
-  <h2>Web Designer & Developer</h2>
-</header>
-
-<div class="content clearfix">
-
-<div role="main">
-  <section>
-    <h3>Profile</h3>
-    <p>10 years of experience building web sites and web applications. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p>
-  </section>
   
-  <section>
-    <h3>Skills</h3>
-    
-    <ul>
-      <li>
-        <h4>HTML/CSS</h4>
-        <p>Excellent knowledge of standards and browser engines.</p>
-      </li>
-      <li>
-        <h4>PHP</h4>
-        <p>Expert level.</p>
-      </li>
-      <li>
-        <h4>SQL/MySQL/PostgreSQL</h4>
-        <p>Excellent knowledge of SQL and configuration.</p>
-      </li>
-      <li>
-        <h4>Javascript/jQuery</h4>
-        <p>Sound working knowledge</p>
-      </li>
-      <li>
-        <h4>Typography</h4>
-        <p>Good working knowledge.</p>
-      </li>
-      <li>
-        <h4>Photoshop/GIMP</h4>
-        <p>Good working knowledge.</p>
-      </li>
-      <li>
-        <h4>Linux Servers</h4>
-        <p>Web (Apache), MySQL, PostgreSQL, DNS, Samba</p>
-      </li>
-      <li>
-        <h4>Networking</h4>
-        <p>Good knowledge of cabling, routing and protocols.</p>
-      </li>
-    </ul>
-  </section>
-  
-  <section>
-    <h3>Experience</h3>
-    
-    <ul>
-      <li>
-        <h4>Abiquo</h4>
-        <p>June 2010&ndash;Present</p>
-        <p>[to be confimed]</p>
-      </li>
-      <li>
-        <h4>Deep Blue Sound</h4>
-        <p>Aug 2008&ndash;June 2010</p>
-        <p>Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.</p>
-      </li>
-      <li>
-        <h4>Footwork Solutions</h4>
-        <p>Nov 2002&ndash;Aug 2008</p>
-        <p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a><br />I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.</p>
-      </li>
-      <li>
-        <h4>Granite Internet</h4>
-        <p>2000&ndash;2002</p>
-        <p>Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.</p>
-      </li>
-      <li>
-        <h4>North Devon Journal</h4>
-        <p>1998&ndash;2000</p>
-        <p>Set basic adverts using QuarkXpress and was responsible for laying out the classified pages. Learnt a lot about typography.</p>
-      </li>
-    </ul>
-  </section>
-  
-  <section>
-    <h3>Portfolio</h3>
-    
-    <ul>
-      <li>
-        <h4>NeoMPC</h4>
-        <p><a href="http://pixelhum.com/neompc">pixelhum.com/neompc</a></p>
-        <p>Web based MPD client. Design and execution. Built on PHP and jQuery and uses mpd.class.php.</p>
-      </li>
-      <li>
-        <h4>Footwork Solutions</h4>
-        <p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a></p>
-        <p>Company logo and site design. I built the HTML for the Drupal template.</p>
-      </li>
-      <li>
-        <h4>Halo</h4>
-        <p>haloteam.com</p>
-        <p>Hosted care co-ordination system for drug treatment agencies. Design, initial implementation and ongoing development of key modules.</p>
-      </li>
-      <li>
-        <h4>Dan Barber Photo</h4>
-        <p><a href="http://danbarberphoto.com">danbarberphoto.com</a></p>
-        <p>My own photography portfolio site. Designed and implemented the whole site using Ruby on Rails and jQuery, including backend admin pages.</p>
-      </li>
-      <li>
-        <h4>Dan &amp; Katie</h4>
-        <p><a href="http://wedding.coweyes.co.uk">wedding.coweyes.co.uk</a></p>
-        <p>My own wedding photo site. Design and implementation of theme for ZenPhoto.</p>
-      </li>
-    </ul>
-  </section>
-  
-  <section>
-    <h3>Interests</h3>
-    
-    <ul>
-      <li>Drumming</li>
-      <li>Music</li>
-      <li>Sound Engineering &amp; Recording</li>
-      <li>Photography</li>
-      <li>Cycling</li>
-    </ul>
-  </section>
-</div>
+  <div id="page">
 
-<div role="complementary">
-</div>
+    <header role="banner" class="clearfix">
+      <h1>Dan Barber</h1>
+      <h2>Web Designer &amp;&nbsp;Developer</h2>
+    </header>
 
-</div>
+    <div class="content clearfix">
 
-<footer role="contentinfo" class="clearfix">
-</footer>
+    <div role="main">
+      <section id="profile">
+        <h3>Profile</h3>
+        <p>10 years of experience building web sites and web applications. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p>
+      </section>
+  
+      <section id="skills">
+        <h3>Skills</h3>
+    
+        <ul>
+          <li>
+            <h4>HTML/CSS</h4>
+            <p>Excellent knowledge of standards and browser engines.</p>
+          </li>
+          <li>
+            <h4>PHP</h4>
+            <p>Expert level.</p>
+          </li>
+          <li>
+            <h4>SQL/MySQL/PostgreSQL</h4>
+            <p>Excellent knowledge of SQL and configuration.</p>
+          </li>
+          <li>
+            <h4>Javascript/jQuery</h4>
+            <p>Sound working knowledge</p>
+          </li>
+          <li>
+            <h4>Typography</h4>
+            <p>Good working knowledge.</p>
+          </li>
+          <li>
+            <h4>Photoshop/GIMP</h4>
+            <p>Good working knowledge.</p>
+          </li>
+          <li>
+            <h4>Linux Servers</h4>
+            <p>Web (Apache), MySQL, PostgreSQL, DNS, Samba</p>
+          </li>
+          <li>
+            <h4>Networking</h4>
+            <p>Good knowledge of cabling, routing and protocols.</p>
+          </li>
+        </ul>
+      </section>
+  
+      <section id="experience">
+        <h3>Experience</h3>
+    
+        <ul>
+          <li>
+            <h4>Abiquo</h4>
+            <p>June 2010&ndash;Present</p>
+            <p>[to be confimed]</p>
+          </li>
+          <li>
+            <h4>Deep Blue Sound</h4>
+            <p>Aug 2008&ndash;June 2010</p>
+            <p>Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.</p>
+          </li>
+          <li>
+            <h4>Footwork Solutions</h4>
+            <p>Nov 2002&ndash;Aug 2008</p>
+            <p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a><br />I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.</p>
+          </li>
+          <li>
+            <h4>Granite Internet</h4>
+            <p>2000&ndash;2002</p>
+            <p>Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.</p>
+          </li>
+          <li>
+            <h4>North Devon Journal</h4>
+            <p>1998&ndash;2000</p>
+            <p>Set basic adverts using QuarkXpress and was responsible for laying out the classified pages. Learnt a lot about typography.</p>
+          </li>
+        </ul>
+      </section>
+  
+      <section id="portfolio">
+        <h3>Portfolio</h3>
+    
+        <ul>
+          <li>
+            <h4>NeoMPC</h4>
+            <p><a href="http://pixelhum.com/neompc">pixelhum.com/neompc</a></p>
+            <p>Web based MPD client. Design and execution. Built on PHP and jQuery and uses mpd.class.php.</p>
+          </li>
+          <li>
+            <h4>Footwork Solutions</h4>
+            <p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a></p>
+            <p>Company logo and site design. I built the HTML for the Drupal template.</p>
+          </li>
+          <li>
+            <h4>Halo</h4>
+            <p>haloteam.com</p>
+            <p>Hosted care co-ordination system for drug treatment agencies. Design, initial implementation and ongoing development of key modules.</p>
+          </li>
+          <li>
+            <h4>Dan Barber Photo</h4>
+            <p><a href="http://danbarberphoto.com">danbarberphoto.com</a></p>
+            <p>My own photography portfolio site. Designed and implemented the whole site using Ruby on Rails and jQuery, including backend admin pages.</p>
+          </li>
+          <li>
+            <h4>Dan &amp; Katie</h4>
+            <p><a href="http://wedding.coweyes.co.uk">wedding.coweyes.co.uk</a></p>
+            <p>My own wedding photo site. Design and implementation of theme for ZenPhoto.</p>
+          </li>
+        </ul>
+      </section>
+  
+      <section id="interests">
+        <h3>Interests</h3>
+    
+        <ul>
+          <li>Drumming</li>
+          <li>Music</li>
+          <li>Sound Engineering &amp; Recording</li>
+          <li>Photography</li>
+          <li>Cycling</li>
+        </ul>
+      </section>
+    </div>
+
+    <div role="complementary">
+    </div>
+
+    </div>
+
+    <footer role="contentinfo" class="clearfix">
+    </footer>
+  </div>
 
 <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
