/* Reset CSS */
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: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong { font-weight:bold }
em { font-style:italic }
a img { border:none }

/* Generic elements */
body { line-height: 1.4em; font-family: 'Roboto', sans-serif;}
b { font-weight: bold; }
i { font-style: italic; }
a { color: #004C9E; text-decoration: None; border-bottom: 1px solid #C0C0C0; }
a.active { color: #FFFFFF; font-weight: bold; }
code, pre, tt { font-family: monospace; }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

.justify { text-align: justify; }
.alignright { float: right; }

:target:before {
    content:"";
    display:block;
    height:90px; /* fixed header height*/
    margin:-90px 0 0; /* negative fixed header height */
}

/* Black navigation bar */
nav { background-color: #000000; color: #FFFFFF; width: 100%; padding: 8px; position: fixed; top: 0px; border-top: 4px solid #1C88A6; }
nav div.center { max-width: 900px; margin: 0px auto 0px auto; }
nav img { }
nav a { color: #FFFFFF; text-decoration: none; border-bottom: 0px; margin-right: 24px; }
nav a:hover{ color: #4BBFDF; }
nav a:active { color: #909090; }

/* Wrapper for minimal margins */
#page { margin-left: 16px; margin-right: 16px; }
#blog-page { margin-left: 16px; margin-right: 16px; }

/* Header with logo and personal information */
header, section { max-width: 900px; margin: 96px auto 96px auto; }
h1.header { margin-bottom: 32px; }

p.persinfo-name { font-weigth: 500; font-size: 1.6em; line-height: 2.4em; }
table.persinfo { margin-top: 32px; }
table.persinfo th { font-weight: bold; text-align: right; padding-right: 10px; }
table.persinfo td.feed a { border-bottom: 0px; }

/* Main sections (Writings, Programming projects, etc) */
section h1 { font-weight: bold; font-size: 2em; color: #606060; margin-bottom: 32px; line-height: 1.1em; }
section h1 a { border: 0px; color: #404040; }
section h2 { font-weight: bold; font-size: 1.4em; color: #707070; line-height: 2.4em; }
section h3 { font-weight: bold; font-size: 1.1em; color: #707070; line-height: 1.3em; margin-top: 16px; }
section ol { list-style: decimal; margin-left: 48px; color: #808080; }
section ul { list-style: square; margin-left: 32px; color: #808080; }
section ul li * { color: #000000; }
section ul li a { color: #004C9E; }
section ul li p { margin-bottom: 0.8em; }
section p.doc-links a { margin-right: 16px; }
section a.ext { color: #000000; border-bottom: 1px solid #C0C0C0; }

#page section ul li { margin-bottom: 2.4em; list-style: None; }

/* Blog pages */
#blog-page section p { text-align: justify; margin: 1em 0 1em 0; }
#blog-page strong { color: #505050; }
#blog-page b { color: #505050; }
#blog-page section pre { font-size: 16px; line-height: 1.1em; background-color: #EAEAEA; color: #000000; padding: 10px; overflow: auto; }
#blog-page section img { max-width: 100%; height: auto; }
#blog-page section li { line-height: 1em; color: #000000; line-height: 1.5em; }
#blog-page section blockquote { padding-left: 18px; font-style: italic; border-left: 5px solid #D0D0D0; }
#blog-page div.post { margin-bottom: 128px; }
#blog-page p.published_date { color: #606060; font-size: small; }
#blog-page div.prev { margin-top: 32px; padding-top: 16px; border-top: 1px solid #C0C0C0; }
#blog-page #search { margin-top: 32px; }
#blog-page #search form { display: inline; }
#blog-page #search p { display: inline; }