/* CSS Document ©2007 Patrick Mullen, All rights reserved.*/

/********
Demo Page
*********/


body {
	overflow:hidden;
}
/*div#top {
	height:82px;
}
div#header {
	padding-top:20px;
}*/
div#message_from_us {
	height:14px;
	padding:8px 0;
	text-align:center;
	background:#ffc;
	border-bottom:1px solid #d5d5a2;
	font-size:12px;
}
div#message_from_us a {
	text-decoration:none;
	color:#000;
	font-weight:bold;
}
div#message_from_us a:hover {text-decoration:underline;}
div#toolbar {
	height:56px;
	margin:0 6px;
	border-bottom:1px solid #333;
}
ul#zoom_buttons li {float:left; margin-top:33px;}

ul#zoom_buttons li a {
	display:block;
	background-image:url(/images/zoom_buttons.png);
	height:0;
	overflow:hidden;
	padding-top:23px;
	width:40px;
}
/* Zoom buttons img config */
ul#zoom_buttons li a#zm {
	display:block;
	height:0;
	background:#fff; 

	background:#a3a3a3; 
	color:#000; 
	overflow:display;
	padding-top:0px;
	height:23px;
	width:40px;
}
	ul#zoom_buttons li a#m1 {background-position:-40px 0;}
	ul#zoom_buttons li a#m3 {background-position:-80px 0;}
	ul#zoom_buttons li a#m6 {background-position:-120px 0;}
	ul#zoom_buttons li a#ytd {background-position:-160px 0;}
	ul#zoom_buttons li a#y1 {background-position:-200px 0;}
	ul#zoom_buttons li a#y5 {background-position:-240px 0;}
	ul#zoom_buttons li a#y10 {background-position:-280px 0;}
	ul#zoom_buttons li a#max {background-position:-320px 0; width:41px;}
div#toolbar div#tabs ul {
	list-style:none;
	margin-right:6px;
}
div#toolbar div#tabs li {
	float:right;
	margin-left:5px;
	margin-top:31px;
}
div#toolbar div#tabs a {
	display:block;
	text-align:center;
	text-decoration:none;
	padding:3px 0 0 0;
	color:#000;
	width:70px;
	height:21px;
	font-size:1.2em;
	border:solid 1px #333;
	background:#f0f0f0;
}
div#the_chart {
	position:absolute;
	border-bottom:1px solid #aaa;
	border-left:1px solid #aaa;
}
div#sidebar_handle_track {
	position:absolute;
	background:url(/images/handle_bg.png) repeat-y;
}
a#sidebar_handle {
	/*display:none; */ /*   it was laying over the graph, I had to do something to get it off of the screen for the demo  
	Sorry Eric
	*/
	display:block;
	overflow:hidden;
	background-image:url(/images/handle.png);
	width:7px;
	height:52px;
}
a#sidebar_handle:hover {
	background-position:0px -52px;
}
div#sidebar {
	overflow:auto;
	border-left:none;
	position:absolute;
	top:88px;
	right:6px;
	bottom:6px;
	width:360px;
}
div#sidebar h2 , div#sidebar p {
	margin:0 12px;
}
div#sidebar h2 {
	margin-top:12px;
	font-size:1.5em;
}
div#sidebar p {
	font-size:1.2em;
	margin-top:4px;
	margin-bottom:12px;
}
div.bread_crumbs {
	font-size:16px;
	font-weight:bold;
	padding:14px;
	height:18px;
}
div#all_stocks_pane div.bread_crumbs {
	padding:10px 0;
	height:26px;
}
div.bread_crumbs span , div.bread_crumbs a {
	float:left;
	height:18px;
}
div.bread_crumbs a {
	color:#00c;
	text-decoration:none;
	border-bottom:1px solid #8CB5FF;
}
div.bread_crumbs span.caret {
	background:url(/images/caret.png) no-repeat 10px 5px;
	width:29px
}
div#sidebar_plots {overflow:hidden;}
div#stocksmanager {width:1080px;}
div#sidebar div.scroll_pane {
	width:360px;
	float:left;
}
/*
div#all_stocks_pane {background:red;}
div#single_stock_pane {background:blue;}
div#plot_options_pane {background:green;}
*/
div#sidebar form {
	height:26px;
	margin:0 10px;
	font-size:14px;
}
div#sidebar form span {
	margin:5px 6px 0 0;
	font-weight:bold;
}
div#sidebar form span,div#sidebar form input,div#sidebar button {
	float:left;
} 
div#sidebar form input#ticker_symbol {
	height:20px;
	padding:4px 0 0 4px;
	width:175px;
	border:1px solid #aaa;
	float:left;
	margin-right:10px;
}
div#sidebar ul {
	clear:both;
	list-style:none;
	border-top:1px solid #aaa;
	margin-bottom:10px;
}
div#sidebar li {
	border-bottom:1px solid #aaa;
	font-size:14px;
	height:30px;
}
div#sidebar li:hover {
	background:#ffc;
}
div#sidebar ul span {display:block;}
span.tick,span.bulbOn,span.bulbOff,span.x_it {cursor:pointer;}
span.tick,span.price,span.change {
	float:left;
	padding:6px 11px;
}
span.price,span.change {
	text-align:right;
	width:56px;
}
span.tick {
	width:260px;
	float:left;
	clear:left;
}
span.tick,span.change {font-weight:bold;}
span.bulbOn, span.bulbOff, span.x_it {float:right;}
span.bulbOn, span.bulbOff {
	height:30px;
	background-image:url(/images/lt_bg.png);
	background-repeat:no-repeat;
	width:25px;
}
span.bulbOn {
	background-position:9px 7px;
}
span.bulbOff {
	background-position:9px -18px;
}
span.x_it {
	height:30px;
	width:25px;
	padding:0;
	margin-left:6px;
	background-image:url(/images/x_it.gif);
	background-repeat:no-repeat;
	background-position:3px 8px;
}

