/************************************************************************/
/* Feuille de style pour site flipprojets                               */
/************************************************************************/

/*----------------------------------------------------------------------*/
/* L'utilisation de variables CSS n'étant pas encore reconnue par tous  */
/* les navigateurs, on ne les utilisera pas !                           */
/*                                                                      */
/* On utilisera les CSS media queries pour adapter la taille de         */
/* certaines zones en fonction de la dimension de la fenetre            */
/* d'affichage.                                                         */
/*                                                                      */
/* Cette feuille de style pouvant être modifiée fréquement lors de      */
/* développements, on utilise une astuce lors de son chargement pour    */
/* forcer le navigateur à recharger le cache si cette feuille est       */
/* modifiée. Lors de l'appel (link), on fait suivre la référence par un */
/* "?" avec un paramètre bidon (comme si c'était une requête). On met   */
/* en paramètre (via php) la date de modification du fichier css, ainsi */
/* le cache ne sera vidé que si cette feuille est modifiée.             */
/*                                                                      */
/*----------------------------------------------------------------------*/

/************************************************************************/
/* Définitions générales de la présentation                             */
/************************************************************************/

@font-face { 
  font-family: Yanone Kaffeesatz; 
    src: url('../fonts/YanoneKaffeesatz-Regular.woff'); 
} 

html { 
  height: 100%;
}

* { 
  padding: 0;
  margin: 0;
}

body { 
  font: normal .8em arial, sans-serif;
  background: #00DFFC url(../images/theme/back2.png) repeat-x;
  color: #555;
}

p { 
  padding: 0 0 16px 0;
  line-height: 1.7em;
}

h1, h2, h3, h4, h5, h6 { 
  color: #555;
  padding: 0 0 5px 0;
}

h1, h2, h3, h4 {  
  font: normal 200% arial, sans-serif;
  text-shadow: 1px 1px #FFF;
  margin: 0 0 15px 0;
  padding: 15px 20px 5px 0;
  color: #2F84EE;
}

h2 {  
  font: normal 150% arial, sans-serif;
}

h3 {  
  font: normal 120% arial, sans-serif;
}

h4 {  
  font: normal 170% "Yanone Kaffeesatz", arial, sans-serif;
  padding: 5px 20px 5px 0;
  margin: 0;
  color: #3000E0;
}

h5 {  
  color: #888;
  font: italic 95% arial;
  letter-spacing: normal;
  padding: 0 0 15px 0;
}

h6 {  
  padding: 5px 0 25px 0;
}

img { 
  border: 0;
}

a, a:hover { 
  outline: none;
  color: #20BFD4;
  text-decoration: underline;
}

a:hover { 
  text-decoration: none;}
  
blockquote { 
  margin: 20px 0 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #F5F5F1;
}

ul { 
  margin: 2px 0 17px 16px;
}

ul li { 
  list-style-type: square;
  margin: 0 0 6px 0; 
  padding: 0 0 0 8px;
}

ol { 
  margin: 2px 0 0 24px;
}

ol li { 
  margin: 0 0 6px 0;
}

.left { 
  float: left;
  width: auto;
  margin-right: 10px;
}

.right { 
  float: right; 
  width: auto;
  margin-left: 10px;
}

.center { 
  display: block;
  text-align: center;
  margin: 20px auto;
}

h2.titre {
  padding-right: 0px;
  text-align: center;
}

/*--------------------------------------------------------*/  
/* Tous les elements HTML 5 sont par défaut du type block */
/*--------------------------------------------------------*/  

article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

/************************************************************************/
/* Définitions pour la structure de la mise en page globale du site     */
/* Modif du 10/8/2014 : Taille optimisée en fonction de l'écran/fenêtre */
/* La taille principale est définie dans #main : 900px par défaut       */
/* Si cette taille est modifiée, changer également les suivantes:       */
/* #site_content : 890px --> taille -  10px                             */
/* #content      : 660px --> taille - 240px                             */
/* #logo1        : 680px --> taille - 220px                             */
/* #clef         : 720px --> taille - 180px                             */
/* #flag         : 790px --> taille - 110px                             */
/* #apropos      : 850px --> taille -  50px                             */
/* .encadre      : 660px --> taille - 240px                             */
/* .encadre2     : 620px --> taille - 280px                             */
/* .bloc200_300  : 456px --> taille - 4 - 200 (largeur de l'image)      */
/* .bloc200_400  : 456px --> taille - 4 - 200 (largeur de l'image)      */
/* .bloc300_400  : 356px --> taille - 4 - 300 (largeur de l'image)      */
/* .bloc400_400  : 256px --> taille - 4 - 400 (largeur de l'image)      */
/* .bloc400_500  : 256px --> taille - 4 - 400 (largeur de l'image)      */
/* A noter que toutes les autres tailles ne changent pas (soit elles    */
/* sont proportionnelles, soit fixes - par exemple pour le slidebar).   */
/************************************************************************/

