r-doom-subreddit.css

r-doom-subreddit.css

/* 

/r/Doom Stylesheet by scar45 (03/2016)

	An updated version of the /r/Doom style, which aims to bring in influence from the old and new Doom series of amazing games.
	Colour scheme has been designed to resemble fire and blood (red and orange) sitting on top of a dark theme, since Doom is, you know, dark.
	Older, sprite-based elements from the original games adorn the left side of the UI, where newer bits from Doom (2016) are inlayed to the right.
	
	I hope you enjoy this, and if you have any feedback, please toss me a PM @ /u/scarFortyFive
	
	Thanks!

[Update] Snoo image in header, since this can't be handled strictly by CSS:
	
	Change:
		<img id="header-img" src="//b.thumbs.redditmedia.com/KoDFy3XO2ZsI4QZcPksWPFf5nz4-cjnSOZjzPAeQRPY.png" alt="Doom" height="100" width="155">
	to:
		<img id="header-img" src="http://i.imgur.com/SBUyA5h.png" alt="Doom">

*/
body {
	background: url("http://i.imgur.com/nmL5fXi.jpg") no-repeat top right fixed #050302;
    background-size: cover;
}

a {
    text-decoration: none;
    color: #FF6300;
	-webkit-transition: all 256ms ease-in-out;
	-moz-transition: all 256ms ease-in-out;
	-ms-transition: all 256ms ease-in-out;
	-o-transition: all 256ms ease-in-out;
	transition: all 256ms ease-in-out;
}

#header {
    background-image: url("http://i.imgur.com/ojiha6i.jpg");
    background-repeat: repeat-x;
    height: 128px;
    background-position: center 19px;
	border-bottom: 1px solid #000;
}

.pagename a {
    color: #fff;
	font-size: 1.666em;
	position: relative;
	top: 6px;
	margin-right: 20px;
    text-shadow: 1px 1px 15px #f00, 1px 1px 15px #f00, 1px 1px 15px #f00, 1px 1px 5px #f00;
}

.dropdown.srdrop .selected {
    color: #fff;
}

#sr-header-area {
    background-color: #4a0202;
    border-bottom: 1px solid #930d0d;
}

.sr-bar a {
    color: #e37373;
}

.sr-bar a:hover {
    text-decoration: none;
    color: #fff;
}

#header-img {
    margin-top: 0;
    margin-right: 0;
    height: 110px;
}

