body{
 margin:0;
 padding:0;
 color:#333;
 font:14px/1.5 Microsoft YaHei,tahoma,Arial;
 background:#fec43a;
}

input[type=radio]{
 -webkit-appearance:none;
 border:none;
 background:transparent;

 display:inline-block;
 vertical-align:middle;
 width:18px;
 height:18px;

 position:relative;
 cursor:pointer;
}

input[type=radio]:focus{
 outline:none;
}

input[type=radio]:before,
input[type=radio]:after{
 content:' ';
 display:block;
 position:absolute;
 border-radius:50%;
}

input[type=radio]:before{
 left:0;
 right:0;
 top:0;
 bottom:0;
 border:solid 2px #fec43a;
 background-color:#fff;
}

input[type=radio]:after{
 display:none;
 left:20%;
 right:20%;
 top:20%;
 bottom:20%;
 background-color:#fec43a;
}

input[type=radio]:checked:after{
 display:block;
}

.top{
 background:url("img/bg1.png");
 width:100%;
 height:15px;
}

.head{
 width:80%;
 margin:0 auto;
 display:block;
}

.text{
 font-size:14px;
 color:#75350a;
 text-align:center;
 width:80%;
 margin:1em auto;
 font-weight:normal;
}

.content{
 background:#ffffff url("img/shadow.png") repeat-x;
 width:90%;
 margin:0 auto;
}

.bottom{
 background:url("img/bottom.png") repeat-x;
 width:100%;
 height:5px;
 margin-top:2em;
}

.container .progress{
 background:url("img/progress-bg.png") repeat-x;
 width:95%;
 height:12px;
 margin:2em auto 0 auto;
 border-radius:6px;
 position:relative;
}

.container .rate{
 position:absolute;
 top:0;
 left:0;
 background:url("img/progress.png") repeat-x;
 border-radius:5px;
 height:12px;
 width:30px;
}

.container #currentRate{
 position:absolute;
 top:-23px;
 left:0;
 color:#db3434;
 font-size:10px;
 background:#fff999;
 border:1px solid #efa800;
 border-radius:6px;
 padding:0 8px;
}

.container .trangle{
 position:absolute;
 top:-7px;
 left:10px;
 border:5px solid transparent;
 border-top:5px solid #fff999;
}

.container .content .title{
 width:95%;
 text-align:center;
 margin:0 auto;
 font-size:14px;
 font-weight:bold;
 color:#5c2500;
}

.container .content span{

 margin:10px auto;
 padding-top:1em;
 text-align:center;
 display:inline-block;
}

.container .content #answer{
 border-bottom:2px dashed #cebc91;
 padding-bottom:3px;
}

.container .content .row{
 width:80%;
 margin:0 auto 10px auto;
 font-size:16px;
}

.container .content label{
 color:#3f3f3f;
 cursor:pointer;
 vertical-align:middle;
}

.container #result{
 background:url("img/bg2.png") repeat-x;
 width:95%;
 margin:3em auto 0 auto;
 height:10px;
 border-radius:10px;
 margin-bottom:-5px;
 display:none;
}

#showPannel h1{
 width:80%;
 padding:1em;
 border-bottom:2px dashed #cebc91;
 color:#5c2500;
 font-size:16px;
 margin:0 auto;
 text-align:center;
 font-weight:normal;
}

#showPannel em{
 color:#db3434;
 font-style:normal;
}

#showPannel p{
 color:#75350a;
 font-size:14px;
 width:80%;
 margin:0 auto;
 padding:1em 0;
}

.btn{
 background:#db3434;
 border:transparent;
 border-bottom:3px solid #a81e1e;
 border-radius:5px;
 color:#ffffff;
 font:19px Microsoft YaHei;
 text-align:center;
 margin:1em auto;
 width:50%;
 padding:10px 0;
 display:block;
 outline:none;
 cursor:pointer;
}

#playAgain{
 display:none;
 text-align:center;
}
#playAgain .btn{
 display:inline-block;
 width:42%;
}
#playAgain .reset{
 margin-right:1%;
}

.logo{
 margin:1em auto;
 display:block;
 text-align:center;
 font-size:20px;
}
.logo img{
 width:50%;
}
.logo,
.logo:visited{
 color:#da3434;
}

#share{
 display:none;
 position:fixed;
 top:0;
 left:0;
 z-index:99;
 background:rgba(0,0,0,0.6);
 width:100%;
 height:100%;
}

#share img{
 position:absolute;
 top:0;
 right:5%;
}

#share h4{
 color:#ffffff;
 font-size:16px;
 font-weight:normal;
 text-align:center;
 width:100%;
 height:100%;
 position:absolute;
 top:50%;
 left:0;
}

.link{
 display:none;
}