#main, header, #logo1, #logo2,nav, #site_content, footer { 
  margin-left: auto; 
  margin-right: auto;
}

#container { 
  background: transparent url(../images/theme/back3.png) repeat-x bottom;
}

#main { 
  margin-top: 20px;
  width: 900px;
  padding: 10px 20px 30px 20px;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #fff;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

header { 
  width: 100%;
  background: #FFF;
  color: #FFF;}

#logo { 
  width: 100%;
  height: 150px;
} 

#logo1 { 
  float: left;
  width: 680px;
  height: 150px;
  background: #FFF url(../images/theme/logo1.png) no-repeat;
  background-position: center;
} 
  
#logo2 { 
  float: right;
  width: 220px;
  height: 150px;
  background: #FFF url(../images/theme/logo2.png) no-repeat;
  background-position: center;
} 

nav { 
  width: 100%;
  height: 45px;
  border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -webkit-border: 10px 10px 0px 0px;
  background: #003FD4;
  position: relative;
  z-index: 4;
  behavior: url(../css/css3pie/PIE.htc);
} 

#site_content { 
  width: 890px;
  min-height: 1822px; /* -> ajout le 17/8/2014, doit être au minimum de la hauteur de la sidebar_container */
  background: #FFF;
  color: #555;
  /* overflow: hidden; -> supprimé le 17/8/2014 */
} 

#sidebar_container {  
  float: right;
  width: 210px;
}

.sidebar { 
  margin: 10px 0;
  width: 188px;
  padding: 10px;
  border: 1px solid #C9E5E9;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #F5FEFF;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

#content { 
  text-align: left;
  width: 660px;
  padding: 10px 0 25px 0px;
}

footer { 
  width: 100%;
  padding: 25px 0px 0px 0px;
  text-align: center; 
  background: #009AE0;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border: 0 0 10px 10px;
  color: #fff;
  font: 150% 'Yanone Kaffeesatz', arial, sans-serif;
  text-decoration: none;
  color:#FFF;
  text-shadow: 1px 1px #0BA0E5;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}
  
footer p { 
  line-height: 1.7em;
  padding: 0 0 4px 0;
}
  
footer a { 
  color: #FFF;
  text-decoration: none;
}

footer a:hover { 
  color: #E5017D;
  text-shadow: none;
  text-decoration: none;
}

#ground {
  background: #0000C4; 
  width: 100%;
  height: 100px;
  margin-top: -0px;
  position: relative; 
  z-index: 1;
}

.form_texte { 
  margin: 15px 0 0 0;
}

.form_texte p { 
  padding: 0 0 4px 0;
}

