body {
  padding: 50px;
  font: 14px Helvetica, Arial, sans-serif;
  background-image: url("/images/square_bg.png");
	
}

h1.logo { padding:0px; margin-top:0px; margin-bottom:0px; white-space: nowrap; text-align: center;}

hr { border:1px dashed #ccc; }

#back {
	position:fixed;
	top:-100px;
	left:0px;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	margin-left:auto;
	margin-right:auto;
	z-index:-1;

	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 66%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(66%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%); /* W3C */	
	
}

/* Header */
header, #header { 
	position:fixed; top:0px; left:0px; width:100%; border-bottom:1px solid #333; padding:10px; color:#fff; 
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 88%, #207cca 99%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(88%,#2989d8), color-stop(99%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* IE10+ */
	background: linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

/* Article & Game body */
article, #game {
	padding:10px;
	width:800px;
	background-color: #97E2F4;
	border:1px solid #333;
	border-radius:8px;
	margin-left:auto;
	margin-right:auto;
}

article {
	background-color:#eee;
}

/* Game body */
#game {
	min-height:600px;
	text-align:center;
}

.title { font-size:16px; font-weight:bold; }
.score { font-size:16px; font-weight:normal;  }
.right { float:right; margin-right:20px; }
.left  { float:left; margin-left:10px; }
.center {margin-left:auto; margin-right:auto;}

/* Board and letters */
.board { width:750px; border-top:1px dashed #ccc;  border-bottom:1px dashed #ccc; }
.letters { list-style-type: none; white-space: nowrap; margin:0px; padding:0px; }
.buttons { margin-top:30px; width:200px; display:none; }
.wrapper { display:inline; }
.letter {
    font-size: 32px;
    font-family: Arial, Monospace, sans-serif; 
    color:#ffffff;
    font-weight:bold;
    margin:10px;
    border-radius:4px;
    border:1px solid #333;
	 width:50px;
    height:40px;
    text-align:center;
    vertical-align:middle;
    padding-top:5px;
	-webkit-transform:scale(1,1.0);
	-moz-transform:scale(1,1.0);
	-o-transform:scale(1,1.0);
	-ms-transform:scale(1,1.0);
	transform:scale(1,1.0);	   

	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
	background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */   
      
}

/* Letter effects */
.flip {
	-webkit-transition:-webkit-transform 150ms ease-in-out;
	-moz-transition:-moz-transform 150ms ease-in-out;
	-o-transition:-o-transform 150ms ease-in-out;
	-ms-transition:-ms-transform 150ms ease-in-out;
	transition:transform 150ms ease-in-out;

	-webkit-transform:scale(1,0.0);
	-moz-transform:scale(1,0.0);
	-o-transform:scale(1,0.0);
	-ms-transform:scale(1,0.0);
	transform:scale(1,0.0);	
}

.flop {

	-webkit-transition:-webkit-transform 150ms ease-in-out;
	-moz-transition:-moz-transform 150ms ease-in-out;
	-o-transition:-o-transform 150ms ease-in-out;
	-ms-transition:-ms-transform 150ms ease-in-out;
	transition:transform 150ms ease-in-out;
	
	-webkit-transform:scale(1,1.0);
	-moz-transform:scale(1,1.0);
	-o-transform:scale(1,1.0);
	-ms-transform:scale(1,1.0);
	transform:scale(1,1.0);	
	
}

.ready { 

	background: #81d044; /* Old browsers */
	background: -moz-linear-gradient(top, #81d044 0%, #479113 50%, #81d044 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81d044), color-stop(50%,#479113), color-stop(100%,#81d044)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #81d044 0%,#479113 50%,#81d044 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #81d044 0%,#479113 50%,#81d044 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #81d044 0%,#479113 50%,#81d044 100%); /* IE10+ */
	background: linear-gradient(top, #81d044 0%,#479113 50%,#81d044 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81d044', endColorstr='#81d044',GradientType=0 ); /* IE6-9 */

	/* background-color:#6666C6; */ 

}

.remaining { 
	color:#888;
}

.worth {
	float:right;
	position:relative;
	top:25px;
	font-size:10px;
	color:#333;
}

/* Answers */
.scratch { width:600px; display:none;}

.timer 	{ 
	width:400px; height:34px; border:1px solid #333; padding:0px; float:left; margin-right:20px;
	border-top:3px solid #333;
	border-left:3px solid #333;
	border-bottom:3px solid #CCC;
	border-right:3px solid #CCC;
	background-color:#e1e1e1;
}
.elapsed { width:0%; height:34px; margin:0px; background: #f85032; }
.answers { list-style-type:none; }
.answer input { font-size:24px; border:1px solid #333; font-family:monospace; }

#words {
	width:100%;
	text-align: center;
	margin-top:20px;
	margin-bottom:50px;
}

.word { 
	display:inline;
	margin-left:10px;
	margin-right:10px;
	margin-top:50px;
	font-size:18px;
	padding:2px;
	white-space: nowrap;
}

.text {
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	border-right:1px solid #333;
	border-left:1px solid #333;
	margin:0px;
	padding:4px;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;	
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;	
}
.value {
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	border-right:1px solid #333;
	border-left:0px;
	margin:0px;
	padding:4px;
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;	
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;	
}

.invalid {
	color:#ccc;
}

.yeah {
	background: #bfd255; /* Old browsers */
	background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
	background: linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */

	/* background-color:#66c666; */

}

.nyah {	
	background: #f85032; /* Old browsers */
	background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
	background: linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */

	/* background-color:#c66666; */

}

.wowz {
	background: #fceabb; /* Old browsers */
	background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
	background: linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */

}

#new {
	display:none;
	width:320px;
	border: 1px solid #333;
	font-size: 18px;
	font-style: italic;
	padding: 10px;
	font-weight:bold;

	text-shadow: 0px 1px 0px #e5e5ee;

	background: #fceabb; /* Old browsers */
	background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
	background: linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */

	border-radius:4px;
	
	cursor: pointer;
	
}

#options {

	display:none;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:500px;
	font-size: 18px;
	font-style: italic;
	padding: 10px;
	min-height: 50px;
	font-weight:bold;
	border: 1px solid #333;
	color:#1c1c1c;	
	text-shadow: 0px 1px 0px #e5e5ee;	
	border-radius:4px;

}

#gametype {
	float:left;
	margin-left:20px;
}

#timelimit {
	float:right;
	margin-right:20px;
}

