/* ==========================================================================
   Steam 2003/2004 Blog Theme for SurgeWeb
   Color Palette from Steam 2004:
     BG Light:             #4C5844
     BG Dark:              #293021
     Text Main:            #FFFFFF
     Text Important:       #C4B550
     Text Light:           #A0AA95
     Text Disabled / hr:   #282E22
     Title Unfocused:      #889180
     Title Focused:        #FFFFFF
     Border Light:         #889180
     Border Dark:          #282E22
     Uninstalled Game:     #3E4637
   ========================================================================== */

/* --- Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background: #293021 url('green-marble.png') no-repeat center center fixed;
    background-size: cover;
    font: 13px Tahoma, Geneva, sans-serif;
    color: #FFFFFF;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

a:link,
a:visited {
    color: #C4B550;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    background-color: #3E4637;
}

a:active {
    color: #C4B550;
    text-decoration: none;
}

::selection {
    color: #FFFFFF;
    background-color: #C4B550;
}


/* --- Main Content Wrapper --- */
#content {
    max-width: 860px;
    margin: 0 auto;
    padding: 10px;
}


/* --- Banner / Header --- */
#banner {
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 8px 12px;
    margin-bottom: 0;
    position: relative;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

#banner img {
    max-height: 60px;
    vertical-align: middle;
    margin-right: 10px;
}

#title {
    font: bold 14px Tahoma, Geneva, sans-serif;
    color: #FFFFFF;
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* --- Description / Intro --- */
#description {
    background-color: #3E4637;
    border-style: inset;
    border-width: 1px;
    border-color: #282E22 #889180 #889180 #282E22;
    padding: 10px 14px;
    margin-bottom: 8px;
    color: #A0AA95;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

#description p {
    margin: 0;
}


/* --- Web Badges --- */
#badges-container {
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 6px 8px;
    margin-bottom: 8px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 0;
}

#badges-container a {
    display: inline-block;
    margin: 3px 2px;
    line-height: 0;
}

#badges-container img {
    display: block;
    image-rendering: pixelated;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;

    /* for bigger badges */
    width: 106px;
    /* 88px * 1.5 */
    height: auto;
    /* Automatically calculates the height to roughly 46.5px */

    /* The magic trick to keep GIFs crisp instead of blurry */
    image-rendering: -moz-crisp-edges;
    /* For older Firefox */
}

#badges-container a:hover {
    background: transparent;
}

#badges-container a:hover img {
    border-style: inset;
    border-color: #282E22 #889180 #889180 #282E22;
}


/* --- Archive Navigation --- */
#archives-container {
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 4px 8px;
    margin-bottom: 8px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

#archive {
    display: inline-block;
    margin-right: 4px;
}

#archive a {
    display: inline-block;
    padding: 3px 8px;
    color: #A0AA95;
    font-size: 11px;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    background-color: #4C5844;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#archive a:hover {
    background-color: #3E4637;
    color: #C4B550;
    border-style: inset;
    border-color: #282E22 #889180 #889180 #282E22;
}


/* --- Layout: Posts + Sidebar --- */
.right-column-wrapper {
    float: right;
    width: 33%;
}

#sidebar {
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 10px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

#posts {
    float: left;
    width: 65%;
    padding-right: 10px;
}


/* --- Post Entries --- */
h2.date-header {
    background-color: #282E22;
    color: #C4B550;
    font: bold 10px Tahoma, Geneva, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    margin: 8px 0 0 0;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
}

