/* STYLESHEET FILE DESCRIPTION: Virtual keyboard */

#kb {
	width: 443px;
	height: 364px;
	padding: 25px 0 0 25px;
	z-index: 999;
	display: none;
}

#kb.b-shown {display: block;}

#kb.right-1 {background: url('../images/generic/kb-bg-right-1.png') no-repeat 7px 7px !important;}
#kb.right-2 {background: url('../images/generic/kb-bg-right-2.png') no-repeat 7px 7px !important;}
#kb.right-3 {background: url('../images/generic/kb-bg-right-3.png') no-repeat 7px 7px !important;}

#kb.left-1 {background: url('../images/generic/kb-bg-left-1.png') no-repeat 0 7px !important;}
#kb.left-2 {background: url('../images/generic/kb-bg-left-2.png') no-repeat 0 7px !important;}
#kb.left-3 {background: url('../images/generic/kb-bg-left-3.png') no-repeat 0 7px !important;}

#kb.top-1 {background: url('../images/generic/kb-bg-top-1.png') no-repeat 6px 0 !important;}
#kb.top-2 {background: url('../images/generic/kb-bg-top-2.png') no-repeat 6px 0 !important;}
#kb.top-3 {background: url('../images/generic/kb-bg-top-3.png') no-repeat 6px 0 !important;}

#kb.bottom-1 {background: url('../images/generic/kb-bg-bottom-1.png') no-repeat 6px 7px !important;}
#kb.bottom-2 {background: url('../images/generic/kb-bg-bottom-2.png') no-repeat 6px 7px !important;}
#kb.bottom-3 {background: url('../images/generic/kb-bg-bottom-3.png') no-repeat 6px 7px !important;}


/* FUNCTIONAL BUTTONS
######################################### */
#kb .function {
	width: 118px;
	height: 37px;
	border-radius: 3px;
	background-color: #4d4d4d;
}

#kb .function .icon {
	width: 58px;
	height: 38px;
}

#kb-left .icon,
#kb-right .icon,
#kb-backspace .icon,
#kb-caps .icon {
	background-image: url('../images/generic/kb-function.png');
	background-repeat: no-repeat;
}

#kb-backspace .icon,
#kb-caps .icon,
#kb-mode .icon, 
#kb-lang .icon {
	margin-left: 48px;
}

#kb-backspace .legend,
#kb-caps .legend,
#kb-mode .legend, 
#kb-lang .legend {
	width: 58px;
	height: 38px;
	background-image: url('../images/generic/legend.png');
	background-repeat: no-repeat;
}

/* Left, Right */
#kb-left,
#kb-right {
	width: 58px !important;
}

#kb-left {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

#kb-right {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

#kb-left .icon {background-position: 0 0;}
#kb-right .icon {background-position: 0 -38px;}

#kb-left {margin: 4px 0 0 0;}
#kb-right {margin: 4px 0 0 60px;}

#kb-backspace {margin-top: 52px;}
#kb-caps {margin-top: 100px;}
#kb-mode {margin-top: 148px;}
#kb-lang {margin-top: 196px;}

/* Backspace */
#kb-backspace .icon {background-position: 0 -76px;}
#kb-backspace .legend {background-position: 10px -106px;}

/* Caps */
#kb-caps .icon {background-position: 0 -114px;}
#kb-caps .legend {background-position: 10px -156px;}

#kb-caps .status {
	width: 8px;
	height: 8px;
	margin: 5px 0 0 103px;
	border-radius: 8px;
	background-color: #fff;
	opacity: 0.2;
	border: 1px solid #4d4d4d;
}

.caps #kb-caps .status {
	background-color: #8cc63f;
	border-collapse: #164872;
	opacity: 1;
}

/* Mode */
#kb-mode .icon,
#kb-lang .icon {
	font-size: 24px;
	line-height: 40px;
	text-align: center;
}

#kb-mode .legend {background-position: 10px -206px;}

/* Language */
#kb-lang .legend {background-position: 10px -256px;}


/* KEYS
######################################### */
#kb .key,
#kb-key-focus {
	width: 44px;
	height: 44px;
}

