/* CSS Document */

 
 
 /*----------  DECLARATION DES  FONTS LOCALES---------*/


 @font-face {
    font-family:'IndieFlower';
    font-weight: normal;
    src: url('../font/IndieFlower.ttf') format('truetype');
}

@font-face {
    font-family: 'PT Sans Narrow';
    font-weight: normal;
    src: url('../font/PT_Sans-Narrow-Web-Regular.ttf')format('truetype');
} 

 @font-face {
    font-family: 'Roboto Condensed';
    font-weight: normal;
    src: url('../font/RobotoCondensed-Light.ttf')format('truetype');
}
 
 
 
 /*----------  DECLARATION DES ID ---------*/

body { 
margin: 0;
padding: 0;
background-color:#f5f5f5; /*----------  GRIS clair---------*/
background-color:#fff;
font-family: Helvetica, Arial,sans-serif; 
font-family: 'Roboto Condensed'; 
 }

 #navbar_header{
  width: 1240px;   
  background-color: transparent; 
  margin-left:auto;
  margin-right:auto; 
  float : none;
 } 

#next img{border:0;box-shadow:0 0 0}
 
/*---  FIN TRADUCTION ---*/ 

#topheader_container{
   width: 1184px; 
   width: 100%;
   height:400px;   
   background-color:#63704b; /*--------vert kaki----*/
   background-color:#fff;
   background: 
   url(../images/general/top_planete_joce.png) no-repeat center top 0%;        
   margin-left:auto;
   margin-right:auto; 
}
 
#global{
width: 1140px; 
background-color:#fff; 
font-family: 'Roboto Condensed'; 
font-size: 20px; 
margin-left: auto;
margin-right: auto;
 }

 #global p{
  font-family: 'Roboto Condensed'; 
  color:#222; 
  font-size: 20px; 
  line-height: 1.5;
  text-align: justify;
 }
 
 #header1100{ 
   width:100%; 
   height:249px;  
  background-color:#63704b; /*--------vert kaki----*/
  background-color:#fff;

  background:  
  url(../images/general/topblanc1100.jpg) no-repeat center bottom 0%;   
   
   margin-top: 70px;
   margin-left:auto;
   margin-right:auto;
  }

#header{
  width:100%;  
  height:365px; 
 background:  url(images/general/topjoce.png) no-repeat left 0% top 0%; 
 margin-top: 0;
 }
 
 /*---  FIN HEADER ---*/ 

 

 /*------- MILIEU----*/
 
#milieu{
width:1100px; 
font-size: 20px;
margin-left: auto;
margin-right: auto; 
 }

 /*------- TEXTE----*/

 #texte{
 padding: 0 60px 0 60px;
 font-size: 20px;
 text-align:center;
 }

 #texte p{
font-family: 'Roboto Condensed'; 
line-height: 1.5;
 font-size: 20px;
 text-align:justify;
 }

 #texte img{
   text-align:center;
 }

/*--------FIN TEXTE----*/

  #contenu p{
 font-family: 'Roboto Condensed'; 
 line-height: 1.5;
 font-size: 20px;
 text-align:justify;
 }

  #contenu img{
   text-align:center;
 }

/*--------FIN CONTENU----*/

#menu{
background: #fff; 
text-align:center;
float:left;
  } 

 /*------------COPYRIGHTS---------*/ 

#copyrights{
width:35px;
height:35px;
background-image:url(../images/copie_interdite.jpg);
background-repeat:no-repeat;   
float:right;
 }

 /*------------COPIE - COPYRAIGHTS BAS---------*/ 

#copie{ 
width: 100%
height: 60px;
background-color: #000;
background-color: #f6f6f6;  /*---  GRIS CLAIR---*/ 
color:#798081;
color: #222;
color: #414141;
text-align:center; 
padding:30px 0 30px 0 ;
font-size: 24px;
text-transform:uppercase;  
}
 
#fleche{
 width:40px;
 height:45px;
 float:left;
}

  /*-------------NEXT------------*/ 
 
