/*
 * style.min.css - CSS stylesheet for alba's 2011 portfolio
 * Copyright (c) 2011 Ludovic Slangen, Saul Rennison
 *
 * (see style.less for unminified LESS sheet)
 *
 *******************************************************************************
 *
 * style.less - LESS stylesheet for alba's 2011 portfolio
 * Copyright (c) 2011 Ludovic Slangen, Saul Rennison
 *
 */
@import url('/static/css/shared.less');

body {
    background-color: #f2f2f2;
    background-image: url('/static/img/back_pattern.png');
    background-repeat: repeat;

    font-family: Tahoma, sans-serif;
    font-size: 12px;

    color: #969696;

    overflow-y: scroll;
}

a {
    color: @link-color;
    text-decoration: none;

    .transition(color 0.35s ease);

    &:hover {
        .transition(color 0.35s ease);
        color: #323232;
    }
}

.container {
    margin: 0 auto;
    width: 960px;
}

#top_page {
    position: relative;

    &:after {
        content: '';
        position: absolute;

        left: 0px; bottom: -49px;

        width: 100%; height: 49px;

        background-image: url('/static/img/g_shad.png');
        background-repeat: repeat-x;

        z-index: -1;
    }

    .loading {
        display: none;
        padding: 20px 10px;
    }

    .content {
        background-color: #454a52;
        .bg-3(url('/static/img/ajax_content/shad_top.png'), url('/static/img/ajax_content/shad_bottom.png'), linear-gradient(top, #3c4148, #525962));
        background-position: top, bottom, center;
        background-repeat: repeat-x, repeat-x, no-repeat;

        text-shadow: 1px 1px 0 rgba(0,0,0,0.15);

        color: #e1e1e1;

        font-size: 14px;

        .side {
            padding: 28px 0 35px 0;
            
            width: 475px;
            float: left;

            h1 {
                font-size: 14px;

                padding: 0 5px 15px 15px;
                margin: 0 0 27px 0;

                color: #808284;

                background-image: url('/static/img/ajax_content/headline_sep.png');
                background-position: bottom;
                background-repeat: repeat-x;

                font-family: 'GothamBookRegular', sans-serif;

                strong {
                    font-family: 'GothamBlackRegular', sans-serif;
                }
            }

            &.align_right {
                width: 475px;
                padding: 28px 10px 35px 0;
                text-align: right;
            }

            p {
                font-size: 14px;
                padding: 0 5px 0 15px;

                font-family: 'Aller', sans-serif;
                color: #c8c8c8;

                &.title {
                    color: #e1e1e1;
                    font-weight: bold;
                    font-size: 24px;
                }

                &.subtitle {
                    color: #e1e1e1;
                    font-size: 15px;

                    margin: 5px 0 14px 0;
                }

                &.text {
                    line-height: 21px;
                }
                
                span {
                    color: #d7d7d7;
                    font-weight: bold;
                    
                    &.available {
                        span.no {
                            display: none;
                        }
                    }
                    &.timeframe {
                    }
                }
            }
        }
    }
}

/*******************************************************************************
 * HEADER
 ******************************************************************************/
header {
    margin-left: 5px;
    margin-right: 15px;

    font-family: 'Aller', sans-serif;
    font-size: 15px;
    color: #969696;
    text-shadow: 1px 1px 0px #fff;

    .pad { padding-top: 45px; }

    .logo {
        padding-left: 78px;

        width: 120px;
        height: 35px;

        background-image: url('/static/img/logo_sprite.png');
        background-position: 0 0;
        background-repeat: no-repeat;

        &:hover {
            background-position: 0 -80px;
        }

        h1 {
            color: #969696;
            font-weight: normal;
            strong { font-weight: bold; }
        }

        .hover_text { display: none; }
    }
}

#nav {
    overflow: hidden;
}

#nav li {
    position: relative;

    display: inline;
    margin-right: 30px;
    background-position: left center;

    background-repeat: no-repeat;

    .transition(opacity 1s ease);

    a { color: inherit; }

    .arrow {
        display: none;
        position: absolute;

        bottom: 50px;
        width: 21px; height: 15px;

        background-image: url('/static/img/ajax_content/arrow.png');
    }

    &.active {
        .arrow { display: inherit; }

        color: #3c4148;
        &:hover { color: #3c4148; }
    }

    &:hover {
        color: @link-color;
        .transition(opacity 0.25s ease);
    }

    &.about {
        background-image: url('/static/img/menu/icons_sprite.png');
        background-position: 0 -85px;
        padding-left: 23px;

        &:hover {
            background-position: 0 -102px;
        }

        &.active {
            background-position: 0 -119px;
        }
    }

    &.work {
        background-image: url('/static/img/menu/icons_sprite.png');
        background-position: 0 0;
        padding-left: 24px;

        &:hover {
            background-position: 0 -17px;
        }

        &.active {
            background-position: 0 -34px;
        }
    }

    &.journal {
        background-image: url('/static/img/menu/icons_sprite.png');
        background-position: 0 -51px;
        padding-left: 24px;

        &:hover {
            background-position: 0 -68px;
        }
    }

    &.contact {
        background-image: url('/static/img/menu/icons_sprite.png');
        background-position: 0 -136px;
        padding-left: 23px;

        &:hover {
            background-position: 0 -153px;
        }

        &.active {
            background-position: 0 -170px;
        }
    }

    &:last-child { margin-right: 10px; }
}

