subreddit stylesheet with sidebar with drop-down menu

drop-down-menu-subreddit

.submit.submit-link { display: none; }

/*

This is the stule sheet for subreddit
at http://www.reddit.com/r/WritingPrompts.
The menu in the sidebar is interesting and 
that needs to be investigated
WritingPrompts Stylesheet Episode 3
Revenge Of The CSS3

Contents:
    Prologue:  A Note On The Stylesheet    | Line 15
    Chapter 1: The Sad Fate of the Header  | Line 249
    Chapter 2: The Sidebar's Investgiation | Line 440
    Chapter 3: The Wiki Wars               | Line 749
    Chapter 4: The Content Arrives         | Line 829
    Chapter 5: True Enlightenment          | Line 1257
    Chapter 6: One Thousand Flairs         | Line 1351
    Chapter 7: Submission Page             | Line 1470
*/

/* PROLOGUE: A Note On The Stylesheet 
Colors: 
"Writing Prompts Blue" #369
"Blue Accent" #669ACC
"Sublime Grey" #C1BFBF

/* I Segoe UI Fonts */
/*#sr-header-area a, #sr-header-area span, #sr-more-link, .redditname , .tabmenu li, #header-bottom-right, .morelink, 
#searchexpando, blockquote blockquote blockquote, label, .subscribers:after, .users-online:after, .number, h1, h2, h3, h4, h5, .side table {
    font-family: Open Sans, Segoe UI, Arial, sans-serif;
}
*/
/* then I realised I could just use body */
body {
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", "Open Sans", Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* II Border radius fix. */
* {
    border-radius: 0px !important;
}

/* III misc stuff */

p {
    hanging-punctuation: first;
}

a {
    color: #369;
    transition: color 0.2s;
}

a:hover {
    color: #669ACC;
}

input {
    border: 1px solid #C1BFBF;
}

.md {
    padding: 3px;
}

.infobar {
    margin: 5px 305px 5px 11px;
    border: 0;
}

.linefield {
    width: auto;
    background: none;
    border-bottom: solid 5px #336699;
}

.sheets {
    margin-right: 320px;
}

.res .RES-keyNav-activeElement {
    outline: 0;
}

.raisedbox,.searchpane {
    background-color: #FAFAFA;
    border: 0;
}

/* IV better stylesheet editing. */

#stylesheet_contents {
    font-family: Consolas, Monaco, monospace;
    padding: 12px;
    background-color: #333;
    color: #EEE;
    border: 8px solid #333;
    width: 97%;
}

/* V h1, h2, h3 + other headings */
.md h1,.commentarea h1,.wiki-page .wiki-page-content .md .wiki h1 {
    color: #000 !important;
    border-bottom: 1px solid #BDBAB4;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    display: block;
    padding-left: 2px;
}

.md h2,.commentarea h2,.wiki-page .wiki-page-content .md .wiki h2,.flairselector h2 {
    color: #000 !important;
    border-bottom: 1px solid #BDBAB4;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    display: block;
    padding-left: 2px;
    margin: 5px 0;
}

.md h3,.commentarea h3,.wiki-page .wiki-page-content .md .wiki h3,.sidecontentbox .title h1,.submit-page .title,.submit_text h1 {
    color: #000 !important;
    border-bottom: 1px solid #BDBAB4;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    display: block;
    padding-left: 2px;
    margin: 5px 0;
}

/* VI Remove downvotes for TOP LEVEL COMMENTS ONLY */
.comment .arrow.down {
    visibility: hidden;
    display: none;
}

.comment .comment .arrow.down {
    visibility: visible;
    display: block;
}

.titlebox .word {
    display: none;
}

.subscribers:after {
    content: "writers";
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 10px;
}

.users-online:after {
    content: "users online";
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 10px;
}

.number {
    font-size: 10px;
}

/* VII remove "Create your own community button" */
.side .create
{
    display: none;
}

/* VIII Since everypost is a self post, hide the (self.WritingPrompts) behind links. */
.title .domain
{
    display: none;
}

/* IX Change "created by" to RyanKinder with hacky css injected text */
.bottom .author{font-size:0;}
.bottom .author::after{content:'RyanKinder';font-size:10px;}

/* X All font sizing is done in the following section */
body,.wiki-page .md,body .side .md {
    font-size: 16px !important;
}

