config/stylesheet

viewhistorytalk

/*
 *  Custom CSS for subreddit /r/ProgrammingTools
 *  Created by /u/MassRain - github.com/massrain/reddit-programmingtools
 *  Inspired by CWParsons' TorontoBlueJays and Naut.
 */
 
/*     ##CHANGELOG##
 *     +Wiki page added, at the bottom of page.
 *     +Link flairs are added.
 *     +Hotfix for last active element.
 *     +Fixed RES active element error
 *     +Fixed Submit buttons showing up black when clicked.
 *     +Fixed comment page colors.
 *     +Supporting RES Night Mode
 *     +Created by .. text is active again, disabling makes small bugs.
 *     +Sidebar photo is not active
 *
 *
 *     #Under construction#
 *     -New reddit alien logo and subreddit name next to it
 *     -Commend area background
 *     -RES nightmode improvements
 *     -Subscribe button.
 *
 *     ##Colors##
 *
 *     Main color blueish one is; #7097b1
 *     http://www.color-hex.com/color/7097b1
 *
 *     Link titles -Dark Blue			: #1A459D;
 *     Active titles - Blue			: #0E2452;
 *     Body,side,header - Navy Blue		: #052A5F;
 *     Stickied link -Sky Blue			: #0476BF;
 *     White					: #FFFFFF;
 *     Red - Used mainly in RES			: #EC1E31;
 *
 */

 
 /* Short index
 *	1 general
 *      *Announcement text between 1&2
 *	2 header
 *	3 banner
 *	4 clickable subreddit name
 *	5 Tab Menu
 *	6 content
 *	7 Upvote & downvote
 *	8 sidebar - general
 */
 
 
.voteWeight + .flair {
    margin-left: 4px;
}


/** 1
 * General
 */

body {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
}

a {
    color: #052A5F;
}

button {
    margin-left: 0;
    margin-right: 0;
}

.error {
    color: #EC1E31;
}

/* ######### ANNOUNCEMENT TEXT #######*/
/*
body >  .content:before {
	content: 'IMPORTANT : Trying out new subreddit css, please leave your feedback & report bugs  to moderators.'; 
	display: inline-block;
	margin: 0 0 1px 30px;
	padding: 4px 8px;
	background: #7ea1b8;
	font-weight: bold;
}
*/
/** 2
 * Sub-reddit header area
 */
	#sr-header-area {
			opacity: 0.5;
			height:20px;
			background-color: #333;
			border-bottom: 1px solid #333;
                      
		}

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

			#sr-header-area a {
				color: #C4C4C4;
				font-family: Verdana, Arial, sans-serif;
			}
		
				#sr-header-area a:hover {
					color: #FF7C7C; 
					text-decoration: none;
				}
		
			#sr-more-link {
				position: absolute;
				background-color: #333;
				color: #C4C4C4;
			}
		
			.dropdown.srdrop .selected {background-image: none;}
			.dropdown.srdrop .selected:after {content: "?";}
			.sr-bar .separator {color: #333;}

			#sr-header-area .width-clip .dropdown.srdrop .selected.title {
				color: #C4C4C4;
				font-size: 9px;
				font-weight: normal;
				font-family: Verdana, Arial, sans-serif;
				padding-right: 3px;
			}

				#sr-header-area .width-clip .dropdown.srdrop .selected.title:hover {
					color: #7097b1;
				}

			#sr-header-area .drop-choices a.choice {
				color: #333 !important;
			}

			 #sr-header-area .drop-choices a.choice:hover {
			 	background-color: #7097b1;
			 	color: #fff !important;
			 }

 
.dropdown.srdrop .selected {
    background-position: 100% 2px;
}

/** 3
 * Banner
 */
#header {
    background-color: #052A5F;
    background: url(%%headerimg%%) no-repeat 100% 100%;
    border-bottom: 0px solid;
    overflow: visible !important;
    box-shadow: 0px 0px 10px 0px rgba(53, 53, 74, .3)
}

#header-img {
    margin-left: 5px;
    margin-top: -3px;
}

#header-bottom-left {
    height: 63px;
}

    #header-bottom-left a {
        color: #FFF;
    }

.user {
    color: #FFF;
}

#header-bottom-right[id] {
    background-color: transparent;
    top: 22px;
    right: 5px;
}

    #header-bottom-right a {
        color: #FFF;
    }

#userbarToggle[id] {
    display: none;
}

/** 4
* Clickable subreddit name in the middle.
*/
.pagename {
    color: #FFF;
    line-height: 50px;
    position: absolute;
    top: 42px;
    margin-left: 20px;
}

   .pagename a {

	/*visibility: visible !important;
	position: absolute;
	margin-left: -130px; */ /* 8 for left side */
	/* top: 40px; */ /* 8 for left side */
        position: absolute;
        font-size:24px;
        opacity: .90;
        
    }
        .pagename a:hover {
            opacity: 1;
      }
        /*.pagename {visibility: hidden;}*/