.form_texte textarea { 
  padding: 5px; 
  width: 660px;
  font: normal 75% courier;
  border: 2px dashed #3000E0; 
  background: #FFF; 
  color: #47433F;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

.form_settings { 
  margin: 15px 0 0 0;
}

.form_settings p { 
  padding: 0 0 4px 0;
}

.form_settings span { 
  float: left; 
  width: 200px; 
  text-align: left;
}
  
.form_settings input, .form_settings textarea { 
  padding: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}
  
.form_settings .submit { 
  font: 150% 'Yanone Kaffeesatz', arial, sans-serif; 
  border: 0; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 0 0 3px 0;
  cursor: pointer; 
  background: #53C7FD; 
  color: #FFF;
  text-shadow: 1px 1px #0BA0E5;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

.form_settings textarea, .form_settings select { 
  font: 100% arial; 
  width: 299px;
}

.form_settings select { 
  width: 310px;
}

.form_settings .checkbox { 
  margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;
}

.sidebar input {
  padding: 5px;
  width: 165px;
  font: 100% arial;
  border: 1px solid #E5E5DB;
  background: #FFF;
  color: #0080C5;
  border-radius: 7px 7px 7px 7px;
}

.separator { 
  width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;
}
  
table { 
  margin: 10px 0 30px 0;
}

table tr th, table tr td { 
  background: #96D7E8;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;
}
  
table tr td { 
  background: #C8EAE9;
  color: #47433F;
  border-top: 1px solid #FFF;
}

/************************************************************************/
/* Elements personalisés pour le site flipprojets                       */
/************************************************************************/

/*----------------------------------------------------------------------*/
/* menu -> Section pour les sous-menus, sur la largeur disponible       */
/*----------------------------------------------------------------------*/

.menu { 
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #C9E5E9;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #0053D9;
  font: 100% 'Yanone Kaffeesatz', arial, sans-serif;
  text-decoration: none;
  color:#FFF;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

.menu p {
      font: 120% 'Yanone Kaffeesatz', arial, sans-serif;
}

.menu h1 { 
  padding:15px 0px 5px 0px;
  color: #FFF;
  text-shadow: 1px 1px #0BA0E5;
  text-align: center;
}

.menu h2 { 
  color: #90F0FF;
  margin: 0px 0px 5px 0px;
  text-shadow: none;
}

.menu h2 img { 
  margin-right: 10px;
  vertical-align: middle;
}

.menu ul li {
  list-style: none;
}

.menu ul li a { 
  padding:9px 25px 10px 15px;
  font: 22px 'Yanone Kaffeesatz',helvetica,arial,verdana,sans;
  color: #FFF;
  text-shadow: 1px 1px #0BA0E5;
  text-decoration: none;
}

.menu ul li a:hover { 
  color: #00DEFC;
  text-shadow: none;
}

.menu ul li a.imgmenu { 
  padding-top: 3px;
  padding-bottom: 3px;
}

.menu ul li a.imgmenu2 { 
  padding-top: 2px;
  padding-bottom: 2px;
}

.menu ul a.imgmenu img { 
  margin-right: 10px;
  vertical-align: middle;
}

.menu ul a.imgmenu2 img { 
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid #003040;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border: 3px 3px 3px 3px;
  background: #004AE3;
  behavior: url(../css/css3pie/PIE.htc);
}

.menu ul a.imgmenu2:hover img{ 
  border: 1px solid #00DEFC;
}

/*----------------------------------------------------------------------*/
/* encadre -> Section encadrée classique, sur la largeur disponible     */
/*----------------------------------------------------------------------*/

.encadre { 
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #C9E5E9;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #F3FDFE;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

/*----------------------------------------------------------------------*/
/* encadre2 -> Zone encadrée, dans une section déjà encadrée            */
/*----------------------------------------------------------------------*/

.encadre2 { 
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #C9E5E9;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #F7FEFF;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

/*----------------------------------------------------------------------*/
/* encadre3 -> Section encadrée pour remarques et références            */
/*----------------------------------------------------------------------*/

.encadre3 { 
  font-size: 1px;
  margin: 10px 0;
  padding: 10px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #fff;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

.center2 { 
  display: block;
  text-align: center;
  margin: 20px auto;
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

/* image1 -> pour photos non cliquables (encadrées)     */
/* par exemple, photos du module pour PROM son unique   */

img.image1 { 
  margin: 20px auto;
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

/* image2 -> pour petites photos cliquables (encadrées en foncé) */
/* en principe utilisé pour les photos des créations             */
/* ou pour liens (par exemple FLIPPP)                            */

img.image2 { 
  border: 2px solid #003040;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  margin-top: 0;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

img.image2:hover {
  border: 2px solid #00DEFC;
}

/* image3 -> pour grandes photos cliquables (encadrées) */

img.image3 {
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

img.image3:hover {
  border: 4px double #0030A0;
  background: #4070C5;
}

/* image3g -> pour grandes photos grisées (encadrées) */

img.image3g {
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  filter: grayscale(100%);  
  z-index: 2;
}

img.image3g:hover {
  border: 4px double #000000;
  background: #FFFFFF;
  filter: sepia(100%);  
}

/* image4 -> pour dessins cliquables (non encadrées)       */
/* par exemple, les dessins des fonctions, le logo PDF     */

img.image4 {
  padding: 2px 2px 2px 2px;
  border: 2px solid transparent;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border: 5px 5px 5px 5px;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

img.image4:hover {
  border: 2px solid #C9E5E9;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border: 5px 5px 5px 5px;
  background: #F5FEFF;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

/************************************************************************/
/* Images/Boutons pour jouer l'audio                                    */
/************************************************************************/

img.player {
  width:48px;
  height:48px;
  padding: 2px 2px 2px 2px;
  border: 2px solid transparent;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border: 5px 5px 5px 5px;
  behavior: url(../css/css3pie/PIE.htc);
  vertical-align: middle;
  position: relative;
  z-index: 2;
}

img.player:hover {
  border: 2px solid #C9E5E9;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border: 5px 5px 5px 5px;
  background: #F5FEFF;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}
/* video1 -> pour les vidéos standard 400 x 300 */

video.video1 {
  height: 300px;
  width: 400px;
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

/* video2 -> pour les vidéos standard 640 x 480 */

video.video2 {
  height: 480px;
  width: 640px;
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

/* video3 -> pour les vidéos standard 480 x 320 */

video.video3 {
  height: 320px;
  width: 480px;
  border: 4px double #009ae0;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #00dffc;
  behavior: url(../css/css3pie/PIE.htc);
  position: relative;
  z-index: 2;
}

/************************************************************************/
/* Menu (bandeau en haut de l'écran)                                    */
/* --> configuration générale par défaut                                */ 
/************************************************************************/

html body ul.sf-menu ul { 
  width: 220px;
  position: absolute;
  top: 45px;
}

html body ul.sf-menu ul li { 
  width: 220px;
}

html body ul.sf-menu ul ul,html body ul.sf-menu ul ul li { 
  width: 220px;
}

html body ul.sf-menu ul li ul { 
  margin: -45px 0 0 220px;
}

/************************************************************************/
/* Menu (bandeau en haut de l'écran)                                    */
/* --> Mode de fonctionnement (apparition/éffacement/position)          */
/************************************************************************/

ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
}

ul.sf-menu { 
  display: block;
  position: relative;
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  background: url(../images/theme/arrows-white.png) no-repeat 0 0;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}

ul ul span.sf-arrow { 
  right: 10;
  top: 20px;
  background-position: 0 100%;
}

/************************************************************************/
/* Menu (bandeau en haut de l'écran)                                    */
/* --> Theme et couleurs                                                */
/************************************************************************/

ul#nav { 
  float: left;
}

ul#nav ul { 
  border: 1px solid #003040;
  border-radius: 0px 0px 15px 15px;
  -moz-border-radius: 0px 0px 15px 15px;
  -webkit-border: 0px 0px 15px 15px;
  background: #0053D9;
  behavior: url(../css/css3pie/PIE.htc);
}

ul#nav ul ul { 
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #004AE3;
  behavior: url(../css/css3pie/PIE.htc);
}

ul#nav li a { 
  padding:9px 25px 10px 15px;
  font: 22px 'Yanone Kaffeesatz',helvetica,arial,verdana,sans;
  color: #FFF;
  text-shadow: 1px 1px #0BA0E5;
  text-decoration: none;
}

ul#nav li a:hover { 
  color: #00DEFC;
  text-shadow: none;
}

ul#nav li a.imgmenu { 
  padding-top: 3px;
  padding-bottom: 3px;
}

ul#nav li a.imgmenu2 { 
  padding-top: 2px;
  padding-bottom: 2px;
}

ul#nav ul  a.imgmenu img { 
  margin-right: 10px;
  vertical-align: middle;
}

ul#nav ul  a.imgmenu2 img { 
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid #003040;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border: 3px 3px 3px 3px;
  background: #004AE3;
  behavior: url(../css/css3pie/PIE.htc);
}

ul#nav ul  a.imgmenu2:hover  img{ 
  border: 1px solid #00DEFC;
}

/************************************************************************/
/* Menu (bandeau en haut de l'écran)                                    */
/* --> customisations, tailles adaptées en fonction du contenu          */ 
/************************************************************************/

ul#flippers{ 
  width: 240px;
  padding: 3px 0 0 0;
}
ul#flippers li { 
  width: 240px;
}
ul#flippers ul { 
  margin-left: 240px;
  padding: 1px 0 3px 0;
}

ul#projets { 
  width: 470px;
  padding: 3px 0 0 0;
}
ul#projets li { 
  width: 470px;
}
ul#projets ul { 
  margin-left: 470px;
  padding: 1px 0 3px 0;
}

