Entries tagged with layout

Someone at a com asked about my layout, and I'm cool with sharing so yeah.

I give zero fucks about attribution, it's not even that different from default.
Go to Customize Style and select any of the variants of the Line Up base style.
Then go to Customize My Theme and in the Custom CSS section, untick the box and paste the following:

/* Cleaned CSS: */

.ContextualPopup {
    background: #ffffff;
    color: #323232;
    }

.ContextualPopup a { color: #db3f3f; }
.ContextualPopup a:visited { color: #db3f3f; }
.ContextualPopup a:hover { color: #12332a; }
.ContextualPopup a:active { color: ; }

#lj_controlstrip {
    background-color: #ffffff;
    background-image: none;
}

#lj_controlstrip td {
    color: #323232;
    border-bottom: 1px solid #ffffff;
}

#lj_controlstrip_statustext {
    color: #323232;
}

#lj_controlstrip a {
    color: #db3f3f;
}

#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
    border-right: 1px solid #ffffff;
}

#lj_controlstrip_login td {
    border-bottom: 0;
}

#lj_controlstrip td td {
    border-bottom: 0;
}
H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; font-size: 80%;
    padding: 0;
    background-image: url('http://i60.tinypic.com/29pr8ld.png');
    color: #323232;
background-color: #f0f0f0;

}

html body {
    margin-left: 0em;
    margin-right: 0em;
}

a { color: #db3f3f;
 }
a:visited { color: #db3f3f;
 }
a:hover { color: #12332a;
 }
a:active {  }

q { font-style: italic; }

/* #content layout */
#content { float: none; }
@media only screen and (min-width: 57.5em) {
    .two-columns-left #content,
    .three-columns-sides #content {
        border-left: 19.5em solid transparent;
    }
    .two-columns-right #content,
    .three-columns-sides #content {
        border-right: 19.5em solid transparent;
    }
    .three-columns-left #content {
        border-left: 39em solid transparent;
    }
    .three-columns-right #content {
        border-right: 39em solid transparent;
    }
    .column-right #content {
        min-width: 19.5em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
    }
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: .5em;
}

#header {
    background: #ffffff;
    color: #2d2d2d;
    margin-top: 2em;
}

h1#title {
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; font-size: 1.3em;
  font-weight: 900;
}

h2#subtitle,
h2#pagetitle {
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; font-size: 1.23em;
}

#footer {
    background: transparent;
}

#footer a {  }
#footer a:visited {  }
#footer a:hover {  }
#footer a:active {  }

#primary {
    width:100%;
    margin-right:-100%;
    margin-left: 0;
}

#primary > .inner:first-child, #secondary > .inner:first-child, #tertiary > .inner:first-child {
    padding: 1em;
}

/* modules layout */
#primary { float: none; }
#secondary, #tertiary { width: 100%; }

@media only screen and (min-width: 57.5em) {
    .multiple-columns #primary {
        float: left;
    }

.two-columns-left #secondary,
    .three-columns-sides #secondary {
        float: left;
        width: 19.5em;
        margin-left: -19.5em;
    }
    .two-columns-right #secondary {
        float: right;
        width: 19.5em;
        margin-right: -19.5em;
    }
    .three-columns-left #secondary {
        float: left;
        width: 19.5em;
        margin-left: -39em;
    }
    .three-columns-right #secondary {
        float: right;
        width: 19.5em;
        margin-right: -19.5em;
    }

.two-columns #tertiary {
        clear: both;
        width: auto;
    }
    .two-columns-left #tertiary { margin-left: -19.5em; }
    .two-columns-right #tertiary { margin-right: -19.5em; }
    .two-columns #tertiary .module {
        float: left;
        width: 19.5em;
    }
    .three-columns-left #tertiary {
        float: left;
        width: 19.5em;
        margin-left: -19.5em;
    }
    .three-columns-right #tertiary {
        float: right;
        width: 19.5em;
        margin-right: -39em;
        margin-left: 19.5em; /* so that #tertiary won't overlay #secondary in IE7 */
    }
    .three-columns-sides #tertiary {
        float: right;
        width: 19.5em;
        margin-right: -19.5em;
    }
}

