html/css layout question

[BdR]

I'm trying to make my first HTML5 game and it's going pretty well. The javascript coding is not a problem, but I'm new to the whole css stuff. I've looked at several examples and here is what I've got so far (bonus points if you know which game I'm making )

 

http://jsfiddle.net/5Saxg/

 

I'm pretty close to my goal layout, except for points A and B, see image below:

 

A: What is the best way to make the hintpegs on the right so they are shown on two rows instead of on one line? I mean, so they are shown like in the goal layout. I've tried using a <br/> in the html but then it jumps down too much. Also when there are 3 or 5 hintpegs, what's the best way to make it "jump in" a little? So it's more like a honeycomb pattern instead of a grid.

 

B: I want to add a indicator for when the player selects a color, which cycles through all the colors. It's like a small rectangle above the pegs at the bottom. What is the best way to accomplish this?

[OadT]

Ugly solution for B:

.selectpeg:before{    background: white;    content: "";    width: 16px;    height: 6px;    position: absolute;    transform: translate(75%, -133%);    -webkit-transform: translate(75%, -133%);}

Runs in (the latest Versions of) Firefox, Chrome, Opera and Explorer. Just change the class for your needs

[Quetzacotl]

For A you need javascript, you can't do it only with CSS. PS. Mastermind.