body
{
 text-align:justify;
 text-justify:distribute;
 font-weight:normal;
 line-height:1.5em;
 font-family: Arial, Meiryo, '繝｡繧､繝ｪ繧ｪ', 'Hiragino Kaku Gothic Pro', '繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3', sans-serif;
 font-size: 14px;
 user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
}

h3,h4{
 font-weight:normal;
}

label{
 font-weight: normal;
 text-shadow: 0px 1px 1px #fff;
}

#rsp {
 margin:1em auto;
 padding:.1em;
}

#tcateg {
 width: 100%;
}

.bar {
  display: block;
  border: 0;
  width: 100%;
  height: 15px;
  background: url(images/ko02_line.png) repeat top center;
}

#quiz  {
 background:#fbfbfd;
 -moz-border-radius:.8em;
 -webkit-border-radius:.8em;
 -khtml-border-radius:.8em;
 border-radius:.8em;
 padding:.3em;
}

#quiz h3 {
 margin:.2em auto;
 text-align:center;
}

#show_card  {
 background:#fbfbfd;
 -moz-border-radius:.8em;
 -webkit-border-radius:.8em;
 -khtml-border-radius:.8em;
 border-radius:.8em;
 padding:.3em;
}

#show_card h3 {
 margin:.2em auto;
 text-align:center;
}

#tquestion {
 margin:1em .5em 1em .5em;
}

#qnr {
 margin:0 2em 0 1.5em;
 padding:0;
 font-style:italic;
}

#qansw {
 margin:0 .1em;
 background:#f9f6f5#f5f0ee;
 -moz-border-radius:.6em;
 -webkit-border-radius:.6em;
 -khtml-border-radius:.6em;
 border-radius:.6em;
 padding:.2em .4em;
}

#sqansw {
 margin:0 .1em;
 background:#f9f6f5;
 -moz-border-radius:.6em;
 -webkit-border-radius:.6em;
 -khtml-border-radius:.6em;
 border-radius:.6em;
 padding:.2em .4em;
}

.qanswer {
 min-height: 2em;
 margin:1em;

 cursor:pointer;

 border:1px solid #25729a; -webkit-border-radius: .6em; -moz-border-radius: .6em;border-radius: .6em; padding: .2em; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:normal; color: #FFFFFF; background-color: #3093c7;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
 background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
 background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
 background-image: linear-gradient(to bottom, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.qanswer:before {
 content:""
}
.qanswer:hover {
 border:1px solid #1c5675; background-color: #26759e;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), top(#133d5b));
 background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
 background-image: -moz-linear-gradient(top, #26759e, #133d5b);
 background-image: -ms-linear-gradient(top, #26759e, #133d5b);
 background-image: -o-linear-gradient(top, #26759e, #133d5b);
 background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}
#nextq {
 height: 1em;
 width: 5em;
 margin:.2em;
 cursor:pointer;
 margin-left: 60%;
 text-align:center;
 border:1px solid #25729a; -webkit-border-radius: .6em; -moz-border-radius: .6em;border-radius: .6em; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:normal; color: #FFFFFF; background-color: #26759e;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), top(#133d5b));
 background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
 background-image: -moz-linear-gradient(top, #26759e, #133d5b);
 background-image: -ms-linear-gradient(top, #26759e, #133d5b);
 background-image: -o-linear-gradient(top, #26759e, #133d5b);
 background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);

}

#answered {
 background:#eeefef;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
 padding:.1em 0 .1em .1em;
}
#answered h4 {
 margin:.1em 0 0 1em;
}
#answered2 {
 min-height: 2em;
 background:#fbfcfc;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
 padding:.3em;
 margin-bottom: 1em;
}
#answered2 h4 {
 margin:.1em 0 0 1em;
}
#canswer {
 color:#0001fe;
 font-weight:normal;
 margin:.1em 0 0 1em;
}
#iansw {
 color:#fe0001;
 font-weight:normal;
}

#tfrom {
 margin:1em auto .3em auto;
 text-align:center;
}

#conf  {
 background:#f9f6f5;
 -moz-border-radius:.8em;
 -webkit-border-radius:.8em;
 -khtml-border-radius:.8em;
 border-radius:.8em;
 padding:.3em;
 margin:.3em;
}

.whitebtn {
 margin:.5em auto .5em auto;
 padding:.5em;
 background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6);
 background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
 border: 2px solid #DDD;
 color: #111;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
 -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
 width: 90%;
}

.bluebtn {
background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0099CC);
background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0099CC));
color: #FFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #0099CC;
-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
width: 100%;
padding: 8px 0;
}

#heading01{
	position:relative;
	margin:5px;
	padding:5px;
	font:bold 16px/1.6;
	text-align:left;
	color:#655;
	border-top:1px dashed #aaa;
	border-bottom:1px dashed #aaa;
	background:#eee;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:	0 5px 4px -4px rgba(0,0,0,0.3) inset;
}

#heading03 {
    position: relative;
    border-color: #eee;
    border-style: solid;
    border-width: 5px 0px 5px 0px;
    background: #fff;
    margin: 0 0 15px -15px;
    padding: 5px 15px;
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

#heading03:after
{
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    right: 15px;
    width: 70%;
    height: 10px;
    background: rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

#heading04{
	position:relative;
	margin:5px;
	padding:5px;
	font:bold 18px/1.6;
	color:#333;
	border:#333 solid 3px;
	border-radius:18px;
	background:#fff;
	box-shadow:
		-7px -5px 0 0 #e8e8e8 inset,
		2px 3px 0 0 #000;
}
#heading04:before{
	content:" ";
	position:absolute;
	top:100%;
	left:14px;
	width:0;
	height:0;
	border-width:20px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#333;
}
#heading04:after{
	content:" ";
	position:absolute;
	bottom:-27px;
	left:18px;
	width:0;
	height:0;
	border-width:14px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#e8e8e8;
}

