/* 
   http://webdesign.tutsplus.com/es/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738
   http://html.conclase.net/w3c/html401-es/interact/forms.html
   Evitar SPAM en Formularios
   http://pixelar.me/tip-sencillo-para-evitar-el-spam-en-formularios/
   captcha
*/

#pasos { 
   border-radius: 3px; 
   margin-top: 15px;
   width: 847px;
}

#pasos h1{
   color: #CC0000;
   font-size: 1.4em;
}

#pasos h2{
   padding: 30px;
   font-size: 1.3em;
}

.carta-venta {
   font-size: 1.2em;
   padding: 30px 40px;
   line-height: 1.5;
}	

.contact_form ul {
    width:100%;
    list-style-type:none;
    list-style-position:outside;
}
.contact_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
}

.contact_form li:first-child, .contact_form li:last-child {
    /* border-bottom:1px solid #777; */
    border-bottom:1px solid transparent;
}

.contact_form label {
    width:90px;
    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 input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}

input:required, textarea:required {
   /* background: #fff url(images/red_asterisk.png) no-repeat 98% center; */
}

/* esto expande cada campo */
.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
    padding-right:40px;
}

.contact_form input, .contact_form textarea { /* add this to the already existing style */
    -webkit-transition: padding .25s; 
    transition: padding .25s;
}

.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

.nota_requerido {
    color:#d45252; 
	text-align: right;
}