NewsBlur/media/ios/static/storyDetailView.css

903 lines
21 KiB
CSS
Raw Normal View History

2012-06-28 11:12:38 -07:00
/**
* Font Size Style
*/
2012-08-13 18:45:06 -07:00
.NB-story {
line-height: 1.5em;
}
2012-12-11 17:53:17 -08:00
.NB-extra-small .NB-story,
.NB-extra-small .NB-story-comment {
font-size: 12px;
2012-06-28 11:12:38 -07:00
}
2012-12-11 17:53:17 -08:00
.NB-small .NB-story,
.NB-small .NB-story-comment {
font-size: 13px;
2012-06-28 11:12:38 -07:00
}
2012-12-11 17:53:17 -08:00
.NB-medium .NB-story,
.NB-medium .NB-story-comment {
2012-08-13 18:45:06 -07:00
font-size: 14px;
2012-06-28 11:12:38 -07:00
}
2012-12-11 17:53:17 -08:00
.NB-large .NB-story,
.NB-large .NB-story-comment {
font-size: 15px;
2012-06-28 11:12:38 -07:00
}
2012-12-11 17:53:17 -08:00
.NB-extra-large .NB-story,
.NB-extra-large .NB-story-comment {
font-size: 17px;
2012-06-28 11:12:38 -07:00
}
.NB-san-serif {
font-family: Helvetica;
}
.NB-serif {
font-family: georgia;
}
/**
* iPad Wide Style
*/
.NB-ipad-wide .NB-header {
2012-08-09 13:05:19 -07:00
padding: 15px 0 5px;
2012-07-23 15:27:20 -07:00
}
.NB-ipad-wide .NB-header .NB-header-inner {
margin: 0px 90px;
2012-06-28 11:12:38 -07:00
}
.NB-ipad-wide .NB-story {
margin: 30px 90px;
}
.NB-ipad-wide .NB-share-inner-wrapper {
margin: 0 90px;
}
.NB-ipad-wide#story_pane .nb-story-comments-public-teaser,
.NB-ipad-wide#story_pane .nb-story-comments-public-header,
2012-08-07 12:49:08 -07:00
.NB-ipad-wide#story_pane .NB-story-comments-shares-teaser {
padding-left: 90px;
padding-right: 90px;
}
.NB-ipad-wide#story_pane .nb-story-comment {
padding: 0 90px 2px 150px;
}
.NB-ipad-wide#story_pane .nb-story-comment .nb-user-avatar {
left: 88px;
2012-06-28 11:12:38 -07:00
}
.NB-ipad-wide#story_pane .nb-story-comment .nb-story-comment-reshares .nb-user-avatar {
2012-12-11 12:54:50 -08:00
left: 108px;
}
2012-06-28 11:12:38 -07:00
/**
* iPad Narrow Style
*/
.NB-ipad-narrow .NB-header {
2012-08-09 13:05:19 -07:00
padding: 15px 30px 5px;
2012-06-28 11:12:38 -07:00
}
.NB-ipad-narrow .NB-story {
margin: 25px 30px;
}
.NB-ipad-narrow .NB-share-inner-wrapper {
margin: 0 30px;
}
.NB-ipad-narrow#story_pane .nb-story-comments-public-teaser,
.NB-ipad-narrow#story_pane .nb-story-comments-public-header,
2012-08-07 12:49:08 -07:00
.NB-ipad-narrow#story_pane .NB-story-comments-shares-teaser {
padding-left: 30px;
padding-right: 30px;
2012-06-28 11:12:38 -07:00
}
2012-08-07 12:49:08 -07:00
.NB-ipad-narrow#story_pane .nb-story-comment {
padding: 0 30px 2px 90px;
}
2012-12-11 12:54:50 -08:00
.NB-ipad-narrow#story_pane .NB-story-comment .NB-user-avatar {
left: 26px;
2012-08-07 12:49:08 -07:00
}
.NB-ipad-narrow#story_pane .nb-story-comment .nb-story-comment-reshares .nb-user-avatar {
2012-12-11 12:54:50 -08:00
left: 45px;
}
.NB-ipad-narrow#story_pane .NB-story-comment .NB-user-avatar.NB-story-comment-reshare {
left: 26px;
}
2012-06-28 11:12:38 -07:00
/**
* iPhone Style
*/
.NB-iphone .NB-header {
2012-08-09 13:05:19 -07:00
padding: 12px 12px 5px;
2012-06-28 11:12:38 -07:00
}
.NB-iphone .NB-story {
margin: 12px 12px;
}
.NB-iphone .NB-share-inner-wrapper {
margin: 0 12px;
}
/*
2012-06-28 11:12:38 -07:00
.NB-iphone .NB-story img {
max-width: 290px !important;
2012-06-28 11:12:38 -07:00
}
/**
* Universal Style
*/
body {
text-rendering: optimizeLegibility;
margin: 0;
2012-06-25 15:02:20 -07:00
-webkit-text-size-adjust: none;
2012-06-28 11:12:38 -07:00
font-size: 14px;
line-height: 120%;
overflow: hidden;
font-family: Helvetica;
}
2012-08-07 11:27:00 -07:00
body.NB-iphone {
line-height: 110%;
}
2012-06-24 23:02:37 -07:00
.NB-story-author {
color: #969696;
text-decoration: none;
2012-06-24 23:02:37 -07:00
text-transform: uppercase;
margin: 4px 8px 0px 0;
2012-08-09 13:05:19 -07:00
margin-bottom: 8px;
2012-06-24 23:02:37 -07:00
text-shadow: 0 1px 0 #F9F9F9;
float: left;
position: relative;
2012-06-24 23:02:37 -07:00
}
.NB-story-author-positive {
color: #58A353;
text-shadow: 0 1px 0 #E9F6E9;
}
.NB-story-author-negative {
color: #B85044;
text-shadow: 0 1px 0 #F6E9E9;
}
2012-06-24 23:02:37 -07:00
.NB-story-tags {
overflow: hidden;
padding: 5px 2px 2px 2px;
2012-08-09 13:05:19 -07:00
margin-bottom: 8px;
2012-06-24 23:02:37 -07:00
text-transform: uppercase;
}
.NB-story-tag {
float: left;
text-decoration: none;
2012-06-24 23:02:37 -07:00
font-weight: normal;
padding: 0px 4px 0px;
margin: 0px 4px 4px 0;
background-color: #C9CBC6;
2012-06-24 23:02:37 -07:00
color: #505050;
text-shadow: 0 1px 0 #E0E8DB;
2012-06-24 23:02:37 -07:00
-webkit-border-radius: 4px;
position: relative;
2012-06-24 23:02:37 -07:00
}
.NB-story-tag-positive {
background-color: #88B383;
color: white;
text-shadow: 0 1px 0 #588353;
}
.NB-story-tag-negative {
background-color: #C89094;
color: white;
text-shadow: 0 1px 0 #986064;
}
.NB-story-tag .NB-highlight,
.NB-story-author .NB-highlight,
.NB-show-profile .NB-highlight {
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;
background-color: #000;
opacity: .25;
border-radius: 4px;
display: none;
}
.NB-story-tag.pressed .NB-highlight,
.NB-story-author.pressed .NB-highlight,
.pressed .NB-show-profile .NB-highlight,
.NB-show-profile.pressed .NB-highlight {
display: block;
}
2012-06-24 23:02:37 -07:00
.NB-story-date {
color: #454D6C;
}
.NB-story-author {
font-size: 10px;
line-height: 12px
}
.NB-story-tags {
line-height: 12px;
2012-08-02 18:33:55 -07:00
height: 12px;
2012-06-24 23:02:37 -07:00
}
.NB-story-tag {
font-size: 9px;
}
.NB-story-date {
font-size: 11px;
line-height: 13px;
}
.NB-story h1,
.NB-story h2,
.NB-story h3,
.NB-story h4,
.NB-story h5,
.NB-story h6,
.NB-story div,
.NB-story table,
.NB-story span,
.NB-story pre,
.NB-story code {
overflow: auto;
clear: both;
2012-07-30 15:50:52 -07:00
}
.NB-story h1,
.NB-story h2,
.NB-story h3,
.NB-story h4,
.NB-story h5,
.NB-story h6 {
line-height: 140%;
}
2012-08-07 11:27:00 -07:00
.NB-iphone .NB-story h1,
.NB-iphone .NB-story h2,
.NB-iphone .NB-story h3,
.NB-iphone .NB-story h4,
.NB-iphone .NB-story h5,
.NB-iphone .NB-story h6 {
line-height: 120%;
font-size: 1.1em;
}
a {
text-decoration: none;
}
.NB-story blockquote {
2013-02-15 16:41:20 -08:00
border-left: 5px solid #C2C5BE;
padding: 0 1.5em;
color: rgba(10, 12, 38, .6);
margin: 20px 0;
}
2012-06-28 19:15:30 -07:00
div + p {
margin: 20px 0px 20px 0;
}
.NB-story p {
margin: 0px 0px 20px 0;
clear: both;
}
.NB-story small {
font-size: 11px;
}
.NB-header {
2012-06-24 23:02:37 -07:00
font-size: 22px;
line-height: 1.2em;
2012-06-24 23:02:37 -07:00
font-weight: 600;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#F3F4EF));
border-bottom: 1px solid #C2C5BE;
2013-02-19 14:18:41 -08:00
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
2012-06-24 23:02:37 -07:00
overflow: hidden;
max-width: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
2012-08-07 11:27:00 -07:00
.NB-iphone .NB-header {
font-size: 14px;
}
.NB-story {
2012-06-28 11:12:38 -07:00
overflow: hidden;
}
.NB-story a.NB-contains-image {
2012-06-22 15:53:51 -07:00
display: block;
}
.NB-story div {
max-width: 100% !important;
}
2012-06-22 15:53:51 -07:00
.NB-story img {
2012-07-24 22:19:40 -07:00
margin: 20px auto;
2012-11-09 14:13:44 -08:00
height: auto !important;
width: auto;
max-width: 100% !important;
display: none;
2012-06-22 15:53:51 -07:00
}
.NB-story img.NB-large-image,
.NB-story img.NB-medium-image {
margin: 20px auto !important;
2012-06-22 15:53:51 -07:00
display: block !important;
width: auto;
height: auto;
display: block;
float: none;
clear: both;
2012-06-22 15:53:51 -07:00
}
.NB-story img.NB-small-image {
display: inline-block;
margin: 2px;
}
2012-06-22 15:53:51 -07:00
.NB-feed-story-comments {
clear: both;
}
.NB-story-title {
clear: left;
margin: 8px 0 4px;
}
.NB-story-title-positive {
color: #58A353;
text-shadow: 0 1px 0 #E9F6E9;
}
.NB-story-title-negative {
color: #B85044;
text-shadow: 0 1px 0 #F6E9E9;
}
ins {
text-decoration: none;
}
del {
display: none;
2012-06-14 16:30:37 -07:00
}
/* Comments */
.NB-feed-story-comments {
margin: 0 !important;
clear: both !important;
max-width: none !important;
}
2012-08-01 12:41:02 -07:00
#story_pane .NB-story-comments-shares-teaser.NB-highlighted {
-webkit-transition: background-color .6s linear;
background-color: #FBE5C7;
}
#story_pane .NB-story-comments-shares-teaser {
-webkit-transition: background-color .6s linear;
}
2012-07-30 17:07:02 -07:00
#story_pane .NB-story-comment-reply.NB-highlighted {
background-color: #FBE5C7;
}
#story_pane .NB-story-comment.NB-highlighted {
2012-07-30 17:07:02 -07:00
-webkit-transition: background-color .6s linear;
background-color: #FBE5C7;
}
2012-07-30 17:07:02 -07:00
#story_pane .NB-story-comment-reply,
#story_pane .NB-story-comment {
2012-07-30 15:50:52 -07:00
-webkit-transition: background-color .6s linear;
}
2012-12-11 12:54:50 -08:00
#story_pane .NB-story-comment-reply .NB-show-profile {
float: left;
left: -42px;
}
2012-08-07 12:49:08 -07:00
.NB-story-comment:last-child {
border-bottom: 1px solid #A6A6A6;
}
#story_pane .NB-story-comment .NB-story-comment-content {
float: none;
}
2012-08-13 15:34:53 -07:00
.nb-story-comments-label {
2012-08-02 18:33:55 -07:00
float: left;
margin-right: 2px;
2013-02-19 14:18:41 -08:00
margin-top: 2px;
2012-08-02 18:33:55 -07:00
}
2012-08-13 15:34:53 -07:00
.nb-story-share-label {
float: right;
2013-02-19 14:18:41 -08:00
margin-top: 2px;
margin-left: 2px;
2012-08-02 18:33:55 -07:00
}
2012-06-14 16:30:37 -07:00
/* Sharing */
2012-08-13 18:45:06 -07:00
.NB-share-wrapper {
margin-top: 36px;
}
a.NB-show-profile {
margin: 0 0 0 2px;
position: relative;
display: inline-block;
}
2012-07-30 18:49:12 -07:00
/* Disable certain interactions on touch devices */
.NB-button,
a.NB-show-profile {
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
2012-12-11 17:53:17 -08:00
.NB-button.NB-share-button {
line-height: 20px;
font-family: Helvetica, sans-serif;
font-size: 14px;
color: #606060;
2012-12-11 17:53:17 -08:00
float: none;
display: block;
text-shadow:
0px 0px 0px rgba(000,000,000,0),
0px 1px 0px rgba(255,255,255,1);
}
2012-12-11 17:53:17 -08:00
.NB-button.NB-share-button a {
display: block;
}
.NB-share-button.active,
.NB-save-button.active {
background: #217412;
box-shadow: none;
}
/* Edit, Like, and Reply buttons */
2012-08-13 15:34:53 -07:00
.NB-button {
padding: 0px 0px 4px 4px;
2012-07-26 13:54:45 -07:00
cursor: pointer;
2012-12-11 17:53:17 -08:00
white-space: nowrap;
float: right;
2012-07-26 13:54:45 -07:00
}
.NB-button.NB-share-button {
float: left;
padding: 0px 0px 20px 0px;
margin: 0 0 0 0;
2012-08-13 15:34:53 -07:00
display: block;
width: 48%;
}
.NB-button.NB-train-button {
float: right;
}
.NB-button div {
2012-07-26 13:54:45 -07:00
padding: 2px 6px;
background: -webkit-gradient(
linear, left top, left bottom,
2012-12-11 17:53:17 -08:00
from(#F0F0F0),
color-stop(0.50, #EBEBEB),
color-stop(0.50, #E4E4E4),
to(#C0C0C0));
border-radius: 3px;
border: 1px solid #949494;
2012-12-11 17:53:17 -08:00
box-shadow: inset 0px 1px 0px rgba(255,255,255,1);
}
2012-07-29 22:44:28 -07:00
.NB-iphone .NB-button div {
2012-12-11 17:53:17 -08:00
padding: 0px 5px 0px;
2012-07-29 22:44:28 -07:00
}
2012-08-13 16:20:23 -07:00
.NB-iphone #story_pane .NB-story-comment .NB-story-comment-content {
padding-bottom: 0px;
}
.NB-button.NB-share-button div {
2012-08-08 19:31:33 -07:00
padding: 8px 0px 8px;
border-radius: 5px;
text-align: center;
background: -webkit-gradient(
linear, left top, left bottom,
from(#42aaff),
2012-08-09 13:05:19 -07:00
to(#1e78c1));
2012-12-11 17:53:17 -08:00
box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .6);
2012-08-09 13:05:19 -07:00
text-shadow: 0 1px 0 #003366;
}
.NB-button.NB-share-button .NB-icon {
2012-08-13 15:34:53 -07:00
background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACGUlEQVR42o2TTUsbYRSFZ+MvcNn/0EU1rSCCgkSxVRCLFgyiqFSE1tDSpNKoEaQJiAvBryDZGCVQKWIpWIeAFMHWL1qKjUJ3KRQSNUgSJzPR5PieMRMqjuLibAaec+577xkJwJ30p0jqEloXiglpQlmh3F3AaaEogWhnMw6dPTgafIljtx3i262gTSgSKbuPQ8dzxEfsSEw6kHBV4NRThrOVAaSd0o2wX0iJdj9D3PMaJ/1WKF4LtMlHyExf6jw0CO2dZAovCmWOBl4gMeFAyv0AmTyoLVRCXa1H+nsLtMgUktslpsmZ46E+JGedUMcsl2CwCumvTVD22qAcdOjS/vmQ3LVce7PCZMLa+EMdVj/XQflp06G/ezZ8/NYAV6gKUz+GcM8vXTGI8M0c20hW5QYo4XacCnhxox5dK+Wo+1SKmuUSeHdcKJ6VrpwqF3//Cqnh0kIy4djvNoyuVeNJHmwNONDrCyIg/8LjN0sFgyhPlfK/5cL4Zo7NZB2uFWDjh6fonQliXg5jQd7H3JcwDQoNy/LOPBXT9YXlx2YyYXcgpIPe+S10emTCqtAmDdbZMJaEd+apuG0ujG/m2EwmbB9fM0CrsTsaxFhPNozpvDPTuW0ujG/m2EwmbID/G2jsNutJA5aEBjyVnu7T042xrWYGWf4Y7DbryYaxJLwzT8Vtc2FGuplBTog/BrvNerJhLAnvTNDQppnBBZHZrv4ITeFuAAAAAElFTkSuQmCC") no-repeat top right;
width: 23px;
display: inline-block;
height: 16px;
margin: 0 2px -2px -12px;
}
.NB-button.NB-train-button .NB-icon {
background: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACxElEQVR42qWT30+SURzG6a553d/QdffOq7Y2t4xEhgSYvCIM5ddUfi0QdcsMp6Ij8EcFgkoiGqFUCGYyp2Kp02XOzDUVGypcsKJYNzy9nM0517jq4tnOzvt9Pt/ne95zGAD+S/9sfHjcWhQ1qovfqRX8uIjCUWU5UbymGnNq+f2oQV2crykI2NA3xVIqJZJSCU5pU1qvR1qtJuukrA6pBhXWdI2xgoCvPHbuh9GIrLUfp9JaxLksInpN9vLfvnDKchGN4joBtDpNRRpbU7HKIufrxpU4YN1Gxu1GSl6PMxFFTOewM4kYCUpAj8QEDbhBAA8cmlh70AiTXwu9T4VD9h38CQTxy25Dsl5CIqcalfgu4OXNZJQjbvkFQDZcm7OEH8G9PAjjlDpPJ4CMvR8ZqxXp7i6cCAXEfEJVEcClBGJnFeZ3ZmEJd0A/2YD9exWkc8Y+gJ99fUh3mpGo5ueNBHBMd99ll+a0JvtNXZeniCEdFmL12xJmt4OYWB3FkK8NiwoKB9y75E/QKchZHPO52GeVYl4kRIvZg4ahKGTtYzFGnasGS3sLmNmcQmDDB0/MAe2EAiaDDTGKhzgNOuAwEavm4qG+F5LeCCwzWzC4l8HUe3MMmVOU8697MbnmgXfVDefSINReGZjGl3gV20eb8z3E3SFiokUA0r45CDvfgmUKgNFoUZbI7dKEfESCwQUrRlcc5CzKTX7MbcbhW9yDI/QJzSMrUA1EITC/IeaanjDYrQGQy5PNZq+oehUisY3K1LtFqHNRhB5aP8TYwi5e0Hoe3oawK0TMVHeIAEgC4LKUPfJrSov8KqdlKueMfIYjsoNndIIndPwqM+lMAJy2aZRpxnMFX5nE2F/CNwwnuHSh2fcRtuAWRD0R8Dpeo0znA0fzNElprbcKAC5GkzYP1VbqXRlO6zQd2Y8Kjeu3UGdrOq/5C7Lktmdg8uWWAAAAAElFTkSuQmCC") no-repeat top right;
}
.NB-iphone .NB-button .NB-story-comment-like-button-wrapper,
.NB-button .NB-story-comment-like-button-wrapper {
position: relative;
2012-12-11 17:53:17 -08:00
overflow: hidden;
}
.NB-button .NB-story-comment-like-button-wrapper span {
2012-12-11 17:53:17 -08:00
background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAGmSURBVCiRbZG/axRBHMXfzO7tbvYua+IFJQa0sRBs1IiQFIEIgvgDEUSs7CSFCJLaA1MJYjrFI5VgmkBiCDYWNgZJlaB/wgknxOT0Lnt7s7Mz852xOgzxXvne98OXxwMG6PXm3PSbzblbgzJ21Kit3mcT4ye34NyI0AeT87PvxeGcHwVGj0d34lJyJQ6Gz1myDwZ+eLpxOapGp8Y95lVPVM4sDUdjF8kSOmK3sZ81HhpGP4XMfi3e3eqx+tcnzyM/ngVjlzjjlcgvIy1aUEaiHIwg110oynNjzXep0h1OVjeMVTNJWK34Xoh2vous6ECoA7R6TRhSiEvJEFk1Rc40+OOZ+rtU7l9r9ZopA1BoAecsHIBcZ/B4CZ18L8uK9r3a9Y+LHADmry5/TmXrmabCDQUJFEkYKhD6EcgZ9FT77cKNT2sA4PfbO7jMWA3OfBwLxwDmILUAOQ1jSPbv/gHOnvdZiWlXQFulyGrle0GFgUFJOj0ImPgtmhCq+6or/6wbp1TIyzc9imq6oNH/AHJmZS/78fLF7S/fDu20/ah+4UMcJGf7xl8kb9PTscP82wAAAABJRU5ErkJggg==") no-repeat center center;
width: 16px;
height: 16px;
2012-12-11 17:53:17 -08:00
display: block;
float: left;
margin: 0 6px;
2012-06-14 16:30:37 -07:00
}
2012-07-26 13:54:45 -07:00
.NB-button.selected div {
2012-08-09 13:05:19 -07:00
background: #2379bf;
background: -webkit-gradient(
linear, left top, left bottom,
from(#1e78c1),
to(#2379bf));
box-shadow: none;
}
2012-08-09 13:05:19 -07:00
.NB-button.NB-share-button.selected div{
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1);
}
.NB-button a {
2012-12-11 17:53:17 -08:00
display: inline-block;
padding-top: 1px;
line-height: 16px;
font-family: Helvetica, sans-serif;
2012-07-26 13:54:45 -07:00
font-size: 11px;
color: #606060;
2012-12-11 17:53:17 -08:00
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
}
.NB-button.NB-share-button a {
color: #FFF;
text-shadow: none;
font-size: 14px;
}
2012-08-13 16:20:23 -07:00
.NB-button.selected a {
color: rgba(255,255,255,1);
2012-07-26 13:54:45 -07:00
text-shadow: none;
2013-02-19 14:18:41 -08:00
}
/* Story Comments */
.NB-right {
float: right;
}
#story_pane .NB-story-comment {
border-top: 1px solid #A6A6A6;
background:#f5f9fb;
position: relative;
padding: 0 12px 2px 64px;
line-height: 20px;
overflow: hidden;
min-height: 72px;
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 1);shar
}
.NB-header,
#NB-share-bar-wrapper {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.NB-story-share-profiles-comments-friends,
.NB-story-share-profiles-comments-public {
float: left;
}
.NB-story-share-profiles-shares-friends,
.NB-story-share-profiles-shares-public {
float: right;
}
#story_pane .NB-story-comment .NB-user-avatar {
position: absolute;
left: 6px;
top: 8px;
}
#story_pane .NB-story-comment .NB-user-avatar.NB-story-comment-reshare {
top: 22px;
left: 6px;
z-index: 1;
}
#story_pane .NB-story-comment .NB-user-avatar img {
border-radius: 6px;
margin: 0;
width: 48px;
height: 48px;
}
#story_pane .NB-story-comment .NB-user-avatar.NB-story-comment-reshare img {
height: 36px;
width: 36px;
}
#story_pane .NB-story-comment .NB-story-comment-author-container {
padding: 8px 0 0;
}
#story_pane .NB-story-comment .NB-story-comment-reshares {
position: absolute;
top: 0;
left: 8px;
z-index: 0;
}
#story_pane .NB-story-comment .NB-story-comment-reshares .NB-user-avatar {
top: 8px;
left: 26px;
}
#story_pane .NB-story-comment .NB-story-comment-username {
float: left;
font-size: 11px;
color: #1D4BA6;
font-weight: bold;
margin: 0 4px 0 0;
text-shadow: 0 -1px 0 #F0F0F0;
cursor: pointer;
line-height: 17px;
}
#story_pane .NB-story-comment .NB-story-comment-date {
text-transform: uppercase;
font-size: 10px;
color: #9D9D9D;
font-weight: bold;
float: right;
line-height: 17px;
margin: 0 0 0;
}
#story_pane .NB-story-comment .NB-story-comment-likes {
float: right;
margin: 0;
overflow: hidden;
}
#story_pane .NB-story-comment .NB-story-comment-likes-icon {
float: right;
background: transparent url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAGmSURBVCiRbZG/axRBHMXfzO7tbvYua+IFJQa0sRBs1IiQFIEIgvgDEUSs7CSFCJLaA1MJYjrFI5VgmkBiCDYWNgZJlaB/wgknxOT0Lnt7s7Mz852xOgzxXvne98OXxwMG6PXm3PSbzblbgzJ21Kit3mcT4ye34NyI0AeT87PvxeGcHwVGj0d34lJyJQ6Gz1myDwZ+eLpxOapGp8Y95lVPVM4sDUdjF8kSOmK3sZ81HhpGP4XMfi3e3eqx+tcnzyM/ngVjlzjjlcgvIy1aUEaiHIwg110oynNjzXep0h1OVjeMVTNJWK34Xoh2vous6ECoA7R6TRhSiEvJEFk1Rc40+OOZ+rtU7l9r9ZopA1BoAecsHIBcZ/B4CZ18L8uK9r3a9Y+LHADmry5/TmXrmabCDQUJFEkYKhD6EcgZ9FT77cKNT2sA4PfbO7jMWA3OfBwLxwDmILUAOQ1jSPbv/gHOnvdZiWlXQFulyGrle0GFgUFJOj0ImPgtmhCq+6or/6wbp1TIyzc9imq6oNH/AHJmZS/78fLF7S/fDu20/ah+4UMcJGf7xl8kb9PTscP82wAAAABJRU5ErkJggg==") no-repeat center center;
width: 16px;
height: 16px;
display: block;
margin: 0 10px 0 0;
vertical-align: top;
}
#story_pane .NB-story-comment .NB-story-comment-likes-user {
float: right;
margin: 2px 2px 0 0;
}
#story_pane .NB-story-comment .NB-story-comment-likes-user .NB-user-avatar {
position: static;
}
#story_pane .NB-story-comment .NB-story-comment-likes-user img {
width: 12px;
height: 12px;
border-radius: 2px;
vertical-align: top;
}
#story_pane .NB-story-comment .NB-story-comment-location {
text-transform: uppercase;
font-size: 10px;
color: #BECDD7;
font-weight: bold;
float: left;
clear: both;
margin: 3px 0 6px;
line-height: 12px;
}
#story_pane .NB-story-comment .NB-button-wrapper {
overflow: hidden;
white-space: nowrap;
float: right;
}
#story_pane .NB-story-comment .NB-story-comment-content {
float: left;
color: #303030;
clear: both;
}
#story_pane .NB-story-comment-reply {
border-top: 1px solid #E0E0E0;
padding: 4px 0;
overflow: hidden;
clear: both;
position: relative;
padding: 8px 0 4px 42px;
line-height: 18px;
}
#story_pane .NB-story-comment-reply .NB-story-comment-reply-photo {
width: 32px;
height: 32px;
border-radius: 3px;
position: absolute;
left: 0px;
top: 2px;
cursor: pointer;
}
#story_pane .NB-story-comment-reply-content {
clear: both;
color: #303030;
padding: 2px 0 3px;
}
#story_pane .NB-story-comment-reply-form {
padding-top: 11px;
}
#story_pane .NB-story-comment-reply-form .NB-story-comment-reply-username {
margin: 1px 8px 6px 0;
}
#story_pane .NB-story-comment-reply-form .NB-story-comment-reply-comments {
margin: 0 8px 4px 0;
width: 62%;
display: block;
float: left;
font-size: 12px;
}
#story_pane .NB-story-comment-reply-form .NB-modal-submit-button {
float: left;
font-size: 10px;
padding: 2px 8px;
line-height: 16px;
margin: 0;
}
#story_pane .NB-story-comment-reply-form .NB-error {
font-size: 10px;
color: #6A1000;
padding: 4px 0 0;
line-height: 14px;
font-weight: bold;
clear: both;
}
#story_pane .NB-story-comments-public-teaser-wrapper,
#story_pane .NB-story-comments-public-header-wrapper {
border-top: 1px solid #353535;
padding: 1px 0;
cursor: pointer;
}
#story_pane .NB-story-comments-public-header-wrapper {
cursor: default;
}
#story_pane .NB-story-comments-shares-teaser-wrapper {
border-top: 0;
padding-top: 0;
}
#story_pane .NB-story-comments-public-teaser,
#story_pane .NB-story-comments-public-header {
background-color: #B1B6B4;
color: white;
text-shadow: 0 1px 0 #505050;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
padding: 2px 12px;
overflow: hidden;
}
#story_pane .NB-story-comments-public-header {
background-color: whiteSmoke;
color: #404040;
text-shadow: 0 1px 0 white;
}
#story_pane .NB-story-comments-shares-teaser {
background-color: #F5F5EF;
color: #898989;
text-shadow: 0 1px 0 #FFF;
font-weight: normal;
font-size: 10px;
padding: 8px 12px 0px 28px;
overflow: hidden;
min-height: 27px;
line-height: 14px;
border-bottom: 1px solid #E3E3DF;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
-webkit-transition: all .12s ease-out;
}
#story_pane .NB-story-comments-public-teaser b {
padding: 0 1px;
font-size: 12px;
}
#story_pane .NB-story-share-profiles {
float: left;
vertical-align: top;
min-height: 24px;
padding-top: 2px;
margin-top: -4px;
overflow: hidden;
}
#story_pane .NB-story-share-profiles.NB-story-share-profiles-public {
float: right;
}
#story_pane .NB-story-share-profiles.NB-story-share-profiles-public .NB-story-share-profile {
float: right;
}
#story_pane .NB-story-share-profile {
display: inline-block;
}
#story_pane .NB-story-share-profile .NB-user-avatar {
float: left;
font-size: 0;
vertical-align: middle;
height: 22px;
width: 22px;
margin: 0 4px 6px 0;
cursor: pointer;
}
#story_pane .NB-story-share-profile .NB-public-user {
opacity: 0.5;
}
#story_pane .NB-story-share-profile .NB-user-avatar img {
width: 22px;
height: 22px;
border-radius: 3px;
}
#story_pane .NB-story-share-profile .NB-user-username {
float: left;
}
#story_pane .NB-story-comment .NB-story-comment-content {
clear: both;
padding: 2px 0 3px 0;
}
#story_pane .NB-feed-stories .NB-feed-story {
margin: 0;
clear: both;
overflow: hidden;
}
#story_pane .NB-feed-stories.NB-feed-view-story .NB-feed-story {
padding: 0;
}
#story_pane .audiojs audio {
display: none;
}