.Reactions {
  position: relative;
  font-size: 11px;
  line-height: 18px;
  margin: 15px 0 0 0;
}

.React {
  position: relative;
  top: auto;
  right: auto;
}

.ReactButton {
  display: inline-block;
  margin: 0 5px;
  line-height: 18px;
  vertical-align: top;
  position: relative;
}

.UserReactionWrap {
  position: relative;
  line-height: 1;
  display: inline-block;
  margin-right: 3px;
}

.UserReactionWrap .PhotoWrapSmall {
  height: 24px;
  width: 24px;
}

.UserReactionWrap .YagaReactSprite,
.UserReactionWrap .YagaReactPhoto,
.UserReactionWrap .YagaReactEmoji {
  position: absolute;
  right: -2px;
  bottom: -2px;
}

.UserReactionWrap .YagaReactSprite {
  background-image: url("images/action-sprites-bordered.png");
}

.Item:hover .Reactions a {
  width: inherit;
}

.DataCounts {
  margin: 5px 0;
  text-align: center;
}

.CountTotal {
  display: block;
  line-height: 100%;
  font-size: 28px;
}

.CountItemWrap {
  width: auto;
  display: inline-block;
}

.CountItem {
  display: block;
  text-align: center;
  border: solid 2px transparent;
  padding: 4px;
  margin: 0 4px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  white-space: nowrap;
  overflow: visible;
}

.CountItem.Selected {
  background: rgba(55, 173, 227, 0.1);
  border: solid 2px rgba(55, 173, 227, 0.2);
  padding: 4px;
}

.RecordReactions {
  margin-top: 15px;
}
.RecordReactions + .Reactions {
  margin-top: 0;
}

.Reactions .Count {
  background: #555;
  color: white;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin-right: 4px;
  vertical-align: top;
  padding: 1px 0.8ex;
}
.Item .Reactions > * {
  visibility: hidden;
}
.Item .Reactions > *.Visible {
  visibility: visible;
}
.Item.Open .Reactions > *,
.Item:hover .Reactions > *,
.Item .Reactions > .FlagMenu {
  visibility: visible;
}

.Reactions > a.React > .YagaReactSprite,
.Reactions > a.React > .YagaReactPhoto,
.Reactions > a.React > .YagaReactEmoji {
  margin-right: 2px;
}

/* iPad/iPhone */
@media only screen and (device-width: 768px),
  only screen and (max-device-width: 480px) {
  .Item .Reactions > * {
    visibility: visible;
  }
}

.YagaReactSprite,
.YagaReactPhoto,
.YagaReactEmoji {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  font-size: 16px;
  vertical-align: bottom;
}

.YagaReactPhoto > .YagaReactionImage {
  max-width: 16px;
  max-height: 16px;
}

.YagaReactSprite {
  background-image: url("images/action-sprites.png");
  background-position: 16px 16px;
  background-repeat: no-repeat;
}

input + .YagaReactSprite {
  vertical-align: middle;
}

