#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

video {
  width: 100%;
  height: auto;
}

header { background-color: #FE7800; color:white; font-size:2em; }
header img { height:40px; }

.myCenter {
  position: absolute;
  text-align: center;
  margin: auto;
  height:390px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.myLock {
  display: inline-block;
  text-align: center;
  padding: 0px;
  margin: auto;
  background: transparent;
}
.myLock .lockInset {
  display: inline-block;
  position: relative;
  padding: 8px;
  background: linear-gradient(white, #DCD3CA);
  border-radius: 15px;
  box-shadow: inset 0 -8px 4px -4px #B1AAA1, 0 7px 10px rgba(0, 0, 0, 0.07), 0 14px 10px rgba(0, 0, 0, 0.07), 0 20px 10px rgba(0, 0, 0, 0.07), 0 27px 10px rgba(0, 0, 0, 0.07), 0 34px 10px rgba(0, 0, 0, 0.07), 0 2px 3px 1px rgba(0, 0, 0, 0.5);
  width: 100%;
}
.myLock .lockLine {
  position: absolute;
  margin: auto -8px;
  width: 100%;
  top: 0px;
  bottom: 0px;
  height: 4px;
  background: darkorange;
}
.myLock .lockWrapper {
  text-align: center;
  position: relative;
  background: rgba(0,0,0,0.85);
  background: linear-gradient(black 13%, #403C3A, black 75%, #110C14, black 85%);
  border-radius: 8px;
  height: 150px;
  box-shadow: inset 0 0 10px 2px black;
}
.myLock .dial {
  display: inline-block;
  vertical-align: top;
  height: 150px;
  width: 40px;
  padding-top: -50px;
  margin: 0px 7px;
  background: linear-gradient(#000000 0%, #000006 3%, #08000d 4%, #292527 7%, #55514c 9%, #847f76 11%, #979289 12%, #bab3a9 15%, #d9cfc6 17%, #f4eae1 19%, #fff4ec 20%, #fffffc 22%, #ffffff 24%, #fffffe 33%, #fffdf5 35%, #fef3eb 37%, #d4ccc2 45%, #ada69d 54%, #726d66 65%, #595550 71%, #4f4b47 74%, #4b4743 76%, #4b4743 79%, #4f4b47 80%, #6a665f 84%, #6d6861 85%, #6a665f 88%, #65605a 89%, #54504b 91%, #0d0711 98%, #02000a 99%, #000004 100%);
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top: none;
  border-bottom: none;
  border-left-image: linear-gradient(white, black);
  overflow: hidden;
  font-size: 30px;
  font-family: arial;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.1);
  color: #827D74;
  cursor: pointer;
}
.myLock .dial ol {
  display: inline;
  position: relative;
  top: -32px;
}
.myLock .dial ol li {
  display: inline-block;
  position: relative;
  font-weight: 600;
  display: block;
  margin: 0 auto;
  height: 51px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.myLock .shadow {
  pointer-events: none;
  position: absolute;
  top: 0px;
  background: linear-gradient(black 5%, transparent 40%, transparent 60%, black 100%);
  border-radius: 8px;
  height: 150px;
  width: 100%;
}
.myLock .btnEnter {
  font-size: 25px;
  font-family: arial;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  margin: auto;
  width: 100%;
  margin-top: 15px;
  display: table;
  padding: 5px 0px;
  background: linear-gradient(white, #DCD3CA);
  border-radius: 15px;
  box-shadow: inset 0 -8px 4px -4px #B1AAA1, 0 7px 10px rgba(0, 0, 0, 0.07), 0 14px 10px rgba(0, 0, 0, 0.07), 0 20px 10px rgba(0, 0, 0, 0.07), 0 27px 10px rgba(0, 0, 0, 0.07), 0 34px 10px rgba(0, 0, 0, 0.07), 0 2px 3px 1px rgba(0, 0, 0, 0.5);
}
.myLock .btnEnter:active {

}

.c_o { background-color: orange!important; color: orange!important; text-shadow: none!important; }
.c_r { background-color: red!important;color: red!important; text-shadow: none!important; }
.c_v { background-color: green!important; color: green!important; text-shadow: none!important;}
.c_b { background-color: blue!important; color: blue!important; text-shadow: none!important;}
.c_j { background-color: yellow!important; color: yellow!important; text-shadow: none!important;}
.c_n { background-color: black!important; color: black!important; text-shadow: none!important;}