/* common */
#ex{
	width: 500px;
	padding: .75em 0 .75em;
	border-radius: 6px;
	background: #333;
	text-align: center;
	margin: 0 0 20px;
}

#ex-back {
	width: 450px;
	border-radius: 6px;
	background: #333;
	padding: 1em;
	margin: 0 0 1em;
}

.mod-button{
	border-radius: 6px;
	font-size: 1.2em;
	padding: .2em .5em;
	cursor: pointer;
	background: #ccc;
}

#sample{
	display: inline-block;
}
/* for demo1 */

#ex1-1 {
	font-size: 2em;
	margin: 0 0 .25em;
	padding: 0 2em 0;
	color: #fff;
	display: inline-block;
}

/* for demo4 */
.ex4-1{
	margin: 0 0 .5em;
	border: 3px solid white;
	border-radius: 6px;
	font-weight: bold;
	display: inline-block;
	padding: .5em 2em .5em;
	color: #fff;
}
#ex4-buttons{
	font-size: .9em;
}

/* for demo5 */
.ex5-1{
	margin: 0 0 .5em;
	border: 3px solid white;
	border-radius: 6px;
	font-weight: bold;
	padding: .5em 2em .5em;
	color: #fff;
}
/* for demo6 */
pre{
	font-size: 2em;
	line-height: 1.4;
	background: #999;
	margin: 0 0 .75em;
	border-radius: 6px;
	padding: .6em .8em .7em;
	width: 550px;
	text-align: left;
	text-shadow: none;
	word-break: break-all;
	box-sizing: border-box;
}
pre strong{
	color: blue;
}
pre em{
	color: red;
}
pre span{
	color: green;
}
/* for demo7 */
ul{
	text-align: center;
	list-style: none;
}
/* for demo10,11,12*/
#box{
	text-align: center;
	padding: .5em 1em;
	margin: .5em auto;
	background: blue;
	font-size: 1.5em;
	color: white;
}

/* for demo12 */
#ex12{
	width: 450px;
	border: 1px solid #000;
	padding: 1em;
	margin: 0 0 1em;
	overflow: hidden;
}

/*for demo16*/

#box16{
	text-align: center;
	border-radius: 5px;
	padding: .5em 1em;
	margin: 0 auto;
	font-size: 1em;
}

/* for demo17 */
#frame-17{
	text-align: center;
	padding: .5em 1em;
	margin: 0 auto;
	background: white;
	font-size: 2em;
}

/* for demo18 */

#slide-box{
	text-align: center;
	padding: .5em 1em;
	margin: 0 auto;
	background: white;
	font-size: 2em;
	color: #000;
}

/* for demo19 */

#frame-18{
	height: 285px;
	text-align: center;
	padding: .5em 1em;
	margin: 0 auto;
	background: white;
}

#anim-box{
	position: absolute;
	left: 40px;
	top: 80px;
	width: 100px;
	height: 100px;
	color: white;
	background: #000;
}

/* for demo22 */

#click-box{
	margin: 10px auto;
	width: 400px;
	height: 100px;
	background: blue;
	color: white;
	cursor: pointer;
}

/* for demo23 */

#mouseenter-box{
	margin: 10px auto;
	width: 400px;
	height: 100px;
	background: blue;
	color: white;
}

/* for demo24 */

#mouseleave-box{
	margin: 10px auto;
	width: 400px;
	height: 100px;
	background: blue;
	color: white;
}

/* for demo25 */

#input{
	width: 300px;
	margin: 
	border: 3px solid #999;
	font-size: 1em;
}
/* for demo27 */

#ex27{
	width: 450px;
	background: #333;
	padding: 1em;
	margin: 0 0 1em;
	overflow: hidden;
}
#frame-27{
	height: 135px;
	text-align: center;
	padding: .5em 1em;
	margin: 0 auto;
	background: white;
}