WritingPromptsCSS.css

/*==============================================
 Prelougue
 -----------------------------------------------*/

/*Colors*/
/*Main Blue: #000080 (Navy Blue) 0, 0, 128*/
/*Secondary Black:  #000000 0, 0, 0*/
/*Third White: #FFFFFF*/
/*Fourth: #C0C0C0 192,192,192*/

/* Fonts, and kill horizontal scrollbar*/
body {
    font-family:  Verdana, sans-serif, Cambria;
}
/*Move start of self post text under the thumbnail*/
.link.self .expando {margin-left: 48px;}
/*.link.self .entry {overflow: visible;} /*This makes the tagline move to the left depending on size and blocks sidebar!  Fix!*/
/*Maybe a fix?*/
.entry {
    overflow: unset;
}

/*Remove border and background color of self post text*/
.link .usertext-body .md {background-color:#FFF;border:none;max-width: calc(100% - 350px)}
.linkflair-flairpi .usertext .md, .linkflair-flaircc .usertext .md {font-size: larger;line-height: 1.7;}
.link .entry {padding-bottom: 5px;}
ul.report-reasons {max-width: calc(100% - 350px);}

/*==============================================
 Chapter I -  Header
 -----------------------------------------------*/

/* Header Area and Background Image */
#header {
    position: relative;
    /*background: url(%%HDR11%%) repeat-x bottom left;
    border-bottom: 0;*/
    height: 215px;
    box-shadow: inset 0 -25px 0 0 #000040;
    z-index: 999;
    background: none;
    pointer-events: none;
}
/* End - Header Area and Background Image*/

/* Reddit Logo */
#header-img {
    position: absolute;
    bottom: 50px;
    pointer-events: all;
}
/* Subreddit Name */
.pagename {
    position: absolute;
    bottom: 30px;
    left: 5px;
    color: #FFF;
    pointer-events: all;
}
.pagename a {
    color: #FFF;
}

/* Test: Header Image Auto-Changer (from /r/paragon) */
.side blockquote:nth-of-type(1) :nth-child(1){background-image:url(%%darkness-full%%);animation-delay: 0s;}
.side blockquote:nth-of-type(1) :nth-child(2){background-image:url(%%cathedral-full%%);animation-delay: 7.5s;}
.side blockquote:nth-of-type(1) :nth-child(3){background-image:url(%%secluded-full%%);animation-delay: 15s;}
.side blockquote:nth-of-type(1) :nth-child(4){background-image:url(%%train-ride-full%%);animation-delay: 22.5s }
.side blockquote:nth-of-type(1) {
    position: absolute;
    top: 30px;
    height: 160px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 99;
    box-shadow: none;
}

.side blockquote:nth-of-type(1) a {
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: #000 no-repeat;
    background-position: center;
    animation-name: slide;
    animation-iteration-count: infinite;
    animation-duration: 30s;
    
    /*old ip sidebar code:
    color: #FFFFFF;
    transition: background-color 0.5s ease, color 0.5s ease;
    font-size: 20px;*/
}

/*old ip sidebar code:
.side h5 {    
    color: #C0C0C0 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    display: block;
    padding-left: 2px;
    font-size: 140%;
    background: #000080;
}*/
@keyframes slide {
    0%, 20% {
        opacity: 1;
        z-index: 99;
    }
    25%, 95% {
        opacity: 0;
        z-index: 99;
    }
    26% {
        z-index: -1;
    }
}
/* End - Test: Header Image Auto-Changer*/

/* Top Subreddit Bar */
#sr-header-area {
    height: 30px;
    border: 0;
    padding-right: 110px;
    background: #000040;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 9px;
    color: #fff;
}
#sr-header-area .sr-list a, #sr-header-area #srLeftContainer a, #sr-header-area a.subbarlink {
    color: #fff;
}
#sr-header-area .selected a, div#sr-header-area a.RESShortcutsCurrentSub, div#RESSubredditGroupDropdown .RESShortcutsCurrentSub a {
    color: #fff!important;
}

