div#header {
    background: forestgreen;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, forestgreen, yellow);
    /* For Safari 5.1 to 6.0 */
    /* For Opera 11.1 to 12.0 */
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, forestgreen, yellow);
    /* Standard syntax */
    color: whitesmoke;
    padding: 1px 0 1px 260px;
    font-size: 130%;
    border-bottom-right-radius: 90px;
    box-shadow: 10px 10px 5px #888888;
    font-style: oblique;
}

.box {
    border: solid 2px aqua;
    width: 80px;
    height: 80px;
    margin: 10px;
    padding: 5px;
    float: left;
    border-radius: 100px;
    text-align: center;
}

.boxDrop {
    border: solid 2px whitesmoke;
    width: 80px;
    height: 80px;
    margin: 10px;
    padding: 5px;
    float: left;
    border-radius: 100px;
}

span.number {
    font-size: 330%;
    color: lightgoldenrodyellow;
    padding: 5px;
    display: block;
}

#pos1 {
    position: absolute;
    left: 30px;
    top: 150px;
}

#pos2 {
    position: absolute;
    left: 610px;
    top: 150px;
}

#pos3 {
    position: absolute;
    left: 338px;
    top: 110px;
}

#pos4 {
    position: absolute;
    left: 178px;
    top: 240px;
}

#pos5 {
    position: absolute;
    left: 478px;
    top: 240px;
}

#pos6 {
    position: absolute;
    left: 330px;
    top: 310px;
}

#pos7 {
    position: absolute;
    left: 30px;
    top: 430px;
}

#pos8 {
    position: absolute;
    left: 230px;
    top: 430px;
}

#pos9 {
    position: absolute;
    left: 420px;
    top: 430px;
}

#pos10 {
    position: absolute;
    left: 610px;
    top: 430px;
}

#pos11 {
    position: absolute;
    left: 330px;
    top: 570px;
}

div#bgImgContainer {
    background-image: url("images/soccer-field.jpg") no-repeat;
}

div#playerIcons {
    position: relative;
    float: right;
    width: 39%;
    margin-top: 15px;
}

div#playerIcons img {
    max-height: 100px;
    max-width: 100px;
    border: double 5px gray;
}

div#playerIcons img:hover {
    max-height: 100px;
    max-width: 100px;
    border: double 5px forestgreen;
    cursor: move;
}

img#maradona {
    position: relative;
    -webkit-animation-name: dragMaradona;
    animation-name: dragMaradona;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-animation-play-state: initial;
    animation-play-state: initial;
}

@-webkit-keyframes dragMaradona {
    0% {
        left: 0px;
        top: 0px;
        opacity: 0.6;
    }
    50% {
        left: -775px;
        top: -40px;
        opacity: 0.6;
    }
    52% {
        left: -775px;
        top: -40px;
        opacity: 0;
    }
    100% {
        left: -775px;
        top: -40px;
        opacity: 0;
    }
}

@keyframes dragMaradona {
    0% {
        left: 0px;
        top: 0px;
        opacity: 0.6;
    }
    50% {
        left: -775px;
        top: -40px;
        opacity: 0.6;
    }
    52% {
        left: -775px;
        top: -40px;
        opacity: 0;
    }
    100% {
        left: -775px;
        top: -40px;
        opacity: 0;
    }
}

img#fieldAnimation {
    position: absolute;
    width: 1px;
    height: 10px;
    -webkit-animation-name: fieldAnimation;
    animation-name: fieldAnimation;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
    -webkit-animation-play-state: initial;
    animation-play-state: initial;
}

@-webkit-keyframes fieldAnimation {
    from {
        left: 9px;
        top: 99px;
        width: 740px;
        height: 593px;
    }
    to {
        left: 9px;
        top: 99px;
        width: 740px;
        height: 593px;
    }
}

@keyframes fieldAnimation {
    from {
        left: 9px;
        top: 99px;
        width: 740px;
        height: 593px;
    }
    to {
        left: 9px;
        top: 99px;
        width: 740px;
        height: 593px;
    }
}

img#cursor {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    top: 180px;
    left: 200px;
    z-index: 1;
    -webkit-animation-name: moveCursor;
    animation-name: moveCursor;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-animation-play-state: initial;
    animation-play-state: initial;
}

@-webkit-keyframes moveCursor {
    0% {
        width: 13px;
        height: 13px;
        opacity: 1;
        top: 180px;
        left: 200px;
        z-index: 1;
    }
    50% {
        width: 13px;
        height: 13px;
        opacity: 1;
        left: -580px;
        top: 135px;
        z-index: 1;
    }
    52% {
        width: 1px;
        height: 1px;
        opacity: 0;
        left: -580px;
        top: 135px;
        opacity: 0;
    }
    100% {
        left: -580px;
        top: 135px;
        opacity: 0;
    }
}

@keyframes moveCursor {
    0% {
        width: 13px;
        height: 13px;
        opacity: 1;
        top: 180px;
        left: 200px;
        z-index: 1;
    }
    50% {
        width: 13px;
        height: 13px;
        opacity: 1;
        left: -580px;
        top: 135px;
        z-index: 1;
    }
    52% {
        width: 1px;
        height: 1px;
        opacity: 0;
        left: -580px;
        top: 135px;
        opacity: 0;
    }
    100% {
        left: -580px;
        top: 135px;
        opacity: 0;
    }
}