@charset "utf-8";

/* -------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
	SAKURA Channel for sakura games
	
	new released :  2012
	update : 

	Copyright(c)WEATHER NEWS INC. ALL RIGHT RESERVED.
----------------------------------------------------------------------------------------
------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
  CONTAINERS
------------------------------------------------------------------------------------- */
body#sakura-games{color:#141314;}
#sakura-games #games-gn{width:310px;margin:15px auto 0;/zoom:1;}#sakura-games #games-gn:after{clear:both;content:"";display:block;height:0;}
#sakura-games #games-gn p{float:left;margin-right:6px;}#sakura-games #games-gn p:last-child{margin-right:0;}
#sakura-games #games-gn img{width:98px;height:50px;}


#sakura-games .content-bg{margin-left:10px;margin-right:10px;padding:10px;background:rgba(255,255,255,.6);border:solid 1px #c155a0;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;}
#sakura-games .content-bg p.note{font-size:12px;line-height:100%;color:#d90000;}


/* -------------------------------------------------------------------------------------
  BADGE
------------------------------------------------------------------------------------- */
#sakura-games .game-badge{width:270px;margin:10px auto;background:url(../challenge/img/badge_bg.png)center 0 no-repeat;background-size:238px 238px;-webkit-background-size:238px 238px;-moz-background-size:238px 238px;-ms-background-size:238px 238px;-o-background-size:238px 238px;}
#sakura-games .game-badge>p{text-align:center;padding-top:27px;}
#sakura-games .game-badge>p img{width:175px;height:175px;}
#sakura-games .game-badge div.badge-btn{width:270px;height:190px;margin:0 auto;position:relative;}
#sakura-games .game-badge div.badge-btn p{position:absolute;}
#sakura-games .game-badge div.badge-btn p:first-child{top:10px;left:0;}
#sakura-games .game-badge div.badge-btn p:nth-child(2){top:40px;left:90px;}
#sakura-games .game-badge div.badge-btn p:nth-child(3){top:10px;right:0;}
#sakura-games .game-badge div.badge-btn p:nth-child(4){top:95px;left:20px;}
#sakura-games .game-badge div.badge-btn p:last-child{top:95px;right:20px;}
#sakura-games .game-badge div.badge-btn img{width:85px;height:85px;}


