.visualization_frame {width: 100%;}
.visualization_frame table {height:100%; width: 100%;}
.visualization_title  { color:darkblue; font-size:1em;}
.visualization_subtitle  {color:darkblue; font-size:0.8em; font-style:italic;}
 
.content_frame {background-color:white; width:100%; text-align:center; float:left;}
.content_title {width:100%; font-weight:bold; color: white; background-color:grey; font-size: 1em; text-align: center; vertical-align:middle; line-height:3em;}	

.sidebar_frame {background-color:grey; margin-top:1em; height:100%; min-width:50px;}
.sidebar_title {cursor:pointer; width:100%; font-weight:bold; color: white; font-size: 1em; text-align: center; vertical-align:middle; line-height:2em;}
.sidebar_title:hover {text-decoration:underline;}
.sidebar {text-align:left; padding-left:1em; padding-right:1em; float:left; font-size:0.8em;}
.sidebar table {color:black; width:400px; background-color:white; border-radius: 10px; padding:5px;}
.sidebar td {border: 1px solid grey; padding: 0.75em;vertical-align:top; text-align:left; font-weight:normal; font-family: FreeSerif;}
.sidebar td:first-child {width:150px;}	
.sidebar ul {margin-left:-2em; margin-top:0;	margin-bottom:0;}
.sidebar select {  font-size:0.8em; cursor:pointer; height: 2.5em; width: 200px; padding-left:0.25em; margin-left:0em;}

.legend_frame {};
 


.visualization_link {color: blue; fill:blue; cursor:pointer;}
.visualization_link:hover {text-decoration:underline;}
.remove_link {color: red; fill:red; cursor:pointer;}
.remove_link:hover {text-decoration:underline;}
 
.course_diagram_background { x: 0;	y:0;	fill:white; stroke:orange;  stroke-width:4x;}
.course_raster_element {height:100%; width:100%; }

.metaBox {visibility:visible;}
.courseBox {visibility:hidden;}
.textBox {x:0; y:0; height:100%; width:100%;}
/* .course_raster_element:hover { fill:green; opacity:0.5;} */
.course_sheet_background {height:100%; width:100%; x:0px; y:0px;   cursor:pointer; }

.diagram_course_triangle  {fill:blue; opacity:0.3; cursor:pointer;}
.diagram_course_triangle:hover {opacity:1; }
 
 
.skill_diagram_background { x: 0;	y:0;	fill:white; border:white 5px solid; }
.skill_sheet_background {height:100%; width:100%;  }
.skill_grid_background {height:100%; width:100%; }
 
 
.pulsar {
	stroke: black; stroke-width: 10px; fill:none;
    visibility:hidden;
	display: block;
	position: absolute;
	-webkit-animation: pulsate  ;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0;
}
@-webkit-keyframes pulsate {
	0% {opacity: 0.3;}
	50% {opacity: 0.6;}
	100% {opacity: 0.95;}
}



@-webkit-keyframes tremble {
0% { -webkit-transform: translate(1px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(1px, 0px) rotate(0deg); }
20% { -webkit-transform: translate(0px, -1px) rotate(0deg); }
30% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
40% { -webkit-transform: translate(-1px, 1px) rotate(0deg); }
50% { -webkit-transform: translate(-1px, 0px) rotate(0deg); }
60% { -webkit-transform: translate(0px, -1px) rotate(0deg); }
70% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
80% { -webkit-transform: translate(1px, 1px) rotate(0deg); }
90% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
100% { -webkit-transform: translate(0px, 1px) rotate(0deg); }
}

@-moz-keyframes tremble {
0% { -moz-transform: translate(1px, 1px) rotate(0deg); }
10% { -moz-transform: translate(1px, 0px) rotate(0deg); }
20% { -moz-transform: translate(0px, 1-px) rotate(0deg); }
30% { -moz-transform: translate(0px, 0px) rotate(0deg); }
40% { -moz-transform: translate(-1px, 1px) rotate(0deg); }
50% { -moz-transform: translate(-1px, 0px) rotate(0deg); }
60% { -moz-transform: translate(0px, -1px) rotate(0deg); }
70% { -moz-transform: translate(0px, 0px) rotate(0deg); }
80% { -moz-transform: translate(1px, 1px) rotate(0deg); }
90% { -moz-transform: translate(0px, 0px) rotate(0deg); }
100% { -moz-transform: translate(0px, 1px) rotate(0deg); }
}

@keyframes tremble {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(1px, 0px) rotate(0deg); }
20% { transform: translate(0px, -1px) rotate(0deg); }
30% { transform: translate(0px, 0px) rotate(0deg); }
40% { transform: translate(-1px, 1px) rotate(0deg); }
50% { transform: translate(-1px, 0px) rotate(0deg); }
60% { transform: translate(0px, -1px) rotate(0deg); }
70% { transform: translate(0px, 0px) rotate(0deg); }
80% { transform: translate(1px, 1px) rotate(0deg); }
90% { transform: translate(0px, 0px) rotate(0deg); }
100% { transform: translate(0px, 1px) rotate(0deg); }
}