#next{
width:50px;
float:right;
}
 

/*-------------HOME------------*/ 
 
#home{
 width: 64px;
 height: 64px;
}
 
#home img{
 text-align: left; 
}
 /*---  NAVIGATION ---*/ 
 
#navigation{
 width: 100%;
 height:45px;
 background-color:#fff;
 text-align: center;
  
}
#navigation a:visited {
  color:#ff0000;
} 

 #navigation2 {
 padding-top:15px; 
 border:none;
}

 #navigation2 h2{font-size:30px;
 }

 #navigation2 a{font-size:22px;
 }

 #navigation2 a:visited {
  color:#ff0000;
}  

 #navigation3 {
 text-align:center;
}

 /*---  FIN NAVIGATION ---*/ 
 

/*----------------- BLOCK-----------*/

#block{
 border:1px solid #555;
 padding:0 30px 0 30px; 
 border:1px solid #444;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
}

#block p{
  color:#222;
  font-size:17px;
}

#block a {
color:#222;
font-size:17px; 
}

#block h4{ 
  padding:0;
}
   
/*------------------- FIN BLOCK------------*/

#encart{ 
 border:1px solid #222; 
 background-color:#fff;
 padding:15px 15px 5px 15px;
}
#encart p{ 
  font-size:17px;
  color:#222;
}


 /*-------------  DIAPORAMA ------------*/ 

#diaporama{
width:100%;
background-color:#000;
color:#fff;
text-align:center;
padding-bottom:40px;
margin-right: auto;
margin-left: auto;
}

#diaporama img{
border:none;
box-shadow: 0 0 0; 
}

#diaporama h2{
color:#fff;
font-size:45px; 
text-align:center;
}
 

#diaporama h3{
color:#fff;
text-align:center;
}

#diaporama h4{
color:#fff;
text-align:center;
}
 
#diaporama p{
 padding:0 90px 25px 90px;
}

#diaporama img{
border:1px solid #fff;
}  

 /*---  FIN DIAPORAMA ---*/ 

#imagebas{
  text-align:center;
  background-color: #322216;
   padding-top:40px;
   padding-bottom:40px;
  color:#fff;
  font-size:20px;
  clear:both;
}
 
 #footer{
  width:100%;
  background-color:transparent;
  text-align:center;
  padding-top:20px;
  padding-bottom:20px;
  margin-bottom:0; 

 }

 #clear{
 clear:both; 
 }
 
/*--------FIN  DECLARATION DES ID-------------- */

/*///////////////////////////////////////////////////////////////////*/


/*----------DECLARATIONS DES BALISES---------*/


/*-------------------------  FIN DES DECLARATIONS DES FONTS  ------------------------------- */

  
 
/*---------- TITRES H---------*/  

h1{
font-family: 'IndieFlower'; 
font-size:60px; 
color:#222;  
color:#706e6e; /*--------gris encore + clair----*/ 

 color:#63704b;
line-height:normal;
font-weight: 200;  
 
text-transform: uppercase;
clear:both;
 }

/*---------- ---------*/    
 
h2{ 
font-family: 'IndieFlower';
 
font-weight: 200;  
line-height:normal;

 color: #B5383D;/*--------rouge fonce ----*/ 
 color:#798081; /*--------gris pas trop fonce-----*/  
 color:#706e6e; /*--------gris encore + clair ----*/ 
color:#63704b;   
color:#222;   
 
text-transform:uppercase;
font-size:50px;  
text-align:left;
 }

    
h3{
font-family: 'PT Sans Narrow' Helvetica, sans-serif; 
font-family:'Roboto Condensed';
 
color:#706e6e; /*--------gris encore + clair----*/ 
color:#63704b;
color:#222; 
font-weight:200; 
font-size:40px;
line-height:normal;
text-align:left; 
 }


h4{
font-family: 'PT Sans Narrow' Helvetica, sans-serif;  
color:#444;
font-weight:200;
font-size:30px;
line-height:0.5em;
text-align:left; 
}

