@orange: #D9411E;
@light-orange: #FF5A09;
@white: #ffffff;
@grey: #333333;
@light-grey: #eeeeee;
@med-grey: #999999;
@dark-grey: #242121;
@sans: 'Source Sans Pro', 'Verdana', sans-serif;
@mono: 'Source Code Pro', 'Consolas', monospace;

body,
html {
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    line-height: 1.1;
}

h1 {
    font-size: 2.4em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

h4 {
    font-size: 1.36em;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1.1em;
}

body {
    margin: 0;
    padding: 0;
    background-color: @white;
    color: @dark-grey;
    font-family: @sans;
    font-size: 1.02em;
    line-height: 1.2em;
}

a {
    color: @orange;
    text-decoration: none;
}

a:hover {
    color: @light-orange;
}

hr {
    color: @light-grey;
    background-color: @light-grey;
    height: 1px;
    border: none;
    margin-top: 40px;
    margin-bottom: 40px;
}

img {
    max-width: 100%;
}

aside {
    background-color: @grey;
    color: @white;
    text-align: center;

    a {
        color: @white;
    }

    a:hover {
        color: @light-grey;
    }

    div {
        padding: 20px;
        margin: 0;

        img {
            border-radius: 50%;
            max-width: 140px;
        }

        h1 {
            margin: 15px 0 5px;
        }

        p {
            margin: 0 0 15px;
            font-size: 0.92em;
        }
    }

    nav {
        ul {
            li {
                display: inline;
                line-height: 1.6em;
                font-size: 1.28em;
                text-transform: lowercase;
            }
        }
    }
}

main {
    overflow: hidden;
    position: relative;
    nav {
        text-align: center;
        text-transform: uppercase;
        font-size: 0.72em;
        padding: 14px 0;
        border-bottom: @light-grey 1px solid;

        a {
            padding: 0 4px;
            border-right: @light-grey 1px solid;
        }

        :first-child {
            border-left: @light-grey 1px solid;
        }
    }

    .pagination {
        margin: 4% 8% 2%;
        height: 20px;
    }

    .social-share {
        p {
            font-size: 0.8em;
        }
    }

    article {
        margin: 0 8% 2%;

        header {

            h1,
            h2 {
                margin-bottom: 0;
            }

            p {
                color: @med-grey;
                font-size: 0.82em;
            }
        }

        code,
        kbd,
        pre,
        samp {
            font-family: @mono;
        }

        blockquote,
        pre {
            background-color: rgba(128, 128, 128, 0.05);
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-left: 8px solid rgba(128, 128, 128, 0.075);
            border-left-width: 10px;
        }

        blockquote {
            padding: 10px 20px;
            font-weight: 300;
            font-size: 1.1em;
        }

        pre {
            padding: 4px;
            font-size: 0.9em;
            overflow-x: auto;
        }

        samp {
            white-space: pre;
            display: block;
            overflow-x: auto;
        }

        kbd {
            padding: 0.1em 0.6em;
            border: 1px solid rgba(63, 63, 63, 0.25);
            box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
            background-color: #fff;
            color: #333;
            border-radius: 3px;
            display: inline-block;
            margin: 0 0.1em;
            white-space: nowrap;
            font-size: 0.78em;
        }

        code {
            font-size: 0.8em;
            white-space: nowrap;
            color: #c25;
            padding: 1px 3px;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
            border-radius: 3px;
        }

        .comment-count {
            font-size: 0.8em;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;

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

            td,
            th {
                padding: 8px;
                line-height: 20px;
                vertical-align: top;
                border-top: 1px solid #ddd;
            }
        }
    }

    footer {
        padding-top: 4px;
        border-top: @light-grey 1px solid;

        p {
            margin: 2px;
            text-align: center;
            padding: 0 40px;
            color: @med-grey;
            font-size: 11px;
        }
    }

    .related-posts {
        border-top: @light-grey 1px solid;
    }
}

.tag-cloud {
    a {
        background-color: @orange;
        padding: 0.2em 0.6em;
        font-size: 0.74em;
        line-height: 1;
        color: @white;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25em;
    }

    a:hover {
        background-color: @light-orange;
    }
}

a.btn {
    background-color: @orange;
    padding: 0.4em 0.6em;
    font-size: 0.9em;
    line-height: 1;
    color: @white;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

a.btn:hover {
    background-color: @light-orange;
}

.center {
    text-align: center;
}

.float-right {
    float: right;
}

ul.list,
ul.social {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.list {
    padding: 1em 0;

    li {
        padding: 4px;
    }
}

ul.social {
    font-size: 1.6em;
    padding-top: 20px;

    li {
        display: inline;
    }

    a:hover {
        z-index: 2;
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    a {
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 100%;
        text-align: center;
        font-size: 0.8em;
        line-height: 36px;
    }

    a.sc-facebook {
        background-color: #3e5b98;
    }

    a.sc-google {
        background-color: #d93e2d;
    }

    a.sc-pinterest {
        background-color: #c92619;
    }

    a.sc-linkedin {
        background-color: #3371b7;
    }

    a.sc-rss {
        background-color: #f26109;
    }

    a.sc-stack-overflow {
        background-color: #ff9900;
    }

    a.sc-twitter {
        background-color: #4da7de;
    }

    a.sc-youtube {
        background-color: #e02a20;
    }

    a.sc-github,
    a.sc-github-alt {
        background-color: #111010;
    }

    a.sc-envelope-o {
        background-color: #578AD6;
    }

    a.sc-reddit {
        background-color: #ff4500;
    }
}

//
// Desktop
//
@media screen and (min-width: 768px) {
    aside {
        width: 25%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;

        div {
            padding: 36px 18px;

            nav {
                ul {
                    li {
                        padding: 0 !important;
                        display: block;
                    }
                }
            }

            ul.social {
                padding-top: 32px;
            }
        }
    }

    main {
        width: 75%;
        position: absolute;
        top: 0;
        left: 25%;
        overflow-x: hidden;
        overflow-y: hidden;

        article {
            ul.list {
                li {
                    padding: 2px;
                }
            }
        }
    }
}

// My styles
// Hide the dot in cognito form
.cognito h2 {
    display: none;
}

.cognito a {
    position: absolute;
    left: 9999px;
}