/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * 
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow 
{ width: 45%; min-width: 200px; max-width: 500px; 
  margin: 10px auto; padding: 0; position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;

 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size:0.5em; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
.cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobild devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { width: 200px;}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }
}
/*
    Auto-hauteur est une fonctionnalité très pratique fourni par cycle2 qui gère la hauteur d'un conteneur de diaporama. Afin d'obtenir un effet de diaporama diapositives doivent être en position absolue au sein de leurs parents afin qu'ils puissent être empilés sur l'un l'autre. Toutefois, cela provoque l'élément parent de sombrer dans un élément de zéro parce que la hauteur des éléments absolument postioned ne participent pas dans le flux normal du document.
 
Ce comportement n'est pas un problème que vous attribuez une hauteur spécifique à votre conteneur diaporama via CSS, et généralement c'est ce qui est fait. Toutefois, si vous souhaitez avoir un diaporama fluid-width puis en attribuant une hauteur fixe au problème. Entrez cycle2 de l'auto-hauteur caractéristique. Fréquence2 fournit deux façons de gérer la hauteur du conteneur d'une manière qui facilite simples, la largeur des motifs de fluide.
 
En tirant parti de l'auto-Cylce2 hauteur fonctionnalité, vous pouvez créer un slideshow fluide de largeur avec des règles de style tout simplement comme ceci:
  */
.cycle-slideshow { width: 100% }
.cycle-slideshow img { width: 100%; height: auto }

/*<img width="200" height="150" ...>, 
    La fonction d'auto-hauteur ne réglez pas la hauteur des diapositives , 
    tout le récipient. 
    Si vos diapositives sont des images qui ont des dimensions fixes déclarés dans la balise, 
    comme width="200" height="150" <img ...> , 
    alors vous devrez soit supprimer ces attributs de la dimension ou de les remplacer 
    en CSS si voulez pour utiliser cette fonctionnalité.  */