@import "compass/css3";

@import "compass/utilities/general/clearfix";
@import "compass/reset";

$green: #0F0;
$graphHeight:400px;
$graphWidth:880px;

@mixin absolute-position($height, $width){
    height:$height;
    width:$width;

    position:absolute;
    top: ($graphHeight / 2) - ($height / 2);
    left: ($graphWidth / 2) - ($width / 2);
}


html, body { height:100%; min-height:100%; background-color:#222; }

h1, h2, strong, em { color:$green; font-family:"Courier New",Courier,monospace; }
a { text-decoration:none; color:inherit; }

.wrap { width:1000px; margin:0 auto; }

#header {
    height:60px; border:1px solid $green; border-width:0 0 1px 0; margin:0 0 20px;

    background-color: #000000;
    @include filter-gradient(#000000, #222, vertical);
    @include background-image(linear-gradient(top, #000000 0%,#222 100%));

    @include pie-clearfix;

    h1 { float:left; font-size:28px; padding:15px 0 0; }
    ul {
        float:right; width:300px; margin:15px 0;

        li {
            float:left; margin:0 20px;
            a { cursor:pointer; }
        }
    }
}

#content {
    color:#FFF; width:1000px; margin:0 auto; font-size:18px;

    h1 { font-size:26px; margin:30px 0; }
    h2 { font-size:24px; margin:20px 0; }

    p {
        em { font-style:italic; margin:0 -4px 0 0; }
    }

    .graph {
        height:$graphHeight;
        width:$graphWidth;

        position:relative;
        margin:0 auto;

        em {
            @include absolute-position(30px, 300px);

            padding:2px 0;
            font-size:26px;
            text-align:center;

            -webkit-animation-name:blink;
            -webkit-animation-duration:1s;
            -webkit-animation-iteration-count:infinite;
        }
    }

    .inputs {
        width:900px; margin:0 auto 30px; text-align:center;

        label { font-weight:bold; }
        input { width:200px; }
    }
}

#loading {
    @include absolute-position(100px, 280px);

    display:none;

    strong {
        float:right;
        font-size:26px;
        margin:36px 0 0;
    }

    #spinner {
        position:relative;
        float:left;
        width:100px;
        height:100px;

        -webkit-animation-name: rotateSpinner;
        -webkit-animation-duration:2s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;

        div {
            width:10px;
            height:30px;
            background:$green;

            position: absolute;
            top:35px;
            left:45px;
        }

        $i:1;
        $rotate:0deg;
        $opacity:0.12;

        @while ($i <= 8) {
            .bar#{$i} {
                @include simple-transform(1, $rotate, 0px, -40px);

                opacity:$opacity;
            }

            @if ($i % 2 == 0){
                $opacity:$opacity + 0.13;
            } @else {
                $opacity:$opacity + 0.12;
            }

            $rotate: $rotate + 45deg;
            $i: $i + 1;
        }
    }
}

@-webkit-keyframes rotateSpinner {
    from { -webkit-transform:scale(0.5) rotate(0deg);   }
    to   { -webkit-transform:scale(0.5) rotate(360deg); }
}

@-webkit-keyframes blink {
    0%   { opacity:1.0;  }
    50%  { opacity:0.25; }
    100% { opacity:1.0;  }
}