/*

Type

Styleguide 22

*/

// Base

*, *:before, *:after {
    @include box-sizing(border-box);
    outline: none;
}

html {
    @if $responsive-font-size {

        @each $step in $responsive-font-size {
            @include media(nth($step, 1)) {
                font-size: 100% * nth($step, 2) / 16px;
            }
        }

    } @else {
        font-size: 100% * $base-font-size / 16px;
    }
}

body {
    @include adjust-font-size-to($base-font-size);
    @extend %no-margin;
    font-family: $base-font-family;
    color: $text-color;
}

img {
    max-width: 100%;
    @extend %display-inline-block;
}

a, button, textarea, input { outline: none; }

// Links

a {
    color: $link-color;
    @extend %text-decoration-none;

    &:hover,
    &:focus {
        color: $link-color-hover;
        @extend %text-decoration-none;
    }

}


// Selection color

::selection {
  color: $selection-color;
  background: $selection-background;
}

::-moz-selection {
  color: $selection-color;
  background: $selection-background;
}


/*

Body text

Markup:
<p class="lead">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.</p>
<small><p>Tight pants next level keffiyeh. Photo booth beard raw denim letterpress vegan messenger bag stumptown.</small>

Styleguide 22.1

*/


p           { margin: 0 0 rhythm(1);}

// Emphasis & misc

small         { @include adjust-font-size-to($small-size); }

strong        { @extend %font-weight-bold; }
em            { @extend %font-style-italic; }
cite          { font-style: normal; }

/*

Headings

Markup:
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header. h1.</h5>
<h6>h6. This is a tiny header. h1.</h6>

Styleguide 22.2

*/

h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizelegibility;
    font-family: $titles-font-family;
    margin-top: 0;

    small {
        @extend %font-weight-normal;
        line-height: rhythm();
        color: $grayLight;
    }
}

h1, .h1 {
    @include adjust-font-size-to($h1-size, $h1-line-height);
    @extend %h1 !optional;
    margin-bottom: rhythm(1, $font-size: $h1-size);
}

h2, .h2 {
    @include adjust-font-size-to($h2-size, $h2-line-height);
    @extend %h2 !optional;
    margin-bottom: rhythm(1, $font-size: $h2-size);
}

h3, .h3 {
    @include adjust-font-size-to($h3-size, $h3-line-height);
    @extend %h3 !optional;
    margin-bottom: rhythm(1, $font-size: $h3-size);
}

h4, .h4 {
    @include adjust-font-size-to($h4-size, $h4-line-height);
    @extend %h4 !optional;
    margin-bottom: rhythm(1, $font-size: $h4-size);
}

h5, .h5 {
    @include adjust-font-size-to($h5-size, $h5-line-height);
    @extend %h5 !optional;
    margin-bottom: rhythm(1, $font-size: $h5-size);
}

h6, .h6 {
    @include adjust-font-size-to($h6-size, $h6-line-height);
    @extend %h6 !optional;
    margin-bottom: rhythm(1, $font-size: $h6-size);
}

h1 small { @include adjust-font-size-to($h3-size); }
h2 small { @include adjust-font-size-to($h4-size); }
h3 small { @include adjust-font-size-to($h5-size); }
h4 small { @include adjust-font-size-to($h6-size); }

/*

Lists

Markup:
<ul>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
</ul>
<ol>
  <li>Ordered list item</li>
  <li>Ordered list item</li>
  <li>Ordered list item</li>
</ol>

Styleguide 22.3

*/

.list_style_none,
.list-style-none {
    @extend %list-style-none;
    @extend %no-margin;
    @extend %no-padding;
}

// Unordered and Ordered lists

ul, ol {
    @extend %no-padding;
    margin: 0 0 rhythm(1) 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
    margin-bottom: 0;
}

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

ul.inline,
ol.inline {
    margin-left: 0;
    list-style: none;
    > li {
        @extend %display-inline-block;
    }
}

/*

Definition lists

Markup:
<dl>
  <dt>Rock Hammer</dt>
  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
  <dt>Rock Hammer</dt>
  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
</dl>

Styleguide 22.4

*/

dl      { margin-bottom: rhythm(1); }
dt, dd  { }
dt      { @extend %font-weight-bold; }
dd      { margin-left: 0; }

/*

Horizontal definition list

Markup:
<dl class="dl-horizontal">
  <dt>Rock Hammer</dt>
  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
  <dt>Rock Hammer</dt>
  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
</dl>

Styleguide 22.4.1

*/

.dl-horizontal {
    @extend %clearfix;
    dt {
        @include text-overflow();
        clear: left;
        @extend %float-left;
        @extend %text-align-right;
        width: em($horizontal-offset) - 20;
    }

    dd { padding-left: em($horizontal-offset); }
}

/*

Horizontal line

Markup: <hr />

Styleguide 22.5

*/

hr {
    margin: rhythm(1) 0;
    @extend %no-border;
    border-bottom: 1px solid $gray;
}

// Abbreviations and acronyms

abbr[title],
abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted $grayLight;
}
abbr.initialism {
    font-size: 90%;
    @extend %text-transform-uppercase;
}

/*

Blockquotes

Markup:
<blockquote>
  <p>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</p>
  <small><cite>Rock Hammer</cite></small>
</blockquote>

Styleguide 22.6

*/

blockquote {
    padding: 0 0 0 rhythm(1);
    @extend %no-margin;
    margin: 0 0 rhythm(1);
    border-left: 5px solid $grayLighter;

    p {
        margin-bottom: 0;
        font-weight: 300;
    }

    cite {
        @extend %display-block;
        color: $grayLight;
        &:before {
            content: '\2014 \00A0';
        }
    }

    &.pull-right {
        @extend %float-right;
        padding-right: 15px;
        padding-left: 0;
        border-right: 5px solid $grayLighter;
        border-left: 0;

        p,
        small {
            @extend %text-align-right;
        }

        small {
            &:before { content: ''; }
            &:after { content: '\00A0 \2014'; }
        }
    }
}

// Quotes

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
}

// Addresses

address {
    @extend %display-block;
    margin-bottom: rhythm(1);
    font-style: normal;
    line-height: rhythm(1);
}