* {
	-webkit-tap-higlight-color: transparent;
   	-webkit-user-select: none;    	
}

body {
  margin: 0;
  padding: 0;
  color: #FFF;
  background: #555;
  /* background: #FFF url(../images/goldcartridge_tile.gif); */

  font-family: helvetica, arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
ul, li {
  list-style: none;
}
/* container, called "page" in WP theme */
#container {
  float: left;
  clear: none;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: auto;
  height: 100%;
}
#canvas {
  float: left;
  clear: none;
  position: relative;
  display: block;
  margin: 5px 0;
  padding: 0;
  width: auto;
  height: auto;
}
/* controller global */
.controller {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-3d-transform: rotate(0deg) scale(1);
}
/* GBASP BASE */
.gbasp {
  margin: 0 30px;
  width: 250px;
  letter-spacing: -1px;
  -webkit-3d-transform: rotate(0deg) scale(0.8);
}
.screen {
  width: 250px;
  height: 200px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: solid 4px rgba(74, 74, 74, 0.5);
  background: #dedede;
  -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
.screen .bezel {
  margin: 20px auto auto auto;
  width: 200px;
  height: 150px;
  border: solid 4px rgba(0, 0, 0, 0.16);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #333333;
}
.screen .bezel .label {
  color: #444;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
  text-shadow: 0 -1px 2px #222222;
}
.screen .bezel .label span.sp {
  color: #555;
}
.screen .bezel .lcd {
  margin: 2px;
  width: 196px;
  height: 126px;
  /* border: solid 4px rgba(0,0,0,0.16); */

  background: #222;
}
.gbasp .controller {
  width: 250px;
  height: 230px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: solid 4px rgba(74, 74, 74, 0.5);
  background: #dedede;
  -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
.gbasp .controller ul.hinge {
  margin: 0;
  padding: 0;
  width: 250px;
  height: 30px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* border: solid 2px rgba(74,74,74,0.5); */

  background: -webkit-gradient(linear, left top, left bottom, from(rgba(222, 222, 222, 0.8)), to(rgba(72, 72, 72, 0.2)));
  background: -moz-linear-gradient(top, rgba(222, 222, 222, 0.8), rgba(72, 72, 72, 0.2));
  -webkit-box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.gbasp .controller ul.hinge li {
  float: left;
  clear: none;
  margin: 0;
  padding: 0;
  width: 87px;
  height: 30px;
  border-left: solid 1px rgba(74, 74, 74, 0.3);
}
.gbasp .controller ul.hinge li:first-child {
  margin: 0 0 0 18px;
  width: 105px;
}
.gbasp .controller ul.hinge li:last-child {
  width: 18px;
  border-right: solid 1px rgba(74, 74, 74, 0.3);
}
.gbasp .controller .inner {
  margin: 5px auto auto auto;
  width: 240px;
  height: 190px;
  border: solid 1px rgba(0, 0, 0, 0.16);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #4a4a4a;
}
.gbasp .controller .inner .controlpad {
  float: left;
  clear: none;
  width: 80px;
  height: 117px;
}
.gbasp .controller .inner .controlpad .outer {
  position: absolute;
  left: 20px;
  bottom: 80px;
  display: block;
  margin: 0;
  padding: 0;
  width: 82px;
  height: 82px;
  border: solid 5px #AAA;
  -webkit-border-radius: 82px;
  -moz-border-radius: 82px;
  border-radius: 82px;
  background: #e7e4e5;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.gbasp .controller .inner .controlpad .outer .dpad_outer {
  display: block;
  margin: 11px auto;
  padding: 0;
  width: 60px;
  height: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e3e3e), to(#3e3e3e));
  background: -moz-linear-gradient(top, #3e3e3e, #3e3e3e);
  /* -webkit-box-shadow: 0 -1px 2px rgba(0,0,0,0.2); */

}
.gbasp .controller .inner .controlpad .outer .dpad_mask {
  display: block;
  margin: 0;
  padding: 0;
  width: 60px;
  height: 60px;
  /*
          .dpad_upper_left {
            float: left;
            clear: none;
            margin: 0;
            padding: 0;
            width: 21px;
            height: 21px;
            -webkit-border-top-right-radius: 0;
            -webkit-border-bottom-right-radius: 5px;
            -webkit-border-top-left-radius: 21px;
    	      -moz-border-radius-topright: 0;
    	      -moz-border-radius-bottomright: 5px;
    	      -moz-border-radius-topleft: 21px;
    	      border-top-right-radius: 0;
    	      border-bottom-right-radius: 5px;
    	      border-top-left-radius: 21px;
            background: rgb(231,228,229);
          }
          .dpad_upper_right {
            float: right;
            clear: none;
            margin: 0;
            padding: 0;
            width: 21px;
            height: 21px;
            -webkit-border-top-right-radius: 21px;
            -webkit-border-top-left-radius: 0;
    	      -webkit-border-bottom-left-radius: 5px;
    	      -moz-border-radius-topright: 21px;
    	      -moz-border-radius-topleft: 0;
    	      -moz-border-radius-bottomleft: 5px;
    	      border-top-right-radius: 21px;
    	      border-top-left-radius: 0;
            border-bottom-left-radius: 5px;
            background: rgb(231,228,229);
          }
          .dpad_lower_left {
            float: left;
            clear: none;
            margin: 0;
            padding: 0;
            width: 21px;
            height: 21px;
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-right-radius: 0;
            -webkit-border-bottom-left-radius: 21px;
    	      -moz-border-radius-topright: 5px;
    	      -moz-border-radius-bottomright: 0;
    	      -moz-border-radius-bottomleft: 21px;
    	      border-top-right-radius: 5px;
    	      border-bottom-right-radius: 0;
    	      border-bottom-left-radius: 21px;
            background: rgb(231,228,229);
          }
          .dpad_lower_right {
            float: right;
            clear: none;
            margin: 0;
            padding: 0;
            width: 21px;
            height: 21px;
            -webkit-border-top-right-radius: 0px;
            -webkit-border-top-left-radius: 5px;
    	      -webkit-border-bottom-right-radius: 21px;
    	      -moz-border-radius-topright: 0px;
    	      -moz-border-radius-topleft: 5px;
    	      -moz-border-radius-bottomright: 21px;
    	      border-top-right-radius: 0;
    	      border-top-left-radius: 5px;
            border-bottom-right-radius: 21px;
            background: rgb(231,228,229);
          }
          */

}
.gbasp .controller .inner .controlpad .outer .dpad_mask .dpad_corner {
  float: left;
  clear: none;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-topleft: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 20px;
  background: #e7e4e5;
}
.gbasp .controller .inner .controlpad .outer .dpad_mask .tl {
  -webkit-transform: rotate(0deg) scale(1);
}
.gbasp .controller .inner .controlpad .outer .dpad_mask .tr {
  -webkit-transform: rotate(90deg) scale(1);
}
.gbasp .controller .inner .controlpad .outer .dpad_mask .bl {
  -webkit-transform: rotate(-90deg) scale(1);
}
.gbasp .controller .inner .controlpad .outer .dpad_mask .br {
  -webkit-transform: rotate(180deg) scale(1);
}
.gbasp .controller .inner .controlpad .outer .dpad_bt {
  float: left;
  clear: none;
  display: block;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
}
.gbasp .controller .inner .controlpad .outer .up:hover {
  -webkit-transform: rotate(0deg) scale(1);
}
.gbasp .controller .inner .controlpad .outer .down:hover {
  -webkit-transform: rotate(180deg) scale(1);
}
.gbasp .controller .inner .controlpad .outer .dpad_inner {
  float: left;
  clear: none;
  display: block;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#444444));
}
.gbasp .controller .inner .startstop {
  float: left;
  clear: none;
  margin: 0;
  width: 80px;
  height: 119px;
  border: none;
}
.gbasp .controller .inner .startstop .brightness_toggle {
  position: absolute;
  left: 115px;
  bottom: 160px;
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  /* border: solid 3px #CCC; */

  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
  background: rgba(231, 228, 229, 0.8);
}
.gbasp .controller .inner .startstop .brightness_toggle div {
  display: block;
  margin: 3px auto;
  padding: 0;
  width: 12px;
  height: 12px;
  /* border: solid 1px rgba(0,0,0,0.1); */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #3e3e3e;
}
.gbasp .controller .inner .startstop .brightness_toggle div:hover {
  background: rgba(62, 62, 62, 0.8);
}
.gbasp .controller .inner .startstop ul.speaker {
  position: absolute;
  left: 105px;
  bottom: 60px;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
}
.gbasp .controller .inner .startstop ul.speaker li {
  float: left;
  clear: none;
  display: block;
  margin: 3px;
  padding: 0;
  width: 2px;
  height: 2px;
  border: solid 1px #999;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#444444));
}
.gbasp .controller .inner .startstop ul {
  margin: 0;
  padding: 0;
}
.gbasp .controller .inner .startstop ul li {
  margin: 7px 0 0 0;
  width: 100%;
  height: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: rgba(160, 160, 160, 0.5);
}
.gbasp .controller .inner .startstop ul li.buttons {
  margin: 4px 0 0 0;
  width: 100%;
  height: 36px;
  padding: 0;
  background: none;
}
.gbasp .controller .inner .startstop ul li.buttons ul {
  display: block;
  margin: 0;
  padding: 0;
}
.gbasp .controller .inner .startstop ul li.buttons ul li {
  float: left;
  clear: none;
  margin: 0;
  padding: 0;
  width: 36px;
  height: 36px;
  /* border: solid 3px #CCC; */

  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
  background: rgba(231, 228, 229, 0.8);
}
.gbasp .controller .inner .startstop ul li.buttons ul li div {
  display: block;
  margin: 10px 0 0 10px;
  padding: 0;
  width: 16px;
  height: 16px;
  /* border: solid 1px rgba(0,0,0,0.1); */

  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  background: #3e3e3e;
}
.gbasp .controller .inner .startstop ul li.buttons ul li div:hover {
  background: rgba(62, 62, 62, 0.8);
}
.gbasp .controller .inner .startstop ul li.buttons ul li:first-child {
  margin: 0 6px 0 0;
}
.gbasp .controller .inner .ab {
  float: left;
  clear: none;
  width: 80px;
  height: 117px;
}
.gbasp .controller .inner .ab ul {
  position: absolute;
  right: 20px;
  bottom: 100px;
  display: block;
  margin: 0;
  padding: 0;
  width: 82px;
  height: 36px;
  border: solid 5px #AAA;
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
  background: rgba(231, 228, 229, 0.9);
  /* -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2); */

  -webkit-transform: rotate(-15deg) scale(1);
}
.gbasp .controller .inner .ab ul li {
  float: left;
  clear: none;
  margin: 4px 0 0 0;
}
.gbasp .controller .inner .ab ul li div {
  float: left;
  clear: none;
  display: block;
  margin: 3px auto;
  padding: 0;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  background: #910000;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gbasp .controller .inner .ab ul li div:hover {
  background: #870000;
}
.gbasp .controller .inner .ab ul li:first-child {
  margin: 4px 16px 0 8px;
}
.gbasp .controller .inner .ab ul li:last-child {
  margin: 4px 8px 0 0;
}