li.up span.change {color:#008000;}
li.down span.change {color:#a00;}

/*span.lt {
	padding:6px 8px;
	background-image:url(/images/lt_bg.png);
	background-repeat:no-repeat;
	background-position:6px 7px;
	width:14px;
}
li.hide span.lt {
	background-position:6px -18px;
}*/


/*** Page Manipulation Config ***/

div#the_chart {
	top:88px;
	right:373px; /* sidebar handle + sidebar width + right margin */
	bottom:6px;
	left:6px;
	z-index:0;
}
div#sidebar_handle_track {
	top:88px;
	right:366px;
	bottom:6px;
	width:7px;
}
a#sidebar_handle {
	background-position:0px 0px;
}

/* Show Plots/Options Tab */
div#wrap.show_plots_tab li#plots a, div#wrap.show_options_tab li#options a{
	font-weight:bold;
	background:#fff;
	border-bottom:1px solid #fff;
}
div#wrap.show_plots_tab div#sidebar_plots,div#wrap.show_options_tab div#sidebar_options {
	display:block;
}
div#wrap.show_plots_tab div#sidebar_options,div#wrap.show_options_tab div#sidebar_plots {
	display:none;
}

/* Hide Sidebar */
div#wrap.hide_sidebar div#the_chart {
	right:13px; /* sidebar handle right margin */
}
div#wrap.hide_sidebar div#sidebar {
	display:none;
}
div#wrap.hide_sidebar  div#sidebar_handle_track {
	right:6px;
}
div#wrap.hide_sidebar a#sidebar_handle {
	background-position:-7px 0px;
}
div#wrap.hide_sidebar a#sidebar_handle:hover {
	background-position:-7px -52px;
}
div#wrap.hide_sidebar.show_plots_tab li#plots a, div#wrap.hide_sidebar.show_options_tab li#options a{
	font-weight:normal;
	background:#f0f0f0;
	border-bottom:1px solid #000;
}


/* mouseOverline styling  */
#dateBar {width:150px; text-align:left;  z-index: 100;  position:absolute; right:10px;}
#dateBar span.dn {width:30px; float:left;  color:#000; ba ckground: green;  display:block; overflow:hidden;}
.mouseOverDivClass			{position:absolute; height:30px; width:40px; ba ckground:gray; z-index:99}
.mouseOverLineClass		{position:absolute;     z-index:3;}

.mouseOverLineClass {position: relative;  width:1500px; overflow:auto; 
										background:#C0C0C0;
										border-bottom:1px solid #000;
										font-size:14px;
										}
.plotSep { width:150px;  height:20px; overflow:hidden; 
					bord 	er:1px solid red; float:left; }
span.stockName {
	display:block; float: left; width: 50px; height:20px; overflow:hidden; 
}
.plotSep span.plotDesc{padding-right:10px;  width:50px;  height:20px; 
							b order:1px solid green; color:#fff;  text-align:left;
							flo at:left; }
.plotSep span.plotVal{ width:100px;  height:20px; text-align: left;  
							b order:1px solid green; color:#fff;  
							flo at:left; }


.annotated  { clear:both; overflow:auto; height:200px;}
/*  sidebar styling for IE */
html body #demo div#sidebar {_height:425px;}
.addstock { _height:23px;  _width:63px;}
.annotated input { _width: 100px; _height:8px; }
#sidebar_plots {_position: relative; _overflow:hidden; _height: 400px; _width:360px;}
.scroll_pane {_position:absolute; _float:none; _height:400px; 
							_le ft:380px; _display:none; background: transparent;}



.all_stocks_pane		#all_stocks_pane		{_left: 0px;	_display:block;}
.single_stock_pane	#single_stock_pane	{_left: 0px;	_display:block;	}
.plot_options_pane	#plot_options_pane	{_left: 0px;	_display:block;	}	


	/*
#all_stocks_pane		{background : green; } 
#single_stock_pane	{	background: blue; }	
#plot_options_pane	{ background: brown;}
#all_stocks_pane		{_left: 0px	}
#single_stock_pane	{_left: 360px	}	
#plot_options_pane	{_left: 720px; }	
.scroll_pane { float:left; _height:400px; _display:none;}
*/


/*  explanatory div styling */
.expDiv div { display:block; _display:none;}
.expDiv div.ie6Exp {display:none;  _paddi ng:0 0 15px 0; m argin: 0 0 20px 0;  
										_display:block ; bo rder:1px solid green;}
.annotated .expDiv .ie6Exp {  position:relative; right:0px; padding-left:50px;  width: 205px; }

.expDiv div.ie6Exp p{  _pad ding:0 0 20px 0; ma rgin: 0 0 10px 0;   w idth: 205px ; bo rder:1px solid red}