/////////////////////////////////////////////////////////////
// Fonts.

@import url(/cloudy/static/main/fonts/cabin.font-face/stylesheet.css);

/////////////////////////////////////////////////////////////
// LESS mixins.

@color-base: #f2f2f4;
@color-dark: #161617;
@color-link: #279bed;
@color-faint-border: #d4d6d6;
@color-line-shadow: rgba(255, 255, 255, 0.25);
@font-cabin: "Cabin", "Helvetica Neue", "Helvetiva", Arial, sans-serif;

.box-shadow(@all) {
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}

.border-radius(@all) {
    border-radius: @arguments;
    -moz-border-radius: @arguments;
    -webkit-border-radius: @arguments;
}

.transition(@all) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -o-transition: @arguments;
}

.box-sizing(@all) {
    box-sizing: @arguments; 
    -moz-box-sizing: @arguments;
    -webkit-border-box: @arguments;
}

/////////////////////////////////////////////////////////////
// Colorbox.

#cboxOverlay {
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    height: 100%;
    z-index: 9999; 
    overflow: hidden;
    background:#000;
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxWrapper { position: absolute; top: 0px; 
    left: 0px; 
    z-index: 9999; 
    overflow: hidden;
}

#colorbox { 
    border: 10px solid rgba(0, 0, 0, 0.6);
    border-radius: 15px;
}   

#cboxWrapper {
    background: #000;    
}  

#cboxClose {
    color: #000;
}

#cboxError {
    color: #ccc;
    margin: 20px;
}

/////////////////////////////////////////////////////////////
// Foundation customizations.

// Visibility affordance.

.hide-inline-on-phones {
}

.hide-inline-on-tablets {
}

@media only screen and (max-width: 767px) {
    .hide-inline-on-tablets {
        display: none !important;
    }
}

@media only screen and (max-width: 480px) {
    .hide-inline-on-phones {
        display: none !important;
    }
}

// Headers.

h1 {
    color: #333;

    font-size: 27px;    
    font-weight: normal;    
    text-shadow: 0 1px 0 #fff;

    &.section {
        padding: 20px 0px 20px 45px;        
        margin-bottom: 25px;
        border-top: 4px solid @color-dark;
        border-bottom: 1px solid #d1d1d4;        
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        background-repeat: no-repeat;
        background-position: left center;

        &.without-icon {
            padding-left: 0px;
        }
    }

    a {
        color: #333;
    }
}

h2 { 
    color: #333;

    font-size: 37px;    
    font-weight: normal;    
    text-shadow: 0 1px 0 #fff;

    a {
        color: #333;
    }
}

h3 {
    color: #333;

    font-size: 24px;
    font-weight: normal;    
    text-shadow: 0 1px 0 #fff;

    &.section {
        padding: 10px 0px 15px 0px;
        margin-bottom: 20px;
        border-bottom: 1px solid #d1d1d4;

        &.without-icon {
            padding-left: 0px;
        }
    }

    a {
        color: #333;
    }
}

h4 {
    color: #555;

    font-size: 20px;
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;

    &.section {
        padding: 10px 0px 10px 45px;
        margin-bottom: 10px;
        background-repeat: no-repeat;
        background-position: left center;        

        &.without-icon {
            padding-left: 0px;
        }
    }

    a {
        color: #333;
    }
}

p {
    font-size: 14px;
    line-height: 20px;

    text-shadow: 0px 1px 0px #fff;
}

input.input-text {
    font-family: @font-cabin;
}

textarea {
    font-family: @font-cabin;
}

a {
    img {
        vertical-align: text-bottom;
    }
}

form.nice small.error {
    font-weight: normal;
}

// Buttons.

