/* focus remover estilos que da por default */

*:focus {outline: none;}

/* estilos tipograficos */

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sansserif;}
.contact_form h2, .contact_form label {fontfamily:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {fontsize: 11px;I
/* estilos de listas */

.contact_form ul {
width:750px;
liststyletype:none;
liststyleposition:outside;
margin:Opx;
padding:Opx;
}
.contact_form ti{
padding:l2px;
borderbottom:lpx solid #eee;
position:relative;
}
/* estilos tipograficos

Esto agrega un muy util seccionamiento visual a nuestro formulario. */

.contact_form li:firstchild, .contact_form li:lastchild {

borderbottom:lpx solid #777;
}
/* Encabezado*/

.contact_form h2 f
margin:0;
display: inline;
}
.required_notification f
color:#d45252;
margin:5px 0 0 0;
display:inline;
float: right;
}
/* Elementos de entada de texto*/

.contact_form label {
width:150px;
margintop: 3px;
display:inlineblock;
float:left;
padding:3px;
}

.contact_form input f
height:20px;
width:220px;
padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {marginleft:156px;}
.contact_form input, .contact_form textarea f
border:lpx solid #aaa;
boxshadow: Opx Opx 3px #ccc, 0 10px 15px #eee inset;
borderradius:2px;
}
.contact_form input:focus, .contact_form textarea:focus f
background: #fff;
border:lpx solid #555;
boxshadow: 0 0 3px #aaa;
}
/* Estilos del boton */

button.submit {
backgroundcolor: #68b12f;
background: webkitgradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: webkitlineargradient(top, #68b12f, #50911e);
background: mozlineargradient(top, #68b12f, #50911e);
background: mslineargradient(top, #68b12f, #50911e);
background: olineargradient(top, #68b12f, #50911e);
background: lineargradient(top, #68b12f, #50911e);
border: 1px solid #509111;

borderbottom: 1px solid #5b992b;

borderradius: 3px;
webkitborderradius: 3px;
mozborderradius: 3px;
msborderradius: 3px;
oborderradius: 3px;
boxshadow: inset 0 1px 0 0 #9fd574;
webkitboxshadow: 0 1px 0 0 #9fd574 inset ;
mozboxshadow: 0 1px 0 0 #9fd574 inset;
msboxshadow: 0 1px 0 0 #9fd574 inset;
oboxshadow: 0 1px 0 0 #9fd574 inset;
color: white;
fontweight: bold;
padding: 6px 20px;
textalign: center;
textshadow: 0 1px 0 #396715;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
boxshadow: 0 0 10px 5px #356b0b inset;
webkitboxshadow:0 0 10px 5px #356b0b inset ;
mozboxshadow: 0 0 10px 5px #356b0b inset;
msboxshadow: 0 0 10px 5px #356b0b inset;
oboxshadow: 0 0 10px 5px #356b0b inset;
}

/* interactividad hace que los campos del formulario se hagan grande*/

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

paddingright:70px;

.contact_form input, .contact_form textarea {

moztransition: padding .25s;
webkittransition: padding .25s;
otransition: padding .25s;
transition: padding .25s;
}

123/* pone el asterisco rojo*/

.contact_form input, .contact_form textarea f

paddingright:30px;
}
input:required, textarea:required {
background: #fff url(imagenes/asterisco.png) norepeat 98% center;
}
/* pone una burbuja a la validacion*/

::webkitvalidationbubblemessage {
padding: lem;

/* cuando el campo es invalido el cuadro del formulario se pone rojo y pone una imagen */

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

background: #fff url(imagenes/invalido.png) norepeat 98% center;
boxshadow: 0 0 5px #d45252;
bordercolor: #b03535
}

/* cuando el campo es valido el cuadro del formulario se pone verede y pone una imagen */

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

background: #fff url(imagenes/valido.png) norepeat 98% center;
boxshadow: 0 0 5px #5cd053;
bordercolor: #28921f;
}