#sr-more-link, div#RESShortcutsEditContainer {
    display: flex;
    width: auto;
    height: 30px;
    max-height: none;
    background: none;
    color: #fff;
}
div#RESShortcutsEditContainer div {
    position: static;
    display: inline-block;
    margin-right: 6px;
    width: auto;
    height: 30px;
    line-height: 30px;
    background: none;
    text-align: center;
    font-size: 14px!important;
    color: #fff;
}
/* End - Top Subreddit Bar*/

/* Subreddit Dropdrop List */
table#srList {
    left: 10px;
}
table#srList, div#RESSubredditGroupDropdown {
    top: 35px!important;
    font-size: 9px;
}
table#srList {
    left: 10px;
}
.drop-choices, table#srList, div#RESSubredditGroupDropdown, .res .res .RESDropdownList {
    z-index: 2147483647!important;
    overflow: visible;
    width: auto;
    max-height: none!important;
    border: 0;
    border-radius: 5px;
    padding: 10px!important;
    background: #C0C0C0;
    font-size: 9px;
    font-family: inherit;
    transition: opacity .2s;
}
.drop-choices:before, table#srList:before, div#RESSubredditGroupDropdown:before, .res .res .RESDropdownList:before {
    position: absolute;
    top: -16px;
    left: 25px;
    width: 16px;
    height: 8px;
    border: 8px solid transparent;
    border-top: 0;
    border-bottom: 8px solid #C0C0C0;
    content: "";
}
table#srList thead {
    font-weight: 700;
}
.drop-choices a.choice, table#srList tr, div#RESSubredditGroupDropdown li a, .res .res .RESDropdownList li {
    height: 20px;
    border-bottom: 1px solid rgba(25, 25, 112,.075);
    padding: 0 5px;
    line-height: 10px;
    color: #000080;
}
table#srList td {
    padding: 0 8px;
    width: 100px;
}
div#RESSubredditGroupDropdown .RESShortcutsCurrentSub a {
    color: #000080!important;
}
/* End - Subreddit Dropdrop List */

/*Header Tabs*/
.tabmenu {
    list-style-type: none;
    white-space: nowrap;
    display: inline-block;
    margin-top: 5px;
    vertical-align: bottom;
}
#header .tabmenu {
    position: absolute;
    margin: 0;
    bottom: 5px;
    left: 20px;
    text-transform: uppercase;
}
#header .tabmenu li, #header .tabmenu li.res-tabmenu-button {
    display: inline;
    margin: 0;
    margin-right: 10px;
    font-weight: 400;
    opacity: .75;
}
#header .tabmenu li:hover, #header .tabmenu li.res-tabmenu-button:hover {
    display: inline;
    margin: 0;
    margin-right: 10px;
    font-weight: 400;
    opacity: 1;
}
#header .tabmenu li a {
    border: 0;
    padding: 0;
    background: none;
    color: #fff;
}
#header .tabmenu li.selected {
    border-bottom: 2px solid #fff;
    font-weight: 700;
    opacity: 1;
}
/*.tabmenu li:not(.res-toggle-filterline-visibility) 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: #FDFDFD;
    transition: width .3s ease;
}
.tabmenu li a:hover:before {
    width: 100%;
    background: #FDFDFD;
    transition: width .3s ease;
}
.tabmenu li a:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}*/

/* End - Header Tabs*/

/* User Bar */
#header #header-bottom-right {
   top: 190px;
   background:none;
}
div#userbarToggle, div#userbarToggle.userbarShow {
   background: none;
   border: none;
}
#header #header-bottom-right {top: 190px;}
.user, #header .user a, div#userbarToggle, div#userbarToggle.userbarShow, .flat-list li a, .logout a {color: #fff;}
.separator {opacity: 0;}
/* End - User Bar */

/* Announcement bar. */

.content {
    margin-top: 50px;
}

.sidecontentbox .content {
    margin-top: 0;
}

.side .md > ul:first-child:before {
    /*User an announcement icon here*/
}
    
.side .md > ul:first-child {
    display: inline;
    position: absolute;
    top: 225px;
    max-width: calc(100% - 350px);
    left: 0px;
}

.side .md > ul:first-child li {
    display: inline;
    /*font-size: 15px;
    font-weight: 600;*/
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 0px 3px #233A64;
    margin: 5px;
}

