@import "compass/css3";

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

$green: #0F0;
$color: #EEE;
$bgColor: #222;

$fontFamily:"Courier New",Courier,monospace;

$contentWidth:1000px;
$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:$bgColor; }
h1, h2, h3, strong, em { color:$green; font-family:$fontFamily; }
a { text-decoration:none; font-family:$fontFamily; color:inherit; }

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

#header {
    height:60px;
    margin:0 0 20px;

    border:1px solid $green;
    border-width:0 0 1px 0;
    background-color: #000000;

    @include filter-gradient(#000000, $bgColor, vertical);
    @include background-image(linear-gradient(top, #000000 0%, $bgColor 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 {
    position:relative;
    width:$contentWidth;
    margin:0 auto;
    font-size:18px;
    color:$color;

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

    p {
        margin:20px 0;
        text-align:center;

        em {
            font-style:italic;
            color:$green;
        }
    }

    > strong {
        margin-top:200px;
        display:block;
    }

    strong, .nv-noData {
        padding:2px 0;
        font-size:26px;
        text-align:center;

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

    .graph {
        height:$graphHeight;
        width:$graphWidth;
        margin:0 auto;

        strong, .nv-noData {
            @include absolute-position(30px, 300px);
        }
    }

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

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

    .list-container {
        width:500px;
        float:left;

        h3 {
            @include box-sizing(border-box);

            margin:20px 15px;
            text-align:center;
            border-bottom:1px dashed $green;
        }

        ul {
            list-style:circle;
            padding-left:30px;
        }
    }
}

#loading {
    @include border-radius(8px);
    @include opacity(0);

    border:2px solid rgba($green, 0.25);
    background: darken($bgColor, 1%);

    position:absolute;
    top:50%; left:50%;
    margin:-52px 0 0 -142px;

    strong {
        float:right;
        font-size:26px;
        margin:36px 10px 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;
        }
    }


    &.fade {
        -webkit-transition: opacity 0.5s ease-in;
        -moz-transition: opacity 0.5s ease-in;
        -o-transition: opacity 0.5s ease-in;

        &.in {
            opacity:1.0;
        }

        &.out {
            opacity:0.0;
        }
    }
}

@-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;  }
}

@import "charts";