body {
  background:#fff;
  color: #333; /* scandalous. */
  margin:0px;
  padding:0px;
  font:76% "helvetica neue",helvetica,arial,verdana,tahoma,"sans serif";
  /* wacky IE 6 horizontal scrollbar hack */
  _width:99.5%;
  /* a little fun: transition font size with media shift. */
  -webkit-transition: font-size 0.1s;
  /* font trickery */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media all and (min-width: 1280px) {
  /* holy CSS3 media queries, Batman! (in this case, larger screen widths get this rule.) */
  body {
    font-size: 85%;
  }
}

@media all and (min-width: 1600px) {
  /* holy CSS3 media queries, Batman! (in this case, larger screen widths get this rule.) */
  body {
    font-size: 90%;
  }
  /* nav vertical align tweak */
  #nav > ul > li > strong > a {
    padding-bottom: 0.5em !important;
  }
}

@media all and (min-width: 1800px) {
  /* holy CSS3 media queries, Batman! (in this case, larger screen widths get this rule.) */
  body {
    font-size: 105%;
  }
}

body.home {
  min-width: 80em;
}

body,
#main-wrapper,
#nav ul li strong a {
  background: #fff url(../demo/_image/noise.png);
}

body,
#main-wrapper,
#nav ul li strong a {
  background: #fff url(../demo/_image/tiny_grid.png);
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaAgMAAADUJKRdAAAADFBMVEX8/Pz19fX09PT29vY9qbYoAAAAaElEQVR4Xk2MoREDMRADrzSDBQcEQj71GBw4kBbSQKp4YBBw9PsJyLxtsR2tZNfx/LyPhzX7R1Ue2SfjKlicDKBNdpBXsz790Nj8kUlo+WR47PvEPfY+gb7+kMhm5801EBsLvq/z3v8Apg8pkRmgbrsAAAAASUVORK5CYII=);
  /* old IE */
  *background: #fff url(../demo/_image/tiny_grid.png);
}

#nav ul li strong a {
  background-position: 0px 5px;
}

/* below block commented out as it crashes YUI Compressor (as of 12/2011) - moved out to make-rollups script. */

/*
* "Chunk" font by Meredith Mandel - http://work.meredithmandel.com/#379252/Typeface-Chunk-Five
* http://www.theleagueofmoveabletype.com/fonts/4-chunk
* Provided under the SIL Open Font License (OFL)
* http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL&_sc=1
*/

/*
@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('_image/chunk-webfont.woff') format('woff'),
  url('_image/chunk-webfont.ttf') format('truetype'),
  url('_image/chunk-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/

@font-face {
  /**
   * DejaVu font license
   * http://dejavu-fonts.org/wiki/index.php?title=Main_Page
   */
  font-family: 'DejaVuSansMonoBook';
  src: url('../demo/_image/dejavusansmono-webfont.eot');
  src: url('../demo/_image/dejavusansmono-webfont.eot?#iefix') format('embedded-opentype'),
       url('../demo/_image/dejavusansmono-webfont.woff') format('woff'),
       url('../demo/_image/dejavusansmono-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h2.special {
  font-family:"ChunkFive","ChunkFiveRegular","helvetica neue",helvetica,arial,verdana,tahoma,"sans serif";
  font-weight: normal;
  display: inline;
}

h1, h2, h3, h4 {
  font-size: 1em;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
  font-weight: 500;
}

h4.new,
h4.recent,
h4.flash9 {
  min-height: 24px;
}

h1 {
  font-size: 2em;
  font-weight: 500;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
  font-weight: bold;
  border-top: 0.25em solid #333;
  border-bottom: 1px dotted #999;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  _margin-top: 1.5em; /* fark IE6 */
}

body.home h3 {
  border-top: 0.25em solid #444;
  margin-top: 1.25em;
}

#doc .c2 h3 {
  position: relative;
  background: #333;
  color: #fff;
  padding: 0.25em 0.75em;
  border: none;
  line-height: 1.4em; /* windoze alignment */
}

h3,
.likeh3,
.home .columnar .c2 #about-sm2 h3:first-child { /* silly override */
  margin-top:1.5em;
}

h4 {
  margin:1.5em 0px 0.5em 0px;
  font-size:1.15em;
  font-weight: 500;
}

h5 {
  font-size:1.2em;
  font-weight: 500;
  color:#333;
}

.c2 h5 {
  border-bottom:1px solid #ccc;
  padding-bottom:0.25em;
}

.sub-heading {
  color: #666;
  font-weight: 400;
}

h2.special a {
	/* download SM2 link */
	top: -0.65em;
}

#turntable-video {
  width: 100%;
  max-width: 1920px;
  /* Safari 7.0.5 rendering bug makes <video> go full viewport height before loading? */
  max-height: 500px;
  overflow: hidden;
}

body.home #about-header {
  /* speaker image, etc. */
  position: relative;
  /* margin-left: 18%; */
  background-size: contain;
  padding-left: 18%;
  margin-right: 19em; /* room for right support column */
  min-height: 175px;
  padding-top: 1.75em;
}

body.home .sm2-speaker {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 20%;
  height: 120%; /* hackish, but works. */
  background: transparent url(../demo/_image/soundmanager2-speaker.png) no-repeat 50% 50%;
  max-width: 256px;
  max-height: 250px;
  background-size: contain;
}

body.home #about-header .feature {
 /* special alignment tweak */
 position: relative;
 vertical-align: middle;
 font-size: 1.2em;
 margin-right: 3%;
}

body.home #about-sm2 h2.special,
body.home #about-sm2 h3,
body.home #about-sm2 h4 {
  font-weight:500;
  font-size:2em;
  border-bottom:none;
  padding-bottom:0px;
}

body.home #about-sm2 h2.special {
  font-size:3.5em;
  color: #333;
  margin-top:0.1em;
}

body.home #about-sm2 h3 {
  font-size: 2.25em;
}

body.home #about-sm2 b {
 font-weight: 500;
}

body.home #about-sm2 ul b {
 /* restore regular bold */
 font-weight: 600;
}

body.home #about-sm2 strong {
 font-weight: 500;
 color: #333;
}

#col3 a.button, /* "newer version available" */
a.feature-hot,
a.feature {
  display: inline-block;
  transition: all 0.25s ease-in-out;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.33);
}

@keyframes highlight {
  from {
    box-shadow: 0px 0px 0px rgba(255,64,64,0);
  }
  to {
    box-shadow: 0px 0px 16px rgba(255,64,64,0.75);
  }
}

#col3 a.feature {
 /* "newer version available" hack */
 margin-top: 0px;
}

a.feature-hot:hover,
a.feature:hover,
#col3 a.button:hover {
  animation-duration: 0.5s;
  animation-name: highlight;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

body.home #about-sm2 h3 {
  color:#444;
  font-weight: bold;
  padding-bottom: 0px;
  margin-bottom: 0px;
  font-weight: 300;
}

body.home h4 {
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 0.33em;
  margin-bottom: 0.75em;
}

body.home #about-sm2 h4 {
  font-weight: 600;
  color: #777;
  font-size: 1.3em;
  margin-bottom: 1.25em;
  margin-top: 0.15em;
}

body.home #about-sm2 h4 b {
 color: #777;
}

body.home #about-sm2 h3 + h4 {
	/* sub-headers directly under headers */
	color: #666;
	font-size: 1.25em;
	font-weight: 400;
	margin-bottom: 2em;
	border-bottom: 1px dotted #b0b0b0;
	padding-bottom: 0.75em;
}

body.home .demo-more,
body.home .demo-more-abs {
  text-align:right;
  font-size: 100%;
  margin-right:0.25em;
  white-space:nowrap;
}

