/* 
METHODE D'ORGANISATION SMACSS
1. Base (p, body, h1, h2 ..)
2. Layout (header, footer ..)
3. Module (form, title, bloc ..)
4. State (Java, Script ..)
5. Themes alternatifs, autres (sombre, clair ..)

Ordre dans chaques selecteurs :
1. Taille, dimensions Boites
2. Bordures
3. Background
4. Textes
5. Autres

Utiliser les class. pour le CSS
Utiliser les id# pour les scripts

Les profondeurs :
.text{}
	.text-white{}
	.text-black{}
<span class="text text-white"></span>
*/

/*--------------------*\
	$ 1 Base
\*--------------------*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900,300italic,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);

body {
font-family: Calibri, Helvetica, sans-serif;
background-color : rgba(230, 230, 230, 1);

  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  
margin: 0;
padding: 0;
padding-top: 0;
height: 100%;/*pour IE6 qui comprend le height comme min-height mais ne comprend pas le min-height*/
min-height: 100%;/*pour les navigateurs "modernes"*/
}

.conteneur{
margin: 65px auto auto;
width: 1050px;
}


.div1 {  /* Body */
background-color: rgb(255, 255, 255);
float:left;
overflow: hidden;
opacity: 0.98;
border-radius: 7px; /* arrondi */
width: 660px; /*largeur du cadre */
margin-left: auto ; /* centrer */
margin-right: auto ;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
top: 50px; /* hauteur */
margin-bottom:100px;
border-top: 1px solid #DEDEDE;
border-bottom: 1px solid #DEDEDE;
border-left: 1px solid #DEDEDE;
}

.div2{
width: 306px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
border-radius: 7px; /* arrondi */
overflow: hidden;
background-color: #FCFCFC;
border-top: 1px solid #DEDEDE;
border-bottom: 1px solid #DEDEDE;
border-left: 1px solid #DEDEDE;
margin-bottom: 115px;
}

.module{
border-bottom: 1px solid #DDD;
}

.timeline {
padding: 5px; /* marge interieure */
background-color: rgb(255, 255, 255);
border-radius: 7px; /* arrondi */
}
.colonnesup {
padding: 5px; /* marge interieure */
background-color : rgba(240, 240, 240, 1);
}

h1{
position: relative;
top: 0px;
font-size: 27px;
line-height: 32px;
margin-right: 12%;
color: #06365F;
margin-bottom: 0px;
}
h1:hover{
color:#6DB0F2;
}

h2{
font-size:16px;
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
padding-right:5%;
display: inline; 
}

h3{
margin-top: 10px;
text-transform: uppercase;
color: #428BCA;font-family: "Source Sans Pro",sans-serif;
font-size: 17px;
}

p{
text-align: justify;
line-height: 23px;
color: #222;
margin-right: 5%;
margin-bottom: 15px;
}

.blockavis{
	text-align: justify;
	line-height: 19px;
	color: #222;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	font-size: small;
	font-weight: bold;
}

.hr{
background-color :grey;
}

table{
width:100%;
}

.pair{
background-color: #F5F5F5;
}
.impair{
background-color: #FFFFFF;
}
.impair:hover{
background-color: #F5F5F5;
}

th{
border-right: 1px solid #FFF;
background: none repeat scroll 0% 0% #719CD6;
color: #FFF;
height: 27px;
vertical-align: middle;
text-align: center;
}

.bordure_bleue{
border: 3px #517FA4 solid; 
border-radius:15px;
background-color:rgba(186, 223, 243, 1);
cursor: pointer;
}

.rejoindre{
background-color:rgba(29, 36, 162, 0.9);
font-size:20px;
border-radius:10px;
cursor: pointer;
}
.rejoindre:hover{
background-color:#083561;
}

.fieldset_ajout {
width:95%;
border: solid rgb(0,162,232) 1px ; 
border-radius:5px; 

}

.legend_ajout {
font-size:13px; 
color:rgb(0,162,232);
}

