

.gallery_container {
	width: 158px; 
	position: relative; 
	float: right;
	border: 0px solid #000;
	text-align: center;
	margin-right: 30px;
}

.gallery {
          margin:0; padding:0;
          overflow:hidden; /* Clears the floats */
          width:100%; /* IE and older Opera fix for clearing, they need a dimension */
          list-style:none;
}
.gallery li {
            float:left;
            display:inline; /* For IE so it doesn't double the 1% left margin */
            width:68px;
            margin:1px !important; padding:3px !important;
            height:68px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */ 
            position:relative; /* This is the key */
			
}
.gallery a,
.gallery img{
              display:block;
              width:100%;
}

.gallery a img{ border:none; padding: 0 !important; margin: 0 !important;} /* A small fix */

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
              padding:3px;
              background:#6a0112;
              width:60px; height:60px;
              border:0px solid #FFCC00; /* We blend the border with the bg, as if it isn't there */
              position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
              margin:-30px 0 0 -30px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}
.gallery a:hover{
			  background:#9a001a;
}

