DIR : /home/kozerus/public_html/jkwii/js/jsdoit/selfdestuct/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/selfdestuct

#selfDestruction {
  position:relative;
  overflow:hidden;
  background:;
  width:300px;
  height:400px;
  background:rgb(10, 10, 10);
  
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  
  -webkit-box-shadow:rgba(150,150,150,0.4) 0 1px 0px, rgba(0,0,0,1) 0 2px 1px,rgba(0,0,0,0.3) 0 0 3px;
  -moz-box-shadow:rgba(150,150,150,0.4) 0 1px 0px, rgba(0,0,0,1) 0 2px 1px,rgba(0,0,0,0.3) 0 0 3px;
  box-shadow:rgba(150,150,150,0.4) 0 1px 0px, rgba(0,0,0,1) 0 2px 1px,rgba(0,0,0,0.3) 0 0 3px;
  
}

/*ハイライト*/
#selfDestruction:before {
  content:   "";
  display:block;
  position:   absolute; 
    width:     295px;
    height:   395px;
    top:     3px;
    left:     3px;
  z-index:2;
  
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  
  -webkit-box-shadow:inset 0 1px 1px rgba(255,254,255,0.6),inset 0 0 10px rgba(255,255,255,0.35),0 0 2px rgba(255,255,255,0.35);
  -moz-box-shadow:inset 0 1px 1px rgba(255,254,255,0.6),inset 0 0 10px rgba(255,255,255,0.35),0 0 2px rgba(255,255,255,0.35);
  box-shadow:inset 0 1px 1px rgba(255,254,255,0.6),inset 0 0 10px rgba(255,255,255,0.35),0 0 2px rgba(255,255,255,0.35);
    
}

/*べーすぐらで*/
#selfDestruction:after {
  content:   "";
  position:   absolute; 
    width:     298px;
    height:   398px;
    top:     2px;
    left:     2px;   
  
  z-index:1;
    
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  
  background-image:-moz-linear-gradient(0% 75% 60deg,
                      rgba(255,255,255,0.15),
                      rgba(255,255,255,0) 30%,
                      rgba(255,255,255,0) 80%,
                      rgba(255,255,255,0.3) );
  
  background-image:-webkit-gradient(linear, 75% 0%, 0% 100%,
                    from( rgba(255,255,255,0.15)),
                    to(rgba(255,255,255,0.3)),
                    color-stop(.2,rgba(255,255,255,0)),
                    color-stop(.6,rgba(255,255,255,0))
                    );
  
  
}

.stripeBase {
  position:relative;
  z-index:3;
  width:240px;
  height:240px;
  margin:30px;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAABJ0lEQVRogdXZyQ2EMBBE0c8EMfnHRxLMAQkhYIyXXsoOoPTkY/9lW3F6y9dr+eO06yfeVh+0qxiPn/YWY44OEGOLjhFjiA4TY4WOFGOCDhYzjo4XM4hOETOCzhLTjU4U04fOFdOBThfTilYQ04QWEVOP1hFTiZYSU4NWE/OKFhRTRmuKKaBlxfxDK4t5RIuLuaP1xVzQU4g5o2cRc6AnErOj5xIDi8sq4CbGD+16QXZBe9+87dEBV3pjdExXsESHlRAzdGS7sUEH1yYDdHwfG0WnFL0hdFaD7EcnVtNOdG7n7UGnl+lmdLqYVrSCmCa0iJh6tI6YSrSUmBq0mphXtKCYMlpTTAEtK+YfWlnMI1pczB2tL+aCnkLMGT2LmAM9kZgdPZcY+AEM4XhDUUbL0wAAAABJRU5ErkJggg==);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}