.visualization_change_circle  {cursor:pointer; 	fill:white;	stroke:blue;} 
.visualization_change_circle:hover	{stroke:white;fill:blue;}








		
	



	
	
	
	



	

.diagram_module_skillinfo
	{
	padding:10px;
	background-color:#CEF6F5;		
	width:100%;
	
	font-weight:nomal;
	font-size: 1em;
	}
.diagram_module_skillinfo table
	{
	padding:0px;
	width:100%;
	}
.diagram_module_skillinfo table td
	{
	vertical-align:middle;
	text-align:center;
	font-weight:normal;
	font-family: FreeSerif;	
	font-size:1em;
	font-weight:normal;	
	border-radius:15%;
	}		
.diagram_module_skillinfo table td:nth-child(odd)
	{
	width:30%;
	padding:3px;
	}
.diagram_module_skillinfo table td:nth-child(even)
	{
	width:5%;
	font-weight:bold;
	vertical-align:middle;
	text-align: center;
	font-size:2em;
	}
.diagram_module_skillinfo table td ul 
	{
	
	padding:0px; margin-left:15px;
	text-align:left;
	list-style-type:circle;
	font-size:1em;
	}

.diagram_module_sheetcolor
	{
	fill:#CEF6F5; 
	stroke:black;
	}


.diagram_module_sheet
	{
	height:100%;
	width:100%;
	}
.diagram_module_sheet td
	{
	vertical-align:middle;
	text-align:center;
	font-weight:normal;
	font-family: FreeSerif;	
	font-size:0.75em;
	font-weight:normal;		
	}	



.diagram_course_sheet ul{
	margin-left:-20px;
	margin-right:15px;
}
.diagram_course_sheet{
	top:0px;
	left:0px;
	position:absolute;	
	z-index:100;
	text-align:left;
	visibility:hidden; 
	display:none;
	margin:0px;
	background-color:lightyellow;
	border: solid 2px orange;
	border-radius:5%;
	padding:5px;
	font-weight:nomal;
	font-size:0.8em;	
	
	}



.diagram_course_info
	{
	padding:10px;
	background-color:#D0F5A9;		
	width:100%;
	padding:5px;
	font-weight:nomal;
	font-size: 1em;		
	}
.diagram_course_sheet0color
	{
	fill: #D0F5A9;
	visibility:hidden; 
	}	
/*
	
.diagram_course_sheet2
	{
	visibility:hidden; 
	display:none;
	margin:0px;
	}
	*/	
.diagram_course_sheetcontent:hover 
	{
	text-decoration:underline;
	}	


	
	
.info_content{
	margin:15px;
	padding:5px;
	font-weight:nomal;
	font-size: 0.8em;			
	visibility:hidden; 
	display:none;
	background-color:white;
	border: solid #555 5px;
	color:black;

}


.diagram_skill_info
	{
	padding:10px;
	background-color:#CEF6F5;;		
	width:100%;
	padding:5px;
	font-weight:nomal;
	font-size: 1em;			
	visibility:hidden; 
	display:none;
	}
.diagram_skill_sheetcolor
	{
	visibility:hidden; 
	}
	
.diagram_skill_addinfo
	{
	width:90%;	
	}	

.diagram_skill_addinfo  td
	{
	vertical-align:top;
	text-align:left;
	padding:5px;
	}
		
	
.diagram_skill_addinfo td:first-child {
	text-align:left;
	width: 50px;
	}			
	

/* Tooltip container */
.diagram_tooltip {
  position: relative;
  display: inline-block;
  font-weight:bold; 
  padding:2px;
  border: 2px solid;
  border-radius: 30%;
  background-color:darkblue;
  color:white;
}

/* Tooltip text */
.diagram_tooltip .tooltiptext {
  visibility: hidden;
  font-size:0.8em;
 
  font-weight:normal;
  background-color: darkblue;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  margin-top:26px;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.diagram_tooltip:hover .tooltiptext {
  visibility: visible;
}