@charset "utf-8";
/* CSS Document */

.contact_form h2 {

    background: none repeat scroll 0 0 #F3F3F3;

    border-radius: 5px;

    color: #5CD053;

    display: block;

    font-family: sans-serif;

    font-size: 20px;

    padding: 5px;

    text-shadow: 1px 1px 1px #CCCCCC;

    width: 100%;

}
/*--- estilos para los ul y li del formulario ---*/

.contact_form ul {

    width:100%;

    list-style-type:none;

    margin:0px;

    padding:0px;

}

.contact_form li{

    padding:12px; 

    border-bottom:1px solid #A3BD3C;

    position:relative;

}
.contact_form label {
	color: #FFFFFF;
	display: inline-block;
	float: left;
	font-size: 14px;
	font-weight: lighter;
	margin-top: 3px;
	padding: 3px;
	width: 90px;
}
.contact_form input {

    height:20px; 

    width:220px; 

    padding:5px 8px;

}

.contact_form textarea {

    padding:8px; 

    width:300px;

}

.contact_form button {

    margin-left:90px;

}
/*----- estilos visuales de los elementos --------*/

.contact_form input, .contact_form textarea { 

    border:1px solid #aaa;

    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;

    border-radius:2px;

    color: #888;

    font-size: 12px;

    padding-right:30px;

    -moz-transition: padding .25s; 

    -webkit-transition: padding .25s; 

    -o-transition: padding .25s;

    transition: padding .25s;

}

.contact_form input:focus, .contact_form textarea:focus {

    background: #fff; 

    border:1px solid #555; 

    box-shadow: 0 0 3px #aaa; 

    padding-right:80px;

}
/* === Estilos de Validacion === */

 

.contact_form input:required:valid, .contact_form textarea:required:valid {

    box-shadow: 0 0 5px #5cd053;

    border-color: #28921f;

}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {

    box-shadow: 0 0 5px #d45252;

    border-color: #b03535

}
/* === Estilos del boton de Envio === */

button.submit {

    padding: 9px 17px;

   font-family: Helvetica, Arial, sans-serif;

   font-weight: bold;

   line-height: 1;

   color: #444;

   border: none;

   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);

   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));

   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);

   background-color: #fff;

   border: 1px solid #f1f1f1;

   border-radius: 10px;

   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}

button.submit:hover {
	opacity: .55;
	cursor: pointer;
	color: #F16522;
}

button.submit:active {

    border: 1px solid #222;

    box-shadow: 0 0 10px 5px #444 inset; 

}