div#envelope,#envelope2{
	width:100%;
        margin-top: 3em;
        margin-bottom: 3em;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
        float: left;
	}
#envelope2{
	margin-left: 1em;
        width: 45%;
	}
form{
width:70%;
margin:0 15%;
}  

form header {
  text-align:center;
  }
  
form header p
{
    color: red;
    font-size: 0.7em;
    font-style: italic;
}
 
.lbl_activite
{
    float: left;
    width: 11em;
}

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text],input[type=mail],input[type=tel]{
    margin-bottom: 20px;
    margin-top: 10px;
    width:100%;
    padding: 5px;
    border-radius:5px;
    border:1px solid #7ac9b7;
}


input[type=submit]
{
    margin-bottom: 20px;
    width:100%;
    padding: 7px;
    border-radius:5px;
    border:1px solid #7ac9b7;
    /*background-color:rgb(164, 230, 219);*/
    background: #bf8af0;
    color: black;
}

input[type=submit]:hover
{
    cursor: pointer;
    border:1px solid black;
    color: white;
}

#submit{
    margin-top: 1.7em;
}
textarea{
    width:100%;
    padding: 7px;
    margin-top: 10px;
    border:1px solid #7ac9b7;
    border-radius:5px; 
    margin-bottom: 20px;
    resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

/* STYLES DE LA BARRE DE NOTIFICATION */
#jnotif{
	height: auto!important;
	height: 50px;
	min-height: 50px;
	width: 100%;
	display:none;
	position: absolute;
	left: 0;
        z-index: 1000;
}

#jnotif-message{
	padding: 0 0 0 30px;
	margin: 10px 0 0 20px;
	font-size: 14px;
	font-weight: bold;
	line-height: 24px;
	color: #FFF;
	text-shadow: 1px 1px 1px #666;
        z-index: 1000;
}

.ok{
	background-color: #7ad07b;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(164,235,164)),
	    color-stop(0.5, rgb(122,208,124))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(164,235,164) 0%,
	    rgb(122,208,124) 50%
	);
}

.nok{
	background-color: #e79797;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(227,173,173)),
	    color-stop(0.5, rgb(227,134,134))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(227,173,173) 0%,
	    rgb(227,134,134) 50%
	);
}

/*.ok #jnotif-message{
	background: url('../img/ok.png') no-repeat left center;
}

.nok #jnotif-message{
	background: url('../img/ko.png') no-repeat left center;/*
}
/*FIN DE LA NOTIFICATION*/

/* By using @ media form can have different layout for screen, mobile phone, tablet.

/* Sets the form layout for mobile phone, tablet
@media screen and (max-device-width: 600px){

div#envelope{
	width:50%;
	margin: 10px 30% 10px 25%;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
	} 
	
form{
width:70%;
margin:0 15%;
}  

form header {
  text-align:center;
  color: red;
  }
 

/* Makes responsive fields.Sets size and field alignment.
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
  width:100%;
  padding: 15px;
  border-radius:5px;
  border:1px solid #7ac9b7;
}


input[type=submit]
{
margin-bottom: 20px;
  width:100%;
  padding: 15px;
  border-radius:5px;
  border:1px solid #7ac9b7;
  background-color:rgb(164, 230, 219);
}
textarea{
	width:100%;
	padding: 15px;
	margin-top: 10px;
    border:1px solid #7ac9b7;
	border-radius:5px; 
	margin-bottom: 20px;
	resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}
}*/