@import "css/reset.css";

@sansSerifFont: Helvetica, Arial, FreeFont, sans-serif;
@serifFont: Georgia, Times, "Times New Roman", serif;
@bodyFontSize: 16px;
@insetDarkBackgroundColor: #474747;
@insetColor: #222;
@insetShadowColor: #666;

.borderRadius (@width: 5px) {
    border-radius: @width;
    -webkit-border-radius: @width;
    -moz-border-radius: @width;
}

.rotate (@angle: 10deg) {
    -webkit-transform: rotate(@angle);
    -moz-transform: rotate(@angle);
}

@shadowColor: rgba(0,0,0,0.5);
.boxShadow (@arguments: 0 0 10px 3px @shadowColor) {
    box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
}

.radialGradient {
    background-image: -moz-radial-gradient(50% 10% 0deg, circle cover, #494949, #333);
    background-image: -webkit-gradient(radial, 50% 10%, 75, 50% 50%, 300, from(#494949), to(#333));
}

.transform (@arguments: none) {
    transform: @arguments;
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
}

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: -webkit-gradient(linear, left 35%, left bottom, from(white), to(#aaa));
    background-image: -moz-linear-gradient(100% 35% 270deg,white, #aaa);
    height: 100%;
}

body {
    font-family: @serifFont;
    font-size: @bodyFontSize;
    line-height: 1.25em;

    //background-color: white;

    min-width: 500px;
    clear: both;
    height: 100%;
}

header, footer, section, nav, article {
    display: block;
}

#bc {
    @height: 275px;
    @width: @height * 1.618;

    background-color: @insetDarkBackgroundColor;
    .radialGradient;
    //.boxShadow;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.2) inset;
    

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: (0 - @height / 2 - 24px);
    margin-left: (0 - @width / 2);
    width: @width;
    //height: @height;

    #name {
        display: block;
        text-align: center;

        font-family: @sansSerifFont;
        font-size: @bodyFontSize * 3;
        
        letter-spacing: -0.1em;

        color: #222;
        text-shadow: 0px 1px 1px #666;

        margin: 1em 0;

        .lastName {
            margin-left: 0.25em;
            font-weight: bold;
        }
    }
    
    .middleSeparator {
        border: none;
        width: @width - 1;
        background-color: #222;
        height: 1px;
        .boxShadow(1px 1px 1px @insetShadowColor);
    }

    nav {
        text-align: center;
        margin: 1.5em;
    }

    li {
        display: inline-block;
        color: #bfbfbf;
        padding: 0 0.5em;

        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;

        a {
            color: #bfbfbf;
            text-decoration: none;
            text-shadow: 1px 1px 1px @insetColor;
        }
    }

    li:hover {
        border-bottom: 2px solid #bfbfbf;
    }
}

#bc:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 12px;
bottom: 16px;
.transform(skew(15deg) rotate(6deg));
.boxShadow(0 8px 24px rgba(0,0,0,0.3))
}

#bc:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 12px;
bottom: 16px;
.transform(skew(-15deg) rotate(-6deg));
.boxShadow(0 8px 24px rgba(0,0,0,0.3))
}

footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    font-size: @bodyFontSize - 4px;
    color: @insetShadowColor;
    text-align: center;
}