style.css

div#main
{
	margin: 20px auto 0 auto;
	
	width: 896px;
	overflow-x: hidden;
	height: 680px;
}


div#header
{
	height: auto;
}
h3#welcome
{
	font-family: cursive;
	text-align: center;
}
img#headerimage
{
	width: 620px;
	height: 90px;
	margin-left: 138px;
}
a#whatislink
{
	color: #047;
}
a#whatislink:hover
{
	color: #169;
}
a#whatislink:active
{
	color: #b55;
}
h4#whatisheader
{
	text-align: center;
}
div#whatis
{
	display: none;
	text-align: center;
}

div#maininner
{
	width: 1792px;
	height: 400px;
	
	transition-duration: 1s;
}

h3.instructions
{
	text-align: center;
}

div#choices
{
	width: 896px;
	height: 400px;
	float: left;
}

div#choice1
{
	width: 10%;
	height: 25px;
	
	margin-left: 45%;
	
	text-align: center;
	
	position: relative;
}

div#choice2
{
	display: none;
	
	width: 10%;
	height: 25px;
	
	margin-left: 45%;
	
	text-align: center;
	
	position: relative;
	
	top: -25px;
}

div#distance
{
	display: none;
	
	width: 40%;
	height: 25px;
	
	margin-left: 30%;
	
	text-align: center;
	vertical-align: middle;
	
	position: relative;
	
	top: -50px;
}
div#leftarrowcontainer, div#rightarrowcontainer, div#distancetextcontainer
{
	height: 25px;
	float: left;
}
div#leftarrowcontainer, div#rightarrowcontainer
{
	width: 40%;
}
div#distancetextcontainer
{
	width: 20%;
	display: table;
}
div#distancetextinner
{
	vertical-align: middle;
	display: table-cell;
}
span#distancetext
{
	font-size: 16pt;
	font-family: sans-serif;
}
img#leftarrow, img#rightarrow
{
	width: 100%;
	height: 25px;
}
img#leftarrow
{
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}
img#rightarrow
{
}

div#continue
{
	display: none;
	
	width: 10%;
	height: 25px;
	
	margin-left: 45%;
	
	text-align: center;
}

div#game
{
	width: 896px;
	height: 400px;
	float: left;
}

span.inlinetitle
{
	text-decoration: underline;
}
span.emphasis
{
	font-style: italic;
}

div#draggables, div#droppables
{
	clear: both;
}

div.droppable
{
	width: 200px;
	height: 80px;
	float: left;
	margin: 10px;
	
	border: 2px solid #000;
	
	text-align: center;
	
	display: table;
	
	background: -webkit-radial-gradient(center, #ddd, #bbb);
	background: -moz-radial-gradient(center, #ddd, #bbb);
	background: -ms-radial-gradient(center, #ddd, #bbb);
	background: radial-gradient(center, #ddd, #bbb);

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}
div.droppable div.inner
{
	vertical-align: middle;
	display: table-cell;
}
div.droppable.male
{
	background: -webkit-radial-gradient(center, #bdf, #9bd);
	background: -moz-radial-gradient(center, #bdf, #9bd);
	background: -ms-radial-gradient(center, #bdf, #9bd);
	background: radial-gradient(center, #bdf, #9bd);
}
div.droppable.female
{
	background: -webkit-radial-gradient(center, #fbd, #d9b);
	background: -moz-radial-gradient(center, #fbd, #d9b);
	background: -ms-radial-gradient(center, #fbd, #d9b);
	background: radial-gradient(center, #fbd, #d9b);
}
div.droppable.correct
{
	border: 4px solid #0f0;
	margin: 8px;
}
div.droppable.incorrect
{
	border: 4px solid #f00;
	margin: 8px;
}

div.draggablecontainer
{
	float: left;
	margin: 40px 25px 10px 25px;
}
div.draggable
{
	width: 100px;
	height: 40px;
	
	cursor: move;
	
	text-align: center;
	
	display: table;
	
	border: 1px solid #000;
	
	background-color: #fff;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}
div.draggablecontainer:first-of-type
{
	margin-left: 154px; /* add 144px on left, which is half of difference between droppables width (4 * (200 + 2 * 10 + 2 * 2) = 896) and draggables width (4 * (100 + 2 * 25 + 2 * 1) = 608) */
}
div.draggable.done
{
	cursor: default;
}
div.draggable div.inner
{
	vertical-align: middle;
	display: table-cell;
}

div#success
{
	clear: both;
	float: none;
	
	margin: 0 auto;
	
	text-align: center;
	
	font-size: 14pt;
	font-weight: bold;
	color: #2c2;
	
	display: none;
}
a#playagainlink
{
	color: #047;
}
a#playagainlink:hover
{
	color: #169;
}
a#playagainlink:active
{
	color: #b55;
}