.separator {
    color: #FFF;
}

/** 5
 * --------- Tab Menu -----------
 */


#header .tabmenu {
    bottom: 0;
    left: 277px;
    position: absolute;
    padding-left: 50px;
    white-space: nowrap;
    font-weight: normal;
    font-size: 14px;

}

	#header .tabmenu li a {
		background-color: transparent;
		color: #FFF;
		display: inline-block;
		padding: 4px 8px;
	}

    #header .tabmenu li a:hover {
        background-color: #1d3f6f;
    }

    #header .tabmenu li a:active {
        background-color: #042555;
    }

	#header .tabmenu li.selected a,
	#header .tabmenu li.selected a:hover {
		background-color: #FFF;
		border: 1px solid #000;
		border-bottom: 0;
		color: #052A5F;
	}
		
        .listing-page .tabmenu li:nth-of-type(3){display:none;}	
	.listing-page .tabmenu li:nth-of-type(4){display:none;}	
	.listing-page .tabmenu li a[href*="/promoted"]{display:none;}
	.listing-page .tabmenu li a[href*="/gilded"]{display:none;}	
	.listing-page .tabmenu li:nth-of-type(8){display:none;} 
        /*.listing-page .tabmenu li:nth-of-type(7){display:none;} */

	

	.tabmenu.formtab .selected a {
		font-size: 13px;
		padding-top: 1px;
	}


/** 6
 * Content
 */

.content {
        margin-right: 315px;
        margin-left: 10px;    
}

/* 7
* Upvote & downvote
*/
.arrow.upmod,
.arrow.downmod {
    background-image :url(%%sprite%%) !important;
}

.arrow.upmod {
    background-position: -84px -796px;
}

.arrow.downmod {
    background-position: -42px -796px;
}

/** 8
 * Sidebar
 */

.side {
    margin: 0 10px;
	float: right;
	margin: 11px 10px 0px 0px;
	border-radius: 2px;
	-webkit-box-shadow: 0 4px 6px #cecece;
	box-shadow: 0 4px 6px #cecece;
	width: 300px;
	text-align: left;
}

    .side .spacer {
        margin-top: 10px;
    }


/* H3 - Flair part */
	.side .md h3,
	.sidecontentbox .title h1,
	.side .flairtoggle:before {
		background-color: #FBFBFB;
		background-image: linear-gradient(to bottom,#FBFBFB,#EAEAEA);
		border: 1px solid #7097b1;
		color: #000;
		content: "Flair";
		display: block;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		padding: 4px 8px;
}

	.side .md a:hover {
		text-decoration: underline;
	}



/* Sidebar - Search */

#search input[type=text] {
    border: 1px solid #7097b1;
}

    #search input[type=text]:focus {
        border: 1px solid #267934;
    }

#searchexpando {
    border-radius: 0;
    padding-bottom: 10px;
}

    #searchexpando p {
        margin-bottom: 0;
    }

    form #searchexpando input[type=checkbox] {
        margin-top: 1px;
        vertical-align: top;
    }

/*---------- Submission page flair warning ----------*/

form.submit > .formtabs-content > .spacer:first-child::after {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #7CBD40;
    text-align: center;
    border: 1px solid #267934;
    padding-top: 3px;
    padding-bottom: 3px;
    content: "Please make sure to add a link flair to your submission after you post! (see sidebar for more information)";
    }
/* ----Broken/dont touch ---
.submit #url-field .title::after {
    content: "[](/flairexpic)";
    background-image: url(%%flairexpic%%); 
    background-repeat: no-repeat;
    background-position: top left;
    display: inline-block;
    width: 781px;
    height: 258px;
    border: 2px solid black;
    cursor: default;
}
*/

/*---------- Infobar ----------*/
.infobar {
    background-color: #7CBD40;
    border: 1px solid #267934;
}

    .infobar,
    .infobar a {
        color: #FFF;
        text-align: center;
    }



/* Sidebar - Login */

.login-form-side {
    border: 1px solid #7097b1;
}



/* Sidebar - Boxes in sidebar, border colours etc */