.content .usertext-body .md {
    font-size: 14px;
}

.thing .title,.submit-page .roundfield .title {
    font-size: 18px !important;
}

.side .titlebox,#sr-header-area,#header-bottom-left .tabmenu,.tabmenu.formtab,#header-bottom-right,.pref-lang,.side .sidebox .morelink,.side .usertext-body .md,.side .sidecontentbox .helplink,.midcol,.panestack-title,.panestack-title .title,.menuarea,.commentarea .usertext-edit:before,.markdownEditor a,.commentingAs,.usertext-edit .bottom-area a,.comment-visits-box .title,.footer,.submit-page .roundfield,.submit-page .infobar,.submit-page .roundfield label,#RESDropdownOptions,#image-preview-list,#image-upload,.btn.right,.wiki-page .pageactions,#search-expando,body:not(.search-page) #search input[type=text],#searchexpando,.raisedbox,.searchpane,.hover-bubble,.deepthread, .hover.pagename.redditname {
    font-size: 12px !important;
}

#header-bottom-right .userkarma,.side .linkinfo,.side .linkinfo .number,.side .linkinfo .word,.side .linkinfo .shortlink,.side .subscribe-button.fancy-toggle-button.toggle a,.side .subButtons span,.side .subscribers,.side .users-online,.side .leavemoderator,.side .titlebox .toggle,.tagline,body .side .title,.side .sidecontentbox,.account-activity-box,.tagline,.flat-list,.bottommenu,.submit-page .roundfield #suggested-reddits {
    font-size: 10px !important;
}

/* XI scroll bar experiments (from a nice Google engineer) might remove this later*/
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

/* XII autowikibot */
.comment .md h5+h6+h4+p,.comment .md h5+h6+h4+p+hr,.comment .md h5+h6+h4+p+hr+blockquote,.comment .md h5+h6+h4+p+hr+blockquote+hr,.comment .md h5+h6+h4+p+hr+blockquote+hr+p,.comment .md h5+h6+h4+p+hr+blockquote+hr+p+p {
    display: none;
}
.comment .md:hover h5+h6+h4+p,.comment .md:hover h5+h6+h4+p+hr,.comment .md:hover h5+h6+h4+p+hr+blockquote,.comment .md:hover h5+h6+h4+p+hr+blockquote+hr,.comment .md:hover h5+h6+h4+p+hr+blockquote+hr+p,.comment .md:hover h5+h6+h4+p+hr+blockquote+hr+p+p {
    display: block;
}
.comment .md h5+h6+h4:after {
    content: "Autowikibot post. Hover to view" !important;
}
.comment .md:hover h5+h6+h4:after {
    content: ""
}

/* XIII OT post hiding. */
/*
.comment .md h4 ~* {
    display: none !important;
}

.comment .md:hover h4 ~* {
    display: block !important;
}

.comment .md h4 {
    font-size: 0px;
}

.comment .md h4::before {
    content: "Off Topic post. Hover to view.";
    font-size: 12px;
}

.comment .md *+h4:before {
    content: none;
}
*/

/* CHAPTER 1: The Sad Fate of the Header 
The Header was always the one that they saw first. Each day he toiled under the stress of a thousand mouse-clicks, as
all of the visitors to /r/writingprompts would see him first. He knew, of course, that his toil compared to the submit
buttons was like a drop of water to an ocean, but he still felt sorry for himself and the sad life he lead as a lowly
header, whom no one really notices.

Once day the header was brought in to the /about/stylesheet room. "Mr Header," said the moderator, standing in the
shadows. "I've heard you haven't been doing your job very well. So now you're getting a makeover."

"Wait, stop!" said the header, but it was no use.
*/

/* I Subreddit listing at top. */
#sr-header-area {
    opacity: 0.3;
    height: 18px;
    background-color: #222;
    border-bottom: none;
    transition: opacity 0.5s;
    text-transform: lowercase;
}

#sr-header-area:hover {
    opacity: 0.9;
}

#sr-header-area a, #sr-header-area span, #sr-more-link {
    color: #B2B2B2;
    letter-spacing: 2px;
}

#sr-header-area:hover a, #sr-header-area:hover span, #sr-more-link:hover {
    color: #FFF;
}