.navigation ul {
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {
    background: #ffffff;
    color: #323232;
background-color: #ffffff;
border: solid 1px #2d2d2d;
border-radius: 8px;

}

.entry .entry-title {
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; font-size: 1.2em;
padding-left: 1em;
}

.entry .entry-title, .entry .entry-title a {
    color: #2d2d2d;

}

.no-subject .entry .entry-title {
    background: none;
    border: none;
}

.entry a { color: #db3f3f;
 }
.entry a:visited { color: #db3f3f;
 }
.entry a:hover { color: #12332a;
 }
.entry a:active {  }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img {
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 76.5em) {
    .entry-content img, .comment-content img { max-width: none; }
}

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.tag ul li {
    display: inline;
} /* same for month view */

ul.entry-management-links {
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a, .entry-management-links a { color: #2d2d2d;
 }
.entry-interaction-links a:visited, .entry-management-links a:visited {  }
.entry-interaction-links a:hover, .entry-management-links a:hover {  }
.entry-interaction-links a:active, .entry-management-links a:active {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-posted {font-weight:bold;}

.comment-wrapper {
    padding: .5em 0;
    min-width: 15em;
}

.comment .comment-title {
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; 
    margin: 0;
}

.comment .comment-title, .comment .comment-title a {
    color: #2d2d2d;

}

.no-subject .comment .comment-title {
    background: none;
    border: none;
}

ul.comment-management-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.icon-keywords ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.icon-keywords ul li {
    display: inline;
}

/* modules */

.module {
    background-color: #ffffff;
    border: 8px solid #2d2d2d;
    border-radius: 8px;
}

.module a {  }
.module a:visited {  }
.module a:hover {  }
.module a:active {  }

.module h2 {
    color: #ffffff;
background-color: #2d2d2d;
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; font-size: 1.2em;
    padding-left: .8em;
    padding-bottom: .4em;
    font-weight: 900;
}

.module-content {
    font-family: 'Lato', 'Franklin Gothic Book', sans-serif; 
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
}

ul.userlite-interaction-links.icon-links {
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.any-column .module-calendar table { margin: 0; }
.module-calendar .module-content { text-align: left; }
@media only screen and (min-width: 57.5em) {
    .multiple-columns .module-calendar .module-content {
        text-align: center;
    }

.multiple-columns .module-calendar table {
        margin: 0 auto;
    }

.multiple-columns .module-syndicate .module-content {
        text-align: center;
    }
}

.module-calendar td {
    padding: 4px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
    max-width: 100%;
}

.search-form .search-box-item, 
.search-form .search-button-item {
    display: block
}

.search-form .comment_search_checkbox_item {
    display: inline
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}

.module-credit .category-title {
    font-weight: bold;
}

.tags_cloud li, .module-tags_cloud li { display: inline; }

/* Line Up */
/* by timeasmymeasure */

/* Main
***************************************************************************/

body {
    margin: 30px 0 0;
    }

a, a:visited {
    text-decoration: none;
    }

hr.above-entry-interaction-links,
hr.below-reply-container {
    display: none;
    }

code, kbd, pre, tt, textarea {
    font-family: monospace;
    }

input, textarea {
    background-color: #ffffff;
    border: 1px solid #2d2d2d;
    color: #323232;
    }

::-moz-selection,
::selection {
    background-color: #ededed;
    color: #2d2d2d;
    }

blockquote {
    border-left: 8px solid #ddd;
    margin: 10px 10px 10px 50px;
    padding: 0px 100px 0px 10px;
    width: 80%;
    }

ul {
    list-style: square inside;
    margin: 5px 0 5px 15px;
    }

ol {
    list-style: decimal inside;
    margin: 5px 0 5px 15px;
    }

/* Page Containers
***************************************************************************/

#canvas {
    margin: 0 auto;
    width: 90%;
    }

#primary > .inner:first-child {
    padding: 0;
    }

#secondary > .inner:first-child,
#tertiary > .inner:first-child {
    padding: 0;
    }

@media only screen and (min-width: 57.5em) {
    .column-left #primary > .inner:first-child {
        padding-left: 1em;
        }

.column-right #primary > .inner:first-child {
        padding-right: 1em;
        }

.three-columns-left #secondary > .inner:first-child,
    .three-columns-right #secondary > .inner:first-child {
        margin-right: .5em;
        }

.three-columns-left #tertiary > .inner:first-child,
    .three-columns-right #tertiary > .inner:first-child {
        margin-left: .5em;
        }
}

