/* ------------------------------------------------------------------------------------------------
 * layout and formatting
 */

    html {
        overflow-y: scroll;
    }

    body {
        min-width: 670px;
        max-width: 1000px;
        margin: 50px auto;
    }

    main {
        position: relative;
    }

    h1 {
        border-bottom:1px solid #EEE;
        padding: 0 0 20px 30px;
        margin:0 0 30px 0;
    }

    h3 {
        border-bottom:1px solid #EEE;
        padding: 0 0 10px 30px;
        margin:20px 0 10px -30px;
        color:#18bc9c;
        font-size:20px;
    }

    section {
        padding:0 0 30px 30px;
        clear:both;
    }

    p + fieldset {
        margin-top:30px;
    }

    pre {
        margin:20px 30px;
        font-size: 12px;
        color:#333;
    }

    ul ul{
        margin: 10px 0 20px;
    }

    .indent {
        margin-left: 30px;
    }

    .table > tbody > tr > td,
    .table > thead > tr > th {
        padding: 4px 6px;
    }

    table code {
        font-size: 0.8em;
    }



/* ------------------------------------------------------------------------------------------------
 * special
 */

    a#home{
        position: absolute;
        top:20px;
        left:20px;
        background:#ecf0f1;
        padding:3px 6px;
        border-radius: 3px;
        font-size: 0.8em;
    }

    a#home:hover{
        text-decoration: none;
        background: #dde4e6;
        color: #15a589;
    }


/* ------------------------------------------------------------------------------------------------
 * states state
 */

    main.steps article {
        display: none;
    }

    main.steps article.active {
        display: block;
    }

    #states {
        transition: 0.5s all;
    }

    #states.paused {
        opacity: 0.25;
    }

    .btn {
        background-color: #95a5a6;
    }

    .btn[disabled]{
        opacity: 0.5;
        cursor: default;
    }

    .btn[disabled]:hover{
        color:inherit;
    }


/* ------------------------------------------------------------------------------------------------
 * states formatting
 */

    main.steps article {
        width: 500px;
        border:1px solid #EEE;
        padding:20px;
    }

    main.states article {
        display: inline-flex;
        vertical-align: top;
        width: 150px;
        height: 150px;
        background: #EEE;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 5px 5px 0;
        transition: 0.5s all;
    }

    main.states article.active {
        border: 1px solid black;
    }

    main.steps h2 {
        margin: 0 0 40px;
        font-size: 2em;
        color:#1dccaa;
    }

    main.steps p {

    }