/* RES fix for "My Subreddits" drop down*/
.drop-choices a {
    color: #000 !important;
}

/* II Header area + background image. */

#header {
    position: static;
    background: url(%%HDR2%%) repeat-x bottom left;
    background-color: #479DD3;
    border-bottom: 0;
}

body, html {
    position: static;
}


#header-bottom-left {
    border-bottom: 2px black;
}

.hover.pagename.redditname {
    display: inline-table;
    letter-spacing: 2px;
    font-variant: normal;
    text-transform: capitalize;
    font-weight: 400;
    color: #fff;
    padding-bottom: 6px;
}

.hover.pagename.redditname a {
    display: table-cell;
    vertical-align: bottom;
    color: #fff;
}

/* III Tabmenu. */
.tabmenu li { 
    /* margin: 0 1px 1px 0; */
}

.tabmenu li a {
    background: none;
    border: none !important;
    vertical-align: bottom;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    /* position: relative; */
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
}
/* We hide the View Images button because... 
 * When used with toolbox it goes way too far into the moon in the background  
 * We don't have images anyway, and never will.
*/
#viewImagesButton {
    display: none;
} 
/* IIIa Tabmenu animation. */

.tabmenu li a {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.tabmenu li a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    transition: width 0s ease, background .3s ease;
}
.tabmenu li a:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: white;
    transition: width .3s ease;
}
.tabmenu li a:hover:before {
    width: 100%;
    background: white;
    transition: width .3s ease;
}
.tabmenu li a:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

/* IV Username box. */
#header #userbarToggle {
    line-height: 17px;
    border: 0;
    border-right: 1px solid #3E83AF;
    height: 17px !important;
    background-color: #336699;
    color: #fff;
}

.pref-lang {
    font-weight: 400;
}

#header-bottom-right #modmail,#header-bottom-right #mail {
    margin: 0;
    top: -2px !important;
    bottom: auto;
}

#header-bottom-right {
    height: 18px;
    background-color: #336699;
    padding: 2px !important;
    color: #FFF;
    letter-spacing: 2px;
    line-height: 16px;
    top: 19px;
    bottom: auto;
}

#header-bottom-right * {
    vertical-align: bottom;
}

#header-bottom-right a,#header-bottom-right .separator,#header-bottom-right .user {
    color: #fff;
}

.gearIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(%%reddit-res-sprite-icons%%);
    background-repeat: no-repeat;
    background-position: 0 -210px;
}

/* After what the evil moderators did to him, Header never looked the same. Sure, on the surface he seemed fine,
but he now spent his days staring out of the window, never doing anything, dead inside to the world. His friends
asked him what the moderators did to him, but he would never tell. His friend, Sidebar, decided to investigate
what had happened to him.
*/

/* CHAPTER 2: The Sidebar's Investigation
The sidebar, worried about what has happened to his friend the Header, decided to go on a dangerous journey through
many obstacles. His destination was the Moderator Mountain. There were stories of the ones called the 'moderators',
which controlled all parts of their lives. If one went to the top of the Moderator Mountain, and called out the 
mysterious magic words, they would be granted an audience with the 'moderators'. Sidebar didn't know the magic words,
but he figured he would go to the mountain first and figure out the magic words later.
*/

/* I Search reddit box. */
/*
body:not(.search-page) #search input[type="text"] {
    text-align: center;
    top: 70px;
    background: #ffffff;
    border: 1px solid #c1bfbf;
    height: 22px;
    width: 298px;
    padding: 5px;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: normal !important;
}

#search {
    text-align: center;
}
*/

body:not(.search-page) #search input[type="text"] {
    text-align: center;
    font-size: 12px;
    height: 22px;
    letter-spacing: 1px;
    border: 1px solid #C1BFBF;
    transition: border 0.5s ease;
    margin-top: 5px;
}

body:not(.search-page) #search input[type="text"]:hover {
    border: 1px solid gray;
}

/* II Announcment bar */
/* push content down to make space */
.content {
    margin-top: 50px;
}

