/**
 * Toolbar tab icon.
 */
 .toolbar-bar .toolbar-icon.toolbar-icon-tns-live-articles-livearticlesview {
 	background-color: #d20000;
    color: #fff;
 }
 .toolbar-bar .toolbar-icon.toolbar-icon-tns-live-articles-livearticlesview:hover, 
 .toolbar-bar .toolbar-icon.toolbar-icon-tns-live-articles-livearticlesview:focus {
 	color: #ffbebe;
 }
.toolbar-bar .toolbar-icon.toolbar-icon-tns-live-articles-livearticlesview:before,
.toolbar-bar .toolbar-icon.toolbar-icon-tns-live-articles-livearticlesview:active:before,
.toolbar-bar .toolbar-icon.toolbar-icon-tns-live-articles-livearticlesview.active:before {
	content: "\f144";
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	font-family: FontAwesome;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 10px 0;
}


/* timeline follow */
#live-article-timeline-header {
	margin-bottom: 20px;
}
/* when the timeline starts following */
#live-article-timeline-list.affix {
/*	border-left: 1px solid #ddd;*/
/*	overflow-y: scroll;*/
	max-height: 100%;
	background: white;
	width: 275px;
	top: 10px;
	z-index: 9999 !important;
}

.affix #timeline_dock_link {
	position: fixed;
	bottom: 0;
}
.affix-top #timeline_dock_link {
	/*position: absolute;*/
	z-index: 99999 !important;

}
.affix #timeline_dock_link img,
.affix-top #timeline_dock_link img {
	border: 1px solid black;
}


/* timeline block */
.nav-stacked > li.live-article-timeline-event {
	margin-top: 0px;
	padding-bottom: 20px;
}

#myScrollspy ul * {
	transition: all 0.1s;
}
.live-article-timeline-event {
/*	border-top: 1px solid #ddd;
	padding: 5px;*/
	position: relative;
}
.live-article-timeline-event:before{
	content: "";
	position: absolute;
	top:0;
	bottom: 0;
	left: 8px;
	border-left: 1px solid #ddd;
}
.live-article-timeline-event:after {
	content: "";
	position: absolute;
	top:0;
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-radius: 50%;
	background-color: #fff;
}
.live-article-timeline-event.fresh_event:before,
.live-article-timeline-event.fresh_event:after {
	animation: highlight_new_borders 5s;
    animation-iteration-count: 1;
}
.live-article-timeline-event.active:after {
	background-color: #777;
	border: 1px solid #ddd;
}
.nav > li.live-article-timeline-event:hover:after, .nav > li.live-article-timeline-event:focus:after {
	background-color: #999;
}
.nav > li.live-article-timeline-event > a {
	color: #999;
	padding: 0 10px 0 25px;
}
.live-article-timeline-event span {
	display: block;
}
.nav-pills > li.live-article-timeline-event.active > a, .nav-pills > li.live-article-timeline-event.active > a:hover,
.nav-pills > li.live-article-timeline-event.active > a:focus {
	color: #000;
	background-color: transparent;
}
.nav > li.live-article-timeline-event > a:hover, .nav > li.live-article-timeline-event > a:focus {
	background-color: transparent;
	color: #777;
}
.live_event_timeline_date {
	font-size: 12px;
}
/* event feed block */
.collapsible-title {
	position: relative;
	display: block;
	padding-right: 20px;
}

.collapsible-title:after {
	position: absolute;
	content: "\f077";
	font-family: FontAwesome;
	font-size: 14px;
	top: 0;
	right: 10px;
}
.collapsible-title.collapsed:after {
	content: "\f078";
}
.live-article-event {
	border-top: 1px solid #ddd;
}
.collapsible-title:hover:after, .collapsible-title:hover:after {
	-webkit-animation: hopping 1.5s ease 0s normal ;
	animation: hopping 1.5s ease 0s normal ;
}

@-webkit-keyframes hopping {
  0%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  20%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  40%{
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
  }
  50%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  60%{
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
  }
  80%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
  100%{
	-webkit-transform: translateY(0);
	transform: translateY(0);
  }
}

@keyframes hopping {
  0%{
	transform: translateY(0);
  }
  20%{
	transform: translateY(0);
  }
  40%{
	transform: translateY(-10px);
  }
  50%{
	transform: translateY(0);
  }
  60%{
	transform: translateY(-5px);
  }
  80%{
	transform: translateY(0);
  }
  100%{
	transform: translateY(0);
  }
}

.event-header {
	padding: 20px 0px;
}

.live_event_title {
	font-weight: bold;
	font-size: 18px;
}

.main-container #article-live-feed .event-header .live_event_date {
	display: initial;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 25px;
}


/* header block */
.live-header-content {
	overflow: hidden;
}


/* ajax response animations */
#myScrollspy {
	animation: timeline-transition 4s;
	max-height: 650px;
    overflow-y: scroll;
}
@keyframes timeline-transition {
	0% { 
		transform: scale(0);
		opacity: 0;
	}
	100% { 
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes highlight_new {
	0% { 
		color: #f00;
	}
	100% { 
		color: #aaa;
	}
}
@keyframes highlight_new_borders {
	0% { 
		border-color: #f00;
	}
	100% { 
		border-color: #ddd;
	}
}
@keyframes highlight_edited {
	0% { background: red;	}
	100% { background: none; }
}
.fresh_event a {
	animation: highlight_new 5s;
	animation-iteration-count: 1;
}
.edited_event {
	animation: highlight_edited 10s;
	animation-iteration-count: 1;
}

#live-article-timeline-list li:nth-child(n+11) {
	display: none;
}

/* Administrraton page timeline position to avoid admin-menu */
.user-logged-in #live-article-timeline-list {
	top: 85px;
}
#timeline_dock_link {
	padding: 10px;
}
.affix #timeline_dock_link i.unpinned {
	 transform: rotate(0deg);
}
#timeline_dock_link i.unpinned {
	transform: rotate(30deg);
	font-size: 20px;
}
#live-article-feed-header {
	height: 40px;
}

@media (max-width: 991px) {
    #live-article-timeline-list.affix {
        position: static;
    }
}