ul#telechargements { 
  width: 360px;
  padding: 3px 0 0 0;
}
ul#telechargements li { 
  width: 360px;
}
ul#telechargements ul { 
  margin-left: 360px;
  padding: 1px 0 3px 0;
}

#flag { 
  position: absolute;
  height: 21px;
  width: 38px;
  left: 700px;
  top:12px;
} 

ul#nav li#flag a { 
  padding: 0 0 0 0;
}

#clef { 
  position: absolute;
  left: 740px;
  top:3px;
} 

#contactus { 
  position: absolute;
  left: 805px;
  top:9px;
} 

ul#nav li#contactus a { 
  padding: 0 0 0 0;
}

#apropos { 
  position: absolute;
  left: 850px;
  top:7px;
} 

ul#nav li#apropos a { 
  padding: 0 0 0 0;
}

/************************************************************************/
/* Slidepub                                                             */
/* --> slideshow pour les publicités                                    */ 
/************************************************************************/

ul.slidePub {
    list-style:none;
    width:175px;
    height:175px;
    overflow:hidden;
    position:relative;
    margin:0 0 0 10px;
    padding:0;
    background: #F5FEFF;
}   
 
ul.slidePub li {
    position:absolute;
    left:0;
    right:0;
    margin:0;
    padding:0;
    border:none;    
}
 
