/* --------- CODE EXAMPLES --------------*/
h4.code_title{
	display:block;
	font-family: arial, sans-sarif;
	margin:1em 1em 0 1em;
	color:#FFFFFF;
	padding:1px 1em;
	background:#667285;
	border:1px solid #667285;
	width:550px;
	}
pre code{
	font-size:.8em;
	font-family: Courier, "Lucida Console", monospace;
	line-height:1.5em;
	}
pre code var{
	font-style:normal;
	font-weight:bold;
	}
pre {
	background:#eee;
	border:1px solid #667285;
	padding:0 1em 1em 1em;
	margin:0 1em 1em 1em;
	width:550px;
	overflow:auto;
	}
.faux_link{
	text-decoration:underline;
	color:#0000FF;
	cursor:pointer;
	}
	
	
	
/* --------- CODE EXAMPLES --------------*/

.bar ul.TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
	}
.bar .TGraph li {
	position: absolute; 
	background: #666 url(images/bar_highlight.png) repeat-y top right;
	bottom: 0; 
	margin: 0; 
	padding: 0 0 0 0;
	text-align: center; 
	list-style: none;
	width: 39px; 
	border: 1px solid #555; 
	border-bottom: none; 
	color: #FFF;
	}
.bar .TGraph li:hover {font-weight:bold;}
.bar .TGraph li.p1{ background-color:#666666 }
.bar .TGraph li.p2{ background-color:#888888 }
.bar .TGraph li.p3{ background-color:#AAAAAA }


.depthBar ul.TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
	}
.depthBar .TGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0 -1px 0 -1px; 
	padding: 0;
	list-style: none;
	width: 41px; 
	border-bottom: none; 
	color: #FFF;
	}
.depthBar .TGraph li p {
	position:relative;
	top: 10px;
	left:10px;
	}
.depthBar .TGraph li.p1{background:  url(images/3dbar1.png) no-repeat top center; }
.depthBar .TGraph li.p2{background:  url(images/3dbar2.png) no-repeat top center; }
.depthBar .TGraph li.p3{background:  url(images/3dbar3.png) no-repeat top center; }

.line .TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line_2.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
	}
.line .TGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0; 
	padding: 0;
	text-align: center; 
	list-style: none;
	width: 40px; 
	border-top: 3px solid #555; 
	border-bottom: none; 
	color: #000;
	}

.line li.p1{ 
	background: url(images/blue_shadow.png) repeat-x top right;
	border-color: #4E536B; 
	}
.line li.p2{ 
	background: url(images/red_shadow.png) repeat-x top right; 
	border-color: #355B31;
	}
.line li.p3{ 
	background: url(images/yellow_shadow.png) repeat-x top right; 
	border-color: #88262B;
	}



.dots .TGraph {
	border-bottom: 3px solid #333; 
	position: relative; 
	height: 200px;
	margin: 1em 0; 
	padding: 0;
	background: url(images/horizontal_line_2.png) bottom left;
	font: 9px Helvetica, Geneva, sans-serif;
	}
.dots .TGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0; 
	padding: 15px 0 0 0;
	text-align: center; 
	list-style: none;
	width: 39px; 
	border-bottom: none; 
	color: #000;
	}
.dots li.p1 { background: url(images/nav_step_1.png) no-repeat top center;}
.dots li.p2 { background: url(images/nav_step_4.png) no-repeat top center; }
.dots li.p3 { background: url(images/nav_step_6.png) no-repeat top center; }