body
{
	overflow: hidden;
	font-family:Arial, Helvetica, sans-serif;
}
.displayBox
{
	border-style: solid;
	border-color: #999999;
	border-width: 2px;

	/*padding: 20px;*/
	padding: 0.5%;

	background: #dddddd; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(232,232,232,1)),color-stop(49%, rgba(216,216,216,1)),color-stop(78%, rgba(191,191,191,1)),to(rgba(198,198,198,1)));
	background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(216,216,216,1) 49%,rgba(191,191,191,1) 78%,rgba(198,198,198,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
} 
#appletContainer
{
	overflow: hidden;
}

#nanoscopic
{
	position: absolute;
	top: 56%;
	left: 25%;
	width:  74px;
	height: 52px;
	z-index: 1;
	visibility: inherit;
}
#nanoViewer
{
	position: absolute;
	top: 8%;
	left: 30%;
	width: 58%;
	height: 60%;
	z-index: 3;
	background-color: #ffffff;
	/*visibility: inherit;*/
}
#magGlass
{
	position: absolute;
	top: 8%;
	left: 30%;
	width: 67%;
	height: 75%;
	z-index: 2;
	/*visibility: inherit;*/
}
#skinDiv
{
	position: absolute;
	top: 61%;
	width: 100%;
	height: 36%;
	z-index: -3;
}
#macroscopic
{
	position: absolute;
	top: 2%;
	/*left: 2%;*/
	height: 85%;
	width: 100%;
}

/*                                   Canvas                                */
#background
{
	position: absolute;
	top: 2%;
	width: 100%;
	height: 96%;
	z-index: -8;
	background-color: #33CCFF;
}
#skin
{
	position: absolute;
	/*top: 72%;
	width: 98%;
	height: 26%;*/
	z-index: -5;
	/*background-color: #FFCC99;*/
}
#burntSkin
{
	position: absolute;
	top: 72%;
	width: 100%;
	height: 26%;
	z-index: -4;
	/*background-color: #FF5050;*/
	/*
	filter: alpha(opacity=50);
	opacity: 0.5; */
}
#sunscreen
{
	position: absolute;
	top: 63%;
	width: 100%;
	height: 8%;
	z-index: -7;
	background-color: rgba(255,255,235,0.12);
	/*background-color: #FFFFEB;*/ /* off-white */
}

#lightFG
{
	top: 2%; /*neccesssary in order to return a "top" value for the light rays*/
	z-index: -6;
}
#nanoZoomCanvas /* DO NOT RESIZE CANVAS IN CSS*/
{
	/*position:absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;*/
	z-index: 2;
	visibility: inherit;
}
#bloomCanvas
{
	z-index: 6;
	position: inherit;
}
#nanoCanvas
{
	z-index: 5;
	position: inherit;
}
#photonCanvas
{
	z-index: 7;
	position: inherit;
}
#magGlassCanvas
{
	z-index: 0;
	position: inherit;
	visibility: inherit;
}

/*                                 Bottom GUI                              */
.bottomGUI
{
	position: absolute;
	bottom: 2%;
	width: 100%;
	height: 12.3%;
/*	float: left;*/
	display: table;
	z-index: 10;
}
#viewToggle
{
	position: relative;
	width: 40%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	border-top-color: #dddddd;
	border-left-color: #dddddd;
	float: inherit;
	padding-left: auto;
	padding-right: auto;
}
	#viewToggle:hover
	{
		border-bottom-color: #dddddd;
		border-right-color: #dddddd;
	}
	#viewToggle:active
	{
		border-top-color: #999999;
		border-left-color: #999999;	
	}
#particleSizeSelector{
	position: relative;
	width: 80%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	float: inherit;
	padding-left: auto;
	padding-right: auto;

}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(3); /* IE */
  -moz-transform: scale(3); /* FF */
  -webkit-transform: scale(3); /* Safari and Chrome */
  -o-transform: scale(3); /* Opera */
  padding: 2%;
  margin: 2%;
}
.checkboxText{
	/*position: absolute;*/
	font-size: 130%;
	display: inline;
	padding: 2%;
}

#meter
{
	position: absolute;
	left:80%;
	width: 19%;
	height:80%;
	/*background-color: #C9C9C9;*/
}
	#meterText
	{
		position: absolute;
		font-size:1.2em;
		top:1.5em;
		left: 0%;
		width:35%;
		display: block;
		vertical-align: middle;
	}
	#transmitMeter
	{
		position: absolute;
		top:1.7em;
		left:35%;
		width:65%;
		font-size: 1.6em;
		text-align: center;
		vertical-align: middle;
	}
	#tMeter
	{
		position: absolute;
		top:2em;
		left:35%;
		width:65%;
		opacity: 0.7;
		height:3em;
		vertical-align: middle;
	}

