@charset "utf-8";

.balance { background: #fffd93; }

.game_board { margin-bottom: 5px; padding: 5px; border: 1px solid #e2dd4a; background: #fff; }
.game_board_inner { width: 280px; height: 280px; margin: 0 auto; }

.machine { position:relative; }
.machine ul { position:relative; list-style-type:none; width:90px; height:180px; }
.machine li { position:absolute; left:25px; top:138px; list-style-type:none; cursor:pointer; margin:4px; }
.machine li:hover { margin-bottom:8px; }
.machine li span { position:relative; display:inline-block; *display:inline; *zoom:1; width:20px; height:20px; padding-top:2px; font-size:14px; font-weight:bold; color:#fff; text-align:center; background:#af8100; }
.machine li span:before { position:absolute; left:5px; top:-5px; content:''; width:10px; height:5px; background:#725200; }
.machine li span:after { position:absolute; left:2px; top:-10px; content:''; width:16px; height:5px; background:#916801; }

.needle { display:none; z-index:104; position:absolute; }
.plate_left { display:none; z-index:102; position:absolute; width:90px; height:180px; background:url(/_template_data/img/balance/plate_left.png) no-repeat; }
.plate_right { display:none; z-index:102; position:absolute; width:90px; height:180px; background:url(/_template_data/img/balance/plate_right.png) no-repeat; }
.pole { display:none; z-index:103; position:absolute; }
.pole img { width: 200px; }
.prop { display:none; z-index:101; position:absolute; }
.prop img { width: 84px; }

.weight_c { z-index:101; position:absolute; left:0px; bottom:0px; }
.weight_c .inner { position:relative;  width:330px; height:30px; padding:20px 10px 10px 10px; border:1px solid #ccc; background:#fff; }
.weight ul { position:absolute; left:10px; bottom:0px; width:100%; padding-top:26px; border:none; }
.weight li { display:inline-block; *display:inline; *zoom:1; cursor:pointer; margin:4px; vertical-align:bottom; }
.weight li:hover { margin-bottom:8px; }
.weight li span { position:relative; display:inline-block; *display:inline; *zoom:1; width:20px; height:20px; padding-top:2px; font-size:14px; font-weight:bold; color:#fff; text-align:center; background:#af8100; }
.weight li span:before { position:absolute; left:5px; top:-5px; content:''; width:10px; height:5px; background:#725200; }
.weight li span:after { position:absolute; left:2px; top:-10px; content:''; width:16px; height:5px; background:#916801; }

/*-- 重り(共通) --*/
.weight_item { display: inline-block; margin: 4px; padding: 15px 10px 5px 10px; vertical-align: bottom; border-radius: 4px; }
.weight_item.mode_s { background: #f8f411; }
.weight_item span { position: relative; display: inline-block; width: 20px; height: 20px; padding-top: 2px; font-size: 14px; font-weight: bold; color: #fff; text-align: center; background: #af8100; }
.weight_item span:before { position: absolute; left: 5px; top: -5px; content: ''; width: 10px; height: 5px; background: #725200; }
.weight_item span:after { position: absolute; left: 2px; top: -10px; content: ''; width: 16px; height: 5px; background: #916801; }

/*-- 重り(選択肢) --*/
#weight_list { margin-bottom: 5px; padding: 5px; text-align: center; border: 1px solid #e2dd4a; background: #fff; }
#weight_list .weight_item { cursor: pointer; }

/*-- 重り(皿上) --*/
.plate_right_inner { position: relative; height: 100%; }
.plate_right_inner .weight_item { position: absolute; }

.message { z-index:100; position:absolute; right:-2px; bottom:58px; }

.free { padding:10px 10px 0px 10px; border:1px solid #ccc; background:#fff; }
.free dl { margin-bottom:10px; }
.free dt { float:left; width:90px; margin:0px 5px 0px 0px; padding:5px; color:#fff; line-height:1.5; text-align:center; border-radius:4px; background:#1564a7; }
.free dd { float:left; width:210px;padding:5px; line-height:1.5; font-size:16px; line-height:1.5; }

.control { display:none; width:740px; margin:0px auto; margin-bottom:5px; padding:20px 0px 0px 0px; }
.control .info { position:relative; margin-bottom:10px; }
.control .num { float:left; }
.control .num li { display:inline-block; *display:inline; *zoom:1; cursor:pointer; width:45px; height:40px; margin-right:5px; padding:5px 0px 0px 0px; font-size:24px; color:#fff; text-align:center; border-radius:6px; border:1px solid #ccc; background:#1564a7; }
.control .num li:hover { background:#247fc9; }
.control .mark { float:left; width:0px; height:0px; margin:10px 15px 0px 20px; border:14px solid transparent; border-left:14px solid #1564a7; }
.control .answer { position:relative; float:left; }
.control .answer:before { position:absolute; right:-20px; bottom:0px; content:'g'; font-size:20px; }
.control .answer li { display:inline-block; *display:inline; *zoom:1; width:45px; height:40px; margin-left:-1px; padding:5px 0px 0px 0px; font-size:24px; text-align:center; border:1px solid #ccc; background:#fff; vertical-align:bottom; }
.control_with { display:none; }