app.css

/* ------------------------------------------
  Reset ♥
  http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
---------------------------------------------*/
html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, center,
dl, dt, dd,
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-size: 100%;
  font: inherit;
  vertical-align: baseline;
  }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/* remember to define focus styles. Hee Haw */
:focus { outline: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  }


/* ------------------------------------------
  Typography
---------------------------------------------*/
html,body {
  color: #7A8387;
  background: #e7eef2;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  line-height: 1.5em;
  }

body,
textarea,
input { font: 13px/20px 'OpenSans', sans-serif; }

a {
  color: #526066;
  text-decoration: none;
  -moz-transition: background 100ms linear, color 100ms linear;
  -o-transition: background 100ms linear, color 100ms linear;
  -webkit-transition: background 100ms linear, color 100ms linear;
  transition: background 100ms linear, color 100ms linear;
  }
a:hover {
  color: #3d4548;
  }

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  }

p > a {font-weight: bold;}

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  line-height: 1.5em;
  }
h4, h5, h6 {
  }

h1 { font-size: 24px; }
h1 small { font-size: 13px; font-weight: normal; }
h2 {
  font-weight: normal;
  font-size: 16px;
  padding: 5px 0 5px 30px;
  }
h2 small { font-size: 16px; font-weight: normal; }
h3 {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 10px;
  }

h3 small { font-size: 14px; font-weight: normal; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 11px; font-weight: normal; }

p {
  font-size: 16px;
  line-height: 1.5em;
  margin-bottom: 0px;
  margin-top: 10px;
  }
/* Use border-box box model */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  }

/* ------------------------------------------
  Globals
---------------------------------------------*/

/* Top Branding/Navigation */
#header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 20px;
  height: 30px;
  background: #667880;
  overflow: visible;
  }


#header a.title {
  font-size: 14px;
  line-height: 30px;
  color: white;
  height: 30px;
  font-weight: bold;
  }

#header a.title span {
  display: none;
  }

#header .navigation {
  width: 800px;
  margin: 0 auto;
  font-size: 12px;
  position: relative;
  line-height: 30px;
  padding: 0;
  overflow: visible;
  }


#main {
  padding-top: 30px;
  overflow:auto;
  padding-bottom: 60px; /* must be same height as the footer */
  }

#post .inner  {
  position: relative;
  }

/* ------------------------------------------
  Footer - a sticky one
---------------------------------------------*/


/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

#container {
  min-height: 100%;
  min-width: 800px;
  }

#footer {

  position: relative;
  margin-top: -60px; /* negative value of footer height */
  height: 60px;
  overflow: hidden;
  line-height: 60px;
  border-top: 1px solid #c3ccd0;
  clear:both;
  }

#footer .footer-content {
  width: 800px;
  margin: 0 auto;
  font-size: 15px;
  }

#footer a.help, #footer a.about{
  margin-right: 20px;
  padding-left: 20px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  background-image: url('images/sprite.png');
  }
  a.about { background-position: 0 -959px; }
  a.help { background-position: 0 -1049px; }

#footer .footer-content p {
  margin: 16px 0;
  }

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/* thank you Erik J - negate effect of float*/
  }


/* ------------------------------------------
  Article
---------------------------------------------*/



.article-navigation {
  width: 800px;
  margin: 0 auto;
  margin-top: 30px;
  overflow: auto;
}

.article-navigation .article-link {
  display: block;
  float: left;
  height: 30px;
  width: 30px;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  background: rgba(0,0,0, 0.3);

  border: 3px solid #fff;
  margin-right: 10px;
}

.article-link:hover, .article-link.active {
  background: #078FA2;
}

.article-wrapper {
  background: #fff;
  padding-bottom: 50px;
}

.intro {
  /*margin-top: 50px;*/
  background: #E0E7EB;
  /*background: #fff;*/
  padding: 40px;
  padding-bottom: 20px;

  border-top: 1px solid #c3ccd0;
  border-bottom: 1px solid #c3ccd0;
}

.intro .title {
  width: 800px;
  margin: 20px auto;
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: bold;
  padding-bottom: 10px;
}

.intro .abstract {
  width: 800px;
  font-size: 20px;
  margin: 20px auto;
}

.intro .meta {
  width: 800px;
  margin: 20px auto;
  padding-top: 20px;
}

.post-content {
  width: 800px;
  margin: 0px auto;
  padding: 20px 0;
  font-family: 'OpenSans', sans-serif;
  font-weight: normal;
  font-size: 16px;
  }

.post-content * {
  line-height: 1.2em;
  }

.post-content p, .post-content ul, .post-content ol,  .post-content li {
  line-height: 1.5em;
  }


.post-content h1 { font-size: 36px; margin: 10px 0 20px 0; }
.post-content h2 { font-size: 24px; margin: 10px 0 20px 0; font-weight: bold; padding: 0; }
.post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  text-transform: none;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  }

.post-content blockquote {
  padding-left: 19px;
  border-left: 1px solid #C3CCD0;
  font-style: italic;
  margin-bottom: 20px;
  }

.post-content ul {
  margin-left: 0px;
  padding-left: 20px;
  list-style: disc;
  }

.post-content ol {
  margin-left: 0px;
  padding-left: 20px;
  list-style: decimal;
  }

.post-content img {
  max-width: 100%;
  }

.post-content a {
  border-bottom: 1px dashed #C3CCD0;
  font-weight: normal;
  }

.post-content p {
  margin-bottom: 20px;
  }

.post-content p:last-child {
  margin-bottom: 20px;
  }

.post-content code {
  font-family: Menlo, monospace;
  padding: 4px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid #C3CCD0;
  }

.post-content pre {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #C3CCD0;
  }

.post-content pre code {
  border: none;
  }

.post-content hr {
  margin: 5px 0 4px 0;
  border-top: 1px solid #C3CCD0;
  border-bottom: 0;
  border-radius: 5px;
  }

/* ------------------------------------------
  Class Helpers
---------------------------------------------*/
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

* html .clearfix { height: 1%; } /* IE6 */
*:first-child + html .clearfix { min-height: 1%; } /* IE7 */

.icon {
  background: transparent url(images/icons.png) no-repeat 0 0;
  width: 20px;
  height: 20px;
  display: block;
  text-indent: -999em;
  }
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }

.inner      { padding: 0px 0px 40px; }
.hidden     { display: none; }
.centered   { text-align: center; }
.scrolling  { overflow: auto; }
.clipping   { overflow: hidden; }

/* ------------------------------------------
  ios and small screen alterations
---------------------------------------------*/
 @media all and (max-width: 480px) {
  #post .inner {
    width: 100%;
    margin: 0;
    padding: 20px 0 40px;
    }
  .toggle-mode {
    right: 0;
    }
  }