body.home .demo-more-abs {
  position:absolute;
  right:0px;
  bottom:0px;
}

body.home #about-sm2 h4.home-shopping-network {
  font-style:italic;
}

em em {
  /* special highlight */
  color:#003366;
  background:#e9f3ff;
  font-weight:bold;
  margin-top:-0.3em;
  padding:0.2em 0.25em;
}

pre {
  border-left:2px solid #f3f3f3;
  padding-left:0.5em;
}

dl pre {
  border-color:#e9f3ff;
}

dl.alt pre {
  border-color:#f3f3f3;
}

pre,
code,
pre code,
.code,
.code-block,
dt,
#soundmanager-debug,
.c3 ul li ul li {
  font-family:Consolas,monaco,"Ubuntu Mono",courier,monospace,system;;
}

pre,
code,
.code,
dt,
#soundmanager-debug {
  font-weight:normal;
  line-height:auto;
  color:#006699;
  background:#f6fcff;
}

.no-code-highlight pre,
.no-code-highlight code,
.no-code-highlight .code
.no-code-highlight {
  background: transparent;
}

pre,
#soundmanager-debug {
  font-size: 100%;
}

body.home p code {
  font-size: 91%;
}

pre code {
  /* don't scale further down, of course... */
  font-size: 100%;
}

pre {
  line-height:1.75em;
}

pre.specialcommentblock span span {
  *line-height:1.75em;
}

.block.small {
  font-size:92%;
}

p pre,
p.in pre {
  font-size:0.97em;
}

#soundmanager-debug {
  background:#fff;
  padding-left:0.75em;
  border:2px solid #ddeeff;
  font-size: 85%;
  line-height:1.7em;
}

body.home #soundmanager-debug {
  position:fixed;
  _position:absolute; /* IE &lt;7 */
  bottom:1em;
  right:1em;
  height:12em;
  width:auto;
  overflow:auto;
  padding:0px;
  margin:1em 6px 6px 1em;
  opacity:0.95;
  color:#333;
  border:1px solid #ccddee;
  border-radius:3px;
  background:#f3f9ff;
  z-index:10;
  font-size: 85%;
  line-height:1.2em;
}

body.home #soundmanager-debug div {
  padding-left:0.5em;
}

#soundmanager-debug div {
  margin:0px;
  padding:0.25em 0px;
  font-size: 100%;
  color:#333;
}

#soundmanager-debug div {
  background-color:#fff;
}

#soundmanager-debug div.sm2-alt {
  background-color: #f3f9ff;
  color:#336699;
}

#live-debug {
  display:table;
  *display:block;
}

dd pre,
dd code {
  background:transparent;
}

pre code {
  font-size:1em;
}

pre {
  white-space:-moz-pre-wrap;
  white-space:pre-wrap;
  word-wrap:break-word; /* IE */
}

ul.code-block em,
pre span,
code span,
dt span {
  color:#339933;
}

ul.code-block em {
  font-style: normal;
}

ul.code-block span,
pre span span,
code span span,
dt span span {
  color:#556677;
}

pre.block,
pre.block code,
div.block div.code,
ul.code-block {
  position:relative;
  display:table;
  *display:block;
  border:1px solid #ccc;
  border-radius:3px;
}

div.block,
pre.block {
  background:#e9f3ff;
  border-color:#eee;
  padding:3px;
}

pre.block code,
.block .code {
  background:#fff;
  border:1px solid #ccddee;
  padding:0.5em;
  font-size: 100%;
  line-height:1.75em;
  background-image: -webkit-linear-gradient(#fcfcfc 50%, #fff 50%);
  background-image: linear-gradient(#fcfcfc 50%, #fff 50%);
  background-size: 100% 3.5em;
  background-origin: content-box;
}

#sm2-properties .code {
 /* special case: no zebra striping for this one. */
 background-image: none;
}

pre.block code {
  padding: 1em;
}

h2 code {
 /* common header stuffs */
 background: none;
 font-size: 93%;
}

dl {
  background:#f9fcff;
  padding-bottom: 1px;
  border: 1px solid #ccddee;
  border-radius: 3px;
  margin-top: 1em;
}

dd {
  margin:1em 0px;
  padding:0px 1em;
  line-height:1.75em;
}

dt {
  padding:0px;
  margin:0px;
  border-bottom:1px solid #ddeeff;
  padding:0.5em 0.5em 0.5em 0.75em;
  background:#eef6ff;
  font-size:1.15em;
}

dt.alt {
  background:#f3f3f3;
  border-bottom-color:#e6e6e6;
}

dl:nth-child(2n+1),
dl.alt {
  background:#fcfcfc;
  padding:0px 0px 1px 0px;
  border-color:#ddd;
}

dl.tight dt.alt {
  background: #fcfcfc;
}

#smsound-methods dl a {
  font-weight: normal;
}

#smsound-methods dt:last-of-type {
  border-bottom: none;
}

h2 {
  padding-top:0.5em;
}

#top {
  position:relative;
  padding:1em 1em 0px 1.5em;
  max-width: 95.5em;
  color:#fff;
  z-index:3;
  margin: 0px auto;
}

#content { /* #top #content */
  background: #222 url(../demo/_image/noise-dark.png);
}

#top,
#top div {
  *zoom:1;
}

#top h1 {
  /* special christmas light case */
  display:inline;
}

#top h2 {
  /* tagline */
  font-size:1.25em;
  font-weight:300;
  padding-top:2px;
}

#top h1,
#top h2,
#version {
  text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
}

#main-wrapper {
  position: relative;
  /* fade out the body texture */
  /*
  border: 1px solid #fff;
  */
  box-shadow: inset 0px 0px 16px #fff;
}

#main {
  position:relative;
  padding:0px 0px 2em 0px;
  padding-top:1px;
  margin:0px auto;
  *padding:0px 1em 2em 1em;
  zoom:1;
  /*
  box-shadow: 0px 0px 32px rgba(0,0,0,0.05);
  */
}

#main {
  max-width: 98em;
}

body.home #main {
  box-shadow: none;
  max-width: 104em;
}

.columnar {
  position:relative;
  margin:0px;
  padding:0px;
  margin:1.9em 0.5em 0.5em 1em; /* slight left tweak */
}

.columnar .c1 {
  position:absolute;
  left:0px;
  top:0px;
  width:20em;
  height:30px;
  _position:relative; /* IE 6 hackery */
  _height:auto;
}

#doc .columnar .c1 {
  left:auto;
  right:1em;
  _right:auto;
}

.columnar .c1 h2 {
  position:relative;
  font-size:1.2em;
  padding:0.37em 0.5em;
  vertical-align:middle;
  background:#333;
  color:#fff;
  text-indent: 0.25em;
}

.columnar .c1 p {
  margin:0.5em 0px 1em 0px;
  padding-left:0.5em;
  padding-right:0.5em;
  font-size:0.95em;
  line-height:1.35em;
  color:#666;
}

.columnar .c1 p code {
  color:#336699;
}

.columnar .c2 {
  position:relative;
  margin-top:0px;
  margin-left:22em;
  margin-bottom:1.5em;
}

.triple .columnar .c2 {
  margin-right:21.25em;
  min-width:20em;
}

#doc .triple .columnar .c2 {
  margin-left:21.5em;
  margin-right:23em;
  _margin-right:0px; /* not you, IE 6. */
}

#doc.special .triple .columnar .c2 {
  /* override case: make c2 extra-wide. */
  margin-right: 0.75em;
  max-width: 70em;
}

#doc .triple .columnar .c1 {
  margin-right:0px;
  margin-left:21.25em;
}

.columnar .c2 p:first-child {
  margin-top:0.2em;
}

