/* Makes absolute positioning relative to parent */
#busyIndicatorWrapper {
    position: fixed;
}

#busyIndicatordiv {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -60px;
    z-index: 1002;
    background: gold;
    display: none;
    -moz-transition: top 0.3s ease-in;
    -o-transition: top 0.3s ease-in;
    -webkit-transition: top 0.3s ease-in;
    -transition: top 0.3s ease-in;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    font-weight: bold;
    /* Center Position */
    left: 50%;
    margin-left: -30px;
}

/* Accomodate for nav bar */
#mainContent > #busyIndicatorWrapper {
    top: 32px;
    left: 50%;
    width: 60px;
    height: 60px;
    z-index: 10000;
}

#busyIndicatorWrapper.animate #busyIndicatordiv {
    top: 0;
}

.busyIndicator {
    width: 32px;
    height: 32px;
    background: url('../images/busyspinner.gif') no-repeat;
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -16px;
    margin-top: -16px;
}

button .ko-spinner.kos-spinner {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px;
    background: url('images/ajax-loader-button.gif');
    display: none;
}

button .ko-spinner.kos-show {
    display: block;
    -webkit-animation: ko-spinner-show-anim 100ms ease-in;
    -moz-animation: ko-spinner-show-anim 100ms ease-in;
    -o-animation: ko-spinner-show-anim 100ms ease-in;
    animation: ko-spinner-show-anim 100ms ease-in;
}

button .ko-spinner.kos-hide {
    opacity: 0;
    -webkit-animation: ko-spinner-hide-anim 100ms ease-out;
    -moz-animation: ko-spinner-hide-anim 100ms ease-out;
    -o-animation: ko-spinner-hide-anim 100ms ease-out;
    animation: ko-spinner-hide-anim 100ms ease-out;
}

/* Show animation */
@-webkit-keyframes ko-spinner-show-anim {
    from {
        opacity: 0;
        -webkit-transform: scale(2,2);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1,1);
    }
}

@-moz-keyframes ko-spinner-show-anim {
    from {
        opacity: 0;
        -moz-transform: scale(2,2);
    }

    to {
        opacity: 1;
        -moz-transform: scale(1,1);
    }
}

@keyframes ko-spinner-show-anim {
    from {
        opacity: 0;
        transform: scale(2,2);
    }

    to {
        opacity: 1;
        transform: scale(1,1);
    }
}

/* Hide animation */
@-webkit-keyframes ko-spinner-hide-anim {
    from {
        opacity: 1;
        -webkit-transform: scale(1,1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.5,0.5);
    }
}

@-moz-keyframes ko-spinner-hide-anim {
    from {
        opacity: 1;
        -moz-transform: scale(1,1);
    }

    to {
        opacity: 0;
        -moz-transform: scale(0.5,0.5);
    }
}

@keyframes ko-spinner-hide-anim {
    from {
        opacity: 1;
        transform: scale(1,1);
    }

    to {
        opacity: 0;
        transform: scale(0.5,0.5);
    }
}