/* EcoMedia Project Common Stylesheet */
/*
 * This stylesheet provides a lot of the "magic" that happens on the site.
 *
 */


/* Body defaults. */
body {
	color:			#000000;
	background-color:	#FFFFFF;
	font-family:		Verdana, Helvetica, Arial, sans-serif;
	font-size:		medium;
	z-index:		1;  /* Establish a new stacking context. */
}


/* Global tag defaults. */
img {
	border:			none;
	vertical-align:		middle;
}

div.ConceptIcon h3, div.ArtifactIcon h3 {
	font-size:		0;
}

a {
	text-decoration:	none;
}

h2 {
	display:		none;
}


/* Class-specific tag defaults. */
div.Subject h1 {
	margin-left:		82px;
}
div.Abstract p {
	padding:		0 3em 0 3em;
}


/* Structural classes. */
#Content {  /* Actual content window. */
	margin-top:		50px;
	margin-left:		82px;
	margin-right:		82px;
	z-index:		1;  /* Equal to icons. */
}

#Concepts {  /* Goes on the left. */
	margin-left:		0px;
	width:			82px;
	padding:		0;
}

#Artifacts {  /* Goes on the right. */
	margin-right:		0px;
	width:			82px;
	padding:		0;
}


/* Content type classes. */
.Illustration {  /* Any image in the content. */
	width:			150px;
}

.ConceptIcon {  /* Persistent representation of a concept. */
	position:		absolute;  /* IE6 doesn't support 'fixed'. */
	width:			78px;
	height:			50px;
	background:		transparent;
	vertical-align:		middle;
	text-align:		left;
	z-index:		1;  /* Just behind label. */
}

.ConceptIconActive {
	background-image:	url(images/arrow-concept.gif);
	background-repeat:	no-repeat;
}

.ConceptPopup {  /* Container for transient information. */
	display:		none;  /* Remove from flow. */
	position:		absolute;
	left:			50px;
	top:			0px;
	width:			200px;
	height:			auto;
	color:			black;
	background-color:	silver;
/*
	background-image:	url(images/transparent-25.gif);
*/
	background-repeat:	repeat;
	text-align:		left;
	z-index:		3;  /* Popup gets priority. */
}

div.ConceptIcon:hover ul.ConceptPopup {  /* Reveal popup on hover. */
	display:		block;  /* Return to flow. */
}

.ArtifactIcon {
	position:		absolute;  /* IE6 doesn't support 'fixed'. */
	width:			78px;
	height:			50px;
	background:		transparent;
	vertical-align:		middle;
	text-align:		right;
	z-index:		1;  /* Just behind label. */
}

.ArtifactIconActive {
	background-image:	url(images/arrow-artifact.gif);
	background-repeat:	no-repeat;	
}

.ArtifactPopup {
	display:		none;  /* Remove from flow. */
	position:		absolute;
	left:			-210px;
	top:			0px;
	width:			200px;
	height:			auto;
	color:			black;
	background-color:	silver;
/*
	background-image:	url(images/transparent-25.gif);
*/
	background-repeat:	repeat;
	z-index:		3;  /* Popup gets priority. */
}

div.ArtifactIcon:hover ul.ArtifactPopup {  /* Reveal popup on hover. */
	display:		block;  /* Return to flow. */
}


/* Formatting classes. */
.hidden {  /* Hidden text, for use in older browsers. */
	display:		none;
}

.left {  /* Float to left.  Make sure the block has a width. */
	float:			left;
}

.right {  /* Float to right.  Make sure the block has a width. */
	float:			right;
}

div.center {  /* Center container. */
	margin-left:		auto;
	margin-right:		auto;
}


/* Global icons. */
.NavIcon {
	position:		relative;  /* IE6 doesn't support 'fixed'. */
	width:			50px;
	height:			50px;
	background-color:	transparent;
	vertical-align:		middle;
	z-index:		1;  /* Just behind label. */
}


/* IE6 workarounds. */
div>div.ConceptIcon {  /* Enable fixed icons for non-IE browsers. */
	position:		fixed;  /* Like frames, but better. */
}

div>div.ArtifactIcon {  /* Enable fixed icons for non-IE browsers. */
	position:		fixed;  /* Like frames, but better. */
}

body>div.NavIcon {  /* Enable fixed icons for non-IE browsers. */
	position:		fixed;  /* Like frames, but better. */
}