Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
11372 lines (9476 sloc) 223 KB
@import "components/variables.less";
@import "components/components.less";
@import "markdown.less";
@import "post-sharing.less";
@import "search.less";
@import "interstitial.less";
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.screenreader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.basic-button {
border-width: 1px;
border-style: solid;
border-radius: 5px;
&:focus {
outline: 0;
box-shadow: inset 0 0 0 1px fadeout(white, 65%);
}
&:active {
box-shadow: inset 0 1px 1px 1px fadeout(black, 90%);
}
&:disabled, &.disabled {
.linear-gradient(#e9edf1, #dce3ea) !important;
color: #999999 !important;
text-shadow: 0 1px 0 lighten(#dce3ea, 15%) !important;
border-color: darken(#dce3ea, 5%) !important;
box-shadow: none !important;
}
}
.button-style(@top-color, @bottom-color, @border-color) {
&:extend(.basic-button all);
.linear-gradient(@top-color, @bottom-color);
border-color: @border-color;
&:hover {
.linear-gradient(lighten(@top-color, 5%), @bottom-color);
}
}
@gold-fonts: Palatino, georgia, garamond, FreeSerif, serif;
@gold-button-bg: #938870;
@gold-button-hover: #B8AB90;
@gold-button-active: #C3B598;
@gold-button-border: 1px solid #5E5137;
html {
height: 100%; /* Needed for toolbar's comments panel's pinstripe */
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,iframe {
margin:0;
padding:0;
}
table { border-collapse:collapse; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; }
q:before,q:after { content:''; }
body {
font: normal x-small verdana, arial, helvetica, sans-serif;
background-color: white;
z-index: 1;
min-height: 100%;
}
textarea { font: normal small verdana, arial, helvetica, sans-serif; }
/* [1] fixes a bug in old versions of WebKit, as used in Android 4.0. See
* https://github.com/necolas/normalize.css/commit/79b3d21b697e ,
* https://github.com/h5bp/mobile-boilerplate/issues/121 */
button,
html input[type="button"], /* [1] */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
/* Since we reset the padding on some of these things above, make it
* something reasonable (and consistent). */
padding: 2px 6px 3px;
}
button[disabled],
html input[disabled] {
cursor: default;
}
/*html,body { height: 100%; }*/
/* IE dumbness patch. hidden input in a hidden block that is
* subsequently shown leads to the input to "show" and generate undesired
* )padding. This makes it go away. */
input[type=hidden] { position: absolute; }
/* html element defaults */
h1 { font-size: 18px; font-weight: normal; margin: 10px 0 }
h2 { color: #369; font-size: 13px; }
h2 a { text-decoration: none }
h2 a:visited { color: #369 }
h2 a:hover { text-decoration: underline }
h3 { font-size:110%; /*text-transform:uppercase;*/ }
a img { border: 0 none; }
a { text-decoration: none; color: #369; }
/* Polyfill for HTML5 hidden attribute: http://caniuse.com/#feat=hidden */
[hidden] { display: none; }
/*
a:active { border: 0 none;}
a:focus { -moz-outline-style: none; }
*/
.rounded {
border-radius: 7px;
}
.rounded .morelink {
border-top-right-radius: 6px;
}
div.autosize { display: table; width: 1px}
div.autosize > div { display: table-cell; }
input.txt {
background-color:#f7f7f7;
border: 1px solid #369;
}
input[type=checkbox], input[type=radio] { margin-top: .4em; }
/* forms */
label.disabled { color: gray; }
.wrong {color: red; font-weight: normal}
.attention {
font-weight: bold;
border: solid 1px #ff6600;
padding: 3px;
border-radius: 7px;
}
.subform input.text { width: 25em }
.subform textarea.text { width: 25em }
.subform label { margin: 0 5px 0 5px }
.subform td { padding: 0px 5px 5px 0}
.subform td.nopadding { padding: 0px}
.nowrap { white-space: nowrap; }
.leftpad { padding-left: 1em }
.nomargin { margin: 0px }
.nopadding { padding: 0px }
/* Fancy buttons */
.fancybutton {
padding: 5px 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 89%)), to( hsl(210, 54%, 79%)));
background: -moz-linear-gradient(top, hsl(210, 54%, 89%), hsl(210, 54%, 79%));
background-color: #ADC9E6;
border: 1px solid #5E96CF;
border-radius: 7px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
color: #2E6399;
text-shadow: 0px 1px 0px hsla(0, 0%, 100%, .7);
-webkit-box-shadow: inset 0px 1px 0px hsla(0, 0%, 100%, .8);
-moz-box-shadow: inset 0px 1px 0px hsla(0,0%, 100%, .8);
box-shadow: inset 0px 1px 0px hsla(0,0%,100%,.8);
text-decoration: none;
font-weight: bold;
}
.fancybutton:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 54%, 93%)), to( hsl(210, 54%, 89%)));
background:-moz-linear-gradient(top, hsl(210, 54%, 93%), hsl(210, 54%, 89%));
background-color: #D4E3F2;
}
.fancybutton:focus, .fancybutton:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, to( hsl(210, 54%, 89%)), from( hsl(210, 54%, 79%)));
background: -moz-linear-gradient(top, hsl(210, 54%, 79%), hsl(210, 54%, 89%));
background-color: #D4E3F2;
-webkit-box-shadow: inset 0px -1px 0px hsla(0,0%,100%,.7);
-moz-box-shadow: inset 0px -1px 0px hsla(0,0%,100%, .7);
box-shadow: inset 0px -1px 0px hsla(0,0%, 100%, .7);
}
.fancybutton.disabled,
.fancybutton.disabled:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( hsl(210, 24%, 93%)), to( hsl(210, 24%, 89%)));
background:-moz-linear-gradient(top, hsl(210, 24%, 93%), hsl(210, 24%, 89%));
background-color: #D4E3F2;
border-color: #999;
color: #999;
}
/* header / menus */
.hover a:hover { text-decoration: underline }
.selected, .choice.primary { font-weight: bold; }
.flat-list {list-style-type: none; display: inline;}
.flat-list li, .flat-list form {display: inline; white-space: nowrap; }
.flat-list li a.gold { color: #9a7d2e; font-weight: bold; }
.flat-list li.selected a { color: orangered; }
.link .flat-list { display: block; padding: 1px 0; }
.link.compressed .flat-list { display: inline-block; padding: 0 0 1px 0; }
ul.flat-vert {text-align: left;}
.flat-vert .separator { margin: 0 }
.flat-vert.title {
font-family:arial,verdana,helvetica,sans-serif;
color: #777;
font-size: 18px;
font-weight: normal;
margin-bottom: 5px;
}
.separator { color: gray; margin: 0px .7ex 0px .7ex; cursor: default; }
.pref-lang { font-weight: bold; }
.pref { font-weight: bold; }
#jumpToContent { position: absolute; left: 135px; top: 25px; font-weight: bold; margin-left: -1000px;}
#jumpToContent:focus { margin-left: 0 !important; }
#header {
border-bottom: 1px solid #5f99cf;
position: relative;
background-color: #cee3f8;
z-index: 99;
}
#header-img {margin-top: 2px; margin-right: 5px;}
#header-img.default-header {
text-indent: -9999px;
background-image: url(../reddit.com.header.png); /* SPRITE */
height: 40px;
width: 120px;
display: inline-block;
vertical-align: bottom;
margin-bottom: 3px;
}
#header-top {
position: absolute;
right: 5px;
}
#header-bottom-left {
font-size: larger;
}
#header-bottom-right {
position: absolute;
right: 0px;
bottom: 0px;
background-color: #EFF7FF;
padding: 4px;
line-height: 12px;
border-top-left-radius: 7px;
}
#mail {
position: relative;
top: 2px;
display: inline-block;
text-indent: -9999px;
overflow: hidden;
width: 15px;
height: 10px;
}
#mail.havemail {
background-image: url(../mail.png); /* SPRITE */
}
#mail.nohavemail {
background-image: url(../mailgray.png); /* SPRITE */
}
.message-count {
background-color: #FF7500;
color: #FFF;
font-size: 8px;
font-weight: bold;
padding: 0px 3px;
margin-left: 3px;
border-radius: 2px;
display: inline-block;
}
#modmail {
position: relative;
top: -2px;
display: inline-block;
text-indent: -9999px;
overflow: hidden;
width: 16px;
height: 16px;
margin-bottom: -6px;
}
#modmail.havemail {
background-image: url(../modmail.png); /* SPRITE */
}
#modmail.nohavemail {
background-image: url(../modmailgray.png); /* SPRITE */
}
.user {color: gray;}
.user .userkarma {
font-weight: bold;
}
.beta-hint {
position: absolute;
cursor: inherit;
height: 24px;
opacity: 0.8;
&:hover {
opacity: 1;
}
a {
position: absolute;
text-indent: 24px;
white-space: nowrap;
overflow: hidden;
margin-left: -24px;
display: inline-block;
width: 20px;
height: 13px;
background: transparent data-uri('image/svg+xml;charset=UTF-8', '../flask.svg') center left no-repeat;
background-size: contain;
}
}
.pagename {
font-weight: bold;
margin-right: 1ex;
font-variant: small-caps;
font-size: 1.2em;
vertical-align: bottom;
}
.pagename a {color: black; }
.redditname { }
.newpagelink {
padding: 3px 5px;
background-color: #ff9;
}
.dropdown {
cursor: default;
display: inline;
position: relative;
}
.drop-choices.inuse { display: block; }
.drop-choices {
position: absolute;
left: 0px; /* top gets set in js */
border: 1px solid gray;
z-index: 100;
background-color: white;
white-space: nowrap;
line-height: normal;
margin-top: 1px;
display: none;
}
.drop-choices a.choice {
cursor: pointer;
padding: 2px 3px 1px 3px;
display: block;
}
.drop-choices a.choice:hover {
background-color: #c7def7;
}
.drop-choices a.choice.selected {
display: none;
}
.dropdown.lightdrop .selected {
position: relative;
background: none no-repeat scroll center right;
background-image: url(../droparrowgray.gif);
padding-right: 21px;
text-decoration: underline;
color: gray;
}
.drop-choices.lightdrop {
margin-top: 2px;
}
/*tab drop*/
.dropdown.tabdrop .selected {
position: relative;
background: white none no-repeat scroll center right;
background-image: url(../droparrowgray.gif);
padding: 2px 21px 1px 5px;
margin-left: 3px;
border: 1px solid #5f99cf;
border-bottom: none;
color: orangered;
}
.dropdown.tabdrop .selected.title {
background-color: #eff7ff;
color: #369;
padding-bottom: 0;
border:none;
}
.drop-choices.tabdrop {margin-top: 2px;}
.dropdown-title.tabdrop { display: none }
.drop-choices .choice.hidden {
display: none;
}
.tabmenu {
list-style-type: none;
white-space: nowrap;
display: inline-block;
margin-top: 5px;
vertical-align: bottom;
}
.tabmenu li {
display: inline;
font-weight: bold;
margin: 0px 3px;
}
.tabmenu li a {
padding: 2px 6px 0 6px;
background-color: #eff7ff;
}
.tabmenu li.selected a{
color: orangered;
background-color: white;
border: 1px solid #5f99cf;
border-bottom: 1px solid white;
z-index: 100;
}
.tabpane-content { border: 1px solid #5f99cf; padding: 4px 4px 4px 4px; }
.content {
z-index: 1;
margin: 7px 5px 0px 5px;
}
.content .spacer { margin-bottom: 5px }
.state-button { display:inline }
/* side box menus */
.side {
float: right;
background-color: white;
margin: 0px 5px 0 5px;
width: 300px;
}
.side .spacer {
margin: 7px 0 12px 0;
}
.side .side-message {
background: lighten(@infobar-legacy-color, 10%) no-repeat 10px 10px;
border: 1px solid darken(@infobar-legacy-color, 20%);
border-radius: 2px;
padding: 10px;
line-height: 1.75em;
&:before {
content: '';
display: inline-block;
float: left;
background-image: url(../icon-info.png); /* SPRITE */
width: 16px;
height: 16px;
margin-right: 7px;
}
p {
font-size: .9em;
margin: 0;
strong {
display: block;
font-weight: normal;
font-size: 1.25em;
}
}
p + p {
margin-top: .25em;
}
&.gold {
font-family: serif;
border: 1px solid lighten(#c4b487, 10%);
box-shadow: 0 0 10px lighten(#dad0b3, 10%) inset;
border-radius: 0;
&:before {
background-image: url(../gold-coin.png); /* SPRITE */
width: 13px;
height: 14px;
margin-top: 1px;
}
}
}
.morelink {
display:block;
text-align: center;
position: relative;
border: 1px solid #c4dbf1;
background: white none repeat-x scroll center left;
background-image: url(../gradient-button.png); /* SPRITE stretch-x */
font-size:150%;
font-weight:bold;
letter-spacing:-1px;
line-height: 29px;
height: 29px;
}
.morelink:hover, .mlh {
border-color: #879eb4;
background-image: url(../gradient-button-hover.png); /* SPRITE stretch-x */
}
.morelink a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
color:#369;
}
.morelink:hover a {
color:white;
}
.morelink .nub {
position: absolute;
top: -1px;
right: -1px;
height: 31px;
width: 24px;
background: white none no-repeat scroll center left;
background-image: url(../gradient-nub.png); /* SPRITE */
}
.morelink:hover .nub, .mlhn {
background-image: url(../gradient-nub-hover.png); /* SPRITE */
}
.disabled .morelink, .disabled .morelink:hover {
background-image: url(../gradient-button-gray.png); /* SPRITE stretch-x */
border-color: #dadada;
}
.disabled .morelink a {
cursor: default;
color: #aaa;
}
.disabled .morelink .nub, .disabled .morelink:hover .nub {
background-image: url(../gradient-nub-gray.png); /* SPRITE */
}
/* raised box */
.raisedbox {
padding: 5px;
background: #E0E0E0;
border: 1px solid gray;
}
.raisedbox h4 { margin-bottom: 3px }
.raisedbox li {margin-bottom: 2px;}
.sidebox .spacer {
position: relative;
margin-top: 10px;
padding: 5px 0 0 44px;
min-height: 41px;
background: white none no-repeat scroll top left;
}
.sidebox .spacer.no-icon {
padding: 0;
min-height: 0;
}
.sidebox .spacer a {
position: absolute;
top: 0; left: 0px;
display: block;
height: 40px;
width: 40px;
}
.sidebox.create .spacer a {
background-image: url(../create-a-reddit.png); /* SPRITE */
background-repeat:no-repeat;
}
.sidebox.gold .spacer a {
background-image: url(../reddit_gold-40.png); /* SPRITE */
background-repeat:no-repeat;
}
.sidebox.gold .morelink {
border:none;
background-color:transparent;
background-image: url(../goldmorelink.png);
background-position: 0 0;
background-repeat:no-repeat;
height:31px;
}
.sidebox.gold .morelink a, .sidebox.gold .morelink a:visited {
color:#9a7d2e;
}
.sidebox.gold .morelink:hover {
background-position: 0 -31px;
}
.sidebox.gold .morelink:hover a {
color:#ffffff;
margin-top:1px;
}
.sidebox.gold .morelink .nub {
display: none;
}
.submit.mod-override .morelink {
a:after {
background-image: url("../shield.png");
content: " ";
position: absolute;
height: 16px;
width: 16px;
margin: 7px;
}
&:hover a:after {
opacity: 0.5;
}
}
.sidebox .subtitle {
margin-left: 10px;
color: dimgray;
font-size: 110%;
}
.account-activity-box {
text-align: center;
}
#account-activity table {
margin: 2em 0 0 2em;
width: 45em;
font-size: larger;
}
#account-activity th {
font-weight: bold;
}
#account-activity td {
padding: .5em 0;
}
.infotable { margin-top: 5px; margin-bottom: 10px; }
.infotable .small { font-size: smaller; }
.infotable td { padding-right: 1em; }
.infotable a:hover { text-decoration: underline }
.infotable .state-button a { background-color: #F0F0F0; color: gray; }
.infotable .bold { font-weight: bold; }
.infotable .invalid-user { background-color: pink}
.infotable .organic-vote { border: 1px solid green; }
/* used on profile pages */
.profile-attr {}
.profile-attr .label {font-weight: bold; }
.profile-attr .value {color: #404040;
margin-right: 5px; }
.profile-attr .md {
margin-left: 10px;
margin-top: 5px;
border-color: #B2B2B2 #D0D0D0 #D0D0D0 #B2B2B2;
border-style: solid;
border-width: 1px;
padding: 10px; }
.profile-attr .md ul {
float: none;
list-style-type: disc;
margin-left: 15px;
}
.profile-attr .md p { margin-top: 0px; }
.question { color: red; }
.question .yes { margin-left: 5px; margin-right: 3px; }
.question .no { margin: 0px 3px 0px 3px; }
/* thing rendering */
.arrow {
margin: 2px 0px 0px 0px;
width: 100%;
height: 14px;
display: block;
cursor: pointer;
background-position: center center;
background-repeat: no-repeat;
width: 15px;
margin-left: auto;
margin-right: auto;
outline: none;
}
.arrow.upmod {
background-image: url(../aupmod.gif); /* SPRITE */
}
.arrow.downmod {
background-image: url(../adownmod.gif); /* SPRITE */
}
.arrow.up {
background-image: url(../aupgray.gif); /* SPRITE */
}
.arrow.down {
background-image: url(../adowngray.gif); /* SPRITE */
}
.midcol {
float: left;
margin-right: 7px;
margin-left: 7px;
background: transparent;
overflow: hidden;
}
body > .content .link.compressed .midcol {
width: 15px;
margin-right: 5px;
}
.entry {
overflow: hidden;
margin-left: 3px;
opacity: 1;
}
.domain { color: #888; font-size:x-small; white-space: nowrap; }
.domain a {
color: #888;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 19em;
}
.domain a:hover { text-decoration: underline; max-width: none; }
.spam .domain,
.spam .domain a {
color: black;
}
.link-note {
background-color: white;
color: #ff4444;
font-size:x-small;
}
@moderator-color: #228822;
@admin-color: #ff0011;
.user-distinction {
color: #888;
font-size:x-small;
margin: 5px 5px 0px 5px;
}
.user-distinction .admin {
color: @admin-color;
text-decoration: none;
font-weight: bold;
}
.tagline { color:#888; font-size:x-small; }
.tagline a {color: #369; text-decoration: none; }
.tagline .friend { color: orangered }
.tagline .submitter { color: #0055df }
.tagline .moderator, .green { color: @moderator-color }
.tagline .admin { color: @admin-color; }
.tagline .alum { color: #BE1337; }
.tagline a.author.admin { font-weight: bold }
.tagline a:hover { text-decoration: underline }
.tagline .edited-timestamp{ cursor: default }
.tagline .stickied-tagline { color: @moderator-color; }
.comment .tagline .stickied-tagline:before {
content: "- ";
}
.tagline .userattrs .cakeday {
display: inline-block;
text-indent: -9999px;
width: 11px;
height: 8px;
background-image: url(../cake.png); /* SPRITE */
vertical-align: middle;
}
a.author { margin-right: 0.5em; }
.tagline .subreddit {
.userattrs { margin-left: 0.5em; }
.admin-distinguish { color: @admin-color; }
.moderator-distinguish { color: @moderator-color; }
}
a.banned-user { color: red; }
.thing .parent {
.stamp,
.author {
margin-right: 0.5em;
}
}
.flair, .linkflairlabel {
display: inline-block;
margin-right: .5em;
padding: 0 2px;
background: #f5f5f5;
color: #555;
border: 1px solid #ddd;
border-radius: 2px;
}
.collapsed .flair { display: none; }
.flair input {
font-size: xx-small;
}
.linkflairlabel {
font-size: x-small;
max-width: 10em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link .flair {
font-size: x-small;
margin-top: -1px;
}
.flair-settings { margin-bottom: 16px; }
.flairlist .flair-jump {
margin-bottom: 1em;
}
.flairlist .flair-jump input[type="text"] { width:430px; }
.flair-jump button { font-size:100%; }
.flairlist.pretty-form { font-size:inherit; }
.flairlisthome, .flairlist .nextprev {
display: inline-block;
margin-top: 10px;
}
.flairlisthome { font-size: smaller; }
.flaircell, .flairlist .header {
display: inline-block;
text-align: center;
width: 30ex;
margin-right: 4ex;
}
.flair-entry { display: inline-block; }
.flaircell.narrow, .flairlist .header.narrow { width: 14ex; }
.flairsample-left { text-align: right !important; }
.flairsample-right { text-align: left !important; }
.flairrow .tagline {
display: inline-block;
margin-bottom: 8px;
margin-left: 6px;
text-align: left;
width: 36ex;
}
.flairlist .flaircell input[type="text"] { width: 28ex; }
.flairrow > form button { display: none; }
.flairrow .edited button { display: inline-block; }
.flairrow .flairdeletebtn { display: inline; }
.flairrow:hover .flairdeletebtn { opacity: 1.0; }
.reportform {
position: relative;
display: none;
max-width: 450px;
}
.reportform.active {
display: block;
}
.flairselector {
box-shadow: 4px 4px 4px #ccc;
font-size: x-small;
position: absolute;
width: 400px;
}
.flairselector img { margin: none; }
.flairselector h2 {
background: #cee3f8;
padding-bottom: 2px;
margin-bottom: 4px;
text-align: center;
}
.flairselector.drop-choices.active {
border: 1px solid gray;
display: block;
}
.flairselector .error { text-align: center; }
.flairselector ul {
display: inline-block;
max-width: 200px;
overflow: hidden;
vertical-align: top;
}
.flairselector .selected, .flairselector.active li {
display: block;
font-weight: normal;
text-decoration: none !important;
}
.flairselector li {
border: 1px solid white;
cursor: pointer;
display: block !important;
padding-left: 4px;
}
.flairselector li a {
color: #369 !important;
font-weight: normal !important;
}
.flairselector li:hover { background-color: #bbb; border: 1px solid #bbb; }
.flairselector li a:hover { text-decoration: none; }
.flairselector li.selected { border: dashed 1px black; }
.flairselector .title { font-size: x-small !important; }
.flairselector form {
border-top: solid 1px gray;
clear: both;
display: block;
padding-top: 4px;
text-align: center;
> div {
margin: 2px 0;
}
button {
margin-left: 5px;
}
}
.flairoptionpane {
margin-bottom: 4px;
max-height: 200px;
overflow: auto;
text-align: center;
}
.flairselector .customizer { display: inline-block; }
.flairselector .customizer input { display: none; }
.flairselector .customizer button { display: inline !important; }
.flairselector .flairremove { display: none; }
.media-button .option { color: red; }
.media-button .option.active {
background: none no-repeat scroll right center;
background-image: url(../reddit-button-play.png); /* SPRITE */
padding-right: 15px;
color: #336699;
}
.embededmedia { margin-top: 5px; margin-left: 60px; }
.thing .title {
color: blue;
outline: none;
margin-right: .4em;
padding: 0px;
overflow: hidden;
}
.thing .title:visited, .thing.visited .title { color: #551a8b }
.thing.stickied.link a.title {
font-weight: bold;
color: @moderator-color;
}
body.with-listing-chooser.explore-page #header .pagename {
position: static;
}
.explore-header {
font-weight: bold;
margin-bottom: 7px;
padding: 5px 0;
#explore-settings {
input {
margin-left: 5px;
}
button {
color: #333;
font-weight: bold;
line-height: 10px;
margin-left: 8px;
}
}
.explore-title {
font-size: 1.3em;
}
}
.explore-item {
margin-bottom: 1em;
.explore-label {
border-radius: 2px;
display: inline-block;
margin: 0 5px 1px 0;
padding: 1px 2px 2px;
}
.explore-label-type, .explore-label-link {
padding: 0 5px;
}
.explore-sr-details {
color: #777;
display: inline-block;
font-size: x-small;
font-weight: normal;
margin-left: 3px;
}
.explore-feedback {
display: inline-block;
.fancy-toggle-button .add, .fancy-toggle-button .remove {
background-color: transparent;
background-image: none;
border: none;
color: #aaa;
border: 1px solid #ccc;
border-radius: 2px;
margin-left: 10px;
padding-top: 0;
.option {
line-height: 7px;
}
&:hover {
color: white;
border: 1px solid #444;
}
}
.fancy-toggle-button .add {
&:hover {
background-image: url(../bg-button-add.png); /* SPRITE stretch-x */
}
}
.fancy-toggle-button .remove {
&:hover {
background-image: url(../bg-button-remove.png); /* SPRITE stretch-x */
}
}
.subscribe-button {
display: inline-block;
margin: 0 4px 0 0;
}
}
.explore-feedback-dismiss {
cursor: pointer;
display: inline-block;
text-indent: -9999px;
width: 9px;
height: 9px;
background-image: url(../close-small.png); /* SPRITE */
background-repeat: no-repeat;
opacity: .3;
margin-left: 4px;
vertical-align: middle;
border: 3px solid transparent;
&:hover {
opacity: 1;
}
}
.explore-sr {
display: inline-block;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 3px;
padding: 2px 4px;
line-height: 13px;
height: 18px;
}
.midcol {
display: none;
}
.rank {
display: none;
}
}
.explore-comment {
.explore-label {
background-color: #cee3f8;
border: solid thin #5f99cf;
}
.tagline, .buttons, .thumbnail, .expando-button {
display: none;
}
.comment {
border-left: solid 2px #eee;
color: #888;
margin: -3px 0 3px 5px;
max-height: 100px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
.md {
font-size: x-small;
padding-bottom: 2px;
p {
margin: 5px;
}
}
}
/* make long comment boxes fade to white instead of cutting off mid-line */
.comment-fade {
background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
bottom: 0;
border: none;
height: 10px;
position: absolute;
width: 100%;
}
.comment-link {
color: #888;
display: inline-block;
font-weight: bold;
padding: 0 0 8px 5px;
}
}
.explore-page.res-nightmode .comment-fade {
display: none;
}
.explore-hot .explore-label {
background-color: #fff088;
border: solid thin #c4b487;
}
.explore-rising .explore-label {
background-color: #d6fbcb;
border: solid thin #485;
}
.explore-discovery .explore-label {
background-color: #dedede;
border: solid thin #aaa;
}
.explore-subscribe-bubble {
margin-left: 22px;
}
.sitetable { list-style-type: none; }
.ajaxhook { position: absolute; top: -1000px; left: 0px; }
.nextprev, .next-suggestions {
color: gray;
font-size: larger;
margin-top: 10px;
a {
padding: 1px 4px;
background: #eee;
border: 1px solid #ddd;
border-radius: 3px;
font-weight: bold;
}
a:hover {
background: #f0f0f0;
border: 1px solid #82A6C9;
}
a:active {
background: #e4e4e4;
}
.separator {
margin: 0;
margin-left: .5em;
padding-left: .5em;
border-left: 1px solid #ccc;
}
}
.next-suggestions {
margin-left: 0.75em;
a {
background: none;
font-weight: normal;
margin-left: .5em;
}
}
.next-suggestions .mark-all-read-container .throbber {
position: absolute;
margin-left: 5px;
margin-top: -2px;
padding-left: 22px;
min-width: 18px;
width: auto;
font-size: 10px;
line-height: 16px;
}
/* corner help */
.help a.help {
color: #808080;
text-decoration: underline;
}
.help.help-cover {
position: relative;
background-color: #F8F8F8;
border: 1px solid gray;
display:none;
padding: 5px 10px 10px 10px;
overflow:hidden;
}
.help p, .help form { margin: 5px; font-size:110%; }
.help form { display: inline; }
.help-hoverable {
cursor: help;
}
.hover-bubble {
display: none;
position: absolute;
background: white;
color: #333;
border: 1px solid gray;
padding: 3px;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
z-index: 100;
&:before, &:after {
position: absolute;
display: block;
content: '';
}
&.anchor-top {
&:before, &:after {
right: 8px;
border: 9px solid transparent;
}
&:before {
top: -19px;
border-bottom-color: gray;
}
&:after {
top: -18px;
border-bottom-color: white;
}
}
&.anchor-top-left {
&:before, &:after {
left: 8px;
border: 9px solid transparent;
}
&:before {
top: -19px;
border-bottom-color: gray;
}
&:after {
top: -18px;
border-bottom-color: white;
}
}
&.anchor-top-centered {
&:before, &:after {
left: 50%;
margin-left: -9px;
border: 9px solid transparent;
}
&:before {
top: -19px;
border-bottom-color: gray;
}
&:after {
top: -18px;
border-bottom-color: white;
}
}
&.anchor-right, &.anchor-left {
&:before, &:after {
top: 8px;
border: 9px solid transparent;
}
}
&.anchor-right {
&:before {
right: -19px;
border-left-color: gray;
}
&:after {
right: -18px;
border-left-color: white;
}
}
&.anchor-left {
&:before {
left: -19px;
border-right-color: gray;
}
&:after {
left: -18px;
border-right-color: white;
}
}
}
.help-bubble {
width: 35em;
p, form {
margin: .5em;
}
a {
font-weight: bold;
}
a:hover {
text-decoration: underline
}
}
.hover-bubble.multi-selector {
@arrow-offset: 40px;
margin-top: -7px - @arrow-offset;
min-width: 130px;
min-height: @arrow-offset;
padding: 8px 0;
.no-select;
&:before, &:after {
top: 8px + @arrow-offset;
}
strong, a.sr {
display: block;
margin: 3px 0;
text-align: center;
}
strong {
font-size: 1.05em;
font-weight: bold;
color: #333;
}
.throbber {
position: absolute;
top: 10px;
right: 8px;
}
.multi-list {
margin-top: 5px;
}
label {
font-size: 1.25em;
display: block;
padding: 5px 12px;
&:hover {
background: #eee;
}
input[type="checkbox"] {
margin-top: 0;
margin-right: 5px;
vertical-align: middle;
}
a {
float: right;
margin-left: 7px;
width: 12px;
height: 12px;
line-height: 12px;
background: white;
border: 1px solid lighten(#369, 20%);
border-radius: 2px;
text-align: center;
opacity: .65;
&:hover {
opacity: 1;
}
}
}
.create-multi {
input[type="text"] {
.light-text-input;
}
}
}
.infotext {
border: 1px solid #369;
background-color: #EFF7FF;
-webkit-box-shadow: inset 0px 1px 0px hsla(0,0%,100%,.8), 0px 1px 0px hsla(0,0%,100%,.6);
-moz-box-shadow: inset 0px 1px 0px hsla(0,0%,100%,.8), 0px 1px 0px hsla(0,0%,100%,.6);
box-shadow: inset 0px 1px 0px hsla(0,0%,100%,.8), 0px 1px 0px hsla(0,0%,100%,.6);
}
.infotext p {
font-size: small;
margin: 5px;
}
.wikiaction-revisions::before {
background-image: url(../report.png); /* SPRITE */
}
.wikiaction-pages::before {
background-image: url(../page_white_copy.png); /* SPRITE */
}
/* organic listing */
@min-uncompressed-height: 82px;
@min-compressed-height: 51px;
.organic-listing {
border: solid 1px gray;
padding: 0;
overflow: hidden;
position: relative;
margin-bottom: 7px;
&.loading {
display: none;
}
.link {
background-color: #F8F8F8;
padding-top: 5px;
padding-bottom: 5px;
// subtract padding from min heights
min-height: @min-uncompressed-height - 10px;
}
body.compressed-display & .link {
padding-top: 7px;
padding-bottom: 7px;
min-height: @min-compressed-height - 14px;
}
}
.organic-listing.show-placeholder.loading {
display: block;
height: @min-uncompressed-height;
body.compressed-display & {
height: @min-compressed-height;
}
opacity: .5;
& .help, & .throbber {
display: none;
}
}
.organic-listing .link,
.organic-listing .link.compressed,
.organic-listing .link.promotedlink {
padding-right: 7em;
padding-left: 2px;
margin-bottom: 0px;
}
.organic-listing .nextprev {
margin: 0px;
position: absolute;
right: 0px;
top: 0px;
vertical-align: top;
z-index: 1;
}
.organic-listing .nextprev .arrow, .organic-listing .nextprev .throbber {
width: 21px;
height: 21px;
margin: 5px 5px 2px 0px;
}
.organic-listing .nextprev .throbber {
vertical-align: top;
background-position: center center;
}
.organic-listing .nextprev .arrow {
border: solid 1px #B3B3B3;
display: inline-block;
position: relative;
/* This is a really weird value, but it needs to be low to hide text without affecting layout in IE. */
text-indent: 50px;
}
.organic-listing .nextprev .arrow.prev {
background-image: url(../prev_organic.png); /* SPRITE */
}
.organic-listing .nextprev .arrow.next {
background-image: url(../next_organic.png); /* SPRITE */
}
.organic-listing .nextprev .arrow:hover {
cursor: pointer;
border: solid 1px #336699;
}
.organic-listing .nextprev .arrow:active {
top: 1px;
}
.organic-listing .help {
color: #336699;
margin: 0px 5px 5px 0;
position: absolute;
right: -1px;
bottom: 0px;
z-index: 1;
}
.link.promotedlink {
/*background-color: lightgreen; */
border: 1px solid gray;
padding: 5px 0 5px 3px;
overflow: hidden;
position: relative;
}
.link.promotedlink.unpaid { background-color: #FFC; }
.link.promotedlink.unseen { background-color: #FFC; }
.link.promotedlink.accepted { background-color: #9F9; }
.link.promotedlink.rejected { background-color: #FF9A9A; }
.link.promotedlink.accepted { background-color: #9F9; }
.link.promotedlink.pending { background-color: #BFC; }
.link.promotedlink.promoted { background-color: #EFF7FF; }
.link.promotedlink.finished { background-color: #DDD; }
.link.promotedlink.edited_live { background-color: #FFD59A; }
#promo-form + form #img-preview-container { display: none; }
.profile-page .link.promotedlink.saved {
background-color: white;
border: none;
.sponsored-tagline {
display: none;
}
}
.rejection-form textarea {
width: 40em;
height: 10em;
}
.promoted-list { font-size: larger; }
.promoted-list .unpromote-button { display: inline }
.promoted-list .unpromote-button a { color: gray; }
.help-cover.promoted {
background-color: #EFF7FF;
}
.organic-listing .promoted {
background-color: #EFF7FF;
border: none;
}
.organic-listing .sponsored-tagline {
right: 6.8em;
}
.sponsored-tagline {
color: #808080;
bottom: 0;
margin: 0 5px 5px 0;
position: absolute;
font-weight: bold;
right: 0;
}
.geotarget-notice {
margin: 5px 10px;
.md p {
font-size: smaller;
margin: 1px 0 0;
}
div:before {
content: "";
float: left;
height: 16px;
width: 20px;
background-repeat: no-repeat;
}
&.city div:before {
background-image: url(../map.png); /* SPRITE */
}
&.country div:before {
background-image: url(../world.png); /* SPRITE */
}
}
.promote-pixel {
position: absolute;
top: -1000px;
right: -1000px;
}
.organic-help-button { padding: 0 .5ex; }
.menuarea {
border-bottom: 1px dotted gray;
padding: 5px 10px;
margin: 5px;
overflow: hidden;
font-size: larger;
}
.menuarea .spacer {display: inline; margin-right: 15px}
.panestack-title {
margin: 10px 310px 0px 10px;
padding-bottom: 3px;
border-bottom: 1px dotted gray;
}
.panestack-title .title {
font-size: 16px;
font-weight: normal;
margin: 10px 0;
}
.panestack-title a.title-button {
font-size: 12px;
margin-left: 8px;
}
.panestack-title a.title-button.gold {
background-color: #fff088;
color: #6a4d00;
border: 1px solid #9a7d2e;
padding: 1px 5px;
border-radius: 3px;
}
.commentarea .menuarea {
border: none;
margin: 0 310px 10px 10px;
padding: 0;
color: gray;
form.toggle { margin-left: 8px; }
}
.commentarea .menuarea .toggle {
display: inline-block;
}
.commentarea .menuarea .toggle a {
color: gray;
font-weight: bold;
font-size: x-small;
}
.commentarea > .usertext {
margin: 0 0 10px 10px;
overflow: auto;
}
.infobar.red {
padding: 5px;
background-color: #FFAEAE;
border-color: red;
}
.infobar.red img {
float: left;
margin-right: 5px;
}
.infobar.mellow {
background-color: #eff8ff;
border: 1px solid #93abc2;
}
.infobar.gold {
background-color: #fffdcc;
border: 1px solid #e1b000;
color: #9a7d2e;
}
.content .infobar.gold:before {
margin-top: 5px;
margin-right: 7px;
}
.infobar.welcome {
display: none;
background: url(../welcome-lines.png) top center;
border: 1px solid #ff8b60;
padding: 0;
height: 80px;
overflow: hidden;
margin-right: 0; /* work around safari 5 width issue */
white-space: nowrap;
}
.infobar.welcome h1, .infobar.welcome h2 {
display: inline-block;
font-weight: normal;
margin: 0;
}
.infobar.welcome h1 {
margin-top: 14px;
margin-left: 2%;
padding: 7px 16px;
font-size: 16px;
background: white;
border-bottom: 2px solid #5f99cf;
}
.infobar.welcome .button-row {
position: relative;
top: -8px;
margin-left: 10%;
}
.infobar.welcome h2 {
padding: 4px 14px;
padding-left: 38px;
background: white url(../welcome-upvote.png) 12px center no-repeat;
font-size: 13px;
color: #222;
border-bottom: 2px solid #ff4500;
}
.infobar.welcome a {
margin-left: 2%;
background: #e75018;
font-size: 11px;
font-weight: bold;
color: white;
padding: 5px 10px;
border-radius: 4px;
border-bottom: 2px solid #a73a11;
}
.infobar.welcome a:hover {
background: #f0571e;
border-bottom-color: #c74514;
}
.infobar.welcome a:active {
position: relative;
top: 1px;
background: #df531f;
border-bottom: 1px solid #a73a11;
}
.infobar.newsletterbar {
.box-sizing(border-box);
position: relative;
overflow: hidden;
min-height: 80px;
padding: 15px 20px 20px 25px;
border: none;
border-radius: 2px;
background-color: #30659B;
header {
float: left;
height: 45px;
width: 325px;
}
a.newsletter-close {
position: absolute;
right: 3px;
top: 0;
font-size: 11px;
color: #CCC;
}
form {
margin: 2px 150px 0 340px;
max-width: 400px;
min-width: 150px;
line-height: 45px;
white-space: nowrap;
}
.subscribe-thanks {
display: none;
}
&.success {
header {
padding-left: 65px;
&:before {
content: "";
color: #80d654;
font-weight: bold;
font-size: 60px;
position: absolute;
top: 0;
left: 15px;
}
}
.subscribe-callout {
display: none;
}
.subscribe-thanks {
display: block;
}
}
h1 {
margin: 0;
a:hover {
border-bottom: 1px dotted #999;
}
}
h2 {
color: white;
font-weight: normal;
font-size: 14px;
margin-top: 5px;
}
.c-form-group {
width: 100%;
}
.c-form-control-feedback-wrapper {
top: 5px;
}
button {
.button-size(@padding-base-vertical; @padding-base-horizontal; 12px; 20px; 3px);
margin-left: 10px;
}
@media screen and (max-width: @screen-md-min) {
header {
float: none;
}
form {
margin: 10px 0 0;
}
.c-form-group {
max-width: 50%;
}
}
}
.locationbar {
margin: 5px;
.md, .md p, .options {
color: #888888;
font-weight: bold;
font-size: 11px;
display: inline;
}
.options {
margin-left: 15px;
}
}
/*top link*/
a.star { text-decoration: none; color: #ff8b60 }
.odd { }
.even { }
/* buttons on main link style */
.entry .buttons li {
display: inline-block;
border: none;
padding-right: 4px;
line-height: 1.6em;
}
.entry .buttons li + li {
padding-left: 4px;
}
.entry .buttons li.stamp + li.stamp {
margin-left: 4px;
}
.entry .buttons li a {
color: #888;
font-weight: bold;
padding: 0 1px;
}
.entry .buttons li a.nonbutton {
color: #369;
font-weight: normal;
}
.entry .buttons a:hover {text-decoration: underline}
.entry .buttons .status-msg {
display: none;
margin-right: .5em;
}
/* links */
.toggle .error { font-size: x-small; }
.toggle .option { display: none; }
.toggle .option.active { display: inline; }
.thing .stub { display: none; }
.link.last-clicked { border: 1px dashed gray; overflow: hidden; }
.link { margin: 0; margin-bottom: 8px; padding-left: 3px; }
.link .score {text-align: center; color: #c6c6c6;}
.link .title {font-size:medium; font-weight: normal; margin-bottom: 1px;}
.link .child h3 {
margin: 15px;
text-transform: none;
font-size: medium;
}
.rank { overflow: hidden }
.profile-page .link .rank, .single-page .link .rank { display: none; }
.link .midcol {font-weight: bold; font-size: small;}
.link .score.likes { color: #FF8B60; }
.link .score.dislikes { color: #9494FF; }
.link .rank {
float:left;
margin-top: 15px;
color: #c6c6c6;
font-family: arial;
font-size: medium;
text-align: right;
}
.rank-spacer {
font-size: medium;
}
.midcol-spacer {
font-size: small;
}
.link.compressed { margin-bottom: 5px; }
.link.compressed .rank { margin-top: 10px; }
.link.compressed .title { margin: -2px 0 3px }
.link.compressed .score { color: #888888 }
.link.compressed .score-placeholder { height: 3px }
.link.compressed .subreddit { font-weight: bold }
.link.compressed .tagline { display: inline; margin-right: 12px }
.link.compressed .expando-button { display: none; }
/* display the right score based on whether they've voted */
.score.likes, .score.dislikes {display: none;}
.likes .score, .dislikes .score {display: none;}
.likes .score.likes {display: inline;}
.dislikes .score.dislikes {display: inline;}
.likes div.score.likes {display: block;}
.dislikes div.score.dislikes {display: block;}
.warm-entry .rank { color: #EDA179; }
.hot-entry .rank { color: #E47234; }
.cool-entry .rank { color: #A5ABFB; }
.cold-entry .rank { color: #4959F7; }
/* recently viewed links */
.gadget {
font-size: x-small;
.midcol {
width: 15px;
margin: 0;
}
.reddit-link-end {
clear: left;
padding-top: 10px;
}
.click-gadget {
font-size: small;
}
small {
color: gray;
}
.reddit-entry {
margin-left: 20px;
}
.right {
text-align: right;
}
.stamp:first-child {
margin-left: 0;
}
.score {
margin-left: 0.5em;
}
}
.quarantine-tool.noncollapsed {
.quarantine-info {
display: block;
}
}
.quarantine-tool.collapsed {
.quarantine-info {
display: none;
}
}
/* comments */
.comment, .content .details { margin-left: 10px; }
.comment.noncollapsed {
.numchildren {
display: none;
}
.usertext, .child, .buttons {
display: block;
}
.midcol {
visibility: visible;
}
}
body.show-controversial .comment.controversial > .entry .score:after {
content: '';
position: relative;
top: -2px;
}
.comment.collapsed {
padding-bottom: 10px;
line-height: 14px;
.numchildren {
display: inline;
}
.usertext, .child, .buttons {
display: none;
}
.midcol {
visibility: hidden;
height: 1px;
}
.tagline, .tagline a {
color: gray;
:not(.expand) {
font-style: italic;
}
}
&.collapsed-for-reason {
.collapsed-reason {
display: inline;
}
.score, .live-timestamp {
display: none;
}
}
}
.admin_takedown {
background-color: #F7F7F7;
color: #888888;
padding: 3px;
a:link {
color: #326699;
}
}
.comment {
.midcol {
margin-left: 0px;
width: 15px;
}
.title {
font-size: small;
margin-top: 10px;
}
.author {
font-weight: bold;
}
.expand {
margin-right: 3px;
padding: 1px;
}
.child, .showreplies {
margin-top: 10px;
margin-left: 15px;
border-left: 1px dotted #DDF;
}
&.collapsed-for-reason {
.collapsed-reason {
display: none;
}
}
}
.comment.deleted > .midcol {
visibility: hidden;
}
.comment .showreplies {
display: block;
margin-top: 7px;
margin-bottom: 15px;
padding: 5px;
}
textarea.gray { color: gray; }
.deepthread:after {
background-image: url(../continue-thread.png); /* SPRITE */
content: " ";
display: inline-block;
width: 25px;
height: 9px;
margin: 5px 0 0 5px;
}
.deepthread a { font-size: larger; color: #336699 }
.deepthread a:hover { text-decoration: underline}
.morecomments {font-size: larger}
.morecomments a { color: #336699 }
.morecomments a:hover { text-decoration: underline}
.morecomments .gray {font-weight: normal; color: gray}
.expand-btn {
font-size: smaller;
margin: 0px 5px;
margin-top: 4px;
display: inline-block;
}
.message.noncollapsed {
.numchildren {
display: none;
}
.child, .buttons, .md {
display: block;
}
.midcol {
visibility: visible;
}
}
.message.collapsed {
> .entry {
.buttons, .md {
display: none;
}
}
&.threaded {
.tagline, .tagline a {
color: gray;
:not(.expand) {
font-style: italic;
}
}
.child {
display: none;
}
}
.midcol {
visibility: hidden;
height: 20px;
}
}
.message {
margin: 10px 10px 20px 5px;
padding-left: 5px;
margin:10px 10px 20px 5px;
padding:7px;
}
.message .collapsed .head {
color: #888888;
font-style: italic;
}
.message .tagline {
color: #485;
}
.message.message-parent > .entry,
.message.message-reply > .entry {
color: #485;
.md,
blockquote,
del {
color: inherit;
}
}
.message.recipient > .entry {
color: black;
}
.message.message-reply.recipient > .entry .head,
.message.message-parent.recipient > .entry .head {
color: black;
font-weight: bold;
}
.message.color-bar {
border-left: 5px solid transparent;
}
.message {
.recipient a.author, .sender a.author, .subreddit {
font-weight: bold;
}
}
.message.new > .entry .head {
color:orangered; font-weight: bold;
}
.message.new > .entry{
background-color:#F7F7F7;
border:1px solid #E9E9E9;
padding: 6px;
}
.message.new .unread {
display: none;
}
.message.threaded .child {
margin-left: 20px;
border-left: 2px dashed #E7E7E7;
}
// message-reply and message-parent classes are only present in tree view
.message.message-reply, .message.message-parent {
&:not(.threaded) .entry {
margin-left: 10px;
border-left: 2px dashed #E7E7E7;
}
}
.message .child .message,
.message .child .usertext {
margin-top: 10px;
margin-left: 12px;
}
.message.was-comment .child .message,
.message.was-comment .child .usertext {
margin-top: 0px;
margin-left: 0px;
}
.message .expand {
margin-right: 3px;
display: none;
}
.message .entry {
margin-left: 0px;
}
.message.message-parent .expand {
display: inline;
}
/* threaded message styles: remove padding */
.message.message-parent .child .message,
.message.message-reply .child .message
{
margin: 0;
padding: 0;
}
.message.message-parent .subject {
margin-bottom: 10px;
}
.message.message-parent .message .subject {
display: none;
}
.message.message-reply .subject {
display:none;
}
.message.message-reply .entry,
.message.message-parent .entry {
padding-left: 10px;
padding-bottom: 10px;
}
.message .buttons,
.message .md { margin-left: 15px; }
.message .entry .parent {
border: 1px solid #336699;
max-width: 60em;
margin: 3px 10px;
}
.message .subject .correspondent {
background-color:#EFF7FF;
border:1px solid #336699;
color:#336699;
display:inline-block;
margin-right:10px;
padding:2px 5px;
}
.message .subject .reddit .marker-dot {
border-radius: 50%;
width: 12px;
height: 12px;
float: left;
margin-top: 2px;
margin-right: 5px;
}
.message .subject .title {
font-weight: normal;
font-style: italic;
margin-left: 10px;
}
.message .parent-link {
margin-left: 12px;
padding: 0 2px;
font-weight: bold;
}
.message.was-comment .midcol { margin-left: 0px; }
.message.was-comment .buttons,
.message.was-comment .parent-link {
margin-left: 0px; }
.message.was-comment .md {
margin-left: 2px;
}
.message .subject { font-weight: bold; font-size: larger; }
.message.gold {
font-family: "Bitstream Charter", "Hoefler Text", "Palatino Linotype",
"Book Antiqua", Palatino, georgia, garamond, FreeSerif, serif;
background: url(../gold/tikkit-bg.png);
max-width: 80em;
text-align: center;
padding: 20px;
border-radius: 4px;
border: 1px solid #555;
.insignia {
float: left;
margin: 6em 20px 0 20px;
}
.subject {
font-size: 2.6em;
line-height: 1.5em;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.8);
}
.tagline, .correspondent, .expand-btn, .unread-button, .block-button, .report-button, ul.buttons li.first {
display: none;
}
.entry {
margin: 0;
border: 0;
}
.md {
margin: 0;
margin-bottom: 10px;
padding: 15px;
max-width: 100%;
text-shadow: 0 0 2px #fff;
border: 0 dashed #000;
border-width: 1px 0;
}
.md blockquote {
border: 0;
font-size: 0.7em;
font-style: italic;
}
.md p {
font-size: 1.2em;
line-height: 1.4em;
}
.usertext-edit {
margin: 0 auto;
}
.usertext-buttons {
text-align: left;
}
ul.buttons li a {
font-size: 2em;
text-shadow: 0 0 3px #fff;
color: #7a5d0e;
}
ul.buttons, ul.buttons li {
margin: 0;
padding: 0;
}
&.new > .entry {
background-color: transparent;
border: 0;
padding: 0;
}
}
.message.gold-auto {
blockquote {
background-color: #fafafa;
border: 0;
padding: 4px;
margin-left: 0;
margin-top: 1em;
font-style: italic;
font-size: 0.8em;
color: #808080;
p { margin: 2px; }
strong { font-style: inherit; }
}
}
.clippy img {
float: left;
}
.clippy-bubble {
background-color:#fffdd7;
border: solid black 1px;
width: 350px;
border-radius: 5px;
margin-left: 5px;
margin-bottom: 15px;
padding: 7px;
float: left;
}
.clippy-headline {
font-weight:bold;
margin-bottom: 0.5em;
}
.clippy-bubble ul {
list-style-type: disc;
list-style-image: url(../clippy-bullet.png);
padding-left: 15px;
}
.clippy-bubble li {
margin-top: 0.5em;
}
.subreddit { margin-bottom: 10px; }
.subreddit p { margin-top: 0px; margin-bottom: 1px; }
.subreddit .description {font-size: small; max-width: 60em;}
.subreddit .key {display: block;}
.subreddit .title { font-size: medium; margin-right: 5px; }
.subreddit .midcol { margin-right: 5px; margin-top: 5px; text-align: right; width: 12em !important; }
.fancy-toggle-button {
display: block;
margin-bottom: 5px;
}
.fancy-toggle-button .active {
border: 1px solid #444;
padding: 1px 6px;
background: white none repeat-x scroll center left;
color: white;
font-size: 10px;
font-weight: bold;
line-height: 20px;
border-radius: 3px;
}
.fancy-toggle-button .remove {
background-image: url(../bg-button-remove.png); /* SPRITE stretch-x */
}
.fancy-toggle-button .add {
background-image: url(../bg-button-add.png); /* SPRITE stretch-x */
}
.fancy-toggle-button .banned {
background-color: #666;
padding: 1px 1.9em;
}
.commentbody.border { background-color: #ffc; padding-left: 5px}
.commentbody.grayed {
color: gray;
background-color: #E0E0E0;
padding-left: 5px;
}
.fixedwidth { float: left; width: 100px; height: 0px; }
.clearleft { clear: left; height: 0px; }
.clear { clear: both; }
.sharetable.preftable {margin-left: 20px; }
.sharetable.preftable th { padding-bottom: 5px; padding-top: 5px; }
.sharetable.preftable button { margin-top: 10px }
.preftable.widget-preview { font-size:smaller; }
.preftable.widget-preview input[type="text"] { width: 150px; }
.preftable #css-options input[type="text"] { margin-left: 0px; width: 6em; }
.share-summary { width: 95%; margin-top: 10px; }
.share-summary .head td { width: 50%; font-size: large; text-align: center }
.share-summary td { vertical-align: top;}
.share-summary > tbody > tr > td {
padding-left: 10px;
padding-bottom: 10px;
}
.share-summary th { padding: 5px; border-bottom: 1px solid #000; }
.sponsored .entry { margin-right: 20px;}
.sponsored .titlerow { background: #fcfcfc;
padding: 10px;
border-top: #BCBCBC solid 1px;
border-left: #BCBCBC solid 1px;
border-bottom: #E0E0E0 solid 1px;
border-right: #E0E0E0 solid 1px;
}
/* footer */
.footer-parent {
font-size: larger;
padding-top: 40px;
clear: both;
text-align: center;
}
.footer {
color: gray;
padding: 5px;
margin: 15px auto;
border:1px solid #F0F0F0;
display: flex;
display: -webkit-flex;
max-width: 600px;
}
.footer .col {
display: inline-block;
vertical-align: top;
-webkit-flex: 0 0 25%;
flex: 0 0 25%;
margin: 10px 0;
padding: 0 15px;
border-left: 1px solid #E0E0E0;
box-sizing: border-box;
}
.footer .col:first-child {border: none;}
.notes-button {
margin-top: 3px;
}
.notes-status {
font-size: larger;
}
.load0 { background-color: #FFFFFF; } /* white */
.load1 { background-color: #f0f5FF; } /* pale blue */
.load2 { background-color: #E2ECFF; } /* blue */
.load3 { background-color: #d6f5cb; } /* pale green */
.load4 { background-color: #CAFF98; } /* green */
.load5 { background-color: #e4f484; } /* yellowgreen */
.load6 { background-color: #FFEA71; } /* orange */
.load7 { background-color: #ffdb81; } /* orangerose */
.load8 { background-color: #FF9191; } /* pink */
.load9 { background-color: #FF0000; color: #FFFFFF } /* red */
/* login form */
.orangered { color: orangered; }
.logout { display: inline; }
.login-form-side {
border: 1px solid gray;
}
.login-form-side input[type=text],
.login-form-side input[type=password] {
font-family: verdana; /* Override Chrome's defaults. */
font-size: 11px;
.box-sizing(border-box);
border: 1px solid #999;
width: 141px;
margin: 5px 0px 0px 5px;
top: 5px;
padding: 6px;
}
.login-form-side input[type=password] {
width: 142px;
}
.login-form-side #remember-me,
.login-form-side .submit {
margin: 4px;
}
.login-form-side .submit input[type=button] {
margin:1px;
}
.login-form-side #remember-me {
float: left;
line-height: 24px;
margin-left: 5px;
}
.login-form-side #remember-me * {
vertical-align:middle;
}
/*the checkbox*/
#rem-login-main {
position: static;
height: auto;
width: auto;
border: none;
margin-right: 5px;
margin-top: 0;
}
.login-form-side label {
padding: 2px 0 2px 0;
margin-right: 5px;
white-space: nowrap;
}
.login-form-side .recover-password {
margin-left: 1em;
}
.login-form-side .status { display:none; }
.login-form-side .submit {
float: right;
}
.login-form-side .submit *, .user-form .submit * {
vertical-align: middle;
}
.throbber {
display: none;
margin: 0 2px;
background: url(../throbber.gif) no-repeat;
width: 18px;
height: 18px;
}
.working .throbber { display: inline-block; }
.working {
[type="submit"] {
cursor: not-allowed;
.opacity(.65);
pointer-events: none;
}
}
.sr_style_toggle .throbber {
position: absolute;
margin-top: -2px;
margin-left: 4px;
}
.status { margin: 5px 0 0 5px; font-size: small;}
.error { color: red; font-size: small; }
.red { color:red }
.buygold { color: #9A7D2E; font-weight: bold; }
.line-through { text-decoration: line-through }
#noresults { margin-right: 310px; }
#ad-frame, #ad_main {
border: 0px;
overflow: hidden;
width: 300px;
height: 280px;
}
#ad_sponsorship {
border: 0px;
overflow: hidden;
width: 300px;
height: 100px;
}
/* newsletter standalone page */
body.newsletter {
background: #EEF7FF;
font-size: 12px;
}
.newsletter-box {
.box-shadow(0 3px 10px 4px rgba(0,0,0,0.1));
margin: 10% auto;
background-color: white;
width: 90%;
max-width: 600px;
border-radius: 4px;
padding: 40px;
h1 {
margin: 0;
min-height: 50px;
font-size: 15px;
}
.upvoted-weekly-logo {
display: block;
margin-top: 15px;
min-height: 53px;
background: transparent url(../upvoted-weekly-logo.svg) 0 0 no-repeat;
background-size: contain;
}
.subscribe-thanks {
display: none;
}
&.success {
&:before {
content: "";
display: block;
text-align: center;
color: #80d654;
font-weight: bold;
font-size: 60px;
line-height: 1;
}
.result-message {
display: block;
margin: 0 auto;
text-align: center;
}
.subscribe-callout {
display: none;
}
.subscribe-thanks {
display: block;
text-align: center;
margin-top: 25px;
}
form {
display: none;
}
}
.result-message {
margin-top: 21px;
line-height: 1.5;
font-size: 14px;
max-width: 400px;
color: @color-text-grey;
font-weight: normal;
}
form {
margin-top: 40px;
text-align: right;
}
.c-form-group {
width: 50%;
}
button {
.button-size(@padding-base-vertical; @padding-base-horizontal; 12px; 20px; 3px);
margin-left: 10px;
}
.faq-toggle {
position: absolute;
margin-top: -13px;
min-width: 100px;
font-size: 11px;
font-weight: bold;
color: #79a6d2;
&:after {
content: "";
display: inline-block;
height: 15px;
width: 15px;
text-align: center;
position: absolute;
}
&.active:after {
.transform(rotate(180deg));
}
}
.faq {
display: none;
h3 {
margin-top: 1.5em;
}
}
}
.upvoted-gradient {
position: fixed;
bottom: 0;
width: 100%;
height: 25%;
background: transparent url(../upvoted-arrow-bg.png);
z-index: -1;
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
.linear-gradient(#EEF7FF, rgba(255,255,255,0));
}
}
@media screen and (max-width: @screen-md-min) {
.newsletter-box {
position: static;
.transform(none);
margin: 10px auto;
padding: 15px;
max-width: 85%;
h1, p {
font-size: 13px;
}
.faq-toggle {
position: static;
display: block;
margin-top: 20px;
font-size: 13px;
}
}
.upvoted-gradient {
display: none;
}
}
/* search */
#searchmenu { margin: 10px 0 0px 0; padding: 2px 0 0 0;
border-bottom: 2px solid #369;
background-color: whitesmoke}
#searchmenu .searchlabel { background-color: white;
padding: 2px 15px 0px 0px;
font-weight: bold; color: #369 }
#searchmenu .searchtime {
font-weight: bold;
display: inline;
width: 305px;
}
#searchexpando {
display: none;
margin: 5px 0 0 0;
padding-top: 10px;
border-radius: 3px;
}
#searchexpando input, #searchexpando p {
margin-bottom: 10px;
}
#searchexpando dl {
margin: 10px 0;
}
#searchexpando dt {
margin: 0;
}
#previoussearch p {
margin: 5px 0;
}
#previoussearch label {
display: block;
margin: 5px 0;
}
#moresearchinfo {
display: none;
padding-top: 5px;
max-width: 300px;
border: 0 solid orange;
margin-top: -5px;
}
label + #moresearchinfo {
border-width: 1px 0 0 0;
margin-top: 0px;
}
#previoussearch #moresearchinfo {
border-color: gray;
margin: 5px 0;
}
#search_hidemore {
float: right;
margin-left: 5px;
}
.searchparams { margin: 5px 20px 5px 20px
}
.searchparams .labels {text-align: right;
margin-left: 10px; }
.searchpane {
margin: 5px 305px 5px 0px;
padding-left: 96px;
background: #E0E0E0 url(../search-large.png) 26px center no-repeat;
}
.search-summary {
float: right;
text-align: right;
margin: 6px 8px 0 0;
}
.search-summary .result-count {
font-weight: bold;
}
.searchfail {
color: #c00000;
font-size: larger;
line-height: 2em;
}
.searchfail a {
color: red;
text-decoration: underline;
}
#search {
/* Allow the search icon to be on the same line as the search box. */
white-space: nowrap;
}
#searchexpando, #moresearchinfo {
white-space: normal;
}
#search input[type=text] {
border: 1px solid gray;
font-size: 13px;
font-family: verdana; /* Override Chrome's defaults. */
width: 300px;
.box-sizing(border-box);
padding: 6px;
padding-right: 25px; /* 13px image + 6px right margin + 6px left margin */
padding-left: 9px;
vertical-align: middle;
}
#search input[type=submit] {
background-color: transparent;
background-image: url(../search.png); /* SPRITE */
background-repeat: no-repeat;
height: 13px;
width: 13px;
.box-sizing(border-box);
border: none;
margin: 0;
margin-left: -22px; /* 13px image + 6px margin + 3px visual adjustment */
vertical-align: middle;
}
#search input[type=submit]:hover {
background-image: url(../search-mouseover.png); /* SPRITE */
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#search input[type=submit] {
background-image: data-uri('../search-x2.png');
background-size: 13px 13px;
background-position: 0 0;
}
#search input[type=submit]:hover {
background-image: data-uri('../search-mouseover-x2.png');
background-position: 0 0;
}
}
/* login, register */
.legal {color: #808080; font-family: serif; font-size: small; margin-top: 20px; }
.legal a {text-decoration: underline}
.divide { border-right: 2px solid #D3D3D3; margin-right: -2px; }
.login-form-section {
position: relative;
float: left;
overflow: hidden;
padding-left: 2%;
padding-right: 2%;
&.register {
width: 56%;
}
&.login {
width: 36%;
}
}
.login-form-section > h3 {
margin-bottom: 0;
margin-top: 10px;
font-size: large;
font-weight: bold;
font-variant: small-caps;
color: #404040;
}
.login-form-section p {
text-align: left;
margin-bottom: 10px;
color: #606060;
margin-bottom: 20px;
}
.login-form-section.register .registration-info {
position: absolute;
left: 53%;
width: 40%;
min-width: 20em;
margin-top: 1.25em;
color: #777;
.md {
font-size: 1.1em;
li {
list-style-type: disc;
margin-bottom: .5em;
}
}
}
.user-form label {
display: block;
font-weight: bold;
color: #606060;
}
.user-form label.note {
font-weight: normal;
}
.user-form .error {
display: inline-block;
margin-top: 2px;
line-height: 16px;
color: inherit;
font-size: inherit;
}
/* Form-level errors. */
.user-form .error.field-ratelimit,
.user-form .error.field-vdelay {
display: block;
}
.user-form .remember {
display: inline;
margin-left: 2px;
text-transform: lowercase;
}
.user-form input[type=checkbox] {
vertical-align: bottom;
}
.user-form ul { margin: 7px; }
.user-form li { margin-top: 5px; }
.user-form p .btn { margin-top: 5px }
.user-form input.logtxt { width: 125px; }
.user-form input[type=text],
.user-form input[type=password],
.user-form input[type=email] {
width: 125px;
border: 1px solid #A0A0A0;
margin-top: 2px;
margin-bottom: 2px;
margin-right: 10px;
padding: 1px;
}
.user-form #captcha {
width: 250px;
}
.user-form .submit {
margin-top: 10px;
}
#passform h1 {margin-bottom: 0px}
#passform p {margin-bottom: 5px; font-size: small}
.register-form .name-entry * {
vertical-align: middle;
}
.notice-taken, .notice-available {
display: none;
line-height: 16px;
}
.register-form.name-taken .notice-taken, .register-form.name-available .notice-available {
display: inline-block;
margin-top: 2px;
}
.register-form .name-entry .throbber {
display: none;
margin-left: 5px;
}
.register-form.name-checking {
.name-entry .throbber {
display: inline-block;
margin-left: -1px;
margin-top: 2px;
}
}
.login-page {
#login {
margin-right: 300px;
}
@media (max-width: @screen-sm-min) {
#login {
margin-right: 0;
}
.side {
display: none;
}
}
}
#cover-msg {
line-height: normal;
margin: 0 0 50px;
}
#login {
.modal-title {
margin: 0 0 25px;
}
.c-alert {
display: none;
font-size: 11px;
}
@media (max-width: @screen-xs-min) {
.c-btn {
display: block;
width: 100%;
}
}
}
.login-disclaimer {
color: #6a6a6a;
}
.split-panel {
.clearfix();
margin-bottom: 49px;
.split-panel-section-responsive(@panel-break-point: @screen-sm-min;) {
float: none;
width: 100%;
&:first-child {
padding-right: 0;
}
&:last-child {
padding-left: 0;
}
&.split-panel-divider {
&:first-child {
border: 0;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 60px;
margin-bottom: 60px;
}
&:last-child {
border: 0;
border-top: 1px solid #e0e0e0;
padding-top: 60px;
margin-top: 60px;
}
}
@media (min-width: @panel-break-point) {
float: left;
width: 50%;
&:first-child {
padding-right: 60px;
}
&:last-child {
padding-left: 60px;
}
&.split-panel-divider {
&:first-child {
border: 0;
border-right: 1px solid #e0e0e0;
margin-bottom: 0;
padding-bottom: 0;
}
&:last-child {
border: 0;
border-left: 1px solid #e0e0e0;
margin-top: 0;
padding-top: 0;
}
}
}
}
.split-panel-section {
.box-sizing(border-box);
.split-panel-section-responsive();
.login-page & {
.split-panel-section-responsive(@screen-md-min);
}
}
}
.content > #login {
> .split-panel {
padding-left: 60px;
padding-right: 60px;
padding-top: 60px;
}
> p {
margin-left: 60px;
margin-right: 60px;
}
}
.popup h1 {
font-size: large;
font-weight: normal;
margin-left: 1em;
}
.popup h2 {
text-align: center;
font-size: small;
margin-top: 0px;
color: black;
font-weight: normal;
}
.usertable { margin-left: 10px;}
.usertable { font-size: larger }
.usertable td, .usertable th { padding: 0 .7em }
.usertable { white-space: nowrap }
.usertable > .toggle {
display: inline-block;
margin: 1em 0 .5em;
padding: 11px 15px;
border: 1px solid #bbb;
border-radius: 2px;
background: #fdffe8;
}
.usertable > .toggle .option.main:before {
margin-right: 7px;
}
.usertable > .toggle .option {
display: inline;
}
.usertable > .toggle .togglebutton, .usertable > .toggle .error {
display: none;
font-size: inherit;
border-left: 1px solid #bbb;
padding: 4px 15px;
padding-right: 0;
margin-left: 10px;
}
.usertable > .toggle .active .togglebutton {
display: inline;
}
.usertable > .toggle .error.active {
display: inline;
}
.usertable tr:hover {
background-color: #e5efff;
}
.usertable tr.banned-user,
.usertable tr.banned-user a,
.usertable tr.banned-user .user {
color: red;
}
.aboutpage { margin-right: 320px; }
.aboutpage p { margin: 5px; }
.aboutpage h1, .aboutpage h2 { margin: 10px;}
.aboutpage .usertable { width: 45%; }
.little a { font-size: x-small; }
.oldbylink a { background-color: #F0F0F0; margin: 2px; color: gray}
.error-log {
clear: both;
}
.error-log a:hover { text-decoration: underline }
.error-log .rest {
display: none;
}
.error-log:first-child .rest {
display: block;
}
.error-log, .error-log .exception {
border: solid #aaa 1px;
padding: 3px 5px;
margin-bottom: 10px;
}
.error-log .exception {
background-color: #f0f0f8;
}
.error-log .exception.new {
border: dashed #ff6600 2px;
}
.error-log .exception.severe {
border: solid #ff0000 2px;
background-color: #ffdfdf;
}
.error-log .exception.interesting {
border: dotted black 2px;
background-color: #e0e0e8;
}
.error-log .exception.fixed {
border: solid #008800 1px;
background-color: #e8f6e8;
}
.error-log .exception span {
font-weight: bold;
margin-right: 5px;
}
.error-log .exception span.normal {
margin-right: 0;
display: none;
}
.error-log .exception span.new, .error-log .edit-area label.new {
color: #ff6600;
}
.error-log .exception span.severe, .error-log .edit-area label.severe {
color: #ff0000;
}
.error-log .exception span.interesting, .error-log .edit-area label.interesting {
font-weight: normal;
font-style: italic;
}
.error-log .exception span.fixed, .error-log .edit-area label.fixed {
color: #008800;
}
.error-log .exception-name {
margin-right: 5px;
display: inline-block;
max-height: 50px;
overflow: hidden;
}
.error-log .nickname {
color: black;
font-weight: bold;
font-size: larger;
}
.error-log .exception.fixed .nickname {
text-decoration: line-through;
}
.error-log a:focus {
-moz-outline-style: none;
}
.error-log .edit-area {
border: solid black 1px;
background-color: #eee;
}
.error-log .edit-area label {
margin-right: 25px;
}
.error-log .edit-area input[type=radio] {
margin-right: 4px;
}
.error-log .edit-area input[type=text] {
width: 800px;
}
.error-log .edit-area table td, .error-log .edit-area table th {
padding: 5px 0 0 5px;
}
.error-log .save-button {
margin: 0 5px 5px 0;
font-size: small;
padding: 0;
}
.error-log .date {
font-size: 150%;
font-weight: bold;
}
.error-log .hexkey {
color: #997700;
}
.error-log .exception-name {
font-size: larger;
color: #000077;
}
.error-log .frequency {
font-size: larger;
float: right;
color: #886666;
}
.error-log .occurrences {
border: solid #003300 1px;
margin: 5px 0 2px;
padding: 2px;
}
.error-log .occurrence {
color: #003300;
font-family: monospace;
margin-right: 3em;
white-space: nowrap;
}
.error-log table.stacktrace th, .error-log table.stacktrace td {
border: solid 1px #aaa;
}
.error-log table.stacktrace td {
font-family: monospace;
}
.error-log table.stacktrace td.col-1 {
text-align: right;
padding-right: 10px;
}
.error-log .logtext.error {
color: black;
margin: 0 0 10px 0;
}
.error-log .logtext {
margin-bottom: 10px;
border: solid #555 2px;
background-color: #eeece6;
padding: 5px;
font-size: small;
}
.error-log .logtext * {
color: black;
}
.error-log .logtext.error .loglevel {
color: white;
background-color: red;
}
.error-log .logtext.warning .loglevel {
background-color: #ff6600;
}
.error-log .logtext.info .loglevel {
background-color: #00bbff;
}
.error-log .logtext.debug .loglevel {
background-color: #00ee00;
}
.error-log .logtext .loglevel {
padding: 0 5px;
margin-right: 5px;
border: solid black 1px;
}
.error-log .logtext table {
margin: 8px 5px 2px 0;
font-family: monospace;
}
.error-log .logtext table,
.error-log .logtext table th,
.error-log .logtext table td {
border: solid #aaa 1px;
}
.error-log .logtext table th, .error-log .logtext table td {
border: solid #aaa 1px;
}
.error-log .logtext table .occ {
text-align: right;
}
.error-log .logtext table .dotdotdot {
padding: 0;
}
.error-log .logtext table .dotdotdot a {
margin: 0;
display: block;
width: 100%;
height: 100%;
background-color: #e0e0e0;
}
.error-log .logtext table .dotdotdot a:hover {
background-color: #bbb;
text-decoration: none;
}
.error-log .logtext .classification {
font-size: larger;
font-weight: bold;
}
.error-log .logtext .actual-text {
max-width: 600px;
overflow: hidden;
}
.error-log .logtext .occ {
}
.details {
font-size: x-small;
margin-bottom: 10px;
}
.details span { margin: 0 5px 0 5px; }
.details th {
text-align: right;
padding-right: 5px;
font-weight: bold;
}
.details td {
vertical-align: top;
}
.ring {
font-weight:bold;
background-color:red;
color:white;
text-align:center;
padding-left: 3px;
padding-right: 4px !important;
cursor: pointer;
}
.vote-note {
padding-left: 3px;
max-width: 150px;
}
.vote-a-notes {
color: red;
}
.vote-up {
color: orangered;
}
.vote-down {
color: #336699;
}
.vote-invalid {
color: #888888 !important;
font-style: italic;
}
.unvotable-message {
border: solid 1px #ff6600;
margin-top: 4px;
padding: 1px 3px;
border-radius: 3px;
display: none;
}
.bottommenu { color: gray; font-size: smaller; clear: both}
.bottommenu a { color: gray; text-decoration: underline; }
.bottommenu .updated {
color: green;
}
.debuginfo {
text-align: right;
padding: 5px;
color: gray;
font-size: smaller;
clear: both;
}
.debuginfo .icon { color:#a0a0a0; font:1.5em serif; padding:0 2px; }
.debuginfo .content { display:none; }
.debuginfo:hover .content { display:inline; }
/* Buttons specific */
.button {
border-collapse: collapse;
color: gray;
text-align: center;
margin: 1px;
color: #369;
}
button.button[disabled] {
color: gray;
}
.button #cover {
position: relative;
}
.button .cover {
background: white;
}
.button #popup {
position: absolute;
width: 80%;
z-index: 1001;
background: white;
padding: 1px;
left: 0px;
top: 0px;
margin: 0px;
border-color: #B2B2B2 black black #B2B2B2;
border-style: solid;
border-width: 1px;
}
.button .arrow { width: 15px; }
.num { font-weight: bold; font-size: larger }
.button.thing {
margin:0px;
padding:0px;
}
.button-body {
background-color: transparent;
}
.button .blog {
border: 1px solid #c7def7;
color: gray;
text-align: center;
margin: 0px;
border-radius: 4px;
background-color:white;
}
.button .blog .r { color: gray; }
.button .blog .score { white-space: nowrap; }
.button a:hover { text-decoration: underline }
.button .blog1 { font-size: x-small; }
.button .blog1 .arrow { float:left; margin-left: 2px; margin-right: 2px; }
.button .blog1 .headimgcell {
background-color: #c7def7;
width: 18px;
float: left;
}
.button .blog1 .headimgcell a {
display: inline-block;
}
.button .blog1 .score {
float: center;
margin-top: 2px;
margin-right: 5px;
}
.button .blog2 { font-size: small; }
.button .blog2 .arrow { width: 15px; margin-left: auto; margin-right: auto; }
.button .blog2 .bottomreddit { color: black; background-color: #c7def7; font-size: small; }
.button .blog2 .score .submit {
display: block;
font-size: x-small;
line-height: 17px;
}
.button .blog.blog3 {
font-size: small;
border: none;
background-color: transparent;
}
.button .blog3 .left { float: left; width: 50%; }
.button .blog2 .arrow { width: 15px; margin-left: auto; margin-right: auto; }
.button .blog3 .right { float: right; margin-top: 5px; }
.button .blog3 .score .submit {
display: block;
font-size: x-small;
line-height: 17px;
}
.button .blog3 .snoo {
margin-top: -1px;
}
.blog5 .right { float: right; }