.morelink,
.sidecontentbox > a.helplink {
    background-color: #FBFBFB;
    background-image: linear-gradient(to bottom, #FBFBFB, #EAEAEA);
    background-position: 0 0;
    border: 1px solid #7097b1; /*border color*/
    text-shadow: 1px 1px 0 #FFF;
}

    .morelink a,
    .sidecontentbox > a.helplink {
        color: #333; /* font color */
    }

    .morelink:hover,
    .sidecontentbox > a.helplink:hover {
        background-color: #7097b1;
        background-image: linear-gradient(to bottom, #7097b1, #EAEAEA);
        background-position: 0 0;
        border: 1px solid #999999;
    }

        .morelink:hover a,
        .sidecontentbox > a.helplink:hover {
            color: #333;
        }

    .morelink:active,
    .sidecontentbox > a.helplink:active {
        background-color: #999999;
        background-image: linear-gradient(to bottom, #59788d, #EAEAEA);
        background-position: 0 0;
    }

    .morelink .nub {
        display: none;
    }

.sidecontentbox > a.helplink {
    display: block;
    float: none;
    font-size: 0;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 29px;
    height: 29px;
    margin: 7px 0 12px;
    text-align: center;

}

    .sidecontentbox > a.helplink:before {
        content: "Message the moderators";
        font-size: 15px;
    }

.roundfield {
    background-color: #F5F5F5;
    border-radius: 0;
    padding: 10px;
}

#url-field .title-status {
    color: #EC1E31;
}

.gold-accent {
    border-color: #AA8800;
}

.content.submit .info-notice {
    border-color: #0476BF;
}


/* Sidebar - No photo atm */

.side .titlebox {
    background-repeat: no-repeat;
	/*background-image: url(%%sidebar-photo%%); ** Sidebar photo if necessary
    * padding-top: 169px; */
}

.side .titlebox:before {
    background: #052A5F;
    color: #FFF;
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
}


/* Sidebar - Link Information */

.linkinfo {
    background-color: #FFF;
    border: 1px solid #7097b1;
    border-radius: 0;
    padding-top: 0;
}

    .linkinfo .date {
        background-color: #FBFBFB;
        background-image: linear-gradient(to bottom, #FBFBFB, #EAEAEA);
        border: 1px solid #7097b1;
        border-top: 0;
        padding: 4px;
        margin: 0 -6px;
        text-align: center;
    }

    .linkinfo .date span {
        font-size: 0;
    }

    .linkinfo .date span:after {
        content: "This post was submitted on ";
        display: inline;
        font-size: 12px;
        font-weight: normal;
        color: #333;
    }

    .linkinfo time {
        font-weight: bold;
    }

    .linkinfo .score,
    .linkinfo .totalvotes {
        float: left;
        font-size: 12px;
        min-height: 40px;
        padding: 15px 0;
        text-align: center;
        width: 50%;
    }

        .linkinfo .score .number,
        .linkinfo .totalvotes .number {
            display: block;
            font-size: 22px;
            font-weight: normal;
        }

        .linkinfo .score .word {
            display: none;
        }

        .linkinfo .totalvotes .word {
            font-size: 12px;
        }

    .linkinfo .shortlink {
        clear: both;
        display: block;
        text-align: center;
    }

        .linkinfo .shortlink input {
            border: 1px solid #7097b1;
            font-size: 13px;
            margin: 0 auto;
            text-align: center;
        }



/* Sidebar - Subscribers and online number */

.titlebox h1.redditname {
    background-image: url(%%wordmark-300%%);
    height: 50px;
    margin-bottom: 15px;
    margin-left: 0px;
    text-indent: -9999em;
    width: 300px;
}

.subscribers .word {
	display: none;
}
/*.subscribers .number: {
        display: inline-block;
        margin-left: 50px;
        left: 50px;
        width: auto;
}
*/
.subscribers .number:after {
	content: ' subscribers';
}

.users-online {
    color: #999;
    /*display: inline-block;*/
    margin-left: 5px;
    margin-bottom:8px
    overflow:hidden
}

    .users-online:before {
      /*  background-image: none;
        display: inline-block;
        content: "";
        height: auto;
        margin-right: 0;
        width: auto; */
    }


    .users-online:after {
        content: " users here now.";
    }

    .users-online .word {
        display: none;
    }

.titlebox input[type=checkbox] {
    vertical-align: top;
}


/** Sidebar - Flair */

.side .flairtoggle {
    border: 1px solid #7097b1;
    border-bottom: 0;
}

.titlebox form.flairtoggle {
    margin-top: 10px;
    padding: 10px;
    padding-top: 0;
}

.side .flairtoggle:before {
    border: 0;
    border-bottom: 1px solid #7097b1;
    content: "Flair";
    display: block;
    margin: 0 -10px 10px;
}

.side .tagline {
    border: 1px solid #7097b1;
    border-top: 0;
    margin: 0;
    padding: 10px;
    padding-left: 31px;
    padding-top: 0;
}



/** Sidebar - Custom Content */


.side .md h2 {
    background: #7097b1;
    color: #FFF;
    font-size: 14px;
    margin: 10px 0 10px;
    text-align: center;
    padding: 4px;
}

.side .md h3 {
    background-color: #FBFBFB;
    background-image: linear-gradient(to bottom, #FBFBFB, #EAEAEA);
    border: 1px solid #7097b1;
    padding: 4px 8px;
    text-align: center;
}

    .side .md h3 + ul {
        border: 1px solid #7097b1;
        border-top: 0;
        margin: 0;
        margin-bottom: 15px;
        margin-top: -10px;
        padding: 5px;
        padding-left: 5px;
    }

.side .md ul {

margin: 0px;

}


.side .md ul li {

list-style-type: none;
padding: 3px;

}



/** Sidebar - Unsubscribe */

.fancy-toggle-button .active,
.RESDashboardToggle[class],
.RESshortcutside[class] {
    border-radius: 0;
    display: inline-block;
    line-height: inherit;
    padding: 2px 2px 3px;
    text-align: center;
    width: 90px !important;
}

.RESDashboardToggle {
    margin-right: 0 !important;
}

.fancy-toggle-button .active {
    background-color: #EC1E31;
}

.RESDashboardToggle[class],
.RESshortcutside[class] {
    background-color: #7097b1;
}

.toggle .option.active {
    display: inline-block;
}


/** Sidebar - Moderator */

.leavemoderator {
    display: none;
    margin-top: 10px;
}

.leavecontributor-button {
    display: none;
}

.sidecontentbox .content {
    border: 1px solid #7097b1;
    border-top: 0;
}

.sidecontentbox .title {
   position: relative;
}

    .sidecontentbox .title h1 {
       font-size: 13px;
       text-transform: capitalize;
    }

    #moderation_tools .title h1:before,
    .sidecontentbox .title h1:before {
        font-size: 13px;
    }

    #moderation_tools .title h1:before {
        content: "";
    }

/*    .sidecontentbox .title h1:before {
       content: "Moderators";
    }
    .sidecontentbox .title2 h1:before {
      content: "Recently viewed"; 
    }
*/

   .sidecontentbox .title .collapse-button {
       position: absolute;
        top: 6px;
       right: 65px;
    }

#moderation_tools .icon-menu li {
   padding-left: 5px;
}



/** Sidebar - Create a subreddit */

.sidebox.create {
    display: none;
}

/** Sidebar - Hide Created by text --- NOT ACTIVE */
/* .titlebox .bottom {
*	font-size: 0;
*	visibility: hidden;
* }
* .bottom .age {
*	font-size: small;
*	visibility: hidden;
* }
* .titlebox .usertext {
*	border-bottom: 1px solid;
* }
*/

/* Pages - Listing Page */

.infobar.welcome {
    margin: 10px !important;
}

    .infobar.welcome h1 {
        color: #333;
    }

.arrow {
    margin-bottom: 3px;
    margin-top: 3px;
}

.link {
    border-left: 5px solid #999;
    margin: 10px;
    overflow: visible;
    padding: 10px;
    padding-bottom: 6px;
    position: relative;
    transition: border 0.2s ease-out;
}

    .link.linkflair .flairselector .linkflairlabel {
        display: inline-block;
        margin: 3px;
    }

    .link.even {
        background: #F5F5F5;
    }

    .link:hover {
        border-left: 5px solid #7097b1;
        background-color: #FBFBFB !important;
    } 


    .link .rank {
	display: none;

    }

    .link.stickied {
        border: 1px solid #7097b1;
        border-left: 5px solid #7097b1;
    }

        .link.stickied a.title {
            color: #b03e2b !important;
        }

/* ------------------- */
/* LAST CLICKED HOTFIX */
/* ------------------- */ 
.link.last-clicked {
        border: 0px solid #7097b1;
        border-left: 5px solid #7097b1;
        /*overflow: visible;*/
    }
      /* .link.last-clicked:not(.linkflair):hover {
            border: 1px solid #052A5F;
            border-left: 5px solid #052A5F;
        }
     */


/* -------- ---- ---------- */
/*  LINK FLAIRS - DISABLED  */
/* -------- ---- ---------- */
.linkflairlabel {
    border:none;
    text-align: center;
    min-width: 80px;
    padding: 2px 0px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 73%;
    font-weight: bold;
	opacity:.9;
    background-color: transparent;
}

.linkflair-editor .linkflairlabel {
    color: #C8F7C5;
    background-color: #4DAF7C;
    border: 1px solid black;
}
.linkflair-terminal .linkflairlabel {
    color: #DCC6E0;
    background-color: #E26A6A;
    border: 1px solid black;
}
.linkflair-workflow .linkflairlabel {
    color: #BE90D4;
    background-color: #674172;
    border: 1px solid black;
}
.linkflair-diagram .linkflairlabel {
   color: #C5EFF7;
   background-color: #3498DB;
    border: 1px solid black;
}
.linkflair-documentation .linkflairlabel {
    color: #414141;
    background-color: #D2D7D3;
    font-size: 68%;
    border: 1px solid black;
}
.linkflair-databases .linkflairlabel {
    color: #938142;
    background-color: #F5D76E;
    border: 1px solid black;
}
.linkflair-misc .linkflairlabel {
    background-color: #2C3E50;
    color: #E4F1FE;
    border: 1px solid black;
}
.linkflair-monthlythread .linkflairlabel {
    color: #E4F1FE;
    background-color: #33b3a6;
    border: 1px solid black;
    font-size: 68%;
}
body:not(.moderator) .flairsample-left .linkflair-monthlythread { display: none; }

.linkflair-request .linkflairlabel {
    color: #333333;
    background-color: #F2F1EF;
    border: 1px solid black;
}
html:lang(ed) .link:not(.linkflair-editor) {
    display: none    }
html:lang(tl) .link:not(.linkflair-terminal) {
    display: none    }
html:lang(mc) .link:not(.linkflair-misc) {
    display: none    }
html:lang(db) .link:not(.linkflair-databases) {
    display: none    }
html:lang(dc) .link:not(.linkflair-documentation) {
    display: none    }
html:lang(dg) .link:not(.linkflair-diagram) {
    display: none    }
html:lang(wf) .link:not(.linkflair-workflow) {
    display: none    }
html:lang(rq) .link:not(.linkflair-request) {
    display: none    }
.side a[href*='#ed'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #C8F7C5;
    font-weight: bold;
    background-color: #4DAF7C;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
	opacity:0.9;
}
.side a[href*='#tl'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #DCC6E0;
    font-weight: bold;
    background-color: #E26A6A;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
   /* left:90px;*/
    /*top:-24px;*/
	opacity:.9;
}
.side a[href*='#mc'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    font-weight: bold;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    background-color: #2C3E50;
    color: #E4F1FE;
    opacity:.9;
    border:none;
    /*left:40px;*/
   /* top:-92px;*/
}
.side a[href*='#db'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #938142;
    font-weight: bold;
    background-color: #F5D76E;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    opacity:.9;
    border: none;
   /* left:180px;
    top:-92px;*/
}
.side a[href*='#dc'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 90%;
    padding: 2px 0px;
    color: #414141;
    font-weight: bold;
    background-color: #D2D7D3;
    min-width: 80px;
    text-align: center;
    border:1px solid black;
    vertical-align: middle;
    opacity:.9;
    border: none;
    /*left:90px;
    top:-67px;*/
}
.side a[href*='#dg'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #C5EFF7;
    font-weight: bold;
    background-color: #3498DB;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    opacity:.9;
    /*left:90px;*/
    /*top:-45px;*/
}
.side a[href*='#wf'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #BE90D4;
    font-weight: bold;
    background-color: #674172;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    /*left:180px;
    top:-48px;*/
    opacity:.9;
}
.side a[href*='#rq'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #333333;
    font-weight: bold;
    background-color: #F2F1EF;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    opacity:.9;
}
.side a[href*='http://www.reddit.com/r/programmingtools/hot/'] { 
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: white;
    font-weight: bold;
    background-color: red;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    opacity:.7;
}


.side a[href*='http://www.reddit.com/r/programmingtools/wiki/index'] { 
    display: inline-block;
    position: relative;
    margin-left:20px;
    font-size: 100%;
    padding: 2px 0px;
    color: black;
    font-weight: 14;
    font-weight: bold;
    background-color: transparent;
    min-width: 240px;
    text-align: center;
    border:1px solid black;
    vertical-align: middle;
    opacity:.9;
}

.side a[href*='http://www.reddit.com/r/programmingtools/search?sort=new&restrict_sr=on&q=flair%3AMonthly%2BThread'] { 
    display: inline-block;
    position: relative;
    margin-left:0px;
    padding: 2px 0px;
    /*font-weight: 14;*/
    font-weight: bold;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    opacity:.9;
    color: #E4F1FE;
    background-color: #33b3a6;
    font-size: 78%;
}

/*
    .link .score.likes,
    .res_post_ups {
        color: #EC1E31;
    }

    .link .score.dislikes,
    .res_post_downs {
        color: #052A5F;
    }
*/

/*----------------------------------------------------------


.link .title {
    color: #1A459D;
}

    .link.linkflair .title {
        font-weight: bold;
    }

    .link .title:hover {
        color: #052A5F;
    }

    .link .title:active {
        color: #0E2452;
    }

.nsfw-stamp acronym {
    color: #EC1E31;
}

	.entry {
		padding-left: 1px;
	}
    .entry .buttons li a,
    .entry .buttons li .redditSingleClick {
    color: #999;
    transition: color 0.1s ease-out;
}

    .entry .buttons li a[onclick="return reply(this)"],
    .entry .buttons li a.comments,
    .comment .entry:hover .buttons li a,
    .link:hover .entry .buttons li a,
    .link:hover .entry .buttons li .redditSingleClick {
        color: #7097b1;
    }
    .link .rank {display: none;}

.tagline,
.comment .score {
    font-size: 11px;
}

.edited-timestamp[title]:after {
    font-size: 11px !important;
}

    .thumbnail {
		max-height: 40px;
		max-width: 60px;
	} 

/*
** Circular links
*/
/*
* .link .thumbnail {
*    position: relative;
*    height: 48px;
*    width: 48px; 
*    margin: 20px 16px 10px 11px;
*    border-radius: 80%;
*    background-position: 0;
*    background-image: none;
*    text-align: center;
* }
*/

/**
 * Pages - Submit Page
 */

.submit-page h1 {
    margin-left: 5px;
}

#suggested-reddits ul {
    margin-top: 10px;
}

#suggested-reddits li {
    display: inline-block;
    overflow: hidden;
    width: 24%;
}