blockquote blockquote blockquote {
    top: 64px;
    position: absolute;
    left: 5px;
    display: table;
    background: none;
    right: 304px;
    text-align: left;
    border: 0 !important;
    font-weight: normal;
    height: 38px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.side blockquote blockquote blockquote h6 {
    color: #333 !important;
    text-transform: none;
    letter-spacing: 1px;
    background: none;
    vertical-align: middle;
    display: table-cell;
}

/* III Submit a link button. */
.nub {
    display: none;  
}

.morelink {
    font-size: 12px;
    display: block;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    border: 0;
    font-weight: 400;
    line-height: 34px;
    height: 32px;
    text-align: left;
    margin-bottom: 3px;
}

.morelink a,.morelink a:hover {
    color: #FFF;
    padding-left: 3px;
}

.submit-text .morelink a{
    background-position: 0px 0px;
    box-sizing: border-box;
    width: 302px;
    background-color: #336699;
    transition: background-color 0.5s ease;
    text-align: center;
}

.submit-text .morelink a:hover{
    background-color: #669ACC;
}

.create .morelink {
    background: url(%%sprite-icon-32%%) no-repeat;
    background-position: 2px -2177px;
    background-color: #336699;
}

/* message the moderators */
 
.side .sidecontentbox a.helplink {
	float: none;
	margin-top: 4px;
        margin-bottom: 6px;
	background-color: #336699 !important;
 	color: #FFFFFF; 
	display: block; 
  	text-transform: uppercase;
        letter-spacing: 2px;
        border-radius: 3px;
	border: none;
        font-weight: normal;
	line-height: 30px;
 	height: 30px;
  	text-align: center;

}

.side .sidecontentbox a.helplink:hover {
        background-color: #669ACC !important;
}


/* IV In between the tables and the submit button. */
h1.redditname {
    display: none;
}

/* res buttons */

.subButtons .RESshortcutside {
    width: auto;
    display: inline-block;
}

.subButtons .RESDashboardToggle {
    width: auto;
    display: inline-block;
}

.subButtons .RESshortcutside,.subButtons .RESDashboardToggle {
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 3px;
    border: 0;
    font-weight: 400;
    color: #000;
    background: none !important;
    padding: 1px 0;
    z-index: 100;
}

.subButtons .RESshortcutside.remove,.subButtons .RESDashboardToggle.remove {
    background-image: none !important;
    background-image: none;
    background-color: #FF6766;
    border-radius: 0 !important;
}

.titlebox .users-online {
    display: inline;
}

.titlebox .users-online .number::before {
    content: " WITH ";
}

/* subscribe button */
.titlebox .fancy-toggle-button {
    display: inline-block;
    margin-bottom: 0;
}

.titlebox .fancy-toggle-button a {
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    border: 0;
    font-weight: 400;
    text-align: left;
    color: #FFF;
}

.titlebox .fancy-toggle-button .remove {
    border: none;
    background-image: none;
    background-color: #9C9C9C;
}

.titlebox .fancy-toggle-button .add {
    border: none;
    background-image: none;
    background-color: #669ACC;
}

/* V Sidebar image. */
/* SIDEBAR PICTURE */
.side h5:nth-of-type(1) {
    height: 144px; /* height of your image */
    background:url(%%filmframes-sm%%);
}

.side h5:nth-of-type(1) a {
    display: block;
    height: inherit; 
    color: #FFFFFF;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.side h5:nth-of-type(1) a:hover {
    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0.2);
}

.side h5 {
    color: #FFF !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    display: block;
    padding-left: 2px;
    font-size: 140%;
    background: #68ADCE;
}

/* VI Accordian menu. */
.side table thead {
    display: none;
}

.side table tbody tr td {
    display: block;
    border: none;
}

.side table tbody tr td:first-child {
    background-color: #369;
    color: #f2f2f2;
    cursor: pointer;
    padding: 5px;
    width: 253px;
}

.side table tbody tr td:last-child {
    margin: 0;
    overflow: auto;
    width: 253px;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1s ease;
}

.side table tbody tr:hover td:last-child {
    max-height: 120px;
}

.side table tbody tr td:first-child a {
    color: #FFFFFF;
}

.side table tbody tr td code {
    font-size: 1.1em;
}

/* VII Link info */
.linkinfo {
    background-color: #FFF;
    color: #363636;
    text-align: center;
    padding: 0;
    border: 0;
    margin: 0 auto;
    border-radius: 0 !important;
}

.linkinfo .downvotes .number,.linkinfo .upvotes .number,.linkinfo .score .number, .score .word{
    display: inline;
    font-weight: 400 !important;
}

