/* Variables */
@darkgreen: #18485c;
@seafoam: #96dac1;
@cream: #efffd3;
@orange: #e06441;
@brown: #3b3329;

@font-size: 18px;
@line-height: 1.5;

/* Mixins */
.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }
.text-shadow (@x:0, @y:0, @blur:3px, @color:rgba(0,0,0,.5)) { text-shadow: @x @y @blur @color; }
.clearfix () { clear: both; content: "\0020"; display: block; height: 0; visibility: hidden; }
.pseudo-element () { content: ''; display: block; }

/* General */
body {
    font-size: @font-size;
    line-height: @line-height;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
/*    background: url(http://griddle.it/960-12-30) repeat-y center top; */
/*    background: url('images/graphpaper.png');*/
/*    background: url('images/subtle_freckles.png');*/
    background: url('images/old_mathematics.png') 141px 0;

    position: relative;
    color: @brown;
}

/*body::after { position: absolute; top:0; left: 0; bottom: 0; right: 0; content: ''; display: block; background: rgba(255, 255, 255, .8); z-index: -500; }*/

h1 { font-size: @font-size * 3; }

a { color: @orange; text-shadow: 0 0 2px rgba(0, 0, 0, .2); text-decoration: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, .2); 
    &:hover { color: @seafoam; }
}

p { margin-bottom: 15px; } 

.layout-wrapper { margin: 0 auto; width: 960px; }

.header { margin-bottom: 50px; } 
.header:after { .clearfix }
.footer { box-shadow: 0 0 5px rgba(0, 0, 0, .5); width: 100%; }
.main-nav { .text-shadow(0px,0px,1px, rgba(0,0,0,1)); float: left; margin-top: 175px; margin-left: 215px; padding: 0 30px; position: relative; z-index: 100; /*-webkit-transform: skewY(-20deg);*/ /*-webkit-transform: skewX(20deg);*/ }
.main-nav p { color: #fff; font-size: 24px; .text-shadow(0px,0px,1px, rgba(0,0,0,.4))}
.main-nav p span { font-size: 30px; }
.main-nav a, .main-nav a:visited { color: #fff; text-decoration: none; .text-shadow(1px,1px,1px, rgba(0,0,0,.5));}
/*.main-nav li { display: inline; }*/
article { width: 630px; }
/*section { padding-top: 50px; }*/
/*section:first-child { padding-top: 0; }*/
aside { float: right; width: 300px; }

.main { -webkit-box-shadow: inset 0 30px 30px rgba(0,0,0,.02), inset 0 -30px 30px rgba(0,0,0,.02); border: solid #9e9e9e; border-width: 1px 0; position: absolute; top: 45%; left: 0; right: 0; width: 100%; height: 222px; background: @orange url('images/stripe-bg.png'); }

.logo { top: -10px; .text-shadow; border: 1px solid lighten(@brown, 20%); border-width: 0 1px 1px 1px; position: relative; height: 205px;  float: left; color: @brown; display: inline-block; padding: 20px; font-size: 80px; /*text-shadow: 0 0 3px rgba(0, 0, 0, .3);*/ box-shadow: 0 0 5px rgba(0, 0, 0, .5); }
/*.logo::after { z-index: -100; content: ''; display: block; position: absolute; right: 0; top: 15px; left: 0; bottom: 15px; background-color: @orange; }*/
.logo > span { display: block; line-height: .9; }
.logo .josh { color: white; width: auto; }
.logo .josh span { /*background: rgba(150, 218, 193, .9)*/ /*border: 1px solid #ccc;*/  }
.logo .on-the { font-size: 61px; }
.logo .web { font-size: 86px; }

.colors { margin: 0; padding: 0; list-style-type: none; }
.colors li {  padding: 0; margin: 0; height: 15px; }
.colors .one { background: @darkgreen; }
.colors .two { background: @seafoam; }
.colors .three { background: @cream; }
.colors .four { background: @orange; }
.colors .five { background: @brown; }

.github-ribbon { z-index: 100; position: absolute; top: 153px; right: 0; }