/**
 * Simple overrides of base elements
 */
* { box-sizing: border-box; }

body {
    font-family: "Lora","Times New Roman",Times,serif;
    font-size: 16px;
    color: #404040;
}

a { color: #2272A1; text-decoration: none; }
a:hover { text-decoration: underline; }
p {
    margin-top: 0;
    font-family: "Lora","Times New Roman",Times,serif;
}

blockquote p { border-left: 1px solid #d7d7d7; padding-left: 1em; }

/*
    background-color: black;
    color: #e4e4e4;
    -webkit-font-smoothing: antialiased;
*/

pre {
    background-color: #f5f5f5;
    font-family: "Source Code Pro",monospace,sans-serif;
    line-height: 1.2em;
    padding: 1em 1.4em;
    margin: -0.5em 0 1em; /* margin-top just to snuggle up against a preceding <p> */
    border-radius: 5px;
    box-shadow: 0px 2px 5px -2px rgba(50, 50, 50, 0.75);
    width: 100%;
    font-size: 0.8em;
}

code { font-family: "Source Code Pro",monospace,sans-serif; }

p > code, li code { padding: 1px 2px; background-color: rgba(0,0,0,0.1); border-radius: 3px;}

/* Give article headers a lot of above breathing room, but not the first tag */
h1,h2,h3 { margin-top: 1.4em; }
#toc_0 { margin-top: .67em; }

/* Images should be more than 100%, but can be less */
img { max-width: 100%; }

h1,h2,h3, #title-head, #TableOfContents { font-family: "Open Sans", Helvetica,Arial,sans-serif; }
h1,h2,h3, #title-head { font-weight: 700; }

table { font-size: 0.9em; line-height: 1.5em; background-color: #f8f7f5; }
table thead td { font-weight: bold; background-color: #EEEDED; }
table td { padding: 0.1em 0.5em; border: 1px solid #d7d7d7; }
table tr:nth-child(even) { background: #eeeded; }

/* 1em on margin-bottom when ul has pre tag after */
ul {
    margin: 0.2em 0 1em;
    font-family: "Lora","Times New Roman",Times,serif;
}
/* Set a smaller bottom when ul is nested inside li */
li ul { margin-bottom: 0.3em; }

footer { background-color: white; text-align: center; font-size: .8em; margin:  0 0 1em; border-top: 1px solid #d7d7d7; padding-top: 1em; }
footer a { margin: 0 1em; }

/**
 * Main site classes
 */

header a {
    font-weight: bold;
    text-decoration: none;
    color: white;
}
header {
    background-color: #3D4F5D;
    -webkit-font-smoothing: antialiased;
    font-size: 1.3em;
}
header .caption { color: #B0CADB; }

#title-head { padding: 0.3em; }

.article-header { text-align: center; }

#articles { margin: 0 auto; padding: 1em; line-height: 1.6em; max-width: 960px; }


/**
 * Single Pages
 */

#TableOfContents {
    font-size: 1.2em;
    border-left: 1px solid #d7d7d7;
    margin: 0 0 10px 10px;
    line-height: 1.6em;
    float:right;
}
#TableOfContents ul { padding: 0.1em 1em; list-style-type: none; }
#TableOfContents li { white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#TableOfContents li > ul { margin-top: 0}

.post-title { font-size: 2em; margin: 0 0 0.2em; line-height: 1.3em; }
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: #0772A8; }
.post-meta { color: #616161; margin-bottom: 0.2em; }
.post-tag { text-decoration: none; background-color: #5aba59; color: white; padding: 0.3em 1em; margin-right: 0.5em; text-shadow: 1px 1px 1px #333; font-size: 90%; border-radius: 3px;}
.post-tags { line-height: 2.4em; }
.post-desc { font-size: 1.2em; font-weight: bold; text-align: justify; }


.article-sep {
    border:0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
    margin: 0 0 1em;
}

/**
 * List
 */

/* Get rid of the article separator at the end of the list, let the footer be the separator */
/*.list #main article:last-child hr { display: none; } */
.list #main article:last-child { margin-bottom: 0; }

/* Add some nice padding */
.list #main { background-color: #3D4F5D; }
.list header { text-align: center; }
.list .post { background-color: white; margin-bottom: 1em; padding: 2em; }

.list .article-sep { display: none; }
.list .post-desc { margin: 1em 0 0 0; }

/**
 * Media Queries
 */
@media all and (max-width: 699px) {
    #title-head { padding: 0.4em 0.3em }
    .post-tags { display: block; }
    #TableOfContents { float: none; left:0; margin-left: 0; border-left: 0; }
    blockquote { margin: 1em; }
    .post { padding: 0.5em !important; }
    #articles { padding: 0; }
}