.gallery_container {
	width: 620px; 
	margin: 20px auto 20px auto !important; 
	position: relative; 
	border: 0px solid #ff0000;
	text-align: center;
}


.gallery{
          padding: 0 !important;
	  margin: 0  !important; 
          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:54px;
            margin:3px !important; padding:4px !imporant;
            height:60px; /* Height of img (75) + 2 times 5px 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;} /* A small fix */

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
              padding:3px;
              background:#fbeaa3;
              width:46px; height:46px;
              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:-23px 0 0 -23px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}
.gallery a:hover{
			  background:#711516;
}