.columnar .c2 > .f-block:first-child > h4 {
  margin-top:0.5em;
}

.columnar .c2 strong strong {
  display:block;
  padding:0.5em;
  border-bottom:1px solid #999;
  background:#f0f6ff;
  color:#336699;
}

.columnar .c2 p {
  line-height:1.75em;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

p code,
.columnar .c2 p code {
  font-size: 97%;
}

.three .columnar {
  position:relative;
}

.three .columnar .c1 {
  position:relative;
  width:20em;
}

.three .columnar .c2 {
  position:relative;
  margin-right:16em;
}

.c3 {
  position:absolute;
  right:1em;
  margin-right:16px;
  top:2em;
  width:16em;
  margin-top:-0.5em;
}

#doc .c3 {
  right:auto;
  margin-right:0px;
  margin-left:16px;
  left:1.25em;
  z-index: 1;
}

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

ul {
	/* lists inside main content area */
	line-height: 1.75em;
}

ul li {
	margin-bottom: 0.75em;
}

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

#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:19em;
  max-width:21em;
  background:#3399cc;
  background: -webkit-linear-gradient(top, rgba(51,153,204,0.99) 0%,rgba(35,96,127,0.96) 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(top, rgba(51,153,204,0.99) 0%,rgba(35,96,127,0.96) 100%); /* W3C */
  text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
  _width:19em;
  *top:2.3em;
  *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.5em 0px 0.5em 1em;
  font-size: 1.1em;
  line-height: 1.1em;
  color: #fff;
  font-weight: 400;
  color:rgba(255,255,255,0.9);
  border-bottom: 1px dotted rgba(0,0,0,0.2);
  border-top: 1px dotted rgba(255,255,255,0.2);
}

#nav ul li ul li:first-of-type a {
	border-top: none;
}

#nav ul li a {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
}

#nav ul li ul li a:hover {
  background-color: #336699;
  background-color: rgba(0,0,0,0.45);
}

#nav>ul>li>a,
#nav>ul>li>strong>a {
  /* top-level links */
  color:#ddd;
  font-size: 1.25em;
  font-weight: 400;
  vertical-align: bottom;
}

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

#nav > ul > li > strong > a {
  /* tweak for good browsers that respect larger font size */
  padding-bottom: 9px;
}

#nav ul li a:hover,
#nav>ul>li:hover>a {
  /* top-level */
  background: #3399cc;
  color:#fff;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}

#version {
  position:relative;
  float:right;
  display:inline;
  margin-left:1em;
  font-size:90%;
  margin-bottom:0px;
  bottom: -0.9em;
  color:#ccc;
}

div.clear {
  clear:both;
  font-size:1px;
  line-height:1px;
}

.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;
}

.medium-note {
  padding-top:1.5em;
  font-size:1em;
}

ul.standard {
  line-height:1.5em;
  padding-left:1.2em;
  *padding-left:0px;
  color:#333;
  margin-top:1em;
  margin-bottom:1em;
  list-style-type:square;
}

ul.standard li {
  margin-bottom:0.5em;
}

ul.standard ul {
  margin-top:0.5em;
  margin-bottom:1.5em;
  padding-left:1.2em;
}

.c3 ul {
  list-style-type:none;
}

.c3 ul,
.c3 ul li {
  margin:0px;
  padding:0px;
}

.c3 h2 {
  font-size:1.1em;
  text-indent:0.4em;
}

.c3 ul li a {
  display: block;
  text-decoration:none;
}

.c3 ul li,
.c3 ul li a,
.c3 ul li a:hover,
.c3 ul li a:focus {
  color:#333;
  _color:#333;
  outline:none;
}

.c3 ul li.active {
  box-shadow: 0 0 6px #003366 inset;
  border-radius: 1px;
}

.c3 ul li.active a {
  border-radius: 2px;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}

.c3 ul li.active,
.c3 ul li.active a,
.c3 ul li ul li:hover,
.c3 ul li ul li:hover a {
  color: #fff;
}

.c3 ul li.active a:hover {
  _color:#fff;
}

.c3 .box {
  margin-top:6px;
}

.wedge,
.c3 h2 {
  position:relative;
  background:#333;
  color:#fff;
  margin:0px;
  padding:0px;
  height:2.101em;
  line-height:1.65em;
}

.c3 h2 {
  height:2em;
  line-height:2em;
}

.c3 h2,
#doc .c2 h3 {
  text-shadow: 0px 1px 0px #000;
}

.wedge {
  background-color:#3399cc;
}

.wedge-dark {
  background:#333;
}

.wedge .l,
.wedge .r {
  border-top:1.75em solid #333;
}

.c3 h2 .l,
.c3 h2 .r {
  border-top: 2em solid #333;
  border-top: 2.1em solid #333\9; /* IE 8 */
}

.wedge .l,
.c3 h2 .l,
.wedge .r,
.wedge-dark .r,
.c3 h2 .r {
  background:transparent url(../demo/_image/wedge.png) no-repeat;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAEABAMAAACJ12OUAAAAGFBMVEUREREAZpkYGBgAZpkiIiIAZpkREREAZpkArR2CAAAABnRSTlMAAOvrEhJBIv9yAAAC0UlEQVR42u3ZuW0cQRCF4cIPhrG2MhDkLZgDM5ChBGQoKBlMgdgElAQ9gVACNMTZ2WOO7rraI2rcna33cdjTTTzyQ7++fzFuQPTrdDBuMAa8H04vQwNOL++HkQHTtw0CBmAekh0wf1cnYAEsAibAIGACDAI2QCdgA3QCDoBKwAFQCXgAGgEPQCPgAigEXACFgA/QJ+AD9Ak4AV0CTkCXgBfQI+C/tT0W952dubgBncH4Ae3J+AHt0QQAzdkEAM3hRACt6UQArfGEAI35hACNAGKAfQIxwD6CIGCXQRCwCyEK2KYQBWxjCAM2OYQBmyDigHUSccA6igRglUUCsAojA1imkQEs40gBFnmkAItAcoB7IjnAPZIk4JZJEnALJQu4ppIFXGNJAy65pAGXYPKAOZk8YI5mAHDOZgBwJjACmAiMACYCT7/U6+c3/fOv1R9Uf1D9QfUH1R9Uf1D9QfUH1R9Uf1D9QfUH1R9Uf1D9wefvD/4NXhwfRwQPrzy8jgw4PiIjhI90ZITwEY4MEKZsZIAwRSN5wjkZyRPOwUiaMOciacIci2QJl1QkS7iEIknCNRNJEq6RSI5wS0RyhFsgkiLc85AU4R6HZAiLNCRDWIQhCcIyC0kQllFInLBKQuKEVRASJqxzkDBhHYNECZsUJErYhCBBwjYDCRK2EUiMsEtAYoRdABIi7OcjIcJ+PBIhNKYjEUJjOBIgtGYjAUJrNOInNCcjfkJzMO47O3Px39oeixvb+cFwP67Oo8X7vHpPFu9vrPe7xblmuqsL56rtrm98y7a/vPG9OP0XDNerq7ziuDYPZZPBs3toewye/Uvb5XDsoOo+i2MPV3d67E1c3+ixjxH9qME8yIzDDvMoNY5brLPUOm2xTnPrvLf++3+0/uLgz2/1ev6rf/5W/UH1B9UfVH9Q/UH1B9UfVH9Q/UH1B9UfVH9Q/UH1B9UffPr+4D+tsZObsTO2qgAAAABJRU5ErkJggg==);
  *background-image:url(../demo/_image/wedge.png);
}

.wedge .l,
.c3 h2 .l {
  background-position: -64px 0px;
  position:absolute;
  left:0px;
  top:0px;
  width:16px;
  height:100%;
  margin-left:-16px;
}

