Black and Teal Horror Blog

Layout CSS

/* =========================================
   THE COUNTDOWN
   BLACK + TEAL HORROR BLOG
   ========================================= */

/* PAGE BACKGROUND */
body {
    background: #000000 !important;
    color: #d7eeee !important;
}


/* MAIN BLOG ARTICLE */
.row.article {
    background: #050909 !important;
    border: 1px solid #00b8b2 !important;
    box-shadow:
        0 0 8px rgba(0, 255, 245, 0.25),
        inset 0 0 25px rgba(0, 100, 100, 0.08) !important;
    padding: 15px !important;
}


/* ENTIRE BLOG ENTRY */
.blog-entry {
    background: #050808 !important;
    color: #d7eeee !important;
    border: 1px solid #007d79 !important;
    box-shadow:
        0 0 12px rgba(0, 207, 200, 0.20) !important;
}


/* BLOG TITLE */
.blog-entry .title {
    background: #020505 !important;
    color: #19fff4 !important;

    border-left: 5px solid #00cfc8 !important;
    border-bottom: 1px solid #007d79 !important;

    padding: 14px !important;

    font-family: "Courier New", monospace !important;
    font-size: 25px !important;
    letter-spacing: 2px !important;

    text-shadow:
        0 0 4px #00cfc8,
        0 0 10px rgba(0, 207, 200, 0.7) !important;
}


/* STORY CONTENT */
.blog-entry .content {
    background: #070b0b !important;
    color: #dceaea !important;

    border-left: 1px solid #004f4c !important;
    border-right: 1px solid #004f4c !important;

    padding: 22px !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}


/* STORY PARAGRAPHS */
.blog-entry .content p {
    color: #dceaea !important;
    margin-bottom: 18px !important;
}


/* LINKS */
.blog-entry .content a {
    color: #19fff4 !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(0, 255, 245, 0.55) !important;
}

.blog-entry .content a:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 5px #00fff5,
        0 0 10px #00fff5 !important;
}


/* BLOCKQUOTES / CREEPY DIALOGUE */
.blog-entry .content blockquote {
    background: #020505 !important;

    color: #9ffffa !important;

    border-left: 4px solid #00cfc8 !important;

    margin: 22px 5px !important;
    padding: 15px 18px !important;

    font-style: italic !important;

    box-shadow:
        inset 0 0 15px rgba(0, 207, 200, 0.08),
        0 0 6px rgba(0, 207, 200, 0.15) !important;
}


/* IMAGES INSIDE STORY */
.blog-entry .content img {
    max-width: 100% !important;
    height: auto !important;

    border: 2px solid #00b8b2 !important;

    box-shadow:
        0 0 10px rgba(0, 255, 245, 0.35) !important;
}


/* AUTHOR INFORMATION */
.blog-entry .author-details {
    background: #020505 !important;

    color: #b9d6d6 !important;

    border: 1px solid #007d79 !important;

    padding: 12px !important;
}


/* AUTHOR PROFILE PICTURE */
.blog-entry .profile-pic {
    border: 2px solid #00cfc8 !important;

    box-shadow:
        0 0 8px rgba(0, 255, 245, 0.45) !important;
}


/* PUBLISHED DATE */
.blog-entry .publish-date {
    color: #6fa9a6 !important;

    font-family: "Courier New", monospace !important;
}


/* KUDOS AREA */
.blog-entry .kudos-container {
    background: #020505 !important;

    color: #d7eeee !important;

    border-top: 1px solid #007d79 !important;
    border-bottom: 1px solid #007d79 !important;

    padding: 12px !important;
}


/* COMMENTS */
.comments-table {
    background: #050808 !important;

    color: #dceaea !important;

    border: 1px solid #00b8b2 !important;

    box-shadow:
        0 0 8px rgba(0, 207, 200, 0.18) !important;
}


/* COMMENT CELLS */
.comments-table td,
.comments-table th {
    background: #050808 !important;

    color: #dceaea !important;

    border-color: #007d79 !important;
}


/* COMMENT LINKS */
.comments-table a {
    color: #00e5dc !important;
    font-weight: bold !important;
}


/* SELECTION COLOR */
::selection {
    background: #00b8b2 !important;
    color: #000000 !important;
}