@import url('/static/css/shared.less');

#profile {
    .container {
        position: relative;

        background-image: url('/static/img/profile/map_bg.png');
        background-position: top;

        &:after { left: 795px; }
    }

    &:hover { #map_pin { .transition(opacity 0.25s ease-in-out); opacity: 1; } }

    #map_pin {
        position: absolute;

        .transition(opacity 0.5s ease-in-out);
        opacity: 0;

        top: 63px; left: 318px;
        width: 14px; height: 20px;

        background-image: url('/static/img/profile/map_pin.png');
    }

    ul {
        width: 390px;
        float: right;

        padding: 3px 4px 0 0;
    }

    ul li {
        @fadein-time: 0.1s;
        @fadeout-time: 0.3s;

        position: relative;

        .transition(all @fadeout-time linear);

        display: inline-block;
        height: 32px;

        margin-right: 25px;
        margin-bottom: 48px;

        opacity: 0.3;

        text-align: center;

        //background-image: url('/static/img/profile/icons_sprite.png');
        //background-repeat: repeat-y;

        &:hover {
            .transition(all @fadeout-time linear);
            opacity: 1.0;

            span {
                .transition(all @fadein-time linear);
                opacity: 1.0;
                bottom: -6px;
            }
        }

        span {
            .transition(all @fadeout-time linear);
            position: relative;
            line-height: 15px;
            opacity: 0;
            bottom: -12px;

            font-family: 'Aller', sans-serif;
            font-weight: bold;
            font-size: 12px;
            color: #c8c8c8;
        }

        div.icon {
            background-image: url('/static/img/profile/icons_sprite.png');
            height: 33px;
            margin: 0 auto;
        }

        &:nth-of-type(6n) { margin-right: 0px; }

        &.row2 { margin-bottom: 0; }

        &.facebook { .icon { width: 33px; background-position: 0 0; } width: 33px; }
        &.twitter { .icon { width: 47px; background-position: 0 -33px; } width: 47px; }
        &.linkedin { .icon { width: 33px; background-position: 0 -66px; } width: 35px; }
        &.dribbble { .icon { width: 33px; background-position: 0 -99px; } width: 38px; }
        &.lastfm { .icon { width: 47px; background-position: 0 -132px; } width: 47px; }
        &.steam { .icon { width: 42px; background-position: 0 -165px; } width: 42px; }

        &.gplus { .icon { width: 33px; background-position: 0 -198px; } width: 33px; }
        &.skype { .icon { width: 33px; background-position: 0 -231px; } width: 47px; }
        &.youtube { .icon { width: 35px; background-position: 0 -264px; } width: 35px; }
        &.vimeo { .icon { width: 38px; background-position: 0 -297px; } width: 38px; }
        &.psn { .icon { width: 34px; background-position: 0 -330px; } width: 47px; }
        &.xlive { .icon { width: 33px; background-position: 0 -363px; } width: 42px; }
    }
}