/* start fonts */
@import url(//brick.a.ssl.fastly.net/Open+Sans:400,400i,600,600i);
@import url(//brick.a.ssl.fastly.net/Roboto+Slab:400,400i);

/* Fonts */
html, button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
strong, b {
    font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', sans-serif;
    font-weight: 400;
}
pre, tt {
    font-family: 'Menlo', 'Consolas', monospace;
}

/* General styles */
* { margin: 0; padding: 0; }
html { min-height: 100%; position: relative; }

body {
    background: #ffffff;
    font-size: 16px;
    -moz-font-feature-settings:    'onum' 1, 'pnum' 1, 'liga' 1;
    -webkit-font-feature-settings: 'onum' 1, 'pnum' 1, 'liga' 1;
    font-feature-settings:         'onum' 1, 'pnum' 1, 'liga' 1;
    line-height: 1.5;
    color: #1b1b1b;
}
a                          { color: #1b1b1b; }
a:hover, a:focus, a:active { color: hsl(84, 54%, 33%); }

h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 .5em 0;
    line-height: 1.2;
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.125em; }

article, section, header, footer { display: block; }

p, ul, ol, dl, dd, dt, table {
    margin: 0 0 .5em;
    padding: 0;
}
ul, ol, dd  { margin-left: 2em; }
ul          { list-style: disc; }
td          { padding: 0 .25em .25em 0; vertical-align: top; }
blockquote  {
    margin: 0 0 .5em 1.5em;
    padding-left: .5em;
    border-left: 1px solid #b9b9b9;
}
blockquote:before {
    color: #b9b9b9;
    content: '“';
    font-size: 3.5em;
    line-height: .875;
    margin-left: -.6em;
    display: block;
    height: 0;
}
blockquote footer { font-style: italic; }
/* Articles */
article header p, article footer {
    font-size: .875em;
    color: #6a6a6a;
}
article header p { margin-top: -.5em; }
article footer   { text-align: right; }
article footer a { color: #6a6a6a; }
article footer a:hover, article footer a:focus, article footer a:active {
    color: hsl(84, 54%, 33%);
}

/* Code blocks */
pre { margin: 0; }
div.highlight, pre.literal-block {
    background: #fafafa;
    overflow: auto;
    margin: 0 1em .5em;
	padding: .25em;
	border: 1px solid #c6c6c6;
	border-radius: 0.2em;
    font-size: .875em;
}
tt {
    background: #fafafa;
    padding: 1px 2px 0px 2px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
}

/* Figures */
div.figure img { display: block; margin: 1.5em auto 1.5em; }
div.figure .caption {
    margin-top: -1em;
    margin-left: 2em;
    margin-bottom: 1.5em;
    font-size: .9375em;
    text-align: left;
}
div.border img { border: 1px solid #6a6a6a; }


/* Misc. */
div.align-center      { margin: 0 auto; text-align: center; }
.align-right          { float: right; margin-left: 1.5em; }
.upper, .upperitalics { text-transform: uppercase; letter-spacing: 0.05em; }
.caps                 { letter-spacing: 0.025em; }
.upperitalics         { font-style: italic; }
.email {
    display: none;
}

/* Article list and archive */
.article-list article     { margin-bottom: 2em; }
.archive ul li            { list-style: none; }
.article-list p.date, .archive p, .period-archive dt { color: #6a6a6a; }

/* Tag cloud */
.tag-cloud ul     { margin-left: 0; text-align: center; }
.tag-cloud ul li  { display: inline; margin-right: .2em; list-style: none; }
.tag-cloud .tag-1 { font-size: 1.75em; font-weight: bold; }
.tag-cloud .tag-2 { font-size: 1.5em; }
.tag-cloud .tag-3 { font-size: 1.25em; }
.tag-cloud .tag-4 { font-size: 1em; }

/* buttons */
.button {
    color: #FFF;
    border: 0;
    border-radius: 4px;
    outline: 0;
    cursor: pointer;

}
.button.small { padding:  7px 20px; font-size: 0.875em; }
.button.large { padding: 15px 45px; font-size: 1.125em; }
.button.primary       { background: hsl(198, 54%, 36%); }
.button.primary:hover { background: hsl(198, 54%, 40%); }
.button.success       { background: hsl(84, 54%, 33%); }
.button.success:hover { background: hsl(84, 54%, 40%); }
.button.danger        { background: hsl(  0, 67%, 36%); }
.button.danger:hover  { background: hsl(  0, 67%, 40%); }
/* end buttons */

/* Index page */
#mosaik-slide {
    border: 1px solid #b9b9b9;
    border-radius: .5em;
    width: 300px;
    height: 300px;
    position: relative;
    top: 2em;
    overflow: hidden;
    box-shadow: inset 1px 1px 2px #b9b9b9;
    background-color: #fdfdfd;
}
#mosaik-slide img {
    width: 1200px;
    height: 300px;
    position: relative;
}
#quotes                          { height: 6.7em; }
#quotes blockquote               { display: none; }
#quotes blockquote:first-of-type { display: block; }
/* End index page */

/* Site header and footer */
.navbar {
    border-bottom: 1px solid #b9b9b9;
    color: hsl(84, 54%, 33%);
    height: 6em;
    margin-bottom: 1.5em;
    padding: 10px;
    text-transform: lowercase;
}
.navbar ul { padding-left: 140px; }
.navbar li { display: inline-block; }
.navbar li:after            { content: ' –'; }
.navbar li:last-child:after { content: ''; }
.navbar a.active               { color: hsl(84, 54%, 33%); }
.navbar a, .paginator a        { text-decoration: none; }
.logo { position: absolute; }
.logo div { position: relative; top: 0; left: -2em; }
.logo img { width: 160px; }

.footer {
    font-size: .875em;
    text-align: center;
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 4em;
    margin-top: 1em;
    padding: 1em;
    border-top: 1px solid #b9b9b9;
}
.footer p { margin: 0; }

.navbar a, .footer, .footer a, .paginator, .paginator a {
    color: #6a6a6a;
}
.navbar a:active, .navbar a:hover, .navbar a focus,
.footer a:active, .footer a:hover, .footer a:focus,
.paginator a:active, .paginator a:hover, .paginator a:focus {
    color: hsl(84, 54%, 33%);
    text-decoration: underline;
}

/* Layout elements */
.content {
    padding-top: .5em;
    padding-bottom: 8em;  /* Must be higher than the footer. */
}
.container {
	width: 90%;
	max-width: 1000px;
    margin: 0 auto;
}
.row {
    min-height: 2em;
    width: 100%;
    display: flex;
}
.span {
    float: left;
    display: inline;
    min-height: 1em;
    margin: 0 2% 1.25em 2%;
}
.span:first-child { margin-left: 0; }
.span:last-child  { margin-right: 0; }
.one    { width:  4.6667%; }
.two    { width: 13.3333%; }
.three  { width: 22%; }
.four   { width: 30.6667%; }
.six    { width: 48%; }
.eight  { width: 65.3333%; }
.ten    { width: 82.6667%; }
.twelve { width: 100%; }
.container:after {
    content: '\0020';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.row:before,.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.row:after  { clear: both; }
.row        { zoom: 1; }
.pull-left  { float: left; }
.pull-right { float: right; }
.divider {
    background-color: #b9b9b9;
    height: 1px;
    margin: 1.5em 0;
    width: 100%;
}

.paginator         { display: block; margin-top: 2em; }
.paginator .left   { text-align: left; }
.paginator .center { text-align: center; }
.paginator .right  { text-align: right; }

@media screen and (min-width: 30em) {
    .navbar { height: 3em; }

    .paginator .left   { width: 40%; float: left; }
    .paginator .center { width: 20%; float: left; text-align: center; }
    .paginator .right  { width: 40%; float: right; text-align: right; }
}

@media screen and (min-width: 45em) {
    .navbar ul {
        padding-left: 0px;
        padding-top: 1.375em;
    }
    .twelve {
        width: 82.6667%;
        padding-left: 4.6667%;
        padding-right: 4.6667%;
    }
}

@media screen and (min-width: 60em) {
    .logo div { left: -60px; }
    .twelve {
        width: 65.3333%;
        padding-left: 13.3333%;
        padding-right: 13.3333%;
    }
}