body {
    font-family:sans, arial;
}
/* HEADING */
h1, dfn {
    text-align:center;
    display:block;
    margin:0px 0px 0px 0ex;
}
dfn {
    font-size:110%;
}
dfn + dfn {
    font-size:80%;
}

/* FRAME AROUND GAME AND BUTTONS */
div.coat {
    margin:0 auto;
    text-align:center;
    border:1px dotted gray;
    border-radius:30px;
    background-color:#e0e0e0;
    padding-bottom:500px;
}

/* GAME AREA */
div.game {
    display:inline-block;
    vertical-align:top;
    margin:.5cm;
    background-color:bisque;
    border-radius:30px;
    padding:30px;
}

/* INSTRUCTIONS WITHIN GAME AREA */
table.manual {
    margin:0 auto;
}
table.manual th {
    text-align:right;
    padding-right:1em;
}
table.manual td, table.manual th {
    vertical-align:bottom;
}
table.manual td, table.manual th {
    padding-bottom:1.5ex;
}
table.manual tr:first-child td {
    padding-top:30px;
}

/* INSTRUCTIONS off, toggle to on */
div.coat table.manual {
    display:none;
}
div.coat.manual table.manual {
    display:initial;
}

/* GAME on, toggles to off */
div.coat div.board > div {
}
div.coat.manual div.board > div {
    display:none;
}

/* THE BOARD TO PLAY THE GAME ON */
div.board {
    position:relative;
    border:4px outset gray;
    box-shadow:5px 5px 10px black;
    transition-property:width, height;
    transition-duration:.5s;
    margin-bottom:1ex;
}

/* INDIVIDUAL TILES ON BOARD */
div.board > div {
    border:1px solid black;
    position:absolute;
    transition-property:opacity, transform, left, top, box-shadow;
    transition-duration:.5s;
}

div.board > div.lifted {
    transition-duration: 0s;
    box-shadow:6px 6px 16px black;
}

/* HINTING WHICH TILES ARE WRONG */
div.board > div.wrong {
    box-shadow:0px 0px 28px red, 0px 0px 28px black;
}

/* HINTING WHAT A GOOD MOVE COULD BE */
div.hint {
    color:white;
    width:100px;
    height:100px;
    font-size:100px;
    text-shadow:0px 0px 1px black, 0px 0px 6px black;
    transition-property:opacity;
    transition-duration:.5s;
    position:absolute;
}

/* HINTS FADE OUT BEFORE DISAPPEARING */
div.hint.fade {
    opacity:0;
}

/* WHEN SOLVED, THE TILES MOVE TOGETHER TO FORM A PICTURE */
div.game.solved div.board > div {
    border:none;
}

/* PRAISE, e.g. WELL DONE */
div.game + div.knobs div.praise {
    opacity:0;
    max-height:0px;
    transition-property:opacity, max-height;
    transition-duration:.5s;
    font-size:24pt;
}
div.game.solved + div.knobs div.praise {
    opacity:1;
    max-height:500px;
}

/* BUTTONS FOR INSTRUCTIONS, AND HINTING, PICTURE PREVIEW */
div.knobs {
    display:inline-block;
    vertical-align:top;
    margin:.5cm;
    border-radius:30px;
    padding-left:30px;
}
div.knobs img {
    width:200px;
    display:block;
    margin-bottom:16px;
    border:4px outset gray;
    box-shadow:5px 5px 10px black;
    filter:grayscale(100%);
    transition-property:max-height, opacity;
    transition-duration:1.5s;
    max-height:600px;
}
div.game.solved + div.knobs img
{
    max-height:0px;
    opacity:0;
}
div.knobs div.gamebuttons
{
    transition-property:max-height, opacity;
    transition-duration:1.5s;
    overflow:hidden;
    max-height:900px;
}
div.game.solved + div.knobs div.gamebuttons
{
    max-height:0px;
    opacity:.5;
}
div.knobs button {
    width:208px;
    background-color:bisque;
    border-radius:6px;
    padding:5px 10px;
    display:block;
    margin-bottom:16px;
}
div.knobs button.next {
    font-weight:bold;
}

/* WHEN DISPLAYING INSTRUCTIONS, CERTAIN ELEMENTS NEED TOGGLING ON AND OFF */
div.coat *.off {
    display:none;
}
div.coat *.on  {
    display:initial;
}

div.coat.manual *.off {
    display:initial;
}
div.coat.manual *.on  {
    display:none;
}

/* WHEN A PICTURE IS SOLVED, DISPLAY A PICTURE DISCRIPTION */
div#blurb {
    background-color:bisque;
    border-radius:30px;
    padding:10px 30px;
    width:50em;
    margin:0 auto;
    transition-duration:1s;
    transition-property:opacity;
    opacity:0;
}
div#blurb.solved {
    opacity:1;
}

a {
    color:#af0066;
}

p {
    margin:0px;
}