html, body {
margin:				0px;
padding:			0px;
height:				100%;
border:				none;
}

body {
background-color: #fff;
-webkit-text-size-adjust: 100%;
}

a:link				{color: #666;}
a:visited			{color: #666;}
a:hover				{color: #999;}

.logo {
display: 			inline-block;
float: 				left;
margin:				4px 20px 4px 0px;
}

.instruxBox {
display:			none;
width: 				680px;
text-align: 		left;
min-height: 		30px;
margin: 			0px auto 30px auto;
border:         	1px solid #ddd;
border-radius: 		24px;
box-shadow:			3px 3px 10px rgba(0,0,0,0.4);
padding:			20px 20px 20px 30px;
background-color: 	#f9f9f9;
}

	.print-instruxBox {
	background-color:	#fff !important;
	border-color:		#000 !important;
	box-shadow:			none;
	}

#instrux {
width: 				650px;
font-family: 		'arial', 'helvetica', sans-serif;
font-weight: 		bold;
font-size: 			24px;
color: 				#333;
}

h1.title {
display: 			inline-block;
width:				580px;
white-space:		nowrap;
overflow:			hidden;
float: 				left;
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			20px;
font-weight:		normal;
margin:				14px 0px 0px 20px;
color:				#000;
}

.group {
display: 			inline-block;
box-sizing: 		border-box;
border: 			2px solid #999;
width: 				836px;
	max-width: 				836px;
height: 			80px;
	max-height: 			80px;
padding-top:		10px;
background-color: 	#eee;
font-family:		Archivo Narrow, arial, helvetica, san serif;
font-size:			23px;
line-height: 		100%;
margin:				0px 0;
color:				#000;
border-radius: 		12px;
white-space: 		nowrap;
text-overflow: 		clip;
overflow: 			hidden;
}

.gpName {
font-weight: 		bold;
}

.word {
display: 			inline-block;
box-sizing: 		border-box;
border: 			2px solid #ccc;
background-color: 	#f5f5dc;
background-color: 	#eee;
width: 				200px;
height: 			80px;
font-family:		Archivo Narrow, arial, helvetica, san serif;
font-weight: 		bold;
font-size:			23px;
line-height: 		80px;
margin:				6px;
color:				#000;
border-radius: 		12px;
cursor: 			pointer;
overflow: 			hidden;
white-space: 		nowrap;
text-overflow: 		clip;
}

.word:hover {
background-color: 	#fafaed;
background-color: 	#f3f3f3;
}

#results {
margin:  			10px;
}

.result {
display:  			inline-block;
text-align: 		center;
height: 			30px;
width:  			30px;
line-height: 		30px;
font-family:		arial, helvetica, san serif;
color: 				red;
font-size: 			19px;
font-weight: 		bold;
}

.selected {
background-color: 	#ccc !important;
}

img.button {
cursor: 			pointer;
}

.share:link         {color: #999;}
.share:visited      {color: #999;}
.share:hover        {color: #bbb;}

.shareOptions {
margin:				18px 0px;
}

.shareOptions td {
padding:			0px 10px;
}

.linkBox {
width: 				450px;
font-size: 			14px;
background-color: 	#eee;
border: 			1px solid #ccc;
padding: 			4px;
margin: 			0px;
}

.copyright {
font-family: 'arial', 'helvetica', sans-serif;
font-size: 11px;
margin: 10px;
color: #000;
}

#title { max-width: 580px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#instructions {
font-family:		'arial', 'helvetica', sans-serif;
font-size:			14px;
line-height:		100%;
height: 			30px;
background-color: 	#fffdd4;
}

#instructions a:link 	{color: #36f;}
#instructions a:visited {color: #36f;}
#instructions a:hover 	{color: #69f;}

#mobileTitle {
display: 			none;
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			20px;
color:				#000;
margin: 	 		20px 0;
}

@media screen and (max-device-width: 1000px) { 
	.noMobile { display: none; }
	#mobileTitle { display: block; }
	}