$blue: #414f7c; $darkGrey: #333; $mediumGrey: #667; $lightGrey: ddd; $black: #212721; $white: fff; $offWhite: eee;

$backgroundColour: $white; $codeBackgroundColour: $offWhite; $headingColour: $darkGrey; $textColour: $darkGrey; $linkColour: $blue; $hoverColour: $black; $metaAndFooterColour: $mediumGrey; $borderColour: $lightGrey;

$desktopWidth: 43em; $lightWeight: 300; $heavyWeight: 400;

$regularFont: GillSansRegular, 'Gill Sans MT', 'Gill Sans', 'Century Gothic', Calibri, 'Trebuchet MS', sans-serif; $monoFont: Consolas, Menlo, Monaco, 'Lucida Console', 'Courier New', monospace, serif;

}

html, body { height: 100%; }

body {

background-color: $backgroundColour;
font-family: $regularFont;
line-height: 1.618;
color: $textColour;
text-align: center;
font-weight: $lightWeight;

}

skiptocontent {

height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;

}

h1,h2,h3,h4,h5,h6 {

    color: $headingColour;
letter-spacing: 0.1em;
a {
    color: $linkColour;
    text-decoration: none;
}
a:hover {
    color: $hoverColour;
}

}

h1 {

font-weight: $lightWeight;
font-size: 2.618em;
margin: 1.809em 0 0.809em;

}

h2 {

font-weight: $lightWeight;
font-size: 1.618em;
margin: 1.809em 0 0.809em;

}

h3, h4, h5, h6 {

font-weight: $heavyWeight;
font-size: 1em;
margin: 1.809em 0 0.809em;

}

p, li {

margin: 1em 0;

}

ul {

margin: 0;

}

a { color:$linkColour; } a:hover { color: $hoverColour; }

/* Home */ section {

margin-bottom: 1.618em;

}

section > section {

margin-bottom: 3.236em;

}

strong {

font-weight: $heavyWeight;

}

/* Site */ body > header {

width: $desktopWidth;
text-align: center;
margin: 0 auto 0;

}

body > header a {

text-decoration: none;
margin-left: 0.5em;
margin-right: 0.5em;

}

body > header, body > main, body > footer {

display: block;

}

body > header a {

color: $linkColour;

}

body > header a:hover {

color: $hoverColour;

}

body > header a.extra {

color: $linkColour;
margin-left: 1em;

}

body > header a.extra:hover {

color: $hoverColour;

}

body > header nav ul li {

display: inline;
list-style: none;

}

.contact-list span {

margin-left: 40px;

}

.button {

width: 30px;
height: 30px;
display: inline-block;
background-size: 100%;
text-align: left;

}

.twitter {

background: url('/assets/webicon-twitter-m.png');
background-image: url('/assets/webicon-twitter.svg'), none;

}

.rss {

background: url('/assets/webicon-rss-m.png');
background-image: url('/assets/webicon-rss.svg'), none;

}

main {

text-align: left;
width: $desktopWidth;
margin: 3em auto 2em;

}

main li {

margin-left: 2.618em;

}

.meta {

color: $metaAndFooterColour;

}

footer {

width: $desktopWidth;
color: $metaAndFooterColour;
border-top: 4px solid $borderColour;
margin: 3em auto 2em;
overflow: hidden;

}

footer .column {

float: left;
padding: 1px;
text-align: left;
width: 32%;

}

footer .column ul { list-style: none; } footer .column a, .tags a { color:$linkColour; text-decoration: none; } footer .column a:hover, .tags a:hover { color:$hoverColour; text-decoration: underline; }

.tags ul li {

list-style: none;
display: inline;
font-variant: small-caps;
font-size:1.2em;

}

.archive a {

text-decoration: none;

}

ul.archive, ul.archive ul {

margin-left: 0;

}

ul.archive li, ul.archive ul li {

list-style: none;
margin-left: 0;

}

/*footer .rss {

margin-top: 1.1em;
margin-right: -.2em;
float: right;

}

footer .rss img {

border: 0;

}*/

/* Posts */

/* standard */ .post pre {

border: 1px solid $borderColour;
background-color: $backgroundColour;
padding: 0 .4em;

}

p.date {

color: $mediumGrey;

}

/*.post ul, .post ol {

margin-left: 1.35em;

}*/

pre {

background-color: $codeBackgroundColour;
padding: 1em;
white-space: pre-wrap;
/* why necessary */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;

}

code {

font-family: $monoFont;
font-size: 0.8em;

}

/* terminal .post pre.terminal {

border: 1px solid $borderColour;
background-color: $codeBackgroundColour;
color: $textColour;

}

.post pre.terminal code {

background-color: $codeBackgroundColour;

}*/

table {

border-collapse: collapse;
margin: 0 auto;

}

th, td {

border: solid $lightGrey 1px;
padding: 0.5em 1.5em;

}

/* quotes */ blockquote {

margin: 2em 2em 2em 1em;
padding: 0 .75em 0 1.25em;
border-left: 2px solid $borderColour;
border-right: 0px solid $borderColour;

}

.chart-png {

margin: 2em 0 2em;
width:90%;

}

.logo-png {

float:left;
margin-bottom:18px;
margin-right: 24px;

}

@media all and (max-width: 736px) {

  /* was max-device-width: 1242px */
      body > header, main, footer {
    width:86%;
    margin: 0 auto 0;
    padding: 12px 24px 12px;
      }
p {
  margin-bottom:2em;
}
/*.button {
  width: 50px;
  height: 50px;
  margin: 20px;
}*/
footer .column {
  width: 100%;
}

}