/*
  Basic AvatarGridPanel
  ContextClassName is used to scope context specific styles

  <div class="AvatarGridPanel ContextClassName">
    <h3 class="PanelHead">
      <span class="PanelHeadActions"><a href>Action</a></span>
      <span class="PanelHeadLabel">Panel Title</span>
    </h3>
    <div class="PanelBody">
      <ul class="AvatarGrid">
        <li class="AvatarContainer">
          <div class="AvatarElement">
            <div wicket:id="AvatarStatus" class="AvatarStatus Online"/>
            <a href><img class="AvatarImage"/></a>
            <span class="AvatarUsername">Username</span>
            <!-- Any Extended Avatar Views (Fan, Favorite, Friend, etc) Add Components Here -->
          </div>
        </li>
        <div style="clear:both;"></div>
        <div class="AvatarPager">[dataview navigator]</div>
      </ul>
      <div style="clear:both;"></div>
    </div>
  </div>

  TODO: Pull in Manage Button for "My Top Friends" (User Profile Page)
*/

div.AvatarGridPanel {
  margin: 0px !important;
}

div.AvatarGridPanel div {
  margin: 0px !important;
}

div.AvatarGridPanel h3.PanelHead {
  background-color: #4AB2D5 !important;
  color: #092030 !important;
  display: block;
  font-size: 11px;
  font-weight: bold;
  height: 16px;
  overflow: hidden;
  padding: 12px;
}

div.AvatarGridPanel h3.PanelHead.FriendsIcon {
  background: #4AB2D5 url(/images/icons/friends_black.gif) no-repeat scroll 10px !important;
  text-indent: 30px;
}

div.AvatarGridPanel.ProfileFriends h3.PanelHead {
  background: #EAEAEA url( /images/profile/bg_subtitle_friends.jpg ) repeat-x scroll 0%;
  color: #092030;
  height: 18px;
  padding: 12px;
}

div.AvatarGridPanel.DashboardOnlineNow div.PanelHead {
}

div.AvatarGridPanel span.PanelHeadLabel {
  float: left;
}

/* Button, URLs in the PanelHead */
div.AvatarGridPanel h3.PanelHead span.PanelActions {
  float: right;
}

/* Buttons, URLs in the PanelBody */
div.AvatarGridPanel span.PanelActions {
}

div.AvatarGridPanel a.AcceptAllLink {
  background: transparent url( /images/buttons/accept_all.png ) no-repeat scroll left top;
  display: block;
  float: left;
  height: 20px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 8px;
  text-indent: -9999px;
  width: 80px;
}

div.AvatarGridPanel a.DeclineAllLink {
  background: transparent url( /images/buttons/decline_all.png ) no-repeat scroll left top;
  display: block;
  float: left;
  height: 20px;
  text-indent: -9999px;
  width: 80px;
}

div.AvatarGridPanel a.AcceptAllLink:hover,
div.AvatarGridPanel a.DeclineAllLink:hover {
  background-position: 0px -41px;
}

div.AvatarGridPanel div.PanelBody,
div.AvatarGridPanel div.PanelFooter {
  background-color: #EAEAEA;
  margin: 0px !important;
  padding: 10px;
}

div.AvatarGridPanel.Profile div.PanelBody {
  padding: 10px 25px;
}

div.AvatarGridPanel.ProfileFriends div.PanelBody {
  padding: 10px 45px;
}

div.AvatarGridPanel.DashboardFans div.PanelBody {
  /*padding: 10px 5px !important;*/
}

/* IE HACK */
div.AvatarGridPanel.DashboardFans div.AvatarGrid {
  width: 185px !important
}

div.AvatarGridPanel.DashboardFans div.PanelFooter {
  padding: 0px;
}

div.AvatarGridPanel.DashboardOnlineNow div.PanelBody {
  padding: 10px 30px;
}

div.AvatarGridPanel.DashboardOnlineNow div.PanelFooter {
}

div.AvatarGrid {
  margin: 0px !important;
  padding: 0px !important;
  width: auto !important;
}

div.AvatarGrid ul {
  margin: 0px !important;
  width: auto !important;
}

div.AvatarGrid li.AvatarContainer {
  width: auto !important;
  height: auto !important;
  margin: 0px 5px 5px 0px !important;
  float: left;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}

div.AvatarElement {
  float: none;
  /*height: 117px;*/
  position: relative;
  width: 80px;
  margin: 0px !important;
}

div.AvatarElement img {
  border: none;
}

div.AvatarElement a {
  margin: 0px 0px 0px 0px !important;
}

div.AvatarElement div.AvatarStatus.Online {
  background: transparent url( "/images/icons/online_green_sm.gif" ) no-repeat scroll 0px 50% !important;
}

div.AvatarElement div.AvatarStatus.Offline {
  background: transparent url( "/images/icons/offline_red_sm.gif" ) no-repeat scroll 0px 50% !important;
}

div.AvatarElement div.AvatarStatus {
  height: 11px;
  left: 64px;
  margin: 0px !important;
  position: absolute;
  top: 4px;
  width: 11px;
  z-index: 0;
}

div.AvatarElement span.AvatarUsername {
  background: #4AB2D5 none repeat scroll 0%;
  color: #FFFFFF;
  font-weight: bold;
  display: block;
  font-size: 11px;
  height: 17px;
  overflow: hidden;
  padding-top: 3px;
  text-align: center;
  width: 80px;
  margin: 0px !important;
}

div.AvatarElement span.AvatarLabel {
  display: block;
  font-size: 11px;
  height: 17px;
  padding-top: 3px;
  text-align: center;
  width: 80px;
}