/* Header
***************************************************************************/

#header {
    border: none;
    border-top: 10px solid #2d2d2d;
    border-radius: 8px;
    margin: 0 0 15px 0;
    padding: 10px;
    }

h1#title {
    font-weight: bold;
    font-size: 2em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    }

h2#subtitle,
h2#pagetitle {
    color: #2d2d2d;
    font-weight: lighter;
    margin: 0;
    padding: 0;
    text-transform: lowercase;
    }

/* Navigation
***************************************************************************/

.navigation {
    background-color: #2d2d2d;
    border: none;
    border-top: 10px solid #2d2d2d;
    border-radius: 8px;
    color: #ffffff;
    margin: 0 0 15px 0;
    padding: 5px;
    font-size: 1.2em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    }

.navigation a {
    color: #ffffff;
    }

.navigation a:visited {
    color: ;
    }

.navigation a:hover {
    color: ;
    }

.navigation a:active {
    color: ;
    }

.navigation ul {
    margin: 0;
    padding: 0;
    }

.navigation .page-separator {
    padding: 10px;
    }

/* Entries
***************************************************************************/

.entry {
    background-color: #2d2d2d;
    border: none;
    border-top: 10px solid #2d2d2d;
    margin: 0 0 15px 0;
    }

.entry .header {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    }

h3.entry-title {
    font-weight: normal;
    margin: 0;
    padding: 3px;
    text-transform: uppercase;
    }

.entry .entry-title a {
    color: #2d2d2d;
    }

.datetime {
    color: #db3f3f;
    font-size: .75em;
    text-transform: lowercase;
    padding-left: 1.5em;
    }

.has-userpic .entry .userpic {
    margin: 0 10px 20px;
    }

.entry .userpic img {
    background-color: #ffffff;
    border: 5px solid #2d2d2d;
    padding: 5px;
    border-radius: 100%;
    }

.entry-poster {
    background-color: #ffffff;
    display: block;
    padding: 0 10px 5px 0;
    text-align: right;
    }

.entry-content {
    background-color: #ffffff;
    margin: 0;
    min-height: 100px;
    padding: 15px;
    }

.metadata {
    background-color: #ffffff;
    font-size: .85em;
    margin: 0;
    padding: 10px 15px 5px;
    text-transform: uppercase;
    }

.metadata ul {
    margin: 0;
    padding: 0;
    }

.metadata ul li {
    margin: 0;
    padding: 0;
    }

.metadata-item {
    color: #db3f3f;
    }

.entry .footer {
    background-color: #ffffff;
    padding: 0 10px;
    text-transform: uppercase;
    }

.tag {
    font-size: .85em;
    padding: 15px 5px;
    text-transform: uppercase;
    }

.tag ul li {
    font-weight: normal;
    padding: 0;
    }

ul.entry-management-links,
ul.entry-interaction-links {
    margin: 0;
    padding: 2px;
    text-align: center;
    clear: both;
    }

ul.entry-management-links li {
    margin: 0 auto;
    text-align: center;
    }

ul.entry-interaction-links li {
    font-size: 1.152em;
    margin: 0 5px 0 0;
    padding: 0;
    }

ul.entry-interaction-links a {
    color: #2d2d2d;
    }

/* Comments & Reply Forms
***************************************************************************/

.comment-pages {
    margin: 15px 0;
    }

.comment-pages.toppages {
    margin-bottom: 0;
    }

.comment {
    background-color: #2d2d2d;
    border: none;
    border-top: 10px solid #2d2d2d;
    color: #323232;
    margin: 0 0 15px 0;
    border-radius: 8px;
    }

