/* CSS Atelier Paysan
	Webdesign Chris Gaillard
Rouge #9F0000 
 */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




body{background: #dbdbdb url('../img/bg-at2.jpg') fixed top center no-repeat;
 
}

.spip_documents_left{clear:both; margin:0 20px 20px 0;}

#container
{position:relative;
	max-width: 1200px;
	margin:0 auto;
   
}

h1,h2,h3,h4,h5,h6 {
   font-weight:700;}

p, ul{margin-bottom:20px;line-height:1.5em; }

a{color:#9f0000; text-decoration: none;}
a:hover{ text-decoration: underline;}


 h1
{
  color:#000; 
  font-size:2.1em;
padding:0 ; 
    text-transform: uppercase;
  position:relative;
  overflow:hidden;
}
 h1:after {
  content:'';
  display:inline-block;
  vertical-align:bottom;
  margin-top:22px;
  margin-left:8px;
  height:5px;
  width:100%;
  position:absolute;
  background-color:#9f0000;
}



/*h3+p{margin:0px 0 0 0  !important; padding:0 !important;}*/



h3{line-height:1.2em !important; margin:1.5em 0 0.2em 0;}

.more{background-color:#9f0000; color:white; text-decoration:none;  display:inline-block; padding: 5px; font-size:1em;}
.more:hover{background-color:black; color:white;}



      





/*   HEADER   */ 


header{

        width:100%;
        clear:both;
        overflow: hidden;
    height:341px;
}

#home header{

    height:341px;
}

#mininavtop{position:absolute; right:0; top:0; 
  width:510px; background-color:#9F0000; height:37px; padding:5px 10px;
   font-size: 20px!important; z-index:4;}


#mininavtop:before {
   content: '';
   position: absolute;
   display: block;
   border: .95em solid #9F0000;
   z-index: 1;
    left:-1.9em;
    top:0;
   border-bottom-color: transparent;
    border-left-color: transparent;
   }


/* *****************   RECHERCHE ****************************/

form #recherche{ width:160px;  font-size:10px; height:18px; color:#999; 
  margin:0px 15px 20px 15px; background:white url("../img/loupe.png") right no-repeat; padding:0 5px; border-width: 0 5px 0 0; }

form{ font-size:1.8em;  }

.formulaire_recherche label, .formulaire_recherche .submit {display:none;}

.formulaire_recherche {display:inline-block; vertical-align:top; }

.formulaire_formidable form{ font-size:1em;  }
.formulaire_formidable li{list-style-type:none;}

span.obligatoire{display:none}

.obligatoire{font-weight:bold;}

.formulaire_formidable ul, .formulaire_formidable  ol
{
  padding-left: 0em;
}

form #recherche_topic{ width:200px;  font-size:10px; height:18px; color:#999; 
  margin:0px 15px 20px 15px; background:white url("../img/loupe.png") right no-repeat; padding:0 5px; border-width: 0 5px 0 0; }

form{ font-size:1.8em;  }

.formulaire_recherche_topic label, .formulaire_recherche_topic .submit {display:none;}

.formulaire_recherche_topics {display:inline-block; vertical-align:top; }

.formulaire_formidable form{ font-size:1em;  }
.formulaire_formidable li{list-style-type:none;}

span.obligatoire{display:none}

.obligatoire{font-weight:bold;}

.formulaire_formidable ul, .formulaire_formidable  ol
{
  padding-left: 0em;
}


#flag{display:inline-block; }
#flag img{margin-right:5px; }

#flag img.off{ filter: brightness(80%); }
#flag img.off:hover{ filter: brightness(100%); }


#social{ display:inline; text-align:right; }
#social img{margin-right:5px;}
#social a:hover img{opacity:0.5; }

.forumlink{  margin: 0px 0px 0px 10px; 
top:2px; position:relative; color:#face00;
line-height:.9em; font-size:1.1em; text-transform:uppercase; font-weight:900; display:inline-block}
.forumlink:hover{ color:white;}





.logo-atelier-paysan{position:absolute; top:0px; left:0px;  z-index:2;}
.logo-atelier-paysan img{width:326px;}



#navigation{position:absolute; 
  top:270px; background-color:white; width: 100%;
z-index:3; 

}






