/* Blogs top menu */
ul.blogTopMenu {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #dc0d8a;
    margin-top: 30px;
    margin-bottom: 30px;
}
ul.blogTopMenu li {
    margin: 0;
    padding: 0;
    display: inline-block;position: relative;
    top: 2px;
}
ul.blogTopMenu li a {
    background: transparent;
    color: #dc0d8a;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 20px;
}
ul.blogTopMenu li a:hover {
    text-decoration: none;
    background: #ff6966;
    color: #fff;
}
ul.blogTopMenu li.selected a, ul.blogTopMenu li.selected a:hover {
    background: #dc0d8a;
    color: #fff;
}
ul.blogTopMenu li.rightMenu {
    float: right;
}

/* Create post form */
.createPostForm textarea {
    height: 500px;
}

a.viewBlogTitle {
    font-size: 1.4rem;
}

/* View blog */
.blogMainWrap {
    position: relative;
}
.blogHeaderImageWrap {
    background-repeat: no-repeat;
    position: relative;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 800px;
}
.blogHeaderImageWrap img {
    visibility: hidden;
    display: block;
}
.headerImageFader {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(242, 248, 255, 1));
    height: 100%;
}
.blogMainWrap .content {
    padding-top: 64px;
}
.singleCol {

}
p.viewBlogDescription {
    margin: 0;
    font-size: 1.4rem;
}
.blogMainWrap h1 {
    text-shadow: 1px 0 0 #ffffff;
}
.blogMainWrap .comments {
    margin-top: 32px;
}

/* Blog render */
.blogRender a.title {
    font-size: 1.4rem;
}
.blogRender p.description{
    margin: 0;
    font-size: 1.2rem;
    padding: 0;
    line-height: 120%;
}
.articleRender .youtubeWrap {
    height: 400px;
}
.articleRender .youtubeWrap iframe {
    height: 372px;
}

.publishPostWrap {
    background: #f9dc72;
    color: #78672a;
    padding: 20px;
    font-size: 1rem;
    margin-bottom: 15px;
}
.publishPostWrap h3, .publishPostWrap p {
    margin: 0;
    font-size: 1rem;
    line-height: 100%;
}
.publishPostWrap h3 {
    text-transform: uppercase;
}
.publishPostWrap p {
    margin-bottom: 5px;
    margin-top: 3px;
}

/* Next/prev posts */
.nextPrevPost {
    display: table;
    width: 100%;
}
.nextPrevPost h3 {
    font-size: 1rem;
    line-height: 100%;
    display: block;
    text-transform: uppercase;
}
.nextPrevPost .prevPost, .nextPrevPost .nextPost {
    display: table-cell;
}
.nextPrevPost .nextPost {
    text-align: right;
    padding-left: 10px;
}
.nextPrevPost .prevPost {
    padding-right: 10px;
}
.nextPrevPost .nextPost h3:after {
    content: '▶';
    font-size: 0.65rem;
    margin-left:5px;
    position: relative;
    top: -2px;
}
.nextPrevPost .prevPost h3:before {
    content: '◀';
    position: relative;
    top: -2px;
    font-size: 0.65rem;
    margin-right: 5px;
}

.viewPostAuthorWrap {
    text-align: left;
}
.viewPostAuthorWrap .authorWrap {
    text-align: left;
}

/**************
  POST RENDER
***************/
.blogPostRender {
    border: 1px solid #efefef;
    width: 350px;
    background: #fff;
    padding: 20px;
    padding-bottom: 10px;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    position: relative;
}

/* Title */
.blogPostRender a.title  {
    color: #dc0d8a;
    font-weight: 500;
    font-size: 1.72rem;
    display: block;
    line-height: 120%;
    max-width: 90%;
}
.blogPostRender span.unread, .blogPostMinimalRender span.unread {
    display: inline-block;
    border-radius: 3px;
    background: #dc0d8a;
    color: #fff;
    font-size: 1rem;
    line-height: 120%;
    margin-right: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    margin-top: -5px;
    padding: 2px 5px;
}
.blogPostRender .titleWrap, .viewPostHWrap .titleWrap {
    display: flex;
    align-items: center;
}
.blogPostRender .titleWrap .left > div, .viewPostHWrap .titleWrap .left > div {
    width: 65px;
}
.blogPostRender .titleWrap .right, .viewPostHWrap .titleWrap .right {
    flex-grow: 1;
}

