.interface
{
    background-color: #778855;
}
.interfaceBorder
{
    border-color: #77AA55;
}


.horline
{
    width: 100%;
    height: 2%;
    position: absolute;
    top: 47.5%;
    width: 20%;
}

.horleft
{
    left: 0%;
}

.horright
{
    right: 0%;
}
.verline
{
    position: absolute;
    width: 2%;
    height: 50%;
    top: 25%;
}


.verleft
{
    left: 20%;
}

.verright
{
    right: 20%;
}

.cornerline
{
    position: absolute;
    width: 10%;
    height: 1%;
}

.cornerlineTop
{
    bottom: 75%;
}

.cornerlineBottom
{
    top: 75%;
}

.cornerlineLeft
{
    left: 20%;
}

.cornerlineRight
{
    right: 20%;
}

.frameWrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.circle
{
    position: absolute;
    border-width: 20px;
    border-style: solid;
    border-bottom-color: rgba(0,0,0,0);
    border-top-color: rgba(0,0,0,0);
    border-radius: 200% 200%;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.circle1
{
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}
.circle2
{
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-style: double;
    -o-transform: rotate(0deg);
}

.circle3
{
    width: 10%;
    height: 10%;
    top: 35%;
    left: 35%;
    border-width: 40px;
    -o-transform: rotate(0deg);
}

.circle4
{
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-width: 5px;
    -o-transform: rotate(0deg);
}

.circleWrapper
{
    position: absolute;
    width: 50%;
    height: 50%;
    left: 25%;
    top: 25%;
}

.loadingWrapper {
    position: absolute;
    width: 500px;
    height: 500px;
    left: calc(50% - 250px);
    top: 20%
}