body {
    min-width: 350px;
}

article {
    border-bottom: dotted 2px lightgray;
    margin-bottom: 20px;
    font-size: 16px;
}

@media (min-width: 768px) {
    article { font-size: 17px; }
}

div#main {
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

article.page { border: none; }

article header {
    /* bootstrap red for code: #c7254e
     * bootstrap code background: #f9f2f4
     * bootstrap red label: #a94442;
     * */
    /*previous red: #cb4b16; */
    border-left: 4px solid #c7254e;
    padding-left: 6px;
    margin-left: -10px;
}

article h1 {
    margin-top: 0;
    font-weight: bold;
    font-family: "PT Serif", serif;
    font-size: 32px;
}

article header p {
    max-width: 100%;
    color: gray;
}

article p, figure.highlight, article div.inner, article table, article form,
article header, .masthead .banner, .stdWidth, article > .entry-content > * {
    max-width: 760px;
    margin-right:auto;
    margin-left: auto;
}

article div.wideViz {
    width: 100%;
    max-width: 1400px;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.centerText { text-align: center }

article h2, article h3 {
    margin-bottom: 20px;
}

article p {
    margin: 0 auto 22px auto;
    line-height: 26px;
}

article div.entry-content img {
    display: block;
    margin: 32px auto 32px;
    max-width: 100%;
    height: auto;
}

article blockquote {
    margin-left: -10px;
}

article blockquote footer cite:before {
    content: ",";
    padding: 0 2px 0 1px;
}

p.meta-footer {
    font-size: 90%;
}

p.meta-footer .fa {
    color: #c7254e;
}

p.meta-footer > span, p.meta-footer > time {
    margin-right: 1em;
}


div.socialNav {
    margin: 0 auto;
    max-width: 240px;
}

aside div.socialNav {
    max-width: 120px;
}

aside.about div.socialNav {
    max-width: 360px;
}

ul.socialNav {
    height: 36px;
    width: '100%';
    padding: 0;
}

ul.socialNav li {
    list-style-type: none;
    margin: 0 auto;
    width: 36px;
}

ul.socialNav li img {
    width: 100%;
}

ul.socialNav li a {
    display: block;
    text-align: center
}

ul.socialNav li a:hover { text-decoration: none; }

span.circle {
    display: block;
    height: 34px;
    width: 34px;
    line-height: 34px;

    border-radius: 17px; /* or 50% */

    background-color: #c0c0c0;
    color: white;
    text-align: center;
    font-size: 24px;
    text-decoration: none;
}

span.circle:hover {
    background-color: #c7254e;
}

.sidebar {
    width: 240px;
    margin:auto;
}

.sidebar .hustle { display: none }

/*
aWidth=240; margin=(3*16); 760 + 2*aWidth + 2*margin + 8
*/
@media (min-width: 1344px) {
    .sidebar:not(.js-stayAtBottom) {
        position: absolute;
        top: 0;
        left: calc( 760px + (100% - 760px) / 2 + 3rem );
    }

    .sidebar .hustle { display: block }
}


.sidebar .list-group-item {
    transition: color 0.3s ease 0s, text-decoration 0.3s ease 0s, background 0.3s ease 0s;
}

.sidebar a {
    color: #555;
}

.sidebar .list-group-item.active {
    color: #555;
    text-decoration: none;
    background-color: #e5e5e5;
    border-color: #ddd;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item:focus {
    color: #c7254e;
    background-color: #f9f2f4;
    border-color: #ddd;
    text-decoration: none;
}

#nav-topNav {
    border-bottom: 1px solid #e7e7e7;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

#nav-topNav a {
    transition: color 0.3s ease 0s, text-decoration 0.3s ease 0s, background 0.3s ease 0s;
    padding-right: 1rem;
}

#nav-topNav a:hover,
#nav-topNav li > a:focus {
    color: #c7254e;
}

.entry-title a {
    color: #333;
}

.masthead {
    color: #f2f2f2;
    font-family: "PT Serif",serif;
    background-color: #222;
    padding: 0.5rem 1rem;
}

.masthead h1 {
    font-size: 2.8rem;
}

.masthead h2 {
    font-size: 1.5rem;
    color: #aaa;
}

.masthead a {
    color: inherit;
}

.masthead a:hover, .masthead a:focus {
    text-decoration: none;
}


#footer {
    background-color: #222;
    color: #aaa;
    padding: 1rem;
}

#footer p {
    margin:0;
    line-height: 1rem;
}

#footer a, #footer a:hover {
    color: inherit;
}

.sidebar h3 {
    font-size: 22px;
}

code {
    background-color: #eee;
    color: #000;
}

div.archiveYear {
    display: flex;
    flex-flow: row wrap;
}

div.archiveYear div.posts {
    flex: 1 0 30em;
}

