/* 
    Document   : styles
    Created on : Nov 28, 2010, 12:37:53 PM
    Author     : Robert Scavilla
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/* START Gavin's modified or new styles*/
/*
#charts .jqplot-series-canvas, #charts .jqplot-axis jqplot-yaxis {top:54px !important;}
#charts .jqplot-event-canvas {top:54px !important;}
#charts .jqplot-yaxis, #charts .jqplot-grid-canvas { top:20px !important;}
#charts .jqplot-table-legend {top:65px !important;}
*/
/* END Gavin's modified or new styles*/

div#charts {
    height:450px;
    width:700px;
    font-size: 16px;
    font-family: arial;
    margin: 15px auto 0 auto;
    background-color: #fff;
    position: relative;
    
}
div#OpenAcctsChart {
    width:630px;
    height: 400px;
    margin-left: 15px;
    float:left;
	margin:0 auto 10px auto;
}
.unit_holder {
	position:absolute;
	bottom:10px;
	left:260px;
    width: 240px;
    height: 40px;
    background-color: #f3f2de;
    padding: 10px;
    border: 1px solid #ccc;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
}
div.directions {position:absolute; bottom:25px; left:535px; font:normal .8em/1em Arial, Verdana, sans-serif; color:#666;}

.unit {
    clear: both;
    margin-left: 15px;
    margin-top: 5px;
}
.slider {
    float: left;
    width: 120px;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}
.startyear, .endyear {
    float: left;
	width:30px;
}
.slider a .ui-state-active {
    color: #b1dfd5;
}
.ui-slider {
    height: 3px;
    margin-top: 10px;
    border: none;
}
.ui-slider .ui-slider-handle {
    border-style: none;
    background: url(slider_handle.png) no-repeat;
    top: 8px;
}
#xlabels {
   
    float: left;
    height: 90px;
    margin:-10px 0 0 60px;
	width:595px;
}
#xlabels .xlabel {
    width: 78px;
    float: left;
    margin:0 18px 0 0;
    text-align: center;
	color:#666;
	font-size:.9em;
}
#xlabels .xlabel .growthrate {
    width: 100%;
    height: 20px;
}
.growthrate { color:#339900; font-weight:normal;}

.red {
    color: red;
}
.gr {
    color:#339900;
	position: absolute;
    bottom: 31px;
    left: 0;
    height: 20px;
    width: 80px;
}

#chart2 .jqplot-point-label {padding-left:5px;}