/*Custom elements*/
h1 {margin-bottom:0;}

h1, h2 {font-family: 'Nova Square', cursive;}

button {
	background: rgb(235,241,246); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,241,246,1)), color-stop(50%,rgba(171,211,238,1)), color-stop(51%,rgba(137,195,235,1)), color-stop(100%,rgba(213,235,251,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C */
	line-height: 1.5em;
	font-size:.8em;
	border-radius:10px;
	}

input {
	line-height: 1em;
	width: 4em;
	}

.description {
	font-family: 'Lora', serif;
	font-style: italic;
	margin-top: 0;
	}

.makeYourGuess {
	float: left; 
	margin-right: 1em;
	}

.makeYourGuess p {
	font-family: 'Nova Square', cursive;
	margin-bottom:0px;
	}
	
.guess_record {
	display: block;
	width:40%;
	padding-top:.5em;
	margin-left: 15.5em; 
	background-image: url(../img/scratchppr.png);
	-webkit-box-shadow: 4px 3px 4px 0px rgba(97,97,97,1);
	-moz-box-shadow: 4px 3px 4px 0px rgba(97,97,97,1);
	box-shadow: 4px 3px 4px 0px rgba(97,97,97,1); 
	}

.guess_record ol {margin-top: 0px;}

.hal-dialog {
	font-family: Courier, monospace;
	line-height: 1em;
	margin-top: 0px;
	margin-bottom:.5em;
	}

.halNum {
	font-family: 'Nova Square', cursive; 
	color: red; 
	font-size: 1.5em;
	}

.ready-go { 
    font-size:100%;
    font-family: Courier, monospace;
    width:25em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;    
    -webkit-animation: typing 1s steps(45, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 1s steps(45, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
	}

.hal-1 {
	float:left;
	width:6em;
	height:6em;
	border:.5em double #B2B2B2;
	border-radius: 50%;
	margin-right:1em;
	background: rgb(254,48,20); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(254,48,20,1) 1%, rgba(246,26,12,1) 19%, rgba(141,0,0,1) 40%, rgba(74,0,0,1) 54%, rgba(0,0,0,1) 77%, rgba(0,0,0,1) 77%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(254,48,20,1)), color-stop(19%,rgba(246,26,12,1)), color-stop(40%,rgba(141,0,0,1)), color-stop(54%,rgba(74,0,0,1)), color-stop(77%,rgba(0,0,0,1)), color-stop(77%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(254,48,20,1) 1%,rgba(246,26,12,1) 19%,rgba(141,0,0,1) 40%,rgba(74,0,0,1) 54%,rgba(0,0,0,1) 77%,rgba(0,0,0,1) 77%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(254,48,20,1) 1%,rgba(246,26,12,1) 19%,rgba(141,0,0,1) 40%,rgba(74,0,0,1) 54%,rgba(0,0,0,1) 77%,rgba(0,0,0,1) 77%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(254,48,20,1) 1%,rgba(246,26,12,1) 19%,rgba(141,0,0,1) 40%,rgba(74,0,0,1) 54%,rgba(0,0,0,1) 77%,rgba(0,0,0,1) 77%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(254,48,20,1) 1%,rgba(246,26,12,1) 19%,rgba(141,0,0,1) 40%,rgba(74,0,0,1) 54%,rgba(0,0,0,1) 77%,rgba(0,0,0,1) 77%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe3014', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
.hal-2 {
	visibility:hidden;
	width:2em;
	height:2em;
	margin:2em;
	border:0px;
	border-radius:50%;
	background: rgb(255,214,12); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,214,12,1) 0%, rgba(253,84,38,1) 32%, rgba(254,48,20,1) 56%, rgba(246,26,12,1) 74%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,214,12,1)), color-stop(32%,rgba(253,84,38,1)), color-stop(56%,rgba(254,48,20,1)), color-stop(74%,rgba(246,26,12,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,214,12,1) 0%,rgba(253,84,38,1) 32%,rgba(254,48,20,1) 56%,rgba(246,26,12,1) 74%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(255,214,12,1) 0%,rgba(253,84,38,1) 32%,rgba(254,48,20,1) 56%,rgba(246,26,12,1) 74%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,214,12,1) 0%,rgba(253,84,38,1) 32%,rgba(254,48,20,1) 56%,rgba(246,26,12,1) 74%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(255,214,12,1) 0%,rgba(253,84,38,1) 32%,rgba(254,48,20,1) 56%,rgba(246,26,12,1) 74%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd60c', endColorstr='#f61a0c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
.chatter {
	-webkit-animation-name: talking;
	-webkit-animation-duration:.35s;
	-webkit-iteration-count:infinite;
	animation-name: talking;
   	animation-duration:.35s;
   	animation-iteration-count: infinite;
	}
/*keyframes for animations*/
@-webkit-keyframes typing {
	from { width: 0 }
	to { width:25em }
	}
@-moz-keyframes typing {
	from { width: 0 }
	to { width:25em }
	}
@-webkit-keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: black }
	}
@-moz-keyframes blink-caret {
	from, to {border-color: transparent}
	50% {border-color:black}
	}
@-webkit-keyframes talking {
	0%   { opacity: 0; visibility: visible;}
	25%	 { opacity: 50%; }
	50%  { opacity: 100%; }
	75%  { opacity: 50%; }
	100% { opacity: 0%; }
	}
@-moz-keyframes talking {
	0%   { opacity: 0; visibility: visible;}
	25%	 { opacity: 50%; }
	50%  { opacity: 100%; }
	75%  { opacity: 50%; }
	100% { opacity: 0%; }
	}