@charset "utf-8";


#situationTxtDiv{
	position:static;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	width:auto;
	background-color:inherit;
	border-top:1px solid #333;
}

#dialogText{
	margin:0;
	width:100%;
}
#practiceCtlButtons{
	display:inline-block;
}

#allSoundPlay, #videoPause, .videoPause{
	display:none;
}
.lineDiv{
	padding: 0 0 0 5px;
}
.stsDiv{
	padding:0 0 1em 0;
	text-align: right;
	display:table;
	width:100%;
}
.answerText{
	display:table-cell;
	vertical-align:top;
	text-align:left;
	width:40%;
}
.answerAndCheck{
	display:teble-cell;
}
span.correct{
	display:inline-block;
	text-align:left;
}
.stsDiv .answerHide,
.stsDiv span,
.stsDiv .answerCheck,
.stsDiv .answerView{
	vertical-align:top;
}

.stsDiv textarea{
	margin: 0 0 0 0.5em;
	width:100%;
}

.lineImg{
	width:30px;
}
.answerCheckerBtns{
	display:inline-block;
}
span.answerState{
  cursor:auto;
  margin: 0 4px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  display:inline-block;
  width:50px;
  text-align:center;
}

span.stateUnfinished {
  background: #c5c6c7;
  background-image: -webkit-linear-gradient(top, #c5c6c7, #9c9c9e);
  background-image: -moz-linear-gradient(top, #c5c6c7, #9c9c9e);
  background-image: -ms-linear-gradient(top, #c5c6c7, #9c9c9e);
  background-image: -o-linear-gradient(top, #c5c6c7, #9c9c9e);
  background-image: linear-gradient(to bottom, #c5c6c7, #9c9c9e);
}

span.stateCorrect{
  background: #009dff;
  background-image: -webkit-linear-gradient(top, #009dff, #2b72ff);
  background-image: -moz-linear-gradient(top, #009dff, #2b72ff);
  background-image: -ms-linear-gradient(top, #009dff, #2b72ff);
  background-image: -o-linear-gradient(top, #009dff, #2b72ff);
  background-image: linear-gradient(to bottom, #009dff, #2b72ff);
}

span.stateWrong{
  background: #ff1a00;
  background-image: -webkit-linear-gradient(top, #ff1a00, #ff7b29);
  background-image: -moz-linear-gradient(top, #ff1a00, #ff7b29);
  background-image: -ms-linear-gradient(top, #ff1a00, #ff7b29);
  background-image: -o-linear-gradient(top, #ff1a00, #ff7b29);
  background-image: linear-gradient(to bottom, #ff1a00, #ff7b29);
}

input.answerHideCheck,
.answerHide,
input.answerViewCheck,
.answerCheck,
.speaker{
	display:none;
}

input.answerViewCheck,
input.answerViewAllCheck
{
	display:none;
}

input.answerViewCheck + .answerView,
input.answerViewAllCheck + .answerViewAll
 {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 6px 10px 6px 10px;
  border: solid #1f628d 1px;
  text-decoration: none;
  margin: 0 4px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  font-weight:bold;
  display:inline-block;
}

input.answerViewCheck:checked + .answerView,
input.answerViewAllCheck:checked + .answerViewAll{

  background: #4da7de;
  background-image: -webkit-linear-gradient(top, #4da7de, #4ba6e3);
  background-image: -moz-linear-gradient(top, #4da7de, #4ba6e3);
  background-image: -ms-linear-gradient(top, #4da7de, #4ba6e3);
  background-image: -o-linear-gradient(top, #4da7de, #4ba6e3);
  background-image: linear-gradient(to bottom, #4da7de, #4ba6e3);
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 6px 10px 6px 10px;
  border: solid #1f628d 1px;
  text-decoration: none;
  margin: 0 4px;
  border:inset 1px #2980b9;
  -webkit-box-shadow: 0;
  -moz-box-shadow: 0;
  box-shadow: 0;
}


@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 640px) {
}
