added a working theme with screenshots

28 files changed, 3143 insertions, 21 deletions

diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 16ba845..0000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2016 Parsia Hakimian
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..24ad38f
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Parsia Hakimian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..17a5fb4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,259 @@
+# Hugo-Octopress
+Hugo-Octopress is a port of the classic [Octopress][octopress-link] theme to [Hugo][hugo-link].
+
+[insert screenshot here]
+
+## Contents
+- [Config file parameters](#config)
+- [Code highlight](#highlight)
+- [Navigation menu](#menu)
+- [Markdown options](#markdown)
+- [Sidebar](#sidebarlinks)
+- [Shortcodes](#shortcodes)
+  - [Code caption](#codecaption)
+  - [Image caption](#imgcap)
+- [License page](#licensepage)
+- [Issues/TODO](#issues)
+- [Attribution](#attribution)
+- [Ported by](#porterby)
+- [Theme license](#themelicense)
+
+
+## <a name="config"></a>Configuration
+This section talks about parameters in the [configuration file](https://gohugo.io/overview/configuration/) and how they can be used to customize the output. Below is a sample ``config.toml`` file with comments:
+
+``` python
+baseurl = "http://example.com/"
+disablePathToLower = true
+languageCode = "en-us"
+theme = "hugo-octopress"
+
+# this will appear in the header at the top of the page and in the landing page's title
+title = "Parsia's Den"
+
+# number of blog posts displayed in each page
+paginate = 6
+
+# change the article links
+[permalinks]
+post = "/blog/:year-:month-:day-:title/"
+
+# to generate tags and categories
+# tags are generated using the template hugo-octopress/layouts/indexes/tags.html
+# categories are generated using the template hugo-octopress/layouts/indexes/categories.html
+# if you change anything here, rename the templates/directories accordingly
+[indexes]
+  tag = "tags"
+  category = "categories"
+
+[params]
+
+  # number of recent posts that will be shown in the sidebar - default is 5
+  SidebarRecentLimit = 5
+
+  # if false, all of the post will appear on front page (and in pagination) - not recommended
+  truncate = true
+
+  # author's name (this will appear in metadata and at the bottom of posts)
+  author = "Site Author"
+
+  # appears in the site header under website title
+  subtitle = "Site Subtitle"
+
+  # text of the Continue Reading label.
+  # &rarr; == right arrow, but it gets messed up in the string so it is added to hugo-octopress/layouts/index.html manually
+  continue_reading = "Would you like to know more?"
+
+  # disqus - simply enter your disqus - using the template from https://gohugo.io/extras/comments/ at /hugo-octopress/layouts/partials/disqus.html that disables disqus when running on localhost (if you are testing it offline remember to comment out the if in the template that checks for localhost)
+  # the template is injected into the pages in /hugo-octopress/layouts/partials/post-footer.html which is in every post (and not pages like license)
+  disqusShortname = "your disqus short name"
+
+  # Google analytics - _internal/googleanalyrics.html in injected in hugo-octopress/layouts/partials/header.html
+  googleAnalytics = "Your Google Analytics tracking code"
+
+  # switch to true to enable RSS icon link in the navigation menu
+  rss = true  
+
+  # Website's default description used in meta tags
+  defaultDescription = ""
+
+  # keywords used in meta tags
+  # does this even work in action?
+  # defaultKeywords = ["keyword1" , "keyword2" , "keyword3" , "keyword4"]
+
+```
+
+## <a name="highlight"></a>Code highlight
+Octopress classic theme uses the pygments' `solarized dark` theme. It is not installed by default. It should be installed from https://github.com/john2x/solarized-pygment.git. Then there are three options:
+
+* solarized_light: default
+* solarized_dark: the default one
+* solarized_dark256
+
+The following options in `config.toml` modify the behavior:
+
+```
+[params]
+  # if true, code highlight needs to be done using a css - not supported in this theme
+  pygmentsuseclasses = false
+
+  # if nothing is set, then solarized_light is used
+  pygmentsstyle = "solarized_dark"
+
+  # will make the highlight shortcode and code fences (```) being treated the same way
+  # otherwise they are treated differently
+  pygmentscodefences = true
+
+  # pygment options can be added here
+  # Hugo supports these pygments options: style, encoding, noclasses, hl_lines, linenos - for example:
+  # pygmentsoptions = "linenos=true"
+```
+## <a name="markdown"></a>Markdown options
+
+Blackfriday is Hugo's markdown engine. For a list of options visit https://gohugo.io/overview/configuration/ (scroll down to "Configure Blackfriday rendering"). Blackfriday options can be set in the `config.toml` files as follows:
+
+    [blackfriday]
+      hrefTargetBlank = true # open the external links in a new window
+      fractions = false
+
+## <a name="menu"></a>Navigation menu
+Links to the left of the navigation menu (everything other than the search input field and RSS icon) can be configured here. Navigation menu is generated using the `hugo-octopress/layouts/partials/navigation.html` template.
+
+All links open in a new window except links to root. If the URL is "/" the link will not open in a new window.
+
+Links are sorted according to weight from left to right. For example a link with weight of `-10` will be to the left of another link with weight `0` or `10`. Links can be added to the `config.toml` as follows:
+
+    [[menu.main]]
+      Name = "Blog"
+      URL = "/"
+      weight = -10
+
+    [[menu.main]]
+      Name = "The other guy from Wham!"
+      URL = "https://www.google.com/search?q=andrew+ridgeley"
+      weight = -5
+
+    [[menu.main]]
+      Name = "This theme - add link"
+      URL = "https://www.github.com"
+
+The searchengine can also be customized in the `config.toml` file as follows:
+
+    [params]
+      # search enginer paramete in the navigation menu
+      search_engine_url = "https://www.google.com/search"
+
+## <a name="sidebarlinks"></a>Sidebar links
+The sidebar is generated using the template at `hugo-octopress/layouts/partials/sidebar.html`.
+
+Sidebar links are read from the config file as follows:
+
+    [params]
+      github = "https://github.com/parsiya/"
+      bitbucket = "https://bitbucket.org/parsiya/"
+      twitter = "https://twitter.com/cryptogangsta/"
+      keybase = "https://keybase.io/parsiya/"
+      stackoverflow = ""
+      linkedin = ""
+      googleplus = ""
+      youtube = ""
+      facebook = ""
+
+If more than links are added, then add a `</br>` between the first four and the rest. Code to display links (and the idea to use icons) was taken from [Hyde-x](https://github.com/zyro/hyde-x/).
+
+Icons are from [http://fontawesome.io](http://fontawesome.io) by Dave Gandy. To use icons with square dark backgrounds add `-square`. For example `<i class="fa fa-twitter-square fa-3x"></i>`. Size can be from 1 to 5 or `fa-lg` to be adaptive.
+
+## <a name="shortcodes"></a>Shortcodes
+Creating [shortcodes](https://gohugo.io/extras/shortcodes/) in Hugo was surprisingly easy. I used two plugins in Octopress that I re-created in Hugo using shortcodes. They add captions to code blocks and images. These shortcodes are located at `hugo-octopress/layouts/shortcodes/`
+
+### <a name="codecaption"></a>Code caption
+This shortcode adds a caption to codeblocks. The codeblock is wrapped in a `<figure>` tag and caption is added using `<figcaption>`. It has two parameters, `title` which is the caption of the code block and `lang` which is the language that is passed to the Hugo `highlight` function along with `linenos=true` which adds line numbers to the codeblock.
+
+Shortcode usage (and source) is as follows (please note that parameters are named and not positional):
+
+``` html
+{{< codecaption lang="html" title="Code caption shortcode" >}}
+<figure class="code">
+  <figcaption>
+    <span>{{ .Get "title" }}</span>
+  </figcaption>
+  <div class="codewrapper">
+    {{ highlight .Inner (.Get "lang") "linenos=true" }}
+  </div>
+</figure>
+{{< /codecaption >}}
+```
+
+And will look like this [insert picture of the code renedered in browser].
+
+If the code inside the tag overflows, a horizontal sidebar will be added to the table. It took me a while to achieve this as the `highligh` function created tables that were out of my control. The output from `highlight` is wrapped in `<div class="codewrapper">` and the scrollbar will be for the whole `div`. The following in the `css` (starting from line 2225) enables this behavior:
+
+``` css
+div.codewrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: #002B36;
+}
+```
+
+### <a name="imgcap"></a>Image caption
+This shortcode adds captions to pictures. Due to the way the original `css` file was organized, this shortcode does not use `<figure>` and `<figcaption>`. `Alt` will also be set to `title`.
+
+Usage is as follows (please note that parameters are named and not positional):
+
+``` go
+{{< imgcap caption="Sample caption" src="/images/2016/thetheme/1.png" >}}
+```
+
+Will result in:
+
+``` html
+  <span class="caption-wrapper">
+    <img class="caption" src="/images/2016/thetheme/1.png" title="Sample caption" alt="Sample caption">
+    <span class="caption-text">Sample caption</span>
+  </span>
+```
+
+## <a name="licensepage"></a>License page
+The generated license page will be located at `example.com/license/`. Markdown code for the license page can be anywhere in the content page, however the type of the markdown file should be set to `license` in front material. For example:
+
+    ---
+    title: "License"
+    type: license
+    ---
+
+    License text
+
+Lisence page template is located at: `hugo-octopress\layouts\license\single.html`.
+
+## <a name="issues"></a>Issues/TODO
+
+If you see any issues/bugs or you are looking for some features please use the Github issue tracker. Please keep in my mind that my dayjob is not development and I may be slow in fixing things (or I may ask you to help me with it).
+
+**The css is a mess.** Yes I agree with that. The `css` file is `screen.css` taken from the default Octopress theme. I found it easier to just modify the templates to generate HTML code similar to Octopress and use the `css` file. It's bulky (around 53KBs and 2300 lines) and it probably has code for elements that are never used (also duplicates). It also contains the highlight code.
+
+If you know how to clean it up, please let me know or better yet help me do it :)
+
+**Clean up the theme** from my own website's data.
+
+**Update `theme.toml`**  after code is uploaded to github with repo info and other items.
+
+## <a name="attribution"></a>Attribution
+* [Octopress](octopress-link) is created by [Brandon Mathis](https://github.com/imathis). Octopress source can be found on [https://github.com/imathis/octopress](https://github.com/imathis/octopress).
+
+* Some code was taken from the [Hyde-x](https://github.com/zyro/hyde-x) Hugo theme by [Andrei Mihu](http://andreimihu.com/).
+
+* Sidebar icons are from Font Awesome by Dave Gandy - http://fontawesome.io.
+
+## <a name="Ported by"></a>Ported by
+Ported by Parsia Hakimian:
+
+* website: [parsiya.net](http://parsiya.net)
+* twitter: [@CryptoGangsta](https://twitter.com/cryptogangsta)
+
+## <a name="themelicense"></a>Theme license
+Open sourced under the MIT license [link to MIT license in the repo after upload].
+
+
+[octopress-link]: http://octopress.org
+[hugo-link]: https://gohugo.io
diff --git a/images/Thumbs.db b/images/Thumbs.db
new file mode 100644
index 0000000..2b4246d
--- /dev/null
+++ b/images/Thumbs.db
diff --git a/images/screenshot.png b/images/screenshot.png
new file mode 100644
index 0000000..a916e93
--- /dev/null
+++ b/images/screenshot.png
diff --git a/images/tn.png b/images/tn.png
new file mode 100644
index 0000000..1836852
--- /dev/null
+++ b/images/tn.png
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..b3c5d3e
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,24 @@
+<!-- 404 page -->
+
+{{ partial "header.html" . }}
+
+<div id="main">
+  <div id="content">
+    <div>
+      <article role="article">
+        <header>
+          <h1 class="entry-title">
+            Not Found - 404
+          </h1>
+        </header>
+        <div id="blog-archives" class="category">
+          You can never go back.
+        </div>
+      </article>
+    </div>
+
+    {{ partial "sidebar.html" . }}
+  </div>
+</div>
+
+{{ partial "footer.html" . }}
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/layouts/_default/list.html
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/layouts/_default/single.html
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..0598df7
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,53 @@
+{{ partial "header.html" . }}
+
+<div id="main">
+ <div id="content">
+  <div class="blog-index">
+    {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
+    {{ range $paginator.Pages }}
+    <article>
+      <header>
+        <h1 class="entry-title">
+          <a href="{{ .Permalink }}">{{ .Title }}</a>
+        </h1>
+        <p class="meta">{{ .Date.Format "Jan 2, 2006" }} - {{ .ReadingTime }} minute read - {{ if .Site.Params.disqusShortname }} <a href="{{ .Permalink }}#disqus_thread">Comments</a>{{ end }}
+
+        {{ if isset .Params "categories" }}
+        <!-- <br/> this will make the categories go to the second line and mess with the title -->
+        <!-- in order to make category URLs work, we need to urlize them and then convert them to lowercase
+             e.g. .NET Remoting -urlize-> .NET-Remoting -lowercase-> .net-remoting -->
+        {{ range .Params.categories }}<a class="label" href="{{ "/categories/" | absURL }}{{ . | urlize | lower }}/">{{ . }}</a>{{ end }}
+        {{ end }}</p>
+
+      </header>
+
+        {{ if eq .Site.Params.truncate false }}
+        {{ .Content }}
+        {{ else if .Description }}
+        {{ .Description }}
+          <footer>
+            <a href="{{ .Permalink }}" rel="full-article">{{ if isset .Site.Params "continue_reading" }}{{ .Site.Params.continue_reading }} &rarr;{{ else }}Read On &rarr;{{ end }}</a>
+          </footer>
+        {{ else }}
+          <p>{{ .Summary }}</p>
+
+          {{ if .Truncated }}
+              <footer>
+                  <a href="{{ .Permalink }}" rel="full-article">{{ if isset .Site.Params "continue_reading" }}{{ .Site.Params.continue_reading }} &rarr;{{ else }}Read On &rarr;{{ end }}</a>
+              </footer>
+          {{ end }}
+
+        {{ end }}
+
+    </article>
+    {{ end }}
+    <!-- {{ template "_internal/pagination.html" . }} default pagination -->
+    {{ partial "pagination.html" . }}  <!-- use custom pagination --> 
+
+  </div>
+
+  {{ partial "sidebar.html" . }}    <!-- sidebar -->
+ </div>
+</div>
+
+{{ partial "footer.html" . }}   <!-- footer -->
\ No newline at end of file
diff --git a/layouts/indexes/category.html b/layouts/indexes/category.html
new file mode 100644
index 0000000..52453f0
--- /dev/null
+++ b/layouts/indexes/category.html
@@ -0,0 +1,46 @@
+
+<!-- category page -->
+
+{{ partial "header.html" . }}
+
+<div id="main">
+  <div id="content">
+    <div>
+      <article role="article">
+        <header>
+          <h1 class="entry-title">
+            {{ .Data.Singular | title }}: {{ .Title }}
+          </h1>
+        </header>
+        <div id="blog-archives" class="category">
+          {{ range .Data.Pages }}
+          <h2>
+            {{ .Date | dateFormat "2006"}}
+          </h2>
+          <article>
+            <h1>
+              <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
+            </h1>
+            <time>
+              <span class="month">{{ .Date | dateFormat "Jan" }}</span>
+              <span class="day">{{ .Date | dateFormat "2" }}</span>
+            </time>
+            <footer>
+              <span class="categories"> <!-- show tags -->
+                tags:
+                {{ if isset .Params "categories" }}
+                {{ range .Params.tags }} <a class="category" href="{{ "/tags/" | absURL }}{{ . | urlize | lower }}">{{ . }}</a>{{ end }}
+                {{ end }}
+              </span>
+            </footer>
+          </article>
+          {{ end }}
+        </div>
+      </article>
+    </div>
+
+    {{ partial "sidebar.html" . }}
+  </div>
+</div>
+
+{{ partial "footer.html" . }}
\ No newline at end of file
diff --git a/layouts/indexes/tag.html b/layouts/indexes/tag.html
new file mode 100644
index 0000000..d3ee56d
--- /dev/null
+++ b/layouts/indexes/tag.html
@@ -0,0 +1,51 @@
+
+<!-- tags page -->
+
+{{ partial "header.html" . }}
+
+<div id="main">
+  <div id="content">
+    <div>
+      <article role="article">
+        <header>
+          <h1 class="entry-title">
+            {{ .Data.Singular | title }}: {{ .Title }}
+          </h1>
+        </header>
+        <div id="blog-archives" class="category">
+          {{ range .Data.Pages }}
+          <h2>
+            {{ .Date | dateFormat "2006"}}
+          </h2>
+          <article>
+            <h1>
+              <a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
+            </h1>
+            <time>
+              <span class="month">{{ .Date | dateFormat "Jan" }}</span>
+              <span class="day">{{ .Date | dateFormat "2" }}</span>
+            </time>
+            <footer>
+              <span class="categories"> <!-- show categories and tags -->
+                posted in:
+                {{ if isset .Params "categories" }}
+                {{ range .Params.categories }} <a class="category" href="{{ "/categories/" | absURL }}{{ . | urlize | lower }}">{{ . }}</a>{{ end }}
+                {{ end }}
+              </br>
+                tags:
+                {{ if isset .Params "tags" }}
+                {{ range .Params.tags }} <a class="category" href="{{ "/tags/" | absURL }}{{ . | urlize | lower }}">{{ . }}</a>{{ end }}
+                {{ end }}
+              </span>
+            </footer>
+          </article>
+          {{ end }}
+        </div>
+      </article>
+    </div>
+
+    {{ partial "sidebar.html" . }}
+  </div>
+</div>
+
+{{ partial "footer.html" . }}
diff --git a/layouts/license/single.html b/layouts/license/single.html
new file mode 100644
index 0000000..13ccf45
--- /dev/null
+++ b/layouts/license/single.html
@@ -0,0 +1,26 @@
+
+<!-- License page - works on any markdown file in content with type:license in its header 
+     by default it's in content/license.markdown-->
+
+{{ partial "header.html" . }}
+
+<div id="main">
+  <div id="content">
+    <div>
+      <article class="hentry" role="article">
+        <header>
+          <h1 class="entry-title">
+            License<!-- we don't need page title to be a link -->
+          </h1>
+        </header>
+        <div class="entry-content">
+          {{ .Content }}
+        </div>
+      </article>
+    </div>
+    {{ partial "sidebar.html" . }}
+  </div>
+</div>
+
+{{ partial "footer.html" . }}
+
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html
new file mode 100644
index 0000000..f6f8750
--- /dev/null
+++ b/layouts/partials/disqus.html
@@ -0,0 +1,17 @@
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+
+(function() {
+    // Don't ever inject Disqus on localhost--it creates unwanted
+    // discussions from 'localhost:1313' on your Disqus account...
+    // if (window.location.hostname == "localhost")
+    //     return;
+
+    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+    var disqus_shortname = '{{ .Site.Params.disqusShortname }}';
+    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..0610940
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,24 @@
+
+<!-- Will this even work?
+if we want to do theme specific highlighting - incase we don't want to do solarized highlighting via pygment and want to do with js
+{{ if isset .Site.Params "highlight" }}<script src="{{ "/js/highlight.pack.js" | absURL }}"></script>
+<script>hljs.initHighlightingOnLoad();</script>{{ end }}
+-->
+
+<footer role="contentinfo">
+  <p>Copyright &copy; {{ .Now.Format "2006" }} {{ .Site.Params.author }} - <a href="{{ "/license/" | absURL }}">License</a> - 
+  <span class="credit">Powered by <a target="_blank" href="https://gohugo.io">Hugo</a> and <a target="_blank" href="https://github.com/parsiya/hugo-octopress/">Hugo-Octopress</a> theme.
+</p>
+
+</footer>
+
+{{ with .Site.Params.googleAnalytics }}
+<script>
+  var _gaq=[['_setAccount','{{ . }}'],['_trackPageview']];
+  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+  s.parentNode.insertBefore(g,s)}(document,'script'));
+</script>
+{{ end }}
+</body>
+</html>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..135cebb
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+  <link href="http://gmpg.org/xfn/11" rel="profile">
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+  <!-- added from octo -->
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
+
+  <!--Fonts from Google"s Web font directory at http://google.com/webfonts added from Octo-->
+  <link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+
+  <!-- goes into the title bar -->
+  <title>{{ .Title }}</title>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="{{ "/css/hugo-octopress.css" | absURL }}">
+
+  <!-- For sidebar icons - TODO: find local icons I guess-->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
+  <!-- if you want your own highlight.css -->
+  <!-- 
+  {{ if isset .Site.Params "highlight" }}<link rel="stylesheet" href="{{ "/css/highlight/" | absURL }}{{ .Site.Params.highlight }}.css">{{ end }}
+  -->
+
+  <!-- Icons -->
+  <link href="{{ "/favicon.png" | absURL }}" rel="icon">
+
+  <!-- RSS -->
+  {{ $siteTitle := .Site.Title }}
+  {{ $authorName := .Site.Author.name }}
+  
+  <!--
+  {{ with .RSSLink }}<link href="{{ . }}" rel="alternate" type="application/rss+xml" title="{{ $siteTitle }} &middot; {{ $authorName }}" />{{ end }}
+  -->
+
+  {{ with .RSSLink }}<link href="{{ . }}" rel="alternate" type="application/rss+xml" title="{{ $siteTitle }}" />{{ end }}
+
+  <meta name="description" content="{{ if ne .Description "" }}{{ .Description }}{{ else }}{{ .Site.Params.defaultDescription }}{{ end }}">
+  <meta name="keywords" content="{{ range $index, $element := .Keywords }}{{ if gt $index 0 }},{{ end }}{{ . }}{{ else }}{{ .Site.Params.defaultKeywords }}{{ end }}">
+
+  <meta name="author" content="{{ .Site.Params.author }}">
+
+  <!-- find a way to autoamtically put Hugo version here -->
+  <meta name="generator" content="Hugo 0.15" />
+
+  <!-- Google Analytics -->
+  {{ template "_internal/google_analytics.html" . }}
+
+</head>
+<body{{ with .Site.Params.theme }} class="{{ . }}"{{ end }}>
+
+<!-- top header for octopress -->
+<header role="banner">{{ partial "octo-header.html" . }}</header>
+
+<!-- navigation -->
+<nav role="navigation">{{ partial "navigation.html" . }}</nav>
+
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
new file mode 100644
index 0000000..adaec40
--- /dev/null
+++ b/layouts/partials/navigation.html
@@ -0,0 +1,31 @@
+
+<!-- reading menu items from config file -->
+
+<ul class="main-navigation">
+  <!-- do not open links to root in new window - otherwise any other link can be opened in new window -->
+  {{ range .Site.Menus.main }}
+    {{ if eq .URL "/" }}
+      <li><a href="{{ .URL | absURL }}" title="{{ .Name }}">{{ .Name }}</a></li>
+    {{ else }}
+      <li><a href="{{ .URL | absURL }}" target="_blank" title="{{ .Name }}">{{ .Name }}</a></li>
+    {{ end }}
+  {{ end }}
+</ul>
+
+<!-- http://fontawesome.io icon fa-lg adapts it to size (at least it is supposed to) -->
+<ul class="subscription">
+  {{ if .Site.Params.rss }}<a href="{{ "/index.xml" | absURL }}" target="_blank" type="application/rss+xml" title="RSS"><i class="fa fa-rss-square fa-lg"></i></a>{{ end }}
+
+  <!-- If you prefer RSS text (like Octopress) replace the line above with next comment -->
+  <!-- <li><a href="/index.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li> -->
+
+</ul>
+
+{{ if isset .Site.Params "search_engine_url" }}
+<form action="{{ .Site.Params.search_engine_url }}" method="get" target="_blank">
+  <fieldset role="search">
+  	<input class="search" type="text" name="q" results="0" placeholder="Search"/>
+    <input type="hidden" name="q" value="site:{{ "/" | absURL }}" />
+  </fieldset>
+</form>
+{{end}}
diff --git a/layouts/partials/octo-header.html b/layouts/partials/octo-header.html
new file mode 100644
index 0000000..ece9d09
--- /dev/null
+++ b/layouts/partials/octo-header.html
@@ -0,0 +1,5 @@
+<hgroup>
+  <!-- Remember that .Title will refer to the title of the specific page. For index it is the .Site.Title but is different for individual pages -->
+  <h1><a href="{{ "/" | absURL }}">{{ .Site.Title }}</a></h1>
+    <h2>{{ .Site.Params.subtitle }}</h2>
+</hgroup>
\ No newline at end of file
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..ce59635
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,49 @@
+<!-- copy pasted from  tpl/template_embedded.go -->
+<!-- default pagination.html creates <ul class="pagination"> and then a list of links for counters, forwardw and backward
+     while Octopress uses <div class="pagination"> and links inside-->
+
+<!-- this is how octopress implements the pagination links
+<div class="pagination">
+    
+      <a class="prev" href="/blog/page/3/">← Older</a>
+    
+    <a href="/blog/archives">Blog Archives</a>
+    
+    <a class="next" href="/">Newer →</a>
+    
+  </div>
+-->
+
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<div class="pagination">
+
+    {{ with $pag.First }}
+        <!-- if you prefer characters instead use the following line -->
+        <!-- <a href="{{ .URL }}" aria-label="First" class="label-pagination"><span aria-hidden="true">&laquo;&laquo;</span></a> -->
+        <!-- fa-lg is supposedly dynamic size. You can use fa-1x to fa-5x and probably even more, check http://fontawesome.io -->
+        <a href="{{ .URL }}" aria-label="First" class="label-pagination"><i class="fa fa-angle-double-left fa-lg"></i></a>
+    {{ end }}
+
+    {{ if $pag.HasPrev }}
+    <!-- <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" aria-label="Previous" class="label-pagination"><span aria-hidden="true">&laquo;</span></a> -->
+        <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" aria-label="Previous" class="label-pagination"><i class="fa fa-angle-left fa-lg"></i></a>
+    {{ end }}
+
+    {{ range $pag.Pagers }}
+        <a href="{{ .URL }}" class="label-pagination">{{ .PageNumber }}</a>
+    {{ end }}
+
+    {{ if $pag.HasNext }}
+    <!-- <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" aria-label="Next" class="label-pagination"><span aria-hidden="true">&raquo;</span></a> -->
+        <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" aria-label="Next" class="label-pagination"><i class="fa fa-angle-right fa-lg"></i></a>
+    {{ end }} 
+    
+    {{ with $pag.Last }}
+    <!-- <a href="{{ .URL }}" aria-label="Last"><span aria-hidden="true" class="label-pagination">&raquo;&raquo;</span></a> -->
+        <a href="{{ .URL }}" aria-label="Last"><i class="fa fa-angle-double-right fa-lg"></i></a>
+    {{ end }}
+
+</div>
+{{ end }}
+
diff --git a/layouts/partials/post_footer.html b/layouts/partials/post_footer.html
new file mode 100644
index 0000000..5ee00ab
--- /dev/null
+++ b/layouts/partials/post_footer.html
@@ -0,0 +1,40 @@
+<!-- This file contains the footer for each post - do not mistake it with page footer which is in footer.html partial -->
+
+<footer>
+  <p class="meta">
+    <span class="byline author vcard">Posted by <span class="fn">{{ with .Site.Params.author }}{{ . }}{{ end }}</span></span>
+    <!-- can't put the .Date.Format inside the datetime attribute because of double quotes, so it's outside -->
+    <time>{{ .Date.Format "Jan 2, 2006" }}</time>
+    <span class="categories">
+      Tags: 
+        {{ if isset .Params "tags" }}
+        <!-- need to convert the tags to lower for the URLs to work -->
+          {{ range .Params.tags }}<a class="category" href="{{ "/tags/" | absURL }}{{ . | urlize | lower }}">{{ . }}</a>  {{ end }}
+        {{ end }}
+    </span>
+  </p>
+    
+  <!-- For sharing stuff -->
+  <!-- <div class="sharing"> </div> -->
+
+  <!-- PrevInSection and nextInSection point to previous and next page in the same section, in this case "post"
+       this way we won't see other pages.
+       If you don't like it, use .Prev and .Next - if you want to use .Prev and .Next keep in mind that as of Hugo v0.15 they work the other way around
+       meaning that .Prev needs to go to right which will point to the next post and .Next will go to left and will post to previous post - strange
+       This does not happen with InSection ones
+       For more info about template variables: https://gohugo.io/templates/variables/ -->
+
+  <p class="meta">
+    {{ with .PrevInSection }}
+        <a class="basic-alignment left" href="{{ .Permalink }}" title="{{ .LinkTitle }}">{{ .LinkTitle }}</a>
+    {{ end }}
+
+    {{ with .NextInSection }} 
+      <a class="basic-alignment right" href="{{ .Permalink }}" title="{{ .LinkTitle }}">{{ .LinkTitle }}</a>
+    {{ end }}
+  </p>
+
+  {{ partial "disqus.html" . }}
+</footer>
+
+ 
\ No newline at end of file
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
new file mode 100644
index 0000000..0fbe350
--- /dev/null
+++ b/layouts/partials/sidebar.html
@@ -0,0 +1,64 @@
+
+<!-- to modify sidebar width check the css file lines 757 and 765 (for large screens) -->
+
+<aside class="sidebar thirds">
+  <section class="first odd">
+    <h1>Header in sidebar</h1>
+    <p>This is the rest of the sidebar - here's a link to <a target="_blank" href="http://google.com" title="Google">Google</a>.</p>
+    <p>If links are set in config file, there will be links to keybase/github/twitter/linkedin etc.</p>
+
+    <!-- {{ with .Site.Params.tagline }}<p class="lead">{{ . | markdownify }}</p>{{ end }} -->
+  </section>
+
+  <!-- Links in side bar, for example the following links add blog - I have removed them as we have links in the navigation
+  you can also add sidebar links from config file via the .Site.Menus.main  part
+  <ul class="sidebar-nav">
+    <li class="sidebar-nav-item"><a href="{{ "/" | absURL }}">{{ if isset .Site.Params "home"}}{{ .Site.Params.home }}{{ else }}Blog{{ end }}</a></li>
+    {{ range .Site.Menus.main }}
+    <li class="sidebar-nav-item">{{ .Pre }}<a href="{{ .URL | absURL }}">{{ .Name }}</a></li>
+    {{end}}
+  </ul>
+-->
+
+<!-- Font awesome icons - code taken from the Hyde-x theme - "Font Awesome by Dave Gandy - http://fontawesome.io"
+     Icons: https://fortawesome.github.io/Font-Awesome/icons/
+     to give icons square dark backgrounds use them like this: fa fa-key-square
+     size is fa-3x, sizes are 1-5
+ -->
+
+  <ul class="sidebar-nav">
+    <li class="sidebar-nav-item">
+    {{ with .Site.Params.github }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-github fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.bitbucket }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-bitbucket fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.stackOverflow }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-stack-overflow fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.linkedin }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-linkedin fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.googleplus }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-google-plus fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.facebook }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-facebook fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.twitter }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-twitter fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.youtube }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-youtube fa-3x"></i></a>{{ end }}
+    {{ with .Site.Params.keybase }}<a target="_blank" href="{{ . }}" title="{{ . }}"><i class="fa fa-key fa-3x"></i></a>{{ end }} <!-- added keybase -->
+
+    <!-- don't need RSS here anymore -->
+    <!-- {{ if .Site.Params.rss }}<a href="{{ "/index.xml" | absURL }}" type="application/rss+xml" title="RSS"><i class="fa fa-rss-square fa-3x"></i></a>{{ end }} -->
+    </li>
+  </ul>
+
+  <!-- add recent posts - limit is .Site.Params.SidebarRecentLimit - example copied from https://gohugo.io/templates/go-templates/ -->
+  <section class="even">
+    <h1>Recent Posts</h1>
+
+    <!-- check if the number of recent posts is set in config file, otherwise use 5 -->
+    <ul id="recent_posts">
+      {{ $numberofrecentposts := 5 }}
+      {{ if isset .Site.Params "SidebarRecentLimit" }}
+        {{ $numberofrecentposts := .Site.Params.SidebarRecentLimit }}
+      {{ end }}
+      {{range first $numberofrecentposts .Site.Pages }}
+      <li class="post">
+        <a href="{{.RelPermalink}}">{{.Title}}</a>
+      </li>
+      {{ end }}
+    </ul>
+  </section>
+
+</aside>
diff --git a/layouts/post/list.html b/layouts/post/list.html
new file mode 100644
index 0000000..d960919
--- /dev/null
+++ b/layouts/post/list.html
@@ -0,0 +1,6 @@
+{{ partial "header.html" . }}
+
+11111
+
+{{ partial "footer.html" . }}
+
diff --git a/layouts/post/single.html b/layouts/post/single.html
new file mode 100644
index 0000000..378c15e
--- /dev/null
+++ b/layouts/post/single.html
@@ -0,0 +1,31 @@
+{{ partial "header.html" . }}
+
+<div id="main">
+  <div id="content">
+    <div>
+      <article class="hentry" role="article">
+        <header>
+          <h1 class="entry-title">
+            {{ .Title }} <!-- we don't need page title to be a link on the actual page -->
+          </h1>
+          <p class="meta">{{ .Date.Format "Jan 2, 2006" }} - {{ .ReadingTime }} minute read - {{ if .Site.Params.disqusShortname }} <a href="{{ .Permalink }}#disqus_thread">Comments</a>{{ end }}
+
+          <!-- if you want anything in the header between Disqus comments and categories add them here -->
+
+          {{ if isset .Params "categories" }}
+          <!-- <br/> this will make the categories go to the second line and mess with the title -->
+          {{ range .Params.categories }}<a class="label" href="{{ "/categories/" | absURL }}{{ . | urlize | lower }}">{{ . }}</a>{{ end }}
+          {{ end }}</p>
+        </header>
+        <div class="entry-content">
+          {{ .Content }}
+        </div>
+        {{ partial "post_footer.html" . }}
+      </article>
+    </div>
+    {{ partial "sidebar.html" . }}
+  </div>
+</div>
+
+{{ partial "footer.html" . }}
+
diff --git a/layouts/shortcodes/codecaption.html b/layouts/shortcodes/codecaption.html
new file mode 100644
index 0000000..6ce6536
--- /dev/null
+++ b/layouts/shortcodes/codecaption.html
@@ -0,0 +1,20 @@
+
+<!-- codecaption short code - basically this is normal highlighted code with caption on top 
+     example usage (Hugo seems to ignore stuff in this):
+
+     { { < codecaption lang="language e.g. python/csharp" title="captiontitle" > } }
+
+     code to be highlighted
+
+     { { < /codecaption > } } -->
+
+    
+
+<figure class="code">
+  <figcaption>
+  	<span>{{ .Get "title" }}</span>
+  </figcaption>
+  <div class="codewrapper"> 
+    {{ highlight .Inner (.Get "lang") "linenos=true" }}
+  </div>
+</figure>
diff --git a/layouts/shortcodes/imgcap.html b/layouts/shortcodes/imgcap.html
new file mode 100644
index 0000000..9b5297f
--- /dev/null
+++ b/layouts/shortcodes/imgcap.html
@@ -0,0 +1,26 @@
+
+<!-- normal image with caption 
+     sample usage:
+
+     { { < imgcap caption="figurecaption" src="imagesrc" > } }
+
+     { { < imgcap caption="this is a tree" src="/images/2016/gardening/tree1.jpg" > } }     
+
+     alt and title and caption will be the same
+
+-->
+
+<!-- <figure class="imagecaption">
+  <img class="caption" title="{{ .Get "caption" }}" alt="{{ .Get "caption" }}" src="{{ .Get "src" }}"></img>
+  <figcaption>
+    <span class="caption-text">{{ .Get "caption" }}</span>
+  </figcaption>   
+</figure> -->
+
+<!-- imitates the imgcap plugin from Octopress -  -->
+
+
+<span class="caption-wrapper">
+  <img class="caption" src="{{ .Get "src" }}" title="{{ .Get "caption" }}" alt="{{ .Get "caption" }}">
+  <span class="caption-text">{{ .Get "caption" }}</span>
+</span>
\ No newline at end of file
diff --git a/static/css/hugo-octopress.css b/static/css/hugo-octopress.css
new file mode 100644
index 0000000..4ed6da7
--- /dev/null
+++ b/static/css/hugo-octopress.css
@@ -0,0 +1,2270 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: "PT Serif",Georgia,Times,"Times New Roman",serif;
+    
+}
+html {
+    line-height: 1
+}
+ol,
+ul {
+    list-style: none
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+caption,
+th,
+td {
+    text-align: left;
+    font-weight: normal;
+    vertical-align: middle;
+}
+q,
+blockquote {
+    quotes: none
+}
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+    content: "";
+    content: none
+}
+a img {
+    border: none
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+    display: block
+}
+a {
+    color: #1863a1
+}
+a:visited {
+    color: #751590
+}
+a:focus {
+    color: #0181eb
+}
+a:hover {
+    color: #0181eb
+}
+a:active {
+    color: #01579f
+}
+aside.sidebar a {
+    color: #222
+}
+aside.sidebar a:focus {
+    color: #0181eb
+}
+aside.sidebar a:hover {
+    color: #0181eb
+}
+aside.sidebar a:active {
+    color: #01579f
+}
+a {
+    -webkit-transition: color 0.3s;
+    -moz-transition: color 0.3s;
+    -o-transition: color 0.3s;
+    transition: color 0.3s
+}
+html {
+    background: #252525 top left
+}
+body>div {
+    background: #f2f2f2  top left;
+    border-bottom: 1px solid #bfbfbf
+}
+body>div>div {
+    background: #f8f8f8 top left;
+    border-right: 1px solid #e0e0e0
+}
+.heading,
+body>header h1,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif
+}
+.sans,
+body>header h2,
+article header p.meta,
+article>footer,
+#content .blog-index footer,
+html .gist .gist-file .gist-meta,
+#blog-archives a.category,
+#blog-archives time,
+aside.sidebar section,
+body>footer {
+    font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif
+}
+.serif,
+body,
+#content .blog-index a[rel=full-article] {
+    /* font-family: "PT Serif", Georgia, Times, "Times New Roman", serif */
+}
+.mono,
+pre,
+code,
+tt,
+p code,
+li code {
+    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+}
+body>header h1 {
+    font-size: 2.2em;
+    font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
+    font-weight: normal;
+    line-height: 1.2em;
+    margin-bottom: 0.6667em
+}
+body>header h2 {
+    font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif
+}
+body {
+    line-height: 1.5em;
+    color: #222
+}
+h1 {
+    font-size: 2.2em;
+    line-height: 1.2em
+}
+@media only screen and (min-width: 992px) {
+    body {
+        font-size: 1.15em
+    }
+    h1 {
+        font-size: 2.6em;
+        line-height: 1.2em
+    }
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-rendering: optimizelegibility;
+    margin-bottom: 1em;
+    font-weight: bold;
+    margin-top: 1em;
+}
+h2,
+section h1 {
+    font-size: 1.5em
+}
+h3,
+section h2,
+section section h1 {
+    font-size: 1.3em
+}
+h4,
+section h3,
+section section h2,
+section section section h1 {
+    font-size: 1em
+}
+h5,
+section h4,
+section section h3 {
+    font-size: .9em
+}
+h6,
+section h5,
+section section h4,
+section section section h3 {
+    font-size: .8em
+}
+p,
+article blockquote,
+ul,
+ol {
+    margin-bottom: 1em; /* changed this from 1.5em to 1 */
+}
+ul {
+    list-style-type: disc
+}
+ul ul {
+    list-style-type: circle;
+    margin-bottom: 0px
+}
+ul ul ul {
+    list-style-type: square;
+    margin-bottom: 0px
+}
+ol {
+    list-style-type: decimal
+}
+ol ol {
+    list-style-type: lower-alpha;
+    margin-bottom: 0px
+}
+ol ol ol {
+    list-style-type: lower-roman;
+    margin-bottom: 0px
+}
+ul,
+ul ul,
+ul ol,
+ol,
+ol ul,
+ol ol {
+    margin-left: 1.3em
+}
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+    margin-bottom: 0em
+}
+strong {
+    font-weight: bold
+}
+em {
+    font-style: italic
+}
+sup,
+sub {
+    font-size: 0.75em;
+    position: relative;
+    display: inline-block;
+    padding: 0 .2em;
+    line-height: .8em
+}
+sup {
+    top: -.5em
+}
+sub {
+    bottom: -.5em
+}
+a[rev='footnote'] {
+    font-size: .75em;
+    padding: 0 .3em;
+    line-height: 1
+}
+q {
+    font-style: italic
+}
+q:before {
+    content: "\201C"
+}
+q:after {
+    content: "\201D"
+}
+em,
+dfn {
+    font-style: italic
+}
+strong,
+dfn {
+    font-weight: bold
+}
+del,
+s {
+    text-decoration: line-through
+}
+abbr,
+acronym {
+    border-bottom: 1px dotted;
+    cursor: help
+}
+hr {
+    margin-bottom: 0.2em
+}
+small {
+    font-size: .8em
+}
+big {
+    font-size: 1.2em
+}
+article blockquote {
+    font-style: italic;
+    position: relative;
+    font-size: 1.2em;
+    line-height: 1.5em;
+    padding-left: 1em;
+    border-left: 4px solid rgba(170, 170, 170, 0.5)
+}
+article blockquote cite {
+    font-style: italic
+}
+article blockquote cite a {
+    color: #aaa !important;
+    word-wrap: break-word
+}
+article blockquote cite:before {
+    content: '\2014';
+    padding-right: .3em;
+    padding-left: .3em;
+    color: #aaa
+}
+@media only screen and (min-width: 992px) {
+    article blockquote {
+        padding-left: 1.5em;
+        border-left-width: 4px
+    }
+}
+.pullquote-right:before,
+.pullquote-left:before {
+    padding: 0;
+    border: none;
+    content: attr(data-pullquote);
+    float: right;
+    width: 45%;
+    margin: .5em 0 1em 1.5em;
+    position: relative;
+    top: 7px;
+    font-size: 1.4em;
+    line-height: 1.45em
+}
+.pullquote-left:before {
+    float: left;
+    margin: .5em 1.5em 1em 0
+}
+.force-wrap,
+article a,
+aside.sidebar a {
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: pre-wrap;
+    word-wrap: break-word
+}
+.group,
+body>header,
+body>nav,
+body>footer,
+body #content>article,
+body #content>div>article,
+body #content>div>section,
+body div.pagination,
+aside.sidebar,
+#main,
+#content,
+.sidebar {
+    *zoom: 1
+}
+.group:after,
+body>header:after,
+body>nav:after,
+body>footer:after,
+body #content>article:after,
+body #content>div>section:after,
+body div.pagination:after,
+#main:after,
+#content:after,
+.sidebar:after {
+    content: "";
+    display: table;
+    clear: both
+}
+body {
+    -webkit-text-size-adjust: none;
+    max-width: 1200px; /* original is 1200px but for some reason it is smaller in my screen */
+    position: relative;
+    margin: 0 auto;
+    font-size: 110%;
+}
+body>header,
+body>nav,
+body>footer,
+body #content>article,
+body #content>div>article,
+body #content>div>section {
+    padding-left: 18px;
+    padding-right: 18px
+}
+@media only screen and (min-width: 480px) {
+    body>header,
+    body>nav,
+    body>footer,
+    body #content>article,
+    body #content>div>article,
+    body #content>div>section {
+        padding-left: 25px;
+        padding-right: 25px
+    }
+}
+@media only screen and (min-width: 768px) {
+    body>header,
+    body>nav,
+    body>footer,
+    body #content>article,
+    body #content>div>article,
+    body #content>div>section {
+        padding-left: 35px;
+        padding-right: 35px
+    }
+}
+@media only screen and (min-width: 992px) {
+    body>header,
+    body>nav,
+    body>footer,
+    body #content>article,
+    body #content>div>article,
+    body #content>div>section { /* changed padding for the main article from 55px to 40px*/
+        padding-left: 40px;
+        padding-right: 40px;
+    }
+}
+body div.pagination {
+    margin-left: 18px;
+    margin-right: 18px
+}
+@media only screen and (min-width: 480px) {
+    body div.pagination {
+        margin-left: 25px;
+        margin-right: 25px
+    }
+}
+@media only screen and (min-width: 768px) {
+    body div.pagination {
+        margin-left: 35px;
+        margin-right: 35px
+    }
+}
+@media only screen and (min-width: 992px) {
+    body div.pagination {
+        margin-left: 55px;
+        margin-right: 55px
+    }
+}
+body>header {
+    font-size: 1em;
+    padding-top: 1.5em;
+    padding-bottom: 1.5em
+}
+#content {
+    overflow: hidden
+}
+#content>div,
+#content>article {
+    width: 100%
+}
+aside.sidebar {
+    float: none;
+    padding: 0 18px 1px;
+    background-color: #f7f7f7;
+    border-top: 1px solid #e0e0e0
+}
+.flex-content,
+article img,
+article video,
+article .flash-video,
+article .caption-wrapper,
+aside.sidebar img {
+    max-width: 100%;
+    height: auto
+}
+.basic-alignment.left,
+article img.left,
+article video.left,
+article .left.flash-video,
+article .left.caption-wrapper,
+aside.sidebar img.left {
+    float: left;
+    margin-right: 1.5em
+}
+.basic-alignment.right,
+article img.right,
+article video.right,
+article .right.flash-video,
+article .right.caption-wrapper,
+aside.sidebar img.right {
+    float: right;
+    margin-left: 1.5em
+}
+.basic-alignment.center,
+article img.center,
+article video.center,
+article .center.flash-video,
+article .center.caption-wrapper,
+aside.sidebar img.center {
+    display: block;
+    margin: 0 auto 1.5em
+}
+.basic-alignment.left,
+article img.left,
+article video.left,
+article .left.flash-video,
+article .left.caption-wrapper,
+aside.sidebar img.left,
+.basic-alignment.right,
+article img.right,
+article video.right,
+article .right.flash-video,
+article .right.caption-wrapper,
+aside.sidebar img.right {
+    margin-bottom: .8em
+}
+.toggle-sidebar,
+.no-sidebar .toggle-sidebar {
+    display: none
+}
+@media only screen and (min-width: 750px) {
+    body.sidebar-footer aside.sidebar {
+        float: none;
+        width: auto;
+        clear: left;
+        margin: 0;
+        padding: 0 35px 1px;
+        background-color: #f7f7f7;
+        border-top: 1px solid #eaeaea
+    }
+    body.sidebar-footer aside.sidebar section.odd,
+    body.sidebar-footer aside.sidebar section.even {
+        float: left;
+        width: 48%
+    }
+    body.sidebar-footer aside.sidebar section.odd {
+        margin-left: 0
+    }
+    body.sidebar-footer aside.sidebar section.even {
+        margin-left: 4%
+    }
+    body.sidebar-footer aside.sidebar.thirds section {
+        width: 30%;
+        margin-left: 5%
+    }
+    body.sidebar-footer aside.sidebar.thirds section.first {
+        margin-left: 0;
+        clear: both
+    }
+}
+body.sidebar-footer #content {
+    margin-right: 0px
+}
+body.sidebar-footer .toggle-sidebar {
+    display: none
+}
+@media only screen and (min-width: 550px) {
+    body>header {
+        font-size: 1em
+    }
+}
+@media only screen and (min-width: 750px) {
+    aside.sidebar {
+        float: none;
+        width: auto;
+        clear: left;
+        margin: 0;
+        padding: 0 35px 1px;
+        background-color: #f7f7f7;
+        border-top: 1px solid #eaeaea
+    }
+    aside.sidebar section.odd,
+    aside.sidebar section.even {
+        float: left;
+        width: 48%
+    }
+    aside.sidebar section.odd {
+        margin-left: 0
+    }
+    aside.sidebar section.even {
+        margin-left: 4%
+    }
+    aside.sidebar.thirds section {
+        width: 30%;
+        margin-left: 5%
+    }
+    aside.sidebar.thirds section.first {
+        margin-left: 0;
+        clear: both
+    }
+}
+@media only screen and (min-width: 768px) {
+    body {
+        -webkit-text-size-adjust: auto
+    }
+    body>header {
+        font-size: 1.2em
+    }
+    #main {
+        padding: 0;
+        margin: 0 auto
+    }
+    #content {
+        overflow: visible;
+        margin-right: 240px;
+        position: relative
+    }
+    .no-sidebar #content {
+        margin-right: 0;
+        border-right: 0
+    }
+    .collapse-sidebar #content {
+        margin-right: 20px
+    }
+    #content>div,
+    #content>article {
+        padding-top: 17.5px;
+        padding-bottom: 17.5px;
+        float: left
+    }
+    aside.sidebar {
+        width: 210px;
+        padding: 0 15px 15px;
+        background: none;
+        clear: none;
+        float: left;
+        margin: 0 -100% 0 0;
+    }
+    aside.sidebar section {
+        width: auto;
+        margin-left: 0
+    }
+    aside.sidebar section.odd,
+    aside.sidebar section.even {
+        float: none;
+        width: auto;
+        margin-left: 0
+    }
+    .collapse-sidebar aside.sidebar {
+        float: none;
+        width: auto;
+        clear: left;
+        margin: 0;
+        padding: 0 35px 1px;
+        background-color: #f7f7f7;
+        border-top: 1px solid #eaeaea
+    }
+    .collapse-sidebar aside.sidebar section.odd,
+    .collapse-sidebar aside.sidebar section.even {
+        float: left;
+        width: 48%
+    }
+    .collapse-sidebar aside.sidebar section.odd {
+        margin-left: 0
+    }
+    .collapse-sidebar aside.sidebar section.even {
+        margin-left: 4%
+    }
+    .collapse-sidebar aside.sidebar.thirds section {
+        width: 30%;
+        margin-left: 5%
+    }
+    .collapse-sidebar aside.sidebar.thirds section.first {
+        margin-left: 0;
+        clear: both
+    }
+}
+@media only screen and (min-width: 992px) {
+    body>header {
+        font-size: 1.3em
+    }
+    #content {
+        margin-right: 320px; /* increase this by X where X is the increase in width of aside.sidebar a few line down */
+    }
+    #content>div,
+    #content>article {
+        padding-top: 0.5em;
+        padding-bottom: 0.5em;
+    }
+    aside.sidebar {
+        width: 280px;   /* increase sidebad, remember to increase the margin-right of #content a few lines up by the same amount */
+        padding: 0em 20px 20px
+    }
+    .collapse-sidebar aside.sidebar {
+        padding-left: 55px;
+        padding-right: 55px
+    }
+}
+body>header {
+    background: #333
+}
+body>header h1 {
+    display: inline-block;
+    margin: 0
+}
+body>header h1 a,
+body>header h1 a:visited,
+body>header h1 a:hover {
+    color: #f2f2f2;
+    text-decoration: none
+}
+body>header h2 {
+    margin: .2em 0 0;
+    font-size: 1em;
+    color: #aaa;
+    font-weight: normal
+}
+body>nav {
+    position: relative;
+    background-color: #ccc;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(50%, #cccccc), color-stop(100%, #b0b0b0));
+    background: -webkit-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    background: -moz-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    background: -o-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    background: linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    border-top: 1px solid #f2f2f2;
+    border-bottom: 1px solid #8c8c8c;
+    padding-top: .35em;
+    padding-bottom: .35em
+}
+body>nav form {
+    -webkit-background-clip: padding;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    margin: 0;
+    padding: 0
+}
+body>nav form .search {
+    padding: .3em .5em 0;
+    font-size: .85em;
+    font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.1em;
+    width: 95%;
+    -webkit-border-radius: 0.5em;
+    -moz-border-radius: 0.5em;
+    -ms-border-radius: 0.5em;
+    -o-border-radius: 0.5em;
+    border-radius: 0.5em;
+    -webkit-background-clip: padding;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    -webkit-box-shadow: #d1d1d1 0 1px;
+    -moz-box-shadow: #d1d1d1 0 1px;
+    box-shadow: #d1d1d1 0 1px;
+    background-color: #f2f2f2;
+    border: 1px solid #b3b3b3;
+    color: #888
+}
+body>nav form .search:focus {
+    color: #444;
+    border-color: #80b1df;
+    -webkit-box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
+    -moz-box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
+    box-shadow: #80b1df 0 0 4px, #80b1df 0 0 3px inset;
+    background-color: #fff;
+    outline: none
+}
+body>nav fieldset[role=search] {
+    float: right;
+    width: 48%
+}
+body>nav fieldset.mobile-nav {
+    float: left;
+    width: 48%
+}
+body>nav fieldset.mobile-nav select {
+    width: 100%;
+    font-size: .8em;
+    border: 1px solid #888
+}
+body>nav ul {
+    display: none
+}
+@media only screen and (min-width: 550px) {
+    body>nav {
+        font-size: .9em
+    }
+    body>nav ul {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        *zoom: 1;
+        float: left;
+        display: block;
+        padding-top: .15em
+    }
+    body>nav ul li {
+        list-style-image: none;
+        list-style-type: none;
+        margin-left: 0;
+        white-space: nowrap;
+        display: inline;
+        float: left;
+        padding-left: 0;
+        padding-right: 0
+    }
+    body>nav ul li:first-child,
+    body>nav ul li.first {
+        padding-left: 0
+    }
+    body>nav ul li:last-child {
+        padding-right: 0
+    }
+    body>nav ul li.last {
+        padding-right: 0
+    }
+    body>nav ul.subscription {
+        margin-left: .8em;
+        float: right
+    }
+    body>nav ul.subscription li:last-child a {
+        padding-right: 0
+    }
+    body>nav ul li {
+        margin: 0
+    }
+    body>nav a {
+        color: #6b6b6b;
+        font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
+        text-shadow: #ebebeb 0 1px;
+        float: left;
+        text-decoration: none;
+        font-size: 1.1em;
+        padding: .1em 0;
+        line-height: 1.5em
+    }
+    body>nav a:visited {
+        color: #6b6b6b
+    }
+    body>nav a:hover {
+        color: #2b2b2b
+    }
+    body>nav li+li {
+        border-left: 1px solid #b0b0b0;
+        margin-left: .8em
+    }
+    body>nav li+li a {
+        padding-left: .8em;
+        border-left: 1px solid #dedede
+    }
+    body>nav form {
+        float: right;
+        text-align: left;
+        padding-left: .8em;
+        width: 175px
+    }
+    body>nav form .search {
+        width: 93%;
+        font-size: .95em;
+        line-height: 1.2em
+    }
+    body>nav ul[data-subscription$=email]+form {
+        width: 97px
+    }
+    body>nav ul[data-subscription$=email]+form .search {
+        width: 91%
+    }
+    body>nav fieldset.mobile-nav {
+        display: none
+    }
+    body>nav fieldset[role=search] {
+        width: 99%
+    }
+}
+@media only screen and (min-width: 992px) {
+    body>nav form {
+        width: 215px
+    }
+    body>nav ul[data-subscription$=email]+form {
+        width: 147px
+    }
+}
+.no-placeholder body>nav .search {
+    background: #f2f2f2 0.3em 0.25em no-repeat;
+    text-indent: 1.3em
+}
+@media only screen and (min-width: 550px) {
+    .maskImage body>nav ul[data-subscription$=email]+form {
+        width: 123px
+    }
+}
+@media only screen and (min-width: 992px) {
+    .maskImage body>nav ul[data-subscription$=email]+form {
+        width: 173px
+    }
+}
+.maskImage ul.subscription {
+    position: relative;
+    top: .2em
+}
+.maskImage ul.subscription li,
+.maskImage ul.subscription a {
+    border: 0;
+    padding: 0
+}
+.maskImage a[rel=subscribe-rss] {
+    position: relative;
+    top: 0px;
+    text-indent: -999999em;
+    background-color: #dedede;
+    border: 0;
+    padding: 0
+}
+.maskImage a[rel=subscribe-rss],
+.maskImage a[rel=subscribe-rss]:after {
+    -webkit-mask-repeat: no-repeat;
+    -moz-mask-repeat: no-repeat;
+    -ms-mask-repeat: no-repeat;
+    -o-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    width: 22px;
+    height: 22px
+}
+.maskImage a[rel=subscribe-rss]:after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 0;
+    background-color: #ababab
+}
+.maskImage a[rel=subscribe-rss]:hover:after {
+    background-color: #9e9e9e
+}
+.maskImage a[rel=subscribe-email] {
+    position: relative;
+    top: 0px;
+    text-indent: -999999em;
+    background-color: #dedede;
+    border: 0;
+    padding: 0
+}
+.maskImage a[rel=subscribe-email],
+.maskImage a[rel=subscribe-email]:after {
+    -webkit-mask-repeat: no-repeat;
+    -moz-mask-repeat: no-repeat;
+    -ms-mask-repeat: no-repeat;
+    -o-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    width: 28px;
+    height: 22px
+}
+.maskImage a[rel=subscribe-email]:after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 0;
+    background-color: #ababab
+}
+.maskImage a[rel=subscribe-email]:hover:after {
+    background-color: #9e9e9e
+}
+article {
+    padding-top: 1em
+}
+article header {
+    position: relative;
+    padding-top: 2em;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+}
+article header h1 {
+    margin: 0;
+    margin-top: 0.15em;
+}
+article header h1 a {
+    text-decoration: none
+}
+article header h1 a:hover {
+    text-decoration: underline
+}
+article header p {
+    font-size: .9em;
+    color: #aaa;
+    margin: 0
+}
+article header p.meta {
+    text-transform: uppercase;
+    position: absolute;
+    top: 0;
+}
+@media only screen and (min-width: 768px) {
+    article header {
+        margin-bottom: 1.5em;
+        padding-bottom: 1em;
+    }
+}
+article h2 {
+    padding-top: 0.8em;
+}
+.entry-content article h2:first-child,
+article header+h2 {
+    padding-top: 0
+}
+article h2:first-child,
+article header+h2 {
+    background: none
+}
+article .feature {
+    padding-top: .5em;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+    font-size: 2.0em;
+    font-style: italic;
+    line-height: 1.3em
+}
+article img,
+article video,
+article .flash-video,
+article .caption-wrapper {
+    -webkit-border-radius: 0.3em;
+    -moz-border-radius: 0.3em;
+    -ms-border-radius: 0.3em;
+    -o-border-radius: 0.3em;
+    border-radius: 0.3em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
+    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
+    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: #fff 0.5em solid
+}
+article img.caption,
+article video.caption,
+article .flash-video.caption,
+article .caption-wrapper.caption {
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    -ms-border-radius: 0px;
+    -o-border-radius: 0px;
+    border-radius: 0px;
+    -webkit-box-shadow: 0px;
+    -moz-box-shadow: 0px;
+    box-shadow: 0px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 0px
+}
+article .caption-wrapper {
+    display: inline-block;
+    margin-bottom: 1em;
+}
+article .caption-wrapper .caption-text {
+    background: #fff;
+    text-align: center;
+    font-size: .8em;
+    color: #666;
+    display: block
+}
+article video,
+article .flash-video {
+    margin: 0 auto 1.5em
+}
+article video {
+    display: block;
+    width: 100%
+}
+article .flash-video>div {
+    position: relative;
+    display: block;
+    padding-bottom: 56.25%;
+    padding-top: 1px;
+    height: 0;
+    overflow: hidden
+}
+article .flash-video>div iframe,
+article .flash-video>div object,
+article .flash-video>div embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%
+}
+article>footer {
+    padding-bottom: 0.3em;  /* decrease footer padding */
+    margin-top: 0.3em;
+}
+article>footer p.meta {
+    margin-bottom: .8em;
+    font-size: .85em;
+    clear: both;
+    overflow: hidden
+}
+.blog-index article+article {
+}
+#content .blog-index {
+    padding-top: 0;
+    padding-bottom: 0
+}
+#content .blog-index article {
+    padding-top: 2em;
+    font-family: "PT Serif",Georgia,Times,"Times New Roman",serif;
+}
+#content .blog-index article header {
+    background: none;
+    padding-bottom: 0
+}
+#content .blog-index article h1 {
+    font-size: 2.2em
+}
+#content .blog-index article h1 a {
+    color: inherit
+}
+#content .blog-index article h1 a:hover {
+    color: #0181eb
+}
+#content .blog-index a[rel=full-article] {
+    background: #ebebeb;
+    display: inline-block;
+    padding: .4em .8em;
+    margin-right: .5em;
+    text-decoration: none;
+    color: #666;
+    -webkit-transition: background-color 0.5s;
+    -moz-transition: background-color 0.5s;
+    -o-transition: background-color 0.5s;
+    transition: background-color 0.5s
+}
+#content .blog-index a[rel=full-article]:hover {
+    background: #0181eb;
+    text-shadow: none;
+    color: #f8f8f8
+}
+#content .blog-index footer {
+    margin-top: 1em
+}
+.separator,
+article>footer .byline+time:before,
+article>footer time+time:before,
+article>footer .comments:before,
+article>footer .byline ~ .categories:before {
+    content: "\2022 ";
+    padding: 0 .4em 0 .2em;
+    display: inline-block
+}
+/* pagination stuff */
+#content div.pagination {  
+    text-align: center;
+    font-size: .95em;
+    position: relative;
+    padding-top: 1.5em;
+    padding-bottom: 1.5em
+}
+#content div.pagination a {
+    text-decoration: none;
+    color: #000;
+    padding-left: 0.4em; /* horizontal space between pagination links */
+}
+#content div.pagination a:hover {   /* hover color for pagination links/icons */
+    color: #0181eb
+}
+
+/* if you want to send pagination icons/links to left or right, you can use these labels
+#content div.pagination a.prev {
+    position: absolute;
+    left: 0
+}
+#content div.pagination a.next {
+    position: absolute;
+    right: 0
+}
+#content div.pagination a[href*=archive]:before,
+#content div.pagination a[href*=archive]:after {
+    content: '\2014';
+    padding: 0 .3em
+}
+*/
+
+p.meta+.sharing {
+    padding-top: 1em;
+    padding-left: 0;
+}
+#fb-root {
+    display: none
+}
+.highlighttable,
+html .gist .gist-file .gist-syntax .gist-highlighttable {
+    border-left: 1px solid #05232b !important;
+   
+}
+.highlighttable table td.code,
+html .gist .gist-file .gist-syntax .gist-highlighttable table td.code {
+    width: 100%;
+
+}
+.highlighttable .line-numbers,
+html .gist .gist-file .gist-syntax .highlighttable .line_numbers {
+    text-align: right;
+    font-size: 13px;
+    line-height: 1.45em;
+    background: #073642 top left !important;
+    border-right: 1px solid #00232c !important;
+    -webkit-box-shadow: #083e4b -1px 0 inset;
+    -moz-box-shadow: #083e4b -1px 0 inset;
+    box-shadow: #083e4b -1px 0 inset;
+    text-shadow: #021014 0 -1px;
+    padding: .8em !important;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    -ms-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0
+}
+.highlighttable .line-numbers span,
+html .gist .gist-file .gist-syntax .highlighttable .line_numbers span {
+    color: #586e75 !important
+}
+figure.code,
+.gist-file,
+pre {
+    -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
+    -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px
+}
+figure.code .highlighttable pre,
+.gist-file .highlighttable pre,
+pre .highlighttable pre {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none
+}
+.gist .highlighttable *::-moz-selection,
+figure.code .highlighttable *::-moz-selection {
+    background: #386774;
+    color: inherit;
+    text-shadow: #002b36 0 1px;
+}
+.gist .highlighttable *::-webkit-selection,
+figure.code .highlighttable *::-webkit-selection {
+    background: #386774;
+    color: inherit;
+    text-shadow: #002b36 0 1px
+}
+.gist .highlighttable *::selection,
+figure.code .highlighttable *::selection {
+    background: #386774;
+    color: inherit;
+    text-shadow: #002b36 0 1px
+}
+html .gist .gist-file {
+    margin-bottom: 1.8em;
+    position: relative;
+    border: none;
+    padding-top: 26px !important
+}
+html .gist .gist-file .highlighttable {
+    margin-bottom: 0
+}
+html .gist .gist-file .gist-syntax {
+    border-bottom: 0 !important;
+    background: none !important
+}
+html .gist .gist-file .gist-syntax .gist-highlighttable {
+    background: #002b36 !important
+}
+html .gist .gist-file .gist-syntax .highlighttable pre {
+    padding: 0
+}
+html .gist .gist-file .gist-meta {
+    padding: .6em 0.8em;
+    border: 1px solid #083e4b !important;
+    color: #586e75;
+    font-size: .7em !important;
+    line-height: 1.5em
+}
+html .gist .gist-file .gist-meta a {
+    color: #75878b !important;
+    text-decoration: none
+}
+html .gist .gist-file .gist-meta a:hover {
+    text-decoration: underline
+}
+html .gist .gist-file .gist-meta a:hover {
+    color: #93a1a1 !important
+}
+html .gist .gist-file .gist-meta a[href*='#file'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: -10px;
+    color: #474747 !important
+}
+html .gist .gist-file .gist-meta a[href*='#file']:hover {
+    color: #1863a1 !important
+}
+html .gist .gist-file .gist-meta a[href*=raw] {
+    top: .4em
+}
+pre {
+    background: #002b36 top left;
+    -webkit-border-radius: 0.0em;
+    -moz-border-radius: 0.0em;
+    -ms-border-radius: 0.0em;
+    -o-border-radius: 0.0em;
+    border-radius: 0.0em;
+    line-height: 1.45em;
+    margin-bottom: 0em;
+    padding: 0em 0em;
+    color: #93a1a1;
+    font-size: 80%;  /* change the code font size */
+
+}
+h3.filename+pre {
+    -moz-border-radius-topleft: 0px;
+    -webkit-border-top-left-radius: 0px;
+    border-top-left-radius: 0px;
+    -moz-border-radius-topright: 0px;
+    -webkit-border-top-right-radius: 0px;
+    border-top-right-radius: 0px
+}
+p code,
+li code {
+    display: inline-block;
+    white-space: no-wrap;
+    background: #fff;
+    font-size: .8em;
+    line-height: 1.5em;
+    color: #555;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 0.4em;
+    -moz-border-radius: 0.4em;
+    -ms-border-radius: 0.4em;
+    -o-border-radius: 0.4em;
+    border-radius: 0.4em;
+    padding: 0 .3em;
+    margin: -1px 0
+}
+p pre code,
+li pre code {
+    font-size: 1em !important;
+    background: none;
+    border: none
+}
+.pre-code,
+html .gist .gist-file .gist-syntax .highlighttable pre,
+.highlighttable code {
+    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important;
+    overflow: scroll;
+    overflow-y: hidden;
+    display: block;
+    padding: .8em;
+    overflow-x: auto;
+    line-height: 1.45em;
+    color: #93a1a1 !important
+}
+.pre-code span,
+html .gist .gist-file .gist-syntax .highlighttable pre span,
+.highlighttable code span {
+    color: #93a1a1 !important
+}
+.pre-code span,
+html .gist .gist-file .gist-syntax .highlighttable pre span,
+.highlighttable code span {
+    font-style: normal !important;
+    font-weight: normal !important
+}
+.pre-code .c,
+html .gist .gist-file .gist-syntax .highlighttable pre .c,
+.highlighttable code .c {
+    color: #586e75 !important;
+    font-style: italic !important
+}
+.pre-code .cm,
+html .gist .gist-file .gist-syntax .highlighttable pre .cm,
+.highlighttable code .cm {
+    color: #586e75 !important;
+    font-style: italic !important
+}
+.pre-code .cp,
+html .gist .gist-file .gist-syntax .highlighttable pre .cp,
+.highlighttable code .cp {
+    color: #586e75 !important;
+    font-style: italic !important
+}
+.pre-code .c1,
+html .gist .gist-file .gist-syntax .highlighttable pre .c1,
+.highlighttable code .c1 {
+    color: #586e75 !important;
+    font-style: italic !important
+}
+.pre-code .cs,
+html .gist .gist-file .gist-syntax .highlighttable pre .cs,
+.highlighttable code .cs {
+    color: #586e75 !important;
+    font-weight: bold !important;
+    font-style: italic !important
+}
+.pre-code .err,
+html .gist .gist-file .gist-syntax .highlighttable pre .err,
+.highlighttable code .err {
+    color: #dc322f !important;
+    background: none !important
+}
+.pre-code .k,
+html .gist .gist-file .gist-syntax .highlighttable pre .k,
+.highlighttable code .k {
+    color: #cb4b16 !important
+}
+.pre-code .o,
+html .gist .gist-file .gist-syntax .highlighttable pre .o,
+.highlighttable code .o {
+    color: #93a1a1 !important;
+    font-weight: bold !important
+}
+.pre-code .p,
+html .gist .gist-file .gist-syntax .highlighttable pre .p,
+.highlighttable code .p {
+    color: #93a1a1 !important
+}
+.pre-code .ow,
+html .gist .gist-file .gist-syntax .highlighttable pre .ow,
+.highlighttable code .ow {
+    color: #2aa198 !important;
+    font-weight: bold !important
+}
+.pre-code .gd,
+html .gist .gist-file .gist-syntax .highlighttable pre .gd,
+.highlighttable code .gd {
+    color: #93a1a1 !important;
+    background-color: #372c34 !important;
+    display: inline-block
+}
+.pre-code .gd .x,
+html .gist .gist-file .gist-syntax .highlighttable pre .gd .x,
+.highlighttable code .gd .x {
+    color: #93a1a1 !important;
+    background-color: #4d2d33 !important;
+    display: inline-block
+}
+.pre-code .ge,
+html .gist .gist-file .gist-syntax .highlighttable pre .ge,
+.highlighttable code .ge {
+    color: #93a1a1 !important;
+    font-style: italic !important
+}
+.pre-code .gh,
+html .gist .gist-file .gist-syntax .highlighttable pre .gh,
+.highlighttable code .gh {
+    color: #586e75 !important
+}
+.pre-code .gi,
+html .gist .gist-file .gist-syntax .highlighttable pre .gi,
+.highlighttable code .gi {
+    color: #93a1a1 !important;
+    background-color: #1a412b !important;
+    display: inline-block
+}
+.pre-code .gi .x,
+html .gist .gist-file .gist-syntax .highlighttable pre .gi .x,
+.highlighttable code .gi .x {
+    color: #93a1a1 !important;
+    background-color: #355720 !important;
+    display: inline-block
+}
+.pre-code .gs,
+html .gist .gist-file .gist-syntax .highlighttable pre .gs,
+.highlighttable code .gs {
+    color: #93a1a1 !important;
+    font-weight: bold !important
+}
+.pre-code .gu,
+html .gist .gist-file .gist-syntax .highlighttable pre .gu,
+.highlighttable code .gu {
+    color: #6c71c4 !important
+}
+.pre-code .kc,
+html .gist .gist-file .gist-syntax .highlighttable pre .kc,
+.highlighttable code .kc {
+    color: #859900 !important;
+    font-weight: bold !important
+}
+.pre-code .kd,
+html .gist .gist-file .gist-syntax .highlighttable pre .kd,
+.highlighttable code .kd {
+    color: #268bd2 !important
+}
+.pre-code .kp,
+html .gist .gist-file .gist-syntax .highlighttable pre .kp,
+.highlighttable code .kp {
+    color: #cb4b16 !important;
+    font-weight: bold !important
+}
+.pre-code .kr,
+html .gist .gist-file .gist-syntax .highlighttable pre .kr,
+.highlighttable code .kr {
+    color: #d33682 !important;
+    font-weight: bold !important
+}
+.pre-code .kt,
+html .gist .gist-file .gist-syntax .highlighttable pre .kt,
+.highlighttable code .kt {
+    color: #2aa198 !important
+}
+.pre-code .n,
+html .gist .gist-file .gist-syntax .highlighttable pre .n,
+.highlighttable code .n {
+    color: #268bd2 !important
+}
+.pre-code .na,
+html .gist .gist-file .gist-syntax .highlighttable pre .na,
+.highlighttable code .na {
+    color: #268bd2 !important
+}
+.pre-code .nb,
+html .gist .gist-file .gist-syntax .highlighttable pre .nb,
+.highlighttable code .nb {
+    color: #859900 !important
+}
+.pre-code .nc,
+html .gist .gist-file .gist-syntax .highlighttable pre .nc,
+.highlighttable code .nc {
+    color: #d33682 !important
+}
+.pre-code .no,
+html .gist .gist-file .gist-syntax .highlighttable pre .no,
+.highlighttable code .no {
+    color: #b58900 !important
+}
+.pre-code .nl,
+html .gist .gist-file .gist-syntax .highlighttable pre .nl,
+.highlighttable code .nl {
+    color: #859900 !important
+}
+.pre-code .ne,
+html .gist .gist-file .gist-syntax .highlighttable pre .ne,
+.highlighttable code .ne {
+    color: #268bd2 !important;
+    font-weight: bold !important
+}
+.pre-code .nf,
+html .gist .gist-file .gist-syntax .highlighttable pre .nf,
+.highlighttable code .nf {
+    color: #268bd2 !important;
+    font-weight: bold !important
+}
+.pre-code .nn,
+html .gist .gist-file .gist-syntax .highlighttable pre .nn,
+.highlighttable code .nn {
+    color: #b58900 !important
+}
+.pre-code .nt,
+html .gist .gist-file .gist-syntax .highlighttable pre .nt,
+.highlighttable code .nt {
+    color: #268bd2 !important;
+    font-weight: bold !important
+}
+.pre-code .nx,
+html .gist .gist-file .gist-syntax .highlighttable pre .nx,
+.highlighttable code .nx {
+    color: #b58900 !important
+}
+.pre-code .vg,
+html .gist .gist-file .gist-syntax .highlighttable pre .vg,
+.highlighttable code .vg {
+    color: #268bd2 !important
+}
+.pre-code .vi,
+html .gist .gist-file .gist-syntax .highlighttable pre .vi,
+.highlighttable code .vi {
+    color: #268bd2 !important
+}
+.pre-code .nv,
+html .gist .gist-file .gist-syntax .highlighttable pre .nv,
+.highlighttable code .nv {
+    color: #268bd2 !important
+}
+.pre-code .mf,
+html .gist .gist-file .gist-syntax .highlighttable pre .mf,
+.highlighttable code .mf {
+    color: #2aa198 !important
+}
+.pre-code .m,
+html .gist .gist-file .gist-syntax .highlighttable pre .m,
+.highlighttable code .m {
+    color: #2aa198 !important
+}
+.pre-code .mh,
+html .gist .gist-file .gist-syntax .highlighttable pre .mh,
+.highlighttable code .mh {
+    color: #2aa198 !important
+}
+.pre-code .mi,
+html .gist .gist-file .gist-syntax .highlighttable pre .mi,
+.highlighttable code .mi {
+    color: #2aa198 !important
+}
+.pre-code .s,
+html .gist .gist-file .gist-syntax .highlighttable pre .s,
+.highlighttable code .s {
+    color: #2aa198 !important
+}
+.pre-code .sd,
+html .gist .gist-file .gist-syntax .highlighttable pre .sd,
+.highlighttable code .sd {
+    color: #2aa198 !important
+}
+.pre-code .s2,
+html .gist .gist-file .gist-syntax .highlighttable pre .s2,
+.highlighttable code .s2 {
+    color: #2aa198 !important
+}
+.pre-code .se,
+html .gist .gist-file .gist-syntax .highlighttable pre .se,
+.highlighttable code .se {
+    color: #dc322f !important
+}
+.pre-code .si,
+html .gist .gist-file .gist-syntax .highlighttable pre .si,
+.highlighttable code .si {
+    color: #268bd2 !important
+}
+.pre-code .sr,
+html .gist .gist-file .gist-syntax .highlighttable pre .sr,
+.highlighttable code .sr {
+    color: #2aa198 !important
+}
+.pre-code .s1,
+html .gist .gist-file .gist-syntax .highlighttable pre .s1,
+.highlighttable code .s1 {
+    color: #2aa198 !important
+}
+.pre-code div .gd,
+html .gist .gist-file .gist-syntax .highlighttable pre div .gd,
+.highlighttable code div .gd,
+.pre-code div .gd .x,
+html .gist .gist-file .gist-syntax .highlighttable pre div .gd .x,
+.highlighttable code div .gd .x,
+.pre-code div .gi,
+html .gist .gist-file .gist-syntax .highlighttable pre div .gi,
+.highlighttable code div .gi,
+.pre-code div .gi .x,
+html .gist .gist-file .gist-syntax .highlighttable pre div .gi .x,
+.highlighttable code div .gi .x {
+    display: inline-block;
+    width: 100%
+}
+.highlighttable,
+.gist-highlighttable {
+    margin-bottom: 1.8em;
+    background: #002b36;
+    overflow-y: hidden;
+    overflow-x: auto
+}
+
+pre::-webkit-scrollbar,
+.highlighttable::-webkit-scrollbar,
+.gist-highlighttable::-webkit-scrollbar {
+    height: .5em;
+    background: rgba(255, 255, 255, 0.15)
+}
+pre::-webkit-scrollbar-thumb:horizontal,
+.highlighttable::-webkit-scrollbar-thumb:horizontal,
+.gist-highlighttable::-webkit-scrollbar-thumb:horizontal {
+    background: rgba(255, 255, 255, 0.2);
+    -webkit-border-radius: 4px;
+    border-radius: 4px
+}
+.highlighttable code {
+    background: #000
+}
+figure.code {
+    background: none;
+    padding: 0;
+    border: 0;
+    margin-bottom: 1.5em
+}
+figure.code pre {
+    margin-bottom: 0
+}
+figure.code figcaption {
+    position: relative
+}
+figure.code .highlighttable {
+    margin-bottom: 0;
+    table-layout: fixed;
+    width: 100%;
+}
+.code-title,
+html .gist .gist-file .gist-meta a[href*='#file'],
+h3.filename,
+figure.code figcaption { /* figcaption changes */
+    text-align: center;
+    line-height: 2em;
+    text-shadow: #cbcccc 0 1px 0;
+    color: #474747;
+    font-weight: normal;
+    margin-bottom: 0;
+    -moz-border-radius-topleft: 5px;
+    -webkit-border-top-left-radius: 5px;
+    border-top-left-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-top-right-radius: 5px;
+    background: #aaa top repeat-x;
+    font-family: "Helvetica Neue",Arial,"Lucida Grande","Lucida Sans Unicode",Lucida,sans-serif;
+    border: 1px solid #565656;
+    border-top-color: #cbcbcb;
+    border-left-color: #a5a5a5;
+    border-right-color: #a5a5a5;
+    border-bottom: 0;
+    font-size: 90%; /* change size of font in figcaption */
+}
+.download-source,
+html .gist .gist-file .gist-meta a[href*=raw],
+figure.code figcaption a {
+    position: absolute;
+    right: .8em;
+    text-decoration: none;
+    color: #666 !important;
+    z-index: 1;
+    font-size: 13px;
+    text-shadow: #cbcccc 0 1px 0;
+    padding-left: 3em
+}
+.download-source:hover,
+html .gist .gist-file .gist-meta a[href*=raw]:hover,
+figure.code figcaption a:hover {
+    text-decoration: underline
+}
+#archive #content>div,
+#archive #content>div>article {
+    padding-top: 0
+}
+#blog-archives {
+    color: #aaa
+}
+#blog-archives article {
+    padding: 1em 0 1em;
+    position: relative;
+}
+#blog-archives article:last-child {
+    background: none
+}
+#blog-archives article footer {
+    padding: 0;
+    margin: 0
+}
+#blog-archives h1 {
+    color: #222;
+    margin-bottom: .3em
+}
+#blog-archives h2 {
+    display: none
+}
+#blog-archives h1 {
+    font-size: 1.5em
+}
+#blog-archives h1 a {
+    text-decoration: none;
+    color: inherit;
+    font-weight: normal;
+    display: inline-block
+}
+#blog-archives h1 a:hover {
+    text-decoration: underline
+}
+#blog-archives h1 a:hover {
+    color: #0181eb
+}
+#blog-archives a.category,
+#blog-archives time {
+    color: #aaa;
+
+}
+#blog-archives .entry-content {
+    display: none
+}
+#blog-archives time {
+    font-size: .9em;
+    line-height: 1.2em
+}
+#blog-archives time .month,
+#blog-archives time .day {
+    display: inline-block;
+}
+#blog-archives time .month {
+    text-transform: uppercase
+}
+#blog-archives p {
+    margin-bottom: 1em
+}
+#blog-archives a,
+#blog-archives .entry-content a {
+    color: inherit
+}
+#blog-archives a:hover,
+#blog-archives .entry-content a:hover {
+    color: #0181eb
+}
+#blog-archives a:hover {
+    color: #0181eb
+}
+@media only screen and (min-width: 550px) {
+    #blog-archives article {
+        margin-left: 5em
+    }
+    #blog-archives h2 {
+        margin-bottom: .3em;
+        font-weight: normal;
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        float: left
+    }
+    #blog-archives h2:first-child {
+        padding-top: .75em
+    }
+    #blog-archives time {
+        position: absolute;
+        text-align: right;
+        left: 0em;
+        top: 3.2em; /* may need to change this to align the month/date on the tag/category (archive) pages with post name */
+        font-family: "PT Sans","Helvetica Neue",Arial,sans-serif;
+    }
+   /* #blog-archives .year {
+        display: none;
+    }*/
+    #blog-archives article {
+        padding-left: 4.5em;
+        padding-bottom: .7em;
+    }
+    #blog-archives a.category {
+        line-height: 1.1em;
+    }
+}
+#content>.category article {
+    margin-left: 0;
+    padding-left: 6.8em
+}
+#content>.category .year {
+    display: inline;    
+}
+.side-shadow-border,
+aside.sidebar section h1,
+aside.sidebar li {
+    -webkit-box-shadow: #fff 0 1px;
+    -moz-box-shadow: #fff 0 1px;
+    box-shadow: #fff 0 1px
+}
+aside.sidebar {
+    overflow: hidden;
+    color: #4b4b4b;
+    text-shadow: #fff 0 1px;
+}
+aside.sidebar section {
+    font-size: 0.9em;
+    line-height: 1.4em;
+    margin-bottom: 1.5em
+}
+aside.sidebar section h1 {
+    margin: 1.5em 0 0;
+    padding-bottom: .2em;
+    border-bottom: 1px solid #e0e0e0
+}
+aside.sidebar section h1+p {
+    padding-top: .4em
+}
+aside.sidebar img {
+    -webkit-border-radius: 0.3em;
+    -moz-border-radius: 0.3em;
+    -ms-border-radius: 0.3em;
+    -o-border-radius: 0.3em;
+    border-radius: 0.3em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
+    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
+    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    border: #fff 0.3em solid
+}
+aside.sidebar ul {
+    margin-bottom: 0.5em;
+    margin-left: 0
+}
+aside.sidebar li {
+    list-style: none;
+    padding: .5em 0;
+    margin: 0;
+    border-bottom: 1px solid #e0e0e0
+}
+aside.sidebar li p:last-child {
+    margin-bottom: 0
+}
+aside.sidebar a {
+    color: inherit;
+    -webkit-transition: color 0.5s;
+    -moz-transition: color 0.5s;
+    -o-transition: color 0.5s;
+    transition: color 0.5s
+}
+aside.sidebar:hover a {
+    color: #222
+}
+aside.sidebar:hover a:hover {
+    color: #0181eb
+}
+.aside-alt-link,
+#pinboard_linkroll .pin-tag {
+    color: #7e7e7e
+}
+.aside-alt-link:hover,
+#pinboard_linkroll .pin-tag:hover {
+    color: #0181eb
+}
+@media only screen and (min-width: 768px) {
+    .toggle-sidebar {
+        outline: none;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        display: inline-block;
+        text-decoration: none;
+        color: #cecece;
+        width: 9px;
+        cursor: pointer
+    }
+    .toggle-sidebar:hover {
+        background: #e9e9e9;
+        background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(224, 224, 224, 0.5)), color-stop(100%, rgba(224, 224, 224, 0)));
+        background: -webkit-linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
+        background: -moz-linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
+        background: -o-linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0));
+        background: linear-gradient(left, rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0))
+    }
+    .toggle-sidebar:after {
+        position: absolute;
+        right: -11px;
+        top: 0;
+        width: 20px;
+        font-size: 1.2em;
+        line-height: 1.1em;
+        padding-bottom: .15em;
+        -moz-border-radius-bottomright: 0.3em;
+        -webkit-border-bottom-right-radius: 0.3em;
+        border-bottom-right-radius: 0.3em;
+        text-align: center;
+        border-bottom: 1px solid #e0e0e0;
+        border-right: 1px solid #e0e0e0;
+        content: "\00BB";
+        text-indent: -1px
+    }
+    .collapse-sidebar .toggle-sidebar {
+        text-indent: 0px;
+        right: -20px;
+        width: 19px
+    }
+    .collapse-sidebar .toggle-sidebar:hover {
+        background: #e9e9e9
+    }
+    .collapse-sidebar .toggle-sidebar:after {
+        border-left: 1px solid #e0e0e0;
+        text-shadow: #fff 0 1px;
+        content: "\00AB";
+        left: 0px;
+        right: 0;
+        text-align: center;
+        text-indent: 0;
+        border: 0;
+        border-right-width: 0;
+        background: none
+    }
+}
+.googleplus h1 {
+    -moz-box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    -o-box-shadow: none !important;
+    box-shadow: none !important;
+    border-bottom: 0px none !important
+}
+.googleplus a {
+    text-decoration: none;
+    white-space: normal !important;
+    line-height: 32px
+}
+.googleplus a img {
+    float: left;
+    margin-right: 0.5em;
+    border: 0 none
+}
+.googleplus-hidden {
+    position: absolute;
+    top: -1000em;
+    left: -1000em
+}
+#pinboard_linkroll .pin-title,
+#pinboard_linkroll .pin-description {
+    display: block;
+    margin-bottom: .5em
+}
+#pinboard_linkroll .pin-tag {
+    text-decoration: none
+}
+#pinboard_linkroll .pin-tag:hover {
+    text-decoration: underline
+}
+#pinboard_linkroll .pin-tag:after {
+    content: ','
+}
+#pinboard_linkroll .pin-tag:last-child:after {
+    content: ''
+}
+.delicious-posts a.delicious-link {
+    margin-bottom: .5em;
+    display: block
+}
+.delicious-posts p {
+    font-size: 1em
+}
+body>footer {
+    font-size: 1em; /* increase font size for footer */
+    color: #888;
+    text-shadow: #d9d9d9 0 1px;
+    background-color: #ccc;
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(50%, #cccccc), color-stop(100%, #b0b0b0));
+    background: -webkit-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    background: -moz-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    background: -o-linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    background: linear-gradient(#e0e0e0, #cccccc, #b0b0b0);
+    border-top: 1px solid #f2f2f2;
+    position: relative;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    margin-bottom: 3em;
+    -moz-border-radius-bottomleft: 0.4em;
+    -webkit-border-bottom-left-radius: 0.4em;
+    border-bottom-left-radius: 0.4em;
+    -moz-border-radius-bottomright: 0.4em;
+    -webkit-border-bottom-right-radius: 0.4em;
+    border-bottom-right-radius: 0.4em;
+    z-index: 1
+}
+body>footer a {
+    color: #6b6b6b
+}
+body>footer a:visited {
+    color: #6b6b6b
+}
+body>footer a:hover {
+    color: #484848
+}
+body>footer p:last-child {
+    margin-bottom: 0
+}
+table,
+th,
+td
+ {
+    border-left: 1px solid black; /* remove the right border for when overflow happens */
+    padding: 3px;
+}
+th {
+    font-weight: bold;
+    text-align: center;
+}
+
+/* Taken from hyde-x.css to format labels (categories) as octopress doesn't have  */
+
+.label {
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 80%;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+}
+a.label:hover,
+a.label:focus {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.label:empty {
+  display: none;
+}
+
+/* keep the color of visited categories- visited color makes them unreadable */
+a.label:visited {
+    color: #fff;
+}
+
+.label {
+  margin: 0 .25em;
+  background-color: #313131;
+}
+
+.posts a.label,
+.post-date a.label {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* this part makes the mycode shortcode work */
+
+.linenodiv {
+    background-color: #002B36!important;
+}
+
+/* because we have changed the font-family of everything, we need to change it for the code inside pre to fit with line numbers */
+pre span {
+    font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;
+}
+
+td.code {
+    width:95%;
+}
+
+/* end of making mycode shortcode work */
+
+/* wrapped the whole output from the highlight function (which is a table) in a div to get a horizontal scrollbar for the whole row and not just the "pre" in the cell
+having a scrollbar for the cell will break alignment with line numbers    
+*/
+
+div.codewrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: #002B36;
+}
+
+/* overflow for backtick code block
+   by just modifying div.highlight I will screw the codecaption overflow as they have div.highlight too.
+   This ">" syntax is something new that I learned.
+   basically it will select only div.highlights that are direct childs of entry-content */
+div.entry-content > div.highlight {
+    border-color: #002B36;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-bottom: 0.4em;
+}
+
+/* side bar code from hyde-x */
+
+
+/*
+ * Sidebar
+ *
+ * Flexible banner for housing site name, intro, and "footer" content. Starts
+ * out above content in mobile and later moves to the side with wider viewports.
+ */
+
+.sidebar {
+   /* text-align: center; */
+  padding: 2rem 1rem;
+  color: rgba(255,255,255,.5);
+  background-color: #202020;
+}
+
+/* aligns the side bar to the left, we want it to be on the right 
+@media (min-width: 48em) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 18rem;
+    text-align: left;
+  }
+} */
+
+/* Sidebar links */
+
+/* Sticky sidebar
+ *
+ * Add the `sidebar-sticky` class to the sidebar's container to affix it the
+ * contents to the bottom of the sidebar in tablets and up.
+ */
+
+@media (min-width: 48em) {
+  .sidebar-sticky {
+    position: absolute;
+    right:  1rem;
+    bottom: 1rem;
+    left:   1rem;
+  }
+}
\ No newline at end of file
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..0f25067
--- /dev/null
+++ b/static/favicon.png
diff --git a/theme.toml b/theme.toml
new file mode 100644
index 0000000..05cace0
--- /dev/null
+++ b/theme.toml
@@ -0,0 +1,19 @@
+
+name = "Hugo-Octopress"
+license = "MIT"
+licenselink = "https://github.com/parsiya/Hugo-Octopress/blob/master/LICENSE.md"
+description = "Port of the Octopress classic theme for Hugo"
+homepage = "https://github.com/parsiya/hugo-octopress/"
+tags = ["Octopress", "Hugo"]
+features = ["blog", ""]
+min_version = 0.14
+
+[author]
+  name = "Parsia Hakimian"
+  homepage = "http://parsiya.net"
+
+# If porting an existing theme
+[original]
+  name = "Octopress classic theme"
+  homepage = "http://octopress.org"
+  repo = "https://github.com/imathis/octopress/tree/master/.themes/classic"