/*
 * Ejemplo para el modulo Hcdn de formulario web, usado como default CSS.
 *
 * El CSS a usar puede especificarse como el parametro "css" del modulo.
 * Si no se define el valor, se usa este archivo CSS.
 * 
 * Important: to generate valid XHTML code, specify "false" as module parameter value
 * and include the CSS in your template head manually.
 */
@media all



{
	::-webkit-input-placeholder  { color:graytext !important; }
	.cont_formulario{
		float:left;
		font-weight:normal;
	}
	input:-moz-placeholder { color:graytext !important; }
	
	#columna2 .campos_formulario #captchaphrase {
  
    width: 22em!important;
}

	.campos_formulario{
		margin:auto;
		float:left;
		font-family:Verdana,Helvetica;
		font-weight:bold;
		font-size:1em;
		 width: 23.5em;
		
				
	}
	#columna2 #emailform, .captcha > form {
    margin: 0 auto;
    width: 20.9em;
}
.captcha {
    float: left;
    width: 100%;
}
#columna2 .literal {
    width: 23em !important;
}
	

#columna2 .literal label {
    border-bottom: 1px dotted #d9d9d9;
    display: inline-block;
    float: none !important;
    font-family: "Roboto Condensed",sans-serif;
    font-weight: normal !important;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    width: 100%;
}
	
	
	input:focus.onlineform{
		outline: medium none !important;
		border-color:#4D90FE !important;
	}
	input:hover.onlineform{
		border-color:#A0A0A0 #B9B9B9 #B9B9B9 !important;
			
	}
	
	
	input.onlineform, #ebcaptchainput {
   	 background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
   	 height: 1.5em;
   	 padding: 0.5em;
   	 -webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-weight:normal!important;
	
	
		}
		
		
		.mensaje {
    background: none repeat scroll 0 0 #fdeeee;
    border: 1px solid #dd3e4b;
    color: #666;
    font-size: 0.9em;
    margin: 0 auto;
    padding: 0.5em;
    text-align: center;
    width: 23em;
}
.mensajeEnviado {
    border: 1px solid #bdbdbd;
    font-family: "Roboto Condensed",sans-serif;
    margin: 0 auto;
    padding: 0 0 1em;
    text-align: center;
    width: 25em;
    margin-bottom:2em;
}
.colores {
    background: none repeat scroll 0 0 #59c7d4;
    float: left;
    height: 0.5em;
    margin-bottom: 1em;
    width: 50%;
}
.colores2 {
    background: none repeat scroll 0 0 #56688c;
    float: left;
    height: 0.5em;
    margin-bottom: 1em;
    width: 50%;
}
		
	#columna2 input.onlineform {width:28em!important;}
	#columna2 .campos_formulario select.onlineform{width:28.5em!important;}
		
	.campos_formulario select.onlineform, #columna2 select.onlineform{
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
		-moz-border-bottom-colors: none !important;
		-moz-border-image: none !important;
		-moz-border-left-colors: none !important;
		-moz-border-right-colors: none !important;
		-moz-border-top-colors: none !important;
		border-color: silver #D9D9D9 #D9D9D9 !important;
		border-right: 1px solid #D9D9D9 !important;
		border-style: solid !important;
		border-width: 1px !important;
		
		outline: medium none !important;
		float:left !important;
		font-weight:normal;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		
		color:#666666;
		font-size:0.8em;
	}
	
	.campos_formulario textarea.onlineform{
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	font-weight:normal;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		width:28.5em!important;
	
	
	}
	
			
	.campos_formulario select:focus.onlineform{
		outline: medium none !important;
		border-color:#4D90FE !important;
	}
	
	.campos_formulario select:hover.onlineform{
			
		border-color:#A0A0A0 #B9B9B9 #B9B9B9 !important;
	}
	
	
	.botones{
		float:left !important;
		clear:left !important;
		
		
	}
	
	
	
	.webform_middletext{
		/**float:left !important;*/
		
		margin-bottom:1em !important;
		margin-left:12em !important;
	}	
	

	/* webform table */
	table.webform_table {
		width: 100%;
		border-spacing: 0;
		border: none;
		background-color: #FFF;
	}
	
	/* labels */
	td.webform_label, td.webform_label_multi {
		width: 30%;
		vertical-align: top;
		font-weight: bold;
		padding: 4px 2px 4px 0;
	}
	
	/* fields */
	td.webform_field, td.webform_field_multi {
		padding: 4px 0 4px 2px;
	}
	
	/* additional fields */
	table.webform_table input.onlineform {
		width: 99%;
		padding: 2px 0;
		border: 1px solid #888;
	}

	table.webform_table select {
		/*width: 99%;
		padding: 2px 0;
		border: 1px solid #888;
		height: 22px;*/
	}

	table.webform_table textarea {
		width: 99%;
		padding: 2px 0;
		border: 1px solid #888;
		height: 60px;
	}

	table.webform_table tr td.webform_button {
		text-align: center;
	}

	/* error */
	span.webform_label_error {
		color: #DD3E4B;
	}

	span.webform_msg_error {
		color: #DD3E4B; 
		font-weight: bold;
	}
	
	span.error {
    clear: left;
    color: #dd3e4b;
    float: left;
    font-weight: normal;
    font-size: 76% !important;
    margin-top: 0.2em;
}


	
	
	/* checkbox */
	table.webform_checkbox, table.webform_checkbox_row {
		margin-top: 0;
		border: none;
		background-color: #FFF;
	}
	


	table.webform_checkbox_row {
		float: left; 
		padding: 0px 8px 0px 0px;
	}

	td.webform_field_checkbox, td.webform_field_checkbox_row {
		vertical-align: top;
		padding: 2px 0px 2px 0px;
	}

	td.webform_label_checkbox {
		padding: 2px 0px 2px 5px;
	}

	td.webform_label_checkbox_row {
		padding: 2px 0px 2px 3px;
	}

	/* radio */
	table.webform_radio, table.webform_radio_row {
		margin-top: 0;
		border: none;
		background-color: #FFF;
	}

	table.webform_radio_row {
		float: left; 
		padding: 0px 8px 0px 0px;
	}

	td.webform_field_radio, td.webform_field_radio_row {
		vertical-align: top;
		padding: 4px 0px 0px 0px;
	}

	td.webform_label_radio, td.webform_label_radio_row {
		padding: 2px 0px 2px 5px;
	}

	/* table field */
	table.webform_label_table, table.webform_field_table {
		margin-top: 0;
		vertical-align: top;
		border: none;
	}

	.webform_label_table tr th, .webform_label_table tr td, 
	.webform_field_table tr th, .webform_field_table tr td {
		white-space: nowrap;
	}

	.webform_field_table tr th, .webform_field_table tr td {
		text-align: left;
	}

	.webform_field_table input {
		border: 1px solid #888;
		padding: 2px 0;
	}
	
	table.webform_field_table thead, table.webform_field_table tbody, table.webform_label_table thead {
		margin: 0;
		padding: 0;
	}
	
	table.webform_label_table tr th, table.webform_field_table tr td, table.webform_field_table tr th {
		height: 25px;
	}
	
	table.webform_field_table tr td {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 4px;
	}
	
	table.webform_field_table tr td:first-child {
		padding-left: 0;
	}
	
	table.webform_label_table tr th:first-child {
		vertical-align: middle;
	}
	
	
	table.webform_field_table input {
		width: 100%;
	}

	/* sub field sets */
	table.webform_table tbody.webform_subfields td.webform_label,
	table.webform_table tbody.webform_subfields td.webform_label_multi,
	table.webform_table tbody.webform_subfields td.webform_field {
	}
	
	table.webform_table tbody.webform_subfields td.webform_label,
	table.webform_table tbody.webform_subfields td.webform_label_multi {
	}

	table.webform_table tbody.webform_subfields td.webform_field {
		background-color: #EEE;
	}


	/* submit and other buttons */
	table.webform_table input.formbutton {
		margin-top: 10px;

	}

	/* check page */
	table.webform_check_table {
		margin-top: 14px;
		border: none;
	}

	/* confirmation page */
	table.webform_confirm_table {
    border: 1px dotted;
    font-family: "Roboto Condensed",sans-serif;
    margin: 0 auto;
    padding: 1em;
    width: 29em;
}

.webform_confirm_table td {
    border: 1px dotted;
    padding: 0.5em;
}

	/************************************************************************************************ 
	 * Orange style: En la configuracion opcional, en el campo "Style" se ingreso "orange". 
	 * So the following styles are special for that webform:
	************************************************************************************************/
	td.webform_label_orange {
		color: orange;
	}

	td.webform_field_orange {
		color: orange;
	}

	td.webform_field_orange input, td.webform_field_orange select {
		color: orange;
		background-color: yellow;
	}

	td.webform_middletext_orange {
		color: orange;
	}

	td.webform_mandatory_orange {
		color: orange;
	}

	td.webform_button_orange input {
		color: orange;
		background-color: yellow;
		font-weight: bold;
	}

	td.webform_error_text_start_orange {
		color: orange;
	}

	td.webform_error_start_orange {
		color: orange;
	}
	td.webform_label_table {
	vertical-align: top;
	}




}