Chris Ellis • chrislabeard
I am a designer?
1 styles • 3 ★
Reddit 3 Column Spotify Theme
3 0body {
background: #363636;
color: #fff;
font-family: 'Open Sans', sans-serif;
margin-right: 322px;
margin-left: 140px;
}
body > .content {
background: #363636;
border: none;
}
#header {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5a5a), color-stop(100%,#4b4b4b));
/* Chrome,Safari4+ */
border-bottom: 1px solid #000;
box-shadow: 0 1px 15px rgba(0,0,0,.3);
top: 0;
}
#header-bottom-left {
border-top: 1px solid #707070;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#sr-header-area {
background: #434343;
float: none;
height: 100%;
margin: 0;
min-height: 100%;
position: fixed;
left: 0px;
top: 0;
width: 120px;
padding-left: 10px;
padding-right: 10px;
box-shadow: -1px 0 50px rgba(0,0,0,.4) inset, -1px 0 0 rgba(255,255,255,.1) inset;
border-left: 0 solid rgba(255,255,255,.1);
overflow-y: auto;
z-index: 999;
border-right: 1px solid #000;
}
a {
text-shadow: 0 1px 3px #000;
}
a:link {
color: #fff;
}
a:hover {
color: #ccc;
}
a:visited {
color: #a8ff70;
}
.thumbnail img {
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.thumbnail {
width: 72px;
padding: 0 5px 10px;
}
.link {
padding: 10px;
margin: 0;
}
.thing.even {
background: #303030;
}
.thing.odd {
background: transparent;
}
.link:hover {
background: rgba(0,0,0,.3);
}
.tabmenu {
position: relative;
top: -5px;
}
.tabmenu li {
display: block;
margin: 0 3px 10px;
float: left;
}
.tabmenu li.selected a {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#0e0e0e));
border-radius: 4px;
border: 1px solid #000;
box-shadow: 0 1px 0 rgba(255,255,255,.3);
color: #fff;
}
.tabmenu li a {
color: #868686;
background: transparent;
border: none;
padding: 0 10px;
text-transform: capitalize;
font-weight: normal;
}
.side {
background: #474747;
float: none;
height: 100%;
margin: 0;
min-height: 100%;
position: fixed;
right: 0;
top: 0;
width: 300px;
padding-left: 10px;
padding-right: 10px;
box-shadow: -2px 0 50px rgba(0,0,0,.4) inset, 1px 0 0 rgba(255,255,255,.1) inset;
border-left: 1px solid rgba(0,0,0,1);
overflow-y: auto;
z-index: 999;
}
div.content {
margin: 0 0 0 0;
padding: 0;
}
.link.promotedlink.promoted, .organic-listing .link {
background: #212121 url() repeat;
border: none;
box-shadow: 0 0 30px rgba(0,0,0,.7) inset;
}
.organic-listing {
border: none;
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.link .title {
font-size: 14px;
font-weight: normal;
}
#header-bottom-right {
background: rgba(0,0,0,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 0 10px rgba(0,0,0,.2);
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
border-top-left-radius: 4px;
}
.midcol {
background: rgba(0,0,0,.3);
border-radius: 4px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
padding-top: 2px;
padding-bottom: 2px;
}
.nextprev a {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(214,214,214,1)));
/* Chrome,Safari4+ */
color: #222;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
}
.titlebox, .morelink {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(132,173,0,1)));
/* Chrome,Safari4+ */
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.3) inset;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
font-family: 'Open Sans', sans-serif;
}
.titlebox .bottom {
border-color: rgba(255,255,255,.3);
color: rgba(255,255,255,.7);
}
.titlebox h1 {
color: #222;
text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.morelink .nub {
display: none;
}
.side .morelink {
padding: 2px 5px;
border: none;
margin-bottom: 10px;
}
.side .morelink a {
color: #fff;
}
.side .spacer {
padding-bottom: 10px;
padding-top: 10px;
border-top: 0 solid rgba(255,255,255,.3);
border-bottom: 0 solid rgba(0,0,0,.5);
margin: 0;
}
.side .spacer:last-child {
border-bottom: 0;
}
#search input[type="text"] {
border-radius: 3em;
box-shadow: 0 1px 5px rgba(0,0,0,.2) inset, 0 1px 0 rgba(255,255,255,.3);
border: 1px solid #000;
padding-left: 10px;
background: #111;
width: 285px;
color: #fff;
font-weight: normal;
display: inline-block;
}
.dropdown.srdrop .selected {
color: #48abff;
font-weight: bold;
}
.drop-choices {
background: #eee;
color: #333;
text-shadow: 0 1px 0 #fff;
border-radius: 4px;
box-shadow: 0 5px 25px rgba(0,0,0,.7), 0 1px 0 #fff inset;
border: none;
}
.drop-choices a {
color: #222;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
font-size: 11px;
padding-bottom: 5px;
padding-top: 5px;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
}
.drop-choices a:first-child {
border-top: 0;
}
.drop-choices a:last-child {
border-bottom: 0;
}
.pagename {
display: none;
}
.content .spacer {
margin-bottom: 0;
}
.sidecontentbox, .comments-page .titlebox {
padding: 10px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5a5a), color-stop(100%,#4b4b4b));
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 5px rgba(0,0,0,.5);
border-radius: 4px;
}
.sidecontentbox ul.content {
background: rgba(0,0,0,.3);
box-shadow: 0 0 15px rgba(0,0,0,.3) inset, 0 1px 0 rgba(255,255,255,.2);
border: 1px solid rgba(0,0,0,.6);
border-radius: 4px;
padding: 0;
}
.sidecontentbox ul.content .thing {
padding: 5px;
}
.sidecontentbox ul.content .thing .midcol, .midcol {
padding: 5px;
margin-right: 5px;
}
.sidecontentbox .title {
margin-bottom: 10px;
}
.sidecontentbox h1 {
color: #fff;
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.sidecontentbox .right a, .sidecontentbox li.more a {
display: block;
padding: 2px 5px;
border-radius: 0 0 4px 4px;
border-top: 1px solid #fff;
background: #eee;
color: #222;
text-shadow: 0 1px 0 #fff;
text-transform: capitalize;
font-weight: bold;
}
#sr-more-link {
color: #222;
text-shadow: 0 1px 0 #fff;
}
a.author {
color: #46deff;
}
a.submitter {
color: #ff7e2c;
}
.comment .child {
border-left: 1px dashed rgba(255,255,255,.3);
}
.linkinfo {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5a5a), color-stop(100%,#4b4b4b));
box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 5px rgba(0,0,0,.5);
border-radius: 4px;
border: none;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.linkinfo .score {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.5)), color-stop(100%,rgba(0,0,0,.2)));
/* Chrome,Safari4+ */
padding: 5px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.5);
box-shadow: 0 1px 0 rgba(255,255,255,.3);
margin-top: 5px;
margin-bottom: 5px;
}
.comment .md p a {
color: #ffee2c;
}
.comment .md p a[href$="/spoiler"] {
color: #000;
}
.comment .md p a[href$="/spoiler"]:hover {
color: #fff;
}
#siteTable {
margin-top: 0;
}
.login-form-side {
border-radius: 4px;
box-shadow: 0 0 15px rgba(0,0,0,.5) inset, 0 1px 0 rgba(255,255,255,.2) ;
border: 1px solid #000;
}
.cover {
background: rgba(0,0,0,.2);
opacity: 1;
box-shadow: 0 0 250px rgba(0,0,0,.8) inset;
}
.infobar {
color: orange;
text-shadow: 0 1px 0 transparent;
}
#sr-header-area .dropdown.srdrop {
float: none;
}
#sr-header-area .flat-list li {
display: block;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
#sr-header-area .separator {
display: none;
}
.nextprev {
padding-left: 10px;
}