#blog-archives h2 {
    flex: 0 0 5rem;
    font-weight: 400;
}

#blog-archives .item {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    border: none;
    margin-bottom:2rem;
}

#blog-archives .item > div {
    flex: 1 0 20em;
}

#blog-archives h1 {
    font-size: 24px;
    color: #222;
    margin-bottom: 0.3em;
    transition: color 0.3s ease 0s, text-decoration 0.3s ease 0s, background 0.3s ease 0s;
}

#blog-archives h1:hover {
    color: #c7254e;
}

#blog-archives h1 a {
    color: inherit;
    display: inline-block;
    font-weight: normal;
}

#blog-archives time {
    flex: 0 0 4rem;
    text-align: left;
    font-size: 0.9em;
    margin: 0 1.5rem;
}

#blog-archives a.category, #blog-archives time {
    color: #aaa;
}

#blog-archives time .month {
    text-transform: uppercase;
}

#blog-archives time .month, #blog-archives time .day {
    display: inline-block;
}

#blog-archives .year {
    display: none;
}

#blog-archives .item footer {
    margin: 0;
    padding: 0;
}

section.comments {
    margin-bottom: 20px;
}

#btnLoadComments {
    padding-left: 0;
}

form.subscribe {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    max-width: 400px;
}

form.subscribe > div {
    flex: 1 0 220px;
    padding-right: 1rem;
}

form.subscribe p {
    margin: 8px 0;
    padding: 0 4px;
    display: none;
    font-size: 15px;
}

form.subscribe label {
    font-weight: 700;
}

form.subscribe button {
    margin: 10px auto 0;
}

/* code snippet styling */

.highlight
{
    border-radius: 5px;
    margin-bottom: 1.8em;
    overflow-x: auto;
    overflow-y: hidden;
}
.highlight table td.code
{
    width: 100%;
}

/* line numbers */
.highlight td.gutter pre
{
    border-radius: 0;
    border-right: 1px solid #ebe4ce;
    box-shadow: #fff -1px 0 inset;
    font-size: 13px;
    line-height: 1.45em;
    padding: 12px;
    text-align: right;
    text-shadow: #f1ecdc 0 -1px;
}
figure.highlight
{
    margin-bottom: 1.5em;
    padding: 0;
    box-shadow: rgba(0,0,0,0.06) 0 0 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

figure.highlight figcaption
{
    position: relative;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px 15px;
}

figure.highlight figcaption span
{
    font-weight: bold;
}

figure.highlight table
{
    border-top: 1px solid #ddd;
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

figure.highlight table pre,pre .highlight pre
{
    box-shadow: none;
}

.highlight pre
{
    border: none;
    border-radius: 0px;
    margin-bottom: 0;
    padding: 0;
}

.highlight td.code pre
{
    background: #fcfcfc url('/theme/images/noise.png') top left;
    color: #586e75;
    display: block;
    line-height: 1.45em;
    overflow: scroll;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    white-space: pre;
}

figure.highlight pre
{
    margin-bottom: 0;
}
figure.highlight figcaption a
{
    font-size: 13px;
    padding-left: 3em;
    position: absolute;
    right: .8em;
    top: 0.9em;
}

pre::-webkit-scrollbar,.highlight::-webkit-scrollbar
{
    background: rgba(0,0,0,0.15);
    height: .5em;
}
pre::-webkit-scrollbar-thumb:horizontal,.highlight::-webkit-scrollbar-thumb:horizontal
{
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.highlight code span {
    color: #586e75;
    font-style: normal;
    font-weight: normal;
}

.highlight .comment, .highlight .quote {
    color: #93a1a1;
    font-style: italic;
}

.highlight .keyword,
.highlight .doctag,
.highlight .formula {
    color: #cb4b16;
}

.highlight .section,
.highlight .name,
.highlight .selector-tag,
.highlight .deletion,
.highlight .subst {
    color: #e45649;
}

.literal {
    color: #0184bb;
}

.highlight .string,
.highlight .regexp,
.highlight .addition,
.highlight .attribute,
.highlight .meta-string {
    color: #2aa198;
}

.highlight .built_in,
.highlight .class .title {
    color: #c18401;
}

.highlight .attr,
.highlight .variable,
.highlight .template-variable,
.highlight .type,
.highlight .selector-class,
.highlight .selector-attr,
.highlight .selector-pseudo,
.highlight .number {
    color: #2aa198;
}

.highlight .title, .highlight .symbol, .highlight .bullet,
.highlight .link, .highlight .meta, .highlight .selector-id
{
    color: #268bd2;
}

.highlight .title { font-weight: bold; }


.highlight .emphasis { font-style: italic; }
.highlight .strong { font-weight: bold; }
.highlight .link { text-decoration: underline; }