.comment a { color: #db3f3f; }
.comment a:visited { color: #db3f3f; }
.comment a:hover { color: #12332a; }
.comment a:active { color: ; }

.partial .comment .inner {
    background-color: #ffffff;;
    padding: 5px;
    }

.comment .header {
    background-color: #ffffff;
    font-weight: lighter;
    padding: 5px 10px;
    margin: 0;
    text-transform: uppercase;
    }

.partial .comment-title {
    font-weight: normal;
    text-transform: uppercase;
    }

.comment .comment-title a {
    color: #2d2d2d;
    }

.has-userpic .comment .userpic {
    margin: 0 10px 20px;
    }

.comment .userpic img {
    background-color: #ffffff;
    border: 5px solid #2d2d2d;
    padding: 5px;
    }

.comment-poster {
    background-color: #ffffff;
    display: block;
    padding: 0 10px 5px 0;
    text-align: right;
    }

.partial .comment-poster {
    display: inline;
    padding: 0;
    }

.comment .poster-ip,
.comment .edittime {
    background-color: #ffffff;
    }

.comment .poster-ip {
    display: block;
    padding: 15px;
    }

.comment-content {
    background-color: #ffffff;
    margin: 0;
    min-height: 100px;
    padding: 15px;
    }

.comment .footer {
    background-color: #ffffff;
    padding: 0 10px;
    text-transform: uppercase;
    }

.comment .multiform-checkbox {
    padding: 0 5px;
    }

ul.comment-management-links,
ul.comment-interaction-links {
    margin: 0;
    padding: 2px;
    text-align: center;
    clear: both;
    }

ul.comment-management-links li {
    margin: 0 auto;
    text-align: center;
    }

ul.comment-interaction-links li {
    font-size: 1.152em;
    margin: 0 5px 0 0;
    padding: 0;
    }

ul.comment-management-links a,
ul.comment-interaction-links a {
    color: #2d2d2d;
    }

.bottomcomment {
    background-color: #ffffff;
    border: none;
    border-top: 10px solid #2d2d2d;
    border-radius: 8px;
    color: #323232;
    margin: 0;
    padding: 10px;
    text-transform: uppercase;
    }

table.talkform {
    background-color: #ffffff;
    color: #323232;
    margin: 0 0 10px;
    padding: 10px;
    }

#postform a {
    color: #db3f3f;
    }

#postform a:visited {
    color: #db3f3f;
    }

#postform a:hover {
    color: #12332a;
    }

#postform a:active {
    color: ;
    }

textarea.textbox {
    border: 1px solid #2d2d2d;
    }

/* Archive Pages
***************************************************************************/

.month {
    background-color: #ffffff;
    border: none;
    border-top: 10px solid #2d2d2d;
    color: #323232;
    margin-bottom: 15px;
    padding: 20px;
    }

