reddit/r2/r2/public/static/css/compact.css

/* mixins */
/* meat */
body { background: #c5ccd3; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; margin: 0; width: 100%; height: 100%; -webkit-font-smoothing: antialiased; }

p { margin: 0; padding: 0; }

a { color: #517191; }

a:visited { color: #4F565B; }

textarea { font-family: inherit; }

/*Preloading*/
#preload { position: absolute; top: -1000px; left: -1000px; }

/*UI stuff*/
.newbutton { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 8px solid transparent; -moz-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -o-border-image: url("../compact/border-button.png") 8; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); background: none; }
.newbutton:active, .newbutton:hover, .newbutton[selected], .newbutton.expanded, .newbutton.active { -moz-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -o-border-image: url("../compact/border-button-active.png") 8; border-image: url("../compact/border-button-active.png") 8 fill; color: white; }

.button, .button:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; height: 30px; line-height: 30px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); }

.button:active, .button[selected], .button.active, .button.upmod, .button.downmod { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }

button.button { padding: 0 5px; }

.secondary_button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #abbbc9), color-stop(100%, #8393a3)); background: -webkit-linear-gradient(top, #abbbc9, #8393a3); background: -moz-linear-gradient(top, #abbbc9, #8393a3); background: -o-linear-gradient(top, #abbbc9, #8393a3); background: linear-gradient(top, #abbbc9, #8393a3); background-color: #97a7b6; border: 1px solid #626D78; }

