gpme.css

/*
 * Filename:         gpme.css
 * More info, see:   gpme.js
 *
 * Web:              http://huyz.us/google-plus-me/
 * Source:           https://github.com/huyz/google-plus-me
 * Author:           Huy Z  http://huyz.us/
 *
 * To update CSS class names, do regexp substitution:
 *   C_SELECTED: rh
 *   C_IS_MUTED: En
 *   [N/A posts from Incoming]: Xs
 *   [N/A context menu button]: bg
 *   C_MENU: Om
 *   C_ITEM_GUTS: Ve
 *   C_TITLE: Ex
 *   [N/A album photo or youtube image preview]: B-u-ac
 *   C_FAKEINPUT_COMMENT: eo
 *   C_LINK_COMMENT: fd
 *
 */


/*
 * General utility classes
 */

/*
.gpme-overflow-hidden {
  overflow: hidden;
}
  */

/*
 * Announcements & news, when Google+ changes its DOM and breaks G+me
 */

/* Only shown when Google+ has changed its DOM */
#gpme-announcement-li {
  padding: 5px;
  margin: auto 7px;
  height: 20px;
}

#gpme-announcement { /* Overrides .gbm */
  top: 32px;
  right: -230px !important; /* Overrides #gbg .gbm */
  left: auto;
  visibility: hidden;
  padding: 13px 20px;
  width: 800px;
  white-space: normal;
  line-height: 20px;
  background-color: #FAFAFA;
  border-width: 2px;
}

#gpme-news {
  background: url('chrome-extension://__MSG_@@extension_id__/images/loading.gif') no-repeat center center;
  width: 100%;
  height: 250px;
  border: 1px solid #CCC;
}

/*
 * The entire post item
 */

div.gpme-enh.gpme-folded { /* Added div.gpme-enh for specificity to work in games stream */
  padding: 0;
}

/* Selected post, folded; needs to be highly selective */
.gpme-folded.rh {
  border-bottom: 1px solid transparent; /* Don't mess with margin-bottom or padding-bottom, as that's incompatible with Usability Boost */
}

/* Selected post, folded */
/*.gpme-enh.rh {   For Stb, only make it thick when folded */
.gpme-folded.gpme-enh.rh {
  /*border-left-color: red; /* #3d9400;*/
  border-left-width: 2px;
  margin-left: -1px;
}
/* The little animated bar; needs to more selective than G+'s */
/* For Stb, only make it thick when folded
div.rh {
  border-left-width: 2px;
}
*/

/*
 * Common to titlebar and commentbar
 */

