.tlDate{
text-align: center;
background-color: #FFF;
padding: 10px 7px 7px 7px;
width: 44px;
margin: 0px auto;
clear: both;
font-weight:bold;
font-size: 11px;
color: #999;
}

.tlDate .year{
	font-size:10px;
	font-weight:normal;
}

.tlDate .month{
	text-transform:uppercase;
}

.tlRow{
width:100%;
background: url('/webportalstatic/images/dashboard/timelineBG.png') no-repeat scroll center top / 5px 100% transparent;	
padding: 10px 0 9px;
}

.tlRow:first-of-type{
	padding-top:0;
}

.tlSpacer{
	width:100%;
background: url('/webportalstatic/images/dashboard/timelineBG.png') no-repeat scroll center top / 5px 100% transparent;	
height:19px;
}

.tlInfo{
	background-color: #fff;
	width:120px;
	padding:10px 7px 7px 10px;
	font-size: 11px;
    color: #666;
}



.tlTime{
	padding:2%;
	width:136px;
	font-size: 12px;
    color: #666;
}


.odd .tlTime{
	text-align:right;
}



.tlMarker{
background: none repeat scroll 0% 0% #6FBADF;
width: 17px;
height: 17px;
margin: 0px auto;
color:#fff;
border:2px solid #fff;
border-radius:50%;
text-align:center;
font-size: 12px;
}

.alertMode .tlMarker,.alertMode .tlInfo {background-color:#f27935;color:#fff}
.lostMode .tlMarker,.lostMode .tlInfo{background-color:#f24735;color:#fff}


.tlMarker span{
	font-size: 11px;
    vertical-align: middle;
/*     padding-bottom: 2px; */
}


.tlRow:last-child {
	background: url('/webportalstatic/images/dashboard/timelineBG.png') no-repeat scroll center top / 5px 50% transparent;	
	
}
/**the 2nd row is nth of type 3 ...as the first two divs are tlSpacer and the first tlRow
 ....tlRow.nth-of-type ..the nth is counting divs not classes **/
 
.tlRow:nth-of-type(3) .tlInfo,.tlRow:nth-of-type(3) .triangle{
opacity:0.9;
}
.tlRow:nth-of-type(4) .tlInfo,.tlRow:nth-of-type(4) .triangle{
opacity:0.8;
}
.tlRow:nth-of-type(5) .tlInfo,.tlRow:nth-of-type(5) .triangle{
opacity:0.7;
}
.tlRow:nth-of-type(6) .tlInfo,.tlRow:nth-of-type(6) .triangle{
opacity:0.6;
}
.tlRow:nth-of-type(n+7) .tlInfo,.tlRow:nth-of-type(n+7) .triangle{
opacity:0.5;
}

.tlInfo,.tlMarker,.triangle,.tlTime{
	vertical-align:middle;
	display:inline-block; 
}

.tlRow.even .triangle{
	width: 0; 
	height: 0; 
	border-bottom: 10px solid transparent;  /* left arrow slant */
	border-top: 10px solid transparent; /* right arrow slant */
	border-left: 7px solid #fff; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
	margin-right:6px;
}

.alertMode.tlRow.even .triangle{
border-left: 7px solid #f27935;
}
.lostMode.tlRow.even .triangle{
border-left: 7px solid #f24735;
}

.tlRow.odd .triangle{
	width: 0; 
	height: 0; 
	border-bottom: 10px solid transparent;  /* left arrow slant */
	border-top: 10px solid transparent; /* right arrow slant */
	border-right: 7px solid #fff; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
	margin-left:6px;
}

.alertMode.tlRow.odd .triangle{
border-right: 7px solid #f27935;
}
.lostMode.tlRow.odd .triangle{
border-right: 7px solid #f24735;
}


p.tlInfoText:empty{
display:none;
}
.tlInfoText{
/* 	white-space:nowrap; */
/* 	overflow:hidden; */
}

@media only screen and (max-width:350px){
	.tlInfo{width:110px;}
	.tlTime{width:126px;}
	}