.blogPostRender .titleWrap .left, .viewPostHWrap .titleWrap .left {
    align-self: flex-start;
}
.blogPostRender a.headerImgPreview {
    width: 100%;
    height: 250px;
    background-size: cover;
    display: block;
    background-position: center;
    border-radius: 2px;
    margin-bottom: 10px;
}
.blogPostRender .titleOuterWrap {
    margin-bottom:10px;
}

/* Excerpt */
.blogPostRender span.excerpt {
    color: #333;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 15px;
    max-width: 650px;
    line-height: 130%;
    overflow-wrap: break-word;
}
.blogPostRender a.readMore {
    font-size: 1rem;
}

/* Breadcrumb */
.blogBreadcrumb {
    line-height: 100%;
    margin-top: 3px;
}
.blogBreadcrumb a img {
    vertical-align: middle;
    margin-top: -3px;
}
.blogBreadcrumb a.officialBlog {
    color: #0099FF;
}
.blogBreadcrumb a:hover {
    opacity: 1;
}
.blogBreadcrumb a:after {
    content: '>';
    display: inline-block;
    padding-left: 5px;
}
.blogPostRender .blogBreadcrumb a, .blogPostRender .blogBreadcrumb a:hover:after {
    opacity: 0.7;
}
.blogBreadcrumb a:last-child:after {
    display: none;
}

/* Vote */
.blogPostRender .voteWrapper, .viewPostHWrap .voteWrapper {
    float: left;
    border: 1px solid #efefef;
    padding: 5px 10px;
    border-radius: 3px;
    background: #fff;
}
.blogPostRender .voteWrapper img {
    height: 24px;
    width: 24px;
}
.blogPostRender .voteWrapper span.score {
    font-size: 1.2rem;
    padding: 12px 0;
}

/* Stats */
ul.blogPostStats, ul.blogPostStats li {
    margin: 0;
    padding: 0;
    line-height: 120%;
}
ul.blogPostStats {
    margin-bottom: 10px;
}
ul.blogPostStats li {
    font-size: 0.85rem;
    color: #717171;
    vertical-align: middle;
    margin-right:15px;
    vertical-align: top;
    display: inline-block;
}
ul.blogPostStats li img {
    vertical-align: middle;
    margin-right: 2px;
}
ul.blogPostStats li:last-child {
    margin-right:0;
}

/* View post */
.viewPostWrap {
    position: relative;
}

/* Favourite */
.blogPostRender .favouriteWrap, .viewPostFavControlWrap {
    position: absolute;
    top: -3px;
    right: 5px;
    background: #fff;
    border: 1px solid #efefef;
    padding-top: 12px;
    line-height: 30px;
    border-top: 1px solid #efefef;
}
.blogPostRender .favouriteWrap .countWrapper {
    display: none;
}
.blogPostRender .favouriteWrap img {
    width: 24px;
    height: 24px;
}

