body,
button {
    font-family: cursive;
    font-size: 14pt;
    text-align: center;
}

/* The area that holds the 15 puzzle pieces. */
#puzzlearea {
    font-size: 40pt;
    width: 400px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    cursor: pointer;
}

/* This class should be applied to each of the 15 puzzle pieces. */
.puzzlepiece {
    background-image: url(background.jpg);
    border: 5px solid black;
    width: 90px;
    height: 90px;
    position: absolute;
}

/* This class should be applied to a puzzle piece that can be moved. */
.movablepiece:hover {
    border-color: red;
    color: red;
}

/* grading styles -- for TAs only; not required by students */
#gradingarea {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 999999;
}

.valid {
    background-color: #bfb;
}

.invalid {
    background-color: #f88;
}

#shufflebutton {
    cursor: pointer;
}