.headline4{
    position: relative;
    border-color: #eee;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    background: #fff;
    margin: 0 0 15px -5px;
    padding: 5px 15px;
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.headline4:after
{
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    right: 15px;
    width: 70%;
    height: 10px;
    background: rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

#scoresub .ui-li-icon {
	max-width:40px;
	max-height:40px;
	top:8px;
}

.timer{
	text-align:center;
	width:100%;
	margin:20px auto 0;
	padding:10px 0;
	font-size:1.2em;
	color:#fff;
	text-shadow:1px 1px 1px #ccc;
	font-weight:700;
	line-height:30px;
	border:1px solid #ef007c;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ef007c), color-stop(0.00, #ff5db1));
	background: -webkit-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -moz-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -o-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: -ms-linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	background: linear-gradient(top, #ff5db1 0%, #ef007c 100%);
	shadow: 2px 2px 16px 7px #ddd, inset 0px 0px 1px 1px #f5add2; /* Safari, Chrome�ｽp */  
    -moz-box-shadow: 2px 2px 16px 7px #ddd, inset 0px 0px 1px 1px #f5add2; /* Firefox�ｽp */  
    box-shadow: 2px 2px 16px 7px #ddd, inset 0px 0px 1px 1px #f5add2; /* CSS3 */  
}

h4.komidasi {
 background: #fff;
 border-top:1px solid #ddd;
 border-right:1px solid #ddd;
 border-bottom:1px solid #ddd;
 border-left:5px solid #933;
 padding: 5px 0 5px 10px;
 background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit */
 margin: 0em 0em 0.5em 0em;
}

.ui-page {
 background:url(images/ko02_back.png);
}

.ui-btn-text {
    font-weight:normal;
    line-height:1.4em;
    font-family: Arial, Meiryo, '繝｡繧､繝ｪ繧ｪ', 'Hiragino Kaku Gothic Pro', '繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3', sans-serif;
    font-size: 1em;
}

.ui-controlgroup-controls
{
 width:100%;
}

.ui-grid-solo > .ui-block-a {
 margin: .5em 0em .5em 0em;
}

.ui-grid-a > .ui-block-a, .ui-block-b {
 margin: -.5em 0 0 0;
}

.ui-grid-b > .ui-block-a, .ui-block-b, .ui-block-c {
 margin: -.5em 0 0 0;
}


.containing-element .ui-slider-switch {
 width: 100%;
 margin: 0;
}

.myChart {
 width: 100%;
}

.center{
	text-align: center;
}

.feature-image{
	width: 50%;
}

.incorrect-image{
        margin: 1em;
	width: 80%;
}

@media screen and (max-width:480px)
{
	.feature-image{
		width: 100%;
	}

        .incorrect-image{
                margin: 1em;
                width: 90%;
        }
}

#qmradio .ui-radio {
 width:50%;
}

#red{
 color:red;
 background:red;
}

#red:hover{
color:black;
background-color:#fff;
}

#gmHeader{padding:4px 10px;margin:15px 0 8px 0;text-align:left;background:#3b414e;color:#e4f6ff;font-weight:bold;text-shadow:0 1px 0 #191c21;border-left:1px solid #191c24;border-top:1px solid #191c24;border-right:1px solid #191c24;border-bottom:1px solid #5a6787;background-image:-webkit-gradient(linear,left top,left bottom,from(#2a2e39),to(#3b414e));background-image:-webkit-linear-gradient(#2a2e39,#3b414e);background-image:-moz-linear-gradient(#2a2e39,#3b414e);background-image:-ms-linear-gradient(#2a2e39,#3b414e);background-image:-o-linear-gradient(#2a2e39,#3b414e);background-image:linear-gradient(#2a2e39,#3b414e);}
#gmHeaderA{float:left;position:relative;width:40%;}
#gmHeaderA img{position:absolute;left:5px;top:-26px;border:1px solid #8591b7;-moz-box-shadow:1px 1px 1px rgba(24,24,24,0.75);-webkit-box-shadow:1px 1px 1px rgba(24,24,24,0.75);}
#gmUsername{font-size:11px;display:block;margin-top:17px;padding-left:5px;}
#gmBubble{position:absolute;padding:2px 10px;top:4px;left:80px;color:#e4f6ff;background:#35383f;font-size:11px;font-weight:bold;text-shadow:none;z-index:1;display:none;}
#gmHeaderB{float:left;width:20%;}
#gmHeaderB span{font-size:11px;display:block;text-align:center;line-height:16px;}
#gmHeaderB span#nqansw {font-size:18px;color:#60c8e4;}
#gmHeaderB span#ntotalq {font-size:18px;color:#60c8e4;}
#gmHeaderC{float:left;width:20%;}
#gmHeaderC span{font-size:11px;display:block;text-align:center;line-height:16px;}
#gmHeaderC span#nca {font-size:18px;color:#60c8e4;}
#gmHeaderC span#nia {font-size:18px;color:#60c8e4;}
#gmHeaderD{float:left;width:20%;position:relative;}
#gmClockBox{background:url(images/clock_bg.png) no-repeat;width:51px;height:55px;position:absolute;right:0;top:-24px;}
#gmClock{display:block;color:#000;text-align:center;margin-top:20px;font-size:18px;text-shadow:0 1px 0 #c5f0fd;}