#texte h4{margin-top: 40px;}

 h5{
font-family: 'PT Sans Narrow' Helvetica, sans-serif;  
color:#444;
font-weight:200;
font-size:25px;
text-align:left; 
}

td {font-family: 'Roboto Condensed';
font-size:19px;
} 
 
td p {font-family: 'Roboto Condensed';
font-size:19px;
} 
 
 
/*---------- LIENS  ---------*/

 ul{text-align:left;
  list-style-type:none;
  text-decoration:none;
}
  
a:link{font-size:18px;
  font-family: 'Roboto Condensed';
  color:#222;
 text-decoration:none;
  }
 
}
a:hover {
font-size:18px;
   font-family: 'Roboto Condensed';
 text-decoration:none;
}
a:active {
 font-size:18px;
font-family: 'Roboto Condensed';
 text-decoration:none;
}

/*----------FIN DES DECLARATIONS DES LIENS---------*/
  

#colright img{
  text-align: center;
}

 
/*-------- SOMMAIRE ----*/

 #sommaire{ 
 text-align:center;
}

 #sommaire h2{ 
font-size:28px;
text-align:center;
margin-top:40px;
}

#sommaire h3{
 font-size:28px;
text-align:center;
}

 #sommaire p{ 
    margin: 0 0 18px;
    padding: 5px 15px;
    border-bottom: none;
    border-left: 5px solid #c3c3c3;
    background: #ebebeb;
    color: #333;
    font-size: 18px;
    line-height: 24px;
    text-align:left;
 }

.sommaire{
    text-align: center;
    border-right: 2px solid #c3c3c3;
    border-left: 2px solid #c3c3c3;
    background: #ebebeb;
    color: #333;
    font-weight: 400; 
}


#sommaire ul li {font-size:20px;
} 

#sommaire a:link{
  color: #222;
  font-size:20px;
  }

#sommaire a:visited {
  color: #0000FF;
  font-size:20px;
}
#sommaire a:hover {
  color: #66CC66;
  font-size:20px;
}
#sommaire a:active {
  color: #0000FF;
  font-size:20px;
}


/*-------- FIN SOMMAIRE----*/
 
#retour{
 width:80px;
 padding-top:5px;
 text-align:right;
 float:right;
} 


#hotels{  
   height:40px;
  background-color:#CCCC66;
  border:1px solid #555;
  padding:15px 0 0 0;
  text-align: center;
  clear: both;
}

/*---------- I FRAME  ---------*/

iframe{
 margin-left:0;
 padding-left:0;
 border:none;
 }
 
 #menu iframe{ 
 border:none;
 box-shadow: 0 0 0;   
 }

 #footer iframe{
 border:none;
  box-shadow: 0 0 0;   
 }
 
#livredor iframe{
 border:none;
 box-shadow: 0 0 0;   
 }
 #bas iframe{
 border:none;
  box-shadow: 0 0 0;   
 }
 
 /*---------- MARQUEE  ---------*/

marquee{font-size:12px;
color:#FFFF00;
font-style:italic;
font-weight:bold;
margin-top:10px;
}  
 
/*----------FIN DES DECLARATIONS DES BALISES---------*/
 

 
/*-------- DECLARATION DES CLASSES------------------------ */
 
.date{
color:#ff0000;  
}
 
 .liensgros{
  font-family: 'Comic Sans MS';
  font-size: 15px; 
  color: #FF6600;
}