.wedge .r,
.wedge-dark .r,
.c3 h2 .r {
  background-position: -48px 0px;
  position:absolute;
  right:0px;
  top:0px;
  width:16px;
  height:100%;
  margin-right:-16px;
}

.wedge .l,
.wedge .r {
  border-color:#3399cc;
}

.wedge .l {
  background-position:-64px -64px;
  border-top: 2em solid #3399cc
}

.wedge .r {
  margin-top:-16px;
  border-top:none;
  height:16px;
  border-bottom:2em solid #3399cc;
  background-position:0px -192px;
}

.wedge-dark .l,
.wedge-dark .r {
  border-color:#333;
}

.wedge-dark .l {
  background-position:-64px 0px;
}

.wedge-dark .r {
  background-position:0px -128px;
}

.c3 h2 .r.up {
  margin-top:-16px;
  border-top:none;
  height:16px;
  border-bottom:1.66em solid #333;
  background-position:0px -128px;
}

.c3 h2 .l.flat,
.wedge .l.flat,
.c3 h2 .r.flat,
.wedge .r.flat {
  background-image:none;
}

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

.c3 ul li {
  border:1px solid #f3f3f3;
  border-top:none;
  border-bottom:none;
}

.c3 ul ul li {
  border:none;
}

.c3 ul li {
  margin:0px;
  padding:0px;
}

.c3 ul li ul li {
  background-color: #fcfcfc;
  background-color: rgba(255,255,255,0.5);
  font-size: 97%;
  line-height:2.4em;
  text-indent:0.5em;
  cursor:hand;
  border-bottom: 1px dotted #eee;
}

.c3 ul li ul li:hover {
  background-color:#999;
  cursor:pointer;
  cursor:hand;
}

.c3 ul li ul li.active {
  background-color:#3399cc;
  color:#fff;
}

.c3 h3 {
  position: relative;
  margin: 0px;
  padding: 0px;
  height: auto;
  min-height: 25px;
  background: #3399cc;
  border: none;
  color: #fff;
  text-indent: 0.5em;
  font-size: 1em;
  line-height: 2em;
  text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}

.c3 h4 {
  font-size:1em;
  margin:0px;
  padding:0.39em 0.2em 0.4em 0.75em;
  vertical-align:middle;
  color:#333;
  background-color: #f3f3f3;
  background-color: rgba(0,0,0,0.05);
  border-top: 1px dotted #d6d6d6;
  border-bottom: 1px dashed #e9e9e9;
  text-shadow: 0px 1px 0px #fff;
}

.c3 h4:first-of-type {
  border-top-color: transparent;
}

#get-satisfaction h2 a {
  color:#fff;
}

.c3 h2 a {
  color:#fff;
}

.c3 h2 a:hover {
  color:#fff;
  text-decoration:underline;
}

.flash9 {
  background-image:url(../demo/_image/flash9.png);
  background-repeat:no-repeat;
  background-position:bottom right;
  _background-image:none;
}

li.flash9 {
  background-position:bottom right;
}

.flash9:hover,
.flash9.active {
  background-image:url(../demo/_image/flash9-dark.png);
  _background-image:none;
}

.new {
  background-image:url(../demo/_image/new.png);
  background-repeat:no-repeat;
  background-position:bottom right;
  _background-image:none;
}

.recent {
  background-image:url(../demo/_image/new-bw.png);
  background-repeat:no-repeat;
  background-position:bottom right;
  _background-image:none;
}

.new:hover,
.new.active,
.recent:hover,
.recent.active {
  background-image:url(../demo/_image/new-dark.png);
  background-repeat:no-repeat;
  background-position:bottom right;
  _background-image:none;
}

.deprecated {
  font-style: italic;
  color: #333 !important;
}

span.nevermind,
.removed {
  text-decoration:line-through;
  opacity:0.33;
}

strong.removed {
  font-weight: normal;
  opacity:0.5;
}

.padded {
  padding:0.5em;
}

dd.deprecation-note {
  color: #993333;
  background-color: #fff6f6;
}

.c3 p {
  font-size:0.9em;
  padding-left:0.75em;
  padding-right:0.5em;
}

.c1 pre code {
  margin-top:0px;
  color:#336699;
  margin-left:0px;
}

.c1 pre {
  margin-top:0px;
  padding-top:0px;
  margin-left:0.5em;
}

#reset-filter {
  position:relative;
  font-family:"Helvetica Neue","Helvetica",helvetica,arial,verdana,sans-serif;
  font-weight:300;
  font-size:2.5em;
}

.c2 .option {
  font-size:85%;
  float:right;
  display:inline;
  margin-left:1em;
  margin-right:0.5em;
  margin-top:3px;
  line-height:1em;
  white-space:nowrap;
}

.c2 .option a {
  padding:0.1em 0.35em 0.1em 0.35em;
  color:#3399cc;
}

#filter-box {
  position:relative;
  display:none;
}

#get-satisfaction {
  position:relative;
}

#support-wrapper {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0px 0px 1px rgba(0,0,0,0.075);
}

body.home #support-wrapper {
  position: absolute;
  width: 100%;
}

#gsfn_content {
  position: relative;
  padding:0.5em 0px 0.5em 0px;
}

#gsfn_content ul {
  position: relative;
  /* initially, hide and then expand. */
  overflow: hidden;
  height: 0px;
  margin: 0px;
  /* smooth height transitions, why not */
  transition: height 0.5s ease-in-out;
}

#gsfn_list_widget.loaded ul {
  /* JS callback assigns this class when load is complete */
}

#gsfn_content ul li {
  border:none;
}

div#gsfn_list_widget img {
  border: none;
}

div#gsfn_list_widget a {
  text-decoration:none;
}

div#gsfn_list_widget a.widget_title {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

div#gsfn_list_widget .powered_by {
  font-family:verdana,arial;
  margin:-0.25em 1em 0px 1em;
  padding:0.25em 0px 0.5em 0px;
  border-top: 1px dotted #ddd;
  font-size:75%;
}

body.home div#gsfn_list_widget .powered_by {
  padding-bottom: 0px;
}

div#gsfn_list_widget .powered_by a {
  font-style: italic;
  color: #999;
}

div#gsfn_list_widget .powered_by a:hover {
  color:#333;
}

div#gsfn_list_widget div#gsfn_content {
  font-size:0.88em;
  padding-left:0.5em;
  padding-right:0.5em;
}

div#gsfn_list_widget div#gsfn_content li {
  text-align:left;
  position: relative;
  clear:right;
  *zoom:1;
}

div#gsfn_list_widget div#gsfn_content li:hover,
div#gsfn_list_widget div#gsfn_content li:hover a {
  background:#3399cc;
  color:#fff;
}

div#gsfn_list_widget div#gsfn_content a.gsfn_link {
  display:block;
  line-height:1.2em;
  padding:5px 0px 5px 5px;
}

div#gsfn_list_widget div#gsfn_content a.gsfn_link:hover {
  _color:#fff;
  _background-color:#3399cc;
}

div#gsfn_list_widget div#gsfn_content span.time {
  font-size: 85%;
  color:#999;
  padding-left:3px;
  padding-right:3px;
  text-align:right;
  float:right;
  display:inline;
  margin-top:1px;
}

div#gsfn_list_widget div#gsfn_content li:hover span.time {
  color:#fff;
}

div#gsfn_list_widget div#gsfn_content p.gsfn_summary {
  margin-top: 2px;
  position:relative;
  z-index:2;
}

.tight {
  margin-top:0px;
}

.compact {
  margin-bottom:0.25em !important;
}

.smaller {
 margin-top: 0px !important;
 margin-bottom: 0.25em !important;
 line-height: 1.2em !important;
}

