@charset "utf-8";
.centerwrap{  width:1200px;  margin:0 auto;}
.myerr{
    display: inline-block;
    font-size: 1.1vw;
    line-height: 1.8vw;
    color: red;
    vertical-align: top;	
}
#intropop{
  position:absolute;
  width:280px;
  height:72px;
  padding:10px 5px;
  right:-260px;
  top:5px;
  font-size:13px;
  line-height:18px;
  color:#666;
  z-index:99;
  background:rgba(255,255,255,0.8);
  border-radius:10px;
  -moz-box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
-webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
}
#intropop img{
  position:relative;
  height:100%;
  margin:0 8px;
  max-height:60px;
}
#blockypop2{
  position:absolute;
  width:150px;
  height:56px;
  padding:10px 10px 10px 25%;
  right:calc(-150px - 15%);
  top:5px;
  font-size:13px;
  line-height:18px;
  color:#666;
  background:url(../img/popbg2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:99;
}
/* header */
header{z-index:3;position:fixed;top:0;left:0;width:100%;padding:10px 0;background:#226699;height:40px;}
header h1{font-size:20px;line-height:36px;color:#fff;font-weight:bold;display:inline-block;}
#mainwrap{z-index:1;position:relative;padding:70px 0;min-height:calc(100% - 150px);max-height:calc(100% - 140px);overflow:auto;min-width:1200px;}
/* 主內容 */
#blockintro{margin:10px 0;padding:10px;border:2px dotted;#cccccc;}
#mainblockwrap{padding:10px;min-height:400px;}
#mainblock{  position:relative;}
#moveblock{  position:relative;  display:inline-block;  width:400px;  height:400px;  margin-right:40px;  border:1px solid #999;  float:left;}
#selectblock{ position:relative;  display:inline-block;width:200px;min-height:400px;float:left;margin:0 20px;}
#controlblock{  position:relative;  display:inline-block;  width:calc(100% - 710px);  padding:0 10px;  float:left;}
/* header */
.topgameselect{display:inline-block;margin:0 8px;width:30px;height:30px;border-radius:15px;text-align:center;font-size:14px;line-height:30px;color:rgba(0,0,0,0.3);;background:rgba(255,255,255,0.3);}
a.topgameselect{background:rgba(255,255,255,0.7);color:#777;font-size:16px;line-height:30px;}
.topgameselect.on{background:rgba(255,255,255,1);color:#222;font-weight:bold;font-size:16px;line-height:30px;}
/* block */
.block{
  position:relative;
  z-index:1;
  width:136px;
  min-height:20px;
  padding:0;
  margin:10px 0;
  border-radius:10px 4px 4px 10px;
}
.block_top{
  position:relative;
  height:10px;
  background:url(../img/blocktop.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:1;
}
.block_body{
  position:relative;
  margin:-4px 0;
  padding:2px 6px 0 6px;
  background:url(../img/blockbody.png);
  background-repeat:repeat;
  color:#fff;
  font-size:14px;
  line-height:22px;
  min-height:22px;
  z-index:2;
}

.block_foot{
  position:relative;
  height:16px;
  background:url(../img/blockfoot.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:1;
  margin-bottom:-5px;
}
.block_infoot{
  position:relative;
  height:20px;
  background:url(../img/blockinfoot.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:1;
  margin-bottom:-5px;
}
.block_centerfoot{
  position:relative;
  height:27px;
  background:url(../img/blockfoot3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:1;
  margin-bottom:-8px;
}
.linkin .block_infoot{
  background:url(../img/blockinfooton.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.linkin .block_infoot{
  background:url(../img/blockinfooton.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.linkin  .block .block_infoot{
  background:url(../img/blockinfoot.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.linkin2 .block_centerfoot{
  position:relative;
  height:27px;
  background:url(../img/blockfoot3on.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:1;
  margin-bottom:-8px;
}
.linkin2 .block .block_centerfoot{
  position:relative;
  height:27px;
  background:url(../img/blockfoot3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index:1;
  margin-bottom:-8px;
}


.block_top select{
  height:20px;
  font-size:14px;
  line-height:20px;
  padding:0 5px;
  background:#rgba(255,255,255,0.3);
}
.blocktop select{
  height:22px;
  font-size:13px;
  line-height:22px;
  padding:0 3px;
  background:rgba(255,255,255,0.5);
  border:0;
  color:#333;
}
.block.on{
  z-index:99;
}
.block.on .block_top{
  background:url(../img/blocktopup.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.block.on .block_body{
  background:url(../img/blockbodyup.png);
  background-repeat:repeat;
}
.block.on .block_foot{
  background:url(../img/blockfootup.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.blockfree{
  height:auto;
  min-height:80px;
  background:none;
}
.blockfree .blocktop{
  height:40px;
}
.blockfree .block_foot2{
  height:20px;
  background:url(../img/blockfoot2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom:-3px;
}
.block .blockbody{
  position:relative;
  min-height:30px;
}
.block .blockbody p{
  margin:0!important;
  padding:0;
  width:100%;
  text-align:center;
  color:#fff!important;
  font-size:14px;
}
.block .blockside{
  position:absolute;
  left:0;
  top:0;
  height:calc(100% - 10px);
  padding-top:10px;
  width:55px;
  background:url(../img/blockbody.png);
  background-repeat:repeat;
  color:#fff!important;
}
.block .blockfoot{
  height:20px;
  background:rgba(66,66,99,0.3);
}
.block .blockcontainer{
  position:relative;
  margin-left:56px;
  min-height:30px;
  width:280px;
  margin-top:-3px;
}

/* moveblock 內容 */

/* selectblock 內容 */
#sortable2{
  position:relative;
  width:150px;
  min-height:300px;
  padding:0 10px;
  border:3px dotted #ccc;
  height:100%;
}
#sortable2 .block{
  position:relative;
  z-index:1;
  display:inline-block;
  margin:10px 0;
}
#sortable2 .block:hover{  cursor:grab;}
#sortable2 .block:active{ cursor:grabbing;}
#sortable2 h1{margin-left:10px;margin-top:-20px;width:100px;font-size:20px;line-height:40px;color:#999;background:#fff;padding:0 5px;}
#sortable2 p{font-size:14px;line-height:20px;margin:10px 0;color:#666;}
/* controlblock內容 */
#sortable{
  position:relative;
  margin-left:10px;
  min-height:300px;
  width:300px;
  padding-bottom:30px;
}
#sortable .block{
  position:relative;
  z-index:1;
  display:block;
  top:0;
  left:0;
  margin:0 100px 0 0!important;
}
#sortable .block:last-child{
  margin-bottom:0!important;
}
#sortable .block:hover{  cursor:grab;}
#sortable .block:active{ cursor:grabbing;}
.bwrap{   position:relative;  border:3px dotted #ccc;min-height:400px;}
.bwrap h1{margin-left:10px;margin-top:-20px;width:100px;font-size:20px;line-height:40px;color:#999;background:#fff;padding:0 5px;}
.bwrap p{font-size:14px;line-height:20px;margin:10px; 0;color:#666;}

#sortable .block.link{
/*  border-bottom:4px solid #ff9900!important;*/
}
#sortable .block.link .block_foot{
  background:url(../img/blockfooton.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#sortable .block.link .block .block_foot{
  background:url(../img/blockfoot.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#sortable .blockfree.block.link .block_foot2{
  background:url(../img/blockfoot2on.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#sortable .blockfree.block.link .block .block_foot2{
  background:url(../img/blockfoot2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#startme{
  width:200px;
  height:40px;
  font-size:16px;
  line-height:40px;
  background:#666;
  color:#fff;
  text-align:center;
  margin:20px;
  cursor:pointer;
}







#ball{
  position:absolute;
  width:60px;
  height:60px;
  border-radius: 30px;
  /*background:rgba(100,60,0,0.5);*/
  text-align:center;
  font-size:16px;
  line-height:60px;
  color:#fff;
  z-index:9;
  transition-duration: 0.2s;
}
#blockypop{
  position:absolute;
  width:70px;
  height:36px;
  padding:14px 13px 15px 18px;
  right:-90px;
  top:5px;
  font-size:13px;
  line-height:18px;
  color:#666;
  background:url(../img/popbg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#blockypoperr{
    position: absolute;
    width: 196px;
    height: 45px;
    padding: 11px 11px 8px 42px;
    right: -234px;
    top: 5px;
    font-size: 13px;
    line-height: 18px;
    color: #666;
    z-index: 2;
    background: url(../img/popbg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#trashcan{
  display:none;
  position:absolute;
  top:15px;
  left:0;
  height:100%;
  width:100%;
  background:rgba(255,255,255,0.6);
  z-index:2;
  text-align:center;
  padding:30px 0;
}
#trashcan i{
  font-size:80px;
  color:#888;

}
#movestepcoount{
  position:absolute;
  left:0;
  bottom:-44px;
  height:40px;
  width:100%;
  z-index:2;
  background:rgba(0,0,0,0.5);
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}
.blockdot{
  position:absolute;
  width:4px;
  height:4px;
  border-radius: 2px;
  background:rgba(0,0,0,0.1);
  z-index:0;
}
.blockdotu{
  position:absolute;
  width:4px;
  height:4px;
  border-radius: 2px;
  background:rgba(0,0,0,0.3);
  z-index:1;
}
.blockdotu.end{
  position:absolute;
  width:4px;
  height:4px;
  border-radius: 2px;
  background:rgba(0,0,0,1);
  z-index:1;
}
/* footer */
footer{z-index:3;position:fixed;bottom:0;left:0;width:100%;padding:20px 0;background:#226699;50px;}
footer p{font-size:13px;line-height:18px;color:#fff;}
/* form */
.formwrap{position:relative;border:1px solid #999;margin:2vw auto;padding:20px;text-align:left;width:500px;}
.formwrap .formline {min-height:1.8vw;position:relative;padding:0.5vw 0;}
.formwrap .formline span{display:inline-block;font-size:1.1vw;line-height:1.8vw;color:#595959;vertical-align: top;}
.formwrap .formline  input[type=text],.formwrap .formline  input[type=number],.formwrap .formline  input[type=password],.formtable td input[type=password]{width:99%;padding:0 0.5%;color:#595959!important;font-size:1.1vw;line-height:1.8vw;background:none!important;border:1px solid #ccc;}
.formline select{width:100%;padding:0 0.5%;color:#595959!important;font-size:1.1vw;line-height:1.8vw;background:none!important;border:1px solid #ccc;}
.formwrap .formline  input[type=checkbox]{width:1.3vw;height:1.3vw;margin:0;font-size:1.1vw;line-height:1.3vw;float:right;}
.formwrap .formline  textarea{width:99%;padding:0 0.5%;height:10vw;color:#595959;font-size:1.1vw;line-height:1.8vw;background:none!important;border:1px solid #ccc;}
.formwrap .formline  input[type=submit]{padding:0;font-size:1.1vw;color:#fff;line-height:1.8vw;color:#fff;background:#666;border:1px solid #ccc;float:right;margin:0 10%;width:80%;}
.formwrap .formline  input[type=image]{padding:0 1%;float:right;width:20%;}
.formwrap.style1 .formline span{padding:0 0.5vw;}
.formwrap.style1 .formline span:first-child{width:25%;margin-right:5%;font-weight:400;}
.formwrap.style1 .formline span:nth-child(2){width:60%;}
.formwrap.style1 .formline .fbbox{background:#3a5998;color:#fff;margin:0 10%;width:80%;font-size:1.1vw;line-height:1.8vw;text-align:center;}
.sitebutton{
  display:inline-block;
  height:40px;
  padding:0 20px;
  font-size:16px;
  line-height:40px;
  background:#666;
  color:#fff;
  text-align:center;
  margin:20px auto;
  cursor:pointer;
}
.logbox{display:inline-block;float:right;height:30px;}
.logbox span{font-size:14px; color:#fff;margin-right:10px;}
.logbox .sitebutton{margin:0;height:30px;line-height:30px;}
/* game page */
.gamepageselect{
  position:relative;
  display:inline-block;
  margin:0 50px;
  width:150px;
  height:60px;
  padding:45px 0;
  border-radius:75px;
  overflow:hidden;
  color:#fff;
  background:rgba(33,66,99,0.6);
}
.gamepageselect:hover{
  background:rgba(33,66,99,0.8);

}
.gamepageselect.end{
  color:#ddd;
  background:rgba(0,0,0,0.3);
}
.gamepageselect.end:hover{
  color:#fff;
  background:rgba(33,66,99,0.8);
}
.gamepageselect h2{font-size:24px;line-height:36px;}
.gamepageselect span{font-size:14px;line-height:22px;}
/* BACKGROUND */
.gamemanbg1{  background:url(../img/spaceman.png);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg11{  background:url(../img/bg11.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg12{  background:url(../img/bg12.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg13{  background:url(../img/bg13.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg14{  background:url(../img/bg14.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg15{  background:url(../img/bg15.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg21{  background:url(../img/bg21.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg22{  background:url(../img/bg22.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg23{  background:url(../img/bg23.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg24{  background:url(../img/bg24.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg25{  background:url(../img/bg25.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg31{  background:url(../img/bg31.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg32{  background:url(../img/bg32.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg33{  background:url(../img/bg33.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg34{  background:url(../img/bg34.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}
.gamebg35{  background:url(../img/bg35.jpg);  background-repeat: no-repeat;  background-size: 100% 100%;}