@charset "utf-8";
/* CSS MMI TOOLS IMAGEMAP */
  
/* Image map styles */
.imageMap {width:100%; position:relative; margin-bottom:20px;}
.imageMap img {display:block; width:100%; border-radius:20px;}
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.imageMap a {display:block; position:absolute; background:#000; z-index:100; opacity:0.1; filter: alpha(opacity=10); border:1px solid transparent; border-radius:5px;}
/****   Individual  imap boxes  MMI tool names  -hot area hover blue boxes ***/
.imageMap a.p1 {left:07%; top:24%; width:28%; height:07%;}   		/*SYNTH P&R  */
.imageMap a.p2 {left:49.5%; top:21.5%; width:32%; height:7.5%;}		/* SUE */
.imageMap a.p3 {left:49.5%; top:32.75%; width:32.25%; height:7.5%;}	/* DPC */
.imageMap a.p4 {left:6.5%; top:55.75%; width:27%; height:08%;}		/* PHYS VERIF */
.imageMap a.p5 {left:49.5%; top:44.5%; width:32%; height:7.6%;}		/* PF */
.imageMap a.p6 {left:49.5%; top:57%; width:32%; height:7.5%;}		/* 3D */
.imageMap a.p7 {left: 49.5%; top: 69%; width: 32%; height: 7.75%;}	/* TSV */
.imageMap a.p8 {left: 49.5%; top: 82%; width: 32%; height: 7.5%;}	/* SYS */
.imageMap a.p9 {left: 70%; top: 90%; width: 28%; height: 8.5%;}		/*Verilog Circ Sim */
.imageMap a + p {position:absolute; left: -1%; top: 32%; width: 39%; display:none;}   /*** position  + width of information popup ***/
  
.imageMap:hover .hotspots {visibility:visible;}

/**  \/  this is the  information popup styling **/
.imageMap p strong {display:block; padding:0; margin:0; font: bold 1.2em/1.25em 'Arial',sans-serif; color:#005;}
#content-container .imageMap p {
	padding: 2em;
	margin:0; 
	font: normal .95em/1.1em 'Ubuntu','Roboto', sans-serif; 
	color:#125; 
	line-height: normal;
	background: #efefff; 
	width: 60%;
	opacity: 0.95; 
	filter: alpha(opacity=95);  
	border: 3px solid #ccc; 
	border-radius: 10px; 
	z-index: 300;
  background: -webkit-linear-gradient(white, gainsboro); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(white, gainsboro); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(white, gainsboro); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, gainsboro); /* Standard syntax */
   
   transition: opacity .95s ease-in-out;
   -moz-transition: opacity .95s ease-in-out;
   -webkit-transition: opacity .95s ease-in-out;
  /* ...and now override with proper CSS property */

}

}  /*  /\ styling for information popups */

.imageMap b {
	display:block;
	 position:absolute; 
	 background:url(); 
	 z-index:200; 
	 opacity:0.2; 
	 filter: alpha(opacity=20); 
	 padding:0.25em;
	-webkit-transition:0.75s;
	-moz-transition:0.75s;
	-o-transition:0.75s;
	transition:0.75s;
}
/****  Following are the descriptive popup boxes *****/
.imageMap b.b1 {left:07%; top:24%; width:28%; height:07%;}  			/*Synth P&R */
.imageMap b.b2 {left:49.5%; top:21.5%; width:32%; height:7.5%;}  	/*SUE*/
.imageMap b.b3 {left:50%; top:33%; width:32.25%; height:7.05%;} 	/*DPC*/
.imageMap b.b4 {left:6.5%; top:95.75%; width:27%; height:08%;}		/* Phys Verif */
.imageMap b.b5 {left:49.5%; top:44.5%; width:32%; height:7.6%;}		/* PF */
.imageMap b.b6 {left:49.5%; top:57%; width:32%; height:7.5%;}		/* 3D */
.imageMap b.b7 {left: 49.5%; top: 69%; width: 32%; height: 7.75%;}	/*TSV */
.imageMap b.b8 {left: 49.5%; top: 82%; width: 32%; height: 7.5%;}	/*SYS*/
.imageMap b.b9 {left: 70%; top: 50%; width: 28%; height: 8.5%;}		/*Verilog circ sim */

.imageMap .hotspots div:hover b {width:0; padding:0;}
.imageMap .hotspots div:hover p {display:block;
}
.imageMap .hotspots div:hover a {background: #699; z-index:100; opacity:0.5; filter: alpha(opacity=50); border:1px solid #000;}
.pb {font-weight: 700; font-style: italic; font-size: 0.95em; line-height: 1.2em; }   /*** sub-head for info on popups  ***/
/*** embedded button ***/
.imageMap .hotspots  div:hover a.imap {
	background: #039;
	opacity: 0.7;
	margin-left: 20%;
	margin-top: 2%;
}
@media only screen and (min-width: 768px) {
#content-container .imageMap p b{width: 85%; padding: 25%;}
}

@media only screen and (max-width: 767px) {
	#content-container .imageMap p {width: 70%; padding: 7%;
 
}}