/*
 * Generic styles to reset properties and make the graph easy to
 * view for debugging, etc.
 */
 
html * {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	font-family: Arial, sans-serif;
}
div#container {
	position: relative;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	top: 00px;
	width: 650px;
}
div#container2 {
	position: relative;
	margin: 0 auto;
	padding: 0;
	top: 0px;
	width: 650px;
}
 
/*
 * Styles for a pure CSS/HTML Bullet Graph implementation. Graph defined at
 * http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
 * or the Wikipedia entry http://en.wikipedia.org/wiki/Bullet_graph
 * The following code was inspired by the work of Matt Grams as
 * published at http://www.usrecordings.com/test-lab/bullet-graph.htm
 *
 * Sizing for the graph is specified in ems so the graph will scale
 * easily with text size. From top to bottom, the horizontal elements
 * in the graph are as follows:
 *
 *    1.2em - The labels for the performance target and regions.
 *    2.4em - The graph itself. The performance measure is 50% of
 *            this height and exactly centered in the graph. Any
 *            label for the performance measure appears immediately
 *            to the right of the graphed measure.
 *    0.5em - The horizontal axis tick marks.
 *    0.9em - Labels corresponding to the tick marks.
 *
 */
 
/*
 * Specify sizing for the general bullet-graph class since we
 * assume all graphs on the page will want consistent sizing.
 * Note that we've specified the height exactly, with no extra
 * padding or margin.
 *
 * We set the position property of the main container so we
 * can use absolute positioning of elements within the main
 * container and that positioning will be relative to the
 * main container.
 */
 
div.bullet-graph {
	position: relative;
	width: 400px;
	height: 5em;
}
div.bullet-graphGantt {
	position: relative;
	width: 800px;
	height: 5em;
}
 
/*
 * Now set the main graph area (exclusive of labels, axes, etc.).
 * We move it down (by setting the top property) to make room
 * for target and region labels.
 */
 
div.bullet-graph div.graph {
	position: relative;
	width: 100%;
	top: 1.2em;
	height: 1.3em;
}
 
/*
 * Each of the regions of the graph is floated to make it easier
 * to specify their size in the HTML markup (by setting the
 * width of each as a percentage).
 *
 * Also add a gradient for those browsers that can support it.
 */
 
div.bullet-graph div.graph div[class^='region-'],
div.bullet-graph div.graph div[class*=' region-'] {
	float: left;
	height: 100%;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image:     -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  background-image:         linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}
 
/*
 * Default colors for graph regions are gray, but other
 * options are available with additional classes. Specific
 * color values are derived from the work of Cynthia Brewer,
 * et al at http://colorbrewer2.org
 */
 


