@CHARSET "UTF-8";

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-modify: read-only;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    margin:0;
    padding:0;
}

html, body {
    font-family:Helvetica;
    font-size:14pt;
    color: #FFFFFF;
	height: 100%
}

body {
    background-color: #326FA1;	
}

/* BLOCK LEVEL ELEMENTS   */

#entireDrawSurface {
	height: 100%;
}

#screen {
	height: auto;
	min-height: 100%;
	position: relative;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #17344D), color-stop(1, #326FA1));	
}

#screenlock {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color:rgba(0, 0, 0, 0.5);
	display:none;
	z-index: 100000;
}

#splash {
	height: 110px;
	width: 320px;
	position: relative;
	display: block;
}

.content, #content {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
  height: auto;
  padding: 10px;
}



/* Charlie's CSS fit to screen classes*/
.outsideContainer {
	position:absolute;
	bottom:57px;
	top:10px;
	right:5px;
	left:5px;
}

.tableContainer {
	 display:table;
	 width:100%;
	 height:100%;
}

.tableRowContainer {
	 display:table-row;
	 width:100%;
}

.tableCellContainer {
	 display:table-cell;
	 width:100%;
}



/*  OTHER ELEMENTS   */

#welcomeText {
    height: 145px;
    padding: 10px;
}



.standardButtonShell {
   display: table;
   position: relative;
   line-height: 1;
   color: #fff;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0);
   border-bottom: 1px solid rgba(0,0,0,0);
   text-align:center;
  
   width:100%;
   height:100%;
}

#navbar {
    height: 57px;
    vertical-align:bottom;
    position: absolute;
    bottom: 0;
	width: 100%;
	text-align: center;
	left: 0px;
}

.questionText {
    padding: 10px;
    height: 60px;
}

.answers {
    padding: 3px, 5px, 3px, 5px;
}

.button {
	-moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   border-bottom: 1px solid rgba(0,0,0,0.25);
   cursor: pointer;
}

.navButton {
    min-width: 30%;
    background-color: #DBDBDB;
    color: Black;
    height: 26px;
}

.pressed {
	background-color: #326FA1;
	color: #ffffff;
}



.selected {
    background-color: #326FA1;
}

.choosen {
    background-color: #326FA1;
}

.errorBg {
    background-color: #FF9966; /** red tint */
}

#ResultError {
    background-color: #FF9966; /** red tint */
    display: none;
}
.error {
	font-size: 12px;
    color: #ff0000;
}

.textField {
	-webkit-user-select: auto;
	-webkit-touch-callout: auto;
	padding: 1px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	font-family: helvetica, arial, sans serif;
	font-size: 16px;
}

.textFieldSelected {
    background-color: #c7dbff;
    cursor: text;
}

textarea
{
    width:100%;
}
.textwrapper
{
    border:0px solid #999999;
    margin:5px 0;
    padding:3px;
}

#bones {
	height: 340px;
	width: 320px;
	border: 0px;
	margin-top:0px;
    margin-bottom:0px;
	padding: 0px;
	position: relative;
}

#message {
	padding-right: 10px;
	padding-left: 10px;
	height: 65px;
}

.rightHip {
	float: left;
	cursor: pointer;
}

.leftHip {
	float: right;
	cursor: pointer;
}

.rightKnee {
	float: left;
	cursor: pointer;
}

.leftKnee {
	float: right;
	cursor: pointer;
}

.imageClass {
	border: 0px;
	margin: 0px;
	padding: 0px;
	display: block;
	position: absolute;
}

.hidden {
 	  display: none;
 }

.clearBoth {
	clear:both;
	}


.right {
	float: right;
}
.left {
	float: left;
}

.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.vcenter {
	position:absolute;
	top:300px;
	margin-top:-100px;
}


.divHeaderTable
{
            width: 100%;
            padding-bottom:5px;
            display:block;
}
.divHeaderRow
{
            width: 100%; /* add extra that you want to for header column */
            display:block;
            height:105px;
}
.divHeaderColumn
{
            float: left;
            width: 33%;
            display:block;
}
.divTable
{
            width: 100%;
            display:block;
            padding-top:10px;
            padding-bottom:10px;
            padding-right:10px;
            padding-left:10px;
}
.divRow
{
         width: 99%;
         display:block;
         padding-bottom:5px;
         margin-right:auto;
         margin-left:auto;
 }

.divColumn
{
         float: left;
         width: 45%;
         display:block;
}

.divColumn3
{
         float: left;
         width: 33%;
         display:block;
         padding: 0px;
}

.divColumn4
{
         float: left;
         width: 24%;
         display:block;
}

.divColumn10
{
         float: left;
         width: 10%;
         display:block;
         /** border: 1px solid rgba(255,0,0,0.25); */
}