.c2 a,
a.cta {
  margin-top:-0.3em;
  padding:0.2em 0.25em;
  margin-left: -0.25em;
  margin-right: -0.25em;
  *margin: 0px;
  *padding: 0px 2px;
  *margin: 0px -2px 0px -2px;
  text-decoration:none;
  color:#3399cc;
  font-weight: 500;
  border-radius:0.25em;
  zoom:1;
}

body.home .c2 a,
body.home a.cta {
/*
 text-shadow: 0px 1px 0px #fff;
*/
}


body.home .c2 a:hover,
body.home a.cta:hover {
 text-shadow: none;
}

pre code a,
.c2 pre code a {
	color: #3399cc;
	font-weight: 400;
	text-decoration: none;
	text-shadow: none;
}

pre code a:hover,
.c2 pre code a:hover {
	background-color: #3399cc;
	color: #fff;
	font-weight: 400;
}

/* redefine for simple mp3 button demo */
.c2 a.sm2_button {
  border-radius:6px;
}

.c2 a.sm2_button.type-2 {
  border-radius:9px;
}

.c2 a {
  color:#3399cc;
  font-weight:500;
  text-decoration:none;
}

.c2 a.cta {
  text-decoration:none;
}

a.cta span {
  font-size:1.5em;
  line-height:1em;
}

a.cta:hover,
.c2 a:hover,
#sm2-options a:hover {
  position: relative;
  z-index: 1;
  background-color:#3399cc;
  border-color:#3399cc;
  color:#fff;
  text-decoration:none;
}

.c2 a.sm2_button:hover {
  /* arg. not specific enough, redefine here. */
  background-color:#cc3333;
}

dt a:hover span {
	color: #fff;
}

a.cta-more {
  color:#ddeeff;
  font-size:0.8em;
  position:absolute;
  right:0px;
  margin:0px;
  padding:1px;
  bottom:0.9em;
  line-height:1em;
}

a.cta-more:hover {
  background:#fff;
  color:#3399cc;
}

div.html5support {
  clear: both;
  padding-top: 2em;
}

div.html5support span {
  padding:0px 5px;
  display:inline-block;
  text-align:center;
  font-weight:400;
  background:#ccc;
  color:#fff;
  margin-bottom:0.25em;
  border-right: 1px dotted #fff;
  border-radius: 0px;
  margin-right: none;
}

div.html5support em {
  font-weight:bold;
}

div.html5support span.true {
  background:#669966;
}

div.html5support span.partial {
  background:#993333;
}

div.html5support em.partial {
  color:#993333;
}

div.html5support em.true {
  color:#669966;
}

#nav ul li ul {
  /* eh, why not. */
  box-shadow:2px 2px 2px rgba(51,153,204,0.2);
}

.newer {
  vertical-align: middle;
  margin-top: 1em;
  margin-bottom: 1em;
}

.newer a,
a.feature,
.feature-hot {
  position:relative;
  display:inline-block;
  background:#3399ff;
  font-size: 1.1em;
  line-height: 1.75em;
  padding: 0px 0.5em;
  margin: 0px 0.125em;
  color:#fff;
  font-weight:bold;
  border:3px solid #cce6ff;
  border:3px solid rgba(255,255,255,0.66);
  border-radius:8px;
  text-decoration:none;
}

a.feature {
  margin-left:0px;
}

.newer a,
.feature-hot {
  background:#ff0000;
  border-color:#ff6666;
  color:#fff;
}

.newer a:hover,
.c2 .feature-hot:hover {
  background:#990000;
  border-color:#cc0000;
}

a.feature:focus,
a.feature:hover {
  background:#ff0000;
  border-color:#ff6666;
  color:#fff;
}
#
a.warning,
span.warning {
  font-weight:bold;
}

a.warning,
span.warning,
a.warning code,
span.warning code {
  color:#993300;
}

a.warning:hover {
  color:#fff;
  background:#993300;
}

.newer p {
  margin:0px;
  padding:0px;
}

.scratched-out {
  display: inline-block;
  text-decoration:line-through;
  color:#999;
  font-size:0.9em;
  margin-top:-0.75em;
  transform:rotate(-15deg);
}

div.inthewild {
  position: relative;
  margin-top:1em;
}

ul.inthewild {
  display: inline;
  margin: 0px auto;
  list-style-type: none;
}

ul.inthewild,
ul.inthewild li {
  position: relative;
  margin: 0px;
  padding: 0px;
}

ul.inthewild {
  margin-bottom: 2em;
}

ul.inthewild li {
  display: inline-block;
  *float: left;
  *display: inline;
  width: 128px;
  width: 24%;
  min-width: 64px;
  height: 64px;
  vertical-align: middle;
  text-align: center;
  margin: 2px 0px;
  background-color: #fcfcfc;
  background-color: rgba(255,255,255,0.5);
  border-radius: 2px;
  border: 1px solid #eee;
  border-color: rgba(0,0,0,0.05)
}

ul.inthewild a,
ul.inthewild a img {
  border:none;
  vertical-align:middle;
}

ul.inthewild a {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow:hidden;
  margin: 0px;
  padding: 0px;
  border-radius: 0px;
  background: transparent url(../demo/_image/logo-sprite.png) no-repeat 0px 0px;
  line-height: 96px;
  vertical-align: middle;
}

ul.inthewild a:hover {
  background-color: transparent;
}

ul.inthewild a span {
  position:absolute;
  text-indent:-9999em;
}

#tidal {
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDMzMC4yIDQzLjciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMzMC4yIDQzLjciIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xMjAuMSA0Mi44aC04LjVWMTIuN2gtMTFWNS41aDMwLjR2Ny4zaC0xMUwxMjAuMSA0Mi44ek0xNjUgNDIuOGgtOC41VjUuNWg4LjVWNDIuOHpNMzE1LjQgMzUuNGgxNC43djcuNGgtMjMuM1Y1LjVoOC41VjM1LjR6Ii8+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTE5My40IDUuNWgxMy44YzEwLjIgMCAyMC4zIDUuNCAyMC4zIDE4LjYgMCAxMi40LTkuOSAxOC44LTE5LjggMTguOGwtMTQuMyAwTDE5My40IDUuNXpNMjAxLjYgMzUuNWg1LjNjNy4xIDAgMTEuOS00LjQgMTEuOS0xMS41IDAtNi43LTQuOC0xMS4yLTExLjctMTEuMmgtNS41VjM1LjV6TTI3NC44IDQyLjhoOS40TDI2OC44IDUuNUgyNjBsLTE1LjUgMzcuM2g5LjFsMi44LTcuNGgxNS43TDI3NC44IDQyLjh6TTI1OC42IDI4LjhsNS42LTE0LjYgNS42IDE0LjZIMjU4LjZ6Ii8+PHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSI0My43IDEwLjkgMzIuOCAyMS44IDIxLjkgMTAuOSAzMi44IDAgIi8+PHJlY3QgeD0iMjUiIHk9IjI1LjEiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjcwNzEgMC43MDcxIC0wLjcwNzEgLTAuNzA3MSA3OS4xMjA0IDMyLjc4MTMpIiBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMTUuNCIgaGVpZ2h0PSIxNS41Ii8+PHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIyMS45IDEwLjkgMTAuOSAyMS44IDAgMTAuOSAxMC45IDAgIi8+PHBvbHlnb24gZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSI2NS41IDEwLjkgNTQuNiAyMS44IDQzLjcgMTAuOSA1NC42IDAgIi8+PC9zdmc+) 50% 50% no-repeat;
  color: #000;
  width: 85%;
  height: 85%;
  left: 0px;
  color: rgb(255, 255, 255);
  top: 0%;
  margin: 3.5% 0px 5% 7%;
}