/* -------------------------------------------------------------------------------------
  BUTTONS
------------------------------------------------------------------------------------- */
ul.bt-pre{list-style:none;}
ul.bt-pre li.disabled{margin-bottom:3px;text-align:center;display:block;line-height:30px;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;border:solid 1px #8e8e8e;color:#f8f8f8;text-shadow:0 0 1px #fff;position:relative;
background:-webkit-gradient(linear,left top,left bottom,from(#bfbfbf),to(#969696));
background:-webkit-linear-gradient(top,#bfbfbf,#969696);
background:-moz-linear-gradient(top,#bfbfbf,#969696);
background:-ms-linear-gradient(top,#bfbfbf,#969696);
background:-o-linear-gradient(top,#bfbfbf,#969696);
background:linear-gradient(top,#bfbfbf,#969696);	
}
ul.bt-pre li.disabled:before{position:absolute;width:10px;height:10px;content:"";top:10px;left:10px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}
ul.bt-pre li.disabled:after{position:absolute;width:10px;height:10px;content:"";top:10px;right:10px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}
ul.bt-pre li a{text-align:center;display:block;line-height:30px;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;border:solid 1px #9c084d;color:#f8f8f8;text-shadow:0 0 1px #fff,0 1px 3px #000;box-shadow:rgba(0,0,0,.4)0 1px 2px;-webkit-box-shadow:rgba(0,0,0,.4)0 1px 2px;-moz-box-shadow:rgba(0,0,0,.4)0 1px 2px;position:relative;
background:-webkit-gradient(linear,left top,left bottom,from(#ec527a),to(#bc0343));
background:-webkit-linear-gradient(top,#ec527a,#bc0343);
background:-moz-linear-gradient(top,#ec527a,#bc0343);
background:-ms-linear-gradient(top,#ec527a,#bc0343);
background:-o-linear-gradient(top,#ec527a,#bc0343);
background:linear-gradient(top,#ec527a,#bc0343);
}
ul.bt-pre li a:before{position:absolute;width:10px;height:10px;content:"";top:10px;left:10px;background:#fff;box-shadow:rgba(0,0,0,.4)0 1px 2px;-webkit-box-shadow:rgba(0,0,0,.4)0 1px 2px;-moz-box-shadow:rgba(0,0,0,.4)0 1px 2px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}
ul.bt-pre li a:after{position:absolute;width:10px;height:10px;content:"";top:10px;right:10px;background:#fff;box-shadow:rgba(0,0,0,.4)0 1px 2px;-webkit-box-shadow:rgba(0,0,0,.4)0 1px 2px;-moz-box-shadow:rgba(0,0,0,.4)0 1px 2px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}


/* -------------------------------------------------------------------------------------
  MISSION COMMON
------------------------------------------------------------------------------------- */
.mission-lead img{width:55px;height:55px;}
.mission-lead>p:first-child{float:left;min-width:55px;}.mission-lead>div{float:left;width:78%;}
.mission-lead>div p:nth-child(2){font-size:16px;color:#7e0043;text-shadow:0 0 1px #7e0043;padding:5px 0 5px 10px;}
.mission-lead>div p:first-child,.mission-lead>div p:last-child{font-size:12px;padding-left:10px;}

/* -------------------------------------------------------------------------------------
  MISSION #2
------------------------------------------------------------------------------------- */

.expected{width:95%;margin:20px auto;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:solid 1px #757d8a;-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);text-align:left;position:relative;}
.expected p{padding:10px 5px 10px 100px;}
.expected p span{display:block;padding-bottom:5px;font-size:16px;color:#7e0043;text-shadow:0 0 1px #7e0043;}
.expected p:after{content:"";width:70px;height:70px;position:absolute;top:10px;left:10px;background:url(../img/procedure_7.png)0 0 no-repeat,red;background-size:70px 70px;
border:solid 3px #fff;box-shadow:rgba(0,0,0,.4)0 1px 3px;

}

.expected .mission{ text-align:left;}

.people-bg-wht {width: 95%;height:85px;margin-left: auto;margin-right: auto;background: #fff;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 1px #757d8a;-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);text-align: left; background-image:url(../challenge/img/people.png); background-repeat:no-repeat;background-size:85px 85px;-webkit-background-size:85px 85px;-moz-background-size:85px 85px;-ms-background-size:85px 85px;-o-background-size:85px 85px;}
.people-bg-wht-low {width: 95%;margin-left: auto;margin-right: auto;background: #fff;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border: solid 1px #757d8a;text-align: left;}
.people-bg-wht>div,.people-bg-wht-low>div { padding: 10px; line-height: 140%; }
.people-bg-wht p {display:block;padding:25px 0 0 80px;font-size:16px;color:#7e0043;text-shadow:0 0 1px #7e0043;}


/*
.ico-wl { position:absolute; top:5px; left:5px;}
ul.nav-expected { list-style-type: none; clear: both; }
ul.nav-expected li {
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
	background: -webkit-linear-gradient(top, #fff, #e8e8e8);
	background: -moz-linear-gradient(top, #fff, #e8e8e8);
	background: -ms-linear-gradient(top, #fff, #e8e8e8);
	background: -o-linear-gradient(top, #fff, #e8e8e8);
	background: linear-gradient(top, #fff, #e8e8e8);
	border-top: solid 1px #ebebeb; border-bottom: solid 1px #d0d0d0; display: block; position: relative;
}
ul.nav-expected li.col2 a{/zoom:1;}ul.nav-row1 li.col2 a:after {content:'';display:block;clear:both;height:0;}
ul.nav-expected li a{padding: 0 22px 0 40px; height: 100%; display: block; background: url(../../img/arrow_gray.png) 98% center no-repeat;background-size:8px 13px;-webkit-background-size:8px 13px;-moz-background-size:8px 13px;-ms-background-size:8px 13px;-o-background-size:8px 13px; vertical-align: top; font-size: 16px; line-height: 40px; position: relative; }
*/

ul.nav-row1.nav-exp li.win a,ul.nav-row1.nav-exp li.lose a{padding: 0 22px 0 40px;position:relative;}
ul.nav-row1.nav-exp li.win a:after,ul.nav-row1.nav-exp li.lose a:after{position:absolute;top:5px;left:5px;content:"";width:30px;height:30px;background-size:30px 30px;-webkit-background-size:30px 30px;-moz-background-size:30px 30px;-ms-background-size:30px 30px;-o-background-size:30px 30px;}
ul.nav-row1.nav-exp li.win a:after{background:url(../challenge/img/ico_w.png)0 0 no-repeat;}ul.nav-row1.nav-exp li.lose a:after{background:url(../challenge/img/ico_l.png)0 0 no-repeat;}

/* -------------------------------------------------------------------------------------
  MISSION #3
------------------------------------------------------------------------------------- */
ul.map-list{list-style:none;margin-bottom:15px;}
ul.map-list li{height:70px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
background: -webkit-linear-gradient(top, #fff, #e8e8e8);
background: -moz-linear-gradient(top, #fff, #e8e8e8);
background: -ms-linear-gradient(top, #fff, #e8e8e8);
background: -o-linear-gradient(top, #fff, #e8e8e8);
background: linear-gradient(top, #fff, #e8e8e8);
border-top: solid 1px #ebebeb; border-bottom: solid 1px #d0d0d0; display: block; position: relative;
}

ul.map-list li div.map{width:70px;height:70px;overflow:hidden;float:left;background-color:#000;}ul.map-list li div.map a{height:70px;display:block;}
ul.map-list li div.spot{padding-left:77px;height:70px;}
ul.map-list li div.spot a{height:70px;display:block;background: url(../../img/arrow_gray.png) 98% center no-repeat;background-size:8px 13px;-webkit-background-size:8px 13px;-moz-background-size:8px 13px;-ms-background-size:8px 13px;-o-background-size:8px 13px;}
ul.map-list li div.spot .title{font-size:16px;color:#7e0043;text-shadow:0 0 1px #7e0043;padding:10px 0 7px;}


/* -------------------------------------------------------------------------------------
  MISSION #4
------------------------------------------------------------------------------------- */
.bingo-sheet{margin:10px;border:solid 1px #039a03;padding-bottom:10px;
background:-webkit-gradient(linear,left top,left bottom,from(#d6ff2c),to(#88d42f));
background:-webkit-linear-gradient(top,#d6ff2c,#88d42f);
background:-moz-linear-gradient(top,#d6ff2c,#88d42f);
background:-ms-linear-gradient(top,#d6ff2c,#88d42f);
background:-o-linear-gradient(top,#d6ff2c,#88d42f);
background:linear-gradient(top,#d6ff2c,#88d42f);
}

.bingo-sheet ul{list-style:none;width:261px;margin:0 auto;box-shadow:0 1px 5px rgba(0,0,0,.7);}
.bingo-sheet ul li{display:block;float:left;}
.bingo-sheet ul li img{width:83px;height:83px;border:solid 2px #fff;}

/* -------------------------------------------------------------------------------------
  MISSION #5
------------------------------------------------------------------------------------- */
.soil-bg { text-align:center; margin:10px 0; background:rgba(255,247,153,0.3); padding:10px; border: solid 1px #adadad; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	-webkit-box-shadow: rgba(0, 0, 0, .5) 0 0px 1px; -moz-box-shadow: rgba(0, 0, 0, .5) 0 0px 1px; box-shadow: rgba(0, 0, 0, .5) 0 0px 1px;}
.soil-box { width:270px; margin:0 auto; text-align:center;}
.soil-box img { margin:5px 0;}

.soil-box2 { width:270px; margin:0 auto; text-align:left;}
.soil-box img { margin:5px 0;}

#result_ex {width:auto; border:1px solid #36F; color:#36F; padding:10px; text-align:center;}
#result_nor {width:auto; border:1px solid #090; color:#090; padding:10px; text-align:center;}
#result_fail {width:auto; border:1px solid #960; color:#960; padding:10px; text-align:center;}
#result_fail2 {width:auto; border:1px solid #900; color:#900; padding:10px; text-align:center;}


/* -------------------------------------------------------------------------------------
  MISSION DESCRIPTION
------------------------------------------------------------------------------------- */
.content-bg.ms-outer{min-height:280px;}
.mission-title{margin:0 10px 10px;}
.mission-title .num{text-align:center;font-size:13px;color:#666;}
.mission-title .icon{float:left;}
.mission-title .title{float:left;padding:20px 0 0 10px;color:#7e0043;text-shadow:0 0 1px #7e0043;font-size:17px;line-height:120%;}
.mission-title .icon img{width:55px;height:55px;}
.mission-detail p{padding-bottom:10px;font-size:13px;line-height:130%;}.mission-detail p:last-child{padding-bottom:0;}

/* -------------------------------------------------------------------------------------
  SPECIAL OFFER
------------------------------------------------------------------------------------- */
.sec-title{font-size:15px;margin:10px 0;padding:5px;color:#fff;border:solid 1px #bc156b;text-shadow:0 0 1px #fff;
background:-webkit-gradient(linear,left top,left bottom,from(#e72c8e),to(#f870ae));
background:-webkit-linear-gradient(top,#e72c8e,#f870ae);
background:-moz-linear-gradient(top,#e72c8e,#f870ae);
background:-ms-linear-gradient(top,#e72c8e,#f870ae);
background:-o-linear-gradient(top,#e72c8e,#f870ae);
background:linear-gradient(top,#e72c8e,#f870ae);
}
.sec-title p:first-child{margin-bottom:5px;text-align:center;}

.pre-title,.pre-title-in{margin:15px 0;border-top:dotted 1px #666;padding-top:20px;text-shadow:0 0 1px #000;}.pre-title-in{border:none;}
.pre-title p:first-child{border-left:solid 4px #bc156b;padding-left:5px;color:#bc156b;text-shadow:0 0 1px #bc156b;margin-bottom:5px;}
.pre-title p:last-child,.pre-title-in p:last-child{font-size:13px;line-height:16px;color:#666;margin-top:3px;text-shadow:none;}.pre-title p:last-child a,.pre-title-in p:last-child a{color:#666;}.pre-title p:last-child span,.pre-title-in p:last-child span{font-size:12px;border:solid 1px;padding:2px 10px;margin-right:5px;}

.pre-image{text-align:center;}.pre-image p{font-size:10px;color:#999;text-align:right;padding-top:1px;}

ul.pre-list{margin:5px 0 10px 25px;font-size:13px;}ul.pre-list li{padding-bottom:3px;}ul.pre-list li span.note{font-size:12px;color:#666;}
.pre-spot,.pre-detail{line-height:17px;margin-bottom:5px;}.pre-detail{border-bottom:dotted 1px #333;padding-bottom:3px;}
.pre-spot span,.pre-detail span{font-size:12px;color:#bc156b;width:80px;margin-right:10px;text-align:center;display:inline-block;border:solid 1px #ffa1cc;background-color:#ffc5df;}

.invi{border-left:solid 4px #bc156b;padding-left:5px;color:#bc156b;text-shadow:0 0 1px #bc156b;margin-bottom:5px;}