/* common elemens */
@import url("reset.css");


#keyboard {
    margin:auto;
    margin-top:5px;
    padding:5px;
    width:240px;
    
    color:black;
    font-weight:medium;
    font-size:1.7em;
    /*text-shadow: 0px 1px rgba(256,256,256,0.8);*/
}


.key {
    width:80px;
    height:55px;
    float:left;
    xborder:1px solid gray;
    background:transparent url('./keyCancel@2x.png') left top;
    background-size: 80px 55px;    
    text-align:center;
    line-height:59px;
    position:relative;
}

.key:hover{
/*    -webkit-filter: brightness(-10%);*/
}

.highlightedKey {
    width:80px;
    height:55px;
    float:left;
    xborder:1px solid gray;
    background:transparent url('./keyCancel@2x.png') left top;
    background-size: 80px 55px;    
    text-align:center;
    line-height:59px;
    position:relative;
    opacity:0.6;
}
.blurKey {
    /*background:transparent url('./keyCancel@2x.png') left top;*/
    /*-webkit-filter: blur(3px);*/
    opacity:0.5;
}


.black-overlay:before {
    position:absolute;
    z-index:10;
    content:' ';
    border-radius:5px;
    background-color:rgba(0,0,0,0.7);
    top:0px;
    left:0px;
    margin:5px;
    width:70px;
    height:45px;
}

.key_number, .key_color, .key_shape {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
}

.key_number, .key_shape {
    width:70px;
    line-height:70px;
}
.key_number {
    text-align:right;
    padding-right:10px;
    background:transparent url('./TriPin-EmptyDigitSide@2x.png') no-repeat left top;
    background-size: 80px 55px;
}
.key_shape {
    text-align:left;
    background:transparent url('./TriPin-EmptyShapeSide@2x.png') no-repeat left top;
    background-size: 80px 55px;    
    padding-left:10px;
    text-shadow: 0px -1px rgba(0,0,0,0.8);
    position:relative;
}
.key_shape img {
    position:absolute;
    bottom:8px;
    left:8px;
}
.key_color img {
    position:absolute;
    top:0px;
    left:0px;    
    z-index:2;
}


#zoomed-key {
    width:240px;
    height:165px;
    margin:auto;
    /*background-color:rgba(0,0,0,0.2);*/
    position:absolute;
    z-index:20;
    display:none;

}

#zoomed-key .key_number, #zoomed-key .key_color, #zoomed-key .key_shape {
    z-index:10;
}
#zoomed-key .key_number, #zoomed-key .key_shape {
    width:200px;
    line-height:210px;
}
#zoomed-key .key_number {
    text-align:right;
    width:210px;
    padding-right:20px;
    background:transparent url('./TriPin-EmptyDigitSide-3X@2x.png') no-repeat left top;
    background-size: 240px 165px;
    left:20px;
    top:40px;
    font-size:4.5em;    
}
#zoomed-key .key_shape {
    left:-20px;
    top:40px;
    text-align:left;
    padding-left:30px;
    background:transparent url('./TriPin-EmptyShapeSide-3X@2x.png') no-repeat left top;
    background-size: 240px 165px;
}
#zoomed-key .key_shape img {
    position:absolute;
    bottom:24px;
    left:24px;
}

#zoomed-key #closeZoomButton {
    position:absolute;
    top:-15px;
    left: -15px;
    z-index:100;
    width:30px;
    height:30px;
    background-size: 30px 30px;
    background:transparent url('PrivateBrowser_closeInfoButton.png') no-repeat left top;
}

#zoomed-key #eventHandling div {
    position:absolute;
    z-index:100;
}

#zoomed-key #eventHandling .event_number {
    top:85px;
    left:140px;
    height:110px;
    width:100px;
    
}
#zoomed-key #eventHandling .event_shape {
    top:85px;
    left:0px;
    height:110px;
    width:100px;

/*    background-color:rgba(0,256,0,0.4);*/
}
#zoomed-key #eventHandling .event_color {
    top:15px;
    left:0px;
    height:55px;
    width:240px;

}

/*
.highlightedKey {
    position:absolute;
    top:5px;
    left:5px;
    
    z-index:1000;
    
    border-radius:5px;
    background-color:rgba(0,0,0,0.5);
    width:70px;
    height:45px;
    
}
*/


