A:link, A:visited, A:active { text-decoration: none }

/* The Base Layout which holds all the table in it */
#grid {
	margin-top:200px;
	margin-left:auto;
	margin-right:auto;
	width:605px;
	height:auto;
	background-color:#9CF;
}
/* First Coloumn */
#item1 {
	width:150px;
	float:left;
	text-align:center;
}
/* Second Coloumn */
#item2 {
	width:150px;
	float:left;
	text-align:center;
 
}
/* Third Coloumn */
#item3 {
	width:150px;
	float:left;
	text-align:center;	
}
/* Forth Coloumn */
#item4 {
	width:150px;
	float:left;
	text-align:center;	
}
/* Heading */
h1 {
	padding-top:15px;
	padding-bottom:15px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:20px;
	font-weight:bold;
	border:1px solid #CCC;
	/* Linear Gradient For Mozilla */
	background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
	/* For Safari and Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	text-shadow: #fff 1px 1px 1px;
}
li {
	padding-top:10px;
	padding-bottom:10px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	border:1px solid #256490;
	text-shadow: #000 2px 2px 2px;
	color:#FFF;
}
li {	
    /* For Mozilla */
	background: -moz-radial-gradient(50% 50% 90deg,ellipse closest-corner, #296a96 10%, #1c5a85 100%);
	/* For Safari and Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #296a96),color-stop(1, #1c5a85));
 
}
/* Set another Style for last element of LI */
ul li:last-child {
	/* For Mozilla */	
    background: -moz-linear-gradient(top,  #7d910f,  #aec31f);
	/* For Safari and Chrome */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7d910f),color-stop(1, #aec31f));
    border:1px solid #8c9d17;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bolder;
    font-size:18px;
}
/* Now here we will set transition effect to increase size of basic coloumn when hovered */
#item2 {
	/* For Mozilla */
	-moz-transition: all 0.5s ease-in-out;
	/* For Safari and Chrome */
	-webkit-transition: all 0.5s ease-in-out;
}
/* Increase the size of Coloumn 10% when hovered */
#item2:hover {
	/* For Mozilla */
	-moz-transform:scale(1.1);
	/* Safari and Chrome */
	-webkit-transform:scale(1.1);
}
 
#item3 {
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#item3:hover {
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
}
 
#item4 {
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#item4:hover {
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
}
#item2 > div {
    width: 100px;
	height: 50px;
  	position: absolute;
    padding: 7px;
    visibility:hidden;
    opacity: 0;                
    background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	/* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */		
}
 
#item2:hover > div {
	visibility:visible;
    opacity: 1;
    margin-top: -150px;
	margin-left: 170px; 
    /* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}
 
#item3 > div {
    width: 100px;
	height: 50px;
  	position: absolute;
    padding: 7px;
    visibility:hidden;
    opacity: 0;                
    background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	/* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */		
}
 
#item4:hover > div {
	visibility:visible;
    opacity: 1;
    margin-top: -150px;
	margin-left: 170px; 
    /* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}
 
#item4 > div {
    width: 100px;
	height: 50px;
  	position: absolute;
    padding: 7px;
    visibility:hidden;
    opacity: 0;                
    background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	/* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */		
}
 
#item4:hover > div {
	visibility:visible;
    opacity: 1;
    margin-top: -150px;
	margin-left: 170px; 
    /* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}