body {
    color: $black;
    font-family: Arial, sans-serif;
    font-size: $medium;
    line-height: 1.5;
}

/*doc
---
title: Headings
name: headings
category: Base
---

```html_example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
*/
h1, h2, h3, h4, h5, h6, legend {
    color: $heading-color;
    font-family: 'ColaborateRegular', Arial, sans-serif;
    line-height: 1.2;
    text-transform: none;
    margin: 0.8em 0;
    text-rendering: optimizelegibility; // Fix the character spacing for headings
}
h1 { font-size: 260%; margin: 0.8em 0; font-weight: normal; }
h2 { font-size: 230%; margin-bottom: 0.3em; font-weight: normal; }
h3 { font-size: 190%; margin-bottom: 0.4em; font-weight: normal; }
h4, legend { font-size: 140%; margin-bottom: 0.5em; font-weight: normal; }
h5 { font-size: 120%; margin-bottom: 0.3em; font-weight: normal; }
h6 { font-size: 110%; font-weight: normal; color: $fg1; }

// increase spacing between blocks
// looks better in /badges and does not break anything else
h2:not(:first-of-type) {
    margin-top: 1.5em;
}

// don't allow headings in user generated content to be as big
// as our own
blockquote,
.text,
.comment .body {
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        margin: 0.8em 0;
    }
    h1 {
        font-size: 120%;
    }
    h2 {
        font-size: 110%;
    }
}
.category_body,
.instance_description,
.paper_text,
.proposal .body {
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        margin: 0.8em 0;
    }
    h1 {
        font-size: 140%;
    }
    h2 {
        font-size: 120%;
    }
    h3 {
        font-size: 110%;
    }
}
.dashboard_bio,
article.message,
section.subpage {
    h1, h2, h3, h4, h5, h6 {
        font-size: 120%;
        margin: 0.8em 0;
    }
    h1 {
        font-size: 180%;
    }
    h2 {
        font-size: 150%;
    }
}

/*doc
---
title: Paragraph
name: p
category: Base
---

```html_example
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
```
*/
p {
    margin-bottom: 1.5em;
    word-wrap: break-word;

    &:last-child {
        margin-bottom: 0;
    }
}

/*doc
---
title: Lists
name: lists
category: Base
---
*/

/*doc
---
title: Ordered List
name: ol
parent: lists
---

```html_example
<ol>
    <li>larry</li>
    <li>moe</li>
    <li>curly</li>
</ol>
```
*/
/*doc
---
title: Unordered List
name: ul
parent: lists
---

```html_example
<ul>
    <li>larry</li>
    <li>moe</li>
    <li>curly</li>
</ul>
```
*/
/*doc
---
title: Definition List
name: dl
parent: lists
---

```html_example
<dl>
    <dt>Defintion Term</dt><dd>Definition data defining the previous term</dd>
    <dt>Another Definition Term</dt><dd>Definition data defining the previous term</dd>
</dl>
```
*/
ul, ol, dl {
    margin: 0 0 1.5em 1.5em;
}
li {
    line-height: 1.5;
    margin-left: 0;
}

/*doc
---
title: Thematic Break
name: hr
category: Base
---

```html_example
<hr />
```
*/
hr {
    margin: 1.5em 0;
    border: 0;
    border-top: 1px dotted $border;
}

/*doc
---
title: Table
name: table
category: Base
---

```html_example
<table>
    <caption>This is a table caption, made with caption</caption>
    <thead>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Table Footer 1</th>
            <td>Table Footer 2</td>
            <td>Table Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>TD 1.1</th>
            <td>TD 1.2</td>
            <td>TD 1.3</td>
        </tr>
        <tr>
            <th>TD 2.1</th>
            <td>TD 2.2</td>
            <td>TD 2.3</td>
        </tr>
    </tbody>
</table>
```
*/
table {
    margin-bottom: 1.5em;

    td, th {
        text-align: left;
        padding: 0.5em;
        border-top: 1px solid $border;
    }
    thead, tfoot {
        th {
            text-align: center;
        }
    }

    caption {
        font-size: $small;
    }

    &.line_based {
        td {
            border: none;
            padding: initial;

            &.line_number {
                width: 1.5em;
                padding-right: 0.8em;
                text-align: right;
                color: $fg1;
                line-height: 1.5em;
            }
            &.line_text {
                color: $black;
                font-family: Menlo, Monaco, 'Courier New', monospace;
            }
        }
    }
}

/*doc
---
title: Link
name: a
category: Base
---

```html_example
<a href="#">link</a>
```
*/
a {
    text-decoration: none;
    color: $primary-color;
    &:hover, &:focus {
        text-decoration: underline;
    }

    &.icon_link {
        height: 1.4em;
        line-height: 1.4;
        background-repeat: no-repeat;
    }
    &.follow {
        background-position: right -254px;
        padding-right: 23px;
        &:hover, &:focus {
            background-position: right -304px;
            text-decoration: underline !important;
        }
    }
}

/*doc
---
title: Blockquote
name: blockqoute
category: Base
---

```html_example
<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
    <cite>James T. Kirk</cite>
</blockquote>
```
*/
blockquote {
    position: relative;
    font-style: italic;
    border-left: 0.4em solid $primary-color;
    padding-left: 0.5em;
    margin: 1.5em;
    cite {
        float: right;
    }
}

/*doc
---
title: Inline
name: inline
category: Base
---
*/

/*doc
---
title: Code
name: code
parent: inline
---

```html_example
<code>Example Text</code>
```
*/
code {
    font-size: $smaller;
    background-color: $bg2;
}

/*doc
---
title: Preformated
name: pre
category: Base
---

```html_example
<pre>def hello_world(name):
    s = "Hello %s!" % name
    print s</pre>
```
*/
pre {
    margin: 1em 0;
    display: block;
    padding: 0.7em;
    font-size: $smaller;
    background-color: $bg2;
    border: 1px solid $border;
    max-height: 18em;
    overflow: auto;

    code {
        background-color: transparent;
    }
}

// figure
figure {
    margin: 1em 0;
}
figcaption {
    font-size: $small;
}

.pro, .con { font-size: $medium; }
.pro, ins { color: $green; }
.con, del, .countdown.highlight { color: $red; }

.meta, .utility {
    color: $fg1;
    font-size: $small;
    font-family: Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    .utility {
        display: inline-block;
        margin-left: 0.8em;
        margin-bottom: 0;
    }
}

/*doc
---
title: Emphasis
name: em
parent: inline
---

```html_example
<em>Example Text</em>
<strong>Example Text</strong>
```
*/

/*doc
---
title: Inserted
name: ins
parent: inline
---

```html_example
<ins>Example Text</ins>
```
*/

/*doc
---
title: Deleted
name: del
parent: inline
---

```html_example
<del>Example Text</del>
```
*/

/*doc
---
title: Address
name: address
category: Base
---

```html_example
<address>
    John Q. Public<br />
    123 Main Street<br />
    Anywhere, ST 12345
</address>
```
*/

/*doc
---
title: Time
name: time
parent: inline
---

```html_example
<time datetime="2013-04-18T13:50:47+02:00">18. April 2013 13:50</time>
```
*/
