body { background:#fff; color: #272727; /* scandalous. */ margin:0px; padding:0px; font:75% "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. */ -moz-transition: font-size 0.1s; -webkit-transition: font-size 0.1s; } @media all and (min-width: 1600px) { /* holy CSS3 media queries, Batman! (in this case, larger screen widths get this rule.) */ body { font-size: 90%; } body.home .sm2-speaker { max-width: 226px !important; } /* 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: 118%; } body.home .sm2-speaker { left: -2.5% !important; margin-left: -15% !important; margin-top: 20px !important; } } 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); } /* 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; } h1, h2.special { letter-spacing:-0.005em; } h2.special { font-family:"ChunkFive","ChunkFiveRegular","helvetica neue",helvetica,arial,verdana,tahoma,"sans serif"; letter-spacing:0px; font-weight:normal; display:inline; } h1, h2, h3, h4 { font-size:1em; margin:0px; padding:0px; vertical-align:middle; } h4.new, h4.recent, h4.flash9 { min-height:24px; } h1 { font-size:2em; } h2 { font-size:1.5em; } h3 { font-size: 1.17em; 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; } 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; } body.home #about-header { /* speaker image, etc. */ position: relative; margin-left: 18%; min-height: 175px; padding-top: 1.75em; } body.home #about-header .feature { /* special alignment tweak */ position: relative; top: -0.25em; vertical-align: middle; } body.home .sm2-speaker { position: absolute; left: -1.5%; top: 0px; margin-right: 2em; margin-bottom: 8px; max-width: 192px; min-width: 64px; width: 20%; margin-left: -20%; } body.home .sm2-speaker img { width:100%; max-width:226px; min-width:32px; } 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 h2.special, body.home #about-sm2 h3 { letter-spacing:0px; } body.home #about-sm2 h3 { font-size: 2.25em; } body.home #about-sm2 b { font-weight: 500; } body.home #about-sm2 strong { font-weight: 500; color: #333; } #col3 a.button, /* "newer version available" */ a.feature-hot, a.feature { display: inline-block; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; text-shadow: 0px 1px 0px rgba(0,0,0,0.33); box-shadow: inset 0px 0px 3px rgba(0,0,0,0.33); } @-moz-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); } } @-webkit-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 { -moz-animation-duration: 0.5s; -moz-animation-name: highlight; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-duration: 0.5s; -webkit-animation-name: highlight; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } body.home #about-sm2 h3 { color:#444; font-weight: bold; padding-bottom: 0px; margin-bottom: 0px; font-weight: 300; letter-spacing: -0.005em; } 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:85%; 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:"DejaVu Sans Mono","DejaVuSansMonoBook",monaco,"Andale Mono","VT-100","Lucida Console","Courier New",monospace,courier,system,sans-serif; } pre, code, .code, dt, #soundmanager-debug { font-weight:normal; line-height:auto; color:#006699; background:#f6fcff; } 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 <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.sm2-alt { background-color:#fff; color:#556677; } #live-debug { display:table; *display:block; } #live-debug #soundmanager-debug .sm2-alt { background-color:#f3f9ff; color:#336699; } 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:#667788; } 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: -o-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; } 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; letter-spacing:-1px; } #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; } .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 { line-height:1.5em; } #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:17em; max-width:20em; background:#3399cc; background: -moz-linear-gradient(top, rgba(51,153,204,0.97) 0%, rgba(35,96,127,0.94) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,153,204,0.97)), color-stop(100%,rgba(35,96,127,0.94))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(51,153,204,0.97) 0%,rgba(35,96,127,0.94) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(51,153,204,0.97) 0%,rgba(35,96,127,0.94) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(51,153,204,0.97) 0%,rgba(35,96,127,0.94) 100%); /* IE10+ */ background: linear-gradient(top, rgba(51,153,204,0.97) 0%,rgba(35,96,127,0.94) 100%); /* W3C */ text-shadow: 0px 1px 0px rgba(0,0,0,0.25); _width:17em; *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.5em; padding-left:1em; color:#fff; font-weight: bold; color:rgba(255,255,255,0.9); } #nav ul li a { display:inline-block; padding:0.35em 0.5em; padding-left:0.75em; padding-right:0.75em; 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.1em; } #nav ul li strong a { color:#333; } #nav>ul>li>strong>a { /* tweak for good browsers that respect larger font size */ padding-bottom: 5px; } #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:85%; margin-bottom:0px; margin-top:0.45em; color:#999; } 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; line-height: 21px; } .c3 ul li, .c3 ul li a, .c3 ul li a:hover, .c3 ul li a:focus { color:#222; _color:#222; 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; } .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; border-top:2em solid #333; } .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; } .wedge .r { margin-top:-15px; 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: 100%; line-height:1.5em; text-indent:0.5em; padding:0.25em 0.25em 0.25em 0.25em; 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 { 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.4em 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; } #get-satisfaction a { color:#333; } #get-satisfaction a:hover { 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; letter-spacing:-1px; } .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); } #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 */ -webkit-transition: height 0.5s ease-in-out; -moz-transition: height 0.5s ease-in-out; 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:85%; font-size:0.9em; 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; } .c2 a, a.cta { margin-top:-0.3em; padding:0.2em 0.25em; margin-left: -0.2em; margin-right: -0.2em; *margin: 0px; *padding: 0px 2px; *margin: 0px -2px 0px -2px; text-decoration:none; color:#3399cc; 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; } /* redefine for simple mp3 button demo */ .c2 a.sm2_button { border-radius:6px; } .c2 a.sm2_button.type-2 { border-radius:9px; } .c2 a { margin-left:-0.2em; margin-right:-0.2em; color:#3399cc; font-weight:bold; 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 { 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; } li.html5support span { padding:0px 5px; display:inline-block; text-align:center; font-weight:bold; background:#ccc; color:#fff; border-radius:5px; margin-left:0.5em; margin-bottom:0.25em; } li.html5support em { font-weight:bold; } li.html5support span.true { background:#669966; } li.html5support span.partial { background:#993333; } li.html5support em.partial { color:#993333; } li.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; padding:0.3em 0.66em; margin:-0.3em 0px 0px -0.66em; color:#fff; font-weight:bold; border:3px solid #cce6ff; border:3px solid rgba(255,255,255,0.66); border-radius:8px; font-size: 1.1em; line-height:1em; *line-height:1.1em; text-decoration:none; } a.feature { display:inline; margin-left:0px; } .newer a, .feature-hot { background:#ff0000; border-color:#ff6666; color:#fff; line-height:1em; } .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; -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); 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; 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; } #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; } #opera { background-position: 0 -373px; width: 79px; height: 32px; margin: -16px 0px 0px -40px; } #soundcloud { background-position: 0 -424px; width: 83px; height: 58px; margin: -29px 0px 0px -42px; } #turntable-dot-fm { background-position: 0 -252px; width: 100px; height: 20px; margin: -10px 0px 0px -50px; } #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; } ul.playlist li 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; } .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 { margin-right: 4px; /* homepage-specific demo UI: a slight inner shadow + BG color + border */ background-color: rgba(0,0,0,0.025); box-shadow: inset 0px 0px 8px rgba(0,0,0,0.075); /* a little radii, modern browsers only */ border: 1px solid rgba(0,0,0,0.075); border-radius: 32px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /* specifics */ -moz-transition-property: background, border, box-shadow; -webkit-transition-property: background, border, box-shadow; transition-property: background, border, box-shadow; } body.home #special-demo-left .ui360:hover { background-color: rgba(0,0,0,0.045); border-color: rgba(0,0,0,0.15); box-shadow: inset 0px 0px 5px rgba(0,0,0,0.15); } 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; } @-moz-keyframes flashblock { from { border-color: #ff3333; } to { border-color: #fff; } } @-webkit-keyframes flashblock { from { border-color: #ff3333; } to { border-color: #fff; } } body.home #sm2-container.swf_timedout { /* blocked state */ border:1px solid #ff3333; -moz-animation-duration: 1s; -moz-animation-name: flashblock; -moz-animation-iteration-count: 5; -webkit-animation-duration: 1s; -webkit-animation-name: flashblock; -webkit-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, div.twoup, div.threeup, #about-sm2 h2.special, #about-sm2 p { text-shadow: 0px 1px 0px #fff; /* eh, why not. */ } 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 <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 #main { /* default: slightly-lighter text */ color: #272727; } 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 <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%; letter-spacing: 0px; } body.home .demo-more, body.home .demo-more-abs { font-size: 95%; } 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; } 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: 128px; } 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 { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -moz-transition-property: background-color, border, box-shadow; -webkit-transition-property: background-color, border, box-shadow; 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: 32%; margin-right: 1%; text-align: center; } .bonus-demos li img { border-radius: 4px; }