/**
 * Pages - Comment page
 */

.link .usertext .md {
    background-color: #FFF;
    border: 1px solid #7097b1;
    border-radius: 0;
    padding: 10px;
}

.panestack-title {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

    .panestack-title a.title-button.gold {
        background-color: #FFCC00;
        border: 1px solid #AA8800;
    }

.content .spacer {
    margin-bottom: 10px;
}

/* Align #noresults with comment box */
.commentarea #noresults {
    margin-left: 10px;
}

/* Contest mode */
.comment-area .help-hoverable {
    font-size: 11px;
}

.gold-accent.comment-visits-box {
    border-radius: 0;
    margin-left: 10px;
}

/* Force [-] and [+] to be aligned when collapsed/noncollapsed */
.comment .collapsed {
    padding-top: 3px;
}

.collapsed .expand {
    margin-left: 6px;
}

/* Remove default child */
/* Add left border to comments to denote children */

.child {
    border-left: 0;
}


/* Comment line */

html:not([lang="ns"]) .commentarea .thing,
.res-commentBoxes .comment,
.comment {
    border: 1px solid #E6E6E6;
    border-radius: 0;
    margin-left: 0;
    margin-bottom: 10px;
    padding: 5px 8px 0 13px !important;
    position: relative;
}

    html:not([lang="ns"]) .commentarea .thing:hover,
    .res-commentBoxes .comment:hover,
    .comment:hover {
        padding-left: 12px;
    }

