html, button{ background: #ddd; font-size: 1em; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Calibri, Helvetica, Arial; }
body{ margin: 20px; }
a{ color: #2B81AF; text-decoration: underline; }
a:hover{ text-decoration: none; }
#test_stage{ position: relative; left: 0; right: 0; bottom: 0; width: 640px; height: 500px; border: 1px solid black; background: #ddd; }
.sample{ position: relative; text-align: left; display: none; }
.sample.on{ display: block; }
.sample img, .sample iframe{ display: block; margin: 0 auto; }
.sample .reel-overlay{ margin: 20px 0 0 0; }
h1{ font-size: 2em; font-weight: normal; margin: 0; }
h2{ display: inline; color: #999; font-size: 1.5em; font-weight: normal; }
.sample h3{ color: black; font-size: 3em; margin: 0; font-weight: normal; }
.sample h4{ color: #666; font-size: 1em; margin: 15px 0 -4px 0; font-weight: normal; }
#control_events{ margin: 10px 0 0 0; }
#control_events button{ background: white; color: #2B81AF; text-decoration: underline; }
.sample .credits{ font-size: .9em; color: black; }
pre{ font-size: .8em; margin: 0 ; font-family: Monaco; padding: 0;
  background: #666; padding: 15px; color: white; border-radius: 0 12px 0 12px; }
.footer{ clear: left; padding: 10px 0 0 0; color: #999; }
.footer strong{ color: #333; }

.groups{ padding: 0; margin: 15px 0 20px 0; }
.groups li{ list-style-type: none; margin: 0 0 5px 0; border-bottom: 1px solid #ccc; }
.groups h2{ margin: 10px 10px 10px 0; }
.samples{ display: inline; padding: 0; height: 60px; line-height: 23px; }
.samples li{ display: inline; list-style-type: none; padding: 0 10px 0 0; cursor: pointer; color: #2B81AF; border: 0; text-decoration: underline; }
.samples li:hover{ text-decoration: none; }
.samples li xmp, .samples li .thumb{ display: none; }
.samples li img{ max-width: 60px; max-height: 60px; background: white; }
.samples li strong{ font-weight: normal; }