/****************
 * Demo Section *
 ****************/

/* list of demos */
div#demos ul
{
    position:               relative;
    margin:                 0;
    padding:                0;
}

div#demos li
{
    position:               relative;
    margin:                 0 0 1px 0;
    padding:                5px 5px 5px 30px;
    width:                  465px;
    height:                 1em;
    list-style:             none;
    background-color:       #eee;
    color:                  #000;
    opacity:                1;
    z-index:                1;
    
    font-size:              0.8em;
    font-weight:            normal;
    line-height:            normal;
}

div#demos li:hover
{
    cursor:                 pointer;
    background-color:       #ddd;
    color:                  #000;
}

/* current track time */
div#demos li span.time
{
    position:               absolute;
    top:                    5px;
    right:                  5px;
    background-color:       inherit;
    color:                  #999;
}

/* style for currently playing track */
div#demos li.playing,
div#demos li.playing:hover
{
    background-color:       #ddd;
    color:                  #000;
}

div#demos li.playing p:before
{
    content:                "☛ ";
}

div#demos li.playing span.time
{
    background-color:       inherit;
    color:                  #900;
}

/* style for loading track */
div#demos li.loading span.time
{
    background-color:       inherit;
    color:                  #ccc;
}

/* draggable demos */
div#demos li.drag
{
    z-index:                100;
    position:               absolute;
    opacity:                0.5;
}

div#demos li.placeholder
{
    padding:                0 5px 0 30px;
}

div#demos li div.drag
{
    position:               absolute;
    margin:                 0 0 5px 0;
    padding:                0;
    top:                    4px;
    left:                   4px;
    width:                  20px;
    height:                 20px;
    background:             url('../images/layout/drag.gif') no-repeat center center;
}

div#demos li span.demo-rank
{
    display:                none;
}

/* less H1 overlap for demo list */
div#demos h1 + ul
{
    margin-top:             10px;
}