diff --git a/images/checker.png b/images/checker.png
new file mode 100644
index 0000000..7a65b23
Binary files /dev/null and b/images/checker.png differ
diff --git a/index.html b/index.html
index 677d18e..e99a807 100644
--- a/index.html
+++ b/index.html
@@ -1,36 +1,32 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
   <head>
-    <meta charset='utf-8'>
+    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <meta name="description" content="Anyproxy : A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.">
+    <title>Anyproxy by alibaba</title>
 
-    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
+    <link rel="stylesheet" href="stylesheets/styles.css">
+    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
+    <script src="javascripts/scale.fix.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
-    <title>Anyproxy</title>
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
   </head>
-
   <body>
-
-    <!-- HEADER -->
-    <div id="header_wrap" class="outer">
-        <header class="inner">
-          <a id="forkme_banner" href="https://github.com/alibaba/anyproxy">View on GitHub</a>
-
-          <h1 id="project_title">Anyproxy</h1>
-          <h2 id="project_tagline">A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.</h2>
-
-            <section id="downloads">
-              <a class="zip_download_link" href="https://github.com/alibaba/anyproxy/zipball/master">Download this project as a .zip file</a>
-              <a class="tar_download_link" href="https://github.com/alibaba/anyproxy/tarball/master">Download this project as a tar.gz file</a>
-            </section>
-        </header>
-    </div>
-
-    <!-- MAIN CONTENT -->
-    <div id="main_content_wrap" class="outer">
-      <section id="main_content" class="inner">
+    <div class="wrapper">
+      <header>
+        <h1>Anyproxy</h1>
+        <p>A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.</p>
+        <p class="view"><a href="https://github.com/alibaba/anyproxy">View the Project on GitHub <small>alibaba/anyproxy</small></a></p>
+        <ul>
+          <li><a href="https://github.com/alibaba/anyproxy/zipball/master">Download <strong>ZIP File</strong></a></li>
+          <li><a href="https://github.com/alibaba/anyproxy/tarball/master">Download <strong>TAR Ball</strong></a></li>
+          <li><a href="https://github.com/alibaba/anyproxy">View On <strong>GitHub</strong></a></li>
+        </ul>
+      </header>
+      <section>
         <h1>
 <a id="anyproxy" class="anchor" href="#anyproxy" aria-hidden="true"><span class="octicon octicon-link"></span></a>anyproxy</h1>
 
@@ -243,16 +239,11 @@
 </ul>
       </section>
     </div>
-
-    <!-- FOOTER  -->
-    <div id="footer_wrap" class="outer">
-      <footer class="inner">
-        <p class="copyright">Anyproxy maintained by <a href="https://github.com/alibaba">alibaba</a></p>
-        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
-      </footer>
-    </div>
-
+    <footer>
+      <p>Project maintained by <a href="https://github.com/alibaba">alibaba</a></p>
+      <p>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></p>
+    </footer>
+    <!--[if !IE]><script>fixScale(document);</script><![endif]-->
     
