@charset "UTF-8";

/* Body */
body{
	background-color: #202020;
	font-family: Verdana, Arial;
}


/* Communs */
/* Bloc */

.contenant {
	width: 620px; /* Largeur ensemble des cellules de l'ensemble */
	height: auto;
	margin: 20px auto auto auto; /* Centraliser le container sur la page */
	border: 1px solid black;
	border-radius: 5px;
	background: #FFFFFF;
}

h1 {
	font-size: 20px;
	color: #ff8727;
	/* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Ombrage */
	text-shadow: 1px 1px 1px #202020; /* Ombrage */
	text-align: center;
	margin: 15px 0px 15px 0px;
	padding: 0px;
}

h2 {
	font-size: 18px;
	color: #333;
	text-align: left;
	margin: 15px 0px 10px 0px;
	padding: 0px;
}

h3 {
	font-size: 16px;
	color: #333;
	text-align: left;
	margin: 15px 0px 10px 0px;
	padding: 0px;
}

h4 {
	font-size: 18px;
	color: #333;
	text-align: center;
	margin: 15px 0px 10px 0px;
	padding: 0px;
}

p { /* Obsolete ? */
	color: #333;
	padding: 10px;
	margin: 0px;
	background: beige;
	text-align: center;
}


/* Page publique */

.encart {
	display: block;
	margin: 10px;
	font-size: 12px;
	text-align: justify;
	height: auto;
	overflow: hidden; /* The clearfix Hack */
}

.encartlogos {
	float: left;
	width: 155px;
	margin: 5px;
}

.encartptitlogos {
	float: left;
	width: 56px;
	margin: 4px 10px 4px 0px;
}

.encartexte {
	text-align: justify;
}

.encartall {
	clear: both;
	width: 600px;
}

.share {
	display: block;
	margin: 10px;
	font-size: 12px;
	text-align: center;
	height: auto;
	overflow: hidden; /* The clearfix Hack */
}

.media {
	margin-top: 5px;
	text-align: right;
}

.Facebook {
	font-weight: bold;
	color: #3b5998;
}

.Twitter {
	font-weight: bold;
	color: #0084b4;
}

.Googleplus {
	font-weight: bold;
	color: #d34836;
}

.boutons {
	text-align: center;
	margin-bottom: 15px;
}

.boutons1 {
	width: 140px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #FF8727;
	background-color: #ff8727;
	color: #000000;
	/* text-shadow: 1px 1px #FF8727; */
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000;
	margin: 10px;
	padding: 2px;
}

.boutons1:hover{
	background-color: rgba(0,0,0,0);
	color: #ff8727;
}


/* Les doublons */

ul {
	padding: 0px; /* Marge principalement verticale des UL */
	margin: 5px 0px; /* Espacement des UL */
}

li a {
	display: block;
	list-style-type: none; /*suppression du style par défaut des puces*/
	background-color: #FFFFFF;
	margin: 0 auto;
	padding: 10px 10px;
	color: #000000;
	text-decoration: none;
	border: 1px solid #ff8727;
	border-radius: 5px;
}

li a:hover {
	background-color: #ff8727;
}

.input-2 {
	line-height: 15px;
	padding: 5px;
	width: 49%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fbfbfb;
	font-family: Verdana, Arial;
	font-size: 18px;
	font-weight: 500;
	color: #3c3c3c;
	border: 1px solid rgba(0,0,0,0);
}

#button-2{
	line-height: 15px;
	padding: 5px;
	width: 49%;
	background-color: #ffb479;
	font-family: Verdana, Arial;
	font-size: 18px;
	font-weight: 700;
	color: white;
	cursor: pointer;
	border: #fbfbfb solid 4px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

#button-2:hover{
	background-color: rgba(0,0,0,0);
	color: #ff8727;
}


/* Page de contact */

#form-main{
	width: 100%;
	padding-top: 10px;
}

.input-1 {
	line-height: 22px;
	padding: 13px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fbfbfb;
	font-family: Verdana, Arial;
	font-size: 18px;
	font-weight: 500;
	color: #3c3c3c;
	border: 3px solid rgba(0,0,0,0);
	margin-bottom: 10px;
}

textarea {
	line-height: 150%;
	width: 100%;
	height: 150px;
	resize: vertical;
}

#button-1{
	float: left;
	margin-top: -4px;
	padding: 22px 0px;
	width: 100%;
	background-color: #ff8727;
	font-family: Verdana, Arial;
	font-size: 24px;
	font-weight: 700;
	color: white;
	cursor: pointer;
	border: #fbfbfb solid 4px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

#button-1:hover{
	background-color: rgba(0,0,0,0);
	color: #ff8727;
}

.submit:hover {
	color: #ff8727;
}

.submit:hover .ease{
	width: 100%;
	background-color: white;
}


/* Page de saisie */

.logosaisie {
	width: 56px;
}

.boutons2 {
	width: 140px;
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #FF8727;
	background-color: #FFFFFF;
	color: #000000;
	/* text-shadow: 1px 1px #FF8727; */
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 1px 1px 1px #000000;
	margin: 10px;
	padding: 2px;
}

.boutons2:hover{
	box-shadow: inset 5px 5px 10px 0px #000000;
}

/* Definition des sprites */

#Maillage {
    width: 151px;
    height: 125px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") 0px 0px no-repeat transparent;
}

#WDA1 {
    width: 121px;
    height: 125px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") -151px 0px no-repeat transparent;
}

#WDA2 {
    width: 54px;
    height: 55px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") -67px 0px no-repeat transparent;
    background-size: 418%;
}

#MO51 {
    width: 107px;
    height: 125px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") -272px 0px no-repeat transparent;
}

#MO52 {
    width: 47px;
    height: 55px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") -121px 0px no-repeat transparent;
    background-size: 477%;
}

#BIOS1 {
    width: 125px;
    height: 125px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") -379px 0px no-repeat transparent;
}

#BIOS2 {
    width: 55px;
    height: 55px;
    background: url("http://www.numericlic.com/Maillage/Picts/Sprites-1.png") -166.32px 0px no-repeat transparent;
    background-size: 400%;
}


/* Responsive */
@media only screen and (max-width:620px) {
	/* Bloc */
	.contenant {
		width: 100%;
		height: auto;
		margin: 1px auto 5px auto; /* Centraliser le container sur la page */
		border: 1px solid black;
		border-radius: 5px;
		background: #FFFFFF;
	}
	
	/* Page publique */
	.encartlogos, .encartptitlogos {
		display: block;
		float: none;
		margin: auto;
	}

	.encartexte, .encartall {
		float: none;
		width: 100%;
		margin-top: 10px;
	}
	
	h2, .media {
		text-align: center;
	}
}