/*******************************************************************************
 * CONTENT
 ******************************************************************************/
article {
    margin: 0px 5px;
    margin-top: 35px;

    .headline {
        height: 40px; line-height: 40px;
        
        padding: 0 10px 2px 10px;

        background-image: url('/static/img/headline_shad.png');
        background-repeat: no-repeat;
        background-position: bottom;

        font-family: 'GothamBookRegular', sans-serif;
        font-size: 14px;
        color: #969696;

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

        .black {
            font-family: 'GothamBlackRegular', sans-serif;
        }

        .left {
            color: #969696;

            background-repeat: no-repeat;
            background-position: 0px 3px;

            padding-left: 19px;
        }

        .right {
            .icon {
                display: inline-block;
                width: 10px;
                height: 40px;
                
                margin-left: 2px;
                
                background-image: url('/static/img/headline_icons_sprite.png');
                background-position: left -160px;
                background-repeat: no-repeat;
            }

            &.active {
                .icon {
                    background-position: 0 -200px;
                }
            }
        }
    }
}

/*******************************************************************************
 * FOOTER
 ******************************************************************************/
footer {
    background-image: url('/static/img/footer_light.png');
    background-position: center top;
    background-repeat: no-repeat;

    margin: 50px 0 30px 0;
    padding: 26px 15px 30px 15px;

    color: #646464;

    .block {
        text-shadow: 1px 1px 0px #fff;
        padding-left: 68px;
        width: 242px;
        background-position: left center;
        background-repeat: no-repeat;

        p { line-height: 17px; }

        .title {
            font-weight: bold;

            a {
                color: #646464;
                &:hover { color: #000; }
            }
        }

        &.self {
            background-image: url('/static/img/footer/icons_sprite.png');
            background-position: 0 0;
            padding-left: 62px; // 68px
            width: 248px; // 310px - 62px
        }

        &.contact {
            background-image: url('/static/img/footer/icons_sprite.png');
            background-position: 0 -52px;
            padding-left: 61px;
            width: 249px; // 310px - 61px
        }

        &.copyright {
            background-image: url('/static/img/footer/icons_sprite.png');
            background-position: 0 -104px;
            padding-left: 70px;
            width: 240px; // 310px - 70px
        }
    }
}

/*******************************************************************************
 * SELECTION COLOURS
 ******************************************************************************/
@selection-bg: rgba(0,0,0,0.4);
@selection-color: #FFF;

//html { -webkit-tap-highlight-color: @selection-bg; }
::selection { text-shadow: none; background: @selection-bg; color: @selection-color; }
::-moz-selection { text-shadow: none; background: @selection-bg; color: @selection-color; }
::-webkit-selection { text-shadow: none; background: @selection-bg; color: @selection-color; }

/*******************************************************************************
 * WEBKIT SCROLLBAR
 *
 * UNDONE: this breaks pageYOffset and other scroll functions
 ******************************************************************************/
/*
@scrollbar-color: rgba(0,0,0,0.2);

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1024px) {
    html {
        overflow-y: auto;
        background-color: transparent;
    }
    body {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 10px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    ::-webkit-scrollbar {
        width: 8px; height: 10px;
    }
    ::-webkit-scrollbar-button:start:decrement {
        display: block; width: 5px; height: 5px; background-color: transparent;
    }
    ::-webkit-scrollbar-button:end:increment {
        display: block; width: 5px; height: 5px; background-color: transparent;
    }
    ::-webkit-scrollbar-track:enabled {
        background-color: transparent;
    }
    ::-webkit-scrollbar-track-piece {
        background-color: transparent; border: none; margin: 8px 0 8px 0;
    }
    ::-webkit-scrollbar-thumb:vertical {
        height: 30px; background-color: @scrollbar-color; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.2)
    }
    ::-webkit-scrollbar-thumb:horizontal {
        width: 30px; background-color: @scrollbar-color; -webkit-border-radius: 5px;
    }
}
*/