#eight-tracks {
  background-position: 0 0;
  width: 64px;
  height: 20px;
  margin: -10px 0px 0px -32px;
}

#audiogalaxy {
  width: 100px;
  height: 22px;
  background-position: 0 -37px;
  margin: -11px 0px 0px -50px;
}

#discogs {
  background-position: 0 -72px;
  width: 55px;
  height: 20px;
  margin: -10px 0px 0px -27px;
}

#hypem {
  background-position: 0 -111px;
  width: 80px;
  height: 38px;
  margin: -19px 0px 0px -40px;
}

#lastfm {
  background-position: 0 -176px;
  width: 80px;
  height: 28px;
  margin: -14px 0px 0px -40px;
}

#pitchfork {
  background-position: 0 -688px;
  width: 100px;
  height: 20px;
  margin: -10px 0px 0px -50px;
}

#nyancat {
  background-position: 0 -312px;
  width: 64px;
  height: 40px;
  margin: -20px 0px 0px -32px;
}

#earbits {
  background-position: 0 -471px;
  width: 100px;
  height: 58px;
  margin: -29px 0px 0px -50px;
}

#songza {
  background-position: 0 -424px;
  width: 100px;
  height: 58px;
  margin: -29px 0px 0px -50px;
}

#beats-music {
  background-position: 0 -230px;
  width: 100px;
  height: 64px;
  margin: -34px 0px 0px -48px;
}

#baroque-me {
  background-position: 0 -541px;
  width: 88px;
  height: 47px;
  margin: -23px 0px 0px -42px;
}

#freesound {
  background-position: 0 -635px;
  width: 100px;
  height: 27px;
  margin: -15px 0px 0px -50px;
}

div.inthewild.active li:hover {
  background-color: rgba(255,255,255,0.9);
  border-color: #ccc;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.075);
}

/* homepage-specific demo shiz */

.sidenote {
  font-size:85%;
  opacity:0.75;
}

ul.playlist {
  font-size:85%;
}

ul.playlist li {
  margin-bottom:0.2em;
}

ul.playlist li a {
  font-size:1em;
  color:#333;
}

ul.playlist li a,
ul.playlist li a:hover {
  background:transparent;
  border-radius:0px;
  line-height:1em;
}

ul.playlist li .timing {
  margin-right: 0.1em;
  font-size: 50%;
  top: 0.5em;
}

ul.playlist.use-peak li .peak {
  /* overrides */
  height:0.61em;
  margin-top:-5px;
  width:0.92em;
}

html.isSafari ul.playlist.use-peak li .peak {
  margin-top:-4px; /* dumb tweak */
}

ul.playlist.use-peak li .timing {
  right:4em;
}

ul.playlist.use-peak li .peak-box {
  height:0.66em;
}

ul.playlist li .peak .l {
  margin-right:0px;
}

ul.playlist li .peak .l,
ul.playlist li .peak .r {
  width:6px;
}

ul.playlist li .peak .r {
  left:9px;
}

a.not-supported {
  /* give user a hint that the format doesn't work */
  text-decoration:line-through;
  color:#666;
  opacity:0.25;
}

ul.graphic li {
  line-height:1.5em;
}

ul.graphic li a,
ul.graphic li a.sm2_link {
  min-width:17.75em;
  width:auto;
}

ul.graphic li a,
ul.graphic li a.sm2_link {
  background-color:#ddd;
  border-color:#ddd;
  color:#333;
  vertical-align:middle;
}

ul.graphic li a {
  background:#ddd url(../demo/play-mp3-links/image/icon_play.png) no-repeat 3px 50%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAA6ElEQVR42q2UvQqDMBRGC47dAj6rgygIDg5OfQlHF30GX0JFURddnEQU+eoNLaSJFRUvnPzA/c4QkjwA3AIf1tJWnitsRT8I+2Q0UfTM8/yFk0UZyooiNk0ThmE4BWUoK4r0cRxxBcr+iMh+AVW0LAtkoihCURS0/ocqwkaZpgnbtrmwrmts1DGR67owDIPjeR7iOEbXdfuisiwh4zgOSb5wcZIkYo8qapoGMpZlkYALwzBElmWoqkrsUUVt20LG930EQUAHTvstVFHf95BJ05TmPVQR3dQLKCI2zzOuQNnbHu3t38gtvAF1L6rpAc8MDwAAAABJRU5ErkJggg==);
  *background-image: url(../demo/play-mp3-links/image/icon_play.png);
  _background-image:url(../demo/play-mp3-links/image/icon_play.gif);
}

ul.graphic li a:hover,
ul.graphic li a.sm2_paused:hover,
ul.graphic li a.sm2_link:hover,
ul.graphic li a.sm2_playing,
ul.graphic li a.sm2_playing:hover {
  background-color:#336699;
  border-color:#336699;
  color:#fff;
}

ul.graphic li a.sm2_link {
  /* Doesn't work on this page. */
  -webkit-transition-property: none;
  -webkit-transition: none;
  transition: none;
}

.c2 ul.playlist li a {
  margin:0px;
  padding:0px;
  letter-spacing: -0.02em;
}

ul.inline-playlist {
  min-height:49px;
  min-width:512px;
  margin-top:4em;
}

ul.inline-playlist li {
  float:left;
  display:inline;
  width:45%;
  margin-right:0.25%;
}

body.home .sm2-inline-list .ui360-vis {
  margin-right:0px;
}

body.home #special-demo-left .ui360:last-child {
  margin-right: 0px;
}

body.home .columnar .c2 p {
  font-size: 1.1em;
  line-height:1.6em;
  color:#333;
}

body.home .c2 ul.playlist li a {
  _color:#000; /* stupid IE */
}

body.home .c2 ul.playlist li.sm2_paused a,
body.home .c2 ul.playlist li.sm2_playing a {
  _color:#fff; /* argh */
}

body.home .c2 ul.standard {
  _margin-left:1.5em;
}

body.home .ie6sucks {
  _background: transparent !important;
  _display: none !important;
}

body.home .ie7sucks {
  *display: none !important;
}

/* Flash positioning and flashblock / clicktoflash handling */

/* special-case for the SM2 homepage only */

body.home #sm2-container {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 48px;
  height: 48px;
  /* IE 6 hax, unlikely to have flashblock anyway... */
  _margin:-8px 0px 0px 0px;
}

@keyframes flashblock {
  from {
    border-color: #ff3333;
  }
  
  to {
    border-color: #fff;
  }
}

body.home #sm2-container.swf_timedout {
  /* blocked state */
  border:1px solid #ff3333;
  animation-duration: 1s;
  animation-name: flashblock;
  animation-iteration-count: 5;
  width:48px;
  height:48px;
}

body.home #sm2-container.swf_unblocked {
  /* unblocked state */
}

body.home #sm2-container.swf_unblocked,
body.home #sm2-container.swf_loaded {
  top:auto;
  left:0px;
  bottom:0px;
  margin:0px;
  width: 6px;
  height: 6px;
}

#sm2-support-warning {
  display:none;
  border:1px solid #ff9999;
  padding:0.5em;
  margin-top:1.5em;
  font-weight:bold;
}

#sm2-support {
  display:none;
  font-size:0.9em !important;
  margin-top: 1.5em;
}

#sm2-support-warning,
#sm2-support {
  background:#fff6f0;
  border:1px solid #ff3333;
}

body.home #about-sm2 #sm2-support h3 {
  border-color:#ff9999;
  margin-top:0.25em;
}