/* Tweaked from C_FEEDBACK */
.gpme-bar {
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  border: 1px solid #DCDCDC;
  color: #666;
}
.gpme-bar:active {
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.gpme-sep {
  color: #999;
}

.gpme-fold-icon {
  float: left;
  font-size: 10px;
  line-height: 22px;
  color: #CCCCCC;
}
.gpme-title-folded .gpme-fold-icon,
.gpme-comments-title-folded .gpme-fold-icon { /* We don't that to apply to side commentbar */
  margin: 0 5px 0 3px;
}

/*
 * The titlebar
 */

.gpme-unfolded > .gpme-titlebar {
  margin: -16px -21px 4px -21px; /* Break out of the paddings */
}
/* Unread posts need to have light background */
.gpme-folded:not(.gpme-read) .gpme-title-folded {
  /*
  background-image: -webkit-linear-gradient(top,#fdfdfd,#f9f9f9);
  background-image: -moz-linear-gradient(top,#fdfdfd,#f9f9f9);
  background-image: -ms-linear-gradient(top,#fdfdfd,#f9f9f9);
  background-image: -o-linear-gradient(top,#fdfdfd,#f9f9f9);
  background-image: linear-gradient(top,#fdfdfd,#f9f9f9);
  */
  background-image: none;
  background-color: white;
  border-top: 1px solid white;
}

.gpme-title-clickarea {
  height: 100%
}

/* Unread posts need to have dark text color */
.gpme-enh:not(.gpme-read) .gpme-title-clickarea > * { /* Star so that even dashes get bolded, in case there is no snippet */
  color: black;
}

/* Muted post: _C_IS_MUTED */
.gpme-enh.En { /* Matches .gpme-folded.rh */
  border-bottom: 1px solid transparent; /* Don't mess with margin-bottom or padding-bottom, as that's incompatible with Usability Boost */
  height: 38px; /* FIXME: Don't know why it's so small and the correct way to fix that */
}
.gpme-enh.En .gpme-titlebar,
.gpme-enh.En .gpme-bottombar {
  margin: 0;
  display: none;
}


.gpme-title-unfolded {
  height: 14px;
}
.gpme-title-folded {
  padding: 4px; /* Must match gpme-comment-count-bg's right */
  position: relative;
  border: 1px solid #f5f5f5; /* Overrides gpme-bar. transparent so that gpme-read doesn't shift */
  border-bottom: 1px solid #DCDCDC;
  white-space: nowrap; /* Overridden when summaries have more than one line */
}

.gpme-folded .gpme-title-unfolded {
  display: none
}
.gpme-unfolded .gpme-title-folded {
  display: none;
}

/* Color fold icons depending on importance */
/*.gpme-title-folded > .gpme-fold-icon {*/
  /*visibility: hidden;*/
/*}*/
/*.gpme-title-folded.gpme-perms-limited > .gpme-fold-icon {*/
  /*visibility: visible;*/
  /*color: #3d9400; [> color from hangout button .j-e-Da <]*/
/*}*/
.gpme-circle-icon {
  height: 20px;
  width: 20px;
}
.gpme-title-folded.gpme-perms-limited .gpme-circle-icon {
  background: url('chrome-extension://__MSG_@@extension_id__/images/circle_orange13.png') no-repeat;
  background-position: 4px 5px;
  background-size: 50%;
  opacity: 0.6;
}

.gpme-title-unfolded:hover,
.gpme-comments-title-unfolded:hover,
.gpme-title-folded > .gpme-title-clickarea:hover,
.gpme-comments-title-folded > .gpme-comments-title-clickarea:hover {
  cursor: pointer;
}
.gpme-title-unfolded:hover .gpme-fold-icon,
.gpme-title-folded > .gpme-title-clickarea:hover .gpme-fold-icon,
.gpme-comments-title-unfolded:hover .gpme-fold-icon,
.gpme-comments-title-folded > .gpme-comments-title-clickarea:hover .gpme-fold-icon {
  color: #333333;
}

/*
 * Inside unfolded title bar
 */

.gpme-fold-icon.gpme-fold-icon-unfolded-left {
  padding: 0 6px;
  margin-top: -4px;
  float: left;
}
.gpme-fold-icon.gpme-fold-icon-unfolded-right {
  padding: 0 7px;
  margin-top: -4px;
  float: right;
}
.gpme-folded .gpme-fold-icon-unfolded-left {
  display: none;
}
.gpme-folded .gpme-fold-icon-unfolded-right {
  display: none;
}

/*
 * Title: inside folded title bar
 */

.gpme-title-folded > div /* .gZgCtb */ {
  line-height: 22px;
  /* Copied from .gZgCtb, so that it works for Start G+ as well */
  overflow: hidden;
  text-overflow: ellipsis;
}

.gpme-title-folded img {
  height: 20px; 
  float: none; /* User photos must be inline, not floating */
  vertical-align: -27%; /* so it doesn't shift the text down */
} 
/* User photos */
.gpme-title-folded .gpme-title-sender img {
  width: 20px;
  margin: 0 5px 0 0;
} 
/* Other images */
.gpme-title-thumbnails {
  float: right;
  margin-right: 7px;
}
.gpme-title-thumbnails > img {
  margin: 0 0 0 5px;
  max-width: 60px;
  opacity: 0.5;
} 


/* Injected mobile/checkin icons */
div.gpme-title-folded .gpme-title-icons { /* "span" coz need to be more specific than G+ */
  vertical-align: -27%;
  margin: 0;
  float: none; /* Override hangout live icon's float left */
  display: inline-block; /* For hangout live icon */
}

/*
 * Right button area
 */

.gpme-button-area {
  float: right;
  height: 20px; /* Must match height of gpme-comment-count-bg or get weird space */
  width: 21px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin-left: 3px;
}
/* No longer needed, now that red is no longer a button
.gpme-button-area:hover {
  box-shadow: 0 0 5px 1px rgba(128, 128, 128, 0.7);
  -webkit-box-shadow: 0 0 5px 1px rgba(128, 128, 128, 0.7); 
  -moz-box-shadow: 0 0 5px 1px rgba(128, 128, 128, 0.7); 
}
.gpme-button-area:active {
  box-shadow: 0 0 2px 1px rgba(128, 128, 128, 0.7);
  -webkit-box-shadow: 0 0 2px 1px rgba(128, 128, 128, 0.7); 
  -moz-box-shadow: 0 0 2px 1px rgba(128, 128, 128, 0.7); 
}
*/

.gpme-mute-button {
  /* http://findicons.com/icon/70079/mute */
  background: url('chrome-extension://__MSG_@@extension_id__/images/mute21.png') no-repeat;
}
.gpme-mark-read-button {
  /* http://findicons.com/icon/267830/checkmark?id=268147 */
  background: url('chrome-extension://__MSG_@@extension_id__/images/checkmark21.png') no-repeat;
}
.gpme-mute-button,
.gpme-mark-read-button {
  display: none;
}
.gpme-mute-button:hover ,
.gpme-mark-read-button:hover {
  cursor: pointer;
}
.gpme-enh.gpme-read .gpme-button-area:not(.gpme-new-comments):hover > .gpme-mute-button,
.gpme-enh:not(.gpme-read) .gpme-button-area:hover > .gpme-mark-read-button,
.gpme-button-area.gpme-new-comments:hover > .gpme-mark-read-button {
  display: block;
  width: 21px;
  height: 20px;
  background-color: #CCC;
}
.gpme-button-area:hover > .gpme-mute-button:active,
.gpme-button-area:hover > .gpme-mark-read-button:active { /* Inset shadow & shift down */
  box-shadow: inset 0 0 3px 1px rgba(128, 128, 128, 0.5);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(128, 128, 128, 0.5);
  -moz-box-shadow: inset 0 0 3px 1px rgba(128, 128, 128, 0.5);
  background-position: 0 1px; 
}

/*
 * Left button area
 */

.gpme-button-area-left { /* To match gpme-button-area */
  float: left;
  height: 20px;
  width: 21px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

/*
 * Comment counter
 */

.gpme-comment-count-container.gpme-hide {
  display: none; /* hide if no comments and no highlight */
}

/* Default in case injectCSS() fails:
 * Sometimes this happens with G+ for some reason.  Happened at times when I was reloading a profile page. */
.gpme-comment-count-bg {
  /* Rest from #gbi1a */
  background: url(https://ssl.gstatic.com/gb/images/h_bedf916a.png);
  background-position: 0 -274px;
  position: absolute;
  right: 5px;
  top: 3px;
  height: 20px;
  width: 21px;
}
.gpme-comment-count-nohilite > .gpme-comment-count-bg {
  background-position: -26px -274px; /* From #gbi1a.gbid */
}

/* Overrides injectCss(); add div just for higher specificity. */
div.gpme-comment-count-container > .gpme-comment-count-bg {
  position: static; /* Override the absolute */
  visibility: visible; /* Override the hidden when G+ notifications are slow on load */

  /* Float so that fg can overlap */
  float: right;
  margin-left: -21px; /* So that it doesn't push the fg to the left and keep fg from centering */

  /* For some reason on Win netbook, the height is 18px early, then 20px */
  height: 20px;
}
/* In commentbar this is different because of the nature of the top-margin
 * which has to be -1px for comments to overwrite that line above comments
 */
.gpme-comments-title-folded div.gpme-comment-count-container > .gpme-comment-count-bg {
  top: 2px;
}
/* Overrides injectCss(); add div just for higher specificity. */
div.gpme-comment-count-nohilite > .gpme-comment-count-fg,
div.gpme-comment-count-nohilite > .gpme-comment-count-bg {
  cursor: default; /* Override #gbi1a.gbid */
}

/* Default in case injectCSS() fails:
 * Sometimes this happens with G+ for some reason.  Happened at times when I was reloading a profile page. */
.gpme-comment-count-fg {
  text-align: center; /* Inherited from parent #gbgs1 */
  /* Rest from #gbi1 */
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  position: relative;
  width: 21px;
}
.gpme-comment-count-nohilite > .gpme-comment-count-fg {
  color: #999; /* From #gbi1.gbids */
}
/* Overrides injectCss(); add div just for higher specificity. */
div.gpme-comment-count-container > .gpme-comment-count-fg {
  visibility: visible; /* Override the hidden when G+ notifications are slow on load */
  height: 18px;
  line-height: 18px; /* Makes the -fg line up properly on Windows/Mac */
}

/* So that we can animate transition */
div.gpme-enh .gpme-comment-count-fg {
  display: inline-block;
  overflow: hidden;
}

/* Handle clicks on the highlighted icon */
.gpme-button-area:hover > .gpme-comment-count-container:not(.gpme-comment-count-nohilite) {
  cursor: pointer;
}
.gpme-button-area:hover > .gpme-comment-count-container:not(.gpme-comment-count-nohilite):active > .gpme-comment-count-bg {
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.4);
}
.gpme-button-area:hover > .gpme-comment-count-container:not(.gpme-comment-count-nohilite):active > .gpme-comment-count-fg {
  padding-top: 1px;
}


/*
 * Preview
 * :not(.En) means not muted
 */

/* Posts from Incoming stream */
.gpme-folded:not(.En) .Xs /* Find gray area with negative margins */ {
  margin-left: auto;
  margin-right: auto;
}

.gpme-preview-triangle {
  display: none;
}

.gpme-folded:not(.En) .gpme-preview-triangle {
  display: inline;
  position: absolute;
  left: -16px;
  top: 20px; /* -top of wrapper */
  height: 30px;
  width: 17px;
  background: url('chrome-extension://__MSG_@@extension_id__/images/preview-triangle.png') no-repeat;
}
.gpme-folded:not(.En) .gpme-preview-right > .gpme-preview-triangle {
  right: -16px;
  left: auto;
  background: url('chrome-extension://__MSG_@@extension_id__/images/preview-triangle-right.png') no-repeat;
}

.gpme-folded:not(.En) .bg { /* Context menu button */
  position: absolute;
  margin: 0;
  right: 2px;
  top: 3px;
  float:none;
  background-color: white;
/*  margin-right: -13px; /* Gained 44-13=31 px */
}
.gpme-folded:not(.En) .Om { /* C_MENU */
  z-index: 11;
}

.gpme-folded:not(.En) .gpme-post-wrapper {
  position: absolute;
  left: 435px; /* (31+60+26) + 137 shrinking + 195 width of sidebar - 20 slack; overridden dynamically */
  top: -20px; /* overridden dynamically */
  z-index: 10;
  width: 323px; /* OUTDATED: 574-(31+60+32) - 137 shrinking*/
  padding: 6px 0 6px 8px; /* Gained (21-8)*2=26px; actually, now moved the 8px to .a-f-i-p's padding-right */
  background: white;
  outline: 1px solid #CCC;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.gpme-folded:not(.En) .gpme-post-wrapper > .Ve /* _C_ITEM_GUTS */ {
  margin-left: 0; /* Gained 60px */
  margin-right: 0; /* OUTDATED: Gained 44-13=31 px */
  padding-right: 8px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* From Google News */
.gpme-folded:not(.En) .gpme-post-wrapper > .Ve::-webkit-scrollbar {
  width: 8px;
  background: transparent;
  overflow: visible;
}
.gpme-folded:not(.En) .gpme-post-wrapper > .Ve::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.gpme-folded:not(.En) .gpme-post-wrapper.gpme-hover > .Ve::-webkit-scrollbar-thumb {
  background-color: #CCC;
}
.gpme-folded:not(.En) .Ve::-webkit-scrollbar-button {
  height: 7px;
  display: block;
  background-color: transparent;
}

.gpme-folded:not(.En) .gpme-post-wrapper .Ex /* C_TITLE */{
  margin-right: 5px;
}

.gpme-folded:not(.En) .gpme-post-wrapper .gpr_tools { /* Google Plus Reply+ */
  display: none;
}

/* Shrink images to fit preview */
/* Pick less specific selector with max dimensions of both:
 * - Album photo (O-F-Nf-la)
 *   https://plus.google.com/103450266544747516806/posts/f8RKcEssKwL [limited]
 * - Youtube image preview (O-F-Ja)
 */ 
.gpme-folded:not(.En) .gpme-post-wrapper div.B-u-ac {
  height: auto !important; /* Overrides inline height */
}
.gpme-folded:not(.En) .gpme-post-wrapper img {
  max-width: 100%; /* Resizes image */
}

.gpme-link-comment {
  display: none
}
/* .eo is _C_FAKEINPUT_COMMENT */
.gpme-folded:not(.En) .gpme-post-wrapper .gpme-link-comment:not(.eo) /* not C_FAKEINPUT_COMMENT */ { /* Link */
  display: inline
}
.gpme-preview-enh .gpme-post-wrapper .eo.gpme-link-comment { /* Fake input -- my copy */
  display: block
}
.gpme-preview-enh .gpme-post-wrapper .eo:not(.gpme-link-comment) { /* Fake input -- original */
  display: none
}
/* NOTE: Replies and More incorrectly duplicates the non-style wf class -- should have only copied d-k,
 * but this makes it easier for us anyway */
.gpme-folded:not(.En) .gpme-post-wrapper .gpme-link-comment + .fd /* C_LINK_COMMENT -> Reply to Author */,
.gpme-folded:not(.En) .gpme-post-wrapper .gpme-link-comment + .eo /* Add a comment... */ {
  display: none
}

/*
 * Commentbar
 */

/* Hide in preview */
.gpme-folded:not(.En) .gpme-commentbar {
  display: none;
}

.gpme-comments-title-unfolded {
  float: left;
  margin-left: -12px;
  margin-top: -1px; /* To align with line above */
  /* So that gpme-comments-fold-icon-unfolded-bottom can find the bottom
   * Wow, for some reason 'relative' makes typing a comment really slow if
   * under a long list of comments.  But 'absolute' is fine. Strange. */
  position: absolute;
  width: 10px;
  height: 50px; /* Dynamically overridden */
  min-height: 24px; /* Constrain slideUp() */
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
}
.gpme-comments-title-folded {
  margin-top: -1px; /* To overwrite line above */
  margin-bottom: 1px; /* So "Add a comment" doesn't overwrite our border */
  padding: 6px 4px;
  position: relative;
}
.gpme-comments-title-folded > div {
  white-space: nowrap;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpme-comments-title-clickarea {
  height: 100%
}

.gpme-comments-folded .gpme-comments-title-unfolded {
  display:none
}
.gpme-comments-unfolded .gpme-comments-title-folded {
  display:none
}

/*
 * Inside unfolded comment bar
 */


.gpme-comments-unfolded .gpme-comments-title {
  display: none;
}

.gpme-comments-unfolded .gpme-comments-fold-icon-unfolded-top {
  padding: 4px 0;
}
.gpme-comments-unfolded .gpme-comments-fold-icon-unfolded-bottom {
  padding: 4px 0;
  position: absolute;
  bottom: 0;
}

/*
 * Inside folded comment bar
 */

.gpme-comments-folded:not(.En) .gpme-comments-fold-icon-unfolded-top {
  display: none;
}
.gpme-comments-folded:not(.En) .gpme-comments-fold-icon-unfolded-bottom {
  display: none;
}

.gpme-comments-snippet {
  padding: 0 6px;
}

/*
 * Bottombar
 */

div.gpme-bottombar { /* div for higher specificity */
  margin: 2px -21px -16px -21px; /* Break out of the paddings */
  border-top: 1px solid #EFEFEF; /* Make top edge lighter than C_FEEDBACK */
}
div.gpme-bottombar.gpme-hover:hover { /* Like C_FEEDBACK */
  cursor: pointer;
}
.gpme-folded:not(.En) div.gpme-bottombar {
  display: none;
}

.gpme-bottombar .gpme-title-unfolded {
  height: 12px;
}
.gpme-bottombar .gpme-fold-icon {
  line-height: 20px; /* To properly place from top of parent */
  margin-bottom: -2px; /* So that it doesn't push next post down, coz 20px > 16px */
}

/*
 * Content Pane buttons
 */

.gpme-content-buttons {
  float: right;
}

.gpme-content-button {
  display: inline-block;
  height: 16px;
  width: 16px;
  margin-left: 5px;
  opacity: 0.5;
}
.gpme-content-button:hover {
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(128, 128, 128, 0.7);
  -webkit-box-shadow: 0 0 2px 0 rgba(128, 128, 128, 0.7); 
  -moz-box-shadow: 0 0 2px 0 rgba(128, 128, 128, 0.7); 
  opacity: 1;
}
.gpme-content-button:active { /* Inset shadow & shift down */
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  margin-top: 1px;
  margin-bottom: -1px;
  opacity: 1;
}

/* List mode button */
.gpme-button-mark-all-read {
  display: none
}
.gpme-list-mode > .gpme-button-mark-all-read {
  display: inline-block;
  background: url('chrome-extension://__MSG_@@extension_id__/images/checkmarks16.png') no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/* Expanded mode buttons */
.gpme-button-expand-or-collapse-all {
  display: none;
}
.gpme-expanded-mode > .gpme-button-expand-or-collapse-all {
  display: block;
}
.gpme-button-expand-all {
  background: url(https://mail.google.com/mail/u/0/?ui=2&view=dim&iv=jby7jc4gx732&it=ic) no-repeat -40px -60px;
  display: none;
}
.gpme-button-collapse-all {
  background: url(https://mail.google.com/mail/u/0/?ui=2&view=dim&iv=jby7jc4gx732&it=ic) no-repeat -60px -60px;
  display: inline-block;
}
.gpme-button-expand-all {
  background: url(https://mail.google.com/mail/u/0/?ui=2&view=dim&iv=jby7jc4gx732&it=ic) no-repeat -40px -60px;
  display: none;
}
.gpme-button-expand-or-collapse-all.gpme-select-expand-all .gpme-button-collapse-all {
  display: none;
}
.gpme-button-expand-or-collapse-all.gpme-select-expand-all .gpme-button-expand-all {
  display: inline-block;
}

/*
 * HoverCard post listing
 */

.gpme-card-posts-info {
  width: 100px;
  padding: 3px 15px 3px 5px;
  text-align: right;
  opacity: 0;
  transition: opacity .90s linear;
  -moz-transition: opacity .90s linear;
  -ms-transition: opacity .90s linear;
  -o-transition: opacity .90s linear;
  -webkit-transition: opacity .90s linear;
}

/* Copied from "person in common" row (.c-W-Hc-kc on 2011-09-17) */
#gpme-card-posts-button {
  background: -o-linear-gradient(top,#f7f7f7,#f4f4f4);
  background: -webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#f4f4f4));
  background: -moz-linear-gradient(top,#f7f7f7,#f4f4f4);
  background: -o-linear-gradient(top,#f7f7f7,#f4f4f4);
  border-top: solid 1px #bcbcbc;
  margin-top: 5px;
  height: 32px;
  padding: 0;
  -webkit-user-select: none;
  position: relative;
}

#gpme-card-posts-button-text {
  text-align: center;
  cursor: default;
  font-size: 13px;
  font-weight: bold;
}

#gpme-card-posts-tabs {
  font-family: Arial, sans-serif;
  font-size: 15px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 5px;
}

.gpme-card-posts-tab  {
  padding: 7px 12px;
  float: left;
  cursor: pointer;
}
.gpme-card-posts-tab:hover {
  color: #dd4b39;
}

.gpme-card-posts-tab-selected {
  color: #dd4b39;
  font-weight: bold;
}

#gpme-card-posts {
  opacity: 0;
  /*
  position: fixed;
  z-index: 10000;
  */
  /*
  left: 20px;
  top: 20px;
  height: 200px;
  */
  background-color: white;
/*
  border: solid 1px #bcbcbc;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: opacity .30s linear;
  -moz-transition: opacity .30s linear;
  -ms-transition: opacity .30s linear;
  -o-transition: opacity .30s linear;
  -webkit-transition: opacity .30s linear;
*/
}

#gpme-card-posts-content {
  padding: 5px; /* Dunno why this messes with the table width */
  color: #000;
}
#gpme-card-posts-content > :not(#gpme-card-posts-cloud) {
  height: 285px; /* 370px; XXX Make it match the cloud for now as it's easier to animate */
  overflow-y: auto;
  overflow-x: hidden;
}
#gpme-card-posts-content > ::-webkit-scrollbar {
  background: transparent;
  overflow: visible;
  width: 15px;
}
#gpme-card-posts-content > ::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border: solid #fff;
}

.gpme-card-posts-top-scorebar {
  display: inline-block;
  width: 38px;
  height: 15px;
  margin-right: 3px;
  font-weight: bold;
  position: relative;
}
.gpme-card-posts-top-scorebar-fg {
  background-color: #DDD;
  height: 15px;
}
.gpme-card-posts-top-scorebar-text {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 2px;
}

.gpme-card-posts-item-content {
  padding: 5px 10px;
  cursor: pointer; /* Damn Chrome doesn't reset it properly */
  background-color: #f8f8f8;
  border: 1px solid transparent;
  border-left: 3px solid #CCC;
}
.gpme-card-posts-item-content:hover {
  background-color: #f0f0f0;
  border: 1px solid #bbb;
  border-left: 3px solid #CCC;
  cursor: pointer;
}

.gpme-card-posts-loading {
  text-align: center;
}

.gpme-card-posts-loading > div {
  background: #fff1a8;
  border-color: #fff1a8;
  color: #000;
  font-size: 13px;
  padding: 2px 15px;
  font-weight: bold;
  display: inline-block;
  border: 3px solid transparent;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.gpme-card-posts-api-error {
  background: #000;
  color: #fff;
}

/*
 * Compatibility with other extensions
 */

/* Usability Boost */
.gpme-folded:not(.En) .post_star {
  top: 3px;
}

/* G+ Tweaks */
.gpme-enh .bcGTweaksMute {
  top: 18px;
}
/* G+ Tweaks 2011-08-12 */
#content .a-m-C-S.a-C.a-m-C-wb-Qb .a-m-K-S.a-m-K-S-Rh-wb > div:first-child > div > div.gpme-content-buttons {
  width: auto; /* Override width: 100% */
}
#content .a-m-C-S.a-C.a-m-C-wb-Qb .a-m-K-S.a-m-K-S-Rh-wb > div:first-child > div:first-child {
  width: auto; /* Override width: 100% */
}

/* Usability Boost 2011-08-12 */
.gpme-titlebar .gpme-sep {
  visibility: visible !important;
}
.gpme-titlebar .gpme-sep > span {
  display: none;
}

/* Adhik */
.gpme-folded:not(.En) .ea-S-A /* FIXME */ {
  margin-right: 0; /* Overrides 20px */
}