.divColumn20
{
         float: left;
         width: 5%;
         display:block;
}

/**
 * KEYS.css
 *
 * A simple stylesheet for rendering beautiful keyboard-style elements.
 *
 * Author:  Michael Hüneburg
 * Website: http://michaelhue.com/keyscss
 * License: MIT License (see LICENSE.txt)
 */

/* Base style, essential for every key. */

.basekey {

	display: inline;
	display: inline-block;


}

.kyboard, .key {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	/** font: normal 1.75em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif; */
	text-align: center;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	border: none;
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	text-shadow: 0 0 2px rgb(255, 255, 255);
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);

}

.smallkey {
	font: normal 1.02em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
}

.mediumkey {
	font: normal 1.75em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
}

.largekey {
	width: 1.75em;
	font: normal 2.2em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
}

.largekeysmalltext {
	width: 2.96em;
	height: 1.7em;
	vertical-align: middle;
	font: normal 1.5em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
}

.keyboardkey {
	font: normal 0.6em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
	}
.kyboard[title], .key[title] {
	cursor: help;
}

/* Dark style for display on light background. This is the default style. */
.kyboard, .kyboard.dark, .dark-keys .kyboard, .key, .key.dark, .dark-keys .key {
	background: rgb(80, 80, 80);
	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
	color: rgb(250, 250, 250);
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
.kyboard.light, .light-keys .kyboard, .key.light, .light-keys .key {
	background: rgb(250, 250, 250);
	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

.kyboardResult {
	background-color:#ffffff;
	width:80%;
	font: normal 30px Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
	vertical-align : middle;
	color:#000000;
	border:#2FDFFA;
	padding: 5px;
	min-height: 37px;
	-webkit-border-radius: 5px;
}

.toLeft {
	float: left;
}

.toRight {
	float: right;
}



.standardCheckBoxShell {
   display: table;
   position: relative;
   line-height: 1;
   color: #fff;

   text-align:center;
   vetical-align: middle;
   width:97%;
   height:100%;
}

.standardButtonContents
{
	display: table-cell;
	vertical-align:middle;
	text-decoration: none;
}

.standardCheckBoxContents
{
	display: table-cell;
	vertical-align:middle;
	text-decoration: none;
}

.standardText
{
	font-size:large;
	font-weight:normal;
	color:White;
}

.grey.standardButtonContents {
    background-color: #DBDBDB;
    color: Black;
}

.selected.grey.standardButtonContents {
    background-color: #326FA1;
    color: White;
}

.choosen.grey.standardButtonContents {
    background-color: #326FA1;
    color: White;
}


.grey.standardCheckBoxShell {
    background-color: #DBDBDB;
    color: Black;
}

.pressed.standardCheckBoxShell {
    background-color: #326FA1;
    color: White;
}

.back.standardButtonContents, .next.standardButtonContents
{
	width: 100px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}


.back.standardButtonShell
{
	width: 100px;
	height: 45px;
	left: 5px;
	position: absolute;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.claim.standardButtonShell
{
	width: 100px;
	height: 45px;
	left: 110px;
	position: absolute;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.next.standardButtonShell
{
	width: 100px;
	height: 45px;
	right: 5px;
	position: absolute;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.basekey.standardButtonShell
{
	width: 75px;
	height: 60px;
	position: relative;
	display: inline;
	display: inline-block;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.largekey.standardButtonContents {
	width: 75px;
	height: 55px;
	font: normal 2.2em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
}

.smallkey.standardButtonContents {
	width: 75px;
	height: 55px;
	font: normal 1.02em/1 Helvetica, Arial, "Lucida Grande", Lucida,  sans-serif;
}

.button144 {
  height: 144px;
}
.button114 {
  height: 113px;
}
.button104 {
  height: 103px;
}
.button94 {
  height: 93px;
}
.button84 {
  height: 83px;
}

.button74 {
  height: 73px;
}

.button64 {
  height: 63px;
}

.button54 {
  height: 53px;
}

.button44 {
  height: 43px;
}

.button24 {
  height: 23px;
}

.button14 {
  height: 13px;
}

/**
div {
	border: 1px solid rgba(255,0,0,0.25);
	}
	*/

#metaData {
	display:none;
	position:absolute;
	bottom:25px;
	left:110px;
	right:110px;
	height:20px;
	text-align:center;
	font-size:20px;
}

.welcomeButton {
	color: #fff;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0);
	border-bottom: 1px solid rgba(0,0,0,0);
	text-align:center;
	font-size: 20pt;
	font-weight: bold;
	padding: 15px;
	display: block;
}

h1.lockScreenTitle {
	font-size: 24px;
	margin-left: 10px;
}

p.lockScreenBody {
	font-size: 14px;
	margin-bottom: 10px;
}