/**
 * 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 */

#jsvm_gallery li {
    /* instead of display you can use float */
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

#jsvm_gallery a img {
    /* only as example */
    border: none;
}

#jsvm_gallery img,
#jsvm_foxiswitch_prev,
#jsvm_foxiswitch_next,
#jsvm_foxiswitch_slideshow,
#jsvm_foxiswitch_help {
    /* only as example */
    cursor: pointer;
}

#jsvm_foxiswitch_container,
#jsvm_foxiswitch_image {
    /* position has to be */
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    clear: both;
}

#jsvm_foxiswitch_image_old {
    /* position, top, left, z-index have to be */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 0;
    max-width: 100%;
    max-height: 100%;
}

#jsvm_foxiswitch_image_new {
    /* position, z-index have to be */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
}

#jsvm_foxiswitch_caption {
    position: absolute;
    bottom: 20px;
    z-index: 2;
    padding: 10px 0px;
    min-width: 120px;
}

#jsvm_foxiswitch_caption.container {
    margin-left: calc((100% - 1170px) / 2);
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper {
    float: left;
    width: 100%;
    font-weight: 600;
    padding: 18px 20px;
    background: rgba(0, 0, 0, .6);
    color: #ffffff;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper div.jsvehiclemanager-ss-data-title {
    float: left;
    width: 80%;
    font-size: 25px;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper div.jsvehiclemanager-ss-data-title a {
    color: #fff;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper div.jsvehiclemanager-ss-data-price {
    padding: 20px 25px;
    float: right;
    max-width: 18%;
    font-size: 20px;
    opacity: 0.9;
    text-align: center;
    margin: 5px 0px;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper div.jsvehiclemanager-ss-data-data {
    float: left;
    width: 80%;
    padding: 0px;
    line-height: 30px;
    font-size: 20px;
    padding-top: 20px;
    font-weight: normal;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper div.jsvehiclemanager-ss-data-data div {
    float: left;
    padding-right: 10px;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrapper div.jsvehiclemanager-ss-data-data div img {
    padding-right: 5px;
}

#jsvm_foxiswitch_caption div.jsvehiclemanager-ss-data-wrappera {
    padding-left: 40px;
    line-height: 30px;
    background: url(../images/cond.png) no-repeat top left;
}

#jsvm_foxiswitch_controls.lecontainer {
    margin-right: calc((100% - 1170px) /2);
}

#jsvm_foxiswitch_controls {
    position: absolute;
    right: 20px;
    bottom: 145px;
    z-index: 2;
}