/*
Color : 
f9eed7 jaune clair
e0ab36 jaune foncé
*/

/*RESET*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:1em;font-family:arial;vertical-align:baseline;}
body {line-height:1.3;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
/**/
html{
 
}
body{

}

#header{width:100%; height:31px; z-index:10;}
#header_contenu_1{position:absolute; left:50%; margin-left:-500px; height:31px; color:#b9b9b9; font-size:9px;width:1000px;z-index:11;}
#header_contenu_2{float:left; width:120px; height:31px;z-index:12;}
#header_contenu_3{float:left; width:auto; height:31px; padding-left:60px;padding-top:9px; z-index:13;}
#header_contenu_3 a:hover,#header_contenu_3  a:link,#header_contenu_3  a:visited{text-decoration:none; color:#b9b9b9;font-size:9px;}
#deco a:hover,#deco a:link,#deco a:visited{float:right; width:auto; height:31px; padding-top:9px; z-index:13;color:#b9b9b9;}
#header_LeftBloc{ height:30px; width:49%; display:inline-block;}
#header_LeftBloc a img{ height:30px; }
#header_LeftBloc a {line-height:20px;}
.header_LeftBloc_title{ vertical-align: top; margin-top:5px;padding:10px; color:white; text-decoration:none;}
#header_RightBloc{ height:30px; width:49%; display:inline-block; }


#logo{ display:block; width:1024px;    margin: auto;     padding-top: 10px;  display:block; height:66px;}
#logo a img{ height:60px;}
#logo a{ text-decoration:none; color:#000;}
#logo a:hover,#logo a:link,#logo a:visited{ text-decoration:none; color:#000;}
/****/
#contenu2{
 width:444px; height:275px; margin:auto; padding:15px;
}
.logologin,.spritelogo{
 display:block; width:256px; height:156px; margin:auto;
}
#contenu a:hover,#contenu a:link,#contenu a:visited{ color:#000000; }
#contenu {display:flex; }
#contenu .half1{ align-self: flex-end; margin-bottom:15px; }
.formContentLogin form{ margin-top: 18px;}

  
/*Page Login*/  
  
.containerLogSign{  display:block; margin:10px auto; width:90%; /*max-width:800px;  height:300px;*/ padding:30px;}
.containerLogSign .halfdiv{ width:40%; margin:0 4% 0 4%;}
.formContentLogin h1{color:black;text-align:center;}
.formContentLogin label{
  display:block;   text-align:center;
}
.formContentLogin input{
  display:block;   text-align:center;   margin:auto; background-color:#f9eed7; padding:5px 0; width:100%;
}
#inputSubmitLogin{
  margin:31px 0 0 60px;   font-size:18px;   background:none;   border:none;   text-decoration:underline;   font-variant:small-caps; border-radius: 6px;
}
#formContentLogin label{
  display:block;   text-align:center; width: 100%;
}
#formContentLogin input{
  display:block;   text-align:center;   margin:auto; background-color:#f9eed7; padding:5px 0;
}


#inscrire{ font-variant:small-caps; font-size:1.2em; }
#inscrire a:link,#inscrire a:visited,#inscrire a:hover { display:block;   font-weight:800;color:#fff; padding: 19px 0;margin: 40px auto 0; background-color:#e0ab36; border-radius: 6px; text-decoration:none;}
#inscrire a:hover { background-color:black; color:#e0ab36;}

#inputSubmitReg{display:block;   font-weight:800;color:#fff; padding: 19px 0;margin: 18px auto; background-color:#e0ab36; border-radius: 6px; padding: 19px ; font-size:1.2em; border: 0;}
#inputSubmitReg:hover { background-color:black; color:#e0ab36; cursor:pointer;}
/*****/

/**/

h1{
  color:#f33e2c;
  font-size:1.4em;
  font-weight:800;
  text-align:center;
  font-family:verdana;
}
h2{
  color:#f33e2c;
  font-size:1.2em;
  font-weight:800;
  text-align:center;
  font-family:verdana;
}
h3{
  color:#f33e2c;
  font-size:1.1em;
  font-weight:800;
  font-family:verdana;
  width:90%;
  margin:auto;
}

