/**************************************************
File:         jtfs_simple_gallery.css
Site:         jtfs.co.uk
Author:       Alex Adams, Juju Web Solutions (alex@jujuwebsolutions.co.uk)
Description:  Simple gallery sheet for J T Finishing Solutions  

History:      
				2008-01-23 AA Created
***************************************************/

#gallery{
  clear: both;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #eeeeee; 
  width: 520px;
  height: 260px;
  border: 1px solid #cccccc;
   /*overflow: auto;*/
}

#thumbs{
  float: left;
  width: auto;
  margin-left: 20px;
  margin-top: 10px;

}

#before{
  float: left;
  width: 70px;
  height: 180px;
  text-align: center;
}

#after{
  float: left;
  width: 70px;
  height: 180px;
  text-align: center;
}

#before, #after{
  text-align: right;
}

#before ul, #after ul{
  list-style:none;
  padding:0;
  margin:0;
  width: 60px;
  position: relative;
  float: left;


}

#before ul li,#after ul li{
  float: left;
  width: 52px;
  height: 52px;
  margin-top:6px;
  margin-bottom: 6px;
}

#before ul li a,#after ul li a{
  display:block;
  width:50px;
  height:50px;
  text-decoration:none;
  border:1px solid #777777;
}

#before ul li a img,#after ul li a img{
  display:block;
  width:50px;
  height:50px;
  border:0;
}

#before ul li a:hover,#after ul li a:hover{
  white-space:normal;
  border:1px solid #777777;
}


#before ul li a:hover img {
  position:absolute;
  left:200px;
  top:0;
  width:auto;
  height:auto;
  border:1px solid #777777;
}

#after ul li a:hover img{
  position:absolute;
  left: 120px;
  top:0;
  width:auto;
  height:auto;
  border:1px solid #777777;
}