#kb-key-focus {
	margin: 24px 0 0 24px;
}

#kb .key {
	text-align: center;
	line-height: 44px;
	font-size: 28px;
}

#kb.caps .key {text-transform: uppercase;}

#kb .key.space {
	background-image: url('../images/generic/kb-space.png');
	background-repeat: no-repeat;
	background-position: 50% 24px;
}

#kb-1-1, #kb-key-focus.kb-1-1 {top: 0; left: 132px;}
#kb-1-2, #kb-key-focus.kb-1-2 {top: 0; left: 180px;}
#kb-1-3, #kb-key-focus.kb-1-3 {top: 0; left: 228px;}
#kb-1-4, #kb-key-focus.kb-1-4 {top: 0; left: 276px;}
#kb-1-5, #kb-key-focus.kb-1-5 {top: 0; left: 324px;}
#kb-1-6, #kb-key-focus.kb-1-6 {top: 0; left: 372px;}

#kb-2-1, #kb-key-focus.kb-2-1 {top: 48px; left: 132px;}
#kb-2-2, #kb-key-focus.kb-2-2 {top: 48px; left: 180px;}
#kb-2-3, #kb-key-focus.kb-2-3 {top: 48px; left: 228px;}
#kb-2-4, #kb-key-focus.kb-2-4 {top: 48px; left: 276px;}
#kb-2-5, #kb-key-focus.kb-2-5 {top: 48px; left: 324px;}
#kb-2-6, #kb-key-focus.kb-2-6 {top: 48px; left: 372px;}

#kb-3-1, #kb-key-focus.kb-3-1 {top: 96px; left: 132px;}
#kb-3-2, #kb-key-focus.kb-3-2 {top: 96px; left: 180px;}
#kb-3-3, #kb-key-focus.kb-3-3 {top: 96px; left: 228px;}
#kb-3-4, #kb-key-focus.kb-3-4 {top: 96px; left: 276px;}
#kb-3-5, #kb-key-focus.kb-3-5 {top: 96px; left: 324px;}
#kb-3-6, #kb-key-focus.kb-3-6 {top: 96px; left: 372px;}

#kb-4-1, #kb-key-focus.kb-4-1 {top: 144px; left: 132px;}
#kb-4-2, #kb-key-focus.kb-4-2 {top: 144px; left: 180px;}
#kb-4-3, #kb-key-focus.kb-4-3 {top: 144px; left: 228px;}
#kb-4-4, #kb-key-focus.kb-4-4 {top: 144px; left: 276px;}
#kb-4-5, #kb-key-focus.kb-4-5 {top: 144px; left: 324px;}
#kb-4-6, #kb-key-focus.kb-4-6 {top: 144px; left: 372px;}

#kb-5-1, #kb-key-focus.kb-5-1 {top: 192px; left: 132px;}
#kb-5-2, #kb-key-focus.kb-5-2 {top: 192px; left: 180px;}
#kb-5-3, #kb-key-focus.kb-5-3 {top: 192px; left: 228px;}
#kb-5-4, #kb-key-focus.kb-5-4 {top: 192px; left: 276px;}
#kb-5-5, #kb-key-focus.kb-5-5 {top: 192px; left: 324px;}
#kb-5-6, #kb-key-focus.kb-5-6 {top: 192px; left: 372px;}

#kb-6-1, #kb-key-focus.kb-6-1 {top: 240px; left: 132px;}
#kb-6-2, #kb-key-focus.kb-6-2 {top: 240px; left: 180px;}
#kb-6-3, #kb-key-focus.kb-6-3 {top: 240px; left: 228px;}
#kb-6-4, #kb-key-focus.kb-6-4 {top: 240px; left: 276px;}
#kb-6-5, #kb-key-focus.kb-6-5 {top: 240px; left: 324px;}
#kb-6-6, #kb-key-focus.kb-6-6 {top: 240px; left: 372px;}


/* ACTIONS
######################################### */
#kb-actions {
	width: 428px;
	height: 50px;
	margin-top: 305px;
}

#kb-actions .extra {float: left; position: relative;}
#kb-actions .yesno {float: right; position: relative;}