@import '../../shared/mixins',
        '../../shared/reset',
        '../../shared/about-dark';

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

$popoverHoverColor: #5a70b0;

html, body { min-height: 100%; }

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #697ecc;
  @include radial-gradient(center, circle cover, #87a3f5, #697ecc);
}

.container {
  margin: 150px auto 50px;
  width: 640px;
  text-align: center;

  .user { text-align: left; }
}

.user {
  position: relative;
  height: 32px;
  padding: 8px 12px 8px 8px;
  @include inline-block;

  img {
    float: left;
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }

  h5 {
    float: left;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px rgba(black, .4);

    small {
      display: block;
      font-size: 9px;
      font-weight: bold;
      text-transform: uppercase;
      color: #364168;
      color: rgba(black, .6);
      text-shadow: 0 1px rgba(white, .3);
    }
  }

  &:hover ul {
    padding: 4px 0 6px;
    visibility: visible;
    opacity: 1;
  }

  ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #d9e3fa;
    border: 1px solid;
    border-color: #777 #6c6c6c #666;
    border-radius: 5px;
    @include transition(.2s ease-out);
    @include transition-property(opacity, padding, visibility);
    @include linear-gradient(top, #eef3fe, #d9e3fa);
    @include box-shadow(inset 0 0 0 1px rgba(white, .9), 0 1px 2px rgba(black, .1));
  }

  ul:before, ul:after, li:first-child:after { // Arrow
    content: '';
    display: block;
    position: absolute;
    left: 15px;
    width: 0;
    height: 0;
    border: 7px outset transparent;
  }

  ul:before { // Arrow border
    bottom: -14px;
    border-top: 7px solid #555;
  }

  li:first-child:after { // Arrow inner shadow
    bottom: -13px;
    border-top: 7px solid white;
  }

  ul:after { // Arrow background
    bottom: -12px;
    border-top: 7px solid #d9e3fa;
  }

  li {
    padding: 0 12px;
    font-size: 11px;
    color: #838ca2;
    text-shadow: 0 1px white;

    &.sep {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid #b4bbce;
      @include box-shadow(inset 0 1px rgba(white, .6));
    }

    a {
      display: block;
      position: relative;
      margin: 0 -13px;
      padding: 0 20px 0 12px;
      color: #313a4f;
      text-decoration: none;
      border: 1px solid transparent;

      &:hover {
        color: white;
        text-shadow: 0 1px rgba(black, .3);
        background: $popoverHoverColor;
        border-color: $popoverHoverColor darken($popoverHoverColor, 8%) darken($popoverHoverColor, 12%);
        @include linear-gradient(top, lighten($popoverHoverColor, 8%), darken($popoverHoverColor, 5%));

        &:after { display: block; }
      }

      &:after {
        content: '';
        display: none;
        position: absolute;
        top: 50%;
        right: 5px;
        margin-top: -4px;
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-left-color: lighten($popoverHoverColor, 20%);
        border-left-color: rgba(white, .4);
      }
    }
  }
}
