/* INVARIANCE */

body { background-color: #E8E8E8; font-family: Arial, sans-serif; }

.darkGreyBackground { 
	background-color: #444; 
}

#activityArea {
	display:block;
	margin:20px auto;	
	width:679px;
	padding:0px;
}

#example{
	width:677px;
	height:590px;
	position:absolute;
	font-size: 14px;
	background-color:#FFF;
}

#title{
	position:absolute;
	top:0px;
	width:677px;
	height:50px;
	background-color:#3776BD;
	font-weight:bold;
	font-size:18px;
	text-align:center;
	vertical-align: middle;
	line-height: 45px;
	color:#FFF;
	text-shadow: 3px 3px 3px #000;
}

#instructions {
	position:relative;
	top:50px;
	left:40px;
	padding-right:10px;
	color:#000000;
	font-weight:bold;
	font-size:24px;
}

#instructions2 {
	position:relative;
	top:50px;
	left:50px;
	padding-right:10px;
}

#instructions3 {
	position:relative;
	top:250px;
	left:80px;
	padding-right:10px;
	color:#339933;
}

#container_invarianceActivity {
	opacity:inherit;
}

#container_invarianceActivity #circle{
	position:absolute;
	top:210px;
	left:170px;
	opacity:inherit;
}

#container_invarianceActivity #halves{
	position:absolute;
	width:156px;
	height:330px;
	top:115px;
	left:345px;
	opacity:inherit;
	float:left;
}

#container_invarianceActivity #arrow{
	position:absolute;
	top:253px;
	left:115px;
	opacity:inherit;
}

#container_invarianceActivity #arrows{
	position:absolute;
	top:140px;
	left:500px;
	opacity:inherit;
}

#container_invarianceActivity #arrows img{
	max-height:300px;
	max-width:300px;
}


#container_invarianceActivity #input1{
	position:absolute;
	top:275px;
	left:50px;
	opacity:inherit;
}

#container_invarianceActivity #input2{
	position:absolute;
	top:156px;
	left:560px;
	opacity:inherit;
}

#container_invarianceActivity #input3{
	position:absolute;
	top:235px;
	left:560px;
	opacity:inherit;
}

#container_invarianceActivity #input4{
	position:absolute;
	top:320px;
	left:560px;
	opacity:inherit;
}

#container_invarianceActivity #input5{
	position:absolute;
	top:400px;
	left:560px;
	opacity:inherit;
}

#feedback {
	position:absolute;
	top:300px;
	left:60px;
	padding-right:10px;
	color:#339933;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback2 {
	position:absolute;
	top:300px;
	left:60px;
	padding-right:10px;
	color:#FF5922;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback3 {
	position:absolute;
	top:165px;
	left:560px;
	padding-right:10px;
	color:#339933;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback4 {
	position:absolute;
	top:245px;
	left:560px;
	padding-right:10px;
	color:#339933;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback5 {
	position:absolute;
	top:330px;
	left:560px;
	padding-right:10px;
	color:#339933;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback6 {
	position:absolute;
	top:410px;
	left:560px;
	padding-right:10px;
	color:#339933;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback7a {
	position:absolute;
	top:165px;
	left:560px;
	padding-right:10px;
	color:#FF5922;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback7b {
	position:absolute;
	top:245px;
	left:560px;
	padding-right:10px;
	color:#FF5922;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback7c {
	position:absolute;
	top:330px;
	left:560px;
	padding-right:10px;
	color:#FF5922;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedback7d {
	position:absolute;
	top:410px;
	left:560px;
	padding-right:10px;
	color:#FF5922;
	font-weight:bold;
	font-size:16px;
	width:180px;
}

#feedbackDone {
	position:absolute;
	top:450px;
	left:230px;
	padding-right:10px;
	color:#339933;
	font-weight:bold;
	font-size:16px;
	width:400px;
}

#restartExample {
	position:absolute;
	top:500px;
	left:310px;
	opacity:inherit;
}

#closeExample {
	position:absolute;
	top:500px;
	left:450px;
	opacity:inherit;
}

#TEAlogo {
	bottom:20px;
	left: 300px;
	margin:0 auto;	
	position:absolute;
}

#TRHeading {
	position: relative;
	left:-20px;
}

.activeActivity {
	border:solid palegreen;
	border-width:3px;
	background-color:whitesmoke;
}