h3{
  color:#f33e2c;
  font-size:1em;
  font-weight:600;
  font-family:verdana;
  width:90%;
  margin:auto;
}
h4{
  color:#f33e2c;
  font-size:1em;
  font-weight:600;
  font-family:verdana;
  width:90%;
  margin:auto;
  height:25px;
}
h4::before{
  content: "";
  display: block; 
  clear: both;
}
.tagList{clear:both;}

.center{ text-align:center; }
.halfdiv{ width:50%; }
.thirddiv{ width:33%; }
.quartdiv{ width:25%; }
.cinqdiv{ width:20%; }
.troisquartdiv{ width:75%; }
.twothirddiv{ width:66%; }
.hide{display:none;}
.fl{float:left;}
.fr{float:right;}
.txtGrand{font-size:1.2em;}
.margin{ margin:auto; }
.b{clear:both;}

/*Cosmag App*/
/*Menu*/
#menu {display:block; width:1024px;    margin: auto;     padding-top: 40px;  display:block; height:66px; }
.menu{ width:1024px; margin:auto; list-style:none; display:flex; }
/*.menuLink{ display: inline-block; }*/
.menuLink{  margin: auto; }
.menuLink a{  border-radius : 5px; text-decoration:none; text-align: center;  padding:20px 10px; font-size:1em;  width: 160px; height:64px; font-weight:800;}

.menuLink a:link, .menuLink a:visited { color:black; text-align:center; }
.menuLink a:hover { color:white;  background-color:#e0ab36; text-align:center; }


.menuTxt{ padding: 15px 0 0 0; margin:auto; text-align:center; width:100%; display: table-cell; vertical-align:middle; left:50%; right:50%;   }
.menuLinkactive{ background-color:black; color:#e0ab36; }
/*Search Form*/
#SearchForm{ margin:5px 0; width:100%; border-bottom: 1px solid black; padding:8px 0 ; }
.search{
  padding:10px;
  margin:5px 0;
  border:1px solid black;
  text-align:right;
}

/*Content*/
#flexcontent{ display: flex;
flex-flow: row wrap;}
.VosFollowsMedia{text-align:center; width:100%;}
.FollowersMedia{text-align:center; width:100%;}
.FollowerName{ text-decoration:none; text-align:center; }
.FollowerName a{ text-decoration:none; }
.socialMediaIcon img{ height:30px;}



.modele{  display:inline-block; background:url("../img/cosplay.png") no-repeat center ; background-size: contain; height:40px; width:43px; text-indent:-600px; overflow:hidden; vertical-align:middle;}
.createur{ display:inline-block; background:url("../img/createur.png") no-repeat center ; background-size: contain; height:40px; width:43px; text-indent:-600px; overflow:hidden; vertical-align:middle;}

/*Compte personnel / Mon compte*/
#ComptePersonnel{  padding:5px; }
#ComptePersonnel li { list-style:none; padding-left:5px;}
#ComptePersonnel h1 {text-align:center; font-size:2em;}
#ComptePersonnel .avatar{ margin:auto;text-align:center;}
#ComptePersonnel .modele{ background:url("../img/cosplay.png") no-repeat center ;background-size: contain; height:50px; width:43px; text-indent:-600px; overflow:hidden;}
#ComptePersonnel .createur{ background:url("../img/createur.png") no-repeat center ;background-size: contain; height:50px; width:43px; text-indent:-600px; overflow:hidden;}
#ComptePersonnel .typecompte p{ display:inline-block;}
#ComptePersonnel .edit, #ComptePersonnel .typecompte, #ComptePersonnel .tesreseauxsociaux{margin:10px auto; text-align:center; }
#ComptePersonnel .edit p a{ background-color:#e0ab36; width:100%; padding:6px; border-radius:3px; text-decoration:none; color:#fff; font-weight:bold;}
#ComptePersonnel .edit p a:link,#ComptePersonnel .edit p a:visited{ color:#fff;}
#ComptePersonnel .edit p a:hover{ background-color:black; color:#e0ab36; }
.socialMediaEdit p{display:inline-block; }
.SocialMediaAccountName{vertical-align: top;padding-top:5px;}

#addEvent { padding:10px; background-color:white; margin:5px 0; }
#addEvent label { width :150px; display:inline-block; text-align:right; }
#addEvent input { display:inline-block; width : 300px; }
#AllEvent::after, #tag::after{  content: "";
  display: block;
  clear: both;}

