center img {vertical-align:middle;max-width:100%;}
.r {text-align:right}
.err {color:red;text-align:right}
.q-page {border:1px solid #eee;padding:0px 50px;overflow:hidden;margin-bottom:100px;display:none;}
.q-txt  {padding:10px 0;font-size:22px;}
.q-item {padding:3px 20px;}
.q-quest {font-size:22px;padding-bottom:5px;}
.q-area {width:100%;height:100px; border:1px solid #ccc;}
.q-input {border:1px solid #ccc; width:100%;}
.q-hr   {width:50%;height:2px; color:#ccc;border:1px solid #ccc;margin-left:25%;margin-top:10px;margin-bottom:10px;}
.q-mid   {font-size:18px;}
.q-small {font-size:16px;padding:0px 20px;}
.q-err {color:red;}

.q-form > div {overflow:hidden; width:100%;margin-bottom:15px;}
.q-form .q-item {float:left;width:50%;padding:4px 20px;}
.q-form .q-input {width:100%;}

.q-form .ui-slider {}
.q-form .ui-slider-horizontal .ui-slider-range  {background-color:#3F98F7;}
.q-form .ui-slider-horizontal .ui-slider-handle {background-color:#3F98F7; color:white;
	width: 44px;
	height: 22px;
	top: 50%;
	margin-top: -10px;
    margin-left:-25px;
	text-align: center;
	line-height: 24px;
	outline: none;
    font-weight:450;
}
.soc img{height:30px;margin: 0 20px;}

.q-progress {
    width:100%;height:10px;
    margin:0;padding:0;
    border:0;
    background-color:#dfd;
}
.q-page .q-progress {margin:0 -50px;width:calc(100% + 100px);}
.q-progress div{
    width:0%;height:10px;
    margin:0;padding:0;
    border:0;
    background-color:green;
    }
.q-digit{
    width:60px;
    left:50%; margin-left:-30px;
}
.q-digit div {font-size:30px;color:#3F98F7}
.q-pointer {
    float:left;
    height:15px; width:auto;
    border:0;
    margin-right:5px;
    margin-top:5px;
}
.q-item-s {cursor:pointer;}
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .*/
.submit-button {
    background-color: #3F98F7;
    background-image: -moz-linear-gradient(center top, #B6D3F4, #3F98F7) !important;
    border: 1px solid #9AC9FF !important;
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0 2px 2px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);
    color: white !important;
    display: inline-block;
    font: 600 24px "Lucida Grande", Sans-Serif;
    padding: 10px 20px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 30px 2px 20px 2px;
}

.submit-button:hover {
    box-shadow: 0 5px 10px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);
}

.submit-button:active {
    box-shadow: 0 2px 6px white inset, 0 1px 1px rgba(0, 0, 0, 0.6);
    top: 2px;
}
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .*/
.qq-uploader .qq-upload-button {
    background-color: #3F98F7;
    background-image: -moz-linear-gradient(center top, #B6D3F4, #3F98F7) !important;
    border: 1px solid #9AC9FF !important;
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0 2px 2px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);
    color: white !important;
    display: inline-block;
    font: 600 24px "Lucida Grande", Sans-Serif;
    padding: 10px 20px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
    margin: 30px 2px 20px 2px;
    width:200px;
}

.qq-uploader .qq-upload-button:hover {
    box-shadow: 0 5px 10px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);
}

.qq-uploader .qq-upload-button:active {
    box-shadow: 0 2px 6px white inset, 0 1px 1px rgba(0, 0, 0, 0.6);
    top: 2px;
}
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .*/

@media (max-width: 800px) {
    .q-txt,.q-quest  {padding:7px 0;font-size:18px;line-height:120%;}
    .q-mid,.q-item   {font-size:16px;line-height:100%;}
    .q-small {font-size:14px;padding:0px 20px;line-height:80%;}
    .q-page {padding:0;border:0px solid #fff;}
    .q-page .q-progress {margin:0;width:100%;}
    .q-form .q-item {float:left;width:100%;}
    input[type=checkbox],input[type=radio] {float:left;margin:2px 5px 5px 0;}
    center img {vertical-align:middle;max-width:50%;}
}