ul.slidePub li.Pub {
    margin:0;
    padding:0;
    z-index:500;    
}

/************************************************************************/
/* Slidepinup                                                           */
/* --> slideshow pour les girls                                         */ 
/************************************************************************/

ul.slidePinup{
    list-style:none;
    width:500px;
    max-width: 500px;
    margin: 0 auto;
    height:500px;
    overflow:hidden;
    position:relative;
    padding:0;
    background: #F5FEFF;
    border: 4px double #009ae0;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border: 15px 15px 15px 15px;
    behavior: url(../css/css3pie/PIE.htc);
    z-index: 2000;
}   
 
ul.slidePinup li {
    position:absolute;
    left:0;
    right:0;
    margin:0;
    padding:0;
    border:none;    
}
 
ul.slidePinup li.Pinup {
    margin:0;
    padding:0;
    z-index:500;    
}

#slidePinup-caption {
    height:23px;
    position:absolute;
    bottom:0;
    left:0; 
    background:#C0C0C0;
    z-index:500;
}

#slidePinup-caption .slidePinup-caption-container {
    padding:5px 10px;   
    z-index:1000;   
}
 
#slidePinup-caption h3 {
    margin:0;
    padding:0;  
    font-size:14px;
	color:#000000;
	text-align: center;
}

#slidePinup-caption p {
    margin:5px 0 0 0;
    padding:0;
}

/************************************************************************/
/* Slideshow                                                            */
/* --> autres slideshow pour des images                                 */ 
/************************************************************************/

ul.slideshow {
    list-style:none;
    width:500px;
    height:374px;
    overflow:hidden;
    position:relative;
    margin-left:60px;
    padding:0;
    border: 4px double #009ae0;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border: 15px 15px 15px 15px;
    background: #00dffc;
    behavior: url(../css/css3pie/PIE.htc);
    z-index: 2000;
}   

ul.slideshow:hover {
  border: 4px double #0030A0;
  background: #4070C5;
}
 
ul.slideshow li {
    position:absolute;
    left:0;
    right:0;
    margin:0;
    padding:0;
    border:none;    
}
 
ul.slideshow li.show {
    margin:0;
    padding:0;
    z-index:500;    
}

#slideshow-caption {
    height:50px;
    position:absolute;
    bottom:0;
    left:0; 
    color:#fff;
    background:#000;
    z-index:500;
}
 
#slideshow-caption .slideshow-caption-container {
    padding:5px 10px;   
    z-index:1000;   
}
 
#slideshow-caption h3 {
    margin:0;
    padding:0;  
    font-size:14px;
	text-align: center;
}
 
#slideshow-caption p {
    margin:5px 0 0 0;
    padding:0;
}


/************************************************************************/
/* Blocs d'affichage de hauteur fixe                                    */
/* Pour afficher une image à gauche et du texte à droite                */ 
/************************************************************************/

