body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
}

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

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

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 {
    margin: 0 auto 22px 0;
    line-height: 26px;
}

article p, figure.code, article div.inner {
    max-width: 760px;
}

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

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
}

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

.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;
}

#blogNav a {
    transition: color 0.3s ease 0s, text-decoration 0.3s ease 0s, background 0.3s ease 0s;
}

#blogNav a:hover,
.navbar-default li > a:focus {
    color: #c7254e;
}

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

.row.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

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

.masthead h1 {
    font-size: 42px;
    margin-bottom: 0;
}

.masthead h2 {
    font-size: 24px;
    color: #aaa;
    margin-top: 6px;
    margin-bottom: 24px;
}

.masthead a {
    color: inherit;
}

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


#footer {
    background-color: #222;
    color: #aaa;
}

#footer p {
    margin-top: 10px;
}

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

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

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

#blog-archives h2 {
    display: inline-block;
    float: left;
    font-weight: normal;
    margin-bottom: 0.3em;
    position: relative;
    top: -1px;
}

#blog-archives .item {
    padding: 1em 0 0.7em 4.5em;
    position: relative;
    margin-left: 5em;
    border: none;
}

#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 {
    left: 0;
    position: absolute;
    text-align: right;
    top: 1.8em;
    font-size: 0.9em;
    line-height: 1.2em;
}

#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;
}

/* code snippet styling */

.highlight
{
	border-radius: 5px;
	margin-bottom: 1.8em;
	overflow-x: auto;
	overflow-y: hidden;
}
.highlight table td.code
{
	width: 100%;
}
.highlight .line-numbers
{
	border-radius: 0;
	border-right: 1px solid #ebe4ce;
	box-shadow: #fff -1px 0 inset;
	font-size: 13px;
	line-height: 1.45em;
	padding: 1em .8em .8em .8em;
	text-align: right;
	text-shadow: #f1ecdc 0 -1px;
}
figure.code
{
	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.code figcaption
{
	position: relative;
	background-color: #f5f5f5;
	border-radius: 5px;
	padding: 10px 15px;
}

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

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

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

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

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

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

.pre-code div .gd,.highlight code div .gd,.pre-code div .gd .x,.highlight code div .gd .x,.pre-code div .gi,.highlight code div .gi,.pre-code div .gi .x,.highlight code div .gi .x
{
	display: inline-block;
	width: 100%;
}
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;
}

.pre-code span,.highlight code span { color: #586e75; }
.pre-code span,.highlight code span
{
	font-style: normal;
	font-weight: normal;
}
.pre-code .c,.highlight code .c
{
	color: #93a1a1;
	font-style: italic;
}
.pre-code .cm,.highlight code .cm
{
	color: #93a1a1;
	font-style: italic;
}
.pre-code .cp,.highlight code .cp
{
	color: #93a1a1;
	font-style: italic;
}
.pre-code .c1,.highlight code .c1
{
	color: #93a1a1;
	font-style: italic;
}
.pre-code .cs,.highlight code .cs
{
	color: #93a1a1;
	font-style: italic;
	font-weight: bold;
}
.pre-code .err,.highlight code .err
{
	background: none;
	color: #dc322f;
}
.pre-code .k,.highlight code .k { color: #cb4b16; }
.pre-code .o,.highlight code .o
{
	color: #586e75;
	font-weight: bold;
}
.pre-code .p,.highlight code .p { color: #586e75; }
.pre-code .ow,.highlight code .ow
{
	color: #2aa198;
	font-weight: bold;
}
.pre-code .gd,.highlight code .gd
{
	background-color: #f4c9c8;
	color: #586e75;
	display: inline-block;
}
.pre-code .gd .x,.highlight code .gd .x
{
	background-color: #f0b5b4;
	color: #586e75;
	display: inline-block;
}
.pre-code .ge,.highlight code .ge
{
	color: #586e75;
	font-style: italic;
}
.pre-code .gh,.highlight code .gh { color: #93a1a1; }
.pre-code .gi,.highlight code .gi
{
	background-color: #e4e8c9;
	color: #586e75;
	display: inline-block;
}
.pre-code .gi .x,.highlight code .gi .x
{
	background-color: #ccd497;
	color: #586e75;
	display: inline-block;
}
.pre-code .gs,.highlight code .gs
{
	color: #586e75;
	font-weight: bold;
}
.pre-code .gu,.highlight code .gu { color: #6c71c4; }
.pre-code .kc,.highlight code .kc
{
	color: #859900;
	font-weight: bold;
}
.pre-code .kd,.highlight code .kd { color: #268bd2; }
.pre-code .kp,.highlight code .kp
{
	color: #cb4b16;
	font-weight: bold;
}
.pre-code .kr,.highlight code .kr
{
	color: #d33682;
	font-weight: bold;
}
.pre-code .kt,.highlight code .kt { color: #2aa198; }
.pre-code .n,h.highlight code .n { color: #268bd2; }
.pre-code .na,.highlight code .na { color: #268bd2; }
.pre-code .nb,.highlight code .nb { color: #859900; }
.pre-code .nc,.highlight code .nc { color: #d33682; }
.pre-code .no,.highlight code .no { color: #b58900; }
.pre-code .nl,.highlight code .nl { color: #859900; }
.pre-code .ne,.highlight code .ne
{
	color: #268bd2;
	font-weight: bold;
}
.pre-code .nf,.highlight code .nf
{
	color: #268bd2;
	font-weight: bold;
}
.pre-code .nn,.highlight code .nn { color: #b58900; }
.pre-code .nt,.highlight code .nt
{
	color: #268bd2;
	font-weight: bold;
}
.pre-code .nx,.highlight code .nx { color: #b58900; }
.pre-code .vg,.highlight code .vg { color: #268bd2; }
.pre-code .vi,.highlight code .vi { color: #268bd2; }
.pre-code .nv,.highlight code .nv { color: #268bd2; }
.pre-code .mf,.highlight code .mf { color: #2aa198; }
.pre-code .m,.highlight code .m { color: #2aa198; }
.pre-code .mh,.highlight code .mh { color: #2aa198; }
.pre-code .mi,.highlight code .mi { color: #2aa198; }
.pre-code .s,.highlight code .s { color: #2aa198; }
.pre-code .sd,.highlight code .sd { color: #2aa198; }
.pre-code .s2,.highlight code .s2 { color: #2aa198; }
.pre-code .se,.highlight code .se { color: #dc322f; }
.pre-code .si,.highlight code .si { color: #268bd2; }
.pre-code .sr,.highlight code .sr { color: #2aa198; }
.pre-code .s1,.highlight code .s1 { color: #2aa198; }