/* keyboard - demo CSS */
html, body, div, input, textarea {
 font-family: Verdana,Tahoma,Segoe,sans-serif;
 font-size: 14px;
}

body { background: #333; color: #ddd; height: 98%; margin: 0 auto; padding: 0; }
a:link { color: #9fcdff; text-decoration: none; }
a:hover { color: #fff; }
a:visited,a:active { color: #53a5ff; }

#page-wrap { display: block; width: 90%; margin: 0 auto; text-align: center; height: 98%; min-height: 350px; }

h1, h2, h3, h4 { color: #ddd; text-align: center; }
h2 { margin: 5px; font-size: 130%; cursor: pointer; }

#nav { display: block; width: auto; text-align: center; margin: 20px auto 0 auto; line-height: 45px; }
#nav a { text-align: center; background: #000; color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; white-space: nowrap; }
#nav a.git { background: #006; }
#nav a.play { background: #060; }
#nav a.issue { background: #600; }
#nav a:hover,#nav a.current{ background: #555; }

#switcher, #wrap { width: 260px; margin: 10px auto; }
#switcher a { margin: 0 auto; }
#wrap { margin-top: 30px; }

#console { width: 90%; list-style-type: none; margin: 0 auto; padding: 0; }
#console li { text-align: center; }

.block { width: 270px; display: inline-block; height: 170px;  padding-left: 30px; padding-bottom: 30px; text-align: center; vertical-align: top; position: relative; }
.block2 { margin: 0 auto; text-align: center; }
textarea, input { width: 260px; background: #333; color: #ddd; border: #777 1px solid; padding: 5px 0; }
.hiddenInput { display: inline-block; width: 240px; }
.code { display: none; }
.attn { color: #c00; }

#nav-demo .block { height: 250px; padding: 0; }
#nav-demo input, #nav-demo textarea { margin: 2px; }

#showcode {
 display: none;
 background: #333;
 overflow: auto;
 width: 100%;
 margin: 0 auto;
 border: #555 1px solid;
 z-index: 1;
}
#showcode pre {
 padding: 0 10px;
 text-align: left;
}
#showcode .ct { font-weight: 700; color: #9fcdff; }
#showcode .comment { color: #92d050; }

.oldie #page-wrap { width: 900px; }
.oldie .block { float: left; display: inherit; }
.oldie #showcode { width: 850px; }

.clear { clear: both; }

/* used .alignRight instead of #num (for the number pad) here because the virtual keyboard
 strips IDs from the input - ID's are supposed to be unique! */
.alignRight { text-align: right; }

#info { margin: 220px auto 0 auto; width: 400px; padding-left: 20px; }
#info ul { padding-left: 15px; }
#info .key { font-weight: 700; color: #59b4d4; }
.underline { text-decoration: underline; }

#mobile #wrap { height: 200px; }
#mobile #switcher { max-width: 920px; width: auto; margin: 0 auto; }
#mobile #switcher .swatch { width: 180px; height: 80px; display: inline-block; margin: 0; }
.oldie #switcher .ui-body { float: left; clear: none !important; }
#mobile #switcher fieldset { text-align: center; white-space: nowrap; margin: 0; height: 20px; }
#mobile #switcher input { visibility: hidden; }
#mobile .ui-icon-radio-on, #mobile .ui-icon-radio-off { display: none; }
#mobile #switcher .ui-btn-active { box-shadow: 0 1px 5px rgba(255, 255, 255, 0.7); }
#mobile #switcher .ui-controlgroup-label { display: block; margin: 0 0 15px 0; width: auto; }
#mobile #switcher .ui-btn-inner { padding: 0; }
#mobile #switcher .ui-radio, #mobile #switcher .ui-radio label { font-size: 10px; width: 20px; height: 20px; margin: 0; display: inline-block; }
#mobile #switcher .ui-btn-text { position: relative; top: 2px; left: 5px; width: 10px; }

#footer { height: 150px; }
#footer2 div { margin: 220px auto; width: 650px; text-align: center; }

/* tooltip (jatt) */
#tooltip {
 width: 250px;
 color: #dddddd;
 background: #444;
 border: 1px solid #777;
 padding: 8px;
 display: none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: center;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
}

/* close button */
#tooltip .close {
 display: none;
}