/* -----------------------------------------------------------------------------
Engine:      Gametize
Author:     Gametize Pte Ltd
Description:  User game widget elements
----------------------------------------------------------------------------- */

.user-widget-wrap {
  position : fixed; bottom : 0px; left : 0; width : 100%; height: 80px;
  z-index : 102; background : transparent url(/images/core/consumer/game/user_widget_bg.png) ; color : #fff; text-transform : uppercase;
}

  .user-widget-wrap a, .user-widget-wrap a:hover { color : #e74c84 }
  .user-widget { position : relative }

  /* Columns */
  .user-widget-col { position : absolute; top : 10px }
  .user-widget-col-0 { left : 10px; width : 300px }  /* Only if col 1, 2, 3 and user widget photo not in use */
  .user-widget-col-1 { left : 90px; width : 220px }
  .user-widget-col-2 { left : 330px; width : 200px }
  .user-widget-col-3 { right : 10px; width : 300px }
  .user-widget-col-1-public { text-transform : none; width : 400px }

  /* User Photo */
  .user-widget-photo-wrap { position : absolute; width : 60px; height : 60px; top : 10px; left : 10px }
    .user-widget-photo { border : 4px solid #bbb }

  /* Name */
  a.user-widget-name { color : #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width : 220px; }
  a.user-widget-name:hover { color : #fff; text-decoration : none }

  /* Points */
  .user-widget-kpi-wrap { display : block; margin-bottom : 10px }
  .user-widget-points {
    background : #555; padding : 2px 10px; margin-right : 10px; display : inline-block; float : left; font-size : 0.875em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .user-widget-points span { font-weight : bold }

  /* Notifications */
  .user-widget-notification { position : relative; display : inline-block; float : left; width : 25px; height : 25px }
    .user-widget-notification-icon, .user-widget-notification-count { position : absolute }
    .user-widget-notification-icon {
      background : transparent url(/images/core/consumer/game/icon_notification.png);
      width : 16px; height : 18px; display : block; left : 0; top : 3px
    }
    .user-widget-notification-count {
      top : 0; right : -4px; background : #c90932; padding : 2px 3px; font-size : 0.725em; line-height : 1; color : white; text-decoration : none; display :none;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
      .user-widget-notification-count.active { display : block }

  .user-widget-links { font-size : 0.625em }


  /* Progress Bars */
  .user-widget-quest-progress, .user-widget-challenge-progress { top : 10px; width : 200px }
  .user-widget-quest-progress { left : 10px }
  .user-widget-challenge-progress { left : 230px }

    .user-widget-progressbar-wrap { margin-bottom : 8px }
    .user-widget-progressbar-outer {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px; height : 22px; background : #fff;
    }

      .user-widget-progressbar-inner-quest, .user-widget-progressbar-inner-challenge {
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; height : 22px; background : #85d02f
      }
      .user-widget-progressbar-default { width : 5px }
      .user-widget-progressbar-text { font-size : 0.625em; line-height : 2.5; color : #111 }

  /* Buttons */
  a.widget-button {
    padding : 5px; background : #b91d54; color : #fff; text-align : center; display : inline-block; min-width : 60px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  a.widget-button:hover { color : #fff; text-decoration : none }
  a.widget-button.noicon { padding : 20px 10px }
  .widget-button span { display : block; font-size : 0.625em; line-height : 2 }

  .widget-button-icon { background-image : url(/images/core/consumer/game/user_widget_navigation_sprite.png); width : 26px; height : 26px; display : inline-block; vertical-align : middle }
  .widget-button-icon.rewards { background-position : 0 0 }
  .widget-button-icon.wins { background-position : -26px 0 }

@media screen and (max-width: 767px) {
  .user-widget-wrap-toggle {
    position : fixed; bottom : 0px; left : 0; width : 100%; height: 40px; cursor : pointer;
    z-index : 102; background : transparent url(/images/core/consumer/game/user_widget_toggle_bg.png) top right; color : #fff; text-transform : uppercase;
  }
    .user-widget-wrap-toggle div { padding : 10px }
    .user-widget-wrap-toggle.active { bottom : 145px; background-position : bottom right }

  .user-widget-wrap { height: 150px; display : none }
  .user-widget-wrap.user-widget-wrap-public { height: 80px; display : block }
  .user-widget-col-2 { left : 90px; top : 80px; width : 220px }
  .user-widget-col-3 { left : 90px; top : 165px; width : 220px }
  .user-widget-col-1-public { width : 300px }
  .user-widget-links { padding : 0; font-size: 0.75em; line-height: 1.5; }
}