/*--------------------------------------*/
/*----- STYLES FOR INTERACTIVE GUI -----*/
/*--------------------------------------*/

div#guipic-wrapper {
	margin: 0 auto;
	width: 938px;
	height: 612px;
	position: relative;
}

div#guipic-wrapper a {
	padding-top: 0;
}

div.guipic{
	margin: 0 auto;
	width: 938px;
	height: 612px;
	position: absolute;
	z-index: 1;
	transition: 0.8s;
	background: url(GUI_.png);
}

a.guiel:hover ~ .guipic {
	opacity: 0.05;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=5); /* for IE7-8 */
}

a.guiel:hover + div.text {
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* for IE7-8 */
	transition: 0.8s 0.6s;
}

a.guiel {
	display: block;
	position: absolute;
	text-align: center;
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* for IE7-8 */
	padding-top: 10px;
	box-sizing: border-box;
	z-index: 3;
	background: url(GUI_.png);
	transition: opacity 0.8s;
}

a.guiel:hover{
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* for IE7-8 */
}

a.btn {
	display: block;
	position: absolute;
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* for IE7-8 */
	z-index: 4;
	transition: 0.2s;
	background-color: white;
}

a.btn:hover {
	opacity: 0.4;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* for IE7-8 */
}

a.btn:hover ~ a#toolbar {
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* for IE7-8 */
}

a.btn:hover ~ a#toolbar + div.text {
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* for IE7-8 */
	transition: 0.8s 0.6s;
}

a.btn:hover ~ .guipic {
	opacity: 0.05;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=5); /* for IE7-8 */
}

div.text {
	position: absolute;
	color: black;
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* for IE7-8 */
	z-index: 2;
	padding: 10px 30px;
	text-align: center;
	width: 938px;
	box-sizing: border-box;
	/* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); */
}

/* Styles for positioning 'div.text' */
.top { top: 130px; }
.top-middle { top: 230px; }
.middle { top: 250px; }
.bottom { top: 350px; }

/* div.text h3 {
	font-weight: bold !important;
} */

a#event-timeline {
	width: 924px;
	height: 131px;
	left: 7px;
	top: 132px;
	background-position: -7px -132px;
}

a#quant-timeline {
	width: 924px;
	height: 93px;
	left: 7px;
	top: 267px;
	background-position: -7px -267px;
}

/*
a#mainbar {
	width: 1016px;
	height: 21px;
	left: 8px;
	top: 30px;
}

a#viewbar {
	width: 1016px;
	height: 21px;
	left: 8px;
	top: 51px;
}
*/
a#toolbar {
	width: 924px;
	height: 29px;
	left: 7px;
	top: 66px;
	background-position: -7px -66px;
}

a#summary {
	width: 29px;
	height: 29px;
	left: 7px;
	top: 66px;
}

a#traceinfo {
	width: 27px;
	height: 29px;
	left: 36px;
	top: 66px;
}

a#timesclbtn {
	width: 28px;
	height: 29px;
	left: 69px;
	top: 66px;
}

a#timesclbtn:hover + a#timescale {
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* for IE7-8 */
}

a#timeinterval {
	width: 185px;
	height: 29px;
	left: 97px;
	top: 66px;
}

a#timeunit {
	width: 105px;
	height: 29px;
	left: 282px;
	top: 66px;
}

a#aggregatep {
	width: 92px;
	height: 29px;
	left: 387px;
	top: 66px;
}

a#aggregatef {
	width: 216px;
	height: 29px;
	left: 479px;
	top: 66px;
}

a#tag {
	width: 28px;
	height: 29px;
	left: 695px;
	top: 66px;
}

a#filter {
	width: 28px;
	height: 29px;
	left: 723px;
	top: 66px;
}

a#idealize {
	width: 28px;
	height: 29px;
	left: 757px;
	top: 66px;
}

a#compare {
	width: 28px;
	height: 29px;
	left: 785px;
	top: 66px;
}

a#imbalance {
	width: 28px;
	height: 29px;
	left: 813px;
	top: 66px;
}

a#perfassistbtn {
	width: 27px;
	height: 29px;
	left: 841px;
	top: 66px;
}

a#color {
	width: 28px;
	height: 29px;
	left: 874px;
	top: 66px;
}

a#preferences {
	width: 29px;
	height: 29px;
	left: 902px;
	top: 66px;
}

a#tracemap {
	width: 925px;
	height: 37px;
	left: 7px;
	top: 95px;
	background-position: -7px -95px;
}

a#timescale {
	width: 924px;
	height: 42px;
	left: 7px;
	top: 365px;
	background-position: -7px -365px;
}

a#funcprof {
	width: 312px;
	height: 172px;
	left: 7px;
	top: 418px;
	background-position: -7px -418px;
}

a#msgprofile {
	width: 311px;
	height: 173px;
	left: 322px;
	top: 418px;
	background-position: -322px -418px;
}

a#collopprofile {
	width: 297px;
	height: 172px;
	left: 635px;
	top: 418px;
	background-position: -635px -418px;
}