1/* Set the margin to 0 so we'll know that the target will be there if the content isn't flowing into a region */
2body {
3    margin: 0;
4}
5#msg-complete {
6    color: blue;
7}
8/* Set the width of the content div so that the blocks will wrap downward when they're not flowing into a region */
9#content {
10    flow-into: content;
11    width: 75px;
12}
13/* Set regions to float left so the blocks will be laid out horizontally when they're flowing into the regions */
14.region {
15    flow-from: content;
16    width: 75px;
17    height: 75px;
18    float: left;
19}
20/* Basic block */
21.block {
22    background-color: gray;
23    display: inline-block;
24    width: 50px;
25    height: 50px;
26}
27/* Set color on the target to be different than the others */
28#target-block {
29    background-color: rgb(0, 0, 0);
30}
31#target-block:hover {
32    background-color: rgb(0, 255, 0);
33}
34#outside-region {
35    clear: both;
36    width: 75px;
37    height: 75px;
38    background-color: rgb(255, 191, 0);
39    margin: 25px;
40}
41#outside-region:hover {
42    background-color: rgb(0, 255, 0);
43}
44#log {
45    clear: both;
46}