$(document).ready(function() {

	$("li.icon").addClass("cursor");
	
    $("li.icon").hover(
      function () {
	

	//gets position
	var mousePos = $(this);
	var offset = mousePos.position();
	
	if ($(this).parents().hasClass("yellow"))
		{
		//yellow column
		$(this).parent().after("<span class='iconinfo'><span class='yellow'></span><span class='bottom'></span></span>");
		}
	else
		{
		//blue column
		$(this).parent().after("<span class='iconinfo'><span class='blue'></span><span class='bottom'></span></span>");	
		}
	
	if ($(this).hasClass("picture"))
		{
		$("span.iconinfo").addClass("picture");
		}
	
	//get content
	var thisTitle = $(this).html();

		
	//sets iconinfo  pos.left
	
	//gets dt height
	
	if ($(this).parents().hasClass("yellow"))
		{
		//yellow column
		$("span.iconinfo span.yellow").html(thisTitle); //insert content
		}
	else
		{
		//blue column
		$("span.iconinfo span.blue").html(thisTitle); //insert content
		}



	$("span.iconinfo").css({ position: "absolute",  top: offset.top, left: offset.left });
	$("span.iconinfo").show();

      }, 
      function () {
		$("span.iconinfo").hide();
		$("span.iconinfo").remove();
      }
    );




});