#fullcontent{position:relative;	background-color: white; padding:0px 0px; clear:both; 
border-top:5px solid #9f0000;}


	#fullcontent:before{   content: '';
   position: absolute;
   display: block;
   border: 2em solid #9F0000;
   z-index: 1;
    left:0em;
    top:0;
   border-bottom-color: transparent;
    border-right-color: transparent;}







address{  font-style: normal; text-align:right; margin:40px; 
  font-size:1em;}




.ct-top {position:relative; min-height:200px; min-width:200px;}



.ct-top img{max-width:300px; position:absolute; bottom:0; width:100%}



.fulcontenu{border-top:5px solid #9f0000;}


aside{padding:55px 30px 0 30px; background-color:#ececec; }

.blocgauche{border:3px solid #9F0000; 
  padding-bottom:8px; margin-bottom:60px;

}



.blocgauche h3
{
  color:#000; 
  font-size:1.4em;
padding:0px 5px 5px 0 ; 
    background-color: #ececec;
    display:inline-block;
  position:relative;
    top:-20px;
    left:-5px;
  overflow:hidden;
    text-transform: uppercase;
    font-size:1.7em;
}


.bloctopic{border:3px solid #9F0000; 
  padding-bottom:8px; margin-bottom:60px;

}
.bloctopic h3
{
  color:#000; 
  font-size:1.4em;
padding:0px 5px 5px 0 ; 
    background-color: #ececec;
    display:inline-block;
  position:relative;
    top:-20px;
    left:-5px;
  overflow:hidden;
    text-transform: uppercase;
    font-size:1.7em;
}


.unevenement{padding:0;margin:0px 15px 0px 15px; font-size:1em;}
.unevenement:nth-child(2){margin-top:0px;}

.unevenement p{margin-bottom:10px}



.blocgauche .libre{ margin:-10px 20px 10px 20px;}

.bloctopic .libre{ margin:-10px 20px 10px 20px;}

.basbloc{  position:relative;
      display:inline-block;
    text-align:right;
       background-color: #ececec;
    padding:0px 0px 0 6px;
    top:0px;
    right:-5px;
    float:right;
color:#9f0000;
    font-weight:700;
    font-size:1.1em;

}

#main{padding:35px 30px 30px 30px;}

small{color:#000;     font-size:.9em; font-weight: 900;
margin-bottom:0px; display:block;}



footer{color:#fff; background-color:#9f0000; padding:10px 30px; 
  font-weight:normal; font-size:0.95em; margin-bottom:100px; line-height: 1.2em;
height:80px;
}

footer a{color:#fff; }



#actuforumhome{ width:100%; margin-top:40px;}
   
#article #actuforumhome h3, h2{
  color:#000; 
  font-size:1.6em;
padding:0 ; 
  position:relative;
  overflow:hidden;
}
#article #actuforumhome h3:after, h2:after {
  content:'';
  display:inline-block;
  vertical-align:bottom;
  margin-top:15px;
  margin-left:8px;
  height:5px;
  width:100%;
  position:absolute;
  background-color:#9f0000;
}


#actuscol{padding-right: 20px}

.actuabstract{margin-bottom:20px; padding-bottom:10px; clear:both; overflow:hidden; border-bottom:1px dotted #ccc;}

#evenements .actuabstract img{float:right; margin:0 0 10px 20px}
#evenements .actuabstract a img{border:4px solid}

.actuhomelink{display:block; overflow: hidden; padding:3px 0 8px 3px; }
.actuhomelink:hover{background-color:#ffdede  ; text-decoration: none;}


#actuscol img{margin: 8px 0 0 0px;}

#rubrique #actuscol img{margin: 5px 20px 20px 0;}

.blocgauche p{margin-top:0 !important; }
.blocgauche p img{padding-bottom:10px; }
.blocgauche h3{margin-bottom:-10px !important}

#actuscol form, #actuscol embed, #actuscol iframe{margin:0 20px}

#home #actuscol h3{font-size:1.15em; font-weight:600; color:#9f0000; margin:-1px 0 2px 0;}
#actuscol small{margin:0; }

 #actuscol p{margin:10px 0 4px 20px; line-height:1.3em; font-size:1em; }

 #actuscol .more{padding:2px 5px 1px; font-size:0.9em;}

#forumcol{padding-left: 20px; margin-bottom:50px;}

#forumcol ul {list-style-type: none; margin:0; padding:0}

#forumcol h4{font-size:1.15em; font-weight:600; color:#9f0000; margin:-5px 0 2px 0;}

#forumcol ul li{margin-bottom:10px; padding-bottom:10px;  border-bottom:1px dotted #ccc;line-height: 1.3em;}

.dateactu{font-weight:700; display:block; font-size:.9em; }



#plandusite{background-color:#E2E2E2; padding:20px 30px;}


#plandusite ul {list-style-type: none; padding:0 20px 0 5px; margin:0  0 0px 0; }

#plandusite ul a{color:black;}

#plandusite h4{margin: 0 0 5px 0; padding:0; font-size:1.1em;}

#plandusite .mod{margin-bottom:20px}



#header:before{content:"- "; 
  display:block; 
position:absolute;
  z-index:1;
top:00px;
	width: 320px; 
	height: 341px; 
  background-color:rgba(0,0,0,0.4);
}







/* *****************RESPONSIVE*******************   */



@media (max-width: 840px) {
    #mininavtop {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }


    .logo-atelier-paysan {
        position: absolute;
        top: 20px;
        left: 50%;
        margin-left: -150px;
    }



    .logo {
        text-align: center;
    }
    .logo p {
        margin: 0 40px;
        font-size: 1.1em
    }
    address {
        text-align: center;
    }
    .ct-top {
        display: none
    }


#header:before{

left:50%;
  margin-left:-150px;

}



}

#main .blocgauche{margin:50px 0 -20px 0;}
#main .blocgauche h3, #main .blocgauche .basbloc{background-color:white;}
#main .bloctopic{margin:50px 0 -20px 0;}
#main .bloctopic h3, #main .bloctopic .basbloc{background-color:white;}

@media (max-width: 640px) {
form #recherche{display:none;}}



/*      ISOTOPE   */

.element-item  {  width:180px; height:170px; font-size:1.05em;
line-height: 1em; margin:0 5px 15px 0; color:white; background-color:#888; display:block;
}

.element-item:hover  {color:white; text-decoration:none;} 

.element-item  p
{padding:0 4px;
 text-align:center; 
margin:0; text-shadow:2px 2px 5px black; z-index:2}

.name, .titre{display:none}


.element-item:after{position:absolute; display:block; top:0px;
  background-color:rgba(142,0,0,0.8); width:180px; height:180px;
  content:""; z-index:0; transition: all 0.5s;}

.element-item.passed:after{
  background-color:rgba(150,150,150,0.8); }

.element-item:hover:after{  background-color:rgba(142,0,0,1);
top:180px; height:0;
}
    
   
    
.element-item.passed:hover:after{
  background-color:rgba(150,150,150,0.8); }

.element-item img{position:absolute; top:0;   }




    	/*	filter: brightness(50%) grayscale(100%);
      -webkit-filter: brightness(50%) grayscale(100%);
    -moz-filter: brightness(50%) grayscale(100%);
    -ms-filter: brightness(50%) grayscale(100%);
    -o-filter: brightness(50%) grayscale(100%);




.element-item:hover img{position:absolute; top:0;  
	filter: brightness(100%) grayscale(0%);
    -webkit-filter: brightness(100%) grayscale(0%);
    -moz-filter: brightness(100%) grayscale(0%);
    -ms-filter: brightness(100%) grayscale(0%);
    -o-filter: brightness(100%) grayscale(0%);}


*/






#tutos .element-item img{position:absolute; top:0; 
    		filter: brightness(80%) grayscale(20%);
      -webkit-filter: brightness(80%) grayscale(20%);
    -moz-filter: brightness(80%) grayscale(20%);
    -ms-filter: brightness(80%) grayscale(20%);
    -o-filter: brightness(80%) grayscale(20%);

  }


#tutos .element-item:hover img{position:absolute; top:0;  
	filter: brightness(100%) grayscale(0%);
    -webkit-filter: brightness(100%) grayscale(0%);
    -moz-filter: brightness(100%) grayscale(0%);
    -ms-filter: brightness(100%) grayscale(0%);
    -o-filter: brightness(100%) grayscale(0%);}






