@charset "utf-8";
/* CSS Document */


ul#gallery, #gallery ul{
/*Remove all spacings and bullets*/
	list-style-type: none;
	list-style-image:none;
	margin: 0;
	padding: 0;
}

ul#gallery>li{
	list-style-type:none;
	list-style-image:none;
	float: left;
	padding: 10px;
	margin: 10px;
	width: auto;
	height: auto;
	border: 1px solid transparent;
}

ul#gallery>li ul{
	padding: .8em;
	margin-top: 50px; /*may be adjusted according to the dimension size of the thumbnail images*/ [*]
	border: 1px solid #000;
	background-color: #fff;
	color: #000;
	font-size: 90%;
	max-width: 40%; /*prevent the popups from being too wide*/
	display: none;
	position: absolute;
}

ul#gallery>li ul li{
	margin-top: 2px; /*some spacing between the image data*/
}

ul#gallery>li:hover{
/*of course, the colors are customizable*/
	color: #369;
	background-color: transparent;
	border-color: #369;
}

ul#gallery>li:hover ul{
	display: block;
	list-style-type: none;
}

ul#gallery ul:before{
/*display the 'Image Information' at the top of the popups*/
	content: "Image Information";
	font-size: 130%;
	font-weight: bold;
	border-bottom: 1px solid #999;
	display: block;
}

ul#gallery ul:after{
/*display the '(click to view the larger version of this image)' at the bottom of the popups*/
	content: "(click to view the larger version of this image)";
	font-size: 90%;
	text-align: right;
	border-top: 1px solid #999;
	display: block;
	margin-top: 1em;
}

ul#gallery img{
/*width and height may be adjusted according to the dimension size of the thumbnail images*/
	width: 100px;
	height: 100px;
	display: block;
	border:1px solid #CCCCCC;
}

img,a img{
/*Remove borders from images*/
	border: 0;
}

div.clear{
/*clear the floats*/
	clear: both;
} [**]

ul#gallery:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}