terom@83: body {
terom@83:     padding-top: 2em;
terom@83:     text-align: center;
terom@83: }
terom@83: 
terom@83: .container {
terom@83:     padding: 2em 1em;
terom@83:     text-align: left;
terom@83: }
terom@83: 
terom@83: /*
terom@83:  * Table layout
terom@83:  */
terom@83: table.dmx {
terom@83:     margin: 1em auto;
terom@83:     width: 80%;
terom@83: 
terom@83:     border-collapse: collapse;
terom@83: }
terom@83: 
terom@83: table.dmx tr
terom@83: {
terom@83:     border: 1px dotted #aaa;
terom@83: }
terom@83: 
terom@83: table.dmx th
terom@83: {
terom@83:     text-align: center;
terom@83: }
terom@83: 
terom@83: th.dmx-head         { width: 5em; }
terom@83: th.dmx-value        { width: 5em; }
terom@83: th.dmx-control      { }
terom@83: th.dmx-head-control { width: 5em; }
terom@83: 
terom@83: 
terom@83: 
terom@83: 
terom@83: /* Controls */
terom@83: input.dmx-input {
terom@83: 
terom@83: }
terom@83: 
terom@83: div.dmx-color-background {
terom@83:     background-color: rgb(0, 0, 0);
terom@83: }
terom@83: 
terom@83: div.dmx-color {
terom@83:     width: 5em;
terom@83:     height: 5em;
terom@83: 
terom@83:     margin: 1em auto;
terom@83: 
terom@83:     border: 1px dotted #aaa;
terom@83: }
terom@83: 
terom@83: div.dmx-slider {
terom@83:     margin: 1em;
terom@83: }
terom@83: 
terom@83: div.dmx-slider-alpha .ui-slider-range,
terom@83: div.dmx-slider-alpha .ui-slider-handle
terom@83: {
terom@83:     background: #ffffff;
terom@83: }
terom@83: 
terom@83: div.dmx-slider-red .ui-slider-range,
terom@83: div.dmx-slider-red .ui-slider-handle
terom@83: {
terom@83:     background: #ff0000;
terom@83: }
terom@83: 
terom@83: div.dmx-slider-green .ui-slider-range,
terom@83: div.dmx-slider-green .ui-slider-handle
terom@83: {
terom@83:     background: #00ff00;
terom@83: }
terom@83: 
terom@83: div.dmx-slider-blue .ui-slider-range,
terom@83: div.dmx-slider-blue .ui-slider-handle
terom@83: {
terom@83:     background: #0000ff;
terom@83: }
terom@83: