#stage {
    height:100%;
    width: 601px;
    float: left;
    background: #fff;
    overflow:hidden;
    position:relative;
}

#aside {
    height: 100%;
    width: 196px;    
    border-left:1px solid #fac21d;
    float:right;
    overflow:hidden;
    position:relative;

    /* hack: so mozilla will layout this correctly */
    margin-left:-1px;
}
#centered-stage {
    display:inline;
    margin: 0 auto;
}
#aside div.line {
    border-bottom: 1px solid #fac21d;
    height:1px;
    overflow:hidden;
    margin-left:0px;
}


#selection, .select{
    font: 12px/16px Arial, Helvetica, sans-serif;
}

#selection input{
    float: left;
    margin-left: 0px;
    margin-right: 5px;
}

#aside, #controls {
    background-color: #ffeaca}
#aside div.aside-box {
    background-color: #FFFFEA;
    width: 150px;
    margin-right: auto;
    border: #fac21d 2px solid;
    padding:10px;
}


#aside #legende h1 {
    margin-left:0px;
}
#aside .legende h1 {
    margin-left:6px;
}
.legend.aligned {
    width:156px;
}
.legend.aligned p {
    width:106px;
}

#legend,.legend{
    padding-left:3px;
    width:177px;
    background-color:#ffffff;
    border: 2px solid #fac21d;
}
#legend div{
    line-height:21px;
    padding:5px 0 5px 0px;
}
.legend div{
    padding:5px 0;
}
#legend p,.legend p {
    margin-left:15px;
    width:126px;
}
#aside>div {
    margin-bottom:20px;
    margin-left:10px;
}
.joint>*, #joint>*{margin-top:10px}

#aside h1 {
    text-align:left;
    margin-top:20px;
    margin-bottom:10px;
    margin-left:16px;
}

#aside>.aligned {
margin-left:16px
}

#aside .aside-box.aligned {
width:139px;
}

#aside>div.bottom-slider {
   margin-left:18px;
   top:465px;
   position:absolute;
}

#aside div.line.bottom-delimiter {
    position: absolute;
    left: 0px;
    top: 468px;
    width: 196px;
}


#aside .vertical-slider {
    margin-left:100px;
}


/*    margin: 0 20px 0 20px; */


#aside .vertical-slider[class~="ui-slider-vertical"] {
    height:156px;
}
#aside .vertical-slider {
    width: 2px;
    height:174px;
    position:relative;
    clear:both;
    cursor:pointer;
    padding: 0px !important;
}

#aside .vertical-slider[class~="ui-slider-vertical"] a {
    top:auto;
    margin-bottom:-7.5px;
    left: 3px;
}

#aside .vertical-slider[class~="ui-slider-horizontal"] a {
    margin-left:-4px;
    top:159px;
}

#aside .vertical-slider a {
    width: 8px;
    height: 15px;
    background-image: url(../images/icons/slider-handle-vertical.png);
    display:block;
    position:absolute;
}
#aside .vertical-slider[class~="ui-slider-vertical"] .ui-slider-range-min {
    bottom:0;
    top:auto;
    left:0;
    width: 100%;
}


#aside .vertical-slider div.ui-slider-range {
        background-color: #306391;
        height: 156px;
    top:2px;
    position:absolute;
}

#aside .vertical-slider:before {

    background:url(../images/slider-scale-vertical.png) no-repeat scroll transparent;
    position:relative;
    left:-14px; 
    width: 17px;
    height: 159px;
    display:block;
    content:"";
}

#aside .vertical-slider[class~="ui-slider-horizontal"]:before {
    top:0px;
}

#aside .vertical-slider[class~="ui-slider-vertical"]:before {
    top:-2px;
}

#aside .vertical-slider.disabled {
    opacity: 0.5;
}

#aside .vertical-slider.disabled a {
    opacity: 0.5;
}