.tanldTimeline, .tanldTimeline input, .tanldTimeline, textarea{
	/*font-family : 'Open Sans';*/
}
/********** Normal Styles ***************/

.tanldTimeline{
	/*width : 700px;*/
	width : 100%;
	margin : 10px auto;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
}

/********** Style for the month year bar ***************/

.tanldTimeline .month-year-bar{
	background-color : #cc4d4d;
	display : table;
	width : 100%;
	color : #ffffff;
	font-size : 25px;
	font-weight : 300;
	padding : 8px;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor : default;
}

.tanldTimeline .month-year-bar .prev, 
.tanldTimeline .month-year-bar .next{
	padding :  0 12px;
	font-size : 30px !important;
	cursor : pointer;
	text-decoration: none !important;
	color: #ffffff;
}

.tanldTimeline .month-year-bar .year{
	float : left;
}

.tanldTimeline .month-year-bar .month{
	float : right;
}

/********** Style for the bar containing dates ***************/

.tanldTimeline .dates-bar{
	border : solid 1px #e7e7e7;
	display : block;
	width : 100%;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
	padding : 0 50px;
	position : relative;
	font-size : 0;
	white-space : nowrap;
	overflow : hidden;
		-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height:70px;
}

.tanldTimeline .dates-bar a{
	display: block;
	height: 70px;
	width: 70px;
	color : #a2a2a2;
	text-align : center;
	display : inline-block;
	border-right : 1px solid #E7E7E7;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	cursor : pointer;
	transition : color .2s, transform .2s;
	-webkit-transition : color .2s, transform .2s;
	-moz-transition : color .2s, transform .2s;
	z-index : 0;
	overflow: hidden;
	text-decoration: none !important;
}

.tanldTimeline .dates-bar a:hover{
	color : #686666;
	text-decoration: none !important;
}

.tanldTimeline .dates-bar a span{
	transition : color .2s, transform .2s;
	-webkit-transition : color .2s, -webkit-transform .2s;
	-moz-transition : color .2s, -moz-transform .2s;
}

.tanldTimeline .dates-bar a.noevent{
	display : none;
	width : 100%;
	color: #7B7B7B;
    font-size: 19px;
    line-height: 70px;
	border: none;
}

.tanldTimeline .dates-bar a.selected{
	color : #696969;
}

.tanldTimeline .dates-bar a.selected>span.date{
	transform : scale(1.2, 1.2);
	-moz-transform : scale(1.2, 1.2);
	-webkit-transform : scale(1.2, 1.2);
}

.tanldTimeline .dates-bar a.prev,
.tanldTimeline .dates-bar a.next{
	position : absolute;
	top : 0;
	width : 50px;
	min-width : 0;
	font-size : 20px;
	background-color : white;
	font-size : 30px;
	line-height : 70px;
	z-index : 2;
	display : inline-block;
}

.tanldTimeline .dates-bar a.next
{
	border-right: none;
}