.side .md > ul:first-child li:hover {
    box-shadow: 0 0px 6px #233A64;
}

/*@media (max-width: 1225px) {
    .side .md > ul:first-child li {
        font-size: 12px;
        font-weight: 400;
    }
    .listing-page .content {
        margin-top: 50px;
    }
}*/

@media (max-width: 1024px) {
    .side .md > ul:first-child li {
        /*font-size: 10px;
        font-weight: 400;*/
        vertical-align: 18px;
    }
    .content {
        margin-top: 75px;
    }
}

/*.side .md > ul:first-child li + li::before {
    content: " · "; /* U+00B7 
}
 End - Announcement Bar*/

/*==============================================
 Chapter II -  Sidebar
 -----------------------------------------------*/
/* Border around sidebar */
.side {
    margin: 5px 5px 0 5px;
    padding: 7px;
    border-radius: 10px;
    box-shadow: 0 1px 3px #233A64;
}
/* End - Border around sidebar */

/* Submit Buttons */

.morelink {
    /*position: absolute;
    top: 442px;*/
    background-color: #000080;
    background-image: none!important;
    /*width: 152px;*/
    height: 36px;
    border-radius: 2px;
    line-height: 36px;
    border: none;
    text-align: center;
    padding: 0px 0px;
    box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12), 0 0px 4px 0 rgba(0,0,0,.12);
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
}
.morelink:hover {
    /*background-color: #AFAFED;*/
    opacity: .75;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}
.morelink .nub {
    display:none;
}
.morelink a {
    color: #C0C0C0;
}

/* End - Submit Buttons */

/* Subscribe and RES buttons */
.titlebox .fancy-toggle-button {
    display: inline-block;
    margin-bottom: 0;
}

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

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

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

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

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

.subButtons .RESshortcutside,.subButtons .RESDashboardToggle {
    letter-spacing: 1px;
    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; /* this seems stupid but we have to do it twice for RES to accept it */
    background-color: #FFF;
    border-radius: 0 !important;
}
/* End - Subscribe and RES buttons*/

/* Change the words for our subscribers*/

.titlebox .word {
    display: none;
}

.subscribers:after {
    content: "writers";
}

.users-online {
    display: inline;
}

.users-online:after {
    content: "writers online";
}

.users-online:before {
    background-image: none;
    display: none;
}

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

/* End. Change the words for our subscribers*/



/* Sidebar Headers */
/*.titlebox {
    padding: 7px;
    border-radius: 10px;
    box-shadow: 0 1px 3px #233A64;
    }*/

 /*h2 ribbons (from /r/DC_Cinematic)*/
.side .usertext .md > h2 {
    text-align: center;
    font-weight: bold;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #000080;
    color: #C0C0C0;
    padding: 7px 10px;
    padding-left: 20px;
    padding-right: 0;
    margin-right: 0px;
    margin-left: -13px;
    border-bottom: 1px solid #000;
    margin-bottom: 4px;
    margin-top: 4px;
    width: 100%;
    z-index: 999 !important;
    }
.side .usertext .md > h2:after {
    position:fixed;
    display: block;
    content: "";
    border-color: transparent #000 transparent transparent !important;
    border-style: solid;
    border-width: 15px;
    height: 0px;
    width: 0px;
    position: absolute;
    z-index: -1 !important;
    margin-left: -35px;
    margin-top: -7px
    }

.side .usertext .md h5 {
    color: #C0C0C0 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400 !important;
    display: block;
    padding-left: 2px;
    font-size: 140%;
    background: #000080;
    text-align: center;
}

/*.titlebox .md h6 + ul {
display: none;
}
.titlebox .md h6:hover + ul,
.titlebox .md h6 + ul:hover {
display: block;
}*/

/* End - Sidebar Headers */

/* Headers for Calendar and Related Link Categories */
.side .usertext .md > h6 {
    text-align: center;
}
.side blockquote {
    text-align: center;
    border-left: none;
    box-shadow: 0 0px 5px #233A64;
    border-radius: 10px;
}
.side blockquote:hover {
    box-shadow: 0 0px 10px #233A64;
}
/* End - Headers for Calendar and Related Link Categories */