/*other box*/
#ComptePersonnel{ width:25%; box-sizing:border-box;  padding:0 5px 0 0;  position: relative;}
#InnerComptePersonnel{ margin:0 5px 0 0; border: 3px solid #e0ab36; }
.clear{ width:100%;box-sizing:border-box;height: 15px;}
#nextcon{ width:75%;box-sizing:border-box; padding:0 0 5px 0;  position: relative;}
#Innernextcon{ margin:0 0 5px 0; }
#VosFollows { width:50%;box-sizing:border-box; border: 2px solid #e0ab36; padding:5px; /*left:-10px;*/ position: relative;}
#Followers { width:50%;box-sizing:border-box; border: 2px solid #e0ab36; padding:5px;  /*right:-10px;*/ position: relative;}
#mynextcon{ width:100%;box-sizing:border-box; border: 2px solid #e0ab36; padding:5px; /*right:-10px;*/ position: relative;}
#myLastcon{ width:100%;box-sizing:border-box; border: 2px solid #e0ab36; padding:5px; /*right:-10px;*/ position: relative;}
.participationDate.fl {    width: 100%; }
.EventUserImg{text-align:center; margin:auto;width:100%; }
.EventUserImg img{margin:auto; max-width:100%; }

.Follow{   padding: 0.5em; width: 20%; border: 1px solid grey; margin:10px 0; box-sizing:border-box;}

#VosFollows #VosFollowsBloc{
  display: flex;
  flex-wrap: wrap;
}
#Followers #FollowersBloc {
  display: flex;
  flex-wrap: wrap;
}
#VosFollows #VosFollowsBloc .Follow{   padding: 0.5em; width: 33%; border: 1px solid grey; margin:10px 0; box-sizing:border-box;}
#Followers #FollowersBloc .Follow{   padding: 0.5em; width: 33%; border: 1px solid grey; margin:10px 0; box-sizing:border-box;}




.avatarF img{width:50px;height:50px; border-radius:25px; }
.avatarF {text-align: center;  margin: auto; padding:6px auto; text-align: center; }



#Cosplayeurs #Follows {display:flex; flex-wrap: wrap;  }
#Cosplayeurs #Autres {display:flex; flex-wrap: wrap;}





/*.Follow { display:inline-block; border: 1px solid grey; padding:5px; margin:5px; width:20%; }*/
.Follow h3{ text-align:center; font-size:1.4em; }
.Follow h4{ text-align:center; font-size:1.4em;  margin:0 0 10px 0; }
input[type=submit]{ padding:5px 10px; margin:5px 0;}


/*Info Player*/
/*#InfoPlayer{display:block; width:1024px; height:90px; margin:70px auto 0; padding:65px 0 0 0;  }
#InfoPlayerContent{width:730px; display:block; margin:auto; }
#machines{ margin:auto; width: 1000px; }


.marginAuto{ margin:auto;
    text-align: center;
    width: 20%;}*/
/*Container*/
.container{ width:1024px; margin:auto;    padding:0 0 50px 0;
  line-height: 1.3;}
#footer{ /*background: url("../img/layout/cadre_footer.png") no-repeat;*/ text-align:center; padding: 48px 0 0 0; height:87px; display:block; width:1024px; margin: 0 auto 20px auto;     display: flow-root;
}