/*instructions*/
#gS
{
	position: absolute;
	z-index: 3;
	/*width: 400px;*/
	width: 30%;
	text-align: center;
	visibility: visible;
	left: 50%;
	margin-left: -200px;
	display: block;

	top: 25%;
	/*font-size: 20px;*/

	/*-webkit-border-radius: 10px;*/
	/*-moz-border-radius: 10px;*/
	/*border-radius: 10px;*/
	border-radius: 4%;
	/*padding: 20px;*/
	padding: 1%;

	/*background*/
	background: rgb(232,232,232); /* Old browsers */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(232,232,232,1)),color-stop(49%, rgba(216,216,216,1)),color-stop(78%, rgba(191,191,191,1)),to(rgba(198,198,198,1)));
	background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(216,216,216,1) 49%,rgba(191,191,191,1) 78%,rgba(198,198,198,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
}
#gS hr
{
	width: 90%;
}
#gS input
{
/*	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;*/
	/*position: absolute;
	top: 40px;
	right: 10%;*/
	position: relative;
	top: 0%;
	left: 40%;
}


#instructionDiv{
	position: absolute;
	width: 23%;
	height: 48%;
	left: 38%;
	top: 20%;
}
/**************/

/*About*/
#about
{
	position: absolute;
	z-index: 3;
	/*width: 400px;*/
	width: 30%;
	text-align: center;
	visibility: hidden;
	left: 50%;
	margin-left: -200px;
	/*margin-left: -10%*/
	top: 25%;
	/*font-size: 20px;*/

	/*-webkit-border-radius: 10px;*/
	/*-moz-border-radius: 10px;*/
	/*border-radius: 10px;*/
	border-radius: 4%;
	/*padding: 20px;*/
	padding: 1%;

	/*background*/
	background: rgb(232,232,232); /* Old browsers */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(232,232,232,1)),color-stop(49%, rgba(216,216,216,1)),color-stop(78%, rgba(191,191,191,1)),to(rgba(198,198,198,1)));
	background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(216,216,216,1) 49%,rgba(191,191,191,1) 78%,rgba(198,198,198,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
}

#about hr
{
	width: 90%;
}
#about input
{
	/*position: absolute;*/
	/*top: 40px;*/
	/*top: 12%;*/
	position: relative;
	top: 0%;
	left:40%;
}
#about tr td
{
	vertical-align: text-top;
}
#about table
{
	background-color: white;
}




#kcvsLogo {
	position:absolute;
	background:url(../IMG/logo4.png);
	/*width:225px;
	height:100px;
	left:100px;*/
	width: 80%;
	height: 22%;
	left: 20%;
	background-repeat: no-repeat;

}

.ui-dialog-titlebar-close{
	position:relative;
	left:90%;
}

#aboutDiv{
	position: absolute;
	width: 23%;
	height: 48%;
	left: 38%;
	top: 20%;
}


/*******/


/*sources*/
#sources
{
	position: absolute;
	z-index: 3;
	/*width: 400px;*/
	width: 30%;
	text-align: center;
	visibility: hidden;
	left: 50%;
	margin-left: -200px;
	display: block;

	top: 25%;
	/*font-size: 20px;*/

	/*-webkit-border-radius: 10px;*/
	/*-moz-border-radius: 10px;*/
	/*border-radius: 10px;*/
	border-radius: 4%;
	/*padding: 20px;*/
	padding: 1%;

	/*background*/
	background: rgb(232,232,232); /* Old browsers */ /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(232,232,232,1)),color-stop(49%, rgba(216,216,216,1)),color-stop(78%, rgba(191,191,191,1)),to(rgba(198,198,198,1)));
	background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(216,216,216,1) 49%,rgba(191,191,191,1) 78%,rgba(198,198,198,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c6c6c6',GradientType=0 ); /* IE6-9 */
}
#sources hr
{
	width: 90%;
}
#sources input
{
/*	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;*/
	/*position: absolute;
	top: 40px;
	right: 10%;*/
	position: relative;
	top: 0%;
	left: 40%;
}



#sourcesDiv{
	position: absolute;
	width: 23%;
	height: 48%;
	left: 38%;
	top: 20%;
}



/**************/