/* demo only */

html {
 position: relative;
 width: 100%;
 height: 100%;
 min-width: 980px; /* enough for two-column demo UI */
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 /* http://files.christophzillgens.com/webkit-font-smoothing.html */
 /* font-smoothing: subpixel-antialiased; */
 /* general font niceness? */
 font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 background: #fff;
 color: #000;
 transition: background 0.2s ease-in-out;
}

body {
 font-family: helvetica, verdana, tahoma, arial, sans-serif;
 font-weight: 300;
 margin: 0px;
 padding: 0.5em;
 transition: color 0.2s ease-in-out;
 padding-bottom: 64px; /* room for the bottom bar UI player */
}

h1 {
 display: inline-block;
 font-family: "helvetica neue", helvetica, verdana, tahoma, arial, sans-serif;
 font-size: 2em;
 font-weight: 300;
 margin: 0px 0px 0.25em 0px;
 padding: 0px 0px 0.15em 0px;
 border-bottom: 1px dotted #ccc;
}

h1 a {
 font-size: 100%;
 text-decoration: none;
 color: #000;
}

h1 a:hover {
 color: #336699;
 text-decoration: underline;
}

h2 {
 margin: 0px;
 padding: 0px;
 font-weight: 300;
}

h3 {
 font-weight: 300;
 margin: 1em 0px 0.5em 0px;
 padding: 0px;
}

p {
 margin-top: 0.5em;
}

.demo-wrapper {
 position: relative;
 width: 100%;
 /* whitespace trickery */
 font-size: 0px;
}

.demo-left,
.demo-right {
 font-size: 16px;
 font-size: 1rem;
 position: relative;
 display: inline-block;
 width: 48%;
 vertical-align: top;
}

.demo-left {
 margin-right: 2%;
 border-right: 1px dotted transparent;
}

.demo-wrapper .demo-bd {
 padding-right: 1em;
}

.demo-right {
 left: -1px; /* sneaky */
 margin-left: -2%;
 border-left: 1px dotted transparent;
}

.demo-left,
.demo-right {
 border-color: #ccc;
}

.demo-right .demo-bd {
 padding-left: 1em;
 padding-right: 0.5em;
}

.about {
 color: #333;
 font-size: small;
 line-height: 1.5em;
 margin-bottom: 0.5em;
}

.about a {
 text-decoration: none;
}

.note {
 font-size: 0.5em;
 color: #333;
}

#size-field {
 vertical-align: middle;
}

#colors {
 margin-bottom: 0.5em;
}

#colors * {
 vertical-align: middle;
}

.sm2-bar-ui {
 /* demo silliness */
 transition: all 0.2s ease-in-out;
}