/**
 * name:      jquery-foxiswitch-0.1.css
 * author:    Stefan Benicke - www.opusonline.at
 * date:      29.09.2009
 * category:  stylesheet for jquery-foxibox-0.1.js
 * copyright: (c) 2009 Stefan Benicke (www.opusonline.at)
 * license:   GNU GPLv3 <http://www.gnu.org/licenses>
 * example:   http://www.opusonline.at/foxitools/foxiswitch/
 * 
  <div id="foxiswitch_container">
    <div id="foxiswitch_image">
      <div id="foxiswitch_image_old"><img /></div>
      <div id="foxiswitch_image_new"><img /></div>
    </div>
    <div id="foxiswitch_caption"></div>
    <div id="foxiswitch_helptext"></div>
  </div>
  <ul id="gallery">  <!-- change "gallery" to your image list id -->
    <li><img /></li> or <li><a><img /></a></li>
    ...
  </ul>
  <div id="foxiswitch_controls">
    <span id="foxiswitch_prev"></span> |
    <span id="foxiswitch_next"></span> |
    <span id="foxiswitch_slideshow"></span> |
    <span id="foxiswitch_help"></span>
  </div>
 */

/* change #gallery to your image list id */
#gallery li {
/* instead of display you can use float */
	position: relative;
  	float: left;
  	display: inline;
  	margin: 0;
  	text-align: center;
  	padding: 2px;
  	list-style: none;
	z-index: 102;
}
#gallery a img {
/* only as example */
 	border: 3px solid #FFFFFF;
}
#foxiswitch_container, #foxiswitch_image {
/* position has to be */
  	position: relative;
  	margin-bottom: 5px;
 }
#thumbnails-gallery {
	margin: 0 auto;
	}  
#foxiswitch_image_old {
/* position, top, left, z-index have to be */
 	text-align: center;
  	position: absolute;
  	z-index: 100;
  	border: 3px solid #FFFFFF;
  }
#foxiswitch_image_new {
/* position, z-index have to be */
  	position: relative;
   	z-index: 101;
   	border: 3px solid #FFFFFF;
}

#gallery img, #foxiswitch_prev, #foxiswitch_next, #foxiswitch_slideshow, #foxiswitch_help {
/* only as example */
  cursor: pointer;
}