/*  ---------  CSS to customize skn5_baseBordeaux  ----------- */

html { /*  document */
    font-size: 62.5%;  /* Taille équivalente à 10px */
}
body {
    font-size: 1.4rem; /* Taille équivalente à 14px */
}
.row.T0row0 { /* marge interne - ligne 1 haut de page */
    padding-top: 10px;
}
.row.T0row2 { /* couleur de fond - ligne 3 haut de page */
    background-color: #861D1F;
}
.row.T0row3 { /* couleur de fond - ligne 4 haut de page */
    background-color: #FFF;
    height: 40px;
	padding: 10px 0 0;
}
.row.B0row0 { /* marge sous les boites - ligne 1 */
    margin-bottom: 15px;
    height: 45px;
    background-color: #FFF;
}
.row.B0row1 .col.col1 { /*bas de page - ligne 1 colonne milieu*/
    border-left: 1px solid #C0C0C0;
	border-right: 1px solid #C0C0C0;
}
#MainContent {
    margin: 0; /* ajustement marge du haut sur les marges latérales */
	padding: 10px 0 ;	
}
#MainBlog {
    margin: 10px 0 0;	
}
#BlogCenterBoxes {
    margin: 10px 0 0;
    background: transparent;	
}
#CenterBoxes {
	margin: 10px 0 0;
    background: transparent;	
}
#BottomBoxes { /* optionnal area between main page and bottom */
	padding: 0 0 15px;
    background-color: #861D1F;
	border-radius: 0 0 4px 4px;
}
#BottomBoxes div.quote {
    padding: 20px 8px 8px;
    color: #fff;
}

#BottomBoxes div.quote span.labelcita, #BottomBoxes div.quote span.cita,
#BottomBoxes div.quote span.author,#BottomBoxes div.quote a {
    color: #fff;
}
#footer { /* footer Copyright - ajustement padding bottom*/
    padding: 10px 0;
    font-size: .8em;	
}
.txtspeG {
    padding: 10px 0;	
}
div.banner { /* block bannière */
    padding: 0 8px 50px 8px;
}
div.logo { /* block logo */
    padding: 70px 0;
}
div.menuIcons ul li.menu_connect { /* ajout Connexion à droite du menu */
    float:right;
    padding-right: 3px;
}
div.pop.menuIcons_flag { /* section drapeau */
	top: 32px;left: 5px;
}
div.menuIcons ul li a span { /* lien */
    padding: 2px 10px;
}
div.menuIcons ul li a span.current { /* lien actif */
    color: #555;	
    text-decoration: none;
	border-radius: 20px;
}
div.menuIcons ul li a:hover span { /* lien survolé*/
    text-decoration: underline;
}
div.menuIcons.MIB0{
    margin: 0 10px;	
}
#BottomBoxes .titrebox, #BottomBoxes .titre {
    background: transparent;
	color: #FFF;
	margin: 0 25px 10px;
}
#BottomBoxes .tblbox, #BottomBoxes .tbl {
	margin: 0 25px;
	border-radius: 8px;
    background: url(img/cfs.jpg);
}
#BottomBoxes input.texte, #BottomBoxes select {
	background: #861D1F;
    color: #fff;
	padding: 2px 4px;
}
#BottomBoxes input.bouton, #BottomBoxes button {
	padding: 2px 4px;
    background-color: #861D1F;
	border: 1px solid #861D1F;
	border-radius: 4px;
	color: #fff;
}
.rep .cite { /*citation dans le forum*/
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.rep .cite p { /*texte citation forum*/
  background: transparent;
  color: #000;
}
.rep .cite span.cite { /*auteur de la citation dans le forum*/
  width: 100%;
  color: #fff;
  background: #808080;
  border: 0px;
}
.phimg { /* encadrement et ombre pour les miniatures */
    margin: 4px 4px 10px;
	border: 1px solid #1A1A1A !important;
	border-radius: 4px;
    box-shadow: 1px 2px 2px #C0C0C0;	
}
.tbl p.titre { /*titre charte du forum*/
  color: #404040;
  background: #f2f2f2;
  height: auto;
}
.tbl .titre, .tblover .titre { /* titre reactions article*/
    padding: 5px;
	background-color: #c0c0c0;
	color: #000;
	height: auto;
	border-radius: 0px;
}
.tbl .tbl, .tbl .tblover {
    box-shadow: 0 0 0;
	border-radius: 0;
}
.pop a:hover span {
    color: #404040;
}
fieldset { /* Encadrement des champs */
    border: 1px solid #C0C0C0;
}
fieldset.dwnld {
    background-color: #FFF;
}
.cal {
    border: 0px solid #C0C0C0; /* pour supprimer encadrement agenda */
}
.calagd { /* lien vers agenda du mois */
    font-size: 14px;
    color: #404040;
}
td.cals {
    color: #FFFFFF;
    background-color: #861D1F;
}
td.cal2 {
	color: #404040;
	background-color: #FFA500;
}
td.cal4 {
	color: #404040;
}
a:hover.calagd { /* lien vers agenda du mois */
    color: #000;
}			  			  
select.cal { /* select month and year */
    color: #000; 
    background-color: #FFF;
    border: 1px solid #C0C0C0;
}
div #toolbarIcons_ptxt, div #toolbarSmileys_ptxt {
    border: 1px solid #000;
}
.forum, .forum a, .forum2, .forum2 td, tr.forum2, tr.forum2 a, tr.forum2 a:hover  {
    font-weight: bold;
	font-size: 16px;
    color: #FFF;	
}
.thtbldiv {
    font-weight:bold;
    padding: 4px;
}
.thtbldiv  a {
  color: #FFF;
}
.tdtblfr {
    border: 1px dotted #C0C0C0;
}
.bottomfrt {
    max-width: 100%;
}
.rubr, p.rubr, .lirubr, .lirubr2, .licatlink, .phrubr, .phrubr2, .farubr, .farubr2, .dnrubr, .dnrubr2  {
    font-weight: bold;
    margin:1em auto;
    color: #404040;
}
.curr_item, ul.item li.curr_item, ul.item li.curr_item a, ul.item li.curr_item a:hover { /* titre article est affiché */
    font-weight: bold;
    color: #861D1F;
    background: transparent;
}
.Code {
    font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.2em;
}
.top {
    font-size: 1.4em;
}
/**** Diaporama ****/

