.graph {
    margin-top: 6px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

#GraphsArea .valuePopUp{
    position:fixed; 
    z-index: 1;
    display: none;
    left:0; 
    top:0; 
    width:90px; 
    height:30px;
    line-height:30px;
    border:1px solid:#C2C4C2; 
    border-radius:10px;
    box-shadow: 2px 2px 4px 1px #888888;
    text-align: center;
    font-weight:bold;
    color: #404040;
    background: linear-gradient(to bottom,  rgba(242,242,242,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
}

.graph .grid-x .tick {
    stroke: #BABABA;
}

.graph .grid-y .tick {
    stroke: #EDEDED;
}

.graph .grid-x path,.graph .grid-y path {
    stroke-width: 1;    
}

.graphControls {
    width: 100%;
    margin: 0 auto; 
    margin-top: 8px;
}

.graphControls .zoom{
    display:block; 
    text-align: center;
}

.graphControls .history{
    display:block;
}

#graphsGoForward {
    margin-right: 0px;
}

#GraphsArea{
    white-space: normal;
}

#graphBar{
    margin: 10px 0;
    min-height: 50px;
    border:1px solid #ccc;
    background: #e0e0e1;
    padding-right: 12px;
}

.graphBtn {
    display: inline-block;
    margin: 0 5px;
    width: 150px;
}

.graphZoomer {
    float: right;
}

.graphMover {
    display: inline-block;
}

/* Conditional for < 600px */
@media only screen and  (max-width: 400px) {
    .graphBtn {
        width: 45%;
        display: inline-block;
    }
    .graphBtn .ui-btn {
        font-size: 0.7em;
        display: inline-block;
    }
}

.graph > .header{
    position: relative;
    background: linear-gradient(to bottom,  rgba(242,242,242,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    height: 30px;
    box-shadow: 0px 2px 2px #888888;
}

.graph > .header > .title{
    position: absolute;
    left: 10px;
    bottom: 5px;
    font-weight:bold;
    color: #404040;
}

.graph > .header > .closeBtn{
    position: absolute;
    cursor: pointer;

    border-left: 1px solid #ccc;
    
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 30px;

    color: #404040;
    font-size: 1.75em;
    text-align: center;


}

.graph > .header > .closeBtn:hover{
    background: linear-gradient(to bottom,  rgba(224,224,224,1) 0%,rgba(206,206,206,1) 100%); /* W3C */
}


.graph > .header > select{
    position: absolute;
    display: block;
    cursor: default;

    background: transparent;
    border: 0;
    border-radius: 0;

    border-left: 1px solid #ccc;
    
    right: 60px;
    bottom: 0px;
    width: 110px;
    height: 30px;
    line-height: 30px;

    color: #404040;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-indent: 22px;
    -moz-appearance:none;
    -webkit-appearance: none;


}

.graph > .header > select:hover{
    background: linear-gradient(to bottom,  rgba(224,224,224,1) 0%,rgba(206,206,206,1) 100%); /* W3C */
}
    
.graph svg {
    background-color: white;
    font: 10px Arial;
    font-weight: bold;
    color : #363636;
}

.graph .hideAnimeLine{
    /* Must be same color as svg bg */
    fill: white;
}

.graph .valueArea {
    fill: #6CE0BA;
    stroke-width: 0;
    opacity: 0.25;
}

.graph .valueLine {
    stroke: #6CE0BA;
    stroke-width: 3;
    fill: none;
}
    /*, .x-axis line*/
.graph .x-axis path, .graph .y-axis path {
    fill: none;
    stroke: none;
    /*stroke: #333333;
    stroke-width: 1;
    /*shape-rendering: crispEdges;*/
}

.graph .x-axis text, .graph .y-axis text{
    cursor: default;
    stroke: none;
    text-anchor: end;
    fill: #333333;
}

.graph .axisLine,.graph .selectorLine{
    fill:none;
    stroke: #333333;
    stroke-width: 1;
}