.ReactHappy {
  background-position: -4px -4px;
}
.ReactHappy2 {
  background-position: -28px -4px;
}
.ReactSmiley {
  background-position: -52px -4px;
}
.ReactSmiley2 {
  background-position: -76px -4px;
}
.ReactTongue {
  background-position: -100px -4px;
}
.ReactTongue2 {
  background-position: -124px -4px;
}
.ReactSad {
  background-position: -148px -4px;
}
.ReactSad2 {
  background-position: -172px -4px;
}
.ReactWink {
  background-position: -196px -5px;
}
.ReactWink2 {
  background-position: -220px -4px;
}
.ReactGrin {
  background-position: -244px -4px;
}
.ReactShocked {
  background-position: -268px -4px;
}
.ReactConfused {
  background-position: -292px -4px;
}
.ReactConfused2 {
  background-position: -316px -4px;
}
.ReactNeutral {
  background-position: -340px -4px;
}
.ReactNeutral2 {
  background-position: -364px -4px;
}
.ReactWondering {
  background-position: -4px -28px;
}
.ReactWondering2 {
  background-position: -28px -28px;
}
.ReactPointUp {
  background-position: -52px -28px;
}
.ReactPointRight {
  background-position: -76px -28px;
}
.ReactPointDown {
  background-position: -100px -28px;
}
.ReactPointLeft {
  background-position: -124px -28px;
}
.ReactThumbsUp {
  background-position: -148px -28px;
}
.ReactThumbsUp2 {
  background-position: -172px -28px;
}
.ReactShocked2 {
  background-position: -196px -28px;
}
.ReactEvil {
  background-position: -220px -28px;
}
.ReactEvil2 {
  background-position: -244px -28px;
}
.ReactAngry {
  background-position: -268px -28px;
}
.ReactAngry2 {
  background-position: -292px -28px;
}
.ReactHeart {
  background-position: -316px -28px;
}
.ReactHeart2 {
  background-position: -340px -28px;
}
.ReactHeartBroken {
  background-position: -364px -28px;
}
.ReactStar {
  background-position: -4px -52px;
}
.ReactStar2 {
  background-position: -28px -52px;
}
.ReactGrin2 {
  background-position: -52px -52px;
}
.ReactCool {
  background-position: -76px -52px;
}
.ReactCool2 {
  background-position: -100px -52px;
}
.ReactQuestion {
  background-position: -124px -52px;
}
.ReactNotification {
  background-position: -148px -52px;
}
.ReactWarning {
  background-position: -172px -52px;
}
.ReactSpam {
  background-position: -196px -52px;
}
.ReactBlocked {
  background-position: -220px -52px;
}
.ReactEye {
  background-position: -244px -52px;
}
.ReactEye2 {
  background-position: -268px -52px;
}
.ReactEyeBlocked {
  background-position: -292px -52px;
}
.ReactFlag {
  background-position: -316px -52px;
}
.ReactBrightnessMedium {
  background-position: -340px -52px;
}
.ReactQuotesLeft,
.ReactQuote {
  background-position: -364px -52px;
}
.ReactMusic {
  background-position: -4px -76px;
}
.ReactPacman {
  background-position: -28px -76px;
}
.ReactBullhorn {
  background-position: -52px -76px;
}
.ReactRocket {
  background-position: -76px -76px;
}
.ReactFire {
  background-position: -100px -76px;
}
.ReactHammer {
  background-position: -124px -76px;
}
.ReactTarget {
  background-position: -148px -76px;
}
.ReactLightning {
  background-position: -172px -76px;
}
.ReactShield {
  background-position: -196px -76px;
}
.ReactCheckmarkCircle {
  background-position: -220px -76px;
}
.ReactLab {
  background-position: -244px -76px;
}
.ReactLeaf {
  background-position: -268px -76px;
}
.ReactDashboard {
  background-position: -292px -76px;
}
.ReactDroplet {
  background-position: -316px -76px;
}
.ReactFeed {
  background-position: -340px -76px;
}
.ReactSupport {
  background-position: -364px -76px;
}
.ReactHammer2 {
  background-position: -4px -100px;
}
.ReactWand {
  background-position: -28px -100px;
}
.ReactCog {
  background-position: -52px -100px;
}
.ReactGift {
  background-position: -76px -100px;
}
.ReactTrophy {
  background-position: -100px -100px;
}
.ReactMagnet {
  background-position: -124px -100px;
}
.ReactSwitch {
  background-position: -148px -100px;
}
.ReactGlobe {
  background-position: -172px -100px;
}
.ReactBookmark {
  background-position: -196px -100px;
}
.ReactBookmarks {
  background-position: -220px -100px;
}
.ReactStar3 {
  background-position: -244px -100px;
}
.ReactInfo {
  background-position: -268px -100px;
}
.ReactInfo2 {
  background-position: -292px -100px;
}
.ReactCancelCircle {
  background-position: -316px -100px;
}
.ReactCheckmark {
  background-position: -340px -100px;
}
.ReactClose {
  background-position: -364px -100px;
}

.MenuItems a:hover .YagaReactSprite {
  background-image: url("images/action-sprites-white.png");
}

#ActionIcons {
  margin-top: 10px;
}

#ActionIcons img.Selected {
  background: rgba(0, 0, 0, 0.15);
}

#Content .BoxFilter.BoxBestFilter {
  display: block;
}

/* Missing sprite background offsets */
.Sprite.SpBestOf {
  background-position: -246px -5px;
}

.Sprite.SpBadge {
  background-position: -245px -52px;
}