/* https://github.com/JSlote/kbd.css */
kbd, .kbd{
    display: inline-block;
    padding: .17em .6em .17em .4em;
    margin: 0 .2em;
    position: relative;
    top: -.2em;
  
    color: #333;
    font: normal .8em/1  sans-serif;
    text-decoration: none;
    box-shadow: inset 0 -.2em .12em -.15em rgba(255, 255, 255, .7);
    cursor:default;
    border-radius: .3em;
    
    background: -ms-radial-gradient(top, ellipse cover,  #ddd 0%,white 100%);
    background: radial-gradient(ellipse at top right,  #ddd 0%,white 100%);
  }
  
  kbd::before, .kbd::before, kbd::after, .kbd::after{
    content:'';
    position:absolute;
    left:-.17em;
    right:-.17em;
    top:.1em;
    bottom:-.4em;
    border-radius: .4em;
  }
  
  /*white highlight*/
  kbd::before, .kbd::before{
    z-index:-1;
  
    border:1px solid gray;
    background: #a8a8a8;
    background: radial-gradient(circle 3em at -1.7em 0, white 0%, white 70% ,rgba(255,255,255,0) 80%);
  }
  
  kbd::after, .kbd::after{
    z-index:-2;
  
    background: #a8a8a8;
    background: radial-gradient(ellipse 1em 1.7em at top right, #aaa 0%, #aaa 70%, #ccc 100%);
  }
   
  .kbd-down{
    top: 0em;
    box-shadow: inset 0 -.2em .3em -.1em rgba(200, 200, 200, .5);
  }
  .kbd-down::before, .kbd-down::after{
    top:-.1em;
    bottom: -.2em;   
  }
  .kbd-down::before{ box-shadow: inset 0px 1px 6px 0px rgba(0,0,0,1); }