/*** Reset ***/ 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-size: 100%;
font: inherit;
vertical-align: baseline;

} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

} body {

line-height: 1;

} ol, ul {

list-style: bullet;

} blockquote, q {

quotes: none;

} blockquote:before, blockquote:after, q:before, q:after {

content: '';
content: none;

} table {

border-collapse: collapse;
border-spacing: 0;

}

// Import stuff @import 'variables';

// fonts @import url('fonts.googleapis.com/css?family=Karla&display=swap');

/*** Basics ***/ body {

font-family: 'Karla', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
line-height: 1.7;

}

a, a:active, a:visited {

text-decoration: none;
padding-bottom: 2px;

} a:hover {

background-color: $cerulean-blue;
color: #000000;

}

p, pre { margin-bottom: 15px; } ul, ol { padding: 0 0 18px 30px; } ol li, ul li { margin-top: 10px; margin-bottom: 10px; } em, i { font-style: italic; } strong, b { font-weight: bold; } small { font-size: 1em; } sup { vertical-align: super; font-size: 0.85em; } sub { vertical-align: sub; font-size: 0.85em; }

code {

font: 0.85em Monaco, Courier, Monospace;
overflow-x: auto;

}

pre {

overflow: auto;

}

.code-wrap code {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;

}

blockquote {

margin: 22px 22px;
padding: 0 20px;
border-left: 2px solid #000000;
font-size: 1.4em;
font-style: italic;
line-height: 1.5em;

}

acronym, abbr {

cursor: help;
letter-spacing: 1px;
border-bottom: 1px dashed;

}

h1 {

font-size: 18px;
margin: 0 0 10px 0;

} h2 {

font-size: 15px;
margin: 0 0 10px 0;

} h3 {

font-size: 14px;
margin: 0 0 10px 0;

}

/*** Useful Classes ***/ .clear { clear: both; } .float-left { float: left; } .float-right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .img-left { float: left; margin: 4px 10px 4px 0; } .img-right { float: right; margin: 4px 0 4px 10px; } .img-middle { vertical-align: middle; } .nopadding { padding: 0; } .nounderline { text-decoration: underline; }

/*** Structure ***/ page {

width: 500px;
margin: 0 auto;
position: relative;

}

header {

width: 500px;
margin: 40px auto 50px auto;

} header h1 {

font-size: 32px;
margin-bottom: 4px;

} header h1 a {

border: none;

}

footer {

width: 500px;
margin: 50px auto 20px auto;
padding-top: 10px;
font-size: 0.85em;
border-top: 1px solid #073642;

}

content {

width: 500px;
margin: 0 auto;

}

sidebar {

position: absolute;
text-align: right;
width: 160px;
top: 0;
left: -240px;

}

sidebar li {

list-style: none;
margin: 2px 0;

}

sidebar a {

border: none;
font-family: 'Karla', sans-serif;
font-size: 1em;
padding: 2px 4px;

}

sidebar .active {

font-weight: bold;
color: $utah-red;

}

/*** Posts ***/ article {

margin-bottom: 40px;

}

article h1 {

font-size: 17px;
margin: 0 0 10px 0;

} article h1 a {

border: none;

} article h1 a.anchor {

margin-left: 8px;

}

article img {

display: block;
text-align: center;
margin: 0 auto 1em auto;
max-width: 90%;

}

article .meta {

padding-top: 6px;
font-size: 0.85em;
font-style: italic;

}

img.left {

float: left;
margin: 0 1em 1em 0;
max-width: 95%;

} img.right {

float: right;
margin: 0 0 1em 1em;
max-width: 95%;

} img.center {

display: block;
text-align: center;
margin: auto;
max-width: 95%;

}

/*

TODO: figure and related css;
*/

figcaption {

display: block;
text-align: center;
font-style: italic;

}

/*** Pagination ***/ .postnavigation {

padding-top: 10px;
  text-align: center;
  font-size: 1.2em;

}

.postnavigation .left {

float: left;

}

.postnavigation .right {

float: right;

}

/*** Media Queries ***/ @media all and (max-width: 870px) {

#page, #header, #content, #footer {
  width: inherit;
  padding-left: 10px;
  padding-right: 10px;
}

#sidebar {
  position: relative;
  text-align: left;
  width: 100%;
  left: 0;
  margin: 10px 10px 20px 10px;
}

#sidebar nav select.mnav {
  display: block;
  margin-bottom: 15px;
}

}