#key_cancel {
    font-size:0.6em;
}
/*
#key_back {
    background-image:url('./keyBack@2x.png');
    background-repeat:no-repeat;
    background-position: center top;
    background-size: 80px 55px;
}
*/

#keysPlaceHolder {
    margin:auto;
    background-size:250px 70px;
    width:250px;
    height:70px;
}
#preloader {
    margin:auto;
    background-size:250px 70px;
    width:250px;
    height:0px;
    background-position: -9999px -9999px;
}

.password0 {
    background:transparent url('./passwordKeyBackground@2x.png') left top;
}
.password1 {
    background:transparent url('./passwordKeyBackground_1@2x.png') left top;
}
.password2 {
    background:transparent url('./passwordKeyBackground_2@2x.png') left top;
}
.password3 {
    background:transparent url('./passwordKeyBackground_3@2x.png') left top;
}
.password4 {
    background:transparent url('./passwordKeyBackground_4@2x.png') left top;
}


/* Long Password */
#longPasswordContainer {
    margin:auto;
    margin-top:100px;
    
    width:300px;
    height:62px;
    
    background:transparent url('./onesafemac-door-login-background.png') left top;
    background-size: 300px 62px;
    position:relative;
}
#passwordInputDiv {
    width:210px;
    height:34px;
    position:absolute;
    top:11px;
    left:10px;
}

#passwordInputDiv input {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    border:1px solid #79acda;
    font-size:1em;
    box-shadow: 0px 0px 3px 1px #79acda;
    background-color:white;
    border-radius:2px;
}

#submitbutton, #rotarySubmitButton {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    /*  
      color: #ffffff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

      background-color: #006dcc;
      background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
      background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
      background-image: -o-linear-gradient(top, #0088cc, #0044cc);
      background-image: linear-gradient(to bottom, #0088cc, #0044cc);
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
      border-color: #0044cc #0044cc #002a80;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
      *background-color: #0044cc;
    */  
      /* Darken IE7 buttons by default so they stand out more given they won't have borders */

      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
      
    width:60px;
    height:34px;
    position:absolute;
    top:13px;
    right:10px;

}

#submitbutton:hover, #rotarySubmitButton:hover {
  
  background-color: #e6e6e6;
  *background-color: #d9d9d9;

  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
/*
  color: #ffffff;
  background-color: #0044cc;
  *background-color: #003bb3;
  
    background-color: #003399 \9;
*/    
}

#submitbutton:active, #rotarySubmitButton:active {

  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
  
  background-color: #cccccc \9;

  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);

/*
  color: #ffffff;
  background-color: #0044cc;
  *background-color: #003bb3;
  
    background-color: #003399 \9;
*/    
}


#passwordInputDiv:focus {
    box-shadow: 10px 10px 5px #888888;
}


/* Rotary lock */
#rotaryLockContainer {
    width:310px;
    height:45px;
    background:transparent url('./WheelLogin-Screen.png') no-repeat left top;
    background-size:265px 45px;

    margin:auto;
    margin-top:10px;
    margin-bottom:7px;
}

#rotarySubmitButton {
    width:35px;
    position:absolute;
    top:14px;
    left:265px;
    padding: 2px 5px;
}

#rotaryLockContainer div {
    padding:5px 11px;
}

#rotaryLockContainer input {
/*    border:1px solid red;*/
    border:none;
    background-color:transparent;    
    float:left;
    height:30px;
    text-align:center;
    font-size:1em;
    line-height:35px;
    color:#1e4f79;
}

#rotaryLockContainer input:nth-child(1), #rotaryLockContainer input:nth-child(4) {
    width:52px;
}

#rotaryLockContainer input:nth-child(2), #rotaryLockContainer input:nth-child(3) {
    width:65px;
}

#combinationDecoration {
    width:240px;
    height:240px;
    margin:auto;
}

#combinationDecoration div.deco {
    width:100px;
    height:100px;
    background:transparent url('./WheelLogin-Wheel.png') left top;
    background-size:100px 100px;
    float:left;
    margin:10px;
    position:relative;
}

#combinationDecoration div.deco div {
    display:none;
    position:absolute;
    top:37px;
    left:38px;
    width:25px;
    height:25px;
    background:transparent url('./Done_Toolbar_Button@2x.png') left top;
    background-size:25px 25px;
    
}

