/*------------------------------------*\
    $TYPOGRAPHY
\*------------------------------------*/
/**
 * Basic typograhy structural styling 
 * 
 * Designed and built @kurenn  
 */

p {
  margin: 0 0 $base-line-height / 2;
  color: #777;
}

/* Emphasis & miscelaneous */
/* ----------------------- */

small { 
  font-size: 85%; 
}

strong { 
  font-weight: bold; 
}

em { 
  font-style: italic; 
}

//Utility classes

.muted {
  color: $light-gray;
}

.text-warning {
  color: $dark-orange;
}

.text-error {
  color: $dark-red;
}

.text-success {
  color: $dark-green;
}

.text-info {
  color: $dark-blue;
}

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

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

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

//Headings
//--------------------------------

h1,h2,h3,h4,h5,h6 {
  margin: $base-line-height 0;
  font-family: inherit;
  font-weight: 500;
  line-height: $base-line-height;
  color: $headings-color;
  text-rendering: optimizelegibility; // Fix the character spacing for headings

  small {
    font-weight: normal;
    line-height: 1;
    color: $light-gray;
  }
}

.light {
  font-weight: 200;
}

/* Headers definition */
/* ------------------ */

h1, h2, h3 { 
  line-height: $base-line-height * 2;
}

h5, h6 {
  text-transform: uppercase;
}

h1 { 
  font-size: $base-font-size * 2.75; // ~44px
} 

h2 { 
  font-size: $base-font-size * 2.25; // ~36px
} 

h3 { 
  font-size: $base-font-size * 1.75; // ~28px
} 

h4 { 
  font-size: $base-font-size * 1.25; // ~20px
}

h5 {
  font-size: $base-font-size; // 16px
}

h6 { 
  font-size: $base-font-size * 0.85; // ~13.6px
} 

/* Lists */
/* ----- */

// Unordered and Ordered lists
ul, ol {
  padding: 0;
  margin: 0 0 $base-line-height / 2 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
  line-height: $base-line-height;
}

// Remove default list styles
ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

// Single-line list items
ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
  > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
}

//Color Lists
.color-list {
  margin-left: 0;
  list-style: none;
  > li {
    display: inline-block;
    height: $color-list-item-height;
    width: $color-list-item-width;
    background: #222;
    cursor: pointer;

    &.red {
      background: #ec7063;
    }

    &.green {
      background: #1abc9c;
    }

    &.blue {
      background: #3498db;
    }

    &.aero {
      background: #9cc2cb;
    }

    &.grey {
      background: #95a5a6;
    }

    &.orange {
      background: #f39c12;
    }

    &.yellow {
      background: #f1c40f;
    }

    &.pink {
      background: #af7ac5;
    }

    &.purple {
      background: #8677a7;
    }
  }
}

// Description Lists
dl {
  margin-bottom: $base-line-height;
}
dt,
dd {
  line-height: $base-line-height;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: $base-line-height / 2;
}
// Horizontal layout (like forms)
.dl-horizontal {
  @include clearfix(); // Ensure dl clears floats if empty dd elements present
  dt {
    float: left;
    clear: left;
    text-align: right;
  }
}

.inline {
  display: inline-block;
}

//Color states
.info {
  color: $dark-blue;
}

.success {
  color: $dark-green;
}

.warning {
  color: $dark-orange;
}

.error {
  color: $dark-red;
}


//Inline code
.code {
  padding: 2px 4px;
  color: #d14;
  white-space: nowrap;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
  font-size: $base-font-size;
  @include border-radius(3px);
}

i.nomargin {
  margin-right: 0 !important;
}