.tanldTimeline .dates-bar .month span{
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.tanldTimeline .dates-bar a.prev{
	left : 0;
}
.tanldTimeline .dates-bar a.next{
	right : 0;
	border-left : solid 1px #e7e7e7;
}

.tanldTimeline .dates-bar a span.date{
	display : block;
	font-size : 30px;
	line-height: 40px;
}


.tanldTimeline .dates-bar a span.month{
	font-size : 13px;
}

/********** Whole style for timeline-wrap ***************/

.tanldTimeline .timeline-wrap{
	width : 100%;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	border : solid 1px #e7e7e7;
	border-top : 0;
}

.tanldTimeline .timeline-wrap .event{
	overflow : auto;
	border-bottom : solid 1px #e7e7e7;
	display: none;
}

.tanldTimeline .timeline-wrap .event.selected{
	display : block;
}

.tanldTimeline .timeline-wrap .event .date{
    color: #3F3F3F;
    display: block;
    font-size: 14px;
    padding: 0 15px 15px;
}

.tanldTimeline .timeline-wrap .event .date i{
	padding : 0 10px 0 0;
}

.tanldTimeline .timeline-wrap .event>div{
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	padding : 15px;
	width : 100%;
	display : table;
}

.tanldTimeline .timeline-wrap .event div.right{
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	padding : 15px;
	padding-right : 0;
}



.tanldTimeline .timeline-wrap .event div.layout1>div{
	float : left;
	width : 50%;
}

.tanldTimeline .timeline-wrap .event .layout1 div.left>img{
	width : 100%;
}

.tanldTimeline .timeline-wrap .event .layout1 div.right h3{
	text-align : center;
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

.tanldTimeline .timeline-wrap .event .layout1 div.right p{
	font-size : 13px;
	color : #707070;
	line-height : 21px;
}

.tanldTimeline .timeline-wrap .event div.layout2>div{
	float : left;
	width : 50%;
}

.tanldTimeline .timeline-wrap .event .layout2 div.right>img{
	width : 100%;
}

.tanldTimeline .timeline-wrap .event .layout2 div.right h3{
	text-align : center;
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

.tanldTimeline .timeline-wrap .event .layout2 div.right p{
	font-size : 13px;
	color : #707070;
	line-height : 21px;
}

.tanldTimeline .timeline-wrap .event h3{
	text-align : center;
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

.tanldTimeline .timeline-wrap .event p{
	font-size : 13px;
	color : #707070;
	line-height : 21px;
}

.tanldTimeline .timeline-wrap .event .layout3 img{
	width : 100%;
}
/* deepblue */
.deepblue .month-year-bar
{
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
    background-color: #6891E7;   
    background-image: -moz-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: -ms-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: -o-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#096BD2),color-stop(100%,#0053A6));
    background-image: -webkit-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: linear-gradient(to bottom,#096BD2 0,#0053A6 100%);   
	border: 1px solid #003E7C;	
	border-bottom: none;	
}

.deepblue .month-year-bar .prev,
.deepblue .month-year-bar .next
{
	color: white;
}

.deepblue .dates-bar,
.deepblue .dates-bar a,
.deepblue .dates-bar a.next,
.deepblue .timeline-wrap,
.deepblue .timeline-wrap .event
{
	border-color: #003E7C;
}

/* lightblue */
.lightblue .month-year-bar
{
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
    background-color: #6891E7;   
    background-image: -moz-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: -ms-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: -o-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#096BD2),color-stop(100%,#0053A6));
    background-image: -webkit-linear-gradient(top,#096BD2 0,#0053A6 100%);
    background-image: linear-gradient(to bottom,#096BD2 0,#0053A6 100%); 
	border: 1px solid #38A1BB;	
	border-bottom: none;	
}

.lightblue .month-year-bar .prev,
.lightblue .month-year-bar .next
{
	color: white;
}

.lightblue .dates-bar,
.lightblue .dates-bar a,
.lightblue .dates-bar a.next,
.lightblue .timeline-wrap,
.lightblue .timeline-wrap .event
{
	border-color: #38A1BB;
}

/* black */
.black .month-year-bar 
{
    color: #fff;
    text-shadow: 1px 1px 1px black;
    box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
    background-color: #555555;
    background: rgb(85,85,85);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiM1NTU1NTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiM2OTY5NjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(85,85,85,1) 39%, rgba(105,105,105,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,rgba(85,85,85,1)), color-stop(70%,rgba(105,105,105,1)));
    background: -webkit-linear-gradient(top, rgba(85,85,85,1) 39%,rgba(105,105,105,1) 70%);
    background: -o-linear-gradient(top, rgba(85,85,85,1) 39%,rgba(105,105,105,1) 70%);
    background: -ms-linear-gradient(top, rgba(85,85,85,1) 39%,rgba(105,105,105,1) 70%);
    background: linear-gradient(to bottom, rgba(85,85,85,1) 39%,rgba(105,105,105,1) 70%);
	border: 1px solid #444;	
	border-bottom: none;	
}

.black .month-year-bar .prev,
.black .month-year-bar .next
{
	color: #fff;
}

.black .dates-bar,
.black .dates-bar a,
.black .dates-bar a.next,
.black .timeline-wrap,
.black .timeline-wrap .event
{
	border-color: #444;
}

/* Crystal */
.crystal .month-year-bar 
{
     background-color: #f8f8f8; 
     color: #444;   
    background-color: rgb(255,255,255);
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);      
	border: 1px solid #b4b4b4;	
	border-bottom: none;
}

.crystal .month-year-bar .prev,
.crystal .month-year-bar .next
{
	color: #444;
}

.crystal .dates-bar,
.crystal .dates-bar a,
.crystal .dates-bar a.next,
.crystal .timeline-wrap,
.crystal .timeline-wrap .event
{
	border-color: #b4b4b4;
}

/* Silver */
.silver .month-year-bar 
{
	color:#444;
    text-shadow: 0 1px white;
    background-color: #F2F0F0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDFCFC), to(#F2F0F0), color-stop(0.5, #FBF9F9), color-stop(0.5, #F7F5F6));
    background-image: -moz-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    background-image: -o-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    background-image: -ms-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
    background-image: -webkit-linear-gradient(top, #FDFCFC, #FBF9F9 50%, #F7F5F6 50%, #F2F0F0);
	border: 1px solid #E7E7E7;	
	border-bottom: none;
	border: 1px solid #CECECE;	
	border-bottom: none;
}

.silver .month-year-bar .prev,
.silver .month-year-bar .next
{
	color: #444;
}

.silver .dates-bar,
.silver .dates-bar a,
.silver .dates-bar a.next,
.silver .timeline-wrap,
.silver .timeline-wrap .event
{
	border-color: #CECECE;
}

/* Gray */
.gray .month-year-bar 
{
	background-color: #f8f8f8;        
    background-image: -moz-linear-gradient(top,  #dbdbdb 0%, #f2f2f2 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#f2f2f2));
    background-image: -webkit-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%);
    background-image: -o-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%);
    background-image: -ms-linear-gradient(top,  #dbdbdb 0%,#f2f2f2 100%);
    background-image: linear-gradient(to bottom,  #dbdbdb 0%,#f2f2f2 100%);
    color: #444;
	border: 1px solid #b4b4b4;	
	border-bottom: none;
}

.gray .month-year-bar .prev,
.gray .month-year-bar .next
{
	color: #444;
}

.gray .dates-bar,
.gray .dates-bar a,
.gray .dates-bar a.next,
.gray .timeline-wrap,
.gray .timeline-wrap .event
{
	border-color: #b4b4b4;
}

/* white */
.white .month-year-bar 
{
	color:#333;
	text-shadow: 0 1px white;
	background-color: #fff;
	border: 1px solid #CECECE;	
	border-bottom: none;
}

.white .month-year-bar .prev,
.white .month-year-bar .next
{
	color: #333;
}

.white .dates-bar,
.white .dates-bar a,
.white .dates-bar a.next,
.white .timeline-wrap,
.white .timeline-wrap .event
{
	border-color: #CECECE;
}

/* Blue */
.blue .month-year-bar 
{
	background-color: #2AA4CF;
	box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
	border: 1px solid #248CB1;	
	border-bottom: none;
}

.blue .month-year-bar .prev,
.blue .month-year-bar .next
{
	color: #fff;
}

.blue .dates-bar,
.blue .dates-bar a,
.blue .dates-bar a.next,
.blue .timeline-wrap,
.blue .timeline-wrap .event
{
	border-color: #248CB1;
}

/* Donald */
.donald .month-year-bar 
{
	background-color: #6fb500;
	box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
	border: 2px solid #5c7e27;	
	border-bottom: none;
}

.donald .month-year-bar .prev,
.donald .month-year-bar .next
{
	color: #fff;
}

.donald .dates-bar,
.donald .dates-bar a,
.donald .dates-bar a.next,
.donald .timeline-wrap,
.donald .timeline-wrap .event
{
	border-color: #5c7e27;
}

/* green */
.green .month-year-bar 
{
	background-color: #00c08b;
	box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
	border: 1px solid #009B70;	
	border-bottom: none;
}

.green .month-year-bar .prev,
.green .month-year-bar .next
{
	color: #fff;
}

.green .dates-bar,
.green .dates-bar a,
.green .dates-bar a.next,
.green .timeline-wrap,
.green .timeline-wrap .event
{
	border-color: #009B70;
}

/* Red */
.red .month-year-bar 
{
	background-color: #E44848;
	box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
	border: 1px solid #C72C2C;	
	border-bottom: none;
}

.red .month-year-bar .prev,
.red .month-year-bar .next
{
	color: #fff;
}

.red .dates-bar,
.red .dates-bar a,
.red .dates-bar a.next,
.red .timeline-wrap,
.red .timeline-wrap .event
{
	border-color: #C72C2C;
}

/* Yellow */
.yellow .month-year-bar 
{
	background-color: #f8c54d;
	box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
	border: 1px solid #C7941F;	
	border-bottom: none;
}

.yellow .month-year-bar .prev,
.yellow .month-year-bar .next
{
	color: #fff;
}

.yellow .dates-bar,
.yellow .dates-bar a,
.yellow .dates-bar a.next,
.yellow .timeline-wrap,
.yellow .timeline-wrap .event
{
	border-color: #C7941F;
}

/* purple */
.purple .month-year-bar 
{
	background-color: #df6dc2;
	box-shadow: 5px 10px 100px rgba(100, 100, 100, 0.15) inset;
	border: 1px solid #B15299;	
	border-bottom: none;
}

.purple .month-year-bar .prev,
.purple .month-year-bar .next
{
	color: #fff;
}

.purple .dates-bar,
.purple .dates-bar a,
.purple .dates-bar a.next,
.purple .timeline-wrap,
.purple .timeline-wrap .event
{
	border-color: #B15299;
}

/* orange */
.orange .month-year-bar
{
	color: white;
    text-shadow: 0 1px #5E1902;
    background: #F2825B;
    background: -moz-linear-gradient(top, #F2825B 0%, #E55B2B 50%, #F07146 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2825B), color-stop(50%,#E55B2B), color-stop(100%,#F07146));
    background: -webkit-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: -o-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: -ms-linear-gradient(top, #F2825B 0%,#E55B2B 50%,#F07146 100%);
    background: linear-gradient(to bottom, #F2825B 0%,#E55B2B 50%,#F07146 100%);
	border: 1px solid #D64817;	
	border-bottom: none;	
}

.orange .month-year-bar .prev,
.orange .month-year-bar .next
{
	color: #fff;
}

.orange .dates-bar,
.orange .dates-bar a,
.orange .dates-bar a.next,
.orange .timeline-wrap,
.orange .timeline-wrap .event
{
	border-color: #D64817;
}

/* deepred */
.deepred .month-year-bar 
{
    color: #fff;
    text-shadow: 1px 1px 1px rgba(235, 184, 184, 0.25); 
    background-color: #C43646;
    background: -moz-linear-gradient(top, #EFC5CA 0%, #D24B5A 50%, #BA2737 51%, #F18E99 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFC5CA), color-stop(50%,#D24B5A), color-stop(51%,#BA2737), color-stop(100%,#F18E99));
    background: -webkit-linear-gradient(top, #DA6572 0%,#D24B5A 50%,#BA2737 51%,#D24B5A 100%);
    background: -o-linear-gradient(top, #EFC5CA 0%,#D24B5A 50%,#BA2737 51%,#F18E99 100%);
    background: -ms-linear-gradient(top, #EFC5CA 0%,#D24B5A 50%,#BA2737 51%,#F18E99 100%);
    background: linear-gradient(to bottom, #EFC5CA 0%,#D24B5A 50%,#BA2737 51%,#F18E99 100%); 
	border: 1px solid #BB2B3A;	
	border-bottom: none;	
}

.deepred .month-year-bar .prev,
.deepred .month-year-bar .next
{
	color: #fff;
}

.deepred .dates-bar,
.deepred .dates-bar a,
.deepred .dates-bar a.next,
.deepred .timeline-wrap,
.deepred .timeline-wrap .event
{
	border-color: #BB2B3A;
}
/********** Make it responsive ***************/



.tanldTimeline.s_screen .timeline-wrap .event div.layout1>div{
	float : none;
	width : 100%;
}


.tanldTimeline.s_screen .timeline-wrap .event div.layout2>div{
	float : none;
	width : 100%;
}

@media screen and (max-width:750px) {
	/*.tanldTimeline{
		width : 600px !important;
	}*/
}

@media screen and (max-width:639px) {

	/*.tanldTimeline{
		width : 498px !important;
	}*/
}

@media screen and (max-width:500px) {

	/*.tanldTimeline{
		width : 80% !important;
	}*/
}