.linkinfo .score {
    display: block;
    min-width: 80px;
    margin-left: 30px !important;
}

.linkinfo .score {
    padding: 5px 10px 5px 0;
    margin: 0 8px 0 0;
    text-align: center;
}

.linkinfo .shortlink {
    clear: both !important;
    background: #F5F5F5;
    color: #333;
    padding: 5px;
    margin: 0;
    text-align: center;
}

.side .linkinfo .shortlink input {
    border: 0 !important;
    background: #F5F5F5;
    color: #333;
}

.linkinfo .date {
    display: none;
}

/* CHAPTER 3: THE WIKI WARS 
The sidebar continued his investigation through to the Moderator Mountain when suddenly, he stumbled across a battlefield
strewn by arrows. This was the wiki. And there were two factions who were viciously warring against each other. How could
the sidebar get past this one?
*/

/* I Wiki formatting */
/* wiki formatting */
.wiki-page .wikititle strong {
    font-weight: 400 !important;
}

.wiki-page .wikititle {
    margin-left: 15px;
    display: block;
    vertical-align: middle;
    color: #000 !important;
    border-bottom: 1px solid #BDBAB4;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    padding-left: 2px;
    padding-top: 10px;
}

.wiki-page .pageactions {
    margin-left: 14px;
}

.wiki-page .pageactions .wikiaction-current {
    color: #FFF;
    background-color: #669ACC;
}

.wiki-page .pageactions .wikiaction {
    display: inline-block;
    margin: 2px;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-right: 10px;
    padding-left: 10px;
    letter-spacing: 2px;
}

.pageactions a {
    background-color: #336699;
    color: #FFF;
}

.wiki-page .content .wiki-page-content {
    margin-top: 0;
}

.wiki-page .content .pageactions a:hover {
    background-color: #669ACC;
    color: #FFF;
}

div.wiki div.toc>ul:before {
    display: block !important;
    content: "Table of Contents";
    color: #99A;
    text-align: center;
    margin-top: -5px;
    margin-bottom: 5px;
}

div.wiki div.toc {
    float: right;
    max-width: 40%;
    border-color: #C1BFBF;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #FFF;
}

.wiki-page .pageactions {
    border: 0;
}

/* CHAPTER 4: THE CONTENT ARRIVES 
Sidebar managed to get past the Wiki Wars using his wits and his luck. And maybe he
got shot a few times, but it doesn't matter much. Anyway, he now finds himself in a great
city beneath a huge mountain. He realised: he was almost there. But he needs to navigate the
city of .content!
*/

/* I Overall padding / layout */

#siteTable {
    display: flex;
    flex-direction: column;
}

body:not(.listing-page):not(.comments-page) .content {
    padding-left: 5px;
}

/* II rank numbers */

.link .rank {
    margin-top: 24px;
    text-align: left;
    padding-right: 5px;
}

/* III CSS upvotes / downvotes from sylf */
.arrow {
       width: 0;
       height: 0;
       background-image: none !important;
       border-top: 8px solid transparent;
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-bottom: 8px solid transparent;
       position: relative;
}

.arrow.up, .arrow.upmod {
       top: -7px;
}


.arrow.down, .arrow.downmod {
       bottom: -7px;
}

.arrow:before {
        width: 6px;
        height: 8px;
        right: -3px;
        content: "";
        position: absolute;
        display: block;
}

.arrow.up:before, .arrow.upmod:before {
        top: 7px;
}

.arrow.down:before, .arrow.downmod:before {
        top: -14px;
}