.viewPostFavControlWrap .favouriteWrap {
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
.viewPostFavControlWrap .countWrapper {
    font-size: 0 !important;
    line-height: 100%;
    margin-top: 7px !important;
}
.viewPostFavControlWrap .countWrapper span {
    font-size: 1rem !important;
    display: block;
    text-align: center;

}

/* Two col */
.blogPostRender .statWrap {
    display: flex;
}
.blogPostRender .statWrap .statWrapCol {
    display: inline-flex;
    flex-grow: 1;
}
.blogPostRender .authorOuterWrap {
    margin-left:auto;
    display: inline-block;
    margin-right:0;
}

/* viewBlogLayout */
.viewBlogLayout {
    display: flex;
}
.viewBlogLayout .leftCol {
    width: 300px;
    padding-right: 30px;
    padding-bottom: 30px;
}
.viewBlogLayout .rightCol {
    flex: 1;
}
.viewBlogLayout .leftCol p {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 110%;
    margin-bottom: 8px;
}



/* Tiled posts */
.tiledBlogPosts {
    display: flex;
    flex-wrap: wrap;
}
.tiledPost {
    min-width: 350px;
    flex: 1 1 160px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.tiledBlogPosts .blogPostRender .statWrap {
    flex-wrap: wrap;
}
.tiledBlogPosts .blogPostRender .statWrap .statWrapCol:last-child {
    text-align: right;
    flex-grow: 1;
}
.tiledBlogPosts .blogPostRender .statWrap .statWrapCol:last-child .authorWrap {
    text-align: left;
}
.tiledBlogPosts .blogPostRender {
    height: 100%;
}

/* blogPostMinimalRender */
.blogPostMinimalRender a.title {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 120%;
    display: block;
}
.blogPostMinimalRender + .blogPostMinimalRender {
    margin-top: 9px;
}
.blogPostMinimalRender img {
    vertical-align: middle;
}

.blogPostMinimalRender a.postAuthorWrap img {
    border-radius: 50%;
}
.blogPostMinimalRender a.postAuthorWrap:hover {
    text-decoration: none;
}
.blogPostMinimalRender ul.blogPostStats {
    margin-left: 0;
    margin-top: 5px;
}
h3.blogLeftMenuH {
    margin-bottom: 3px;
}


/* Subscribe wrap */
.subWrap {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #efefef;
    padding: 15px;
    text-align: center;
}
.subWrap h3 {
    margin: 0;
}

/* Social */
.viewBlogLayout .socialShareWrap h3 {
    display: none;
}

/* Sort */
.blogSortControl {
    border-bottom: 1px solid #dadada;
    margin-bottom: 10px;
    display: block;
    text-align: right;
    padding-bottom: 3px;
}
.blogSortControl select {
    padding: 3px 5px;
}

/* Tags */
.tagWrapper {
    display: block;
    margin-bottom: 10px;
}

ul.viewBlogStats {
    margin-top: 7px;
}
ul.viewBlogStats li {
    font-size: 1rem !important;
    display: block !important;
    color: #333 !important;
    line-height: 100%;
    margin-bottom: 12px;
}
ul.viewBlogStats li:last-child {
    margin-bottom: 0;
}
ul.viewBlogStats li img {
    margin-right: 10px;
}

.viewPostHWrap h1, .viewPostHWrap {
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}
.viewPostHWrap .right {
    padding-left: 20px;
}

@media screen and (max-width: 950px) {
    .blogPostRender .statWrap { display: block; }


    .viewPostHWrap {
        text-align: left !important;
        padding-right: 40px;
    }

    .viewPostHWrap h1 {
        line-height: 110%;
        font-size: 2.6rem;
    }

    .viewPostHWrap img {
        height: 28px;
        width: 28px;
    }

    .viewBlogLayout {
        display: flex;
        flex-direction: column;
    }

    .viewBlogLayout .leftCol { order: 2; }
    .viewBlogLayout .rightCol {
        order: 1;
        width: 100%;
    }

}
@media screen and (max-width: 450px) {
    .blogPostRender a.title  {
        font-size: 1.4rem;
        max-width: 230px;
    }
    .blogPostRender a.title span.unread {
        margin-top: -2px;
    }
    .blogPostRender span.excerpt {
        font-size: 1.1rem;
    }

    .viewPostHWrap h1 {
        text-align: left;
        padding-left: 0;
        line-height: 110%;
        font-size: 2rem;
    }

    .tiledPost {
        min-width: 100%;
    }
}



a.report {
    text-align: center;
    display: block;
}
a.report span.reportCount {
    border-radius: 50%;
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    padding: 0;
}