body {
    margin: 0;
    background: #d6e7f7 url("data:image/gif;base64,R0lGODlhBAAEAIAAAP///9fm9yH5BAAAAAAALAAAAAAEAAQAAAIEhI+pWAA7");
    color: #222;
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}
a { color: #0645ad; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap {
    width: 960px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #7aa4d6;
}
.header {
    background: linear-gradient(#4f8ed6, #1d4f98);
    color: #fff;
    padding: 16px 18px;
}
.header h1 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -1px;
}
.nav {
    background: #eaf3ff;
    border-top: 1px solid #9fc1e8;
    border-bottom: 1px solid #9fc1e8;
    padding: 7px 10px;
}
.nav a {
    display: inline-block;
    padding: 5px 10px;
    border-right: 1px solid #b6cff0;
    font-weight: bold;
}
.content {
    padding: 12px;
    overflow: hidden;
}

.content > div:first-child {
    float: left;
    width: 660px;
}

.content > div:last-child {
    float: right;
    width: 260px;
}
.panel {
    margin-bottom: 12px;
    border: 1px solid #9fc1e8;
    background: #f7fbff;
}
.panel h2 {
    margin: 0;
    padding: 7px 9px;
    background: #2e69b2;
    color: #fff;
    font-size: 14px;
}
.panel-body { padding: 10px; }
.post {
    overflow: hidden;
    padding: 9px 0;
    border-bottom: 1px solid #d4e3f5;
}
.post:last-child { border-bottom: 0; }
.thumb {
    float: left;
    width: 150px;
    height: 96px;
    margin: 0 10px 8px 0;
    border: 1px solid #86add8;
    background: #dcecff;
    overflow: hidden;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.meta {
    color: #697b91;
    font-size: 11px;
}
.tag {
    display: inline-block;
    background: #ffea8a;
    border: 1px solid #d0a33a;
    padding: 1px 4px;
    color: #684800;
    font-weight: bold;
}
.pill {
    display: inline-block;
    background: #ffea8a;
    border: 1px solid #d0a33a;
    padding: 1px 4px;
    color: #684800;
    font-weight: bold;
}
.retro-messages {
    max-height: 360px;
    overflow: auto;
    border: 1px solid #b6cff0;
    background: #fff;
    padding: 8px;
    margin: 8px 0;
}
.retro-page {
    width: 760px;
    margin: 12px auto;
    border: 1px solid #9fc1e8;
    background: #fff;
    padding: 12px;
}
.retro-nav {
    padding: 7px 9px;
    background: #eaf3ff;
    border: 1px solid #9fc1e8;
    margin-bottom: 12px;
}
.retro-post-full,
.retro-profile,
.retro-comments {
    border: 1px solid #9fc1e8;
    background: #f7fbff;
    padding: 12px;
    margin-bottom: 12px;
}
.retro-social {
    margin-top: 12px;
    padding: 8px;
    border: 1px solid #b6cff0;
    background: #fff;
}
.retro-comments textarea {
    width: 96%;
}
.retro-full-image,
.retro-avatar {
    max-width: 560px;
    max-height: 380px;
    border: 1px solid #86add8;
}

@media (max-width: 980px) {
    .wrap { width: 100%; }
    .retro-page { width: auto; }
    .content > div:first-child,
    .content > div:last-child { float: none; width: auto; }
}