Roofpig solved and colored Lab

HTML

<script src="http://lar5.com/cube/rp/roofpig_and_three.min.js"></script>
<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=ULB- D*/e */m">F2L</div>
<div class="roofpig" data-config="alg=R U R' U' R U R' U' R U R' U' | colored=FRD D*/e */m"></div>
<div class="roofpig" data-config="alg=L' U' L U | setupmoves=y | colored=FRD D*/e */m"></div>
<div class="roofpig" data-config="alg=U R U R' U' y L' U' L U | colored=ULB- D*/e */m"></div>
<div class="roofpig" data-config="alg=U' L' U' L U y' R U R' U' | setupmoves=y | colored=ULB- D*/e */m"></div>
<div class="roofpig" data-config="alg=F R U R' U' F' | setupmoves=F R U R' U' F' U2 | colored=u | solved=U-"></div>
<div class="roofpig" data-config="alg=F R U R' U' F' | setupmoves=F R U R' U' F' F R U R' U' F' | colored=u | solved=U-"></div>
<div class="roofpig" data-config="alg=F R U R' U' F' | setupmoves=F U R U' R' U R U' R' U R U' R' F' | colored=u | solved=U-"></div>
<div class="roofpig" data-config="alg=R U R' U R U2 R' U | colored=U*/e */m | solved=U-"></div>

CSS

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;
}