/*
	$Rev: 10 $
	$LastChangedDate: 2011-06-30 11:43:37 +1000 (Thu, 30 Jun 2011) $
	$Author: cwheeler $
	tl: timeline
	tlctrl: timeline control area (play, step forward, step back buttons, etc)
	*/
div.tl { 
	/* Don't set width of tl container; it will take up full width of its containing element */
	padding: 1px;
	padding-bottom: 0px;
	margin: 0px;
	font-family: arial;
}
div.tl a { text-decoration: none; color: #585858; font-weight: bold; }
div.tl div.tlctrl {
	background-color: #585858; /* Dark */
	color: #FFF;
	float: left;
	width: 100%;
}
div.tl div.tlctrl a {
	background-color: #585858; /* Dark */
	color: #FFF;
}
div.tl div.tlctrl a.button {
	display: block;
	float: left;
	margin-right: .3em;
	width: 35px;
	height: 20px;
	text-indent: -999em;
	overflow: hidden;
	background: url("Animator.buttons.png") 0px -20px no-repeat #999;
	color: #000;
}
div.tl div.tlctrl a.stepback {
	background-position: 0px 0px;
}
div.tl div.tlctrl a.stepback:hover {
	background-position: 0px -20px;
}
div.tl div.tlctrl a.stepforward {
	background-position: -35px 0px;
}
div.tl div.tlctrl a.stepforward:hover {
	background-position: -35px -20px;
}
div.tl div.tlctrl a.stop {
	background-position: -70px 0px;
}
div.tl div.tlctrl a.stop:hover {
	background-position: -70px -20px;
}
div.tl div.tlctrl a.play {
	background-position: -105px 0px;
}
div.tl div.tlctrl a.play:hover {
	background-position: -105px -20px;
}
div.tl div.tlctrl a.play.playing {
	background-position: -105px -40px;
}
div.tl div.tlctrl a.decspeed {
	background-position: -140px 0px;
}
div.tl div.tlctrl a.decspeed:hover {
	background-position: -140px -20px;
}
div.tl div.tlctrl a.incspeed {
	background-position: -175px 0px;
}
div.tl div.tlctrl a.incspeed:hover {
	background-position: -175px -20px;
}

div.tl div.tlctrl a img {
	vertical-align: middle;
}
div.tl div.tlctrl p {
	margin: 0px 0.5em 0px 3em;
	padding-bottom: 0.5em;
	padding-left: 2px;
	padding-top: 0.5em;
	float: left;
	display: inline; /* For IE6 double margin bug */
	font-size: 90%;
}
div.tl div.tlctrl p.left {
	float: left;
	margin: 0px;
	padding-top: 0px;
}
div.tl div.tlctrl div.right {
	float: right;
	margin: 0px 3em;
}
div.tl div.ul {
	float: left;
	width: 100%;
}
div.tl ul {
	background-color: #E0E0E0; /* Medium */
	list-style-type: none;
	text-align: center;
	margin: 0px;
	padding: 0px;
	/*position: relative; Probably not necessary */
}
div.tl ul li {
	display: inline;
	float: left;
	background-color: #E0E0E0;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
div.tl ul li li { font-size: 90%; }
div.tl li.na p {
	background-color: #D0D0D0;
	margin: 2px 1px 1px;
}
div.tl ul li a {
	display: block;
	margin: 2px 1px 1px;
	width: auto;
	background-color: #EEEEEE;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: 	all 1s ease-in-out;
	-o-transition: 		all 1s ease-in-out;
	-ms-transition:		all 1s ease-in-out;
	transition: 		all 1s ease-in-out;
}
div.tl ul li a.hiddenGroup {
	display: none;
}
div.tl ul li li a {
	margin-top: 1px;
	margin-bottom: 2px;
	display: block;
}
div.tl ul li.active {
	width: 50%;
}
div.tl ul li li a.active
{
	color: #FFFFFF;
	background-color: #585858; /* Dark */
}
div.tl ul li a.fromactive
{
	color: #FFFFFF;
	background-color: #777; /* Dark */
}
div.tl ul li a.toactive {
	background-color: #bbb;
}
html>body div.tl ul li.unitsrest { /* Differences in rounding between browsers means this li must take up remaining space. 
							   IE6 makes this block the full width of the container, so it has its own rule below. */
	display: block;
	width: auto; 
	float: none;
	z-index: 1;
}
/* IE6 requires its own rule, which is a hack, because the content sticks out to the right */
/* html div.tl ul li.unitsrest { margin-right: -2px; } /* IE6 only */

div.tl span.nodisplay {
	display: none;
}
div.tl div.clearfix {clear: left; line-height: 0; height: 0;}