.blanc{color:#fff;}
.noir{color:#000;}
.jaune{
			color:#FFFF00;
			font-size:18px;
			font-style:italic;
}

.gras{font-weight:bold;}

.strong{
	font-weight: 500;
}
.italique{
	font-style:italic;
	color:#FFFF00;
}


 /*    --------   TAILLE POLICES    --------   */
 
.font14{
  font-size:14px;
   color:#222;
}
.font15{
  font-size:15px;
    color:#222;
}
.font17{
  font-size:17px;
   color:#222;
}
.font18{
  font-size:18px;
   color:#222;
}
.font19{
  font-size:19px;
   color:#222;
}
.font22{
  font-size:22px;
}
.font25{
  font-size:25px;
}

 /* -----------------------  */

.arrondi{
border:solid #FFFFFF 1px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
-goog-border-radius:10px;
 padding:3px;
}

.titresommaire{
 border: 1px solid #527318;    
-moz-border-radius:5px;
-webkit-border-radius:5px;  
 -goog-border-radius:5px;  
 padding:10px 20px 10px 20px;
     transform: rotate(-4deg);  
     border-radius: 50%;  
    box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 5px 10px rgba(0,0,0, 0.7);  
  }
 
 /* -----------BORDER -----------*/

.border{
border: 1px solid #154A2C ;
border: 1px solid #444 ;
padding:3px;
 }

.border10{
border:solid 10px #fff;
}
.border5{
 border:solid 5px #fff;
 }

 /* --------   IMAGES  NO BORDER    --------   */

.noborder{border:none;
box-shadow:0 0 0;
}

img.sansBordure{border:none;
box-shadow:0 0 0;
}

a img{border:none;
box-shadow:0 0 0;
}

#next img{ 
border:none;
box-shadow:0 0 0;
}

#fleche img{
border:none;
box-shadow:0 0 0;
}
 

#retour img{
border:none;
box-shadow:0 0 0;
}

#copyrights img{
border:none;
box-shadow:0 0 0;
}

#sommaire img{
border:none;
box-shadow:0 0 0;
} 

#colgauche{float:left}


#coldroite {float:right;
font-size:20px;
border:none;
box-shadow:0 0 0;
text-align: center;
}

#coldroite p{
   font-size:20px;
}

 #coldroite img{
 text-align: center; 
}
  
#coldroite h1, h2, h3{
 font-weight: 200;  
 line-height:normal;
}
#coldroite h2{
 font-weight: 200;  
 line-height:normal;
 clear:both
}

  
 /*   ------------------ VIDEO  ------------------   */

video{border:none;
background-color: #fff;
}

#photos {float:left;}

#videos {float:right;}

.video{
 background-color:#fff;
 -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -goog-border-radius:5px;
    border:1px solid #cecbbd;
  box-shadow: 1px 1px 1px #565656;   
} 

 /*    POLAROIDE     */


.polaroid{background: white;
padding: 2px 2px 25px 2px;

padding: 10px 8px 25px 8px;  

text-align: center;
        
 -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
 -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
 box-shadow: 0 4px 6px rgba(0,0,0,.3);
 -webkit-transition: all .15s linear;
 -moz-transition: all .15s linear;
 transition: all .15s linear;
  z-index:0; 
}
  
  
#polaroid figure{ 
float:;  /*places the images in a horizontal line*/
position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
   /*width of the images*/
  /*space between the images*/
 
padding: 16px 8px 30px 8px; /*size of the frame*/

/*give the Polaroids a small drop shadow*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
}

figcaption {
text-align: center;
font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
color: #454f40;
font-size:0.99em;
display: block;
}


 /*---------CLASSES---------*/

 .rouge{color: #ff0000;}

.vert{color: #154A2C;
} 
.fondvert{
background-color:#CCCC66;
}

.ombre{
  	-moz-border-radius:10px;
	 -webkit-border-radius:10px;
	  -goog-border-radius:10px;
    -moz-box-shadow: 8px 8px 12px #aaa;  
    -webkit-box-shadow: 8px 8px 12px #aaa;  
    -goog-box-shadow: 8px 8px 12px #aaa;  
    box-shadow: 8px 8px 12px #555;  
}
 
   /*    ------------------ EFFETS IMAGES -----------   */

.round{ font-size:25px;
    border:1px solid #555;
    border-radius: 100px;
    -webkit-border-radius:100px;
    -moz-border-radius: 100px;
    padding:9px 15px 10px 15px;   
}