/* Side-Menu (from /r/click) */
.side .md li {font-size: 12px;}
.side .md > h5 + ul { margin: 10px -10px 20px -10px; padding: 0; list-style: none; font-size: 1.4rem; cursor: default; }
.side .md > h5 + ul > li { padding: 6px 10px 6px 30px; position: relative; transition: background .1s; }
.side .md > h5 + ul > li:hover > ul { visibility: visible; opacity: 1; right: 300px; }
.side .md > h5 + ul > li > sup, .side .md > h5 + ul > li > p sup { position: absolute; top: 11px; left: 10px; display: block; overflow: hidden; text-indent: -1000px; width: 10px; height: 12px; opacity: .4; background-position: -20px -22px; background-image: url(%%sprite%%); pointer-events: none; }
.side .md > h5 + ul > li:hover > sup, .side .md > h5 + ul > li:hover > p sup { left: 8px; }
.side .md > h5 + ul > li > p, .side .md > h5 + ul > li > ul > li > p { margin: 0; }
.side .md > h5 + ul > li > a, .side .md > h5 + ul > li > p > a { color: #0079d3; display: block; margin: -6px -10px -6px -30px; padding: 6px 10px 6px 30px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; text-decoration: none; }
.side .md > h5 + ul > li:hover, .side .md > h5 + ul > li > ul > li:hover { background: rgba(0, 0, 0, 0.12); }
.side .md > h5 + ul > li:hover > p > a, .side .md > h5 + ul > li > ul > li > a:hover, .side .md > h5 + ul > li > ul > li > p a:hover { color: #0079d3; text-decoration: none; }
.side .md > h5 + ul > li > ul { visibility: hidden; opacity: 0; position: absolute; top: 0px; right: 295px; width: 300px; max-height: 700px; overflow-y: auto; list-style: none; margin: 0; padding: 8px 0; z-index: 101; border-radius: 2px; background: white; box-shadow: 0 0px 8px rgba(0, 0, 0, 0.12), 0 8px 8px 1px rgba(0, 0, 0, 0.18); transition-property: visibility opacity; transition-duration: .2s; transition-delay: .12s; }
.side .md > h5 + ul > li > ul > li { padding: 6px 10px; }
.side .md > h5 + ul > li > ul > li > a, .side .md > h5 + ul > li > ul > li > p a { color: #0079d3; display: initial; margin: -6px -10px; padding: 6px 10px; }
.side .md>h5+ul>li:hover>ul {border-radius: 10px;}
 /*End side-menu */

/* Message the Moderators link */
.side .sidecontentbox a.helplink {
    float: none;
	margin-top: 4px;
    margin-bottom: 6px;
	padding-left: 10px;
    display: block;
    position: relative;
    color: #C0C0C0;
    background: #FFF none repeat-x scroll center left;
    background-position: 0px -278px;
    background-repeat: repeat;
    font-size: 150%;
    font-weight: bold;
    letter-spacing: -1px;
    background-color: #000080;
    background-image: none!important;
    height: 36px;
    border-radius: 2px;
    line-height: 36px;
    border: none;
    text-align: center;
    text-transform: capitalize;
    padding: 0px 0px;
    box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12), 0 0px 4px 0 rgba(0,0,0,.12);
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
}

.side .sidecontentbox a.helplink:hover {
    opacity: .75;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}

/* Idea to copy link to the top too, but it depends exactly where it'd be located, so any sidebar changes would break it
.side .sidecontentbox a.helplink:before {
    content: "Message the Moderators";
    position: absolute;
    height: 36px;
    width: 300px;
    left: 0px;
    z-index: 1;
    color: #FFF;
    bottom: 2787px;
    background-color: #000080;
}*/

/* End - Message the Moderators link*/

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

/*==============================================
 Chapter III -  Listings
 -----------------------------------------------*/
/*Border around listings*/
.listing-page .sitetable {
    border-radius: 10px;
    box-shadow: 0 0px 3px #233A64;
    padding-top: 5px;
    margin-left: 5px;
}
/*End - Border around listings*/

/*Crazy grid-like thing
.listing-page .linklisting {
    position: relative;
    display: flex;
    flex-wrap:wrap;
}
.listing-page .linklisting > .thing {
    box-sizing: border-box;
    width:25%!important;
    min-width: 300px!important;
    margin:5px;
}

.listing-page .linklisting > .thing .domain,
.listing-page .linklisting > .thing .tagline {
display:none}*/

.link .title {
    color: #000080;
}

.stickied .link {
    /*background: ghostWhite;*/
    /*box-shadow: 0 1px 3px #669ACC;*/
}

.thing.stickied.link a.title {
    text-decoration: underline;
    font-style: bold;
    color: #000080;
}

/*Test: Smaller text, so more prompts can be seen*
.link .title {
    font-size: 12px;
}
.title .linkflairlabel {font-size: 8px;}
.tagline { font-size: 8px;}
.link .flat-list {font-size: 8px;}
End - Smaller text, so more prompts can be seen*/

/* Move flairs above prompt */
.title .linkflairlabel {
    background-color: transparent;
    text-transform: uppercase;
    border-width: 0;
    border-radius: 0;
    color: #8A8A8A;
    letter-spacing: 2px;
    font-weight: 400;    
    max-width: 98%;
    padding-top: 0px;
    position:absolute;
    margin-top: -15px;
    left: 55px;
}

.comments-page .linkflairlabel {
    font-size: 14px;
    left: 100px;
}

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

.link .entry {
    margin-top: 15px; /*20 without the smaller text*/
}

/* End - Move flairs above prompt */

/* Zoom the flairs on hover*/
.title .linkflairlabel {
    display: inline-block;
    -webkit-transition: -webkit-transform 1.25s;
    transition: transform 1.25s;
}
.title .linkflairlabel:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
/* End zoom flairs on hover*/

/*Special Link Flair Thumbnails*/
/*Design 1
.thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -239px -118px;}

.linkflair-flairwp .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -10px 0px;}
.linkflair-flaireu .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -10px -57px}
.linkflair-flairmp .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -10px -116px;} 
.linkflair-flairpi .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -10px -173px;} 
.linkflair-flairpm .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -9px -235px;}

.linkflair-flairip .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -124px -1px;}
.linkflair-flairtt .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -124px -54px;}
.linkflair-flaircc .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -124px -113px;} 
.linkflair-flairrf .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -124px -178px;} 
.linkflair-flaircw .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -124px -236px} 

.linkflair-flairsyra .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -239px -1px;}
.linkflair-flairmo .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -239px -59px;} 
.linkflair-flairot .thumbnail.self {width: 57px; height: 57px;background: url(%%prompt-flairs%%) -239px -236px;} */

/*Design 2*/

.linkflair-flairwp .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -2px 0px;}
.linkflair-flairip .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -2px -58px;}
.linkflair-flairmp .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -2px -118px;} 

