*/body {    margin: 0;    padding: 0;    background-color: #f2f2f2;}

#container {    width: 800px;    margin: 30px auto;    padding: 20px 30px;    background: #fff;}

/*===  ESTILOS PARA QUITAR TODOS LOS OUTLINE DE CUALQUIER OUTLINE  ===*/
*:focus {outline: none;}

/* === FUENTES DEL FORMULARIO === */
body {font: 14px/21px "arial", "arial bold", "Lucida Sans Unicode", sans-serif;}

.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .notificacion_requerida {font-size: 10px;}
/* === ESTILIZACIÓN DE LAS DECORACIONES === */
.contact_form ul {    width:750px;    list-style-type: none;    list-style-position: outside;    margin:0px;    padding:0px;}
.contact_form li{    padding:12px;     border-bottom:1px solid #eee;    position:relative;} 
.contact_form li:first-child, .contact_form li:last-child {    border-bottom:1px solid #777;}/* === FORMULARIO HEADER === */
.contact_form h2 {    font-family: 'Lucida Grande', Arial, Helvetica, sans-serif;    margin:0;    font-size: 28px;    letter-spacing: -1;    font-weight: normal;    display: inline;}
.notificacion_requerida {    color:#d45252;     margin:5px 0 0 0;     display:inline;    float:right;}
/* === ELEMENTOS DEL FORMULARIO === */
.contact_form label {    width:150px;    margin-top: 3px;    display:inline-block;    float:left;    padding:3px;}
.contact_form input {    height:20px;     width:220px;     padding:5px 8px;}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}
/* ESTILOS VISUALES DE LOS ELEMENTOS DE CONTACTO */  
.contact_form input, .contact_form textarea {         border:1px solid #aaa;        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;        border-radius:2px;        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:70px;    }
/* === ESTILOS DE VALIDACION HTML5 === */ 
.contact_form input:required, .contact_form textarea:required {    background: #fff;}
.contact_form input:required:valid, .contact_form textarea:required:valid {    background: #fff;    box-shadow: 0 0 5px #5cd053;    border-color: #28921f;}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {    background: #fff;    box-shadow: 0 0 5px #d45252;    border-color: #b03535}
/* === Hints del Formulario === */
.form_hint {    background: #d45252;    border-radius: 3px 3px 3px 3px;    color: white;    margin-left:8px;    padding: 1px 6px;    z-index: 999;    position: absolute;     display: none;}
.form_hint::before {    content: "\25C0";    color:#d45252;    position: absolute;    top:1px;    left:-6px;}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}    /* === ESTILOS DEL BOTÓN ENVIAR === */
button.submit {    background-color: #68b12f;    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));    background: -webkit-linear-gradient(top, #68b12f, #50911e);    background: -moz-linear-gradient(top, #68b12f, #50911e);    background: -ms-linear-gradient(top, #68b12f, #50911e);    background: -o-linear-gradient(top, #68b12f, #50911e);    background: linear-gradient(top, #68b12f, #50911e);    border: 1px solid #509111;    border-bottom: 1px solid #5b992b;    border-radius: 3px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    -ms-border-radius: 3px;    -o-border-radius: 3px;    box-shadow: inset 0 1px 0 0 #9fd574;    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;    -o-box-shadow: 0 1px 0 0 #9fd574 inset;    color: white;    font-weight: bold;    padding: 6px 20px;    text-align: center;    text-shadow: 0 -1px 0 #396715;}

button.submit:hover {    opacity:.76;    cursor: pointer; }
button.submit:active {    border: 1px solid #20911e;    box-shadow: 0 0 10px 5px #356b0b inset;     -webkit-box-shadow:0 0 10px 5px #356b0b inset ;    -moz-box-shadow: 0 0 10px 5px #356b0b inset;    -ms-box-shadow: 0 0 10px 5px #356b0b inset;    -o-box-shadow: 0 0 10px 5px #356b0b inset;    }