.post {
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

h3.post-title {
    font: bold 13px Tahoma, Geneva, sans-serif;
    color: #FFFFFF;
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #282E22;
    text-transform: uppercase;
}

.post-body {
    color: #dedfd6;
    font-size: 12px;
    line-height: 1.6;
    padding: 4px 0;
}

.post-body p {
    margin: 0 0 8px 0;
}

p.post-footer {
    border-top: 1px solid #282E22;
    padding-top: 6px;
    margin-top: 8px;
    font-size: 11px;
    color: #889180;
}

p.post-footer em {
    font-style: normal;
    color: #A0AA95;
}

a.comment-link {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 11px;
    color: #FFFFFF;
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
}

a.comment-link:hover {
    background-color: #3E4637;
    color: #C4B550;
    border-style: inset;
    border-color: #282E22 #889180 #889180 #282E22;
}


/* --- Media Embeds (audio, video, iframes) --- */
.post-body audio {
    width: 100%;
    margin: 8px 0;
    padding: 6px;
    background-color: #3E4637;
    border-style: inset;
    border-width: 1px;
    border-color: #282E22 #889180 #889180 #282E22;
    border-radius: 0;
}

.post-body video {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
    padding: 4px;
    background-color: #3E4637;
    border-style: inset;
    border-width: 1px;
    border-color: #282E22 #889180 #889180 #282E22;
}

.post-body iframe {
    width: 100%;
    max-width: 100%;
    margin: 8px 0;
    padding: 4px;
    background-color: #3E4637;
    border-style: inset;
    border-width: 1px;
    border-color: #282E22 #889180 #889180 #282E22;
}


/* --- Comments --- */
.comments {
    background-color: #3E4637;
    border-style: inset;
    border-width: 1px;
    border-color: #282E22 #889180 #889180 #282E22;
    padding: 8px 10px;
    margin-top: 8px;
}

.comment-body {
    padding: 6px 0;
    border-bottom: 1px solid #282E22;
    font-size: 12px;
    color: #dedfd6;
}

.comment-body:last-child {
    border-bottom: none;
}

.comment-body b {
    color: #C4B550;
    font-weight: bold;
}

.comment-body small {
    color: #889180;
}



/* --- Sidebar --- */

h2.sidebar-title {
    font: 10px Tahoma, Geneva, sans-serif;
    font-weight: normal;
    color: #C4B550;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #282E22;
}

#profile-container {
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

dl.profile-datablock {
    margin: 0;
    padding: 0;
}

dt.profile-img img {
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    margin-bottom: 6px;
}

dd.profile-data {
    color: #dedfd6;
    font-size: 12px;
    margin: 0 0 4px 0;
}

dd.profile-data strong {
    color: #C4B550;
}

p.profile-textblock {
    color: #A0AA95;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
}

#related-container {
    margin-bottom: 12px;
    color: #A0AA95;
    font-size: 12px;
}

.recent-posts {
    margin-top: 12px;
}

.recent-posts ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.recent-posts li {
    display: block;
    padding: 2px 6px;
    line-height: 19px;
    height: 20px;
    font-size: 12px;
}

.recent-posts li a:link,
.recent-posts li a:visited {
    color: #FFFFFF;
    background-color: #3E4637;
    display: block;
    padding: 1px 4px;
}

.recent-posts li:hover {
    background-color: #282E22;
}

.recent-posts li:hover a {
    background-color: #282E22;
    color: #C4B550;
}

#surgeblog {
    margin-top: 12px;
    text-align: center;
}

#surgeblog img {
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
}


/* --- Footer --- */
#footer {
    clear: both;
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
    padding: 8px 12px;
    margin-top: 8px;
    text-align: center;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3);
}

#footer hr {
    border: none;
    border-top: 1px solid #282E22;
    margin-bottom: 8px;
}

#footer p {
    font-size: 11px;
    color: #889180;
    margin: 0;
}

#footer a {
    color: #A0AA95;
}

#footer a:hover {
    color: #C4B550;
}


/* --- Webkit Scrollbar (Steam style) --- */
::-webkit-scrollbar {
    background-color: #5a6a50;
    width: 16px;
}

::-webkit-scrollbar-button {
    width: 16px;
    height: 16px;
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
}

::-webkit-scrollbar-thumb {
    width: 16px;
    background-color: #4C5844;
    border-style: outset;
    border-width: 1px;
    border-color: #889180 #282E22 #282E22 #889180;
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url('scroll-down.png');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url('scroll-up.png');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
}


/* --- Clearfix --- */
#content::after {
    content: "";
    display: table;
    clear: both;
}


/* --- Responsive: Mobile (768px and below) --- */
@media screen and (max-width: 768px) {
    #content {
        padding: 6px;
        display: flex;
        flex-direction: column;
    }

    .right-column-wrapper {
        display: contents;
    }

    #banner {
        order: 1;
        padding: 6px 8px;
    }

    #description {
        order: 2;
    }

    #badges-container {
        order: 3;
    }

    #profile-container {
        order: 4;
        margin-bottom: 8px;
    }

    dl.profile-datablock {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    dt.profile-img {
        flex-shrink: 0;
    }

    dt.profile-img img {
        margin-bottom: 0;
    }

    .profile-dd-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #archives-container {
        order: 5;
        padding: 4px 6px;
    }

    #posts {
        order: 6;
        float: none;
        width: 100%;
        padding-right: 0;
    }

    #sidebar {
        order: 7;
        float: none;
        width: 100%;
        margin-bottom: 8px;
    }

    #footer {
        order: 8;
        padding: 6px 8px;
    }

    #title {
        font-size: 12px;
    }

    #archive a {
        padding: 3px 6px;
        font-size: 10px;
    }

    .post {
        padding: 8px 10px;
    }

    h3.post-title {
        font-size: 12px;
    }

    .recent-posts li {
        height: auto;
        line-height: 1.4;
        padding: 4px 6px;
    }

    #footer p {
        font-size: 10px;
    }
}