/**
*  Blog List
 */

.wl-post-list ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wl-post-list a {
    text-decoration: none;
}

/**
 * Just titles
 */

.wlpl-title li {
    display: table;
    width: 100%;
    text-align: left;
}

.wlpl-title li > * {
    display: table-cell;
    vertical-align: top;
}

.wlpl-title .time {
    width: 10em;
}

/**
 * Fancy titles
 */
.wlp-title,
.wlPostList--introduction .wlPostList__itemTitle {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.2;
    font-family: "battling";
    -webkit-font-smoothing: antialiased;
    font-weight: normal;
    color: #1a1a1a;
}

.wlp-title:hover,
.wlPostList__post:hover .wlPostList__itemTitle {
    color: #375fc3;
}

/**
 * List with introduction
 */

.wlPostList__list {
    max-width: 40em;
}

.wlPostList__list a {
    position: relative;
    z-index: 1;

}

.wlPostList__list p {
    margin-bottom: .5em;
}

/**
 * Blog List Item
 */

.wlPostList__post {
    position: relative;
    margin: 3em 0;
    padding-left: 5.5em;
}




.wlPostList__itemIntro {
    margin-top: .5em;
}

.wlPostList__time {
    position: absolute;
    left: 0;
    top: 0;
    width: 4em;
    margin: 0;
    overflow: hidden;
    font-size: 1.2em;
    line-height: 1.2;
    color: #999;
}

a.wlPostList__itemLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    text-indent: -999em;
}

@media screen and (min-width: 1200px) {
    .wlPostList__time,
    .wlPostList--introduction .wlPostList__itemTitle {
        font-size: 1.6em;
    }
}

/**
 * Full post
 */

.blog-full-post .content {
    max-width: 40em;
    margin: auto;
}

.wl-full-post {
    font-size: 16px;
}


/**
 *    weblogPost
 */

.weblogPost__title {
    position: absolute;
    left: -999em;
}

.weblogPost__image {
    display: block;
    margin-bottom: 1em;
}

/**
 *    weblogPostNavigation
 */

.weblogPostNavigation {
    overflow: hidden;
    margin: 4em 0;
}

.weblogPostNavigation__button,
.weblogPostNavigation__button:hover {
    display: block;
    width: 40%;
    text-decoration: none;
}

.weblogPostNavigation__button--previous {
    float: left;
}

.weblogPostNavigation__button--next {
    float: right;
    text-align: right;
}

.weblogPostNavigation__buttonText,
.weblogPostNavigation__postTitle {
    display: block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.weblogPostNavigation__buttonText {
    font-size: .8em;
    color: #999;
}

/**
 *    relatedWeblogPosts
 */

.relatedWeblogPosts__title {
    width: 100%;
    margin: 3em 0 0;
    padding: .6em 1.4em;
    overflow: hidden;
    font-size: .8em;
    font-weight: bold;
    text-transform: none;
    background: rgba(0,0,0, .05);
}

.relatedWeblogPosts__list {
    margin: 0;
    padding: 0 1em .6em;
    border-top: 1px solid #ccc;
    list-style: none;
}

.relatedWeblogPosts__postDate {
    display: block;
    font-size: .8em;
    color: #8e8e8e;
}

.relatedWeblogPosts__postTitle,
.relatedWeblogPosts__postTitle:hover {
    display: block;
    text-decoration: none;
}

/**
 *    weblogComments
 */

.weblogComments__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.weblogComments__meta {
    overflow: hidden;
    margin-bottom: .4em;
}

.weblogComments__avatar {
    display: block;
    float: left;
    margin: 0 .8em 0 0;
    width: 2.7em;
    border-radius: 50%;
}

.weblogComments__metaInfo {
    display: block;
}

.weblogComments__author,
.weblogComments__permanentLink {
    display: block;
}

.weblogComments__permanentLink,
.weblogComments__permanentLink:hover {
    text-decoration: none;
    font-size: .8em;
    color: #999;
}

.weblogComments__dateDescription {
    position: absolute;
    left: -999em;
}

#message-tutorial {
    margin-top: 3em;
    padding: 1px 1em;
    background: rgba(0,0,0, .05);
}