/*Event*/
#addEvent{ padding:5px; border-left:1px grey solid;border-bottom:1px grey solid;}
#addEvent input { margin:3px; }
#AllEvent{ height:auto; }
.event{ width:300px; background:url("../img/fenetre01_background.png") top; margin:10px 18px; text-align:center; border:2px solid #9f3b23; padding: 5px 0; display: inline-block;}
.event h3{padding:10px 0; }

.tag {margin:10px 18px; padding: 5px 0; display: inline-block;}

#participants{ height:auto; }
.participant{ width:300px; background:url("../img/fenetre01_background.png") top; margin:10px 18px; text-align:center; border:2px solid #9f3b23; padding: 5px 0; display: inline-block;}
.participant h3{padding:10px 0; }

#Event {}
.eventParticipation{ display: inline-block; }
.participationEventFieldset{margin:10px 0px; padding:5px; width:50%;  box-sizing: border-box; font-size:1.1em; float:left; }
.participationEventFieldset:after{clear:both;}
.deuxiemepartie{ padding:5px;  box-sizing: border-box; }
.taginput { width:100%;}

#fb{ margin:5px;padding:5px; border: 2px solid #9f3b23; position:absolute; top:10px; left:10px; }
#fail{ float:left;display:block; background:url("../img/icone_erreur.png"); width:44px;height:44px; }
#success{ float:left; display:block; background:url("../img/icone_ok.png"); width:44px;height:44px;}
#fbMsg{ float:left; display:block; margin-left:22px; }

.message{ margin:5px; padding:5px; background-color:#fff; border: 1px solid #9f3b23;}
.message h3{ width:90%;}
.messagedel{ margin:5px; padding:5px; background-color:#fff; text-align:center; cursor:pointer;border: 1px solid #9f3b23;}

#messagerieMenu p { display:inline-block; margin:5px; padding:5px; background-color:#fff; border: 1px solid #9f3b23; }



.NextConEventDetail{ width:300px; background:url("../img/fenetre01_background.png") top; margin:10px 18px; text-align:center; border:2px solid #9f3b23; padding: 5px 0; display: inline-block;}
.NextConDetail{
  display:block;
  width:95%;
}
.NextConParticipants{
    display:block;
  width:95%;
}
.NextConparticipant{ width:33%; }
.NextConParticipationDate{ width:50%; }
.NextConParticipationDate p img{width:45%; max-width:100px; }

.valide{border:1px solid green;}
.nvalide{border:1px solid black;}

.txtErreur{ color:#FF0000;}
.MessageContenu{padding:5px; margin:5px; }

@media screen and (max-width: 900px) {
  #header_contenu_1{position: absolute;
margin-left: 0;
height: 31px;
color: #b9b9b9;
font-size: 9px;
width: auto;
z-index: 11;
left:0;}
#header_contenu_2{width:50px;}
  .containerLogSign{width:auto; border:none;margin:5px auto; max-width:100%; height:auto; padding:10px;}
  .halfdiv{ width:100%; float:left;}
  .halfdiv:after{ clear:both;}
  .inputTxt{width:100%;}
}

@media screen and (max-width: 500px) {
  .container{ width:100%;}
  #contenu { display: block; }
  .halfdiv{ width:100%; }
  .containerLogSign .halfdiv{ width:90%; box-sizing:border-box; }
  #contenu .half1 {  align-self: auto;}
  
  #menu{height:fit-content; padding-top: 5px;}
  .menu{ width:100%; margin:auto; list-style:none; display:block; height:fit-content; }

  .menuLink{  margin: auto; width:100%;}
  .menuLink a{  border-radius : 5px; text-decoration:none; text-align: center;  padding:10px; font-size:1em;  width: 100%; font-weight:800; height:auto;  display:block;}

  .menuLink a:link, .menuLink a:visited { color:black; text-align:center; width:100%;}
  .menuLink a:hover { color:white;  background-color:#e0ab36; text-align:center; width:100%;}

  .menuLink .modele,.menuLink .createur{display:none;}
  #Followers,#VosFollows,#nextcon,#ComptePersonnel{ width:100%;}
  #mynextcon{ width:100%;}
  #flexcontent{ display:block; width:100%;}
  .event{ width:95%; background:lightgrey; margin:10px 5px; text-align:center; border:2px solid #9f3b23; padding: 5px 0; }
.event h3{padding:10px 0; }
.Follow {
  padding: 0.5em;
  width: 48%;
  border: 1px solid grey;
  margin: 10px 0;
  box-sizing: border-box;
  display: inline-block;
}
.participant{width:45%;
  margin: 10px 5px;}

}