.tabmenu li a {
    padding: 2px 6px 10px 6px;
    background-color: #980000;
	background: -moz-linear-gradient(top, rgba(152,0,0,1) 0%, rgba(152,0,0,1) 72%, rgba(152,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(152,0,0,1) 0%,rgba(152,0,0,1) 72%,rgba(152,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(152,0,0,1) 0%,rgba(152,0,0,1) 72%,rgba(152,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#980000', endColorstr='#00980000',GradientType=0 );
    border: 1px solid #f00;
    border: 0;
    border-bottom: 0;
    border-radius: 0 8px 0 0;
    color: #eee;
}

.tabmenu li.selected a {
    color: #980000;
    background-color: #fff;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 72%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 72%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
    border: 1px solid #fff;
    border: 0;
    border-bottom: 0;
}

.tabmenu li a:hover {
	background-color: #f00;
}

#header-bottom-right {
    background-color: #980000;
	padding: 4px 14px;
}

.user {
    color: #fff;
}

.user a {
	color: rgb(255, 163, 163);
}

.menuarea {
    border-bottom: 1px dashed #c92d2d;
    padding: 0 10px 0 0;
    margin: 5px 5px 20px;
    color: #fff;
}

.dropdown.lightdrop .selected {
    text-decoration: none;
    color: #E42222;
}

.drop-choices {
    border: 1px solid red;
    background-color: #980000;
}

.drop-choices a.choice {
    color: #fff;
}

.drop-choices a.choice:hover {
    background-color: #fff;
	color: #980000;
}

.side {
    background-color: rgba(98, 0, 0, 0.45);
    padding: 10px;
    margin: 0 0 0 20px;
	color: #fff;
}

.side a {
    text-decoration: none;
    color: #D87B7B;
}

.login-form-side {
    border: 1px solid #750e0a;
    background: rgba(0,0,0,0.666);
}

.morelink {
    border: 1px solid #ff7e00;
    background: #ff0606 ;
    background-image: none;
	border-radius: 0 4px 4px 4px;
}

.morelink .nub {
	background: none;
}

.side .morelink a {
    text-decoration: none;
    color: ##ffdab6;
    letter-spacing: -0.06em;
    text-transform: lowercase;
    font-size: 1.166em;
	color: #fff;
}

.side .morelink:hover, .mlh, .morelink:hover .nub, .mlhn {
	background-image: none;
	background: rgb(255, 99, 0);
	border: 1px solid rgb(255, 99, 0);
	-webkit-transition: all 666ms ease-in-out;
	-moz-transition: all 666ms ease-in-out;
	-ms-transition: all 666ms ease-in-out;
	-o-transition: all 666ms ease-in-out;
	transition: all 666ms ease-in-out;
}

.morelink:hover .nub {
	display: none;
}

.md {
    color: #9B7E7E;
}

.md a {
    color: #d30000;
    text-decoration: none;
}

.md a:hover {
    color: rgb(255, 117, 0);
}

.md td, .md th {
    border: 1px solid #750e0a;
}

.md hr {
    background: #750e0a;
}

.titlebox h1 a {
    color: #f00;
}

.discuss-ad {
    color: #933;
}

.content {
    margin: -5px 0 0;
    padding-top: 20px;
	color: #fff;
}

.thing {
    margin: 5px 0;
    padding: 5px 0;
	-webkit-transition: all 256ms ease-in-out;
	-moz-transition: all 256ms ease-in-out;
	-ms-transition: all 256ms ease-in-out;
	-o-transition: all 256ms ease-in-out;
	transition: all 256ms ease-in-out;	
}

.thing:hover {
	background: rgba(95, 0, 0, 0.3);
}

.link .rank {
    color: #240C0C;
    text-align: center;
    font-weight: bold;
	margin-top: 21px;
}

.link .score {
    color: #fff;
	color: rgb(255, 99, 0);
	margin: 5px 0;
	font-size: 1.1em;
}

.thing .title {
    color: #d72727;
}

.thing .title:hover, .thing .title:visited {
    color: rgb(255, 99, 0);
}

.thing.stickied.link a.title {
    color: #FFF;
}

.tagline a, .search-result-meta a {
    color: #E4E4E4;
}

.expando-button.video.collapsed, .expando-button.selftext.collapsed, .expando-button.selftext.collapsed:hover, .eb-sch, .expando-button.video.collapsed:hover, .eb-vch, .expando-button.selftext.expanded, .eb-se, .expando-button.video.expanded, .eb-ve, .expando-button.video.expanded:hover, .eb-veh, .expando-button.selftext.expanded:hover, .eb-seh {
    background-image: url("http://i.imgur.com/jhgaKC0.png");
}

.expando-button {
    background: none;
}

.usertext-body, .media-preview {
	border: 1px solid rgba(255, 0, 0, 0.45);
	background: rgba(0, 0, 0, 0.667) none repeat scroll 0% 0%;
	border-radius: 0px 8px 8px 7px;
}

.usertext-body {
	padding: 0 10px;
}

.media-preview {
	padding: 10px;
}

.link .usertext-body .md {
    background: none;
    border: 0;
    color: #eee;
}

.tagline .submitter, .search-result-meta .submitter {
    color: #7bdf00;
}

.flair, .linkflairlabel {
    background: #980000;
    color: #fdd;
    border: 0px solid #f00;
}

.wiki-page .pageactions .wikiaction-current {
    color: #fff;
    background-color: #980000;
}

.wiki-page .pageactions .wikiaction:hover {
    background-color: #531212;
}

input[type="text"], input[type="password"] {
	border-radius: 4px;
}

#searchexpando, #moresearchinfo {
    color: #600;
}

.midcol {
    margin-right: 14px;
    margin-left: 10px;
}

.arrow.up, .arrow.down {
    background-image: url("http://i.imgur.com/jhgaKC0.png");
}

.thumbnail.default, .thumbnail.self {
    background-image: url("http://i.imgur.com/jhgaKC0.png");
}

.entry {
    padding-left: 5px;
}

.nextprev a, .next-suggestions a {
    padding: 1px 4px 3px;
    background: #980000;
    border: 1px solid #f00;
    color: #fff;
}
.nextprev a:hover, .next-suggestions a:hover {
    background: rgb(255, 99, 0);
    border: 1px solid #f00;
}

.footer {
    border: 1px solid #750e0a;
}

.footer .col {
    border-left: 1px solid #750e0a;
}

.footer .col:first-child {
    border-left: 0;
}