.note {
 margin-top:0.5em;
 font-size:0.95em;
 color:#999;
}

.note a {
 color:#666;
 padding:1px;
 margin:-1px;
}

.note a:hover {
 color:#fff;
 background:#666;
}

.demo-block {
 position:relative;
 background:#f9f9f9;
 border:1px solid #e6e6e6;
 padding:4px;
 padding-top:0.5em;
 margin-top:-0.55em;
 border-top:none;
}

#nav {
 position:relative;
 margin-top:0.75em;
 margin-left:-0.5em;
}

ul {
 line-height:1.5em;
}

#nav ul {
 margin:0px;
 padding:0px;
 line-height:1em;
 list-style-type:none;
}

#nav>ul {
/*
 border-top:1px solid #333;
*/
}

#nav ul li {
 position:relative;
 margin:0px;
 padding:0px;
 float:left;
 display:inline;
 padding-right:1px;
}

#nav ul li ul {
 position:absolute;
 z-index:1;
 display:none;
 min-width:17em;
 max-width:20em;
 background:#000000;
 opacity:0.25;
 _width:17em;
 *opacity:0.25;
 *top:1.5em;
 *left:0px;
}

#nav ul li:last-child ul {
 right:1px;
}


#nav ul li:hover ul,
#nav ul li ul:hover {
 display:block;
}

#nav ul li ul li {
 float:none;
 display:block;
 width:100%;
}

#nav ul li ul li a {
 display:block;
 width:auto;
 border:none;
 padding:0.4em;
 padding-left:1em;
 color:#fff;
}

#nav ul li a {
 display:inline-block;
 padding:0.3em 0.5em;
 padding-left:0.75em;
 padding-right:0.75em;
 text-decoration:none;
 font-weight:bold;
 color:#ccc;
}

#nav ul li strong a {
 background:#336699;
 background:#;
 background:#fff;
 color:#333;
}

#nav ul li strong a:hover,
#nav ul li a:hover,
#nav ul>li:hover strong a,
#nav ul>li:hover>a {
 background:#3399cc;
 color:#fff;
}

#nav ul li ul li a:hover {
 background:#336699;
}


/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------

 Clicks on links to MP3s are intercepted via JS, calls are
 made to SoundManager to load/play sounds. CSS classes are
 appended to the LI parent, which are used to highlight the
 current play state and so on.

 Class names are applied in addition to "sm2_link" base.

 Default:

 sm2_link

 Additional states:

 sm2_playing
 sm2_paused

 eg.

 <!-- default -->
 <li class="sm2_link"><a href="some.mp3">some.mp3</a></li>

 <!-- playing -->
 <li class="sm2_link sm2_playing"><a href="some.mp3">some.mp3</a></li>

 The script also injects an HTML template containing control bar
 and timing elements, which can also be targeted with CSS.


 Note you don't necessarily require ul.playlist for your use
 if only using one style on a page. You can just use .sm2_link
 and so on, but isolate the CSS you want.

 Side note: Would do multiple class definitions eg.

 li.sm2_default.sm2_playing{}

 .. except IE 6 has a parsing bug which may break behaviour,
 applying sm2_playing {} even when the class is set to sm2_default.


 If you want to make your own UI from scratch, here is the base:

 Default + hover state, "click to play":

 li.sm2_link {}
 li.sm2_link:hover {}

 Playing + hover state, "click to pause":

 li.sm2_playing {}
 li.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 li.sm2_paused {}
 li.sm2_paused:hover {}

*/


/* background-image-based CSS3 example */

ul.playlist {
 list-style-type:none;
 margin:0px;
 padding:40px;
}

ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-size:2em;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
 background-color:#000000;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s ease-in-out;
}

ul.playlist li a {
 text-decoration:none;
 font-weight:normal;
 color:#ffffff;
 font-size:120%;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
 color:#fff;
 border-radius:3px;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
}

ul.playlist li:hover {
 background-color:#eee;
}

ul.playlist li:hover a {
 color:#333;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
 background-color:#6699cc;
}

ul.playlist li.sm2_paused {
 background-color:#999;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
 color:#fff;
}

ul.playlist li .controls {
 display:none;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
 position:relative;
 display:block;
}

ul.playlist li.sm2_paused .controls {
 background-color:#666;
}

