.example {
    background-color: #DCCFBB;
    font-family: georgia;
    /* a repeating grid image in the background */
    background-image: url({{{componentAssets}}}/images/grid.png);
}
#demo {
    float: none;
    border: solid 1px #C8B9A4;
    width: 655px;
    margin: auto;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
#demo #col-left{
    width: 231px;
}
#demo #col-right {
    width: 417px;
    padding-bottom: 2em; /* needs bottom padding so objects can drag below last .group-hd */
    border-left: solid 1px #C8B9A4;
}
#demo ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#demo #list1 li,
#demo #list2 li{
    float: left; /* the li objects are floated */
    margin: 3px;
    background-color: #E9CE98;
}
#demo #list1 li{
    height: 56px;
    width: 68px;
    overflow: hidden; /* this hides the catalog number on the small fish */
}
/* the width and height of the .fish items are larger in #list2 */
#demo #list2 .fish{
    width: 130px;
    height: 115px; /* The .fish items are taller when on the right to show the catalog number */
    text-align: center;
}
/* catalog number style */
#demo #list2 .cat-num{
    font-size: 80%;
    margin: -0.2em 0.5em;
    font-style: italic;
    color: #9F8A6C;
    height: 1.3em;
    line-height: 0.9em;
}
/* group heads are sortable like other objects but have different style */
#demo #list2 .group-hd{
    background-color: #6F6452;
    border-color: #EBD6B3 #63532E #63532E #EBD6B3;
    width: 406px;
    height: 20px;
    text-indent: 0.5em;
    font-weight: bold;
    color: #B0986A;
    line-height: 20px;
}
#demo li img{
    width: 100%; /* image scales with size of it's li container */
}
#demo li {
    border: solid 1px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border-color: #FFEFC2 #9D8F70 #9D8F70 #FFEFC2;
    -moz-box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.25);
}
