.hidden { display: none; }

/* Please note that this may not represent the actual speed that the final animation will run at.  */

.draw-menu { height: 60px; width: 1024px; }
.draw-menu-main { overflow: visible;  color: #0F0;}
.draw-menu-main li { float:left; position: relative; color: #F00; text-transform: uppercase; }
.draw-menu-main li.right { float: right; text-align: right; }
.draw-menu-main li span { margin: 0 0 10px 0; line-height: 25px; }
.draw-menu-main li span.draw-clean-span { margin: 0px; padding: 0px; background: none; width: auto; height: auto; text-transform: none; line-height: normal; }
.draw-menu-main li ul { overflow: auto; }
.draw-menu-main li ul li { float: left; border-radius: 4px; padding: 2px 5px; margin: 0px 5px 0px 0px; text-align: center; background: #999; color: #222; font-weight: bold; text-transform: uppercase; font-size: 11px; font-family: Arial, Helvetica, sans-serif; z-index: 10; cursor: pointer; }
.draw-menu-main li.right ul li { margin: 0 0 0 5px; }
.draw-menu-main li ul li.draw-menu-framerate-preview { margin-right: 20px; width: 60px; }
.draw-menu-main li ul li.draw-menu-framerate-more { margin-right: 20px; }
.draw-menu-main li ul li:hover { background: #f00; color: #fff; }
.draw-menu-main li ul li.only-with-work { color: #888; background: #999; }
.draw-menu-main li ul li.only-with-work.active { color: #222; }
.draw-menu-main li ul li.only-with-work.active:hover { background: #f00; color: #fff; }
.draw-menu-main li:hover ul { display: block; }

.draw-container { width: 1024px; height: 320px; background: url(img/grid.jpg); position: relative; }
.draw-canvas { width: 1024px; height: 320px; opacity: .9; background: #000; cursor: crosshair; }
.draw-canvas.cursor-rect-1 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/rect-1.cur'), auto; }
.draw-canvas.cursor-rect-2 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/rect-2.cur'), auto; }
.draw-canvas.cursor-rect-3 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/rect-3.cur'), auto; }
.draw-canvas.cursor-rect-4 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/rect-4.cur'), auto; }
.draw-canvas.cursor-rect-5 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/rect-5.cur'), auto; }
.draw-canvas.cursor-circ-1 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/circ-1.cur'), auto; }
.draw-canvas.cursor-circ-2 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/circ-2.cur'), auto; }
.draw-canvas.cursor-circ-3 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/circ-3.cur'), auto; }
.draw-canvas.cursor-circ-4 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/circ-4.cur'), auto; }
.draw-canvas.cursor-circ-5 { cursor: url('http://bus-tops.com/static/js/bustops/draw/cur/circ-5.cur'), auto; }

.draw-intro { width: 864px; height: 160px; background: #222; position: absolute; top: 0px; top: 0px; padding: 80px; z-index: 6; }
.draw-intro-column { float: left; width: 40%; height: 100%; }
.draw-intro-column.middle { float: left; width: 5% !important; padding-top: 50px; }
.draw-intro-column.margin { margin-right: 5%; }
.draw-intro-column-title { color: #f00; text-transform: uppercase; font-weight: bold; margin: 0px 0px 5px 0px; }
.draw-intro-column-text { color: #999; }
.draw-intro-column-text strong { color: #f00; text-transform: uppercase; }

.draw-loading { width: 1024px; height: 320px; background: #222 url(img/ajax-loader.gif) center center no-repeat; position: absolute; top: 0px; top: 0px; z-index: 20; opacity: .8; }

.draw-zoom-container { position: absolute; width: 150px; height: 150px; background: url(img/grid-zoom.jpg); top: 140px; left: 845px;  cursor:move; z-index: 5; }
.draw-zoom-cross { position: absolute; width: 150px; height: 150px; top: 0px; left: 0px; background: center center no-repeat url(img/grid-zoom-cross.png); }
.draw-canvas-zoom { width: 150px; height: 150px; opacity: .9; background: #000; }

.draw-colors { width: 1024px; height: 20px; margin: 5px 0 0 0; position: relative; }
.draw-color { float: left; width: 4px; height: 20px; cursor: pointer; }
.draw-color-selected { float: left; position: absolute; top: 0; left: 1020px; padding: 1px; margin: -2px; width: 4px; height: 20px; border: 1px solid #fff; }

.draw-frames-container { width: 1024px; height: 20px; overflow: hidden; background: #222; margin: 0px 0px 5px 0px; position: relative; }
.draw-frames { width: 9999px; height: 20px; position: relative; z-index: 1; }
.draw-frame { float: left; width: 10px; height: 20px; border-right: 1px solid #6F6F6F; font-size: 8px; background: #999; color: #222; cursor: pointer; }
.draw-frame.active { background: #f00; color: #fff; }
.draw-frames-controls { position: absolute; float: left; width: 15px; height: 20px; color: #fff; top: 0; text-align: center; background: #222; cursor: pointer; z-index: 2; }
.draw-frames-controls:hover { background: #F00; }
.draw-frames-left { left: 0; }
.draw-frames-right { right: 0; }
.draw-menu-framerate-value { width: 40px; }

.draw-tools-container { width: 1024px; height: 38px; margin: 15px 0 0 0; }
.draw-tools { float: left; height: 76px; }
.draw-tool { float:left; width: 70px; line-height: 22px; height: 22px; border-radius: 4px; margin: 0px 5px 0px 0px; text-align: center; background: #999; color: #222; font-weight: bold; text-transform: uppercase; font-size: 11px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; }
.draw-tool.active { background: #f00; color: #fff; }
.draw-tool-types { float: right; height: 38px; overflow: auto; margin: 0px -5px 0px 0px; }
.draw-tool-weight { float: left; overflow: auto; margin: 0 2px 0 0; width: 36px; height: 36px; border: 1px solid #ccc; }
.draw-tool-weight-value { float: left; width: 30px; line-height: 22px; height: 22px; border-radius: 4px; margin: 0px 5px 0px 0px; text-align: center; background: #f00; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
.draw-tool-weight-controls-action { float: left; width: 20px; line-height: 22px; height: 22px; border-radius: 4px; margin: 0px 5px 0px 0px; text-align: center; background: #999; color: #222; font-weight: bold; text-transform: uppercase; font-size: 11px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; }
.draw-tool-weight-controls-action.margin { margin-right: 20px; }