app/assets/stylesheets/directives/wcs_army.css.scss
// we want to use the entity style as a base for teams as well, so it needs
// to be a mixin due to scss limitations.
@mixin entity-header {
  .name {
    float: left;

    font-size: 20px;
    font-weight: $extrabold;

    a {
      display: inline-block;
      
      &:hover {
      
      }
    }

    .flag {
      display: inline-block;
      height: 24px;
      width: 30px;
      float: left;
      margin-top: 3px;
      margin-right: 10px;
    }

    &:hover {
      .flag { width: 45px; }
    }
  }

  .stats {
    float: right;

    li {
      float: left;
      font-size: 16px;
      margin-left: 15px;

      * { vertical-align: middle; }
    
      .icon {
        margin-right: 5px;
      }
    
      .value {
        display: inline-block;
        width: 20px;
      
        text-align: left;
      }
    }

    li.supply .value { width: 30px; }

    li.gas .value,
    li.minerals .value { width: 35px; }
  }
}

.livestats {
  font-size: 12px;
}

// Note: check matches.css to match the right side army displays if you change
// anything here.
.army {
  .entity {
    @include entity-header;
    margin-bottom: 15px;
  }

  .units {
    clear: both;

    .unit {
      @include opacity(1.0);

      // TODO: since it's re-rendering the ng-repeat, this will not apply.
      // Find a way to make it apply.

      display: inline-block;
      margin: 0px 5px 5px 0px;
      padding: 3px;

      position: relative;

      .count {
        position: absolute;
        right: -4px;
        bottom: -4px;
        padding: 1px 3px;
        border: $gray-dark 1px solid;
      
        font-weight: bold;
        font-size: 10px;
        font-family: $font-small;

        background: white;
        @include border-radius(2px);
        @include opacity(0.9);
      }

      @include box-shadow(0px 0px 4px 1px rgba(150,150,150,0.1));

      &:hover {
        @include box-shadow(0px 0px 4px 1px rgba(100,100,100,0.2));
        cursor: pointer;
      }
    }

    .inactive {
      @include opacity(0.1);
      // display: none !important;
    }
  }
}

// TODO: we need subtle and cool hover effects for links and stuff..
.highlight{
  .entity {
    .name .flag {
      width: 45px;
    }
  }
}

// Ah screw it, just put the armychart CSS in here

.armychart {

  // Notes on the bars:
  // - overflow: hidden all the way, to hide away "0" titles and what have 
  // you, of course!
  //
  // Also, the bars stuff is not nearly as generic as I would want it to..
  // but screw it. I was expecting a "nah, remove it, it's ugly" from DJ :P
  //
  // And be careful when changing anything here.. the entire setup is very
  // ..finely tuned :)

  position: relative;

  .bars, .bars .bar, .bars .wrap {
    text-align: center;
  }

  .bars {
    // @include box-shadow(0px 0px 6px rgba(0,0,0,0.2));

    // We want the team label to be outside the bars but still hide overflow..
    padding-top: 15px;
    overflow: hidden;

    margin: 0px 18px;

    position: relative;

    // .label is normally in the bar, but for the last bar it sits outside
    // instead of a bar.
    .label {
      display: inline-block;
      padding: 2px 4px;
      vertical-align: middle;

      font-family: Verdana, sans-serif;
      font-size: 10px;
      font-weight: bold;

      height: 10px;
      line-height: 10px;
      @include border-radius(2px);
      
      // yea I know it's not black - opacity is still inherited!
      background: black;
      color: white;
    }

    // bar wrappers, with size
    .bars-wrap, .team-bar {
      text-align: left;
      white-space: nowrap;
    }
    
    .team-bar {
      display: inline-block;
      position: relative;
      height: 25px;

      .label {
        display: block;
        position: absolute;
        top: -15px;
        right: 1px;
        
        text-align: right;
        @include border-radius(none);
        background: transparent;
        color: black;
        
        padding-right: 10px;
        
        .arrow {
          display: inline-block;
          width: 0px;
          height: 0px;
          border: black 5px solid;
          border-color: transparent;
          border-right-color: black;
          position: absolute;
          right: 0px;
        }
      }

      // the last bar should just be able to fill out the entire wrapper
      // because we never want it transition inwards to leave the background
      // exposed ..
      &:nth-last-child(1) {
        width: 1024px !important;
      }
    }

    .team2 > .label {
      left: 0px;
      text-align: left;
      padding-right: 0px;
      padding-left: 10px;

      .arrow {
        border-color: transparent;
        border-left-color: black; 
        left: 1px;
      }
    }

    .normal {
      height: 25px;
      // line-height: 23px;

      .bar {
        height: 25px;
        // line-height: 23px;
      }
    }

    .tiny {
      height: 15px;
      line-height: 12px;

      .label {
        font-size: 8px;
        padding: 1px 2px;
        height: 8px;
        line-height: 8px;
      }

      .bar {
        height: 15px;
        line-height: 12px;
      }
    }

    // all bars
    // highlighted bar (grp-entity)
    .bar {
      display: inline-block;
      @include transition(all 0.3s ease);

      // This will "desaturate" the colors to appear less.. aggressive
      @include opacity(0.75);
      
      &:hover {
        @include opacity(1.0);
        cursor: pointer;
      }

      // Also do not display labels
      .label {
        display: none;
      }
    }

    .highlight {
      @include opacity(1.0);
    }

    .army {
      .wrap {
        // @include background(linear-gradient(#FFF, #AAA));
        // border: $gray-dark 1px solid;

        &:nth-last-child(1) {
        }
      }

      .strength {
      }
    }

  }
}

#timebar {
  position: absolute;
  top: 12px;
  display: inline-block;
  z-index: 50;
  
  span {
    background: #000;
    display: inline-block;
  }
  
  #timecode {
    position: absolute;
    bottom: -13px;
    left: -18px;

    span {
      display: inline-block;
      font-family: $font-small;
      font-weight: bold;
      font-size: 11px;
      background: #dbdee3;
      border: #000 2px solid;
      @include border-radius(2px);
    }
  }
}

#etip {
  text-transform: uppercase;
  font-size: 10px;
  font-family: $font-small;
  z-index: 50;
  padding: 4px 5px 4px 7px;
  top: 540px;
  background: #dbdee3;
  line-height: 12px;

  .rltitle, .firstlossrow {
    margin-bottom: 2px;
  }
  .rltitle span {
    @include opacity(0.9);
    background: #dbdee3;
    font-size: 10px;
    font-family: $font-small;
  }

  div {
//    @include opacity(0.7);
  }

  .colorsquare {
//    @include opacity(0.7);
    width: 10px;
    display: inline-block;
  }
  .value {
//    @include opacity(0.7);
    display: inline-block;
    border: $gray-dark 1px solid;
    font-weight: bold;
    background: white;
    @include border-radius(2px);
  }
}