// vars
@fontSize: 16px;
@fontColor: #555;
@headingColor: #000;
@blue: rgb(24, 168, 243);
@lineHeight: 1.5;

// mixins
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @val; -webkit-box-shadow: @val; -moz-box-shadow: @val; }
.border-radius (@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
.clear { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.gradient (@from, @to) {
    background-color: @from;
    background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, @from, @to); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(top, @from, @to); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, @from, @to); /* IE10 */
    background-image:      -o-linear-gradient(top, @from, @to); /* Opera 11.10+ */
    background-image:         linear-gradient(top, @from, @to);
}

// styles
.container_12:after { .clear; }

body { font: normal normal 16px/1.5 sans-serif; color: @fontColor; /*background: url('http://subtlepatterns.com/patterns/handmadepaper.png');*/ }

h1, h2, h3, h4, h5, h6 { color: @headingColor; }

h1 { .box-shadow(1px, 1px, 5px, .5); font-size: @fontSize*3; }
h2 { color: @blue; font-size: @fontSize*2; display: inline-block; .border-radius(3px); background: #fff; }
h3 { font-size: @fontSize*1.25; margin-bottom: 5px; }

a { text-decoration: none; color: #000; border-bottom: 1px solid; }

li { list-style-type: square; }

pre { border-left: 5px solid @blue; font-size: 14px; }

.editable { background: lighten(#3b6eae, 50%); }

.eightbitbeatslink { background: transparent url(images/8bb-favicon.png) 2px 0 no-repeat; padding-left: 22px; }

.social_stuff { padding-left: 100px; width: 150px; position: fixed; top: 210px; }
.main:after { .clear; }
.main-header { margin-bottom: 50px; margin-top: 50px; }
.download, .intro { margin-top: 52px; }
#logo { position: relative; left: -16px; }

.note { font: italic bold 15px/1.5 georgia; margin-bottom: 15px; }
.note:before { content: '* '; color: @blue; font-size: 20px; }

.section { margin-bottom: 50px; }

// editing styles

b, .bold { color: #333; }

.download-link { background: @blue url('images/download.png') no-repeat top left; padding: 15px 15px 15px 53px; .border-radius(5px); .gradient(lighten(@blue, 10%), darken(@blue, 10%); position: relative;
    color: #fff; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,.5);
    a { border: none; }
    border: 1px solid darken(@blue, 20%);
    .download-icon { background: url('images/download.png') no-repeat top left; position: absolute; top: 11px; left: 15px; width: 50px; height: 50px; display: block; }
}

.download-link:hover { .gradient(lighten(@blue, 7%), darken(@blue, 7%); }
.download-link:active { .gradient(darken(@blue, 5%), lighten(@blue, 5%); position: relative; top: 1px; }

.main-footer li { list-style-type: none; margin-left: 0; }

.save-event { display: none; }

.section img { display: block; max-width: 608px; padding: 1px; border: 1px solid #ccc; margin-bottom: 24px; }