ul.playlist li:hover .controls .statusbar {
 position:relative;
 cursor:ew-resize;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {
 background-color:#ccc;
}

ul.playlist li .controls {
 position:relative;
 margin-top:0.25em;
 margin-bottom:0.25em;
 background-color:#99ccff;
}

ul.playlist li .controls .statusbar {
 position:relative;
 height:0.5em;
 background-color:#ccddff;
 border:2px solid #fff;
 border-radius:2px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 overflow:hidden;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li .controls.dragging .statusbar {
 cursor:-moz-grabbing;
 cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 left:0px;
 top:0px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .position {
 background-color:#336699;
 border-right:3px solid #336699;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
 background-color:#666;
 border-color:#666;
}

ul.playlist li .controls .statusbar .loading {
 background-color:#eee;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 width:0px;
}

ul.playlist li a.sm2_link {
 margin-right:3.5em; /* room for timing stuff */
}

ul.playlist li .timing {
 position:absolute;
 display:none;
 text-align:right;
 right:1em;
 top:1em;
 width:auto;
 height:1em;
 padding:4px 5px 3px 5px;
 background-color:#5588bb;
 border:1px solid #99ccff;
 -moz-border-radius:6px;
 -khtml-border-radius:6px;
 border-radius:6px;
 letter-spacing:0px;
 font:50% normal "lucida console",monaco,courier,terminal,system;
 line-height:0.9em;
}

ul.playlist li:hover .timing {
 z-index:2;
}

ul.playlist li .timing div.sm2_timing {
 margin:0px;
 padding:0px;
 margin-top:-1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
 text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul.playlist li.sm2_paused .timing {
 background-color:#888;
 border:1px solid #ccc;
}

#control-template {
 display:none;
}

/*
 ------------------------------------------
 -- annotations (sub-tracks, notes etc.) --
 ------------------------------------------
*/

ul.playlist li a.sm2_link .metadata {
 display:none; /* hide by default */
}

ul.playlist li.sm2_paused a.sm2_link .metadata,
ul.playlist li.sm2_playing a.sm2_link .metadata {
 display:inline;
}

ul.playlist li ul {
 list-style-type:none;
 margin:0px;
 padding:0px;
 position:relative;
 font-size:small;
 display:none;
}

ul.playlist li ul li {
 position:relative;
 margin:0px;
 padding:2px 3px;
 border:1px solid transparent;
 -moz-border-radius:6px;
 -khtml-border-radius:6px;
 border-radius:6px;
 margin-right:1em;
 font-family:verdana,tahoma,arial,"sans serif";
 font-size:x-small;
 font-weight:lighter;
 letter-spacing:0px;
 background-color:transparent;
 opacity:0.10;
}

ul.playlist li ul li:hover {
 opacity:1;
 background-color:#fff;
 border-color:#ccc;
 color:#666;
}

ul.playlist li.sm2_playing ul li,
ul.playlist li.sm2_paused ul li {
 color:#fff;
}

ul.playlist li.sm2_playing ul li:hover {
 background-color:#fff;
 color:#5588bb;
 border-color:#336699;
 opacity:0.9;
}

ul.playlist li.sm2_paused ul li:hover {
 background-color:#888;
}

/* metadata */

ul.playlist li .metadata .duration {
 /* optional timing data */
 display:none;
}

ul.playlist li .metadata ul li p {
 margin:0px;
 padding:0px;
}

ul.playlist li .metadata ul li span {
 display:none;
}

ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 background-color:transparent;
 top:0px;
 color:#666;
 text-align:right;
 margin-left:10px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .annotation:hover {
 z-index:12; /* sit on top of note */
}

ul.playlist li .controls .statusbar .annotation span.bubble {
 /* using &middot; */
 display:inline-block;
 background-color:#fff;
 border:1px solid #666;
 border-radius:6px;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
}

ul.playlist li .controls .statusbar .annotation span {
 display:block;
 background:transparent url(../image/divot.png) no-repeat 50% 0px;
 width:15px;
 margin-left:-15px;
 height:12px;
 text-align:center;
}

ul.playlist li .controls .statusbar .annotation.alt {
 top:auto;
 bottom:0px;
}

ul.playlist li .controls .statusbar .annotation span:hover {
 cursor:none; /* Fx3 rules. */
 margin-top:0.1em;
}

ul.playlist li .controls .statusbar .annotation.alt span:hover {
 margin-top:-0.1em;
}

ul.playlist li .controls .statusbar .annotation.alt span {
 background:transparent url(../image/divot-bottom.png) no-repeat 50% bottom;
}

ul.playlist li .note {
 position:absolute;
 display:none;
 left:0px;
 top:0px;
 z-index:10;
 font-size:x-small;
 padding:2px 4px 2px 4px;
 width:auto;
 color:#666;
 background-color:#fff;
 border:1px solid #ccc;
 border-radius:6px;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 font-style:normal;
 font-weight:bold;
 font-family:arial,tahoma,verdana,"sans serif";
 letter-spacing:0px;
 margin-top:1.1em;
}

ul.playlist li .note.alt {
 margin-top:-1.32em;
}

ul.playlist li .note:hover {
 display:block !important;
}

ul.playlist li .sm2_divider {
 font-size:0.75em;
}

ul.playlist li .sm2_metadata {
 font-size:0.65em;
}


/* 
 ---------------------------------
 -- alternate (optional) themes --
 ---------------------------------
*/

ul.playlist.dark li.sm2_playing a {
 color:#fff;
}

ul.playlist.dark li.sm2_playing .timing {
 color:#999;
}

ul.playlist.dark li.sm2_paused {
 background-color:#333;
}

ul.playlist.dark li.sm2_paused a {
 color:#999;
}

ul.playlist.dark li.sm2_playing,
ul.playlist.dark li.sm2_playing:hover {
 background-color:#333;
}

ul.playlist.dark li:hover .controls .statusbar {
 background-color:#666;
}

ul.playlist.dark li .controls {
 background-color:#333;
}

ul.playlist.dark li .controls .statusbar {
 background-color:#666;
 border-color:#444;
}

ul.playlist.dark li .controls .statusbar .position {
 background-color:#111;
 border-right:3px solid #111;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist.dark li .controls .statusbar .loading {
 background-color:#444;
}

ul.playlist.dark li .timing {
 background-color:#222;
 border-color:#444;
}

/* gold theme */

ul.playlist.gold li.sm2_paused {
 background-color:#996600;
}

ul.playlist.gold li.sm2_playing,
ul.playlist.gold li.sm2_playing:hover {
 background-color:#cc9900;
}

ul.playlist.gold li .controls {
 background-color:transparent;
}

ul.playlist.gold li .controls .statusbar {
 background-color:#fff;
 border-color:#fff;
}

ul.playlist.gold li .controls .statusbar .position {
 background-color:#996600;
 border-right:3px solid #996600;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist.gold li .controls .statusbar .loading {
 background-color:#ffeedd;
}

ul.playlist.gold li .timing {
 background-color:#CC9900;
 border-color:#ffcc33;
}

/* ZOMG PONIES!!!ONEONEONE */

ul.playlist.bubblegum li a {
 font-family:"comic sans ms",verdana,arial,tahoma,"sans serif"; /* heh */
 color: #000;
 background-color:#ffddee;
}

ul.playlist.bubblegum li.sm2_paused,
ul.playlist.bubblegum li.sm2_paused:hover {
 background-color:#ffccee;
}

ul.playlist.bubblegum li.sm2_paused a,
ul.playlist.bubblegum li.sm2_paused:hover a,
ul.playlist.bubblegum li.sm2_paused .timing {
 color:#ff6699;
}

ul.playlist.bubblegum li:hover {
 background-color:#ffddee;
}

ul.playlist.bubblegum li.sm2_playing,
ul.playlist.bubblegum li.sm2_playing:hover {
 background-color:#ff7799;
}

ul.playlist.bubblegum li .controls {
 background-color:transparent;
}

ul.playlist.bubblegum li .controls .statusbar {
 background-color:#fff;
 border-color:#fff;
}

ul.playlist.bubblegum li .controls .statusbar .position {
 background-color:#ffffff;
 border-right:3px solid #ffaacc;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist.bubblegum li .controls .statusbar .loading {
 background-color:#ffeedd;
}

ul.playlist.bubblegum li .timing {
 background-color:#ffaacc;
 border-color:#ffccee;
}

ul.playlist.shiny li.sm2_paused,
ul.playlist.shiny li.sm2_playing {
 background-image:url(../image/top-highlight.png);
 background-repeat:repeat-x;
 background-position:0px -1px;
 _background-image:none; /* can't be bothered with IE 6. */
}