<h2>Roofpig solved and colored Lab</h2>

<div class="roofpig" data-config="colored=D*/e */m">Cross</div>
<div class="roofpig" data-config="colored=U- U">F2L</div>
<div class="roofpig" data-config="colored=U*|solved=U-">PLL</div>
<div class="roofpig" data-config="colored=u|solved=U-">OLL</div>
<div class="roofpig" data-config="colored=ULB-">Petrus Step 1</div>
<div class="roofpig" data-config="colored=UL-">Petrus Step 2</div>
<div class="roofpig" data-config="colored=u/me f/me|solved=UF-">Petrus Step 3</div>
<div class="roofpig" data-config="colored=U- u/me UF|solved=UF-">Petrus Step 4</div>

body {
    font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-size: small
}
.roofpig {
    width:100px;
    height:116px;
    margin: 5px;
    float:left;
    background-color: #cc9;
}