.leftHalf{
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 75%;
    bottom: 0;
}

.leftQauter{
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 87%;
    bottom: 0;
}


.rightHalf{
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 75%;
    bottom: 0;
    right:0;
}

.leftFull{
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 50%;
    bottom: 0;
    left:0;
}

.rightFull{
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 50%;
    bottom: 0;
    right:0;
}

.timeBox{
    list-style-type: none;
    position: relative;
    height:100px;
    width:50px;
    border-bottom:2px;
    float:left;
    background-color:none;
}

.backBox{
    z-index:-5;
}

.timeBox:hover
{ 
background-color:yellow;
}

#timeIndex{
    margin-top:70px;

    /*height:100px;*/
    /*border-bottom:2px solid #f51c40;*/

}
#timeWindow{
    position:relative;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 60px;
    -ms-touch-action: none;
}


.timeBoxCanvas{
    margin-top:10px;
    position: absolute;
    border:2px solid #f51c40;
    width:50px;
    height:50px;
    top:-5px;
    left:-10px;
}


.sketchFrame {
    position: relative;
    margin: 15px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.sketchFrame:after {
    content: "Sketch / Skeleton Interface";
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #9da0a4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}

.sketchFrameShow {

    position: relative;
    margin: 15px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.sketchFrameSide {
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    
    
}

#frame2canvasWindowRight {
    width:150px;

    vertical-align: middle; 
}
#frame2canvasWindowLeft {
    width:150px;
    vertical-align: middle; 
}

.sideBar{
    float:left;
    display: inline;
}


.floatLeft{
    float:left;

}

.noListTag{
    list-style-type: none;
}

#timeTarget{
    width:200px;
    height:34px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 135px;
    padding:15px;
    background-color: #fff;
    border: 2px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#infoTopLeft{
    position:absolute;
    left:0px;
    top:0px;
}

#timeWindowBody{
    height:400px;
}

.clusterElement{
    float:left;
}

.clusterBlock {
    float: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
}

#clustersBox{
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin-left:20px;
    margin-right:20px;
    border-radius: 4px;
    width:674px;
    height:400px;
    float:left;
    overflow-y:auto;
}

#timeRangeSlider{
    float:left;
    width:200px;
}

.timeAnchor{
    height:50px;
    width:1px;

}


#clusterBoxStartElements{
    width:60px;
}

#clusterBoxPathElements{
    width:550px;
}

#clusterBoxEndElements{
    width:60px;
}

.clusPathBox{
    width:490px;
    margin-left:10px;
    border:5px thick SteelBlue ;
    background-color: PowderBlue  ;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding:5px;
    margin-bottom:5px;

}