body { font:62.5% Arial, sans-serif; margin:0; background:rgba(0,0,0,0.05); }

h2 a { color: #000; text-decoration:none; }
div#panel { width:1024px; margin:0 auto; }
div#game-field { width:1024px; height:768px; background:url('../img/field_bg.png') no-repeat 0 0; font:bold 120% Arial, sans-serif; }

div.field { width:1024px; z-index:5; }
div#field-1 { height:488px; }
div#field-2 { height:444px; }

  div.task-box { width:530px; float:left; }
  div.task-box-type-1 { height:484px; }
  div.task-box-type-2 { height:440px; }

    /* see OBJ_ANS.CSS for TASK-BOX-[A]-[B] objects */

    div#task-item { height:50px; width:430px; margin:370px 0 0 0; }
    div#task-play { height:50px; width:50px; float:left; background:url('../img/task_play_1.png') no-repeat 50% 50%; }
      div#task-play a { display:block; width:100%; height:100%; padding:0; margin:0; }

  div#task-target-box { width:494px; float:left; }
  div.task-target-box-type-1 { height:484px; }
  div.task-target-box-type-2 { height:440px; }
    div.target-box { float:left; }

    div#target-box-horizontal-1-answer-3 { width:494px; height:400px; margin:40px 0 0 0; }
    div#target-box-horizontal-1-answer-3 div.target { width:370px; height:85px; margin:0 0 28px 100px; background:rgba(255,255,255,1); border:2px solid rgba(255,255,255,1); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
    div#target-box-horizontal-1-answer-3 div#target-1 { margin-top:18px; }
    div#target-box-horizontal-1-answer-3 div#target-2 {}
    div#target-box-horizontal-1-answer-3 div#target-3 {}

      div#target-1 div.object,
      div#target-2 div.object,
      div#target-3 div.object { margin:4px 0 0 50px !important; }

div.object-bar { width:1024px; padding:0; }
div#object-bar-1 { height:220px; width:1004px; padding:0 0 0 20px; background:url('../img/type_1_obj_bg.png') no-repeat 0 0; }
div#object-bar-2 { height:220px; width:986px; padding:44px 0 0 38px; background:url('../img/type_2_obj_bg.png') no-repeat 0 0; }

  div.object-3 { height:65px; width:286px; margin:0 30px 30px 0; float:left; z-index:10; background:#FFF no-repeat 0 0; border:5px solid #FFF; }
  
  div.item-name { height:65px; width:171px; padding:0 0 0 65px; float:left; font:bold 210%/270% Arial, sans-serif; text-align:center; }
  div.item-play { height:65px; width:50px; padding:0; float:left; }
    div.item-play a { display:block; width:50px; height:36px; padding:14px 0; margin:0; background: url("../img/task_play.png") no-repeat scroll 0 14px transparent; }
    div.item-play a:hover,
    div.item-play a:active { background:url('../img/task_play.png') no-repeat 0 -86px; }

  div.object-2, div.object-3 { border-radius:8px; }
  div#target-1, div#target-2, div#target-3 { border-radius:10px; }

div.object-hlp { border: 5px solid #5FD21B; }

.do-not-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

span.bg1 { color:#999; }
span.bg2 { color:#777; }

.disabled-item { z-index: 2 !important; }
.disabled-area { z-index: 1 !important; }

.answer3-good { background:rgba(180,223,91,0.9) !important; border: 2px solid rgba(0,138,0,0.9) !important; }
.answer3-drop-hover { background:rgba(255,250,205,0.9) !important; border: 2px solid rgba(255,140,0,0.9) !important; }
.answer3-bad { background:rgba(255,0,0,0.6) !important; border: 2px solid rgba(255,0,0,0.9) !important; }
.clr { clear: both; }