@charset "utf-8";
/* CSS Document */

	
		@import url(http://fonts.googleapis.com/css?family=Lobster);
		@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight);
		
		body{margin:0; padding:0; color:#eee; background:#222 url(demo_files/mcs_demo_bg.jpg) no-repeat; font-family:Verdana,Geneva,sans-serif; font-size:13px; }
		a:link,a:visited,a:hover{color:#fff;}
		h1{font-family:"Yanone Kaffeesatz",Arial,sans-serif;}
		h2,h3,h4,.info{font-family:"Lobster",Georgia,serif;}
		h1{font-size:32px; line-height:34px; font-weight:normal; color:#fff; padding:10px 5px; margin:10px 0;}
		h2{font-size:22px; line-height:25px; font-weight:normal; color:#09C; margin:10px 0;}
		h3{font-size:26px; line-height:30px; font-weight:normal; color:#777; margin:10px 0;}
		h4{font-size:18px; font-weight:normal; color:#C30; margin:10px 0;}
		p{margin:0 0 20px 0;}
		hr{height:0; border:none; border-bottom:1px solid rgba(255,255,255,0.2); border-top:1px solid rgba(0,0,0,0.9); margin:20px 10px;}
		hr+h2{color:#999; margin:10px 20px;}
		.links,.demo_functions{margin:10px 0 0 10px;}
		.links a,.demo_functions a{display:inline-block; padding:2px 10px; margin:10px; background:#C30; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
		.links a:hover,.demo_functions a:hover{background:#de4816;}
		.wrapper{height:100%; width:900px; min-height:960px;}
		.content{ width:737px; height:600px; padding:30px; overflow:auto;background-color:rgba(81, 82, 82, 0.79); *background-color:#515252;}
		.content img{max-width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
		.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
		.content p:nth-child(3n+0){color:#c96;}
		.content_1,.content_2,.content_3{float:left;}
		.content_1{margin-top:140px; padding:0 5px; border-top:1px dashed rgba(255,255,255,0.15); border-bottom:1px dashed rgba(255,255,255,0.15);}
		.content_2{height:470px;padding-top:20px;}
		.content_3{height:220px; border:1px dashed #09C; padding:0 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
		.content_3 p:nth-child(3n+0){color:#09C;}
		.content_4{position:absolute; left:640px; border-bottom:1px solid #666; border-right:1px solid #666; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:#866c51; -webkit-box-shadow:inset 4px 4px 20px rgba(0,0,0,0.6); -moz-box-shadow:inset 4px 4px 20px rgba(0,0,0,0.6); box-shadow:inset 4px 4px 20px rgba(0,0,0,0.6); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0 15px;}
		.content_4 h3,.content_4 p,.content_4 p:nth-child(even),.content_4 p:nth-child(3n+0){color:#31231E; text-shadow:1px 1px 0 rgba(255,255,255,0.15);}
		.content_4 img{border-color:#31231E;}
		.content_5{width:590px; height:125px; padding:10px 0; overflow:auto; background:#888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; clear:both; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.95); -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.95); box-shadow:inset 0 0 25px rgba(0,0,0,0.95);}
		.content_5 h4{margin:0 0 10px 10px; color:#333;}
		.content_5 .images_container{width:1403px; overflow:hidden; min-height:80px;}
		.content_5 .images_container img,.content_6 .images_container img{display:block; float:left; margin:0 5px; border:none; padding:5px; background:rgba(0,0,0,0.3); -webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 10px rgba(0,0,0,0.2); box-shadow:1px 1px 10px rgba(0,0,0,0.2);}
		.content_5 .images_container img:first-child{margin-left:10px;}
		.content_5 .images_container img:last-child{margin-right:10px;}
		.content_6,.content_7{position:relative; margin:20px auto; width:100%; height:110px; overflow:auto; background:#333; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
		.content_6.toggle_width{width:70%;}
		.content_6 .images_container{overflow:hidden;}
		.content_6 .images_container img{max-width:none;} /* stupid ie8 */
		.content_6 .images_container img:first-child{margin-left:0;}
		.content_6 .images_container img:last-child{margin-right:0;}
		.content_6 .images_container img.new{background:#de4816;}
		#mcs_t_5{background:#e7be00;}
		.content_7{height:500px; padding:20px; background:#362f2d;}
		.content form{margin-bottom:20px;}
		.content form input{color:#eee; border:none; background:rgba(0,0,0,0.2); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; margin-bottom:10px; padding:0 5px; height:25px; width:180px; -webkit-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); -moz-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4);}
		.content form input:focus{background:rgba(0,0,0,0.3);}
		.key{display:inline-block; background:rgba(255,255,255,0.15); padding:0 2px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
		.content_8{background:#333; height:400px;}
		.callback_demo{margin:0 20px 20px 20px; color:#ccc;}
		.callback_demo .callback_demo_output{color:#fff;}
		.info{position:absolute; margin:20px 0 40px 40px; width:260px; height:100px; color:#ccc; font-size:18px; padding:5px;}
		.info span:first-child{color:#09C;}
		.info span:last-child{font-size:34px; line-height:38px;}