<style id="jsbin-css">
img {
    display: block;
margin: 20px;
}

.crossRotate {
-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  outline: 0;
}

.crossRotate:focus {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
<!--General Shop Column Code (one row, no banner)-->

<!--FIRST COLUMN--><div class="hh"><div class="ll"><div class="hh"><div class="ll" align="center"><div class="sealed-zone" align="center"><small><da:thumb id="374506852374412">
</small></div><div class="sealed-zone"><div align="center">
</div><h1 align="center">Frosting Squish</h1><h2 align="center"><small>10 Coins
</small></h2><div align="center"><i>Not only is this little guy handy, but it's also super cute!</i>
</div>
</div></div><!--SECOND COLUMN--><div class="rr" align="center"><div class="sealed-zone"><small><da:thumb id="4779161476631184">
</small></div><div class="sealed-zone">
<h1>Slightly Damaged Pop
</h1><h2><small>20 Coins
</small></h2><i>Oop, who took a bite of of this...</i><small></small></div></div></div></div><!--THIRD COLUMN--><div class="rr"><div class="hh"><div class="ll" align="center"><div class="sealed-zone"><small><da:thumb id="3047695167400409">
</small></div><div class="sealed-zone">
<h1>Rollin' Rollin' Roller
</h1><h2><small>100 Coins
</small></h2><i>Keep on rolling!</i><small></small></div></div><!--FOURTH COLUMN--><div class="rr" align="center"><div class="sealed-zone"><small><da:thumb id="3170373046652414">
</small></div><div class="sealed-zone">
<h1>Cupcake Patter
</h1><h2><small>50 Coins
</small></h2><i>So many cupcakes to pat!</i><small></small></div></div></div></div></div>

  <!--HOW TO ADD OR TAKE AWAY COLUMNS-->
<!--Each column is labeled in the code as "!--NTH COLUMN--"
To take away a column, just delete to the last </div> of the previous column.

To add a column, find the end of the previous column and past after it.

To add another row, press enter a few times after the previous row, then just copy and paste the code above.

IMPORTANT NOTES
*For this code, you can only add up to 4 columns.
*When adding columns, be sure to use the code for that specfic column. (Example: Do not use the code for the 4th column for the 2nd colmun,
copy the 2nd column's code from here instead)
*Deviantart's writer may close divs. This can be pesky when you go back to add columns. The solution to this would be to remove a </div> or
two from the previous column until the result looks as it should.-->
<script id="jsbin-source-html" type="text/html"><\!--General Shop Column Code (one row, no banner)-->

<\!--FIRST COLUMN--><div class="hh"><div class="ll"><div class="hh"><div class="ll" align="center"><div class="sealed-zone" align="center"><small><da:thumb id="374506852374412">
</small></div><div class="sealed-zone"><div align="center">
</div><h1 align="center">Frosting Squish</h1><h2 align="center"><small>10 Coins
</small></h2><div align="center"><i>Not only is this little guy handy, but it's also super cute!</i>
</div>
</div></div><\!--SECOND COLUMN--><div class="rr" align="center"><div class="sealed-zone"><small><da:thumb id="4779161476631184">
</small></div><div class="sealed-zone">
<h1>Slightly Damaged Pop
</h1><h2><small>20 Coins
</small></h2><i>Oop, who took a bite of of this...</i><small></small></div></div></div></div><\!--THIRD COLUMN--><div class="rr"><div class="hh"><div class="ll" align="center"><div class="sealed-zone"><small><da:thumb id="3047695167400409">
</small></div><div class="sealed-zone">
<h1>Rollin' Rollin' Roller
</h1><h2><small>100 Coins
</small></h2><i>Keep on rolling!</i><small></small></div></div><\!--FOURTH COLUMN--><div class="rr" align="center"><div class="sealed-zone"><small><da:thumb id="3170373046652414">
</small></div><div class="sealed-zone">
<h1>Cupcake Patter
</h1><h2><small>50 Coins
</small></h2><i>So many cupcakes to pat!</i><small></small></div></div></div></div></div>

  <\!--HOW TO ADD OR TAKE AWAY COLUMNS-->
<\!--Each column is labeled in the code as "!--NTH COLUMN--"
To take away a column, just delete to the last </div> of the previous column.

To add a column, find the end of the previous column and past after it.

To add another row, press enter a few times after the previous row, then just copy and paste the code above.

IMPORTANT NOTES
*For this code, you can only add up to 4 columns.
*When adding columns, be sure to use the code for that specfic column. (Example: Do not use the code for the 4th column for the 2nd colmun,
copy the 2nd column's code from here instead)
*Deviantart's writer may close divs. This can be pesky when you go back to add columns. The solution to this would be to remove a </div> or
two from the previous column until the result looks as it should.--> </script>

<script id="jsbin-source-css" type="text/css">img {
    display: block;
margin: 20px;
}

.crossRotate {
-webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  outline: 0;
}

.crossRotate:focus {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
  transform: rotate(45deg);
}</script>