// Fix a bug that causes borders to show up in IE10.
img {border: 0 !important;}

// Headings / Mobile Headings

@media screen and (max-width: 768px) {
  h1 {
    font-size: 36px;
    font-size: 3.6rem;
  }
  
  h2 {
    font-size: 30px;
    font-size: 3rem;
  }
  
  h3 {
    font-size: 24px;
    font-size: 2.4rem;
  }
  
  h4 {
    font-size: 20px;
    font-size: 2rem; 
  }
  
  h5, h6 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

// ============================
// = Shared Colors and styles =
// ============================
small {
  font-size: 0.85em;
}

.hidden, .hide {
  opacity: 0;
}

.no-bottom {
  margin-bottom: 0 !important;
}

.half-bottom {
  margin-bottom: 8px !important;
}

.add-bottom {
  margin-bottom: 16px !important;
}

#header .ttl {
  color: white;
}

.ttl a {
	/*color:#C3BCBB;*/
}

.light-grey {
	color:#C3BCBB;
}

.light-orange {
	color: $orange;
}

.light-blue {
	color: $lblue;
}

.color-inherit {
    color: inherit;
}

.brown {
	color:#5D5751;
}

h1, h2, h3, h4, h4 {
	color:#5D5751;
}

.align-right {
  text-align: right;
}

.align-central, .align-center {
  text-align: center;
}

.black-link a, .black-link a:visited, .f-thin-black, .f-thin-black a, .f-thin-black a:visited, .invoice-client {
  font-weight: 300;
  color: #2d2d2d;
}
.f-thin-black a:hover, .f-thin-black a:focus {
    color: $lblue;
}
.f-thin-red {
  font-weight: 300;
  color: $lred;
}

.f-thin-grey, .invoice-company {
  font-weight: 300;
  color: #777;
}

.blue-btn, .button {
    &:not(.dropdown), &:not(.dropdown):visited {
        padding: 10px 16px;
        background: $pancakeBlue;
        color: white !important;
        border: 0;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: none;
        text-shadow: 0px 1px 0px #4da0cc;
        cursor: pointer;
        line-height: 1;
        @include border-radius($borderRadius);

        &:hover, &:focus {
            text-shadow: none;
            background: $pancakeDarkBlue;
            color: #ffffff;
            text-decoration: none;
        }
    }

    &.tiny {
        font-size: 10px;
        padding: 5px 10px 6px;
    }

    &button, &button:visited {
        padding: 11px 16px;
    }
}

.form-holder .blue-btn {margin-bottom: 16px;}

.tag {
  @include border-radius(4px);
  padding: 4px 7px 3px;
  line-height: 1;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  text-shadow: none;
  vertical-align: bottom;
  margin-right: 5px;
}

// Client Icons (Edit/Delete)
.icon {
  width: 4px;
  height: 2px;
  padding: 8px;
  display: block;
  float: right;
  margin: 5px 0 0 6px;  
  text-indent: -999px;
  white-space: nowrap;
  overflow: hidden;
  &.edit {
    @extend .g16.edit;
    &:hover {
     @extend .g16.edit:hover;
    }
  }
  &.delete {
    @extend .g16.trash;
    &:hover {
      @extend .g16.trash:hover;
    }
  }
  &.sort {
    background: url('../img/icons-timesheet.png') 100% 0% no-repeat transparent;
    &:hover {
      background: url('../img/icons-timesheet.png') 100% 100% no-repeat transparent;
    }
  }
}

// Shaed Tables
.pc-table {
  width: 100%;
  .table-central {text-align: center;}
  .table-right {text-align: right;}
}

//
// Help Boxes
//

.help {
  padding: 0 10px;
  background: $babyBlue;
  border: 1px solid $babyBlueBorder;
  @include border-radius(2px);
  color: #777;
  h4, h3 {
    font-size: 16px;
    color: #555;
  }
  .bigger {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

/* -- 
 * Icons (SASS Sprites) --
 * -- */
$geomicons16-spacing: 20px;
@import "geomicons16/*.png";


.g16 {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    text-indent: -999px;
    overflow: hidden;
    &.cal { 
        @include geomicons16-sprite(cal);
    }
    &.cal:hover { 
        @include geomicons16-sprite(cal-hover);
    }
    &.card { 
        @include geomicons16-sprite(card);
    }
    &.card:hover { 
        @include geomicons16-sprite(card-hover);
    }
    &.created { 
        @include geomicons16-sprite(created);
    }
    &.created:hover { 
        @include geomicons16-sprite(created-hover);
    }
    &.document { 
        @include geomicons16-sprite(document);
    }
    &.document:hover { 
        @include geomicons16-sprite(document-hover);
    }
    &.edit { 
        @include geomicons16-sprite(edit);
    }
    &.edit:hover { 
        @include geomicons16-sprite(edit-hover);
    }
    &.email { 
        @include geomicons16-sprite(email);
    }
    &.email:hover { 
        @include geomicons16-sprite(email-hover); 
    }
    &.home { 
        @include geomicons16-sprite(home);
    }
    &.home:hover { 
        @include geomicons16-sprite(home-hover); 
    }
    &.see { 
        @include geomicons16-sprite(see);
    }
    &.see:hover { 
        @include geomicons16-sprite(see-hover);
    }
    &.settings { 
        @include geomicons16-sprite(settings);
    }
    &.settings:hover { 
        @include geomicons16-sprite(settings-hover); 
        cursor: pointer;
    }
    &.discus { 
        @include geomicons16-sprite(speech);
    }
    &.discus:hover { 
        @include geomicons16-sprite(speech-hover); 
    }
    &.time { 
        @include geomicons16-sprite(time);
    }
    &.time:hover { 
        @include geomicons16-sprite(time-hover);
    }
    &.trash { 
        @include geomicons16-sprite(trash);
    }
    &.trash:hover { 
        @include geomicons16-sprite(trash-hover);
    }
    &.user { 
        @include geomicons16-sprite(user);
        @include sprite-background-position($geomicons16-sprites, user, 0, 1px);
    }
    &.user:hover { 
        @include geomicons16-sprite(user-hover);
        @include sprite-background-position($geomicons16-sprites, user-hover, 0, 1px);
    }

}