<style type="text/css">
  #contacto{
	width:auto;
	padding:0 20px;
	height:auto;
	float:left;
	overflow:hidden;
  }
  
   #contacto p{
	   font-size:9pt;
	   margin:0;
	   padding:0;}	   
	
	#contact_form {
		overflow:hidden;
		width:auto;
		float:left;
		margin:0px 0 0 0px;}

	   
	#formcontacto{
		font-size:10pt;
		color:#FFF;
		border:0;
		margin:0;
		padding:0;
		}
	
	#formcontacto label{
			font-family: 'Play', sans-serif !important;
			font-size:14px !important;
		}

	#formcontacto div.left{
		overflow:hidden;
		float:left;
		width:340px;
		height:auto;}
	
	#formcontacto div.right{
		overflow:hidden;
		float:right;
		width:340px;
		height:auto;}
	
	#formcontacto div.full{
		overflow:hidden;
		margin:0px;
		width:100%;}
		
	#formcontacto input{
		background:#FFF;
		border:1px solid #c2ced8;
		padding:4px 5px;
		color:#4771c7;
		font-size:10pt;
		width:320px;
		margin:0 0 15px 0;
		}
		
		#formcontacto input.asunto{
			width:100%;
		max-width:753px;
			}
		#formcontacto input.captcha{
			float:right;
			margin:0 5px 0 20px;
			width:100px;
			}
			
		#formcontacto img.captcha{
			float:right;
			width:80px;
			margin:2px 5px;
			}

		
	#formcontacto input.submit{
		
		background:#f68d59;
		cursor:pointer;
		float:right;
		margin:5px 12px;
		font-size:15pt;
		padding:15px 70px;
		border-radius:7px;
		border:#FFF 2px solid;
		color:#FFF;
		text-shadow:none;
		width:auto;
		}

	#formcontacto input.submit:hover{
		background:#ff6d25;
		
		}

	#formcontacto select.selectbox{
		color:#4771c7;
		border:1px solid #c2ced8;
		font-size:10pt;
		padding:4px 5px;
		width:320px;
		margin:0 0 15px 0;
		}
		
	#formcontacto select.selectbox option{
		background:url('../{$TEMPLATE_URL}/img/input_bg.jpg') repeat-x;
		border:1px solid #c2ced8;
		font-size:10pt;
		padding:5px;
		width:323px;
		}
		
	#formcontacto textarea.mensaje{
		border:1px solid #c2ced8;
		font-size:10pt;
		width:100%;
		max-width:753px;
		height:140px;
		padding:4px 5px;
		}
		
	
	#formcontacto label.error{
		color:#f33838;
		display:none;}		
			
</style>

<div id="contacto">
    <form name="formcontacto" id="formcontacto" method="POST" action="">
        <div id="contact_form">  
                       <div class="left"> 
                          <label for="nombre" id="nombre_label">Nombre / Empresa: </label><label for="nombre" class="error" >¿Quien nos contacta? </label>
                          <input type="text" name="nombre" id="nombre" value="" class="textbox" tabindex="1" />
                        
                          <label for="tel" id="tel_label">Teléfono(s): </label><label for="tel" class="error" >¿A que número nos comunicamos? </label>
                          <input type="text" name="tel" id="tel" value="" class="textbox" tabindex="5" />
                       </div>
                       
                       <div class="right">   
                          <label for="email" id="email_label">Email: </label><label for="email" class="error" >Escriba una dirección de email válida </label>
                          <input type="text" name="email" id="email" value="" class="textbox" tabindex="2" />
    
                          <label for="boletin" id="boletin_label">¿Recibir nuestro Boletín?: </label>
                          <select name="boletin" id="boletin" class="selectbox"  tabindex="6">
                                <option value="1">Si</option>
                                <option value="0">No</option>
                          </select>
                     </div>   
                     
                     
                     <div class="full">
                          <label for="asunto" id="asunto_label">Asunto: </label><label for="asunto" class="error" >¿En que podemos ayudar? </label>
                          <input type="text" name="asunto" id="asunto" value="" class="textbox asunto"  tabindex="7"/>
                         
                          <label for="mensaje" id="mensaje_label">Mensaje: </label><label for="mensaje" class="error" >¿En que podemos ayudar? </label>
                          <textarea class="mensaje" cols="40" rows="10" name="mensaje" id="mensaje"  tabindex="9"></textarea>
                          <input class="textbox" name="envia_form" type="hidden" value="send"> 
                    </div>
                     
                      <div class="left" style="text-align:right;">
                          <div><label for="norobot" id="norobot_label">Captcha </label><label for="norobot" class="error" >Escriba el código de seguridad</label></div>
                         
                         <div style="overflow:hidden;"> <input type="text" name="norobot" class="textbox captcha" maxlength="4" tabindex="10" /> 
                                <img class="captcha" src="http://<?=DOMINIO?>/plugins/captcha.php" />
                         </div>
                         <div><h6>Escríba los caractéres como aparecen en la imagen.</h6></div>
                      </div>
                      
                      <div class="right">
                          <input type="submit" name="submit" class="submit" id="submit" value="Contactar!" />
                      </div>
                     
        </div>
    </form>
</div> 
{literal}
	<script>
	
	$(document).ready(function() {
		
			

		$('input.captcha').change(function(){
			var atrib = $(this).attr("value");
			
					$.post("{/literal}{$SITE_URL}{literal}/plugins/captcha.php", "&verify="+ atrib, function(data) {
						if(data != 'VALIDATED'){
								$('input.captcha').val('');
							}
					});
			});
		
     
		$('select.estado').change(function(){
			var atrib = $(this).attr("value");
			
				$('#loading').show();
					$.post("{/literal}{$SITE_URL}/{$SEO}&display=ajax{literal}&mod_display=ajax", "&update_ciudadlist="+ atrib, function(data) {
						$('#ciudad').hide().html(data).show();
						$('#loading').hide();
					});

			});
	    
    });


	
	$.validator.setDefaults({
		submitHandler: function() {
			
			$('#loading').show();
			$('#formcontacto').hide();
			
				var formdata = $('#formcontacto').serialize();
				$.ajax({
				  type: "POST",
				  url: "{/literal}{$SITE_URL}/{$SEO}{literal}",
				  data: formdata,
				  success: function(){
					$('#formcontacto').html("<div class=\"recibido\"><img src=\"{/literal}{$TEMPLATE_URL}{literal}/img/icon_email.png\"><br />Hemos recibido tu información, a la brevedad nos pondremos en contacto. Gracias!</div>.").hide('').fadeIn(1500, function(){$('#mensaje').append('')});
					$('#loading').hide();
					}
				
				 })
				 		  
		  return false;	
		 }
	});


	$("#formcontacto").validate({
		
		rules: {
			nombre: {
				required: true,
			},
			email: {
				required: true,
				email: true
			},
			estado: {
				required: true,
			},
			tel: {
				required: true,
			},
			norobot: {
				required: true,
			},
			mensaje: {
				required: true,
			},
		},
		
		
		messages: {
			nombre: {
				required: "",
			},
			email: {
				required: "",
				email: ""
			},
			estado: {
				required: "",
			},
			tel: {
				required: "",
			},
			norobot: {
				required: "",
			},
			mensaje: {
				required: "",
			},
		},

	});
</script>
{/literal}