/* CSS@ Document */

* { margin:0px; padding:0px; font-family:Arial; font-size:12px; }
img { border:none; }
h1 { font-size:18px; }

#header { width:900px; height:150px; margin:0 auto 0 auto; }

#imageheader { width:250px; float:left; }

#texteheader { width:650px; float:right; position:absolute; margin:0 0 0 250px; }
#texteheader1 { width:650px; height:130px; line-height:130px; margin:10px 0 0 0; }
#texteheader2 { color:#000000; font-size:40px; }
#texteheader3 { color:#000000; font-size:40px; font-weight:bold;  }

#menu{ width:900px; margin-right:auto;margin-left:auto; float:none; margin-top:5px;   height:20px; padding-top:5px; background-color:#ff7f00; }
#menu ul  { list-style-type:none; width:900px; }
#menu ul li { width:16%;  float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; text-align:center; }
#menu ul li a  { display:block; text-decoration:none; color:#000000;  }
#menu ul li a:hover{color:#000000;}
#menu ul li ul  { display:none; }
#menu ul li:hover ul  { display:block; position:absolute; z-index:10000; margin:0; padding:0;  }
#menu ul li ul li  {  width:20%; float:none; height:auto; background:#4b4b4b; }
#menu ul li ul li a { color:#f8c617; padding:5px; text-align:left;}
#menu ul li ul li a:hover { color:#f8c617; }

#page{ width:900px;float:none; margin-left:auto; margin-right:auto; min-height:300px; background-color:#ffffff; padding:5px; overflow:auto; }
#page p { padding:5px 0 5px 0; }
#page ul, #page li { margin:0 0 0 10px; }
#page h1 { margin:10px 0 5px 0; }
 
#ariane { width:100%; height:30px; line-height:30px; margin-top:10px; }
#ariane a { text-decoration:none; color:#000000; }

#bandeauImg { position: relative; width: 32%; color:#FFFFFF; padding:5px; float:left; }
#bandeauImg img { max-width: 100%; }
#bandeauTxt1 { position: absolute; bottom: 10px; left: 10px;  right: 10px;  background:#FFFFFF; color:#000000; min-height:10px; height:auto; padding:5px; }
#bandeauTxt1 a { color:#000000; text-decoration:none; }

#tableauaccueil {background-color:#000000; color:#ffffff; }
#tableauaccueil a {text-decoration:none; color:#ffffff; }

#contenuPublication { 
width:100%;
height:100%;
	z-index:2000;
}

#imgPublication{ 

	width:100%;
	height:100%;
z-index:2000;


transform:rotate(20deg); -ms-transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); }

#bandeauTxt10 { position: absolute; bottom: 10px; left: 1px;  right: 0px;  background:#FFFFFF; color:#000000; min-height:10px; height:auto; padding:5px; transform:rotate(10deg); -ms-transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); z-index:2000; width: 86%; }
#bandeauTxt10 a { color:#000000; text-decoration:none; z-index:2000; }

#footer{ width:900px; margin:5px auto 0 auto; text-align:center; }
#footer a{   text-decoration:none; }
#footer span a { font-size:8px; color:#000000; }

#baspage { width:900px; padding:10px 0 10px 0; }
#baspage a { color:#000000; text-decoration:none;}