body.home #special-demo-left {
  min-height:70px;
  position:relative;
  float:left;
  display:inline;
  margin-right:14px;
  padding-right:0.9em;
  border-right:1px dotted #e0e0e0;
  *border-right:none;
  _width:210px;
}

body.home #special-demo-right {
  min-height:51px;
  position:relative;
  float:left;
  display:inline;
  margin-top:18px;
  /*
  padding-right:15px;
  */
  *width: 90px;
  _display: none;
}

body.home #inline-playlist {
  clear:both;
  float:right;
  display:inline;
  width:256px;
  min-height:49px;
  margin-top:2em;
  padding-bottom:0px;
}

#demo-box {
  position:relative;
  float:right;
  display:inline;
  margin-top:-4px;
  background:#fff;
  padding-left:3em;
  width:256px;
  z-index: 1;
}

hr {
  visibility:hidden;
  margin:0px;
  padding:0px;
}

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

#demo-header {
  color:#333;
  background:#f9f9f9;
  border:1px solid #e6e6e6;
  border-bottom:0px;
  margin-bottom:0px;
  padding:0.5em;
}

#demos h3 {
  padding-bottom:0px;
  text-indent:0.5em;
  font-weight:normal;
}

#demos h3 a {
  font-weight:normal;
}

#revision-list > li {
  margin-top:3em;
  margin-bottom:2em;
}

#revision-list > li:first-child {
  margin-top:2em;
}

/* seasonal decorations */

body.home.has-lights {
  /* prevent ugly scrollbars from explosion fragments */
  overflow-x: hidden;
}

body.home #lights {
  position:absolute;
  border-top:1px solid #006600;
  left:0px;
  top:0px;
  width:100%;
  z-index:4;
  display:none;
}

.xlsf-light {
  position:absolute;
  margin-top:-1px;
}

body.fast .xlsf-light {
  opacity:0.9;
}

.xlsf-light {
  opacity:0.9;
}

#explosion-box {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 10;
}

.xlsf-fragment {
  position:absolute;
  background:transparent url(christmas-lights/image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
  width:50px;
  height:50px;
}

.xlsf-fragment-box {
  position:absolute;
  left:0px;
  top:0px;
  width:50px;
  height:50px;
  *width:100%;
  *height:100%;
  display:none;
}

.figure {
  display:inline;
  display:inline-block;
  border:1px solid #ddeeff;
  padding:0.5em;
  margin:0.5em 0px 0.5em 0px;
}

.figure .code span {
  padding:0.25em;
  border:1px solid #f0f9ff;
  background:#fff;
}

.figure .code span.mid {
  color:#666;
}

#sm2-container.flash_debug {
  /* flash movie, when soundManager.debugFlash = true */
  position:relative;
  width:auto;
  height:300px;
  width:100%;
  background:#f6f6f6;
  border:1px solid #ccc;
}

#sm2-container.flash_debug object,
#sm2-container.flash_debug embed {
  width:100%;
  height:100%;
  left:auto;
  top:auto;
}

ul.file-structure ul {
  padding-left:1.5em;
}

ul.file-structure li {
  list-style-type:square;
  margin-top:0.25em;
  margin-left:0px;
}

ul.file-structure li span {
  color:#999;
}

#sm2-filesizes {
  border:1px solid #ddd;
  background:#fff;
}

#sm2-filesizes tr:nth-child(2n+1) {
  background:#f9f9f9;
}

#sm2-filesizes th {
  background:#eee;
  font-weight:bold;
  text-align:left;
}

#sm2-filesizes th {
  padding:4px 6px;
}

#sm2-filesizes td {
  padding:0px 6px;
  border:1px solid #eee;
}

#sm2-filesizes p {
  margin-top:0.5em;
  margin-bottom:0px;
}

#sm2-filesizes pre {
  border-left:none;
  margin-top:0.5em;
  margin-bottom:0.5em;
}

#sm2-filesizes .nw {
  white-space:nowrap;
}

#sm2-filesizes .booyaa {
  /* in the words of Paris Hilton, "that's hot." (in the nerdy sense, I suppose.) */
  background:#fff9f9;
  color:#990000;
}

#history li.in > p.compact {
  font-weight:bold;
}

#sm2-options {
  /* -html5, -debug etc. */
  position: relative;
  clear: both;
  color: #666;
  margin: 0.33em 0.75em 0px 0.75em;
  border-top: 1px dotted #ddd;
}

#sm2-options .options-divider {
  font-size: 85%;
  color: #ccc;
}

#sm2-options p {
  font-size: 85%;
  padding-left: 0px;
  padding-bottom: 0px;
  margin-bottom: 0.75em;
}

#sm2-options p:first-child {
  margin-top: 0.75em;
}

#sm2-options a {
  color: #3399cc;
  text-decoration: none;
  padding: 1px;
  margin-top: -2px 0px 0px -2px;
}

#without-html5 {
  display: none;
}

body.home #about-sm2 #inline-demo-header {
  margin-top: 1.5em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5em;
}

body.home #about-sm2 #inline-demo-header,
body.home #about-sm2 .home-shopping-network {
  display: block;
}

#about-sm2 a img {
  border: none;
}

/* alternate code + comment blocks */

ul.code-block {
  list-style-type: none;
  position: relative;
  padding: 3px;
  font-size: 85%;
}

ul.code-block,
ul.code-block li {
  position: relative;
  margin: 0px;
  padding: 0px;
  line-height: 1.5em;
}

ul.code-block li {
  padding: 0.75em 0.5em;
}

ul.code-block li:nth-child(2n+1) {
  background-color: #fcfcfc;
}

ul.code-block li:last-child {
  padding-bottom: 0px;
}

ul.code-block li div {
  position: absolute;
  left: 0.5em;
  top: 0.75em; /* note: match LI padding */
  width: 22em; /* left gutter */
  z-index: 2; /* sit on top */
}

ul.code-block li span {
  position: relative;
  display: block;
  padding-left: 22.5em; /* room for left gutter */
  text-indent: -2em;
}

/* special min-width case */
#soundmanager-properties ul.code-block {
  min-width: 43em;
}

/**
* November 2011 homepage redesign
*/

div.oneup,
div.twoup,
div.threeup {
  position: relative;
  clear: both;
  padding: 2em 1em 2.5em 1em;
  *zoom:1; /* god damn shite IE */
}

div.oneup .column {
  position: relative;
  width: 100%;
}

div.twoup .column,
div.threeup .column {
  position: relative;
  float: left;
  display: inline;
  width: 33.3%;
  _width: 32%; /* IE 6 */
}

div.twoup .column {
  width: 50%;
  _width: 49%; /* IE 6 can die */
}

div.oneup .column,
div.twoup .column,
div.threeup .column {
  padding-bottom: 0.5em;
}

div.oneup .column-wrapper,
div.twoup .column-wrapper,
div.threeup .column-wrapper {
/*
  border-top: 1px dotted #d0d0d0;
*/
  margin: 0px 2.5em;
}

div.oneup .column-wrapper.spaced-out,
div.twoup .column-wrapper.spaced-out,
div.threeup .column-wrapper.spaced-out {
  /* spacing for columns without an &lt;h3> header */
  padding-top: 6.25em;
}

div.threeup.first {
  padding-top: 0.75em;
}

div.threeup.first .column-wrapper {
  border-top: none;
}

body.home #main .oneup p,
body.home #main .twoup p,
body.home #main .threeup p {
  font-size: 1.1em;
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

body.home #main p.sidenote {
  /* disclaimer */
  font-size: 92%;
  color: #666;
}

body.home h2 {
  margin-top: 0px;
}

body.home div.c3 {
  /* pop discussion/support on top of margin */
  position: relative;
  float: right;
  display: inline;
  margin-left: 30px; /* a little extra spacing, so the &lt;h2> doesn't overlap */
  margin-top: -6px;
  z-index: 2;
  margin-bottom: 2.5em;
}

