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

.page
{
	max-width:95%;
	width:960px;
	margin:0 auto;
}
.demowrap
{
	border: 4px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	display:block;
}
.demowrap img
{
	width:100%;
}
.left
{
	width:50%;
	margin:0 auto;
}
.right
{
	width:55%;
	float:right;
	color:#333;
	text-shadow:1px 1px 0 #fff;
}
h1{
	color: #555;
	font-size:36px;
	line-height:36px;
	padding:20px 10px;
	border-bottom:1px #999 dashed;
	text-shadow:2px 1px 1px #fff;
	margin:20px 0;
}
h1 span
{
	font-size:15px;
	font-weight:normal;
	padding-left:20px;
}
h3
{
	margin:5px 0;
	padding:8px 0;
	border-bottom:1px solid #ddd;
}
h3 span
{
	color:#F30;
	font-weight:normal;
	font-size:14px;
	padding-left:10px;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
.info
{
	text-indent:1em;
}
.box
{
}

h2
{
	border-bottom:1px solid #aaa;
	padding:10px 0;
}

#option ul
{
	list-style:square;
	line-height:2em;
}
#option b
{
	color:#333;
	padding:0 5px;
	text-shadow:1px 1px 0 #fff;
	
}
#option i
{
	color:#F30;
	margin-left:5px;
}

@media (max-width:320px){
	.left{
		width:80%!important;
	}