﻿/* stylesheet for demo and examples */

		.content, .content1, .content2,  .content3,  .content4,  .content5{
			overflow: auto;
			position: relative;
			padding: 0px;
			background: #eee;
			margin: 0px auto;
			width: 95%;
		}
		.content{
			height: 70px;
}
		.content1{
			height: 105px;
}
		.content2{
			height: 155px;
}
		.content3{
			height: 90px;
}

		.content4{
			height: 80px;
}

		.content5{
			height: 130px;
}

		.content li, .content5 li{ margin: 0 2px; }
		.content li a, .content5 li a{
			display: block;
		}
		
		#content-1, #content-2, #content-3, #content-4{
			padding: 0px 60px;
			background-color: transparent;
			width: 80%;
		}
			#content-5, #content-6, #content-7, #content-8{
			padding: 0px 60px;
			background-color: transparent;
			width: 80%;
		}

			#content-9, #content-10, #content-11, #content-12{
			padding: 0px 60px;
			background-color: transparent;
			width: 80%;
		}

		#content-1 .mTSButtonIcon, #content-2 .mTSButtonIcon{ fill: #aaa; }
		#content-1 .mTSButton .mTSButtonIcon, #content-2 .mTSButton .mTSButtonIcon{ opacity: .5; }
		#content-1 .mTSButton:hover .mTSButtonIcon, #content-2 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
		#content-1 .mTSContainer li p, #content-2 .mTSContainer li p{
			margin: 0;
			height: 100px;
			background-color: #000;
			padding: 0 px;
		}

		#content-3 .mTSButtonIcon, #content-4 .mTSButtonIcon{ fill: #aaa; }
		#content-3 .mTSButton .mTSButtonIcon, #content-4 .mTSButton .mTSButtonIcon{ opacity: .5; }
		#content-3 .mTSButton:hover .mTSButtonIcon, #content-4 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
		#content-3 .mTSContainer li p, #content-4 .mTSContainer li p{
			margin: 0;
			height: 100px;
			background-color: #000;
			padding: 0 px;
		}
		#content-5 .mTSButtonIcon, #content-6 .mTSButtonIcon{ fill: #aaa; }
		#content-5 .mTSButton .mTSButtonIcon, #content-6 .mTSButton .mTSButtonIcon{ opacity: .5; }
		#content-5 .mTSButton:hover .mTSButtonIcon, #content-6 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
		#content-5 .mTSContainer li p, #content-6 .mTSContainer li p{
			margin: 0;
			height: 100px;
			background-color: #000;
			padding: 0 px;
		}
		#content-7 .mTSButtonIcon, #content-8 .mTSButtonIcon{ fill: #aaa; }
		#content-7 .mTSButton .mTSButtonIcon, #content-8 .mTSButton .mTSButtonIcon{ opacity: .5; }
		#content-7 .mTSButton:hover .mTSButtonIcon, #content-8 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
		#content-7 .mTSContainer li p, #content-8 .mTSContainer li p{
			margin: 0;
			height: 100px;
			background-color: #000;
			padding: 0 px;
		}

		#content-9 .mTSButtonIcon, #content-10 .mTSButtonIcon{ fill: #aaa; }
		#content-9 .mTSButton .mTSButtonIcon, #content-10 .mTSButton .mTSButtonIcon{ opacity: .5; }
		#content-9 .mTSButton:hover .mTSButtonIcon, #content-10 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
		#content-9 .mTSContainer li p, #content-10 .mTSContainer li p{
			margin: 0;
			height: 100px;
			background-color: #000;
			padding: 0 px;
		}

		#content-11 .mTSButtonIcon, #content-12 .mTSButtonIcon{ fill: #aaa; }
		#content-11 .mTSButton .mTSButtonIcon, #content-12 .mTSButton .mTSButtonIcon{ opacity: .5; }
		#content-11 .mTSButton:hover .mTSButtonIcon, #content-12 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
		#content-11 .mTSContainer li p, #content-12 .mTSContainer li p{
			margin: 0;
			height: 100px;
			background-color: #000;
			padding: 0 px;
		}

/*------Responsive-----------*/
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
#content-1,
#content-2,
#content-3,
#content-4,
#content-5,
#content-6,
#content-7,
#content-8,
#content-9,
#content-10,
#content-11 {  width: 55%;}
}

.calens{
	position: relative;
	margin: 0 auto;
	width: 90%;
	padding: 0 0px;
    line-height: 0px;
	background-color: #242424;
	margin: 20px 10px;
	overflow: hidden;
}



.demo{
	position: relative;
	margin: 0 auto;
	width: 98%;
	padding: 0 0px;
 line-height: 0px;
}


#demo1{
	position: relative;
	margin: 0 auto;
	width: 98%;
	padding: 0 0px;
 line-height: 0px;
}


.title{
	display: inline-block;
	font-size: 32px;
	vertical-align: middle;
	margin-right: 40px;
	line-height: 24px;
}

.title{ margin-top: 5px; }

#info p{
	font-size: 12px;
	color: #bbb;
	padding: 6px 15px;
}

#info p a{
	margin: 0 5px;
}

#info .callbacks span{
	color: #242424;
}

.examples{
	background-color: #242424;
	padding: 0px;
	margin: 10px 0;
	overflow: hidden;
}

#examples1{
	background-color: #242424;
	padding: px;
	margin: 10px 0;
	overflow: hidden;
}


.examples.light{
	background-color: #242424;
}

.examples > hr{ margin: 20px 10px; }

