/*!
 *  Font Awesome 3.0.2
 *  the iconic font designed for use with Twitter Bootstrap
 *  -------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation
 *  can be found at: http://fortawesome.github.com/Font-Awesome/
 *
 *  License
 *  -------------------------------------------------------
 *  - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
 *
 *  Contact
 *  -------------------------------------------------------
 *  Email: dave@davegandy.com
 *  Twitter: http://twitter.com/fortaweso_me
 *  Work: Lead Product Designer @ http://kyruus.com
 */

$fontAwesomePath:   "../fonts" !default;
$borderColor:       #eee;
$iconMuted:         #eee;
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

/*  Font Awesome styles
    ------------------------------------------------------- */
[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;

  /* sprites.less reset */
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}

/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: none;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}

/* makes sure icons active on rollover in links */
a {
  [class^="icon-"],
  [class*=" icon-"] {
    display: inline-block;
  }
}

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: -10%;
  font-size: 1.3333333333333333em;
}

.button, .nav {
  [class^="icon-"],
  [class*=" icon-"] {
    display: inline;
    /* keeps button heights with and without icons the same */
    &.icon-large { line-height: .9em; }
    &.icon-spin { display: inline-block; }
  }
}

.nav-tabs, .nav-pills {
  [class^="icon-"],
  [class*=" icon-"] {
    /* keeps button heights with and without icons the same */
    &, &.icon-large { line-height: .9em; }
  }
}

li, .nav li {
  [class^="icon-"],
  [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
    &.icon-large {
      /* increased font size for icon-large */
      width: 1.5625em;
    }
  }
}

ul.icons {
  list-style-type: none;
  text-indent: -.75em;

  li {
    [class^="icon-"],
    [class*=" icon-"] {
      width: .75em;
    }
  }
}

.icon-muted {
  color: $iconMuted;
}

// Icon sticked in corner of a block element
.sticked-icon{
    display: block;
    position: relative;
    padding-left: 5em;
    
    &[class^="icon-"]:before,
    &[class*="icon-"]:before{
        position: absolute;
        top: ms(1);
        left: ms(1);
        font-size: 4em;
    }
}

// Icon Borders
// -------------------------

.icon-border {
  border: solid 1px $borderColor;
  padding: .2em .25em .15em;
  @include border-radius(3px);
}

// Icon Sizes
// -------------------------

.icon-2x {
  font-size: 2em;
  &.icon-border {
    border-width: 2px;
    @include border-radius(4px);
  }
}
.icon-3x {
  font-size: 3em;
  &.icon-border {
    border-width: 3px;
    @include border-radius(5px);
  }
}
.icon-4x {
  font-size: 4em;
  &.icon-border {
    border-width: 4px;
    @include border-radius(6px);
  }
}

// Floats
// -------------------------

// Quick floats
.right { float: right; }
.left { float: left; }

[class^="icon-"],
[class*=" icon-"] {
  &.left {
    margin-right: .3em;
  }
  &.right {
    margin-left: .3em;
  }
}

.button {
  [class^="icon-"],
  [class*=" icon-"] {
    &.left, &.right {
      &.icon-2x { margin-top: .18em; }
    }
    &.icon-spin.icon-large { line-height: .8em; }
  }
}

.button.small {
  [class^="icon-"],
  [class*=" icon-"] {
    &.left, &.right {
      &.icon-2x { margin-top: .25em; }
    }
  }
}

.button.large {
  [class^="icon-"],
  [class*=" icon-"] {
    margin-top: 0; // overrides bootstrap default
    &.left, &.right {
      &.icon-2x { margin-top: .05em; }
    }
    &.left.icon-2x { margin-right: .2em; }
    &.right.icon-2x { margin-left: .2em; }
  }
}


.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

@-moz-document url-prefix() {
  .icon-spin { height: .9em; }
  .button .icon-spin { height: auto; }
  .icon-spin.icon-large { height: 1.25em; }
  .button .icon-spin.icon-large { height: .75em; }
}
