.sorter { background:#f4f4f4; border:1px solid #bbb; height:260px; margin:20px auto; padding:10px; position:relative; width:760px; } .sorter-sidebar { height:220px; position:absolute; right:10px; top:10px; width:170px; } .sorter-svg { background:#fff; border:1px solid #ccc; height:190px; left:10px; position:absolute; top:10px; width:559px; } .sorter-svg .marker { fill:#bbb; } .sorter-svg .marker text { fill:#2E4E7F; font-size:10px; } .sorter-properties { height:40px; left:10px; position:absolute; top:210px; width:570px; } .sorter-properties .property { border-right:1px solid #ddd; float:left; text-align:center; width:95px; } .sorter-properties .p6 { border:0; } .sorter-properties .property .title { color:#777; font-size:10px; } .sorter-properties .property .value { font-size:13px; margin-top:10px; } .controls-container { height:45px; padding-bottom:10px; text-align:center; } .controls-container button { border:1px solid #d4d4d4; background:#d4d4d4; color:#2E4E7F; cursor:pointer; font-size:12px; height:30px; line-height:30px; margin:0 2px; text-align:center; transition:background 0.2s ease, border 0.2s ease; vertical-align: top; width:30px; } .controls-container button:hover { background:#bbb; border:1px solid #2E4E7F; } .controls-container button[disabled] { border:1px solid #d4d4d4; cursor:not-allowed; opacity:0.2; } .controls-container button:focus { outline:0; } .controls-container .stat { font-size:13px; font-weight:bold; line-height:30px; } .message-container { border-top:1px solid #ddd; height:100px; line-height:20px; text-align:right; } .message-container .message { border-bottom:1px solid #ddd; font-size:12px; } .range-container { height:50px; margin-top:40px; text-align:center; } .range-container input { margin-bottom:5px; } .range-container .msg { font-size:11px; }