.linkflair-flairwp.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -58px -0px;}
.linkflair-flairip.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -58px -58px;}
.linkflair-flairmp.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -58px -118px;} 

.linkflair-flaircc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -119px -0px;} 
.linkflair-flairpi .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -119px -59px;} 
.linkflair-flairtt .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -119px -118px;}
 
.linkflair-flaircc .linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -177px -0px;} 
.linkflair-flairpi.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -177px -58px;} 
.linkflair-flairtt.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -177px -118px;}

.linkflair-flairrf .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -238px -0px;} 
.linkflair-flaireu .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -238px -58px}
.linkflair-flairpm .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -238px -118px;}

.linkflair-flairrf.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -295px -0px;} 
.linkflair-flaireu.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -295px -58px}
.linkflair-flairpm.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -295px -118px;}

.linkflair-flaircw .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -356px -0px} 
.linkflair-flairot .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -356px -58px;}
.thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -356px -118px;} 

.linkflair-flaircw.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -412px -0px} 
.linkflair-flairot.linkflair-mc .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -412px -58px;}
.linkflair-flairmo .thumbnail.self {width: 55px; height: 55px;background: url(%%prompt-flairs2%%) -412px -118px;} 


/*End Links Flairs Thumbnails*/

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

/*Make titles come into view better when hovered
#siteTable .thing .entry .title {opacity: .75; transition: opacity 0.5s ease;}
#siteTable .thing .entry .title {transition: opacity 0.5s ease;}
#siteTable .thing:hover .title {opacity: 1; transition: opacity 0.5s ease;}
End - Make titles come into view better when hovered*/