.stripeBase:after {
  content:   "";
  display:block;
  position:   absolute;
  top:20px;
  left:0;
  z-index:4;
  width:240px;
  height:200px;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAABHUlEQVRogdXWuQ3DQAxE0b9bhPuvz03YgQBBEHTswSWHk5CTEC9k+X1ZlPJZdhlI5y7byOUu+5bIXY4li7ucegr3GU0G9wUaefc1Gm33LRph9xMaVfcLGkn3Oxo9dxMaMXcrGiV3BxoZdx8aDXc3GgH3CJpo9yCaUPc4mjj3FJog9yyaCLcBGne3DRpftxkaR7clGi+3MRoXtz2a9e4laBa7V6FZ6a7hL9tAKtEv20DqNnK5674lctdjyeKup57CfUaTwX2BRt59jUbbfYtG2P2ERtX9gkbS/Y5Gz92ERszdikbJ3YFGxt2HRsPdjUbAPYIm2j2IJtQ9jibOPYUmyD2LJsJtgMbdbYPG122GxtFticbLbYzGxW2PZr37D+O3eEOMYmeHAAAAAElFTkSuQmCC);
}
.stripeBase:before {
  content:   "";
  display:block;
  position:absolute;
  top:20px;
  left:20px;
  z-index:5;
  width:200px;
  height:200px;
  background:#000;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}

.cover {
  position:absolute;
  top:45px;
  left:45px;
  z-index:6;
  width:210px;
  height:210px;
  color:#fff;
  text-align:center;
  
  background-image:-moz-linear-gradient(0% 75% 60deg,
                      rgba(255,255,255,0.2),
                      rgba(255,255,255,0) 10%,
                      rgba(255,255,255,0.3) 30%,
                      rgba(255,255,255,0) 80%,
                      rgba(255,255,255,0.4) );
  
  background-image:-webkit-gradient(linear, 70% -10%, 0% 100%,
                    from(rgba(255,255,255,0.2)),
                    to( rgba(255,255,255,0.4)),
                    color-stop(.1,rgba(255,255,255,0)),
                    color-stop(.55,rgba(255,255,255,0.3)),
                    color-stop(.7,rgba(255,255,255,0))
                    );
  
  -webkit-box-shadow:inset -1px 1px 1px rgba(255,254,255,0.9),
          inset 1px -1px 1px rgba(255,255,255,0.9),
          inset 0 0 10px rgba(255,255,255,0.8);
  -moz-box-shadow:inset -1px 1px 1px rgba(255,254,255,0.9),
          inset 1px -1px 1px rgba(255,255,255,0.9),
          inset 0 0 10px rgba(255,255,255,0.8);
  box-shadow:inset -1px 1px 1px rgba(255,254,255,0.9),
          inset 1px -1px 1px rgba(255,255,255,0.9),
          inset 0 0 10px rgba(255,255,255,0.8);
}

.active .cover {
  cursor:pointer;
}

.cover:before {
  content:"";
  display:block;
  position:absolute; 
    top:4px;
    left:4px;
  z-index:2;
  width:202px;
  height:202px;
    
  -webkit-box-shadow:inset 0 1px 1px rgba(255,254,255,0.6),
          inset 0 0 10px rgba(255,255,255,1),
              0 0 4px rgba(255,255,255,0.7);
  -moz-box-shadow:inset 0 1px 1px rgba(255,254,255,0.6),
          inset 0 0 10px rgba(255,255,255,1),
              0 0 4px rgba(255,255,255,0.7);
  box-shadow:inset 0 1px 1px rgba(255,254,255,0.6),
          inset 0 0 10px rgba(255,255,255,1),
              0 0 4px rgba(255,255,255,0.7);
}
.cover:after {
  content:"";
  display:block;
  position:absolute; 
    top:9px;
    left:9px;
  z-index:2;
  width:193px;
  height:193px;
    
  -webkit-box-shadow:inset 0 0 15px rgba(255,254,255,0.4),
          inset -1px 1px 1px rgba(255,254,255,0.7),
          inset 1px -1px 1px rgba(255,255,255,0.5),
              0 0 5px rgba(255,255,255,0.5),
              0 0 5px rgba(255,255,255,0.5);
  -moz-box-shadow:inset 0 0 15px rgba(255,254,255,0.4),
          inset -1px 1px 1px rgba(255,254,255,0.7),
          inset 1px -1px 1px rgba(255,255,255,0.5),
              0 0 5px rgba(255,255,255,0.5),
              0 0 5px rgba(255,255,255,0.5);
  box-shadow:inset 0 0 15px rgba(255,254,255,0.4),
          inset -1px 1px 1px rgba(255,254,255,0.7),
          inset 1px -1px 1px rgba(255,255,255,0.5),
              0 0 5px rgba(255,255,255,0.5),
              0 0 5px rgba(255,255,255,0.5);
}

.cover .caution {
  display:block;
  font-weight:bold;
  font:bold 24px/1em 'Droid Sans',sans-serif;
  margin:70px 0 0 0;
}
.cover .caution:after {
  display:block;
  font-size:110px;
  content:'\002620';
  margin-top:40px;
  font-family: Arial, Helvetica, sans-serif;
}

.wingdings .caution:after {
  content:'N';
  font-weight:normal;
  font-family:"Wingdings";
}

/* ! */
.cover .ex {
  position:absolute;
  left:50%;
  margin-left:-10px;
  top:30px;
  display:block;
  border-color:transparent transparent transparent #fff;
  border-top-width:15px;
  border-bottom-width:15px;
  border-left:20px solid #fff;
  border-right:0;
  border-style:solid;
  height:0px;
  width:0px;
  -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

}

.cover .ex:before {
  position:absolute;
  top:-9px;
  left:-14px;
  content:"!";
  font:bold 18px/1em 'Droid Sans', sans-serif;
  font-weight:bold;
  color:#000;
  
  -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

/*ボタン*/
.button {
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  margin:-80px 0 0 -80px;
  width:160px;
  height:160px;
  
  -webkit-border-radius:80px;
  -moz-border-radius:80px;
  border-radius:80px;
  
  background-image:-moz-linear-gradient(19% 75% 60deg,
                      rgb(10,10,10),
                      rgb(100,100,100)
                      );
  
  background-image:-webkit-gradient(linear, 70%  0%, 0% 100%,
                    from(rgb(100,100,100)),
                    to(rgb(10,10,10))
                    );
  -webkit-box-shadow:inset -1px 1px 2px rgba(255,255,255,0.1),
            inset 1px -1px 2px rgba(255,255,255,0.1);
  -moz-box-shadow:inset -1px 1px 2px rgba(255,255,255,0.1),
          inset 1px -1px 2px rgba(255,255,255,0.1);
  box-shadow:inset -1px 1px 2px rgba(255,255,255,0.1),
          inset 1px -1px 2px rgba(255,255,255,0.1);
}

/*赤いところ*/
#core {
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:110px;
  height:110px;
  margin:-55px 0 0 -55px;
  cursor:pointer;
  
  -webkit-border-radius:55px;
  -moz-border-radius:55px;
  border-radius:55px;
  
  -webkit-box-shadow:inset -1px 1px 0px rgba(255,255,255,0.4),
          inset 1px -1px 0px rgba(255,255,255,0.2);
  -moz-box-shadow:inset -1px 1px 0px rgba(255,255,255,0.4),
          inset 1px -1px 0px rgba(255,255,255,0.2);
  box-shadow:inset -1px 1px 0px rgba(255,255,255,0.4),
          inset 1px -1px 0px rgba(255,255,255,0.2);
  
  background-image:-moz-linear-gradient(19% 75% 60deg,
                      rgb(30,30,30),
                      rgb(5,5,5));
  
  background-image:-webkit-gradient(linear, 70%  0%, 0% 100%,
                    from(rgb(5,5,5)),
                    to(rgb(30,30,30))
                    );
  
  
}
#core:before {
  content:"";
  display:block;
  position:absolute;
  top:15px;
  left:15px;
  z-index:7;
  width:80px;
  height:80px;
  
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
  
  background-image:-moz-radial-gradient(50% 50% 90deg,circle closest-side, #DB0000, #BA0000);
  background-image:-webkit-gradient(radial, 40 40, 35, 40 40, 0, from(#BA0000), to(#DB0000));
}

#core:after {
  content:"";
  display:block;
  position:absolute;
  top:5px;
  left:5px;
  z-index:6;
  width:100px;
  height:100px;
  background-color:#f00;
  
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
  
  background-image:-moz-linear-gradient(0% 65% 74deg,
                      rgba(0,0,0,0.4),
                      rgba(255,255,255,0.3) 70%,
                      rgba(255,255,255,0.7));
  
  background-image:-webkit-gradient(linear, 65%  10%, 10% 100%,
                    from(rgba(255,240,240,0.4)),
                    to(rgba(0,0,0,0.8)),
                    color-stop(.3,rgba(180,0,0,0.2))
                    );
}

#core:hover:before {
  background-image:-moz-radial-gradient(50% 50% 90deg,circle closest-side, #fa0000, #cb0000);
  background-image:-webkit-gradient(radial, 40 40, 35, 40 40, 0, from(#cb0000), to(#fa0000));
}

.start #core:before {
  background-image:-moz-radial-gradient(50% 50% 90deg,circle closest-side, #a90000, #740000);
  background-image:-webkit-gradient(radial, 40 40, 35, 40 40, 0, from(#740000), to(#a90000));
}

.start #core:after {
  background-color:#c00;
  background-image:-moz-linear-gradient(0% 65% 74deg,
                      rgba(0,0,0,0.6),
                      rgba(0,0,0,0.3));
  
  background-image:-webkit-gradient(linear, 65%  10%, 10% 100%,
                    from(rgba(0,0,0,0.3)),
                    to(rgba(0,0,0,0.6))
                    );
}

/*コンパネ*/
#panel {
  position:relative;
  color:#FFf;
}
#panel .text {
  margin:0 30px 0 90px;
}
#panel .text p {
  margin:0;
  font-size:12px;
  text-align:center;
}

#panel p.title {
  font-weight:bold;
  font:bold 18px/1em 'Droid Sans', sans-serif;
  margin-bottom:10px;
}

.controller {
  position:absolute;
  left:30px;
  top:0;
}

/* LED lamp */
.lamp {
  margin:0 auto;
  width:30px;
  height:30px;
  overflow:hidden;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  
  -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,0.9),
           1px -1px 1px rgba(100,100,100,0.9);
  -moz-box-shadow:-1px 1px 1px rgba(0,0,0,0.9),
           1px -1px 1px rgba(100,100,100,0.9);
  box-shadow:-1px 1px 1px rgba(0,0,0,0.9),
           1px -1px 1px rgba(100,100,100,0.9);
  
  background-image:-moz-linear-gradient(19% 75% 60deg, #111, #000 40%, #444);
  
  background-image:-webkit-gradient(linear, 65%  0%, 0% 100%,
                    from(#444),
                    to(#111),
                    color-stop(.4, #000)
                    );
}

.led {
  position:relative;
  margin:5px;
  height:20px;
  
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  
  -webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.7),
          0 0 5px rgba(0,0,0,0.9);
  -moz-box-shadow:inset 0 0 8px rgba(0,0,0,0.7),
          0 0 5px rgba(0,0,0,0.9);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.7),
          0 0 5px rgba(0,0,0,0.9);
  
  background-image:-moz-radial-gradient(50% 50% 90deg, ellipse cover, rgb(80,0,0), #960000);
  
  background-image:-webkit-gradient(radial, 40 40, 8, 40 40, 0, from(#960000), to(rgb(80,0,0)));
  
}

.led:before {
  display:block;
  position:absolute;
  top:3px;
  left:3px;
  z-index:1;
  content:"";
  height:14px;
  width:14px;
  background-color:rgba(90,0,0, 1);
  
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  
  -webkit-box-shadow:0 0 3px rgba(90,0,0,1), -1px 1px 1px rgba(120,0,0,1);
  -moz-box-shadow:0 0 3px rgba(90,0,0,1), -1px 1px 1px rgba(120,0,0,1);
  box-shadow:0 0 3px rgba(90,0,0,1), -1px 1px 1px rgba(120,0,0,1);
}

.led:after {
  content:"";
  display:block;
  position:absolute;
  top:4px;
  left:10px;
  z-index:2;
  height:5px;
  width:5px;
  background-color:rgba(255,255,255,0.6);
  
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  
  -webkit-box-shadow:0 0 2px rgba(255,255,255,1), 0 0 3px rgba(255,255,255,0.5);
  -moz-box-shadow:0 0 2px rgba(255,255,255,1), 0 0 3px rgba(255,255,255,0.5);
  box-shadow:0 0 2px rgba(255,255,255,1), 0 0 3px rgba(255,255,255,0.5);
}

.active .led {
  
  background-image:-moz-radial-gradient(50% 50% 90deg, ellipse cover, rgb(180,0,0), #960000);
  background-image:-webkit-gradient(radial, 40 40, 8, 40 40, 0, from(#960000), to(rgb(180,0,0)));
  
  -webkit-box-shadow:inset 0 0 8px rgba(255,0,0,0.7),
          inset 0 0 15px rgba(180,0,0,0.7),
          0 0 5px rgba(0,0,0,0.3),
          0 0 3px rgba(255,0,0,0.9),
          0 0 5px rgba(0,0,0,0.9);  
  -moz-box-shadow:inset 0 0 8px rgba(255,0,0,0.7),
          inset 0 0 15px rgba(180,0,0,0.7),
          0 0 5px rgba(0,0,0,0.3),
          0 0 3px rgba(255,0,0,0.9),
          0 0 5px rgba(0,0,0,0.9);
  box-shadow:inset 0 0 8px rgba(255,0,0,0.7),
          inset 0 0 15px rgba(180,0,0,0.7),
          0 0 5px rgba(0,0,0,0.3),
          0 0 3px rgba(255,0,0,0.9),
          0 0 5px rgba(0,0,0,0.9);
}

.active .led:before{
  background-color:rgba(255,0,0, 1);
  
  -webkit-box-shadow:0 0 2px rgba(255,0,0,1),
          0 0 3px rgba(255,0,0,1),
          0 0 3px rgba(255,0,0,0.8);
  -moz-box-shadow:0 0 2px rgba(255,0,0,1),
          0 0 3px rgba(255,0,0,1),
          0 0 3px rgba(255,0,0,0.8);
  box-shadow:0 0 2px rgba(255,0,0,1),
          0 0 3px rgba(255,0,0,1),
          0 0 3px rgba(255,0,0,0.8);
}

/* pin switch */
.switch {
  position:relative;
  height:30px;
  margin:15px auto 0;
}
.switch:before {
  content:"";
  display:block;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:30px;
  height:30px;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  
  background-image:-moz-linear-gradient(19% 75% 60deg, #111, #000 40%, #444);
  
  background-image:-webkit-gradient(linear, 65%  0%, 0% 100%,
                    from(#444),
                    to(#111),
                    color-stop(.4, #000)
                    );
  
  -webkit-box-shadow:-1px 1px 1px rgba(0,0,0,0.9),
           1px -1px 1px rgba(100,100,100,0.9);
  -moz-box-shadow:-1px 1px 1px rgba(0,0,0,0.9),
           1px -1px 1px rgba(100,100,100,0.9);
  box-shadow:-1px 1px 1px rgba(0,0,0,0.9),
           1px -1px 1px rgba(100,100,100,0.9);
}

.switch:after {
  content:"";
  display:block;
  position:absolute;
  top:25px;
  left:10px;
  z-index:2;
  width:10px;
  height:18px;
  background:rgba(0,0,0,0.7);
  border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 5px rgba(0,0,0,1);
  -moz-box-shadow:0 0 5px rgba(0,0,0,1);
  box-shadow:0 0 5px rgba(0,0,0,1);
}

.pin {
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  width:10px;
  height:30px;
  background:#ccc;
  cursor:pointer;
  
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  
  -webkit-box-shadow:inset 0 0 1px rgb(0,0,0);
  -moz-box-shadow:inset 0 0 1px rgb(0,0,0);
  box-shadow:inset 0 0 1px rgb(0,0,0);
  
  background-image:-moz-linear-gradient(21% 75% 0deg,#666666, #C9C9C9, #999999 100%);
  
  background-image:-webkit-gradient(linear, 100%  100%, 21% 100%,
                    from(#C9C9C9),
                    to(#666666),
                    color-stop(.4, #999)
                    );
    
}
.pin:before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  width:10px;
  height:20px;
  -webkit-border-radius:5px 5px 0 0;
  -moz-border-radius:5px 5px 0 0;
  border-radius:5px 5px 0 0;
  
  -webkit-box-shadow:inset 0 1px 1px rgb(0,0,0);
  -moz-box-shadow:inset 0 1px 1px rgb(0,0,0);
  box-shadow:inset 0 1px 1px rgb(0,0,0);
  
  background-image:-moz-linear-gradient(0% 100% 90deg, rgba(0,0,0,0),  rgba(0,0,0, 1));
  background-image:-webkit-gradient(linear, 0%  0%, 0% 100%,from(#000),to(rgba(0,0,0,0)));
}
.pin:after {
  content:"";
  display:block;
  position:absolute;
  bottom:1px;
  left:0;
  z-index:5;
  width:10px;
  height:10px;
  
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  
  background-image:-moz-radial-gradient(70% 60% 90deg,circle closest-side, rgba(255,255,255,0.8),  rgba(255,255,255,0));
  
  background-image:-webkit-gradient(radial, 8 6, 5, 8 6, 0, from(rgba(255,255,255,0)), to( rgba(255,255,255,0.8)));
  
}

.active .pin {
  top:-10px;
  -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.active .switch:after {
  top:0px;
}