#elements{
	border: 0;
	width: 0;
	border-collapse: collapse;
	clear: left;
	margin: 1em 0 8em;
}


#elements .element {
	width: 8em;
	height: 2em;
	padding: 0;
	margin: 0;
}

#elements {
	padding: 2px;
}

/* Icon 

#elements .icon {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-family: Arial, Helvetica, sans-serif;	
	background-color: #002c5f; 
	/*background-color: #808d01;
	color: white;
	font-weight:bold;
	cursor: pointer;
	display: block;
	font-size: 0.9em;
	line-height: 1.5em;
	width: 2.7em;
	height: 1.5em;
	margin: 0;
	opacity: 0.8;
	padding: 0;
	overflow: hidden;
	text-align: center;
	position: relative;
	border-radius: 0.25em;
	-o-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	-webkit-border-radius: 0.25em;
}*/

#elements .icon {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-family: Arial, Helvetica, sans-serif;	
	background-color: #white; 
	/*background-color: #808d01;*/
	color: #17304f;
	font-weight:bold;
	cursor: pointer;
	display: block;
	font-size: 0.9em;
	line-height: 1.5em;
	width: 2.7em;
	height: 1.5em;
	margin: 0;
	opacity: 0.8;
	padding: 0;
	overflow: hidden;
	text-align: center;
	position: relative;
	border-radius: 0.25em;
	-o-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	-webkit-border-radius: 0.25em;
}

#elementsr .active .icon,
#elements :hover .icon {
	left: -1px;
	opacity: 1 !important;
	padding: 1px;
	top: -1px;
	z-index: 100;
	box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
	-o-box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
}
#elementsr .active .icon .occurences,
#elements :hover .icon .occurences {
	display: block;
}

#elements .icon .occurences {
	position: absolute;
	top: 4px;
	right: 6px;
	line-height: 1em;
	font-size: 0.9em;
	opacity: 0.7;
	display: none;
}

/* Info Box */

#elements .info {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-family: Arial, Helvetica, sans-serif;
	background: #ffffff;
	 background-image:url('images/close.png');
		background-repeat:no-repeat;
		background-position: 31em .3em;
	color: black;
	display: none;
	margin: 0 2px;
	min-height: 5em;
	padding: 0.75em;
	position: absolute;
	top:76px;
	left:106px;
	left:80px;
	left:8px;
	margin-top: 4.5em;
	width: 31em;
	z-index: 200;
	border:1px solid #999999;
	border-radius: 0.3em;
	-o-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
	-o-box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 2px;
}

#elements  .info h3 {
	margin:0px;
	padding:0px;
	color: #002c5f;
	font-weight: bold;
	font-size: 1.1em;
	font-size: 16px;
}

#elements  .info p {
	font-size: .8em;
	margin-bottom: 0.75em;
	font-size: 12px;
	line-height:140%;
}

#elements  .info .float-left {
	float:left;
	margin-right: 8px;
}

#elements  .info img {
	border: 1px solid #999999;
	
	}

#elements .info a:link,
#elements .info a:visited {
	color: #7e920f;
	
}

#elements .info a:active,
#elements .info a:hover {
	color: #002c5f;
}

#elements .info *:last-child {
	margin-bottom: 0;
}


#elements  .links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8em;
}

#elements .links li {
	margin: 0;
	padding: 0;
	display: inline;
}

#elements  .links li:after {
	content: ", ";
}

#elements  .links li:last-child:after {
	content: "";
}

/* Legend */



#elements .background {
position: absolute;
top:0px;
left:0px;
}

/* Colours */


ul#legend .root .icon,
#elements .oil-1969 .icon
 {
	position: absolute;
	top: 105px;
	left: 86px;
}


#elements .oil-1974 .icon
 {
	
	position: absolute;
	top:5px;
	left: 158px;
}


#elements .oil-1978 .icon
 {
	
	position: absolute;
	top: 5px;
	left: 205px;
}


#elements .oil-1976 .icon
 {
	
	position: absolute;
	top: 105px;
	left: 165px;
	
}

#elements .oil-1979 .icon
 {
	
	position: absolute;
	top: 105px;
	left: 214px;
	
}

#elements .oil-1989 .icon
 {
	
	position: absolute;
	top: 5px;
	left: 315px;
}


#elements .oil-1996 .icon
 {
	position: absolute;
	top: 105px;
	left: 413px;
}

#elements .oil-2003 .icon
 {
	position: absolute;
	top: 5px;
	left: 494px;
}

#elements .oil-2007-2 .icon
 {
	
	position: absolute;
	top: 105px;
	left: 537px;
}


#elements .oil-2007 .icon
 {
	
	position: absolute;
	top: 5px;
	left: 537px;
}

#elements .oil-2010 .icon
 {
	
	position: absolute;
	top: 105px;
	left: 581px;
}

ul#legend .text .icon,
table#elements .text .icon,
table#elements .text .info {
	background-color: rgb(255, 255, 100);
}

ul#legend .grouping .icon,
table#elements .grouping .icon,
table#elements .grouping .info {
	background-color: rgb(255, 150, 80);
}

ul#legend .form .icon,
table#elements .form .icon,
table#elements .form .info {
	background-color: rgb(100, 255, 100);
}

ul#legend .sections .icon,
table#elements .sections .icon,
table#elements .sections .info {
	background-color: rgb(160, 175, 255);
}

ul#legend .interative .icon,
table#elements .interative .icon,
table#elements .interative .info {
	background-color: rgb(0, 150, 255);
}

ul#legend .table .icon,
table#elements .table .icon,
table#elements .table .info {
	background-color: rgb(255, 150, 100);
}

ul#legend .embedding .icon,
table#elements .embedding .icon,
table#elements .embedding .info {
	background-color: rgb(255, 150, 255);
}

/* Other */
#domains {
	margin-top: 2em;
	text-align: center;
	font-size: 0.9em;
}