.element-item .symbol{font-weight:900;  line-height:1.1em; font-size:1.15em;
  margin-top:10px; z-index:10; position:relative; width:180px;}
.element-item .weight{position:relative; }

.element-item .thedate{position:absolute; width:180px; bottom:5px;}


 .element-item.passed .symbol,
 .element-item.passed .weight,
 .element-item.passed .thedate
{opacity:0.6 }


button.button{border: 0; padding:3px 7px; margin-bottom:3px; background-color:#fff; border:1px solid #9f0000;}
button.button:hover{ color:white;background-color:#9f0000;}
button.button.is-checked{ color:white;background-color:#9f0000;}



.button-group{margin:5px 0 10px 0; text-align:left;}

.ui-group{ margin-right:0em;}




/*     / ISOTOPE   */

#imagetop{width:100%; height:341px;}


#ariane+h1{ margin-top:5px}


/*      PAGE FORMATION   */

#chapeau{font-size:1.4em; font-weight:900; }

#introduction{margin-bottom:15px;color:#9f0000;  font-size:1.1em}

#tarifs, #Inscription{margin-bottom:15px;}

/*      /PAGE FORMATION   */



#suivant{border:3Px solid #9F0000; display:block; padding:5px; margin-bottom:20px;}

#suivant:before{content:"\25C4"; display:block; float:left; font-size:35px; margin:-5px 10px 10px 0;}

#precedent{border:3Px solid #9F0000; display:block; padding:5px; margin-bottom:20px;}
#precedent:before{content:"\25BA"; display:block; float:right; font-size:35px; margin:-5px 0px 10px 10px;}

#suivant:hover, #suivant:hover small,
#precedent:hover, #precedent:hover small
{background-color:#9f0000; color:white; text-decoration:none;}
important;


.nivoSlider img, #nivoSlider img {
position:absolute ;
top:0px ;
left:0px ;
max-width : none ;}

.spip-admin-float { z-index: 100; position: fixed; left: 10%; }


.blocs_titre
{  background: url("http://www.latelierpaysan.org/coin.png") no-repeat !important;

   text-align:left !important; 
    background-color:#fff  !important;

  border:1px solid #9F0000  !important;
    display:inline-block ;
  padding: 3px 15px 3px 10px !important;
  margin:0 0 10px 0 !important; 
font-size:1.2em; font-weight:normal !important;
}
  
  .blocs_titre:hover{background-color:#9F0000 !important; }
  .blocs_titre a{  color:#9F0000; }
.blocs_titre:hover a{text-decoration:none; color:white !important;}
.blocs_titre a:after{content:" \2B06 "; font-size:.9em; padding-left:10px; color:9F0000; }
.blocs_replie a:after{content:" \2B07 "; font-size:.9em;} 



#motclef{margin-bottom:20px;}

#motclef 
{font-weight:900;}

/*
#lesdocs a[href$=".pdf"], #lesdocs a[href$=".PDF"],
#lesdocs a[href*=".pdf#"], #lesdocs a[href*=".PDF#"],
#lesdocs a[href*=".pdf?"], #lesdocs a[href*=".PDF?"],
a.pdf { padding-right: 0px; background-image: none; }
*/

#mininavtop a.spip_out,
#mininavtop a.spip_url,
#mininavtop a.external{padding-right: 0px; background-image: none; }

#mininavtop a[href ^="https://"],
#mininavtop a.lock { padding-right: 0px; background-image: none; }




a.allyoutube{color:white;  background-color:#9F0000  ;
padding: 5px 10px; margin:20px 0 0 0; display:inline-block;

  padding-right: 10px;
  background-image: none;
}

a.allyoutube:hover{background-color:#000  ; text-decoration:none;}

.allactus{margin:-10px 0 10px !important;}










#lesdocs {overflow:hidden; margin-top:20px; 
}

#lesdocs a {display:block; background-color:#9F0000; 
  float:left;width:150px; margin:0 10px 10px 0; text-decoration:none;
 color:white; height:250px;}

#lesdocs a span{display:block; padding:10px; font-size:1m; text-align:center }

#lesdocs a:hover{ background-color:#9F0000; border:3px solid #9F0000;}




#multicolumn{
  
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:20px;
-webkit-column-gap:20px;
-o-column-gap:20px;
column-gap:20px;
-webkit-column-rule-width:1px;
-webkit-column-rule-color:#cbcefb;
-webkit-column-rule-style:dotted;
-moz-column-rule-width:1px;
-moz-column-rule-color:#cbcefb;
-moz-column-rule-style:dotted;
-o-column-rule-width:1px;
-o-column-rule-color:#cbcefb;
-o-column-rule-style:dotted;
column-rule-width:1px;
column-rule-color:#cbcefb;
column-rule-style:dotted;}



.smalltexte{font-size:0.75em ;}
.bigtexte{font-size:1.3em}
.texterouge{color:#9f0000;}
.surlignerouge{color:white; background-color:#9f0000;}
.surlignejaune{background-color:#face00;}
.grostitrerouge{color:#9f0000; font-weight:900; font-size:25px}
.blocrouge{color:white; background-color:#9f0000; padding:10px; margin:20px 0;}
.blocjaune{background-color:#face00; padding:10px; margin:20px 0;}


  



  
.listcoldroite{margin:-30px 0 0 0; }



#actuscol form{margin-bottom:40px;}



#actuscol h3{font-size:1.5em; font-weight:900; color:#9f0000; margin:0px 0 2px 0;}



.image50left{max-width:50%; float:left; margin:0 20px 20px 0;}


.image50right{max-width:50%; float:right; margin:0 0px 20px 20px;}






  @media (max-width: 900px) {
  #multicolumn{
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;
}
  }
   @media (max-width: 640px) {
  #multicolumn{
-moz-column-count:1;
-webkit-column-count:1;
-o-column-count:1;
column-count:1;
}
  
  
  .image50left, .image50right{max-width:100%; float:none; margin:0  0;}
  } 
  


#multicolumn .indexalphab{
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

    
    #lesmotsclf{ margin:10px 0 30px; font-size:1.05em;}    
    
    .indexalphab h3{margin-bottom:0}    
  .indexalphab ul{margin:0 0 20px 8px; padding:0; list-style-type:none;}
    
.indexalphab ul li:before{content:"- "; margin-left:-8px}

.descriptiondoc{margin:0; padding: 0; line-height:0; height:20px; color:black}
.datedoc{margin:0; font-size:0.8em;}

.titredoc{font-size:1.1em;}



#tutos .element-item p{position:absolute; top:0; z-index:2;}


#suivant-precedent{margin-bottom:50px;}

.navplans h3{margin-bottom:5px; font-size:1.15em;}
.navplans ul{margin:0 0 35px 0;}

.newsletter h3{margin-bottom:-20px}



table{margin-top:20px;}

table tr{ border:1px solid #ccc;}

table tr th{background-color:#eee}


table tr td, table tr th{padding:10px; border-right:1px solid #ccc;}

table tr td img{margin-top:10px;}

table th{color:#9F0000 ; font-size:1.2em; padding:10px 0}

.tableauinvisible table tr,
.tableauinvisible table tr td, 
.tableauinvisible table tr th
{ border:0px solid #ffffff; line-height:1.5em;}

.tableauinvisible table 
{table-layout: auto !important;}

.tableauinvisible table tr td img{margin-top:0px;}

/**

#header:before{content:"- "; 
  display:block; width:350px; height:500px; 
background-color:rgba(0,0,0,0.5);position:absolute;}

	border-left: 202px solid  rgba(0,0,0,0.5);
	border-right: 202px solid transparent;
		border-bottom: 202px solid transparent;
  border-top: 202px solid rgba(0,0,0,0.5);


**/



select{
    -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
  font-size:.9em; 
    margin:0 4px 20px 0;
    min-width: 167px;
   height: 30px;
   overflow: hidden;
   background: url(/squelettes/img/down_arrow_select.png) no-repeat right #ccc;
  color:black;
   border: 1px solid #ccc;
  border-radius:3px;
  padding:0px 38px 0 2px; 
    font-weight:normal;
    border:1px solid #aaa
}
option{background-color:#fff; font-weight:normal; font-size:.9em; color:black;}