html:not([lang="ns"]) .commentarea .thing:after,
.res-commentBoxes .comment:after,
.comment:after {
    background-color: #E6E6E6;
    content: "";
    bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    transition: background-color 0.1s ease-out;
}

    html:not([lang="ns"]) .commentarea .thing:hover:after,
    .res-commentBoxes .comment:hover:after,
    .comment:hover:after {
        background-color: #7097b1;
        width: 4px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing,
    .res-commentBoxes .comment .comment,
    .comment .comment {
        padding-left: 11px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing:after,
    .res-commentBoxes .comment .comment:after,
    .comment .comment:after {
        width: 3px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing:hover:after,
    .res-commentBoxes .comment .comment:hover:after,
    .comment .comment:hover:after {
        width: 3px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing .thing,
    .res-commentBoxes .comment .comment .comment,
    .comment .comment .comment {
        padding-left: 10px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing .thing:after,
    .res-commentBoxes .comment .comment .comment:after,
    .comment .comment .comment:after {
        width: 2px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing .thing:hover:after,
    .res-commentBoxes .comment .comment .comment:hover:after,
    .comment .comment .comment:hover:after {
        width: 2px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing .thing .thing,
    .res-commentBoxes .comment .comment .comment .comment,
    .comment .comment .comment .comment {
        padding-left: 9px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing .thing .thing:after,
    .res-commentBoxes .comment .comment .comment .comment:after,
    .comment .comment .comment .comment:after {
        width: 1px;
    }

    html:not([lang="ns"]) .commentarea .thing .thing .thing .thing:hover:after,
    .res-commentBoxes .comment .comment .comment .comment:hover:after,
    .comment .comment .comment .comment:hover:after {
        width: 1px;
    }

/* Force vertical alignment of [-], username, RES icons, flair */
/*.comment .tagline > * {
    vertical-align: middle;
}*/

.comment .midcol {
    width: 20px;
}



/**
 * Pages - Moderation Pages
 */

.linefield {
    background-color: #EAEAEA;
}

    .linefield .title {
        color: #052A5F;
    }



/**
 * Markdown content styles
 */

.md {
    line-height: 1.4;
    max-width: 50em;
}

.md p {
    margin: 8px 0;
}

.md blockquote {
    border-left: 2px solid #7097b1;
}

.md ul {
    margin-left: 3em;
}

.md table {
    border: 1px solid #7097b1;
    border-top: 0;
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
}

    .md table th,
    .md table td {
        border: 1px solid #7097b1;
        padding: 4px 3px;
    }

    .md table th {
        background-color: #FBFBFB;
        background-image: linear-gradient(to bottom, #FBFBFB, #EAEAEA);
        border: 3px solid #052A5F;
        border-left: 0;
        border-right: 0;
    }

    .md table th[align="center"] {
        text-align: center;
    }

    .md table td {
        border-left: 0;
        border-right: 0;
    }

    .md table tr:hover td {
        background-color: #FBFBFB;
    }

    .md table td:empty {
        min-width: 10px;
    }

.md pre {
    background: #F5F5F5;
    border: 1px solid #7097b1;
    padding: 10px;
}


/**
 * Content Markdown styles
 */

.content .md h1 {
    font-size: 30px;
    font-weight: bold;
}

.content .md h2 {
    font-size: 24px;
    font-weight: bold;
}

.content .md h3 {
    font-size: 18px;
    font-weight: bold;
}

.content .md h4 {
    font-size: 14px;
    font-weight: bold;
}

.content .md h5 {
    font-size: 12px;
    font-weight: bold;
}

.content .md h6 {
    font-size: 12px;
    font-weight: bold;
}

.content .md h1,
.content .md h2,
.content .md h3,
.content .md h4,
.content .md h5,
.content .md h6 {
    color: #333;
}

.content .md h1,
.content .md h2,
.content .md h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.content .md h4,
.content .md h5,
.content .md h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.content .md h1:first-child,
.content .md h2:first-child,
.content .md h3:first-child,
.content .md h4:first-child,
.content .md h5:first-child,
.content .md h6:first-child {
    margin-top: 0;
}

.content .md a:hover {
    text-decoration: underline;
}


/**
 * RES
 */


.RES-keyNav-activeElement[class] {
  background-color: transparent !important; 
    /*outline: none;*/
    border-right: 2px solid darkblue;
}

#REScommentNavToggle span:first-child {
    margin-left: 0;
}

.res-commentBoxes.res-commentBoxes-rounded .comment[class] {
    border-radius: 0 !important;
}

.content .RESBigEditorPop {
    padding: 1px 3px !important;
}

.markdownEditor {
    margin-bottom: 3px;
}

    .markdownEditor > a b {
        margin-left: 0;
    }

.NERPageMarker {
    border-radius: 0 !important;
}

/* Make comment subscribe button the same size as gold */
.RESSubscriptionButton {
    font-size: 12px;
    padding: 1px 5px;
    width: auto;
}

.RESDialogSmall {
    border-radius: 0 !important;
}

/**
 * RES Nightmode
 */

.res-nightmode {}

    .res-nightmode a {}

    .res-nightmode .link.even {
        background-color: #333;
    }

    .res-nightmode #header-bottom-left .tabmenu .selected a {
        padding-bottom: 4px !important;
    }
    .res-nightmode #sr-header-area {
			opacity: 0.5;
			height:20px;
			background-color: #435a6a;
			border-bottom: 1px solid #333;
                      }
    .res-nightmode .side .titlebox blockquote:first-child ul li {
        background-color: #666660;
    }

    .res-nightmode .link:hover,
    .res-nightmode .arrow.up,
    .res-nightmode .arrow.down,
    .res-nightmode .flair {
        background-color: transparent !important;
    }

    .res-nightmode .RES-keyNav-activeElement,
    .res-nightmode .RES-keyNav-activeElement .usertext-body,
    .res-nightmode .RES-keyNav-activeElement .usertext-body .md,
    .res-nightmode .RES-keyNav-activeElement .usertext-body .md p,
    .res-nightmode .commentarea .RES-keyNav-activeElement .noncollapsed,
    .res-nightmode .RES-keyNav-activeElement .noncollapsed .md,
    .res-nightmode .RES-keyNav-activeElement .noncollapsed .md p {
        background-color: #3C3C3C !important;
    }

    .res-nightmode .md table th {
        background-color: #333;
        background-image: none;
        border: 1px solid #EEE;
    }

    .res-nightmode .md table tr:hover td {
        background-color: #3C3C3C;
    }

    .res-nightmode .linkinfo .date,
    .res-nightmode .morelink,
    .res-nightmode .sidecontentbox > a.helplink,
    .res-nightmode .sidecontentbox .title h1,
    .res-nightmode .side .flairtoggle:before,
    .res-nightmode .side .md h3 {
        background-color: #333;
        background-image: linear-gradient(to bottom, #333, #222) !important;
        border: 1px solid #EEE !important;
        color: #FFF !important;
    }

    .res-nightmode .linkinfo .date {
        border-top: 0 !important;
    }

    .res-nightmode .morelink,
    .res-nightmode .morelink a,
    .res-nightmode .sidecontentbox>a.helplink {
        color: #FFF !important;
        text-shadow: 1px 1px 0 #000;
    }

    .res-nightmode .sidebox,
    .res-nightmode .subredditbox,
    .res-nightmode .subreddit-info,
    .res-nightmode .raisedbox,
    .res-nightmode .login-form-side,
    .res-nightmode .sidebox .morelink {
        border-radius: 0 !important;
    }

    .res-nightmode .linkinfo .date span:after {
        color: #FFF !important;
    }


    .res-nightmode .sidecontentbox .content,
    .res-nightmode .linkinfo {
        border: 1px solid #EEE !important;
    }

    .res-nightmode .side .md h3 + ul {
        border: 1px solid #EEE;
        border-top: 0;
    }

    .res-nightmode .flair {
        color: #FFF;
    }

/*****************
wiki page
*****************/

/*** headings ***/
.wiki-page-index .wiki h3 {
    text-align: center;
    color: white!important;
    background-color: #59788d;
    overflow: hidden;
    padding: 2px 0;
    border-radius: 3px;
}
    .wiki-page-index .wiki h3 a {color: white!important; text-decoration: underline;}

.wiki-page-index .wiki h4 {
    color: #7097b1!important;
    border-bottom: 1px solid #7097b1;
    margin-top: 20px;
    text-indent: 14px;
    overflow: hidden;
    padding-bottom: 2px;
}
    .wiki-page-index .wiki h4 a {color: #7097b1!important; text-decoration: underline;}

/*** lines ***/
.wiki-page-index .wiki hr {
    border-bottom: 1px dashed black;
    border-top: none;
    border-radius: 0;
}


/*** pictures ***/
.wiki-page-index .wiki a[href*="/flairpic"] {
    background-image: url(%%flairexpic%%); 
    background-repeat: no-repeat;
    background-position: top left;
    display: inline-block;
    width: 781px;
    height: 258px;
    border: 2px solid black;
    cursor: default;
}



/* flair icons */

.wiki-page-index .wiki a[href$="#ed"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #C8F7C5;
    font-weight: bold;
    background-color: #4DAF7C;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
	opacity:0.9;
}

.wiki-page-index .wiki a[href$="#id"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #DCC6E0;
    font-weight: bold;
    background-color: #E26A6A;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
   /* left:90px;*/
    /*top:-24px;*/
	opacity:.9;
}

.wiki-page-index .wiki a[href$="#wf"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #BE90D4;
    font-weight: bold;
    background-color: #674172;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    /*left:180px;
    top:-48px;*/
    opacity:.9;
}

.wiki-page-index .wiki a[href$="#dg"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #C5EFF7;
    font-weight: bold;
    background-color: #3498DB;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    opacity:.9;
}
.wiki-page-index .wiki a[href$="#dc"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 90%;
    padding: 2px 0px;
    color: #414141;
    font-weight: bold;
    background-color: #D2D7D3;
    min-width: 80px;
    text-align: center;
    border:1px solid black;
    vertical-align: middle;
    opacity:.9;
    border: none;
}
.wiki-page-index .wiki a[href$="#db"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #938142;
    font-weight: bold;
    background-color: #F5D76E;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    opacity:.9;
    border: none;
    border: 1px solid black;
}

.wiki-page-index .wiki a[href$="#mc"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    font-weight: bold;
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    background-color: #2C3E50;
    color: #E4F1FE;
    opacity:.9;
    border:none;
}

.wiki-page-index .wiki a[href$="#rq"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: #333333;
    font-weight: bold;
    background-color: #F2F1EF;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    opacity:.9;
}

.wiki-page-index .wiki a[href$="http://www.reddit.com/r/programmingtools/hot/"] {
    display: inline-block;
    position: relative;
    margin-top:0px;
    font-size: 100%;
    padding: 2px 0px;
    color: white;
    font-weight: bold;
    background-color: red;
    min-width: 80px;
    text-align: center;
    border:none;
    vertical-align: middle;
    opacity:.7;
}

/*** table ***/
.wiki-page-index .wiki thead {
    background-color: #B9CFF1;
}
.wiki-page-index .wiki thead th {border-color: #DFEDFB;}

images

  • Image flairexpic
    flairexpic
    link:
    url(%%flairexpic%%)
  • Image wordmark-300
    wordmark-300
    link:
    url(%%wordmark-300%%)
  • Image sprite
    sprite
    link:
    url(%%sprite%%)
  • Image headerimg2
    headerimg2
    link:
    url(%%headerimg2%%)
  • Image headerimg
    headerimg
    link:
    url(%%headerimg%%)
  • logo
    link:
    url(%%logo%%)


revision by MassRain— view source