#options ul {
	margin:0px;
	margin-top:10px;
	padding:0px;
	list-style:none;
}

#options li {
	display:inline;
	color:#777;	
	font-weight:bold;
	margin:5px;
	cursor: pointer;
	border:1px solid #333;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:4px;
	padding-right:4px;
	border-radius:4px;
	
	background: rgb(226,226,226); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

}

#options li.selected {
	color:#1c1c1c;	

	background: #bfd255; /* Old browsers */
	background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
	background: linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */

}



#instructions {
	display:none;
	width:700px;
	margin-top:50px;
	font-size: 14px;
	padding: 10px;
	background-color: #ccc;
	border:1px solid #333;
	clear:both;
	
	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
	background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */   

	border-radius:4px;

}

#instructions p {
	margin:0px;
	display:none;
}

#close {
	float:right;
	border:1px solid #aaa;
	background-color:#eee;
	padding:4px;
	border-radius:2px;
	font-weight:bold;
	color:#aaa;
	font-family:sans-serif,verdana;
	position:relative;
	top:-4px;
	left:4px;
	cursor: pointer;
}


footer, #footer {
	position:fixed;
	width:100%;
	height:20px;
	left:0px;
	bottom:0px;
	margin:0px;
	padding:10px;
	color:white;
	text-align:center;
	border-top:1px solid #333; 
	
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 88%, #207cca 99%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(88%,#2989d8), color-stop(99%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* IE10+ */
	background: linear-gradient(-45deg, #1e5799 0%,#2989d8 88%,#207cca 99%,#7db9e8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
}

.footnotes {
	width:500px;
}

.footanchor {
	color:#fff;
}

.terminal {
	margin-left:10px;
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
	padding-bottom:0px;
	border:1px solid #ddd;
	background-color:#2E2633;
	color:#eee;
	font-family:monospace,courier;
	
}

#facebook {
	position:fixed;
	bottom:10px;
	left:10px;
	z-index: 10;
}

#twitter {
	position:fixed;
	bottom:5px;
	right:10px;
	z-index: 10;
}

.fb-like {
	display:inline;
}