.dd-demo {
    position: relative;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    cursor: move;
    height: 25px;
    width: 120px;
    padding: 0;
    margin: 0;
    border:2px solid;
    border-radius:10px;
    font-size: 12px;
}
.h-axis td {
    width:400px;
    text-align: center;
}
.dd-demo div {
    border:0px;
    height:25px;
    width:120px;
}
.dd-demo p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    border:0px;
    height:24px;
    width:120px;
}
.vaxis {
    align: center;
    transform:rotate(270deg) translateX(-420px) translateY(-90px);
    transform-origin: 0% 0%;
    -ms-transform:rotate(270deg) translateX(-420px) translateY(-90px); /* IE 9 */
    -ms-transform-origin:0% 0%; /* IE 9 */
    -moz-transform:rotate(270deg) translateX(-420px) translateY(-90px); /* Firefox */
    -moz-transform-origin:0% 0%; /* Firefox */
    -webkit-transform:rotate(270deg) translateX(-420px) translateY(-90px); /* Safari and Chrome */
    -webkit-transform-origin: 0% 0%; /* Safari and Chrome */
    -o-transform:rotate(270deg) translateX(-420px) translateY(-90px); /* Opera */
    -o-transform-origin:0% 0%; /* Opera */
} 
.vaxis td {
    width:100px;
    text-align: center;
}
#leftbar {
    width:300px;
    height:5%;
    padding:0px;
    /*border: 1px solid black;*/
    float:left;
}
#dd-demo-canvas1 {
    width:800px;
    height:685px;
    padding: 10px 55px 20px 55px;
    background-color: #CDCDCD;
    border: 1px solid black;
}
#dd-demo-canvas1 h2 {
    text-align: center;
}
#dd-demo-canvas2 {
    height:445px;
    padding: 25px;
    background-color: #8DD5E7;
    border: 1px solid black;
}
#dd-demo-canvas3 {
    height:430px;
    width:90%;
    padding: 15px;
    transparent:100%;
}
#dd-demo-1 { 
    background-color: yellow;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-2 { 
    background-color: #63A063;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-3 {
    background-color: #63A063;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-4 {
    background-color: #63A063;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-5 {
    background-color: yellow;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-6 {
    background-color: yellow;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-7 {
    background-color: #63A063;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-8 {
    background-color: #C0C;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-9 {
    background-color: #C0C;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-10 {
    background-color: #C0C;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-11 {
    background-color: #C0C;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-12 {
    background-color: yellow;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-13 {
    background-color: #F39063;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-14 {
    background-color: #F39063;
    top:0px;
    left:300px;
    color: #000;
}
#dd-demo-15 { 
    background-color: #F39063;
    top:0px;
    left:300px;
    color: #000;
}
/* Hide overlay markup while loading, if js is enabled */
.yui3-js-enabled .yui3-overlay-loading {
    top: -1000em;
    left: -1000em;
    position: absolute;
}
/* Overlay Look/Feel */
.yui3-overlay-content {
    background-color: #ECEFFB;  
    border: 1px solid #9EA8C6;
    border-radius: 3px;
    font-size: 12px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}
.yui3-overlay-content .yui3-widget-hd {
    background-color: #B6BFDA;  
    color: #30418C;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    padding: 0.2em 0.5em 0.3em;
    border-radius: 2px 2px 0 0;
}
.yui3-overlay-content .yui3-widget-bd {
    padding: 0.4em 0.6em 0.5em;
}
.yui3-overlay-content .yui3-widget-ft {
    background-color:#DFE3F5;
    padding: 0.4em 0.6em 0.5em;
    border-radius: 0 0 2px 2px;
}