.month a { color: #db3f3f; }
.month a:visited { color: #db3f3f; }
.month a:hover { color: #12332a; }
.month a:active { color: ; }

.month h3.entry-title {
    background-color: ;
    color: #2d2d2d;
    font-size: 1.2em;
    text-transform: uppercase;
    }

.month h3.entry-title a {
    color: #2d2d2d;
    }

.month table {
    margin: auto;
    width: 100%;
    }

table.month {
    border: none;
    }

.month caption {
    display: none;
    }

table.month th {
    background-color: #2d2d2d;
    border: 1px solid #2d2d2d;
    color: #ffffff;
    margin: 0 2px;
    padding: 5px 2px;
    font-size: 1.15em;
    font-weight: normal;
    text-transform: uppercase;
    }

table.month td {
    border: none;
    vertical-align: top;
    }

.month td.day {
    border: 1px solid #2d2d2d;
    padding: 10px;
    }

.month td.day-has-entries p {
    font-size: 1.14em;
    font-weight: bold;
    padding: 0 0 0 5px;
    }

.month dl, .month dt, .month dd {
    margin: 0;
    padding: 0;
    }

/* Tags Page
***************************************************************************/

.tags-container {
    background-color: #ffffff;
    border-top: 10px solid #2d2d2d;
    color: #323232;
    margin-bottom: 10px;
    }

.tags-container a { color: #db3f3f; }
.tags-container a:visited { color: #db3f3f; }
.tags-container a:hover { color: #12332a; }
.tags-container a:active { color: ; }

/* Resize to H3 */
/* Use custom size otherwise */
.tags-container h2 {
    background-color: ;
    color: #2d2d2d;
    font-size: 1.17em;
    font-size: 1.2em;
    font-weight: normal;
    padding: 5px 10px;
    text-transform: uppercase;
    }

.tags-container .contents,
.tags-container .footer {
    padding: 15px;
    }

.tags-container .ljtaglist {
    padding: 0;
    }

.tags-container .manage-link {
    text-align: right;
    text-transform: uppercase;
    }

/* Icons Page
***************************************************************************/

.icons-container {
    background-color: #ffffff;
    border-top: 10px solid #2d2d2d;
    color: #323232;
    margin-bottom: 10px;
    }

.icons-container a { color: #db3f3f; }
.icons-container a:visited { color: #db3f3f; }
.icons-container a:hover { color: #12332a; }
.icons-container a:active { color: ; }

.sorting-options ul {
    padding-left: 0;
    text-align: center;
    }

/* Resize to H3 */
/* Use custom size otherwise */
.icons-container h2 {
    background-color: ;
    color: #2d2d2d;
    font-size: 1.17em;
    font-size: 1.2em;
    font-weight: normal;
    padding: 5px 10px;
    text-transform: uppercase;
    }

.icons-container .contents,
.icons-container .footer {
    padding: 15px;
    }

.icons-container .icon {
    margin: 1em 0;
    }

.icon-image {
    float: left;
    clear: left;
    margin-bottom: .25em;
    min-width: 100px;
    padding-right: 1em;
    }

.icon-info {
    min-height: 100px;
    }

.icon-info span {
    font-weight: bold;
    }

.icon-info .default {
    text-decoration: underline;
    }

.icon-keywords ul li {
    padding: 0;
    }

.icons-container .manage-link {
    text-align: right;
    text-transform: uppercase;
    }

/* Modules
***************************************************************************/

.module {
    border: none;
    border-top: 1px solid #2d2d2d;
    margin: 0 0 15px 0;
    }

@media only screen and (min-width: 57.5em) {
    .two-columns #tertiary .module {
        margin: 0 15px 15px 0;
        }
}

.module-header {
    font-weight: normal;
    margin: 0;
    padding: 3px;
    text-transform: uppercase;
    border-radius: 8px 8px 0px 0px;
    }

.module-header a {
    color: #ffffff;
    }

.module-content {
    padding: 10px;
    }

.module ul {
    list-style: none;
    }

.module ul li {
    margin: 0;
    padding: 0 0 0 5px;
    }

.module-userprofile .userpic {
    text-align: center;
    }

.module-userprofile .userpic img {
    background-color: #2d2d2d;
    border: 3px solid #2d2d2d;
    padding: 5px;
    border-radius: 100%;
    }

.module-userprofile .journal-name {
    margin: 5px 0 0;
    text-align: center;
    text-transform: uppercase;
     }

.module-userprofile .journal-website-name {
    text-align: center;
    text-transform: uppercase;
    }

ul.userlite-interaction-links {
    margin: 5px 0 0;
    text-align: center;
    }

ul.userlite-interaction-links li {
    margin: 0 auto;
    text-align: center;
    }

.module-navlinks {
    font-size: 1.2em;
    text-align: left;
    border: none;
    border-top: 8px solid #2d2d2d;
    }

@media only screen and (min-width: 57.5em) {
    .multiple-columns .module-navlinks {
        text-align: right;
    }
}

.module-navlinks ul {
    text-transform: uppercase;
    }

.module .manage-tags-link {
    margin: 10px 0 0;
    text-align: right;
    text-transform: uppercase;
    }

.module-calendar table {
    margin: auto !important; */ important needed */
    text-align: center;
    width: 55%;
    }

.module-calendar th,
.module-calendar td.empty-day {
    border: 1px solid #ccc;
    border-radius: 100%;
    }

.module-calendar td.entry-day {
    border: 1px solid #ccc;
    border-radius: 100%;
    }

.module-search .search-box {
    margin-right: 2px;
    }

/* Contextual Pop-ups
***************************************************************************/

.ContextualPopup {
    background: #ffffff;
    border: 1px solid #2d2d2d !important;
    border-radius: 0;
    color: #323232;
    text-transform: uppercase;
    }

.ContextualPopup a,
.ContextualPopup a:visited {
    text-decoration: none;
    }

.ContextualPopup a { color: #db3f3f; }
.ContextualPopup a:visited { color: #db3f3f; }
.ContextualPopup a:hover { color: #12332a; }
.ContextualPopup a:active { color: ; }

.ContextualPopup .Userpic {
    background-color: #2d2d2d;
    border: 2px solid #2d2d2d;
    margin: 5px;
    padding: 3px;
    }

In case you want to edit colors:

main color: #2d2d2d
highlight / link color: #db3f3f

And that's it. The coding is really lazy so this is still a work in progress; if anything looks incomplete or weird please let me know. ♥

Layout - Lines & Swirls