body, html { margin: 0; font-family: Tahoma; font-size: 11pt; } body { padding: 15px; } br { display: block; content: ""; margin-top: 15px; } h2 { padding-top: 1em; } canvas { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } .aspect { position: relative; width: 100%; } .standalone { width: 640px; height: 480px; } .demo { clear: both; } .demo-container { float: left; width: 58%; } .demo-text { float: left; width: 38%; margin-left: 2%; margin-right: 2%; } .timeline, .timeline td:nth-child(2) { width: 100%; } .play { background: black; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%27%23F2F2F2%27%20d%3D%27M30.185%2C15.5L12.556%2C24.8V6.201L30.185%2C15.5z%27%2F%3E%3C%2Fsvg%3E"); width: 40px; height: 30px; } .pause { background: black; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M26.94%2C6.978v17.045h-5.249V6.978H26.94z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M18.975%2C6.978v17.045h-5.249V6.978H18.975z%22%2F%3E%3C%2Fsvg%3E"); width: 40px; height: 30px; margin: 0; } .checkbox { display: inline; } .slider { width: 100%; max-width: 800px; border-radius: 3px; text-align: left; transform: translateZ(0); background: #222; display: inline-block; } .slider, .slider.filled span { height: 15px; border: 1px solid #c5c5c5; } .slider div { position: absolute; top: -2px; width: 10px; height: 17px; background: white; border: #000 1px solid; border-radius: 2px; z-index: 10; } .slider.filled { border: 0; } .slider.filled div { top: -1px; margin-left: 1px; } .slider.filled span { display: block; position: absolute; background: #3ea9f5; border-top-left-radius: 3px; border-bottom-left-radius: 3px; z-index: 5; } .slider.filled span:last-child { background: #222; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .overlay { opacity: 1; transition: opacity 0.5s ease; z-index: 10; } .overlay-hide { opacity: 0; } .overlay-label { display: none; }