.FB394 {
	margin: 22px 100px;
    padding-bottom: 50px;
}
.SWPHL0 {
    margin: 10px;
	color: inherit;
    background: transparent;
    border: 1px solid #C0C0C0;
	padding: 5px;
    border-radius: 8px;		
    box-shadow: 1px 4px 4px #ddd;
}
/**** 3 colonnes avec CSS ****/
@media screen and (min-width:768px) {
  #conteneur {
    width: 800px;
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    columns: 3 auto;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-rule: 1px solid #fff);
    column-rule: 1px solid #fff;
  }
  #conteneur p {
    margin: 0;
    background-color: rgb(253, 241, 184);
    break-before: column;
  }
  #conteneur h2 {
    column-span: all;
    -webkit-column-span: all;
  }
}

.conteneur
{
position: relative;
}
/**** iframe google maps responsive ****/
.map-responsive
{    overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0; }
.map-responsive iframe
{    left:0;    top:0;    height:100%;    width:100%;    position:absolute; }

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}

.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view-fifth .mask { 
        background-color: rgba(146,96,91,0.3);
/* Par défaut le contenant du texte est décalé vers la gauche*/
        transform: translateX(-300px);
        opacity: 1;
        transition: all 0.4s ease-in-out; 
}
.view-fifth h2{
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}
 /* ci-après, le style au survol (:hover) des éléments */
.view a.info:hover {
    box-shadow: 0 0 5px #000
}
/* transition, transform et delay sont les propriétés qui "rendent" les animations. Elles ont de nombreuses variantes. Ici, on décrit le mouvement, sa courbe de vitesse*/
.view-fifth img {
        transition: all 0.3s ease-in-out; 
}
/* Au survol, le contenant du texte se trouve aligné sur l"image*/
.view-fifth:hover .mask { 
        transform: translateX(0px);
}                                               
/* Au survol, l"image est repoussée vers la droite*/
.view-fifth:hover img { 
        transform: translateX(300px);
        transition-delay: 0.1s;
}
.view-fifth:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}