/**
 * Style for apeman.
 * @version 0.0.22
 */


/*
Button

To create a button, add the <code>button</code> class to any <code>&lt;a&gt;</code> element.

Markup:
<a class="button {$modifiers}">Normal</a>
<a class="button {$modifiers} button-hover">Hovered</a>
<a class="button {$modifiers} button-active">Active</a>

.button-disabled  - Disabled button.
.button-primary  - Primary button.

Styleguide 1.1
*/

button,
.button {
    border-radius: 4px;
    border: 1px solid #B0B0B0;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    background-color: #FFF;
    padding: 0.25em 0.5em;
    cursor: default;
}

.button-hover,
.button:hover {
    text-decoration: none;
    opacity: 0.8;
}

.button-active,
.button:active {
    text-decoration: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25) inset;
    opacity: .5;
}

.button-disabled,
.button-disabled.button-hover,
.button-disabled:hover,
.button-disabled:active
.button-disabled.button-active {
    opacity: 1;
    box-shadow: none;
    background-color: #F3F3F3;
    border-color: #F0F0F0;
    color: #DDD;
}

.button-primary {
    background: #698DFF;
    color: white;
    border-color: #5c7bdf;
}
/**
 * Style for clearing.
 */

.clear-left {
  clear: left;
}
.clear-both {
  clear: both;
}
.clear-right {
  clear: right;
}


/**
 * Style for floating.
 */

.float-left {
  float: left;
}
.float-none {
  float: none;
}
.float-right {
  float: right;
}


/*
Footer

Markup:
<footer>
    <div>
    This is the footer.
    </div>
    <small>Copyright © 2014 tick-tack All Rights Reserved</small>
<footer>

Styleguide 1.4
*/

footer{
    margin-top: 40px;
    padding: 20px 0;
    box-sizing: border-box;
    border-top:1px solid #EEE;
}
/*
Grid

To create a grid layout, put <code>.col</code> elements in a <code>.row</code> elements.

Markup:
<div class="row">
    <section class="col"><h3>Grid01</h3>Section content.</section>
    <section class="col"><h3>Grid02</h3>Section content.</section>
    <section class="col"><h3>Grid03</h3>Section content.</section>
    <section class="col"><h3>Grid04</h3>Section content.</section>
    <section class="col"><h3>Grid05</h3>Section content.</section>
</div>

Styleguide 1.3
*/

.row {
    box-sizing: border-box;
    -ms-box-orient: horizontal;

    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;

    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.col{
    width:100%;
    box-sizing: border-box;
    display: block;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
/*
Header

Markup:
<header>
<nav class="header-nav">
    <a class="nav-item">Item0</a>
    <a class="nav-item nav-item-selected">Item1</a>
    <a class="nav-item">Item2</a>
</nav>
<h1 class="header-log">Logo</h1>
</header>

Styleguide 1.4
*/

header {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    z-index: 8;
}

.header-logo {
    text-decoration: none;
    font-size: 2em;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
}

.header-nav {
    float: right;
}

.header-nav .nav-item {
    padding: 0.5em 1em;
    opacity: 0.5;
    cursor: default;
}

.header-nav .nav-item:hover,
.header-nav .nav-item.nav-item-hover {
    opacity: 0.8;
}

.header-nav .nav-item.nav-item-selected {
    opacity: 1;
}

.header-nav-icon {
    display: none;
}
/*
Table

Markup:
<table>
<caption>Score of something</caption>
<thead>
    <tr><th>First Name</th><th>Family Name</th><th>Point</th></tr>
</thead>
<tbody>
    <tr><td>Jill</td><td>Smith</td><td>50</td></tr>
    <tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</tbody>
</table>

Styleguide 1.2
*/

table {
    border-collapse: collapse;
}

caption {
    padding: 2px 4px;
    font-size: 0.75em;
}

thead {
    color: #AAA;
}

thead tr:first-child th {
    border-top: none;
}

th:first-child,
td:first-child {
    border-left: none;
}

th:last-child,
td:last-child {
    border-right: none;
}

tbody tr:last-child td {
    border-bottom: none;
}

th, td {
    padding: 4px 8px;
    border: 1px solid #AAA;
}
/**
 * Style for text aligning.
 */

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