/*Hide tagline and buttons until hovered*/
/*#siteTable .entry .flat-list, #siteTable .entry .tagline {line-height:18px}*/
#siteTable .thing .entry .flat-list li a, #siteTable .thing .entry .tagline {font-weight:normal}
#siteTable .thing .entry .flat-list li:not(.nsfw-stamp), #siteTable .thing .entry .tagline, #siteTable .thing .entry .expando-button {opacity: .3; transition: opacity 0.5s ease;}
#siteTable .thing .entry .flat-list li.first, #siteTable .thing .entry .tagline, #siteTable .thing .entry .expando-button {transition: opacity 0.5s ease;}
#siteTable .thing .entry .flat-list li.first a, #siteTable .thing .entry .tagline, #siteTable .thing .entry .expando-button {color:#233A64}
#siteTable .thing:hover .entry .flat-list li, #siteTable .thing:hover .entry .tagline, #siteTable .thing:hover .entry .expando-button {opacity: 1; transition: opacity 0.5s ease;}
/*End - Hide user and buttons until hovered*/


/*Alternate approach (can't seem to show title)
#siteTable .thing {opacity: .5; transition: opacity 0.5s ease;}
#siteTable .thing  {transition: opacity 0.5s ease;}
#siteTable .thing .title {opacity: 1;}
#siteTable .thing:hover {opacity: 1; transition: opacity 0.5s ease;}*/

/*==============================================
 Chapter IV -  Comments
 -----------------------------------------------*/

/* WPR Sticky Comments */
.stickied.comment.noncollapsed {
    box-shadow: 0 1px 3px #AFAFED;
}
/* End - WPR Sticky Comments */


/*==============================================
 Chapter V -  Wiki
 -----------------------------------------------*/

/*==============================================
 Chapter VI -  Search
 -----------------------------------------------*/

/*==============================================
 Chapter VII -  Users
 -----------------------------------------------*/

/*Special User Flairs*/
.flair {
    background: url(%%banners%%) no-repeat -9999px;
    border: 0;
    padding: 0;
}

.flair-hof-sl-win {
    min-width: 145px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -3px;
	vertical-align: middle;
    text-indent: 140px;
    margin-bottom: 5px;
}
.flair-hof-sl-win:hover:before {
    content: 'Hall of Famer | Spotlit | Contest Winner';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial;
}

.flair-hof-sl {
    min-width: 95px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -19px;
	vertical-align: middle;
    text-indent: 95px;
    margin-bottom: 5px;
}
.flair-hof-sl:hover:before {
    content: 'Hall of Famer | Spotlit';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial;
}

.flair-hof-win {
    min-width: 95px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -35px;
	vertical-align: middle;
    text-indent: 95px;
    margin-bottom: 5px;
}
.flair-hof-win:hover:before {
    content: 'Hall of Famer | Contest Winner';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial;
}

.flair-sl-win {
    min-width: 95px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -51px;
	vertical-align: middle;
    text-indent: 95px;
    margin-bottom: 5px;
}
.flair-sl-win:hover:before {
    content: 'Spotlit | Contest Winner';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial
}

.flair-hof {
    min-width: 45px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -67px;
	vertical-align: middle;
    text-indent: 45px;
    margin-bottom: 5px;
}
.flair-hof:hover:before {
    content: 'Hall of Famer';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial;
}

.flair-sl {
    min-width: 45px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -83px;
	vertical-align: middle;
    text-indent: 45px;
    margin-bottom: 5px;
}
.flair-sl:hover:before {
    content: 'Spotlit';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial;
}

.flair-win {
    min-width: 45px;
    height: 16px;
	line-height: 16px;
    background-position: 0px -99px;
	vertical-align: middle;
    text-indent: 45px;
    margin-bottom: 5px;
}
.flair-win:hover:before {
    content: 'Contest Winner';
    position: absolute;margin: -2em 0 0;color: #222;background: #fff;border: 1px solid;padding: 1px 2px;
	text-indent: initial;
}

/*End Special User Flairs*/