body.home #inline-playlist {
  float: none;
  display: block;
  width: auto;
}

body.home .sm2-inline-list .ui360-vis {
  /* center */
  margin: 0px auto;
}

body.home ul.playlist {
  font-size: 85%;
}

body.home ul.playlist li {
  font-size: 1.75em;
  letter-spacing: -0.02em;
}

body.home ul.playlist .sidenote {
  font-size: 85%;
}

body.home ul.graphic {
  margin-top: 1em;
}

body.home ul.graphic {
  position: relative;
}

body.home ul.graphic li {
  float: left;
  display: inline;
  width: 50%;
  margin-bottom: 0px;
}

body.home ul.graphic li a,
body.home ul.graphic li a.sm2_link {
  display: block;
  width: auto;
  min-width: 8em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

body.home ul li a:hover,
body.home ul.graphic a.sm2_playing,
body.home #inline-playlist li.sm2_paused a,
body.home #inline-playlist li.sm2_playing a,
body.home ul.playlist li div.timing,
body.home .feature-hot,
body.home #html5-support-li span {
  /* take out shadow on most demo links */
  text-shadow: none;
}

body.home .feature-hot {
 /* hack: font size fix */
 font-size: 13px;
}

body.home ul.graphic li a,
ul.playlist li a {
  /* "..." on titles */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* crap IE */
  *overflow: auto;
  *white-space: wrap;
}

body.home ul.playlist li a,
body.home ul.playlist li a:hover {
  line-height: 1.2em;
}

body.home .demo-more a span,
body.home .demo-more-abs a span {
  font-size: 1.5em;
  line-height: 1em;
  vertical-align: bottom;
}

body.home #sm2-visualization {
  clear: both;
  margin-top: 2em;
}

body.home #sm2-visualization .ui360 {
  float: none;
  display: block;
}

body.home #sm2-visualization .ui360 .sm2-360ui {
  border-color: rgba(0,0,0,0.05);
  background-color: rgba(255,255,255,0.5);
  box-shadow: inset 0px 0px 32px rgba(0,0,0,0.075);
}

body.home #sm2-visualization .ui360 canvas,
body.home #sm2-visualization .ui360 .sm2-360ui,
body.home #sm2-visualization .ui360 a {
  border-radius: 100%;
}

body.home #sm2-visualization .ui360 a {
  /* put title underneath button */
  line-height: 340px;
  *line-height: 480px; /* not crap IE, though. */
  line-height: 480px\9; /* nor IE 8. */
  color: #666 !important; /* hax */
  text-shadow: 0px 1px 0px #fff;
}

:root body.home #sm2-visualization .ui360 a {
  /* IE 9 correction */
  line-height: 340px\0/IE9;
}

body.home #sm2-visualization .ui360 a,
body.home #sm2-visualization .ui360 canvas {
  transition: all 0.2s ease-in-out;
  transition-property: background-color, border, box-shadow;
}

body.home #sm2-visualization .ui360:hover {
  background-color: rgba(0,0,0,0);
}

body.home #sm2-visualization .ui360:hover a {
  background-color: rgba(0,0,0,0.01);
  border-color: rgba(0,0,0,0.1);
  box-shadow: inset 0px 0px 32px rgba(0,0,0,0.05);
}

body.home #sm2-visualization .ui360 .sm2_playing canvas,
body.home #sm2-visualization .ui360 .sm2_paused canvas {
  /* hide song title while playing */
  background-color: #fafafa;
  *background-color: transparent; /* not you, crap IE. */
  background-color: transparent\9; /* nor IE 8. */
}

body.home #sm2-visualization .ui360 .sm2_playing canvas,
body.home #sm2-visualization .ui360 .sm2_paused canvas {
  background-color: #fafafa;
  box-shadow: inset 0px 0px 32px rgba(0,0,0,0.066);
}

body.home #sm2-visualization .ui360:hover .sm2_playing canvas,
body.home #sm2-visualization .ui360:hover .sm2_paused canvas {
  background-color: #fafafa;
  box-shadow: inset 0px 0px 32px rgba(0,0,0,0.1);
}

body.home .gsfn_topic_list li {
  /* by default, hide (and only show first X items.) */
  display: none;
}

body.home .gsfn_topic_list .gsfn-item-1,
body.home .gsfn_topic_list .gsfn-item-2,
body.home .gsfn_topic_list .gsfn-item-3 {
  /* show these items only. */
  display: block;
}

div.clearfix {
  font-size: 0px;
  height: 0px;
  overflow: hidden;
}

div.icons ul {
  list-style-type: none;
}

div.icons ul,
div.icons ul li {
  margin: 0px;
  padding: 0px;
}

div.icons ul li,
.icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  *display: none; /* not you, crap IE. */
  background: transparent url(data:image/png;base64,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) no-repeat;
  width: 32px;
  height: 24px;
  padding-right: 4px;
  text-indent: -999em;
  overflow: hidden;
  cursor: help;
  opacity: 0.75;
}

div.icons ul li:hover,
.icon:hover {
  opacity: 1;
}

.icon {
  display: inline-block;
  *display: none;
  width: 32px;
  height: 30px;
  margin-left: 16px;
  margin-top: 5px;
  opacity: 0.85;
  cursor: default;
}

div.icons ul li.desktop {
  background-position: -11px -12px;
  height: 24px;
}

div.icons ul li.laptop {
  background-position: -59px -13px;
  height: 22px;
}

div.icons ul li.ipad {
  background-position: -109px -10px;
  width: 28px;
  height: 28px;
}

div.icons ul li.iphone {
  background-position: -256px -9px;
  width: 22px;
  height: 28px;
}

div.icons ul li.android {
  background-position: -299px -7px;
  width: 28px;
  height: 32px;
}

.icon.performance,
div.icons ul li.performance {
  background-position: -205px -9px;
}

.icon.performance {
  width: 18px;
  height: 28px;
  margin-top: -7px;
}

.icon.music-note,
div.icons ul li.music-note {
  background-position: -155px -13px;
}

.icon.music-note {
  width: 19px;
  height: 23px;
  margin-top: -4px;
}

.icon.package,
div.icons ul li.package {
  background-position: -347px -7px;
  height: 28px;
}

.icon.package {
  width: 22px;
  margin-top: -8px;
}

.bonus-demos {
  position: relative;
  list-style-type: none;
}

.bonus-demos,
.bonus-demos li {
  margin: 0px;
  padding: 0px;
}

.bonus-demos li {
 float: left;
 display: inline;
 width: 24%;
 margin-right: 1%;
 text-align: center;
}

.bonus-demos li img {
 border-radius: 4px;
}

#client-requests ul.flat {
	/* nested examples as in HTML5 vs. flash download behaviours */
	list-style-type: none;
	padding-left: 0.5em;
	margin-top: 0.5em;
}

#client-requests ul.flat li {
	margin-bottom: 0px;
}

#inline-video {
 position: relative;
 margin-top: 4.25em;
 margin-right: 0.5em;
}

#bar-ui-1 {
 position: relative;
 top: -45px;
}

#bar-ui-1 .bd,
#bar-ui-1 .sm2-bar-ui .sm2-extra-controls,
#bar-ui-1 .sm2-bar-ui .sm2-playlist-drawer {
 background-color: #2299cc; /* non-RGBA fallback */
 background-color: rgba(0,128,224,0.65);
}

#about-sm2 .sm2-bar-ui .sm2-playlist-drawer {
 /* weird Chrome mac (retina display?) fix, otherwise BG color doesn't draw. */
 transform: scale3d(1,1,1);
}