.formulaire_question {
float:right;
color:#000080; 
font-weight: bold;
}

.formulaire_reponse {
color:#000080;
padding:6px; 
border-radius:5px; 
border:solid 1px #8C8C8C;  
font-size:11px;
}

.erreur {
color:red; 
font-weight: bold;
}

.metadata{
color : Grey;
font-size: 12px;
}

.grand{
color: green;
font-size : 20px;
}
.petit{
font-size: 12px;
text-transform:uppercase;
}
.cmptrbour{
text-align:center;
padding:6px; 
color:#000080;
text-transform:uppercase;
font-size : 20px;

}

/*--------------------*\
	$ 2 Layout
\*--------------------*/


header{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 49px;
z-index: 1;
background-color: #000; /* #517FA4 */
border-bottom: 1px solid rgba(4, 40, 71, 0.7);
}

.headercentrage {
    width: 1050px;
    margin: auto;
    padding-top: 14px;
    padding-bottom: 35px;
    z-index: 9999;
}

.logo{
float:left;
}

.menu {
    float: left;
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    color: #E9ECF0;
    font-size: 11px;
    margin-top: 7px;
    margin-left: 50px;
}

.log {
    float: right;
}

footer { /* pied de page */
position: relative;
overflow: auto; 
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
text-align: center;
background: none repeat scroll 0px 0px transparent;
background-color: black;
color : grey;
}

.menu a{
	float: left;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	color: #e9ecf0;
	text-decoration: none;
	font-size: 11px;
}

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

li{
	float: left;
	margin-right: 30px;
	}
	
li:hover{
	float: left;
	margin-right: 30px;
	color:white;
	cursor:pointer;
	}
.log1{
	float: right;
	}
	
.log ul li {
	padding:5px;
	cursor:pointer;
	font-family: 'Open Sans', sans-serif;
	color: #e9ecf0;
	font-size:10px;
	margin-right: 10px;
	}

/*--------------------*\
	$ 3 Module
\*--------------------*/

/*.logo {
position: absolute;
left: 32%;
margin-left: -50px;
top:-4px;
}*/

.image{
width:100%;
border-radius: 5px;
}