/* Remove Friend/Participant Button */
li.AvatarContainer a.RemoveLink {
  background: transparent url( "/images/buttons/remove_pink.gif" ) no-repeat top left;
  text-indent: -9999px;
  display: block;
  width: 64px;
  height: 20px;
  float: left;
  margin: 3px 8px !important;
}

li.AvatarContainer a.RemoveLink:hover {
  background-position: 0 -20px;
}

/* Friends Request Accept/Decline buttons*/
li.AvatarContainer a.yes {
  background: transparent url( "/images/buttons/yes.png" ) no-repeat top left;
  text-indent: -9999px;
  display: block;
  width: 39px;
  height: 20px;
  float: left;
  margin: 3px 0px 0px 0px !important;
}
li.AvatarContainer a.no {
  background: transparent url( "/images/buttons/no.png" ) no-repeat top left;
  text-indent: -9999px;
  display: block;
  width: 33px;
  height: 20px;
  float: left;
  margin: 3px 0px 0px 8px !important;
}
li.AvatarContainer a.yes:hover,
  div.AvatarContainer a.no:hover {
  background-position: 0 -35px;
}
li.AvatarContainer a.accept_all {
  background: transparent url( "/images/buttons/accept_all.png" ) no-repeat top left;
  text-indent: -9999px;
  display: block;
  width: 80px;
  height: 20px;
  float: left;
  margin: 0px 8px 10px 10px !important;
}
li.AvatarContainer a.decline_all {
  background: transparent url( "/images/buttons/decline_all.png" ) no-repeat top left;
  text-indent: -9999px;
  display: block;
  width: 80px;
  height: 20px;
  float: left;
  margin: 0px 0px 0px 0px !important;
}
li.AvatarContainer a.accept_all:hover,
  div.AvatarContainer a.decline_all:hover {
  background-position: 0 -41px;
}

/* Cancel Friend Invitation Button */
li.AvatarContainer a.CancelLink {
  background: transparent url( "/images/buttons/cancel_pink.gif" ) no-repeat top left;
  text-indent: -9999px;
  display: block;
  width: 61px;
  height: 20px;
  float: left;
  margin: 3px 8px 10px 10px !important;
}
li.AvatarContainer a.CancelLink:hover {
  background-position: 0 -20px;
}

/*** Leader Boards (Profile Landing Page) ***/

div.AvatarGridPanel.NewProfile div.AvatarGrid,
div.AvatarGridPanel.ProfileLeader div.AvatarGrid,
div.AvatarGridPanel.RatingLeader div.AvatarGrid {
  margin: 0px 0px 10px 0px !important;
}
div.AvatarGridPanel.NewProfile div.AvatarGrid {
  background-color: #ffffff;
}

div.AvatarGridPanel.NewProfile h3.PanelHead,
div.AvatarGridPanel.ProfileLeader h3.PanelHead,
div.AvatarGridPanel.RatingLeader h3.PanelHead {
  background: #4AB2D5 url( /images/icons/events_black.gif ) no-repeat scroll 10px 50%;
}

div.AvatarGridPanel.RatingLeader div.PanelBody,
div.AvatarGridPanel.ProfileLeader div.PanelBody {
  padding: 10px;
}
div.AvatarGridPanel.NewProfile div.PanelBody {
  padding: 10px 35px;
}

div.AvatarGridPanel.ProfileLeader li.AvatarContainer,
div.AvatarGridPanel.RatingLeader li.AvatarContainer {
  background: transparent url( /images/profile/avatar-bkd.jpg ) no-repeat scroll 0px 0px;
  height: 185px !important;
  margin: 0px 5px 5px 0px !important;  
  width: 185px !important;
}
div.AvatarGridPanel.NewProfile li.AvatarContainer {
  height: 110px !important;
  margin: 0px !important;
  width: 90px !important;
}

div.AvatarGridPanel.ProfileLeader div.AvatarElement,
div.AvatarGridPanel.RatingLeader div.AvatarElement {
  top: 30px;
  left: 52px;
}
div.AvatarGridPanel.NewProfile div.AvatarElement {
  top: 5px;
  left: 5px;
}

div.AvatarGridPanel.ProfileLeader div.AvatarElement div.AvatarPosition,
div.AvatarGridPanel.RatingLeader div.AvatarElement div.AvatarPosition {
  background-color: #FF3BAB;
  color: #FFFFFF;
  float: left;
  height: 20px;
  left: -42px;
  line-height: 20px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: -20px;
  width: 20px;
  z-index: 900;
}

div.AvatarGridPanel.ProfileLeader div.AvatarElement div.AvatarLabel {
  color: #84929C;
  padding-top: 10px;
  text-align: center;
}

div.AvatarGridPanel.RatingLeader div.AvatarElement div.AvatarRating {
  background: #12303F url(/images/profile/voted-bkd.png) repeat-x scroll left top;
  bottom: -45px;
  color: #55636B;
  height: 22px;
  left: -42px;
  overflow: hidden;
  position: absolute;
  width: 165px;
}

div.AvatarGridPanel.RatingLeader div.AvatarElement div.AvatarRating ul {
  float: left;
  margin: 0px 0px 0px 6px !important;
  width: auto !important;
}

div.AvatarGridPanel.RatingLeader div.AvatarElement div.AvatarRating ul li {
  background: #12303F url(/images/profile/voted-star.png) no-repeat scroll left top;
  height: 22px;
  margin: 0px 5px 0px 0px;
  text-indent: -9999px;
  width: 11px;
}

div.AvatarGridPanel.RatingLeader div.AvatarElement div.AvatarRating p.AvatarLabel {
  float: right;
  margin: 5px 5px 0px 0px !important;
}

div.AvatarGrid div.AvatarPager {
  margin: 0px !important;
}