/* defaults for all examples */
.kwicks {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	z-index:999;
}
.kwicks li{
	display: block;
	overflow: hidden;
	padding: 0px;
	margin:0px;
	cursor: pointer;
}

/* example7 */
#example7 li {
	float: left;
	width: 140px;
	height: 98px;
	background: url(../images/nav-sep.png) no-repeat top left;
	
}
#example7 li.active .menu-desc {
	display: block;
	
}
#example7 .kwicks_inner {
	width: 165px;
}
#example7 ul li a {
	outline: none;
	color:#FFFFFF;
}
#example7 span.menu-title {
	display: block;
	font-size: 120%;
	font-weight: bold;
	padding: 15px 15px 5px 0px;;
	text-transform: uppercase;
	
}

#example7 span.menu-desc {
	clear: both;
	font-size:100%;
	color: #ffffff;
	display: block;
	line-height: normal;
	font-weight:bold;
	padding: 0 15px 0px 0px;
	white-space:normal;
	width:120px;
}
#example7  ul {
	display: block;
	padding: 0;
	margin: 0;
	
}

#example7 a {
	display: block;
	cursor: pointer;
	overflow: hidden;
	width: 99%;
	background-repeat: no-repeat;
	text-decoration: none;
	height: 98px;
	color:ffffff;
}

#example7  a:hover{
	color: #fffffd;
}

#example7 a img {
	top: 15px;
	float:right;
	padding:0px;
	margin:0px;
	position:relative;
	color:ffffff;
}

/* example6 */
#example6 li {
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#example6 #kwick1 { 
	background-color: #53b388;
	background-image: url('../images/meet.gif');
}
#example6 #kwick2 {
	background-color: #5a69a9;
	background-image: url('../images/kwicks.gif');
}
#example6 #kwick3 {
	background-color: #c26468;
	background-image: url('../images/for.gif');
}
#example6 #kwick4 { 
	background:#bf7cc7 url('../images/jquery.gif') no-repeat ;
	margin-right: 0px;
}
#example6 li.select {
 width:180px;
}
<!-- Jquery Image zoom box-->
div.eyezoom {
	line-height: 0;
	font-size: 0;

	z-index: 10;

	border: 5px solid #ffffff;
	margin: -5px;

	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	box-shadow:10px rgba(0, 0, 0, 0.6);
}

	div.eyezoom a {
		background: url(../images/jquery.imageZoom.png) no-repeat;

		display: block;
		width: 25px;
		height: 25px;

		position: absolute;
		left: -17px;
		top: -17px;
		/* IE-users are prolly used to close-link in right-hand corner */
		*left: auto;
		*right: -17px;

		text-decoration: none;
		text-indent: -100000px;
		outline: 0;

		z-index: 11;
	}

	div.eyezoom a:hover {
		background-position: left -25px;
	}

	div.eyezoom img, 
	div.eyezoom embed, 
	div.eyezoom object, 
	div.eyezoom div {
		width: 100%;
		height: 100%;
		border: 5px solid #ffffff;
		
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
	 box-shadow:0 0 20px rgba(0, 0, 0, 0.6);
	 -moz-border-radius:10px;
	  -webkit-border-radius:10px;
	  border-radius:10px;
	 
	}
.overlaydiv{
			
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index:100;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
/* ---------- gallery styles start here ----------------------- */
.photo {
	position: relative;
}
.sample1 span {
	width: 20px;
	height: 15px;
	display: block;
	position: absolute;
	top: -8px;
	left: 50px;
	background: url(../images/pin.png) no-repeat;
}
.sample11 span {
	width: 122px;
	height: 72px;
	display: block;
	position: absolute;
	top: -26px;
	left: -12px;
	background: url(../images/floral-corner.png) no-repeat;
}
.sample3 span {
	width: 20px;
	height: 41px;
	display: block;
	position: absolute;
	top: -8px;
	left: 50px;
	background: url(../images/paper-clip-mini.png) no-repeat;
}