.nice.button {
    position: relative;

    margin-bottom: 5px;
        
    border-bottom: none;   

    font-weight: normal;
    
    &.white {
        .box-shadow(~"0 5px 20px rgba(255, 255, 255, 0.5) inset, 0px -1px 0px rgba(255, 255, 255, 0.1) inset, 0 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 2px 0px 0px #ccc, 0px 5px 0px 0px rgba(153, 153, 160, 0.15)");
    
        .transition(none);

        color: #444;

        &:active {
           top: 1px;        
           .box-shadow(~"0px -1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 0px 0px #ccc, 0px 4px 0px 0px rgba(153, 153, 160, 0.15)");        
        }
    }
    
    &.blue {
        .box-shadow(~"0px -1px 0px rgba(255, 255, 255, 0.1) inset, 0 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 2px 0px 0px rgba(0, 136, 204, 1), 0px 5px 0px 0px rgba(153, 153, 160, 0.15)");
    
        background: #26a7ec;
        background: -moz-linear-gradient(top, #3cb0ee 0%, #26a7ec 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3cb0ee), color-stop(100%,#26a7ec));
        background: -webkit-linear-gradient(top, #3cb0ee 0%,#26a7ec 100%);
        background: -o-linear-gradient(top, #3cb0ee 0%,#26a7ec 100%);
        background: -ms-linear-gradient(top, #3cb0ee 0%,#26a7ec 100%);
        background: linear-gradient(top, #3cb0ee 0%,#26a7ec 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cb0ee', endColorstr='#26a7ec',GradientType=0 );

        .transition(none);
        
        &:hover {
            background: #0192dd;    
        }

        &:active {
           top: 1px;        
           .box-shadow(~"0px -1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 0px 0px rgba(0, 136, 204, 1), 0px 4px 0px 0px rgba(153, 153, 160, 0.15)");        
        }
    }

    img {
        vertical-align: middle;
        width: 37px;
        height: 37px;        
    }

    span.text {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.4em;
        margin-left: 10px;

        span {
            display: block;

            &.primary {
                font-weight: bold;
            }
        }
    }

    &.medium {
        padding: 10px 10px 9px;

        & + .medium {
            margin-left: 12px;
        }
    }    
}

@media only screen and (max-width: 767px) {
    .nice.button {
        margin-bottom: 10px;

        &.medium {
            & + .medium {
                margin-left: 0;
            }
        }
    }
}

/////////////////////////////////////////////////////////////
// Page-wide.

body { 
    background: @color-base;

    font: normal 13px/16px @font-cabin;

    color: #333;
}

.jumptarget:before {
    content: "";
    display: block;
    height: 70px;
    margin: -70px 0 0;
}

/////////////////////////////////////////////////////////////
// Shared elements.

// Box with a nice border.
.box {
    .box-sizing(border-box);

    padding: 15px;
    margin-bottom: 15px;

    background: #fff;
    border: 1px solid #dfe0e0;

    .box-shadow(0px 3px 0px rgba(153, 153, 160, 0.1));    

    .tags {
        font-size: 12px;
        color: #666;
        font-weight: normal;

        margin-bottom: 10px;

        span {
            &:before {
                content: "+ ";
                color: darken(@color-link, 25%);
            }

            &:first-child:before {
                content: "";
            }
        }
    }

    &.black {
        background: @color-dark;

        border: 1px solid #000;

        h1, h2, h3, h4, h5, h6 { 
            color: #fff;
            text-shadow: 0px 1px 0px #000;
        }

        p {
            color: #acacaf;            
        }

        .nice.button {
            .box-shadow(~"0px -1px 0px rgba(255, 255, 255, 0.1) inset, 0 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 2px 0px 0px rgba(0, 136, 204, 1), 0px 5px 0px 0px rgba(0, 0, 0, 1)");

            &:active {
                .box-shadow(~"0px -1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 0px 0px rgba(0, 136, 204, 1), 0px 4px 0px 0px rgba(0, 0, 0, 1)");
            }
        }
        
        .tags {
            color: #eee;
        }
    }
}

/////////////////////////////////////////////////////////////
// Header.

.header {
    background: @color-dark;  
    position: fixed;
    width: 100%;
    height: 140px;
    left: 0px;
    top: 0px;  
    z-index: 3000;

    a { 
        color: #fff;        
    }

    h1 {
        font: normal 17px/140px @font-cabin;
        margin-bottom: 0px; 

        text-shadow: none;

        padding-left: 113px;
        background: @color-dark url(/cloudy/static/main/images/layout/header-transition.png) no-repeat 0px 0px;
    }

    nav {    
        position: relative;
        font: normal 14px/140px @font-cabin;
        margin-bottom: 0px;

        span {
            color: darken(@color-link, 25%);
        }
        
        a { 
            position: relative;
            display: inline-block;

            &.marker {
                position: absolute;
                overflow: hidden;
                display: none;

                border: none;

                left: 0px;
                top: 0px;

                background: transparent url(/cloudy/static/main/images/layout/marker.png) repeat-x left center;
            }
        }
    }
}

// IE8 overrides, just a scrollable header.
html.lt-ie9 {
    .header {
        position: relative;
    }
}

// Header on portrait tablets and narrow screens.
@media only screen and (max-width: 767px) {
    .header {
        height: auto;
        position: relative;

        h1 {
            font: normal 17px/70px @font-cabin;
            
            padding-left: 0px;
            background: none;

            text-align: center;
        }

        nav {
            font: normal 14px/14px @font-cabin;
            float: none;
            padding-left: 0px;
            margin-bottom: 9px;

            text-align: center;

            .marker { 
                display: none;
            }
        }
    }
}

// Header on mobile devices.
@media only screen and (max-width: 480px) {
    .header {    
        h1 {
            font: normal 17px/40px @font-cabin;
        }

        nav { 
            font: normal 14px/14px @font-cabin;   
            
            a {               
            }
        }
    }
}

@media only screen and (max-width: 480px) {
    header.container {
        padding: 0px 0px;
    }
}

/////////////////////////////////////////////////////////////
// Body.

.body {
    margin-top: 140px;
    padding-top: 30px;

    position: relative;

    background: @color-base url(/cloudy/static/main/images/layout/body-shadow.png) repeat-x top;
}

// Body on portrait tablets and narrow screens.
@media only screen and (max-width: 767px) {
    .body {
        margin-top: 0px;
    }
}

// Body on mobile devices.
@media only screen and (max-width: 480px) {
    .body {
        margin-top: 0px;
    }
}

/////////////////////////////////////////////////////////////
// Articles.

.space-a-little { 
    margin-bottom: 30px;

    &.separated {
        margin-bottom: 25px;
        padding-bottom: 5px;
        border-bottom: 1px solid #d1d1d4;        
        box-shadow: 0 1px 0 @color-line-shadow;
    }
}

.space-more {
    margin-bottom: 60px; 

    &.separated {
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 1px solid #d1d1d4;
        box-shadow: 0 1px 0 @color-line-shadow;
    }
}

.space-a-lot {
    margin-bottom: 90px;

    &.separated {
        margin-bottom: 60px;
        padding-bottom: 30px;
        border-bottom: 1px solid #d1d1d4;
        box-shadow: 0 1px 0 @color-line-shadow;
    }
}

p.lead { font-size: 17px; }

article.separated {    
    & + article.separated {
        .row {
            border-top: 1px solid @color-faint-border;
            padding-top: 25px;
        }
    }

    .buttons {
        margin-top: 15px;
    }
}

// Teaser screenshot boxes, 2x2 on desktop, 4x1 on portrait tablets, 2x2 again on phones.

.block-grid.two-up.teaser-boxes {
    max-width: 310px;    
}

@media only screen and (max-width: 767px) {
    .block-grid.two-up.teaser-boxes  {
        margin-left: -2%;
        width: 102%;
        max-width: none;
        text-align: center;
    
        > li {
            float: left;
            margin-left: 2%;
            width: 23%;
        }
    }
}

@media only screen and (max-width: 320px) {
    .block-grid.two-up.teaser-boxes {
        margin-left: -4%;
        width: 104%;
    
        > li {
            margin-left: 4%;
            width: 46%;
        }
    }   
}

// Mini-detail boxes, 3 columns on desktop, 2 columns on portrait tablets, and 1 column on phones

.block-grid.three-up.mini-detail-boxes {
}

@media only screen and (max-width: 768px) {
    .block-grid.three-up.mini-detail-boxes {
        margin-left: -4%;
    
        > li {
            float: left;
            margin-left: 4%;        
            width: 46%;
        }
    }
}

@media only screen and (max-width: 320px) {
    .block-grid.three-up.mini-detail-boxes {
        margin-left: 0%;
    
        > li {
            float: none;
            margin-left: 0%;
            width: 100%;
        }
    }   
}

/////////////////////////////////////////////////////////////
// Headline box.

.headlines-container {
    padding-top: 140px;

    .headlines {
        position: relative;
        
        padding-top: 30px;
        
        background: #fff;
        border-bottom: 1px solid @color-faint-border;

        overflow: hidden;

        // Compact headlines.
        h1, h2, h3, h4, h5, h6 {
            line-height: 1;
        }

        h1 {        
            font-size: 72px;    
            font-weight: 600;

            margin-bottom: 16px;
        }

        h2 {
            color: #666;

            font-size: 44px;
            font-weight: 600;

            margin-bottom: 16px;
        }

        h1 + p, h2 + p {
            margin-top: 30px;
        }

        div.stacked {
            position: relative;

            overflow: auto;

            div {
                position: absolute;
                left: 0px;
                top: 0px;

                overflow: auto; 
            }

            div.first-child { 
                position: static;
            }
        }

        &.dark {
            background: #050506;

            h1 {
                color: #fff;
                text-shadow: 0px 1px 0px #000;
            }

            h2 {
                text-shadow: 0px 1px 0px #000;
            }

            h2.light {
                color: #ccc;
                text-shadow: 0px 1px 0px #000;
            }

            p {
                color: #ccc;
                text-shadow: 0px 1px 0px #000;
            }            
        }
    }
}    

.headlines-container + .body {
    margin-top: 0px;
}

// Promo on portrait tablets and narrow screens.
@media only screen and (max-width: 767px) {
    .headlines-container {
        display: none;        
        
        .headlines {
            margin-top: 0px;
            padding-right: 30%;

            h1 {
                font-size: 55px;
            }

            h2 {
                font-size: 32px;
                font-weight: normal;
            }
        }
    }
}

// Promo on mobile devices.
@media only screen and (max-width: 480px) {
    .headlines-container {
        display: none;

        .headlines {
            margin-top: 0px;

             h1 {
                font-size: 32px;
                font-weight: normal;
            }

            h2 {
                font-size: 24px;
                font-weight: normal;
            }
        }
    }
}

@media only screen and (max-width: 320px) {
    .headlines-container {
        display: none;
        
        .headlines {        
        }
    }
}

/////////////////////////////////////////////////////////////
// Footer box.

.footer {
    background: @color-dark;

    padding-top: 40px;
    padding-bottom: 100px;

    h2 {
        margin-bottom: 20px;

        font-size: 16px;

        color: @color-base;
        text-shadow: none;        
    }

    p {
        font-size: 13px;

        color: lighten(@color-dark, 40%);
        text-shadow: none;

        img {
            vertical-align: text-bottom;
        }
    }

    a {
        color: lighten(@color-dark, 80%);

        &:hover, &:active {
            color: lighten(@color-dark, 100%);
        }
    }            

    ul.tweets {
        color: lighten(@color-dark, 40%);

        .when {
            color: lighten(@color-dark, 20%);
        }
    }

    ul.links {
        li {
            display: inline-block;

            &:before {
                content: "+ ";
                font-size: 15px;
                color: darken(@color-link, 25%);
            }

            &:first-child:before {
                content: "";
            }
        }
    }
}