.arrow.downmod:before {
        background-color: #9494ff;
        background: linear-gradient(to top, #9494ff 0%, rgba(148, 148, 255, .9), rgba(148, 148, 255, 0) 100%);
        background: -webkit-linear-gradient(to top, #9494ff 0%, rgba(148, 148, 255, .9), rgba(148, 148, 255, 0) 100%);
        background: -o-linear-gradient(to top, #9494ff 0%, rgba(148, 148, 255, .9), rgba(148, 148, 255, 0) 100%);
}

.arrow.upmod:before {
        background-color: #ff8b60;
        background: linear-gradient(to bottom, #ff8b60 0%, rgba(255, 139, 96, .9), rgba(255, 139, 96, 0) 100%);
        background: -webkit-linear-gradient(to bottom, #ff8b60 0%, rgba(255, 139, 96, .9), rgba(255, 139, 96, 0) 100%);
        background: -o-linear-gradient(to bottom, #ff8b60 0%, rgba(255, 139, 96, .9), rgba(255, 139, 96, 0) 100%);
}

.arrow.up:before, .arrow.down:before {
        background-color: #c6c6c6;
}

.arrow.up:before {
        background: linear-gradient(to bottom, #c6c6c6 0%, rgba(198, 198, 198, .9), rgba(198, 198, 198, 0) 100%); 
        background: -webkit-linear-gradient(to bottom, #c6c6c6 0%, rgba(198, 198, 198, .9), rgba(198, 198, 198, 0) 100%);
        background: -o-linear-gradient(to bottom, #c6c6c6 0%, rgba(198, 198, 198, .9), rgba(198, 198, 198, 0) 100%);
}

.arrow.down:before {
        background: linear-gradient(to top, #c6c6c6 0%, rgba(198, 198, 198, .9), rgba(198, 198, 198, 0) 100%);
        background: -webkit-linear-gradient(to top, #c6c6c6 0%, rgba(198, 198, 198, .9), rgba(198, 198, 198, 0) 100%);
        background: -o-linear-gradient(to top, #c6c6c6 0%, rgba(198, 198, 198, .9), rgba(198, 198, 198, 0) 100%);
}

.arrow.up {
    border-bottom-color: #c6c6c6;
}

.arrow.down {
    border-top-color: #c6c6c6;
}

.arrow.upmod {
       border-bottom-color: #ff8b60;
}

.arrow.downmod {
       border-top-color: #9494ff;
}

.link .midcol {
    margin-right: 8px;
    margin-left: 0;
    margin-top: 9px;
}

/* IV RES icons. */
/* expando buttons with nice icons */
.expando-button {
    background-color: transparent;
    height: 16px;
    width: 16px;
}

.expando-button.selftext.collapsed {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: -90px -547px;
    background-repeat: no-repeat;
}

.expando-button.selftext.collapsed:hover,.eb-sch {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: -61px -547px;
    background-repeat: no-repeat;
}

.expando-button.selftext.expanded,.eb-se {
    margin-bottom: 5px;
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: -29px -584px;
    background-repeat: no-repeat;
}

.expando-button.selftext.expanded:hover,.eb-seh {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: 0 -584px;
    background-repeat: no-repeat;
}

.expando-button.video.collapsed {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: -87px -584px;
    background-repeat: no-repeat;
}

.expando-button.video.collapsed:hover,.eb-vch {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: -58px -584px;
    background-repeat: no-repeat;
}

.expando-button.video.expanded,.eb-ve {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: -29px -613px;
    background-repeat: no-repeat;
}

.expando-button.video.expanded:hover,.eb-veh {
    background-image: url(%%reddit-res-sprite-icons%%);
    background-position: 0 -613px;
    background-repeat: no-repeat;
}

/* RES expando's */
.expando-button.image {
    float: left;
    width: 23px;
    height: 23px;
    max-width: 23px;
    max-height: 23px;
    display: inline-block;
    background-image: url(%%reddit-res-sprite-icons%%);
    margin-right: 6px;
    cursor: pointer;
    padding: 0;
    vertical-align: top;
}

.expando-button.image.gallery.collapsedExpando {
    background-position: 0 -366px;
}

.expando-button.image.gallery.collapsedExpando:hover {
    background-position: 0 -392px;
}

.expando-button.image.gallery.expanded {
    background-position: 0 -416px;
}

.expando-button.image.gallery.expanded:hover {
    background-position: 0 -440px;
}

.expando-button.image.collapsedExpando {
    padding: 0;
    background-position: 0 0;
}

.expando-button.image.collapsedExpando:hover {
    background-position: 0 -24px;
}

.expando-button.image.expanded:hover {
    background-position: 0 -72px;
}

.expando-button.image.expanded {
    background-position: 0 -48px;
}

/* V mod + deleted users */
/* highlight removed and spammed items for mods */
body .content .sitetable .thing.spam,body .sitetable .thing.spam.deleted.link.self {
    border: solid 2px #FA8072 !important;
}

body .content .sitetable .thing.spam,body .sitetable .thing.spam.deleted.link.self {
    border: solid 2px #FA8072 !important;
}

/* Next section makes deleted messages less noticeable for users*/
.deleted .grayed,.deleted > .entry .expand,.deleted > .entry .tagline {
    display: none;
}

.deleted > .entry .noncollapsed:after {
    content: 'removed/deleted';
    opacity: .25;
    color: #858585;
}

.gold-accent {
    border: 0;
}

.formtabs-content {
    border: 0;
}

.entry {
    padding: 5px 0 0px;
}

.entry .tagline {
    margin-top: 5px;
}

.entry .buttons li a {
    font-weight: 400;
}

.link .entry li .comments {
    font-weight: 700;
}

.entry .buttons li,.entry .tagline {
    letter-spacing: 1px;
}

/* VI Links */
.stickied .title a { color:#596699 !important }

#siteTable .entry .flat-list {line-height:18px}
#siteTable .thing .entry .flat-list li a {font-weight:normal}
#siteTable .thing .entry .flat-list li:not(.nsfw-stamp) {opacity: 0; transition: opacity 0.5s ease;}
#siteTable .thing .entry .flat-list li.first {opacity: 1; transition: opacity 0.5s ease;}
#siteTable .thing .entry .flat-list li.first a {color:#336699}
#siteTable .thing:hover .entry .flat-list li {opacity: 1; transition: opacity 0.5s ease;}

/* VII comments */
.commentarea .flat-list.buttons {
    display: block;
}

.link .usertext .md {
    border: 0;
}

.content .usertext-body,body .content .usertext-body .md {
    margin-left: 0;
}

.gold-accent.comment-visits-fbox {
    border-color: #C1BFBF;
    background-color: #F5F5F5;
    overflow: auto;
    margin-left: 34px;
}

.panestack-title {
    margin: 10px 310px 0 37px;
}

.commentarea .menuarea {
    border: none;
    margin: 0 310px 10px 37px;
}

.commentarea>.usertext {
    margin: 0 0 10px 36px;
}

/* comment quotes */
body .content .md blockquote {
    display: block;
    background-color: #EEE;
    border-color: #D6D5CF;
    margin: 5px !important;
    padding: 5px;
    color: #333;
    position: relative;
    font-style: italic;
}

/* table comment borders */
.md td,.md th {
    border: 1px solid #C1BFBF;
}

/* nested commentary boxes */
.res-commentBoxes.res-commentBoxes-rounded .comment {
    border-radius: 0 !important;
    border: 0 !important;
}

body .comment .child,.comment .showreplies {
    border-left: 0 !important;
}

body .comment {
    margin-left: 10px !important;
    margin-right: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border: 0;
    padding: 5px 8px 0 5px !important;
    border-radius: 0 !important;
}

/* Yep we have to do it twice, RES will not let go of comment styling if we don't */
body .comment,body .comment .comment .comment,body .comment .comment .comment .comment .comment,body .comment .comment .comment .comment .comment .comment .comment,body .comment .comment .comment .comment .comment .comment .comment .comment .comment,.res-commentBoxes .content .comment,.res-commentBoxes .content .comment .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment .comment .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #F5F5F5; /* the !important breaks night mode */
    border-radius: 0 !important;
}

.comment .comment,.comment .comment .comment .comment,.comment .comment .comment .comment .comment .comment,.comment .comment .comment .comment .comment .comment .comment .comment,.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment,.res-commentBoxes .content .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment .comment .comment .comment .comment,.res-commentBoxes .content .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #fff; /* the important breaks night mode */
    border-radius: 0 !important;
}

/* VIII submission page */
.submit.content {
    border: 0;
    margin: 0;
}

.formtabs-content .roundfield {
    background: #F5F5F5;
    padding: 9px;
}

.submit-page .infobar {
    background-color: #E7E6E3;
    border: 0;
    width: 500px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #333;
    padding: 9px;
}

.submit_text .content {
    border: 0;
    margin: 0;
    display: block;
}

.submit_text {
    max-height: 300px;
}

#suggested-reddits a {
    color: #B4B3B2;
}

#suggested-reddits {
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.content.submit .info-notice {
    background-color: #336699;
    border: 0;
    padding: 9px;
    color: #FFF;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.content.submit .info-notice a:hover {
    color: #669ACC;
}

.content.submit .info-notice a {
    color: #FFF;
}

/* IX small fixes */
.thing .title {
    color: #369;
}

.thing .title:hover {
    color: #669acc;
    transition: color 0.2s;
}

/* CHAPTER 5: TRUE ENLIGHTENMENT 
While travelling in the city, Sidebar finds an old building where he finds true enlightenment (aka zen mode)
*/
/* zen mode zn.reddit.com/r/writingprompts*/
.side:lang(zn) {
    display: none;  
}

#header-bottom-left:lang(zn), #header-bottom-right:lang(zn)  {
    display: none;  
}

#sr-header-area:lang(zn) {
    display: none;  
}

a[name = "content"]:lang(zn) {
    display: none;  
}

.content:lang(zn) {
    margin: 0 0 0;  
}

#siteTable .entry .flat-list:lang(zn) {
    display: none;  
}

.panestack-title:lang(zn) {
    display: none;  
}

.menuarea:lang(zn) {
    display: none;  
}

.midcol:lang(zn) {
    display: none;
}

.rank:lang(zn) {
    display: none;
}

.linkflairlabel:lang(zn) {
    border-bottom: none !important;
    float: right;
    font-size: 0.5em;
}

.entry:lang(zn) {
    border-right: none !important;  
}

/*
.sitetable.nestedlisting:lang(zn) {
    display: none;  
}
*/

.commentarea > .nestedlisting:lang(zn) * { visibility: hidden!important; }
.commentarea .nestedlisting:hover:lang(zn) * { visibility: visible!important;}

.footer-parent:lang(zn) {
    display: none;  
}

.usertext-edit:lang(zn) {
    width: 70%;
}

.usertext-edit textarea:lang(zn) {
    width: 100%;
    height: 300px;
    font-size: 1.1em;
    border: none;
    background: url(%%zen-mode-text%%) no-repeat;
}

.usertext-edit textarea:lang(zn):focus {
    outline: none;
    background-image: none;
}

.title + .tagline:lang(zn) {
    display: none;  
}

.reddiquette:lang(zn) {
    display: none;
}

/* END ZEN MODE CSS */

/* CHAPTER 6: ONE THOUSAND FLAIRS 
(actually only 15 or so but I wanted to sound poetic)
*/

/* flair selection drop down */
.flairselector.drop-choices.active {
    border: 0;
    box-shadow: none;
}

/* User Flair */
.flair {
    border: 0;
}

/* Link Flair formatting, flairs are labeled adding a flair is simple.  */
.flairoptionpane {
    max-height: 300px;
}

.flairoptionpane li {
    height: 22px;
}

.title .linkflairlabel {
    display: table;
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    color: #8A8A8A;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    overflow: visible;
    max-width: 98%;
}

.thing.linkflair .linkflairlabel {
    border-bottom: solid 2px gray;
}

.thing.linkflair.linkflair-flairWP .linkflairlabel {
    border-bottom: solid 2px #802727;
}

.thing.linkflair.linkflair-flairFF .linkflairlabel {
    border-bottom: solid 2px #e1aa79;
}

.thing.linkflair.linkflair-flairEU .linkflairlabel {
    border-bottom: solid 2px #808027;
}

.thing.linkflair.linkflair-flairCW .linkflairlabel {
    border-bottom: solid 2px #804F27;
}

.thing.linkflair.linkflair-flairPM .linkflairlabel {
    border-bottom: solid 2px #2F2258;
}

.thing.linkflair.linkflair-flairMP .linkflairlabel {
    border-bottom: solid 2px #9CBD59;
}

.thing.linkflair.linkflair-flairHP .linkflairlabel {
    border-bottom: solid 2px #806227;
}

.thing.linkflair.linkflair-flairIP .linkflairlabel {
    border-bottom: solid 2px #411D55;
}

.thing.linkflair.linkflair-flairCS .linkflairlabel {
    border-bottom: solid 2px #1F661F;
}

.thing.linkflair.linkflair-flairPI .linkflairlabel {
    border-bottom: solid 2px #807127;
}

.thing.linkflair.linkflair-flairCC .linkflairlabel {
    border-bottom: solid 2px #671F48;
}

.thing.linkflair.linkflair-flairWS .linkflairlabel {
    border-bottom: solid 2px #174D4D;
}