.secondary_button:active, .second_button[selected], .second_button.active { background-color: #ABBBC9; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8393a3), color-stop(100%, #abbbc9)); background: -webkit-linear-gradient(top, #8393a3, #abbbc9); background: -moz-linear-gradient(top, #8393a3, #abbbc9); background: -o-linear-gradient(top, #8393a3, #abbbc9); background: linear-gradient(top, #8393a3, #abbbc9); background-color: #97a7b6; }

.small_button, .small_button:visited { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; line-height: 20px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 1px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -webkit-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; -moz-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; }

.small_button:active, .small_button[selected], .small_button.active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -o-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(top, #7e8994, #80a2c4); background-color: #7f95ac; }

.group_button { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-left: 1px solid #a6bed9; border-right: 1px solid #445d79; }

.group_button:first-child { -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; border-left: 1px solid #517090; }

.group_button:last-child { -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-right: 1px solid #517090; }

/*Options popups*/
.options_link { font-size: x-small; clear: left; margin: 2px 0px 0px 10px; display: inline-block; width: 30px; height: 30px; position: absolute; top: 35px; right: 10px; background-image: url("../compact/options.png"); /*SPRITE*/ }
.options_link.active { background-image: url("../compact/options-active.png"); /*SPRITE*/ }

.comment .options_link { top: 10px; }

/*Options expando*/
.link .options_expando, .comment .options_expando, .message .options_expando { background: #213345; margin: 35px -5px -1px; border-top: 1px solid #111922; display: none; -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8); text-align: center; height: 60px; overflow: hidden; }
.link .options_expando a, .comment .options_expando a, .message .options_expando a { display: inline-block; color: white; text-decoration: none; font-size: 11px; padding: 10px; width: 50px; height: 40px; text-align: center; border-right: 1px solid #111922; border-left: 1px solid #324c67; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in; }
.link .options_expando a:active, .comment .options_expando a:active, .message .options_expando a:active { background-color: #324c67; border-left: 1px solid #42668a; }
.link .options_expando a:hover, .comment .options_expando a:hover, .message .options_expando a:hover { background-color: #263340; -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); border-left: 1px solid #42668a; }
.link .options_expando a:first-child, .comment .options_expando a:first-child, .message .options_expando a:first-child { border-left: none; }
.link .options_expando a:last-child, .comment .options_expando a:last-child, .message .options_expando a:last-child { border-right: none; }
.link .options_expando.expanded, .comment .options_expando.expanded, .message .options_expando.expanded { display: block; }

.comment .entry, .message .entry { margin-right: 50px; }
.comment .child .options_link, .message .child .options_link { top: 8px; }
.comment .options_expando, .message .options_expando { margin: 10px -50px 10px 0px; }

.message .options_expando { margin: 25px -55px 10px -5px; }

.options_icons, .email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon, .edit-icon, .reply-icon, .permalink-icon, .collapse-icon, .context-icon, .parent-icon, .unread-icon, .hide-icon, .unhide-icon { display: block; width: 24px; height: 24px; margin-left: auto; margin-right: auto; margin-bottom: 5px; }

.email-icon { background-image: url("../compact/email.png"); /*SPRITE*/ }

.report-icon { background-image: url("../compact/report.png"); /*SPRITE*/ }

.save-icon { background-image: url("../compact/save.png"); /*SPRITE*/ }

.unsave-icon { background-image: url("../compact/unsave.png"); /*SPRITE*/ }

.domain-icon { background-image: url("../compact/domain.png"); /*SPRITE*/ }

.edit-icon { background-image: url("../compact/edit.png"); /*SPRITE*/ }

.reply-icon { background-image: url("../compact/reply.png"); /*SPRITE*/ }

.permalink-icon { background-image: url("../compact/permalink.png"); /*SPRITE*/ }

.collapse-icon { background-image: url("../compact/collapse.png"); /*SPRITE*/ }

.context-icon { background-image: url("../compact/context.png"); /*SPRITE*/ }

.parent-icon { background-image: url("../compact/context.png"); /*SPRITE*/ }

.unread-icon { background-image: url("../compact/unread.png"); /*SPRITE*/ }

.hide-icon { background-image: url("../compact/hide.png"); /*SPRITE*/ }

.unhide-icon { background-image: url("../compact/unhide.png"); /*SPRITE*/ }

/*Toolbar*/
#topbar { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); background-color: #bbd3ec; border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; height: 40px; position: relative; }
#topbar #header-img { height: 32px; width: auto; }
#topbar .left { position: absolute; left: 0; bottom: 3px; overflow: hidden; max-height: 40px; z-index: 1; }
#topbar .right { position: absolute; right: 10px; bottom: 1px; z-index: 3; }
#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1; }

#topbar > h1 a { position: relative; color: inherit; text-decoration: inherit; z-index: 2; }

body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }

#topbar > .right > .button { padding-top: 8px; padding-bottom: 3px; }

#topbar > .right > .button:first-child { margin-right: 5px; }

#topbar > .right > #mail { width: 30px; height: 30px; display: inline-block; }
#topbar > .right > #mail.nohavemail { background-image: url("../compact/nomail.png"); /*SPRITE*/ }
#topbar > .right > #mail.nohavemail:active, #topbar > .right > #mail.nohavemail:hover { background-image: url("../compact/nomail-active.png"); /*SPRITE*/ }
#topbar > .right > #mail.havemail { background-image: url("../compact/havemail.png"); /*SPRITE*/ }
#topbar > .right > #mail.havemail:active, #topbar > .right > #mail.havemail:hover { background-image: url("../compact/havemail-active.png"); /*SPRITE*/ }

#topbar > .right > #modmail { width: 30px; height: 30px; display: inline-block; }
#topbar > .right > #modmail.nohavemail { background-image: url("../compact/modmail.png"); /*SPRITE*/ }
#topbar > .right > #modmail.nohavemail:active, #topbar > .right > #modmail.nohavemail:hover { background-image: url("../compact/modmail-active.png"); /*SPRITE*/ }
#topbar > .right > #modmail.havemail { background-image: url("../compact/newmodmail.png"); /*SPRITE*/ }
#topbar > .right > #modmail.havemail:active, #topbar > .right > #modmail.havemail:hover { background-image: url("../compact/newmodmail-active.png"); /*SPRITE*/ }

.topbar-options { width: 30px; height: 30px; display: inline-block; background-image: url("../compact/menu-options.png"); /*SPRITE*/ }
.topbar-options.active, .topbar-options:hover, .topbar-options:active { background-image: url("../compact/menu-options-active.png"); /*SPRITE*/ }

#top_menu { position: absolute; right: 5px; top: 44px; background-color: white; border: 1px solid rgba(27, 47, 94, 0.4); border-top: 0px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); z-index: 5; display: none; }

#top_menu > .menuitem { padding: 5px; }

#top_menu > .menuitem.bottm-bar { border-bottom: 1px solid rgba(27, 47, 94, 0.4); }

#top_menu > .menuitem a { text-decoration: none; color: #222; font-weight: bold; }

.status { color: red; margin-left: 20px; }

/*Subtoolbar (eg hot)*/
.subtoolbar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 32px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #ffffff, #cccccc); background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -o-linear-gradient(top, #ffffff, #cccccc); background: linear-gradient(top, #ffffff, #cccccc); background-color: #e5e5e5; border-bottom: 1px solid #bbb; padding: 6px; text-overflow: ellipsis; overflow: hidden; }

.subtoolbar > ul { list-style-type: none; margin: 0; padding: 0; }

.subtoolbar > ul > li { display: inline-block; text-overflow: ellipsis; overflow: hidden; }

.subtoolbar > ul > li a { color: #4c566c; font-weight: bold; text-decoration: none; font-size: 12px; line-height: 20px; margin: 0; padding: 3px 10px; text-overflow: ellipsis; overflow: hidden; }

.subtoolbar > ul > li.selected a { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background: -webkit-linear-gradient(top, #dddddd, #aaaaaa); background: -moz-linear-gradient(top, #dddddd, #aaaaaa); background: -o-linear-gradient(top, #dddddd, #aaaaaa); background: linear-gradient(top, #dddddd, #aaaaaa); background-color: #c3c3c3; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; border: 1px solid #aaa; padding-top: 2px; padding-bottom: 1px; -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); }

/*Things*/
/*Arrows*/
.link .arrow, .comment .arrow, .message .arrow { width: 28px; height: 28px; cursor: pointer; display: block; margin: 1px auto 0px; outline: none; }
.link .arrow.up, .comment .arrow.up, .message .arrow.up { background-image: url("../compact/upvote.png"); /*SPRITE*/ }
.link .arrow.down, .comment .arrow.down, .message .arrow.down { background-image: url("../compact/downvote.png"); /*SPRITE*/ }
.link .arrow.upmod, .comment .arrow.upmod, .message .arrow.upmod { background-image: url("../compact/upvote-active.png"); /*SPRITE*/ }
.link .arrow.downmod, .comment .arrow.downmod, .message .arrow.downmod { background-image: url("../compact/downvote-active.png"); /*SPRITE*/ }

/*Links*/
.link { min-height: 70px; border-bottom: 1px solid #999; border-top: 1px solid #ddd; padding: 5px 5px; padding-bottom: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.6); position: relative; overflow: hidden; }

.link:first-child { border-top: none; }

.link:nth-child(odd) { background: rgba(206, 227, 248, 0.5); }

/* Voting stuff */
.link > .rank { float: left; margin-top: 17px; font-size: 12px; color: #aaa; }

.link > .midcol { float: left; width: 25px; margin: 0 10px 1px 0px; padding-bottom: 5px; position: relative; }

.link > .entry .score, .link > .entry.likes .score.unvoted, .link > .entry.dislikes .score.unvoted { display: none; }

.link > .entry .score.unvoted, .link > .entry.likes .score.likes, .link > .entry.dislikes .score.dislikes { display: inline; font-weight: bold; }

.link > .entry.likes .score.likes { color: #E07A7A; }

.link > .entry.dislikes .score.dislikes { color: #7272D1; }

/* experimental */
.link .rank { display: none; }

.link .modcol { float: left; }

.comment { position: relative; }

.comment > .entry > .tagline .score { display: none; }

.comment > .entry.unvoted > .tagline .score.unvoted, .comment > .entry.likes > .tagline .score.likes, .comment > .entry.dislikes > .tagline .score.dislikes { display: inline; }

/** Vote up **/
.link > .midcol.likes > .score { color: #E07A7A; }

/** Vote down **/
.link > .midcol.dislikes > .score { color: #7272D1; }

/*Image*/
.link .thumbnail { float: right; margin: 0 0 5px 5px; overflow: hidden; max-height: 50px; }

/* Entry*/
.link .entry { margin: 0px 50px 3px 0px; }

.link a { text-decoration: none; color: #517191; color: #369; }

.link p.title { margin: 0; padding: 0; text-overflow: ellipsis; word-wrap: break-word; font-size: .8em; font-weight: bold; }

.link p.title > a { text-overflow: ellipsis; overflow: hidden; color: #25A; }

.link.stickied p.title > a { color: #228822; }

.link .domain { color: #737373; font-size: 9px; margin-left: 5px; }
.link .domain a, .link .domain a:hover { color: inherit; }

.link .tagline { margin: 2px 0 5px; padding: 0; padding-top: 2px; font-size: 10px; color: #333; }

.link .tagline > span { margin-right: 2px; }

.link .tagline a { font-weight: bold; }

.link .tagline .stickied-tagline { color: #228822; }

/*Expando*/
.link .expando-button { float: left; display: block; height: auto; line-height: inherit; margin: 3px 10px 2px 0; width: 30px; height: 30px; background-image: url("../compact/selftext.png"); /*SPRITE*/ }
.link .expando-button.expanded { background-image: url("../compact/selftext-active.png"); /*SPRITE*/ }

.link > .expando { clear: both; margin: 5px 0; margin-bottom: 30px; border: 1px solid #999; background: #ddd; padding: 5px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; font-size: 11px; }

.link > .thing_options { font-size: x-small; margin: none; display: block; float: left; clear: left; margin: 2px 0px 0px 10px; }

.nsfw-warning { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: #ac3939; text-decoration: none; font-weight: normal; font-size: 9px; margin-left: 5px; padding: 0 2px; border: 1px solid #d27979 !important; }

/* Comment count */
.commentcount { float: right; margin: 5px; width: 45px; text-align: right; }

.commentcount > .comments { border: 8px solid transparent; -moz-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -webkit-border-image: url("../compact/border-button.png") 8; -o-border-image: url("../compact/border-button.png") 8; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); }
.commentcount > .comments:active, .commentcount > .comments:hover, .commentcount > .comments[selected], .commentcount > .comments.preloaded { -moz-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -webkit-border-image: url("../compact/border-button-active.png") 8; -o-border-image: url("../compact/border-button-active.png") 8; border-image: url("../compact/border-button-active.png") 8 fill; }

/* Comment styles */
.commentarea > h1 { color: #4c566c; font-size: 17px; margin: 10px 10px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); }

.commentarea > .menuarea { display: none; /*TODO: Make dropdown menu*/ }

.commentarea > .main-form-title { color: #4c566c; font-size: 17px; font-weight: bold; margin: 0 10px; }

.commentarea > .usertext { background: white; margin: 0 10px 5px; border: 1px solid #d9d9d9; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }

.commentarea > .usertext textarea { margin: 0; padding: 5px; width: 100%; height: 100px; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; border-bottom: 1px solid #d9d9d9; }

.cancel, .save { float: right; padding: 0 5px !important; }

.save { margin-left: 5px; }

/* Errors */
.error { color: red; }

.content > .error { color: rgba(255, 255, 255, 0.9); font-size: 25px; margin: 10px; text-align: center; text-shadow: rgba(0, 0, 0, 0.15) 0px -1px 0px; }

.help-toggle { float: left; margin-top: 3px; }

.bottom-area { padding: 5px; }

.markhelp-parent { display: none; }

.markhelp { width: 100%; border-collapse: collapse; }

.markhelp th { background: #d9d9d9; }

.markhelp th:first-child { -webkit-border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; border-top-left-radius: 8px; }

.markhelp th:last-child { -webkit-border-top-right-radius: 8px; -moz-border-radius-topright: 8px; border-top-right-radius: 8px; }

.markhelp tr:nth-child(odd) td { background: rgba(0, 0, 100, 0.1); }

.markhelp td { border: 1px solid #d9d9d9; padding: 5px; }

.markhelp tr:last-child td:first-child { -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px; }

.markhelp tr:last-child td:last-child { -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; }

/*Cloned comment reply */
.usertext textarea { margin: 0; padding: 5px; border: 1px solid #d9d9d9; width: 100%; min-height: 100px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.child form.usertext.cloneable { margin: 5px; }

/**Actual comments*/
.comment { background: white; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }

.comment > .midcol { float: left; margin: 7px; overflow: hidden; }

.comment > .entry > .tagline { font-size: 11px; padding-bottom: 2px; }

.child .comment { margin: 4px; margin-top: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px; }

.comment.collapsed .child, .comment.collapsed .usertext, .comment.collapsed .midcol, .comment.collapsed .button, .comment.collapsed .options_link, .comment.collapsed .options_expando { display: none; }

.comment.collapsed { font-style: italcs; }

.comment.collapsed .tagline { margin-left: 20px; font-style: italcs; color: #AAA; }

/** comment gilding */
.gilded-comment-icon { position: relative; display: inline-block; margin: 0 0 -15px 8px; top: -8px; color: #99895F; font-size: .9em; vertical-align: middle; }

.gilded-comment-icon:before { display: inline-block; content: ''; background-image: url(../gold-coin.png); /* SPRITE */ background-repeat: no-repeat; height: 14px; width: 13px; margin-right: 2px; vertical-align: -3px; }

.user-gilded > .entry .gilded-comment-icon:before { width: 23px; }

body.post-under-6h-old .gilded-comment-icon { opacity: .55; }

/** messages and inbox */
.message { background: white; position: relative; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; padding: 5px; }

.message > .midcol { float: left; margin: 10px; overflow: hidden; }

.message.unread { background-color: #FFFFAA; }

.message .correspondent { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #9ebedc)); background: -webkit-linear-gradient(top, #cee3f8, #9ebedc); background: -moz-linear-gradient(top, #cee3f8, #9ebedc); background: -o-linear-gradient(top, #cee3f8, #9ebedc); background: linear-gradient(top, #cee3f8, #9ebedc); background-color: #b6d0ea; /* TODO */ margin-right: 10px; padding: 2px 5px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; }

.message .correspondent a { text-decoration: none; }

.message .message .subject { display: none; }

.message > .entry > .tagline { font-size: 11px; padding-bottom: 2px; margin-bottom: 2px; }

.message > .entry .usertext-body, .message > .entry .md { font-size: 11px; word-wrap: break-word; }

.message > .metabuttons { float: right; margin: 10px; }

.message .subject { font-weight: bold; font-size: 13px; border-bottom: 1px solid #d9d9d9; padding: 5px; overflow: hidden; }

.message .subject a { margin-left: 5px; }

.message .subject .correspondent a { margin-left: 0; }

/* subreddit */
.link .subreddit { background-color: transparent; margin: 0px; }

.subreddit { background-color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin: 5px; }

.subreddit p.title { display: block; margin-left: 35px; margin-right: 30px; }

.subreddit a.title { display: block; margin: 0; padding: 0; text-overflow: ellipsis; word-wrap: break-word; font-size: small; font-weight: bold; text-overflow: ellipsis; overflow: hidden; color: #25A; text-decoration: none; }

.subreddit .title a.domain { font-size: x-small; color: #AAA; font-style: italic; display: block; }

.subreddit .tagline { font-size: x-small; color: #666; }

.subreddit .button.active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -o-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(top, #bfd0e0, #80a2c4); background-color: #9fb9d2; }

.subreddit > .entry .score, .subreddit > .entry.likes .score.unvoted, .subreddit > .entry.dislikes .score.unvoted { display: none; }

.subreddit > .entry .score.unvoted, .subreddit > .entry.likes .score.likes, .subreddit > .entry.dislikes .score.dislikes { display: inline; }

.subreddit .midcol .button.add, .subreddit .midcol .button.remove { font-family: courier; font-size: small; }

.subreddit .midcol { float: left; }

.subreddit .midcol .button { display: none; margin: 4px; }

.subreddit .midcol .button.active { display: block; width: auto; height: auto; padding: 0px 9px; }

.subreddit .expando-button { float: right; height: 100%; }

.subreddit .description { border-top: 1px solid #AAA; margin-top: 2px; padding-top: 2px; margin-left: 0px; padding-left: 10px; }

/* Compose */
#compose-message { background: white; border: 1px solid #d9d9d9; border-top: 0px; margin: 10px; margin-top: 0; padding: 10px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }

#compose-message label { display: block; font-size: 17px; font-weight: bold; }

#compose-message input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #757575; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; margin-bottom: 5px; padding: 5px; width: 100%; }

#compose-message textarea { border-color: #757575; height: 200px; }

.comment > .entry .usertext-body { font-size: 11px; word-wrap: break-word; }

.comment > .entry .usertext-edit { margin-left: 42px; }

.comment > .metabuttons { float: right; margin: 10px; }

/*Child comment specific styles*/
/*Reduce the bottom margin on the last child comment in a thread, to make viewing easier.*/
.child .comment { margin-right: -1px; }

.child .comment:last-child { margin-bottom: 2px; }

.comment > .morecomments { margin: 5px; text-align: right; }

/*Link colors*/
.tagline .submitter { color: blue; }

.tagline .friend { color: orange; /*Why not orangered? Because orangered can look very red on a mobile*/ }

.tagline .moderator { color: #282; }

.tagline .admin { color: #F01; }

/*Loading spinner, yay CSS animation*/
@-webkit-keyframes rotateThis { from { -webkit-transform: scale(0.75) rotate(0deg); }
  to { -webkit-transform: scale(0.75) rotate(360deg); } }

.loading { width: 100%; background-color: white; text-align: center; }

.loading img { -webkit-animation-name: rotateThis; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }

.throbber { display: none; margin: 0 2px; background: url("../compact/throbber.gif") no-repeat; width: 18px; height: 18px; }

.working .throbber { display: inline-block; }

/* Login and Register */
#login_login, #login_reg { background: white; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; max-width: 350px; margin-left: auto; margin-right: auto; }

#login_login > div, #login_reg > div { padding: 10px; }

#login_login > div > ul, #login_reg > div > ul { list-style-type: none; padding: 0; margin: 0 0 10px; }

#login_login > div > ul li label, #login_reg > div > ul li label { display: block; font-size: 17px; font-weight: bold; }

#login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] { width: 100%; margin: 0 0 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #757575; /*It was the coins fault!*/ font-size: 17px; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#login_login > div > ul li input[type="checkbox"] + label, #login_reg > div > ul li input[type="checkbox"] + label { display: inline; }

.user-form .submit * { vertical-align: middle; }

/* toolbar specific stuf here */
body.toolbar { margin: 0px; padding: 0px; overflow: hidden; }

.toolbar-iframe { border: none; height: 100%; width: 100%; background: white; }

.frame-toolbar { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(206, 227, 248, 0.9)), color-stop(100%, rgba(169, 196, 224, 0.9))); background: -webkit-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -moz-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: -o-linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background: linear-gradient(top, rgba(206, 227, 248, 0.9), rgba(169, 196, 224, 0.9)); background-color: rgba(187, 211, 236, 0.9); width: 300px; padding: 5px; top: 5px; border: 1px solid #6999c9; border-left: 0; position: absolute; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 3px; }

.toolbar .entry .score { width: 100%; text-align: center; display: none; padding-top: 7px; }

.toolbar .entry.unvoted > .score.unvoted, .toolbar .entry.likes > .score.likes, .toolbar .entry.dislikes > .score.dislikes { display: block; }

.toolbar .arrows { float: left; }

.toolbar .entry { text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4), 0px -1px 1px rgba(0, 0, 0, 0.1); font-weight: bold; font-size: 15px; }

/*Close toolbar button*/
.toolbar .close { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eca09c), color-stop(100%, #a35752)); background: -webkit-linear-gradient(top, #eca09c, #a35752); background: -moz-linear-gradient(top, #eca09c, #a35752); background: -o-linear-gradient(top, #eca09c, #a35752); background: linear-gradient(top, #eca09c, #a35752); background-color: #c77b77; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; border: 1px solid #884944; bottom: -13px; color: rgba(0, 0, 0, 0.594); font-size: 15px; font-weight: bold; height: 21px; padding-left: 6px; position: absolute; right: -13px; text-decoration: none; width: 21px; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px, rgba(0, 0, 0, 0.2) 0px -1px 1px; }

/* takdown page (sigh) */
.infobar.red img { float: left; }

.infobar.red { border: 1px solid red; padding: 10px; margin: 5px; background-color: #FFA177; }

.clear { clear: both; }

.clearleft { clear: left; }

.cover { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: gray; opacity: .3; z-index: 1000; }

.popup { position: absolute; top: 75px; left: 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; background-color: white; text-align: left; z-index: 1001; padding: 10px; border-color: #B2B2B2 black black #B2B2B2; border-style: solid; border-width: 1px; margin-left: auto; margin-right: auto; max-width: 350px; }

.popup h1 { text-align: center; font-size: large; font-weight: normal; color: orangered; }

/* Submit links */
#newlink { background: white; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }

#newlink .save { margin: 8px; }

/** Tab switcher **/
#newlink .tabmenu { display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; margin: 10px; padding: 0; }

#newlink .tabmenu li { display: block; webkit-box-flex: 1; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(100%, #b3b3b3)); background: -webkit-linear-gradient(top, #d9d9d9, #b3b3b3); background: -moz-linear-gradient(top, #d9d9d9, #b3b3b3); background: -o-linear-gradient(top, #d9d9d9, #b3b3b3); background: linear-gradient(top, #d9d9d9, #b3b3b3); background-color: #c6c6c6; border: 1px solid #999999; position: relative; }

#newlink .tabmenu li a { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; padding: 5px; color: #4d4d4d; text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 1px; text-decoration: none; font-weight: bold; }

#newlink .tabmenu li:first-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; }

#newlink .tabmenu li:last-child { -webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; border-left-color: #cccccc; }

#newlink li.selected { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #808080), color-stop(100%, #b3b3b3)); background: -webkit-linear-gradient(top, #808080, #b3b3b3); background: -moz-linear-gradient(top, #808080, #b3b3b3); background: -o-linear-gradient(top, #808080, #b3b3b3); background: linear-gradient(top, #808080, #b3b3b3); background-color: #999999; }

#newlink li.selected a { text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 1px; color: #f2f2f2; }

#newlink .spacer { margin-bottom: 5px; }

#newlink .infobar { margin: 5px; }

/* Fields */
#newlink textarea, #newlink input[type="text"], #newlink input[type="url"] { border: 1px solid #999999; }

#newlink .roundfield { position: relative; padding: 0px 5px; }

#newlink .roundfield-content textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 5em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

#newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2em; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

#newlink .title { font-weight: bold; }

/* Individual sections */
#url-field .button { float: right; margin-top: 5px; }

#url-field .title-status { background: #e6e6e6; border: 1px solid gray; padding: 2px 4px; margin-top: 5px; display: inline-block; }

#suggested-reddits ul { background: #e6e6e6; border: 1px solid gray; padding: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }

#suggested-reddits ul li { display: inline; }

#suggested-reddits ul li a { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -o-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(top, #becfe0, #81a3c5); background-color: #9fb9d2; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; display: inline-block; margin: 5px; padding: 3px 7px; text-decoration: none; border: 1px solid #507faf; color: #304c69; }

/* Autocomplete */
#sr-autocomplete-area { position: relative; z-index: 50; }

#sr-drop-down { position: absolute; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #e6e6e6, #bfbfbf); background: -moz-linear-gradient(top, #e6e6e6, #bfbfbf); background: -o-linear-gradient(top, #e6e6e6, #bfbfbf); background: linear-gradient(top, #e6e6e6, #bfbfbf); background-color: #d2d2d2; border: 1px solid gray; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-top: 0px; display: none; left: 5px; margin: 0px; padding: 0px; position: absolute; font-weight: bold; color: #333333; }

#sr-drop-down li { display: block; padding: 2px 5px; }

#sr-drop-down li:hover, #sr-drop-down li:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -o-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(top, #becfe0, #81a3c5); background-color: #9fb9d2; color: white; text-shadow: rgba(255, 255, 255, 0.098) 0px 1px 1px, rgba(0, 0, 0, 0.398) 0px -1px 1px; -webkit-text-stroke: 1px solid #517090; }

#sr-drop-down li:last-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; }

/* markdown */
.md { overflow: auto; font-size: small; }

.md p, .md h1 { margin: 5px 0; }

.md h1 { font-weight: bold; font-size: 100%; }

.md h2 { font-weight: bold; font-size: 100%; }

.md > * { margin-bottom: 0px; }

.md strong { font-weight: bold; }

.md em { font-style: italic; }

.md strong em { font-style: italic; font-weight: bold; }

.md img { display: none; }

.md ol, .md ul { margin: 10px 2em; }

.md ul { list-style: disc outside; }

.md ol { list-style: decimal outside; }

.md pre { margin: 10px; }

.md blockquote, .help blockquote { border-left: 2px solid #369; padding-left: 4px; margin: 5px; margin-right: 15px; }

.md td, .md th { border: 1px solid #EEE; padding: 1px 3px; }

.md th { font-weight: bold; }

.md table { margin: 5px 10px; }

.md center { text-align: left; }

/* bookmarklet page */
.instructions p { background-color: white; padding: 10px; margin: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

.instructions h1 { font-size: medium; margin-left: 5px; }

.instructions h2 { font-size: medium; margin-left: 5px; }

.instructions img { width: 290px; margin-left: 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border: 1px solid #888; }

.instructions textarea#bookmarklet { width: 290px; margin: 15px; height: 80px; }

.tryme { width: 100%; max-width: 280px; padding: 10px; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; margin: 10px auto; }

.tryme p { margin: 10px; font-size: small; }

.tryme .choices .button { width: 260px; display: block; text-align: center; margin: 10px; }

.deepthread { margin-left: 40px; }

.morecomments a, .deepthread a { text-decoration: none; color: white; }

.morechildren { margin: 5px 10px; }

.morechildren a { display: block; text-align: center; max-width: 350px; color: white !important; }

a.author { margin-right: 0.5em; }

.flair, .linkflair { margin-top: 2px; margin-right: 0.5em; padding: 0px 2px; display: inline-block; background: whiteSmoke; color: #545454; border: 1px solid #dedede; font-size: 9px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); }

.linkflair { font-weight: normal; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notice-taken, .notice-available {
    display: none;
    line-height: 16px;
}

.register-form.name-taken .notice-taken, .register-form.name-available .notice-available {
    display: block;
    margin-top: 2px;
}