.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: 674px;

margin: auto;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

#demo #col-left{

width: 248px;

}

#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: 73px;

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

}