/*note: the hand alignment problem was solved when bootstap was used */

/*this solves the bootstrap conflict*/
#keyboard	* {
  -webkit-box-sizing: initial!important;
     -moz-box-sizing: initial!important;
          box-sizing: initial!important;
}

pre{margin: 0 0 0!important}

/* .bottomDiv{
   position:relative;
   bottom:50px;
   left:150px; this was commented
} */



ul{
	list-style-type: none;
}

#keyboard{
/* float:left; for auto expand main */
clear:both;
width:750px;
height: 262px;
background-color: #D1D5D7;
/* transform: rotateX(30deg); */
margin: 0 auto;
/* margin-top: -10px; */
}
.ul-style{
	padding: 5px;
}

.key1 {
  width: 40px; height:40px;
  /*font-size: 14px;*/
  /*display:block;*/
  background-color:#e3e3e3;
  text-align: left;
  padding-left: 8px;
  padding-bottom: 15px;
  line-height: 29px;
  border-radius:2px;
  float:left; /*to put all li on one line*/ 
  margin-left: 2px;
  margin-bottom:2px;
  cursor: pointer;
}

.key{

  width: 40px; height:30px;

  /*font-size: 14px;*/
  /*display:block;*/

  text-align: left;
  padding-left: 8px;
  padding-bottom: 15px;
  line-height: 40px;
  border-radius:2px;
  float:left; /*to put all li on one line*/ 
  margin-left: 2px;
  margin-bottom:5px;
  cursor: pointer;

	/*display: block;*/
	color: #000;
	font: bold 11pt arial;
	text-decoration: none;
	text-align: center;


	background: #fff;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	text-shadow: 0px 1px 0px #f5f5f5;

	
	line-height: 20px;
	opacity: 0.4;
	/* opacity: 1; */

}



.backspace {width:80px; font-size: 12px;line-height: 40px}
.backspace1 {width:76px; font-size: 12px;line-height: 40px} /* for colemak */
.tab {width: 65px; line-height: 40px; font-size:13px;}
/*.letter{width:30px;}*/
.backslash{width:55px;}
.capslock{width:75px; font-size:12px;}
.enter{width:102px; line-height:40px; text-align: center; padding-left:0;}
.shift-left{width: 96px;line-height: 40px; font-size:13px;}
.shift-right{width: 123px;line-height: 40px; font-size:13px;}
.ctrl{width: 50px; line-height: 40px; font-size:13px;}
.spacebar{width:260px;line-height: 40px;}
.key-def{line-height: 40px;}
.letter{line-height: 40px;}

/* .finger{

 width: 20px;
 border-style: solid;
 float:left;
 border-bottom-width:0;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 background-color: #fff;
}
.finger-1{
	height: 70px;
	margin-top: 60px;

}
.finger-2{
	height: 100px;
	margin-top: 30px;
}
.finger-3{
	height: 130px;
	margin-top: 0px;
}
.finger-4{
	height: 115px;
	margin-top: 15px;
}
.finger-5{
	height: 60px;
	margin-top: 90px;
}
.finger-6{
	height: 60px;
	margin-top: 90px;
}
.finger-7{
	height: 115px;
	margin-top: 15px;
}
.finger-8{
	height: 130px;
	margin-top: 0px;
}
.finger-9{
	height: 100px;
	margin-top: 30px;
}
.finger-10{
	height: 70px;
	margin-top: 60px;
}
.myhands{
	position: relative;
	width: 250px;
	margin: 0 auto;
}

.hand{
	margin:0 5px 0;
	float: left;  
}
.dorsal{
	width: 100px;
	height: 80px;
 	border-style: solid;
 	margin-top: 130px;
 	border-radius: 80px;
 	 border-top-left-radius: 0px;
 	border-top-right-radius: 0px;
 	border-top-width:0;

} */

/* #active{background-color: #4d7ebf;opacity: 1.0; color: #fff} */
.currentKey{background-color: #4d7ebf;opacity: 1.0; color: #fff}
.focus{opacity: 1.0}
.currentShiftKey{background-color: #6ea1e5; opacity: 1.0; color: #fff}
/*.fin-10{background-color: yellow}*/

/*.dual {font-size: 14px; line-height: 20px; width:30px; }*/