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: 125px; 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: 125px; 17 height: 125px; 18 float:left; 19} 20/* Basic block */ 21.block { 22 background-color: gray; 23 display: inline-block; 24 width: 100px; 25 height: 100px; 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} 34input:focus { 35 background-color: rgb(0, 255, 0); 36} 37#outside-region { 38 clear: both; 39 width: 125px; 40 height: 125px; 41 background-color: rgb(255, 191, 0); 42 margin: 25px; 43} 44#outside-region:hover { 45 background-color: rgb(0, 255, 0); 46} 47#log { 48 clear: both; 49} 50