.csspane { /* -- légende --*/
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  position: relative;
}
.csspane img {
  line-height: 0;
}
.csspane .text {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  line-height: normal;
  width:100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.csspane:hover .text {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

.connection {
position: absolute;
top: 6px;
left: 50%;
width:450px;
margin-left: 0px;
padding: 4px 15px 5px;
font-size: 14px;
}

.btn_connection {
margin-left: 0px;
padding: 4px 15px 5px;
border-radius: 14px;
cursor: pointer;
background: none repeat scroll 0% 0% rgba(221, 25, 10, 0.81); 
color: #FFF;
border: 1px inset rgba(15, 15, 15, 1); 
}
.btn_connection:hover {
background: none repeat scroll 0% 0% rgba(5, 190, 25, 1);
border: 1px outset rgba(15, 15, 15, 1);
}
.btn_connection:active{
border: 1px inset rgba(16, 47, 74, 0.7);
}

.btn_connection_inactif {
margin-left: 0px;
padding: 4px 15px 5px;
border-radius: 14px;
cursor:no-drop;
background: none repeat scroll 0% 0% #8E8E8E; 
color: #FFF;
border: 1px inset rgba(15, 15, 15, 1); 
}

.btn_connection_inactif_avt {
margin-left: 0px;
padding: 4px 15px 5px;
border-radius: 14px;
background: none repeat scroll 0% 0% #8E8E8E; 
color: #FFF;
border: 1px inset rgba(15, 15, 15, 1); 
cursor:wait;
}


.police_btn{
text-align: center;
text-transform: uppercase;
font-family: "Source Sans Pro",sans-serif;
font-size: 17px;
}

.police_btn_revente{
text-align: center;
text-transform: uppercase;
font-family: "Source Sans Pro",sans-serif;
font-size: 13px;
}
.btn_connection_revente {
margin-left: 0px;
padding: 2px 10px 3px;
border-radius: 5px;
cursor: pointer;
background: none repeat scroll 0% 0% #000000; 
color: #FFF;
border: 1px inset rgba(15, 15, 15, 1); 
}
.btn_connection_revente:hover {
background: none repeat scroll 0% 0% rgba(5, 190, 25, 1);
border: 1px outset rgba(15, 15, 15, 1);
}
.btn_connection_revente_inactif {
margin-left: 0px;
border-radius: 5px;
cursor: not-allowed;
background: none repeat scroll 0% 0% #8E8E8E; 
color: #FFF;
border: 1px inset rgba(15, 15, 15, 1); 
}

.bonachat{
}
.bonachat:hover{
background: none repeat scroll 0% 0% rgba(245, 245, 245, 1);
}

.recherche {
position: absolute;
top:9px;
left: 60%;
color: #FFF;
background: none repeat scroll 0% 0% rgba(163, 219, 248, 0.35);
padding: 5px 10px 5px;
border-radius: 14px;
font-size: 14px;
border: 1px none rgba(16, 47, 74, 0.7);
}
.recherceh_btn{
border: 0px none;
padding: 0px;
background: url('https://a-v2.sndcdn.com/assets/images/header/header-icons-7351459d.png') no-repeat scroll 50% -359px transparent;
text-indent: 22px;
overflow: hidden;
width: 22px;
height: 19px;
position: absolute;
left: 65%;
top: 15px;
cursor: pointer;
}

.lien{
text-decoration: none;
}
	.lien-black{
	color:black;
	}
	.lien-grey{
	color:grey;
	}
	.lien-bleu{
	color:#6DB0F2;
	} 
	.lien-blanc{
	color:white;
	}
	
.lien:hover {
color:#464646;
}

.lien_logo { /* Logo principal font-family:Logo_Font; */ 
color: #FFF;
font-family: Arial;
text-decoration: none;
}
	.size_logo { /* pour pouvoir utiliser le logo avc plusieurs tailles*/ 
		font-size: 40px;
	}

.logo_vente{
border-radius: 14px;
text-align: center;
border: 4px solid #008EAD;
margin-left:10px;
}
.logo_vente:hover{
border: 4px solid #FF8700;
filter: contrast(135%);
// Browser Specific
-webkit-filter: contrast(135%);
-moz-filter: contrast(135%);
-o-filter: contrast(135%);
-ms-filter: contrast(135%);
}
.logo_vente:active{
border: 4px solid #008EAD;
}

.logo_vente_inactif{
border-radius: 14px;
text-align: center;
border: 4px solid #8E8E8E;
margin-left:10px;
cursor: not-allowed;
	filter: gray; /* IE6-9 */
	filter: grayscale(1); /* Firefox 35+ */
	  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.image_accueil{
text-align: center;
border: 3px solid #008EAD;
border-radius: 2px;
 /* image à l'échelle 1 au départ */
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   /* propriétés de transition */
   -moz-transition:all 1s ease;
   -webkit-transition:all 1s ease;
   -o-transition:all 1s ease;
   transition:all 1s ease;
}
.image_accueil:hover{
border: 3px solid #FF8700;

filter: contrast(135%);
// Browser Specific
-webkit-filter: contrast(135%);
-moz-filter: contrast(135%);
-o-filter: contrast(135%);
-ms-filter: contrast(135%);

-moz-transform: scale(1.025,1.025);  
  -moz-transition-property: -moz-transform; // nom de la propriété sur laquelle on applique une transition
 -moz- transition-duration:2s; //durée de la transition
}
	
/*--------------------*\
	$ 5. autres
\*--------------------*/
.region:hover {
color:red;
}

.video{
border-radius: 7px; /* arrondi */
}

@font-face { /*Police logo*/
    font-family: "Logo_Font";
    src: url('Wolf_in_City.ttf');
}