div.bullet-graph div.region-1 { background-color: #777; }
div.bullet-graph div.region-2 { background-color: #999; }
div.bullet-graph div.region-3 { background-color: #BBB; }
div.bullet-graph div.region-4 { background-color: #DDD; }

div.bullet-graph div.region-1-rev { background-color: #D9D9D9; }
div.bullet-graph div.region-2-rev { background-color: #BDBDBD; }
div.bullet-graph div.region-3-rev { background-color: #969696; }
div.bullet-graph div.region-4-rev { background-color: #7D7D7D; }
 
div.bullet-graph.inverse div.region-1 { background-color: #252525; }
div.bullet-graph.inverse div.region-2 { background-color: #525252; }
div.bullet-graph.inverse div.region-3 { background-color: #737373; }
div.bullet-graph.inverse div.region-4 { background-color: #969696; }
 
div.bullet-graph.red div.region-1 { background-color: #F6E1D3; }
div.bullet-graph.red div.region-2 { background-color: #EBBEA2; }
div.bullet-graph.red div.region-3 { background-color: #E39874; }
div.bullet-graph.red div.region-4 { background-color: #DD754E; }
 
div.bullet-graph.red.inverse div.region-1 { background-color: #57120F; }
div.bullet-graph.red.inverse div.region-2 { background-color: #8D2717; }
div.bullet-graph.red.inverse div.region-3 { background-color: #AE3422; }
div.bullet-graph.red.inverse div.region-4 { background-color: #CE4F30; }
 
div.bullet-graph.purple div.region-1 { background-color: #EEEDF5; }
div.bullet-graph.purple div.region-2 { background-color: #DADAEB; }
div.bullet-graph.purple div.region-3 { background-color: #BCBEDB; }
div.bullet-graph.purple div.region-4 { background-color: #9D9BC7; }
 
div.bullet-graph.purple.inverse div.region-1 { background-color: #35117C; }
div.bullet-graph.purple.inverse div.region-2 { background-color: #4A2C8E; }
div.bullet-graph.purple.inverse div.region-3 { background-color: #6454A2; }
div.bullet-graph.purple.inverse div.region-4 { background-color: #7F7DB9; }
 
div.bullet-graph.orange div.region-1 { background-color: #F7E7CF; }
div.bullet-graph.orange div.region-2 { background-color: #F1D2A4; }
div.bullet-graph.orange div.region-3 { background-color: #E9B16E; }
div.bullet-graph.orange div.region-4 { background-color: #E39342; }
 
div.bullet-graph.orange.inverse div.region-1 { background-color: #6E2F08; }
div.bullet-graph.orange.inverse div.region-2 { background-color: #90400C; }
div.bullet-graph.orange.inverse div.region-3 { background-color: #BD5512; }
div.bullet-graph.orange.inverse div.region-4 { background-color: #D47320; }
 
div.bullet-graph.green div.region-1 { background-color: #EAF4E0; }
div.bullet-graph.green div.region-2 { background-color: #D2E7C1; }
div.bullet-graph.green div.region-3 { background-color: #B4D69C; }
div.bullet-graph.green div.region-4 { background-color: #92C078; }
 
div.bullet-graph.green.inverse div.region-1 { background-color: #23421C; }
div.bullet-graph.green.inverse div.region-2 { background-color: #3C6A2E; }
div.bullet-graph.green.inverse div.region-3 { background-color: #548847; }
div.bullet-graph.green.inverse div.region-4 { background-color: #6FA75F; }
 
div.bullet-graph.blue div.region-1 { background-color: #E2EBF7; }
div.bullet-graph.blue div.region-2 { background-color: #CDDBEE; }
div.bullet-graph.blue div.region-3 { background-color: #ADC9E0; }
div.bullet-graph.blue div.region-4 { background-color: #84ADD5; }
 
div.bullet-graph.blue.inverse div.region-1 { background-color: #1A316A; }
div.bullet-graph.blue.inverse div.region-2 { background-color: #2D519B; }
div.bullet-graph.blue.inverse div.region-3 { background-color: #4670B4; }
div.bullet-graph.blue.inverse div.region-4 { background-color: #6391C5; }
 
/*
 * Allow for (optional) labels for each of the regions in the
 * graph. These labels will appear above the graph proper, left-
 * aligned with the left edge of the region.
 *
 * With the combination of width, white-space, overflow, and
 * text-overflow properties, we'll clip the text to the width
 * of the region (adding ellipses to indicate the clipping).
 *
 * Note that we use the same region to show the label for the
 * target marker. You probably don't want to use both target
 * labels and region labels on the same graph. If you need both,
 * you can position the target label on the left instead of
 * the top using the target-label-left class. (Of course, in
 * that case you need to watch for collisions with measure
 * labels.
 */
 
div.bullet-graph div.graph div[class^='region-'] div.region-label,
div.bullet-graph div.graph div[class*=' region-'] div.region-label {
	color: #555;
	background-image: none;
	position: relative;
	top: -2.0em;
	left: 0;
	width: 100%;
	white-space: nowrap;
	font-size:0.8em;
/*	overflow: hidden;
	text-overflow: ellipsis;*/
}
div.bullet-graph div.graph div[class^='region-'] div.region-labelGantt,
div.bullet-graph div.graph div[class*=' region-'] div.region-labelGantt {
	color: #555;
	background-image: none;
	position: relative;
	top: -2.2em;
	left: 0;
	width: 100%;
	white-space: nowrap;
	font-size:0.9em;
/*	overflow: hidden;
	text-overflow: ellipsis;*/
}
 
/*
 * Next is the main measure for the graph. For browsers with
 * appropriate support, we add a subtle gradiant, rounded
 * corners on the left edge, and a drop shadow.
 */
 
div.bullet-graph div.measure {
	position: absolute;
	height: 50%;
	top: 25%;
	background-color: #252525;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:      -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:     -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:         linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	-webkit-border-radius: 0 0.3em 0.3em 0;
	   -moz-border-radius: 0 0.3em 0.3em 0;
	    border-radius:     0 0.3em 0.3em 0;
 	-webkit-box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
     -moz-box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
          box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
 
}
div.bullet-graph div.measureGantt {
	position: absolute;
	height: 50%;
	top: 25%;
	background-color: #252525;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:      -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:     -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background-image:         linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	-webkit-border-radius: 0em 0em 0em 0em;
	   -moz-border-radius: 0em 0em 0em 0em;
	    border-radius:     0em 0em 0em 0em;
 	-webkit-box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
     -moz-box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
          box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
 
}

div.bullet-graph div.measureGrowth {
	position: absolute;
	height: 50%;
	top: 25%;
	background-color: #252525;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image:      -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image:     -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	background-image:         linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
	-webkit-border-radius: 0 0.3em 0.3em 0;
	   -moz-border-radius: 0 0.3em 0.3em 0;
	    border-radius:     0 0.3em 0.3em 0;
 	-webkit-box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
     -moz-box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
          box-shadow: 0em 0em 0em rgba(0, 0, 0, 0);
 
}
 
/*
 * Default color scheme from above is gray scale, but here are
 * alternates.
 */
 
div.bullet-graph.inverse div.measure { background-color: #F0F0F0; }
div.bullet-graph.red div.measure { background-color: #57120F; }
div.bullet-graph.red.inverse div.measure { background-color: #F6E1D3; }
div.bullet-graph.purple div.measure { background-color: #35117C; }
div.bullet-graph.purple.inverse div.measure { background-color: #EEEDF5; }
div.bullet-graph.orange div.measure { background-color: #6E2F08; }
div.bullet-graph.orange.inverse div.measure { background-color: #F7E7CF; }
div.bullet-graph.green div.measure { background-color: #23421C; }
div.bullet-graph.green.inverse div.measure { background-color: #EAF4E0; }
div.bullet-graph.blue div.measure { background-color: #1A316A; }
div.bullet-graph.blue.inverse div.measure { background-color: #E2EBF7; }
 
/*
 * Now position the measurement label. (It's optional and can be
 * omitted from the markup if desired.) We place the label immediately
 * to the left of the measurement bar. Note that we don't make any
 * accommodations for overflowing the graph.
 */
 
div.bullet-graph div.graph div.measure div.measure-label {
	color: #000;
	position: relative;
	left: 100%;
	padding-left: 0.3em;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	background-image: none;
	font-size:0.75em;
}
div.bullet-graph div.graph div.measureGantt div.measure-label-gantt {
	color: #000;
	position: relative;
	left: 100%;
	padding-left: 0.3em;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	background-image: none;
	font-size:0.75em;
}
div.bullet-graph div.graph div.measureGrowth div.measure-label-growth {
	color: #fff;
	position: relative;
	left: 0%;
	padding-left: 0.3em;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	background-image: none;
	font-size:0.55em;
}
div.bullet-graph.inverse div.graph div.measure div.measure-label {
	color: #FFF;
}
 
/*
 * Next up is the target marker, if we want one.
 */
 
div.bullet-graph div.target {
	position: absolute;
	left: -1px; /* shift left since width > 1px */
	height: 100%;
	border-right: 1px #000 solid;
}
div.bullet-graph div.target5 {
	position: absolute;
	left: -1px; /* shift left since width > 1px */
	height: 100%;
	border-right: 3px #000 solid;
}
div.bullet-graph div.target5d {
	position: absolute;
	left: -1px; /* shift left since width > 1px */
	height: 100%;
	border-right: 2px #000 dotted;
}
div.bullet-graph div.target9 {
	position: absolute;
	left: -1px; /* shift left since width > 1px */
	height: 100%;
	border-right: 1px #000 dashed;
}
 
/*
 * By default, the target label is positioned directly
 * above the target marker. The label can optionally
 * be placed to the left of the marker by using the
 * target-label-left class instead of target-left.
 *
 * Note that the label requires two nested <div> elements.
 * The outer <div class='target-label'> is used to
 * position the label above the graph, and the inner
 * <div class='target-label-text'> shifts the text
 * to the left so that it's centered over the marker.
 */
 
div.bullet-graph div.graph div.target div.target-label {
	color: #555;
	position: absolute;
	top: -1.2em;
	right: 0;
	text-align: right;
	white-space: nowrap;
}
div.bullet-graph div.graph div.target5 div.target-label5 {
	color: #555;
	position: absolute;
	top: -1.2em;
	right: 0;
	text-align: right;
	white-space: nowrap;
}
div.bullet-graph div.graph div.target5d div.target-label5d {
	color: #555;
	position: absolute;
	top: -1.2em;
	right: 0;
	text-align: right;
	white-space: nowrap;
}
div.bullet-graph div.graph div.target9 div.target-label9 {
	color: #555;
	position: absolute;
	top: -1.2em;
	right: 0;
	text-align: right;
	white-space: nowrap;
}
div.bullet-graph div.graph div.target div.target-label div.target-label-text {
	position: relative;
	right: -60%;
	bottom: -2px;
	color:#000;
}
div.bullet-graph div.graph div.target5 div.target-label5 div.target-label-text5 {
	position: relative;
	right: -60%;
	bottom: 0px;
	color:#000;
}
div.bullet-graph div.graph div.target5d div.target-label5d div.target-label-text5d {
	position: relative;
	right: -60%;
	bottom: -2px;
	color:#000;
}
div.bullet-graph div.graph div.target9 div.target-label9 div.target-label-text9 {
	position: relative;
	right: -60%;
	bottom: -2px;
	color:#000;
}
div.bullet-graph div.graph div.target div.target-label-left {
	color: #000;
	position: relative;
	height: 100%;
	top: 0.6em;
	left: 100%;
	padding-left: 0.4em;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	background-image: none;
}
div.bullet-graph.inverse div.graph div.target div.target-label-left {
	color: #FFF;
}
 
/*
 * Underneath the graph itself is the horizontal axis. We wrap the
 * entire axis in a <div class='scale'> to position it, and then
 * use individual <div class='tick'> elements for each tick mark.
 * Set the left property of these tick marks to define their position;
 * generally it would be specified as a percentage.
 */
 
div.bullet-graph div.scale {
	position: relative;
	top: 1.2em;
	width: 100%;
	height: 0.5em;
}
div.bullet-graph div.scale div.tick {
	position: absolute;
	height: 100%;
	width: 1px;
	background-color: #777;
}
 
/*
 * For the tick mark labels, we use the same approach as with the
 * target label: namely two nested containers. The outer <div>
 * positions the label vertically, and the inner <div> shifts the
 * text left to center it over the tick mark.
 */
 
div.bullet-graph div.scale div.tick div.tick-label {
	color: #888;
	font-size: 0.7em;
	position: absolute;
	bottom: -1.2em;
	white-space: nowrap;
}
div.bullet-graph div.scale div.tick div.tick-label div.tick-label-text {
	position: relative;
	left: -40%;
}

/* add turquoise color for help tips */

.tick-label-text:hover
{
background-color:#96EEFF;
} 
.target-label-text:hover {
background-color:#96EEFF;
} 
.target-label-text5:hover {
background-color:#96EEFF;
} 
.target-label-text5d:hover {
background-color:#96EEFF;
} 
.target-label-text9:hover {
background-color:#96EEFF;
} 
.turq:hover {
background-color:#96EEFF;
} 

/*Table Style*/
.bb{border-bottom: solid 1px black;}
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:0px 1px;overflow:hidden;word-break:word-wrap;border-color:#999;color:#999;background-color:#fff;vertical-align:middle;width:17.px}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:1px 1px;overflow:hidden;word-break:normal;border-color:#969696;color:#999;background-color:#fff;vertical-align:middle;text-align:center;width:17.px}
.tg .tg-t7ze{border-width:0px;font-weight:bold;font-size:14px;text-align:center;vertical-align:middle;}
.tg .tg-45ay{border-width:0px;background-color:#fff;font-size:11px;text-align:center;vertical-align:middle;padding:3px 1px;}
.tg .tg-glis{border-bottom:solid 1px #DDD;font-size:9px;vertical-align:middle;}
.tg .tg-ftai{border-width:0px;font-style:italic;font-size:14px;text-align:center;vertical-align:middle;}
.tg .tg-0klj{border-width:0px;font-size:11px;text-align:center;vertical-align:middle;padding:3px 1px;}
.tg .tg-fvmf{border-width:0px;background-color:#FFF;font-weight:bold;font-size:14px;text-align:center;vertical-align:middle;}
.tg .tg-levp{border-width:0px;background-color:#FFF;font-style:italic;font-size:14px;text-align:center;vertical-align:middle;}
.tg .tg-sedp{border-bottom:solid 1px #DDD;border-width:0px;font-size:9px;vertical-align:middle;background-color:#777;color:#fff;}

/*lines and headings*/

.linea1
	{
	width: 160px;
	height: 1px;
	position:relative;
	left:-166px;
	background-color: #BBB;
	}	
.lineHead
	{
	position:relative;
	left:-166px;
	color: #BBB;
	font-size:14px
	}
	
    	/* stylesheet for sparklines */
    	
.sparks {
    display: inline-block;
    position: relative;
    left:35px;

} 

.sparktdmiddle
	{
    position: relative;
    bottom:3px;
    font-size:12px;
	}   	
 
/* sparkline graph was 90 pixels wide, 32 pixels high */

.sparkline-working {
    position: relative;
    display: block;
    height:6px;
    width:90px;
    background:#ddd;
}

/* sparkline graph was 90 pixels wide, 32 pixels high */

.sparkline {
    position: relative;
    display: block;
    height:2px;
    width:90px;
    background:#eee;
    border-style:solid none;
    border-top-color:#ccc;
    border-bottom-color:#ccc;
    border-width:2px;
}

/* sparkline point was 3 pixels square, coloured red or green */

.sparkpurple {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #af8dc3;
}

.sparkgreen {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #7fbf7b;
}
.sparkblack {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #000;
    margin-bottom:-2px;

}
.sparkpurplep {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #e7d4e8;
}

.sparkgreenp {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #d9f0d3;
}
.sparkblackp {
    position: absolute;
    width: 10px;
    height: 2px;
    background: #777;
    margin-bottom:-2px;
}