-
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/javascripts/scale.fix.js b/javascripts/scale.fix.js
index 87a40ca..08716c0 100644
--- a/javascripts/scale.fix.js
+++ b/javascripts/scale.fix.js
@@ -1,17 +1,20 @@
-var metas = document.getElementsByTagName('meta');
-var i;
-if (navigator.userAgent.match(/iPhone/i)) {
-  for (i=0; i<metas.length; i++) {
-    if (metas[i].name == "viewport") {
-      metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
-    }
-  }
-  document.addEventListener("gesturestart", gestureStart, false);
-}
-function gestureStart() {
-  for (i=0; i<metas.length; i++) {
-    if (metas[i].name == "viewport") {
-      metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
-    }
-  }
-}
\ No newline at end of file
+fixScale = function(doc) {
+
+	var addEvent = 'addEventListener',
+	    type = 'gesturestart',
+	    qsa = 'querySelectorAll',
+	    scales = [1, 1],
+	    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
+
+	function fix() {
+		meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
+		doc.removeEventListener(type, fix, true);
+	}
+
+	if ((meta = meta[meta.length - 1]) && addEvent in doc) {
+		fix();
+		scales = [.25, 1.6];
+		doc[addEvent](type, fix, true);
+	}
+
+};
\ No newline at end of file
diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css
index e65cedf..1926cfd 100644
--- a/stylesheets/pygment_trac.css
+++ b/stylesheets/pygment_trac.css
@@ -1,70 +1,60 @@
-.highlight .hll { background-color: #ffffcc }
-.highlight  { background: #f0f3f3; }
-.highlight .c { color: #0099FF; font-style: italic } /* Comment */
-.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
-.highlight .k { color: #006699; font-weight: bold } /* Keyword */
-.highlight .o { color: #555555 } /* Operator */
-.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #009999 } /* Comment.Preproc */
-.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
+.highlight .hll { background-color: #49483e }
+.highlight  { background: #3A3C42; color: #f8f8f2 }
+.highlight .c { color: #75715e } /* Comment */
+.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+.highlight .k { color: #66d9ef } /* Keyword */
+.highlight .l { color: #ae81ff } /* Literal */
+.highlight .n { color: #f8f8f2 } /* Name */
+.highlight .o { color: #f92672 } /* Operator */
+.highlight .p { color: #f8f8f2 } /* Punctuation */
+.highlight .cm { color: #75715e } /* Comment.Multiline */
+.highlight .cp { color: #75715e } /* Comment.Preproc */
+.highlight .c1 { color: #75715e } /* Comment.Single */
+.highlight .cs { color: #75715e } /* Comment.Special */
 .highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #FF0000 } /* Generic.Error */
-.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
-.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
-.highlight .go { color: #AAAAAA } /* Generic.Output */
-.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
 .highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
-.highlight .gt { color: #99CC66 } /* Generic.Traceback */
-.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #006699 } /* Keyword.Pseudo */
-.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #FF6600 } /* Literal.Number */
-.highlight .s { color: #CC3300 } /* Literal.String */
-.highlight .na { color: #330099 } /* Name.Attribute */
-.highlight .nb { color: #336666 } /* Name.Builtin */
-.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
-.highlight .no { color: #336600 } /* Name.Constant */
-.highlight .nd { color: #9999FF } /* Name.Decorator */
-.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
-.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #CC00FF } /* Name.Function */
-.highlight .nl { color: #9999FF } /* Name.Label */
-.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
-.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #003333 } /* Name.Variable */
-.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
-.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
-.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
-.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
-.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
-.highlight .sc { color: #CC3300 } /* Literal.String.Char */
-.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
-.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
-.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
-.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
-.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
-.highlight .sx { color: #CC3300 } /* Literal.String.Other */
-.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
-.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
-.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
-.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #003333 } /* Name.Variable.Class */
-.highlight .vg { color: #003333 } /* Name.Variable.Global */
-.highlight .vi { color: #003333 } /* Name.Variable.Instance */
-.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
-
-.type-csharp .highlight .k { color: #0000FF }
-.type-csharp .highlight .kt { color: #0000FF }
-.type-csharp .highlight .nf { color: #000000; font-weight: normal }
-.type-csharp .highlight .nc { color: #2B91AF }
-.type-csharp .highlight .nn { color: #000000 }
-.type-csharp .highlight .s { color: #A31515 }
-.type-csharp .highlight .sc { color: #A31515 }
+.highlight .kc { color: #66d9ef } /* Keyword.Constant */
+.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+.highlight .kn { color: #f92672 } /* Keyword.Namespace */
+.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+.highlight .kt { color: #66d9ef } /* Keyword.Type */
+.highlight .ld { color: #e6db74 } /* Literal.Date */
+.highlight .m { color: #ae81ff } /* Literal.Number */
+.highlight .s { color: #e6db74 } /* Literal.String */
+.highlight .na { color: #a6e22e } /* Name.Attribute */
+.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+.highlight .nc { color: #a6e22e } /* Name.Class */
+.highlight .no { color: #66d9ef } /* Name.Constant */
+.highlight .nd { color: #a6e22e } /* Name.Decorator */
+.highlight .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight .ne { color: #a6e22e } /* Name.Exception */
+.highlight .nf { color: #a6e22e } /* Name.Function */
+.highlight .nl { color: #f8f8f2 } /* Name.Label */
+.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight .nx { color: #a6e22e } /* Name.Other */
+.highlight .py { color: #f8f8f2 } /* Name.Property */
+.highlight .nt { color: #f92672 } /* Name.Tag */
+.highlight .nv { color: #f8f8f2 } /* Name.Variable */
+.highlight .ow { color: #f92672 } /* Operator.Word */
+.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+.highlight .sc { color: #e6db74 } /* Literal.String.Char */
+.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+.highlight .se { color: #ae81ff } /* Literal.String.Escape */
+.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+.highlight .sx { color: #e6db74 } /* Literal.String.Other */
+.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index dacf2e1..466b9d6 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,255 +1,356 @@
 @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
+html {
+  background: #6C7989;
+  background: #6c7989 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7989), color-stop(100%, #434b55)) fixed;
+  background: #6c7989 -webkit-linear-gradient(#6c7989, #434b55) fixed;
+  background: #6c7989 -moz-linear-gradient(#6c7989, #434b55) fixed;
+  background: #6c7989 -o-linear-gradient(#6c7989, #434b55) fixed;
+  background: #6c7989 -ms-linear-gradient(#6c7989, #434b55) fixed;
+  background: #6c7989 linear-gradient(#6c7989, #434b55) fixed;
+}
 
 body {
-  padding:50px;
-  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color:#777;
-  font-weight:300;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color:#222;
-  margin:0 0 20px;
-}
-
-p, ul, ol, table, pre, dl {
-  margin:0 0 20px;
-}
-
-h1, h2, h3 {
-  line-height:1.1;
-}
-
-h1 {
-  font-size:28px;
-}
-
-h2 {
-  color:#393939;
-}
-
-h3, h4, h5, h6 {
-  color:#494949;
-}
-
-a {
-  color:#39c;
-  font-weight:400;
-  text-decoration:none;
-}
-
-a small {
-  font-size:11px;
-  color:#777;
-  margin-top:-0.6em;
-  display:block;
+  padding: 50px 0;
+  margin: 0;
+  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #555;
+  font-weight: 300;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy82LzEygrTcTAAAAFRJREFUSIljfPDggZRf5RIGGNjUHsNATz6jXmSL1Kb2GLiAX+USBnrymRgGGDCORgFmoNAXjEbBaBSMRsFoFIxGwWgUjEbBaBSMRsFoFIxGwWgUAABYNujumib3wAAAAABJRU5ErkJggg==') fixed;
 }
 
 .wrapper {
-  width:860px;
-  margin:0 auto;
+  width: 640px;
+  margin: 0 auto;
+  background: #DEDEDE;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
 }
 
-blockquote {
-  border-left:1px solid #e5e5e5;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
+header, section, footer {
+  display: block;
 }
 
-code, pre {
-  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-  color:#333;
-  font-size:12px;
+a {
+  color: #069;
+  text-decoration: none;
 }
 
-pre {
-  padding:8px 15px;
-  background: #f8f8f8;  
-  border-radius:5px;
-  border:1px solid #e5e5e5;
-  overflow-x: auto;
-}
-
-table {
-  width:100%;
-  border-collapse:collapse;
-}
-
-th, td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
-}
-
-dt {
-  color:#444;
-  font-weight:700;
-}
-
-th {
-  color:#444;
-}
-
-img {
-  max-width:100%;
-}
-
-header {
-  width:270px;
-  float:left;
-  position:fixed;
-}
-
-header ul {
-  list-style:none;
-  height:40px;
-  
-  padding:0;
-  
-  background: #eee;
-  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
-  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  
-  border-radius:5px;
-  border:1px solid #d2d2d2;
-  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
-  width:270px;
-}
-
-header li {
-  width:89px;
-  float:left;
-  border-right:1px solid #d2d2d2;
-  height:40px;
-}
-
-header ul a {
-  line-height:1;
-  font-size:11px;
-  color:#999;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:40px;
+p {
+  margin: 0 0 20px;
+  padding: 0;
 }
 
 strong {
-  color:#222;
-  font-weight:700;
+  color: #222;
+  font-weight: 700;
 }
 
+header {
+  -webkit-border-radius: 8px 8px 0 0;
+  -moz-border-radius: 8px 8px 0 0;
+  -ms-border-radius: 8px 8px 0 0;
+  -o-border-radius: 8px 8px 0 0;
+  border-radius: 8px 8px 0 0;
+  background: #C6EAFA;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ddfbfc), color-stop(100%, #c6eafa));
+  background: -webkit-linear-gradient(#ddfbfc, #c6eafa);
+  background: -moz-linear-gradient(#ddfbfc, #c6eafa);
+  background: -o-linear-gradient(#ddfbfc, #c6eafa);
+  background: -ms-linear-gradient(#ddfbfc, #c6eafa);
+  background: linear-gradient(#ddfbfc, #c6eafa);
+  position: relative;
+  padding: 15px 20px;
+  border-bottom: 1px solid #B2D2E1;
+}
+header h1 {
+  margin: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 1.2;
+  color: #069;
+  text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
+}
+header.without-description h1 {
+  margin: 10px 0;
+}
+header p {
+  margin: 0;
+  color: #61778B;
+  width: 300px;
+  font-size: 13px;
+}
+header p.view {
+  display: none;
+  font-weight: 700;
+  text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
+  -webkit-font-smoothing: antialiased;
+}
+header p.view a {
+  color: #06c;
+}
+header p.view small {
+  font-weight: 400;
+}
+header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  z-index: 1;
+  right: 20px;
+  top: 20px;
+  height: 38px;
+  padding: 1px 0;
+  background: #5198DF;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77b9fb), color-stop(100%, #3782cd));
+  background: -webkit-linear-gradient(#77b9fb, #3782cd);
+  background: -moz-linear-gradient(#77b9fb, #3782cd);
+  background: -o-linear-gradient(#77b9fb, #3782cd);
+  background: -ms-linear-gradient(#77b9fb, #3782cd);
+  background: linear-gradient(#77b9fb, #3782cd);
+  border-radius: 5px;
+  -webkit-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
+  -moz-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
+  box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
+  width: auto;
+}
+header ul:before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  left: -5px;
+  top: -4px;
+  right: -5px;
+  bottom: -6px;
+  background: rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
+}
+header ul li {
+  width: 79px;
+  float: left;
+  border-right: 1px solid #3A7CBE;
+  height: 38px;
+}
+header ul li.single {
+  border: none;
+}
 header ul li + li {
-  width:88px;
-  border-left:1px solid #fff;
+  width: 78px;
+  border-left: 1px solid #8BBEF3;
 }
-
 header ul li + li + li {
-  border-right:none;
-  width:89px;
+  border-right: none;
+  width: 79px;
+}
+header ul a {
+  line-height: 1;
+  font-size: 11px;
+  color: #fff;
+  color: rgba(255, 255, 255, 0.8);
+  display: block;
+  text-align: center;
+  font-weight: 400;
+  padding-top: 6px;
+  height: 40px;
+  text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
 }
-
 header ul a strong {
-  font-size:14px;
-  display:block;
-  color:#222;
+  font-size: 14px;
+  display: block;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
 }
 
 section {
-  width:500px;
-  float:right;
-  padding-bottom:50px;
+  padding: 15px 20px;
+  font-size: 15px;
+  border-top: 1px solid #fff;
+  background: -webkit-gradient(linear, 50% 0%, 50% 700, color-stop(0%, #fafafa), color-stop(100%, #dedede));
+  background: -webkit-linear-gradient(#fafafa, #dedede 700px);
+  background: -moz-linear-gradient(#fafafa, #dedede 700px);
+  background: -o-linear-gradient(#fafafa, #dedede 700px);
+  background: -ms-linear-gradient(#fafafa, #dedede 700px);
+  background: linear-gradient(#fafafa, #dedede 700px);
+  -webkit-border-radius: 0 0 8px 8px;
+  -moz-border-radius: 0 0 8px 8px;
+  -ms-border-radius: 0 0 8px 8px;
+  -o-border-radius: 0 0 8px 8px;
+  border-radius: 0 0 8px 8px;
+  position: relative;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #222;
+  padding: 0;
+  margin: 0 0 20px;
+  line-height: 1.2;
+}
+
+p, ul, ol, table, pre, dl {
+  margin: 0 0 20px;
+}
+
+h1, h2, h3 {
+  line-height: 1.1;
+}
+
+h1 {
+  font-size: 28px;
+}
+
+h2 {
+  color: #393939;
+}
+
+h3, h4, h5, h6 {
+  color: #494949;
+}
+
+blockquote {
+  margin: 0 -20px 20px;
+  padding: 15px 20px 1px 40px;
+  font-style: italic;
+  background: #ccc;
+  background: rgba(0, 0, 0, 0.06);
+  color: #222;
+}
+
+img {
+  max-width: 100%;
+}
+
+code, pre {
+  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+  color: #333;
+  font-size: 12px;
+  overflow-x: auto;
+}
+
+pre {
+  padding: 20px;
+  background: #3A3C42;
+  color: #f8f8f2;
+  margin: 0 -20px 20px;
+}
+pre code {
+  color: #f8f8f2;
+}
+li pre {
+  margin-left: -60px;
+  padding-left: 60px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  text-align: left;
+  padding: 5px 10px;
+  border-bottom: 1px solid #aaa;
+}
+
+dt {
+  color: #222;
+  font-weight: 700;
+}
+
+th {
+  color: #222;
 }
 
 small {
-  font-size:11px;
+  font-size: 11px;
 }
 
 hr {
-  border:0;
-  background:#e5e5e5;
-  height:1px;
-  margin:0 0 20px;
+  border: 0;
+  background: #aaa;
+  height: 1px;
+  margin: 0 0 20px;
 }
 
 footer {
-  width:270px;
-  float:left;
-  position:fixed;
-  bottom:50px;
+  width: 640px;
+  margin: 0 auto;
+  padding: 20px 0 0;
+  color: #ccc;
+  overflow: hidden;
+}
+footer a {
+  color: #fff;
+  font-weight: bold;
+}
+footer p {
+  float: left;
+}
+footer p + p {
+  float: right;
 }
 
-@media print, screen and (max-width: 960px) {
-  
-  div.wrapper {
-    width:auto;
-    margin:0;
-  }
-  
-  header, section, footer {
-    float:none;
-    position:static;
-    width:auto;
-  }
-  
-  header {
-    padding-right:320px;
-  }
-  
-  section {
-    border:1px solid #e5e5e5;
-    border-width:1px 0;
-    padding:20px 0;
-    margin:0 0 20px;
-  }
-  
-  header a small {
-    display:inline;
-  }
-  
-  header ul {
-    position:absolute;
-    right:50px;
-    top:52px;
-  }
-}
-
-@media print, screen and (max-width: 720px) {
+@media print, screen and (max-width: 740px) {
   body {
-    word-wrap:break-word;
+    padding: 0;
   }
-  
-  header {
-    padding:0;
+
+  .wrapper {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    -ms-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    width: 100%;
   }
-  
-  header ul, header p.view {
-    position:static;
+
+  footer {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    -ms-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0;
+    padding: 20px;
+    width: auto;
   }
-  
-  pre, code {
-    word-wrap:normal;
+  footer p {
+    float: none;
+    margin: 0;
+  }
+  footer p + p {
+    float: none;
   }
 }
-
-@media print, screen and (max-width: 480px) {
-  body {
-    padding:15px;
-  }
-  
+@media print, screen and (max-width:580px) {
   header ul {
-    display:none;
+    display: none;
+  }
+
+  header p.view {
+    display: block;
+  }
+
+  header p {
+    width: 100%;
   }
 }
-
 @media print {
-  body {
-    padding:0.4in;
-    font-size:12pt;
-    color:#444;
+  header p.view a small:before {
+    content: 'at http://github.com/';
   }
 }
