.gallery_container {
	width: 500px; 
	margin: 0px auto 20px auto !important; 
	position: relative; 
	text-align: left !important;
}

/*.gallery_container * { border: 1px dotted #ff0000 !important; text-align: left !important;}*/
.gallery {
          margin:0 !important; padding:0 !important;
          overflow:hidden !important; /* Clears the floats */
          width:100% !important; /* IE and older Opera fix for clearing, they need a dimension */
          list-style:none !important;
          text-align: left !important;
}

.gallery_container p { margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; ; float: left; }
.gallery li {
            float:left !important;
            display:inline !important; /* For IE so it doesn't double the 1% left margin */
            width:68px !important;
            margin:1px 1px 1px 1px !important; 
            padding:3px 3px 3px 3px !important;
            height:68px !important; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */ 
            position:relative !important; /* This is the key */
            background-image: none !important;
       
			
}
.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:#E3E0D1;
              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:#FFCEE6;
}