/* simplification 19/8/2014 -> nombre de blocs réduits */

.bloc200_300 div {
    height:300px;
}

div.bloc200_300 div {
    display: inline-block;
    vertical-align:middle;
    width:456px;
    margin-top:-300px;
	margin-left:200px;
    max-height:300px;
    overflow:auto;
}

.bloc200_400 div {
    height:400px;
}

div.bloc200_400 div {
    display: inline-block;
    vertical-align:middle;
    width:456px;
    margin-top:-400px;
 	margin-left:200px;
    max-height:400px;
    overflow:auto;
}

.bloc300_400 div {
    height:400px;
}

div.bloc300_400 div {
    display: inline-block;
    vertical-align:middle;
    width:356px;
    margin-top:-400px;
	margin-left:300px;
    max-height:400px;
    overflow:auto;
}

.bloc400_400 div {
    height:400px;
}

div.bloc400_400 div {
    display: inline-block;
    vertical-align:middle;
    width:256px;
    margin-top:-400px;
	margin-left:400px;
    max-height:400px;
    overflow:auto;
}

.bloc400_500 div {
    height:400px;
}

div.bloc400_500 div {
    display: inline-block;
    vertical-align:middle;
    width:256px;
    margin-top:-400px;
	margin-left:400px;
    max-height:400px;
    overflow:auto;
}

/************************************************************************/
/* Onglets pour affichage des documentations                            */
/************************************************************************/

.tabs { 
  margin: 10px 0;
  width: 100%;
  padding: 10px 0px 10px 0px;
  border: 1px solid #C9E5E9;
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border: 15px 15px 15px 15px;
  background: #F3FDFE;
  position: relative;
  z-index: 2;
  behavior: url(../css/css3pie/PIE.htc);
}

.tabs ul
{
   list-style-type: none;
   padding-bottom: 32px;
   border: 1px solid #003040;
   /* margin: -10px -10px 30px -10px; */
   margin: -10px 0px 30px 0px;
   border-radius: 15px 15px 0px 0px;
   -moz-border-radius: 15px 15px 0px 0px;
   -webkit-border: 15px 15px 0px 0px;
   background: #0BA0E5;
   behavior: url(../css/css3pie/PIE.htc);
}

.tabs ul li 
{
   float: left;
   text-decoration: none;
   list-style-type:none;
   height: 21px;
   text-shadow: 1px 1px #003040;
   background-color: #004AE3;
   padding: 0px 5px 8px 5px;
   font: 22px 'Yanone Kaffeesatz',helvetica,arial,verdana,sans;
   color: #FFF;
   margin: 2px -5px 0px 10px;
   border: 1px solid #fff;
   border-bottom: 1px solid #003040;
   border-radius: 5px 5px 0px 0px;
   -moz-border-radius: 5px 5px 0px 0px;
   -webkit-border: 5px 5px 0px 0px;
   background: #004AE3;
   behavior: url(../css/css3pie/PIE.htc);
}					

.tabs ul li.active 
{
   border-bottom: 1px solid #F3FDFE;
   background-color: #F3FDFE;
}

.tabs ul li a 
{
   float: left;
   display: block;
   text-decoration: none;
}

.tabs ul li a:hover { 
  color: #00C0FC;
  text-shadow: none;
}

.tabs div
{
   margin-left: 20px;
}

/************************************************************************/
/* Machine à bulles                                                     */
/************************************************************************/

.bubble {
	z-index: 2000;
}

/************************************************************************/
/* Fenêtre RGPD (accepter les cookies)                                  */
/************************************************************************/

.rgpd {
   position: fixed;
   bottom: 20px;
   right:20px;
   border-radius: 10px;
   background:#000040;
   color:#80FFFF;
   padding:10px 15px;
   width:400px;
   z-index:100;
}
.rgpd a { 
   display:block;
   text-align: center;
   padding:5px 10px;
   margin:8px auto 0 auto;
   border-radius: 10px;
   background:transparent;
   border: 2px solid #FFFFFF;
   color:#0080A0;
   transition: all .3s ease;
}
   .rgpd a:hover {
      background: #00FFFF;
      color:#000020;
   }
@media only screen and (max-width:480px) {
   .rgpd {
      text-align: center;
      left: 0; right: 0;;
        margin: 0 auto;
      max-width:700px;
      padding:10px 30px;
   }
}