/***Publications***/
.publication { width:100%; height:auto; padding:0px; min-height:100px; margin:0; background:#FFF; }
.publication table { width:100%; }
.publication table tr td { vertical-align:top; }
.publication table tr td:nth-child(1) { width:20%; }
.publication table tr td:nth-child(2) { width:79%; }
.publication table tr:nth-child(1) td:nth-child(2) { border-bottom:#ACD4E2 solid 1px;  }

.datePubli { font-size:90%;color:#054239; display:block; }

.dateComm { font-size:90%;color:#054239; display:block; }

.comm .nom { font-size:90%; text-transform:uppercase;color:#054239; display:inline-block; }
.comm .prenom { font-size:90%;color:#054239; display:inline-block; }
.comm .datePubli { font-size:90%;color:#054239; display:inline-block; }
.comm .dateComm { font-size:90%;color:#054239; display:inline-block; }

.publicaContenu { width:79% !important; height:auto;  margin:10px auto; }
.publicaContenu .hauteurmin {width:100%; height:auto; min-height:100px ;  }
.publicaContenu img { height:100px; padding:5px; }
.publicaContenu .lienimg {width:auto;height:auto; margin:5px auto; display:inline-block; }

.tabajpubli tr td:nth-child(1){width:15%;}

/*Actions sur publications*/
.blocCommenter { width:90%; height:auto; min-height:50px;background:#FFF;margin:10px auto 0px auto; padding:10px; border:solid 1px #00A99D; z-index:10; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); text-align:center; }

.bt-comment { text-decoration:none; margin:5px 10px; display:inline-block;  }
.bt-comment img { width:30px; height:auto; display:inline-block; vertical-align:middle; margin-right:5px; }
.bt-comment span { display:inline-block; vertical-align:middle; color:#000; }

.bt-recommande { text-decoration:none; margin:5px 10px; }
.bt-recommande img { width:30px; height:auto; vertical-align:middle; margin-right:5px; }
.bt-recommande span { display:inline-block; vertical-align:middle; color:#000; }

.sansrecomm { display:inline-block; }

.ico-comment { display:inline-block; text-decoration:none; margin:5px 10px 5px 0; }
.ico-comment img { width:20px; height:auto; display:inline-block; vertical-align:middle; margin-right:5px; }
.ico-comment span { display:inline-block; vertical-align:middle; color:#054239;font-size:90%; }

/*Commenter*/
.commenter { padding:10px 0; }
.commenter textarea { width:90%; display:inline-block;max-width:100% !important;-moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); padding:2px 5px; border:none; box-shadow: 0px 2px 2px #ccc inset; -moz-box-shadow: 0px 2px 2px #ccc inset; -webkit-box-shadow: 0px 2px 2px #ccc inset;  margin:5px 0; }
.commenter input[type=submit] { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); border:none; max-width:100% !important; background:#00A99D; color:#fff; font-weight:bold; cursor:pointer; border:none; box-shadow: 1px -1px 2px #046055 inset; -moz-box-shadow: 1px -1px 2px #046055 inset; -webkit-box-shadow: 1px -1px 2px #046055 inset; text-decoration:none; padding:5px 10px 10px 10px; margin:10px 0; }

/*Partager*/
.partager { padding:10px 0;width:100%; }
.partager input[type=text] { width:90%; display:inline-block;max-width:100% !important;-moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); padding:2px 5px; border:none; box-shadow: 0px 2px 2px #ccc inset; -moz-box-shadow: 0px 2px 2px #ccc inset; -webkit-box-shadow: 0px 2px 2px #ccc inset;  margin:5px 0; }
.partager input[type=submit] { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); border:none; max-width:100% !important; background:#00A99D; color:#fff; font-weight:bold; cursor:pointer; border:none; box-shadow: 1px -1px 2px #046055 inset; -moz-box-shadow: 1px -1px 2px #046055 inset; -webkit-box-shadow: 1px -1px 2px #046055 inset; text-decoration:none; padding:5px 10px 10px 10px; margin:10px 0; }
.partager p { padding:0 0 10px 0; text-align:left; }
.partager p:last-child { padding:0 0 0px 0; text-align:right;}

/***Commentaires***/
.commentaires { height:auto; margin:10px auto; text-align:left; }
.commentaires .photoIdentite { width:40px; height:auto; max-height:52px; }
.commentaires .photoIdentite img { width:100%; height:auto; min-width:40px; }
.commentaires table tr:nth-child(1) td:nth-child(1) { width:50px; }
.commentaires table tr:nth-child(1) td:nth-child(2) { width:auto ; text-align:left; }
.commentaires table tr:nth-child(1) td:nth-child(2) { border-bottom:#ACD4E2 solid 1px; }
.commentaires table tr:nth-child(2) td:nth-child(1) { border-bottom:none; }

.comm { width:90%; height:auto; min-height:50px; margin:0px 0 10px 9%; padding:5px 5px 0px 5px; background:#EBF8FE; border-bottom:#00A99D solid 1px; }

.auteurPubli { margin-left:0%; background:#FFF;border:#00A99D solid 1px; border-bottom:#046055 solid 1px;border-left:#046055 solid 1px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); }

/*Actions sur commentaires*/
.blocRepondre { width:100%; height:auto;background:#FFF;margin:10px auto 0px auto; padding:2px; border:solid 1px #ACD4E2; border-bottom:none; z-index:10; }
.blocRepondre .bt-comment { text-decoration:none; margin:5px 10px; }
.blocRepondre .bt-comment img { width:25px; height:auto; display:inline-block; vertical-align:middle; margin-right:5px; }
.blocRepondre .bt-comment span { display:inline-block; vertical-align:middle; color:#000; font-size:90%; }

/*Repondre*/
.repondre { padding:10px 0; }
.repondre textarea { width:90%; display:inline-block;max-width:100% !important;-moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); padding:2px 5px; border:none; box-shadow: 0px 2px 2px #ccc inset; -moz-box-shadow: 0px 2px 2px #ccc inset; -webkit-box-shadow: 0px 2px 2px #ccc inset;  margin:5px 0; }
.repondre input[type=submit] { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; behavior: url(PIE/PIE.htc); border:none; max-width:100% !important; background:#00A99D; color:#fff; font-weight:bold; cursor:pointer; border:none; box-shadow: 1px -1px 2px #046055 inset; -moz-box-shadow: 1px -1px 2px #046055 inset; -webkit-box-shadow: 1px -1px 2px #046055 inset; text-decoration:none; padding:5px 10px 10px 10px; margin:10px 0; }

/*Reponses*/
.reponses { width:100%; height:auto; margin:10px auto; text-align:left; }
.reponses .photoIdentite { width:40px; height:auto;  max-height:52px;margin-right:5px; }
.reponses .photoIdentite img { width:100%; height:auto; min-width:40px;  }
.reponses table tr td:nth-child(1) { width:12% ; }
.reponses table tr td:nth-child(2) { width:85% ; }
.reponses table tr:nth-child(1) td:nth-child(2) { border-bottom:#ACD4E2 solid 1px; }

.rep { width:90%; height:auto; min-height:50px; margin:0px 0 10px 9%; padding:5px; background:#CBE6EF;clear:both; }

.auteurComm { margin-left:0%; }

/*triangle*/
.triangle { float:left;position:relative; margin:-42px 0px 0 20%; }

.triangle2 { width:1px; height:1px; border:1px solid #fff; border-color: transparent transparent #fff transparent; border-width:16px 0px 15px 28px; position:absolute;margin:2px 0 0 1px; z-index:10; }
	
.triangle1 { width:0px; height:0px; border:0px solid #00A99D; border-color: transparent transparent #00A99D transparent ; border-width:16px 2px 16px 30px;position:absolute; margin:0px 0px 0px 0px; z-index:5; }
	
.triangleCom { float:right;position:relative; margin:-37px 20% 0 0; }

#acces-eperso { width:30%; float:left; margin:0 0 0 30px; }

#pas-inscrit { width:60%; float:right; margin:0 30px 0 0; }

#acces-eperso, #pas-inscrit { border:#000000 solid 1px; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px; border-radius:15px 15px 15px 15px; behavior: url(PIE/PIE.htc); box-shadow:5px 5px 5px -5px #999; }
#acces-eperso h1, #pas-inscrit h1 { text-align:center; }
#acces-eperso td, #pas-inscrit td { padding:5px; }

.bt-valider { width:100px; height:25px; background:url(images/bt-valider.png) no-repeat top center; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; cursor: pointer; border:0; text-align:center; }

.menuMobile { display:none !important; }

.slicknav_menu  {  display:none; }

.js .nav  {  display:none; }

@-webkit-viewport { width:device-width}
@-moz-viewport { width:device-width}
@-ms-viewport { width:device-width}
@-o-viewport { width:device-width}
@viewport { width:device-width}

/*-------------- smartphone portrait----------------------*/
@media only screen and (min-device-width : 300px) and (max-device-width : 479px) { 

#menu  {  display:none; }

.slicknav_menu  {  display:block; }
.js .nav  {  display:block; }
.js .slicknav_menu  {  display:block; position:fixed; z-index:90; width:90%; }

#header { width:90%; height:100px; margin:0 auto 0 auto; }

#imageheader img { width:100px; height:auto; float:left; }

#texteheader { width:250px; float:right; position:absolute; margin:0 0 0 100px; }
#texteheader1 { width:250px; height:100px; margin:30px 0 0 0; }
#texteheader2 { color:#000000; font-size:15px; }
#texteheader3 { color:#000000; font-size:25px; font-weight:bold; width:100%; }

#menu{ width:100%; margin-right:auto;margin-left:auto; float:none; margin-top:5px;  color:#ffffff; height:20px; padding-top:5px; }

#bandeauImg { position: relative; width: 90%; color:#FFFFFF; padding:5px; float:left; }
#bandeauImg img { max-width: 100%; }

#bandeauTxt1 {  width: 80%;  }

#ariane { width:100%; height:20px; line-height:20px; margin-top:0px; }

#page{ width:90%; float:none; margin-left:auto; margin-right:auto; min-height:300px; background-color:#ffffff; padding:5px; overflow:auto; }
#page img { max-width:90%; }

table, tbody, tr, td { display: block; width: auto!important; }

#footer{ width:100%; margin:5px auto 0 auto; background-color:#FFFFFF; color:#000000; height:15px; }
#footer img { max-width:100px; height:auto; }
 
}

/*-------------- smartphone paysage + tablette portrait ----------------------*/
@media only screen and (min-device-width : 480px) and (max-device-width : 1080px){

#menu  {  display:none; }
.slicknav_menu  {  display:block; }
.js .nav  {  display:block; }
.js .slicknav_menu  {  display:block; position:fixed; z-index:90; width:90%; }

#header { width:90%; height:100px; margin:0 auto 0 auto; }

#imageheader img { width:100px; height:auto; float:left; }

#texteheader { width:250px; float:right; position:absolute; margin:0 0 0 100px; }
#texteheader1 { width:250px; height:100px; margin:30px 0 0 0; }
#texteheader2 { color:#000000; font-size:15px; }
#texteheader3 { color:#000000; font-size:25px; font-weight:bold; width:100%; }

#menu{ width:100%; margin-right:auto;margin-left:auto; float:none; margin-top:5px;  color:#ffffff; height:20px; padding-top:5px; }

#bandeauImg { position: relative; width: 90%; color:#FFFFFF; padding:5px; float:left; }
#bandeauImg img { max-width: 100%; }

#bandeauTxt1 {  width: 80%;  }

#ariane { width:100%; height:20px; line-height:20px; margin-top:0px; }

#page{ width:90%; float:none; margin-left:auto; margin-right:auto; min-height:300px; background-color:#ffffff; padding:5px; overflow:auto; }
#page img { max-width:90%; }

table, tbody, tr, td { display: block; width: auto!important; }

#footer{ width:100%; margin:5px auto 0 auto; background-color:#FFFFFF; color:#000000; height:15px; }
#footer img { max-width:100px; height:auto; }

}

/*-------------- écran minimum 1080px et 1550px ---------------*/
@media only screen and (min-device-width : 1081px) and (max-device-width : 1550px){
#menu {width:100% height:auto;}

}