====== Estilos CSS =======

Al igual que en la web, los CSS en la tecnología XOne vienen a simplificar la definición de las propiedades de los distintos campos de una colección, tanto visuales (bgcolor, fontsize, labelwidth, etc), como estructurales (visible, size, group, etc), de forma que no tengamos que definir todos los atributos para cada uno de los campos.

<WRAP center round alert 80%>
!!! OJO !!!, si está definido compatibility-mode="true" en el nodo app, NO SE APLICARÁN LOS ESTILOS.
</WRAP>
===== Definición en mappings.xml =====

Lo primero que se realiza es la llamada en el mappings al fichero css. Para ello en el nodo app, se le incluye esa llamada:\\
   <style url="default.css" />

El atributo **conditions** especifica la condición que ha de cumplirse para que se cojan las reglas definidas dentro del fichero css especificado en el atributo **url**.
\\
Estas condiciones se pueden hacer más o menos específicas dependiendo de los parámetros que le definamos, de forma que podemos poner condiciones por plataforma, tamaño de pantalla y orientación del terminal.\\
\\
Las plataformas disponibles son: **android**, **ios**, **wm** (Windows Mobile), **bb** (blackberry) y **wp** (Windows Phone).\\
Los tamaños son: **phone** y **tablet** (todas las plataformas), además de **mini** y **hiphone** sólo para android, [[wiki:2.-desarrollo-app:2.3.-codigo:d.-estilos-css:start#tamanos_en_atributo_conditions|ver tabla un poco más abajo]].\\
La orientación puede ser: **vertical** y **horizontal**.\\

Estas condiciones se pueden especificar todas p.ej.:"**ios:phone:vertical**" o bien solo una parte, p.ej.:"**tablet:horizontal**" o "**bb:phone**", pero SIEMPRE en orden:\\ **PLATAFORMA:TAMAÑO:ORIENTACIÓN, POR ESTE ORDEN Y EN MINÚSCULAS**.\\
\\
Un ejemplo de llamadas a ficheros CSS en el mappings, sería:\\
\\

<code xml>
<app prefix="Gen" version="1.0.X.X" companycolor="#FF8000,#FF4000" forecolor="#FFFFFF">
	<logon showalways="true" finduser="true" replica="true"></logon>
	<style url="default.css" />  /* Estilos por defecto si no se definen en otro css */
	<style url="default_phone.css" conditions="phone:vertical"/>
	<style url="default_phone_hor.css" conditions="phone:horizontal"/>
	<style url="default_tablet.css" conditions="tablet:vertical"/>
	<style url="default_tablet_hor.css" conditions="tablet:horizontal"/>
	<style url="default_android_hor.css" conditions="android:phone:horizontal"/>
	<style url="default_android_mini_ver.css" conditions="android:mini:vertical"/>
	<style url="default_android_ver.css" conditions="android:phone:vertical"/>
	<style url="default_blackberry.css" conditions="bb:phone"/>
	<style url="default_iphone.css" conditions="ios:phone"/>
	<style url="default_ipad_vertical.css" conditions="ios:tablet:vertical"/>
	<style url="default_ipad_horizontal.css" conditions="ios:tablet:horizontal"/>
</app>
<collprops type="general">
	<coll name="Empresas" ......
		......
		......
	</coll>	
	.....
	.....
</collprops>
</code>
\\
==== Tamaños en atributo conditions ====
\\
^           ^  mini       ^  phone              ^  hiphone        ^  tablet           ^
|  android  |  < 3.5"     |  3.5" - 4.5"        |  > 4.5" y < 7"  |  >= 7"            |
|  ios      |  No aplica  |  Todos los iphones  |  No aplica      |  Todos los ipads  |
|  wm       |  ----       |  < 6"               |  ----           |  >= 6"            |
|  bb       |  ----       |  < 6"               |  ----           |  >= 6"            |
|  wp       |  ----       |  < 6"               |  ----           |  >= 6"            |

**NOTA**: Los nuevos tamaños de android están disponibles a partir de la versión 3.9.14 del Framework de Android, versiones anteriores únicamente tienen phone y tablet, igual que el resto de plataformas.
\\
<WRAP round info center 750px>
Podemos definir varios ficheros css, que se aplicarán dependiendo de las condiciones siguientes:
  - Por defecto se cogen las reglas definidas en default.css
  - Si el dispositivo tiene una pantalla menor de 6 pulgadas, podemos poner conditions="phone:vertical" o "phone:horizontal" según se quieran aplicar distintos estilos en vertical o en horizontal, respectivamente (Ver tabla anterior con los nuevos tamaños de android).
  - Igual ocurre con la opción conditions="tablet:vertical" o "tablet:horizontal", en este caso para dispositivos mayores de 6 pulgadas (Ver tabla anterior con los nuevos tamaños de android).
  - Nótese la posibilidad de especificar un css por cada tipo de dispositivo (android,ios,wm,bb y wp).
</WRAP>

===== Prioridad de los atributos =====

\\ 

Los CSS de XOne también tienen un orden de prioridad. El orden que vamos a enumerar es **DE MENOR A MAYOR PRIORIDAD**:\\
\\
**1.-** Valores Predefinidos en el Framework (Si no se pone nada, todos los atributos tienen un valor por defecto) (Prioridad más baja).

**2.-** Valores definidos en el archivo .CSS - Redefinir nodos de sistema (Coll, Group, Frame y Prop)\\
<wrap tip>Nótese que para redefinir los nodos de sistema (Coll, Group, Frame y Prop) **NO** hay que ponerles un "punto" delante.</wrap>
<code css>
coll {
	nomenmask:24;
	cell-bgcolor:#ECABAB,#FFFFFF;
}
 
prop {
	labelbox:false;
	textfont-size:7;
	labelwidth:7;
	fieldsize:4;
	size:13;
	onchange:Refresh;
	labelfont-bold:true;
	lines:1; /* Se pone a 1 por defecto, para que si se pulsa enter lo tome como cambio de campo y no como cambio de línea. */
	fixed-lines:true;
}
 
group {
	imgbk:portada_interior.jpg;	
}
 
frame {
	width:100%;
	framebox:false;
	bgcolor:#00000000;
}
</code>
**3.-** Valores definidos en el archivo .CSS - Clases en nodos de sistema (Coll, Group, Frame y Prop)
<WRAP center round tip 60%>
En este caso, únicamente es necesario poner class="particular"** en el nodo COLL**, no hay que ponerselos al GROUP, PROP o FRAME por separado.
</WRAP>

<code css>
prop.particular {
	labelbox:false;
	textfont-size:7;
	labelwidth:7;
	fieldsize:4;
	size:13;
	onchange:Refresh;
	labelfont-bold:true;
}
 
group.particular {
 
	imgbk:portada_interior.jpg;
 
{
 
frame.particular {
	width:100%;
	framebox:false;
	bgcolor:#00000000;
}
</code>
**4.-** Valores definidos en el archivo .CSS - Clases.
<code css>
.miclase {
	extends:prop;
	labelfont-bold:true;
	labelshadow:false;
	fontsize:9;
	labelbox:false;
	textfont-size:10;
	labelwidth:15;
	fieldsize:4;
	size:13;
	onchange:Refresh;
	bgcolor:#FF8000;
}

/* En el Mappings tendríamos una línea como la siguiente donde se especifica de qué clase es dicho prop (SIN el punto delante) */
	<prop name="DATO" class=”miclase” visible="15" group="1" type="T" size="40" fieldsize="40"/>

</code>
**5.-** Atributos definidos en la propia etiqueta.
<code xml>
	<prop name="MAP_XXXXX" bgcolor="#FFFFFF" .../>
</code>
\\
===== Estructura =====
\\
En el fichero CSS se van a definir los atributos de los nodos que tienen propiedades de diseño principalmente.\\
\\
 Actualmente solo se definen atributos de 4 nodos:\\
 \\
^  ATRIBUTOS   ^
|**Coll**|
|**Group**|
|**Prop**|
|**Frame**|
\\

Lo primero que se realiza es la llamada al fichero CSS que se requiere utilizar en nuestra aplicación. Para ello en el nodo app, se le pone la llamada: <style url="default.css"/>. \\
\\
Las llamadas de los nodos que se pueden definir en un CSS se pueden realizar desde:\\
\\

|**Nodo coll**| para los nodos group, prop y frame que tiene la colección.|
|**Nodo group**| para definir sus atributos.|
|**Nodo prop**| para definir los atributos del mismo.|
|**Nodo frame**| la definición de sus atributos.  |
\\
Los nodos pueden extender los valores de otros ya definidos, para ello se pondrá **"extends:nombreprop”**. Si los atributos volvieran a ser definidos en la clase que heredó, tienen preferencia éstos sobre los heredados.\\
\\

==== Nodos de Sistema ====

Estos son los propios del sistema y serán genéricos para todos los nodos. \\
Estos nodos siempre se ponen el nombre tal cual, sin punto delante ni nada en el fichero CSS.\\

\\

|**Coll**|
|**Group**|
|**Prop**|
|**Frame**|
\\
Con esta forma, ya tendremos definidos los atributos para todos los **"coll", "group”, "prop” y "frame”** que se definan en el mappings, dando igual en la coll en la que estén y sin tener que poner nada más que la llamada al fichero CSS utilizado.\\
\\

Si se volvió a definir un atributo en el mappings, tienen preferencia sobre el heredado de la clase.\\

==== Nodos Propios ====

Los nodos propios del programador, tienen que ir siempre con un punto delante, de tal forma que se le indica que es propio del programador.\\
\\

Para poder utilizarlo en el mappings, en el nodo en cuestión se pondrá el atributo “class” e igualándolo al nombre del nodo que hemos definido en nuestro CSS.\\
\\

Ejemplos en el mappings:\\
\\

<code xml>
<group name="General" id="1" bgcolor="#99CCFF" imgbk="portada_interior.jpg" class="groupclientes"/>
<prop name="COLOR" visible="7" type="T" group="1" class="etiquetas_incidencias">Color</prop>
<frame name="id1" width="100%" bgcolor="#CEE3F6" class="frame_cabecera" />
</code>

Hay que indicar que si se volvieron a definir los atributos en el mappings, tienen preferencia sobre el heredado.\\
\\

Para definirlos en el CSS, se pone primero un punto seguido del nombre que le queramos dar, esto sería:\\
\\

  * .**groupclientes**
  * .**etiquetas_incidencias**
  * .**frame_cabecera**

==== Nodos de Coll ====

Aquí la llamada a la clase se realiza para definir con una única llamada, todos los nodos que están definidos en la coll. Para ello a nivel de coll, se pondrá la llamada a la clase: class=”nombreclasemia”.\\

Si luego en los nodos se vuelve a llamar a un atributo o a otra clase, tendrá preferencia sobre la que se ha definico a nivel de la coll. \\

Para definirlos en el CSS, se pone primero el nombre del nodo de sistema, y seguido el nombre que le queramos dar, esto sería:\\
\\

|**prop.nombreclase**|
|**group.nombreclase**|
|**frame.nombreclase**|
\\

===== Propiedades CSS =====

<code css>
.comunes {
	/* COLOR */
	bgcolor:#861718,#FF0000; /* Se puede formar un degradado separando los colores con comas */
	forecolor:#00000000; /* LOS COLORES SON RGB, Se pueden especificar también 2 digitos al inicio para la Opacidad 00=transparente, FF=opaco, 66=semitranparente... */

	/* TEXTO - FUENTE */
	fontsize:9;		/* Esto puede afectar al control completo, es decir, Label + Caja de texto del control */

	textfont-size:7;	/* Todo lo que comienza por text- afecta únicamente a la caja de texto del control (En el caso de un inputbox), NO a la etiqueta. */
				/* En los tamaños de letra no existe el -disabled */
	
	text-forecolor:#000000;
	text-forecolor-disabled:#045FB4;
	text-forecolor-focus:#000000; 
	text-bgcolor:#FFFFFF;
	text-bgcolor-disabled:#FFFFFF;
	text-bgcolor-focus:#AAB0B0B0;
	text-align:left; /* left, right, center */

	/* MARGENES - ALINEACION - ANCHO y ALTO */
	tmargin:2;	/* Margen Superior (Top) */
	rmargin:2;	/* Margen Derecho  (Right) */
	bmargin:2;	/* Margen Inferior (Bottom) */
	lmargin:2;	/* Margen Izquierdo (Left) */

	tpadding:2;	/* Margen por dentro del borde del control */
	rpadding:2;
	bpadding:2;
	lpadding:2;

	align:right; /* left, right, center */

	width:50%; /* En porcentaje o en puntos */
	height:50%; /* En porcentaje o en puntos 20p */

	/* BORDES */
	border-width:4;

	text-border:true;
	text-border-top:false;
	text-border-bottom:true;
	text-border-right:false;
	text-border-left:false;

	/* IMAGENES */
	img:cancel.png;
	imgsel:refresh.png;
	imgbk:back_splash.png;
	icon:help.png;
}

.coll {
	editmask:0;		/* Para que no salga ninguna opcion (grabar, salir...) de forma automática, ponemos nosotros los botones que necesitemos */
	nomenmask:24; 		/* Cuando llaman a una colección con una lupa que solo se pueda filtrar y salir. */
	special:true;		/* Indica que una colección es únicamente visual, NO tiene una tabla de datos asociada ni se lanza ningún tipo de SQL al entrar en la colección */
	notab:true;     	/* No queremos las pestañas o grupos visibles */

	show-toolbar:false;	/* Barra que aparece sobre un content con un botón para refrescar, si ponemos este atributo a false ya no aparece la barra.  */
	nomenmask:24;		/* En desuso, era para ver qué podíamos hacer con la colección que llamamos con una lupa, en este caso sólo filtrar y salir que sumaban 24 la máscara de bits */

	dependent:false;	/* Poner a false, antiguamente los contents siempre tenían un campo de enlace con su cabecera y la maquinaria intentaba realizar la relación automáticamente */
	check-owner:false;	/* Igual que el anterior, poner a false, actualmente el programador debe hacer la relación cabecera-detalle si existiese tal relación */
}

.group {
	/* ATRIBUTOS PESTAÑAS */
	
	/* Atributos a nivel de COLL */
	group-theme:material; 		/* Para que salga en modo "material design" con una barrita debajo del texto de la pestaña */
	tab-mode:scrollable;		/* Posibles valores "scrollable" ó "fixed", para que se pueda hacer scroll horizontal con las pestañas ó no */
	notab:false;			/* Posibles valores "true" ó "false", para que aparezcan visibles las pestañas ó no  */
	tab-height:XX;			/* Alto que va a tener la fila de las pestañas (TODAS iguales, por eso se pone a nivel de COLL). */

	/* Atributos de un Grupo FIJO (Cuando se pasa de una pestaña a otra, este grupo permanece fijo en pantalla siempre que estemos en la misma colección) */
	fixed:true;			/* Este atributo es el que define que un grupo sea fijo ó no. Combinar con width y height siempre. */
	orientation:top;		/* Este atributo es para definir la posición en pantalla. Posibles valores de un grupo fijo: "top" ó "bottom" */


	/* Atributos a nivel de group */
	tab-width:33%; 				/* Permite definir el ancho de cada pestaña de forma individual. Por defecto es 33%. */
	tab-forecolor:#861718;
	tab-forecolor-disabled:#861718;
	tab-bgcolor:#FCF1F1;
	tab-bgcolor-disabled:#FCF1F1; 		*/ Color de fondo para cuando no está seleccionada la pestaña. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;
	icon: Icono que se desea colocar en la pestaña.
	icon-orientation: Posición en la que se desea que se coloque el icono con respecto al texto de la pestaña.
}

.frame {
	/* ATRIBUTOS FRAME */
	framebox:false;			/* Si queremos un borde alrededor del frame. Valores:"true" ó "false" */
 	width:100%;
	height:125p;
	bgcolor:#2B3E51;
	align:bottom;
}

.textbox {
	border-corner-radius:8; 	/* Para que los bordes aparezcan redondeados */
	
	/* Para que no aparezca la etiqueta, dentro del campo ponemos lo que tiene que introducir el usuario, y cuando coja el foco el campo, el texto lo ponemos sobre el campo para seguir viéndolo */
	labelwidth:0;			/* No queremos que aparezca el label del campo */
	tooltip:Nombre de usuario;	/* Texto que aparece en el campo de datos mientras no tiene el foco */
	tooltip-forecolor:#FF0000;	/* Color de la letra del texto tooltip */
	expanded-hint-color:#FF0000;	/* Color de la letra del texto tooltip cuando se situa sobre el control al tener el foco el campo de datos (combinar con floating-tooltip) */
	floating-tooltip:true;		/* Para que el tooltip aparezca sobre el control cuando el campo obtenga el foco. */
	show-counter:true;
}

.etiqueta_label {
	/* ATRIBUTOS ETIQUETA */
	labelwidth:7;
	labelfont-underline:true;
	labelshadow:false;
	labelbox:false;
	labelfont-bold:true;
	labelfont-size:8; 	/* cualquiera de los 2 formatos es valido */
	labelfontsize:8;
}

.listado {
	/* ATRIBUTOS LISTADO - GRID */
	/* ESTOS ATRIBUTOS SE DEFINEN A NIVEL DE COLL */
	grid-bgcolor:#00000000;
	grid-text-bgcolor:#00000000;

	/* Todo lo que empieza por cell son atributos para cuando la coleccion sale en modo content  */
	cell-forecolor:#FFFFFF;
	cell-bgcolor:#ECABAB,#FFFFFF;		/* Se pueden poner varios colores separados por coma para definir un degradado */
	cell-imgbk:./icons/fondocelda.png;	/* Imagen de fondo para un registro */
	cell-border-width:0;
	cell-border:false;
	cell-border-color:#CD0A2D;
	cell-selected-border-color:#4B4D4F;	/* Cuando se marque un registro se le cambia el color del borde */
	cell-even-color:#E8E8E8;		/* Color de fondo para filas pares */
	cell-odd-color:#FFFFFF;			/* Color de fondo para filas impares */
	cell-height:80p;			/* Alto de la celda */
	cell-tpadding:4p;			/* Relleno superior */
	cell-bpadding:4p;			/* Relleno inferior */
}

.contents {
	show-toolbar-icon-refresh:false;
	check-owner:false;
	dependent:false;
	show-toolbar:false;
	show-selected-item:false;
}

/* Para personalizar los iconos de los distintos controles */
prop:IMG {

/* Para los type="IMG" con readonly="false" (Firma vieja), el fondo negro y los iconos que salen al hacer la firma NO son personalizables. (Utilizar el type="DR", para tener más control sobre la firma) */

	img-sign:bt_firma.png;		/* Icono para realizar la firma */
	img-sign-sel:bt_firma.png;	/* Icono para cuando pulsamos sobre realizar la firma */
	img-delete:bt_delete.png;	/* Icono para desechar la firma */
	img-delete-sel:bt_delete.png;	/* Icono para cuando pulsamos sobre desechar la firma */
	img-save:guardar.png;		/* Icono para guardar la firma */
	img-save-sel:guardar.png;	/* Icono para cuando pulsamos sobre guardar la firma */
	onchange:refresh;
	file-maxwidth:800;		/* Ancho de la imagen generada por la firma */
	file-maxheight:600;		/* Alto de la imagen generada por la firma */
	width:500p;			/* Ancho de la previsualización */
	height:500p;/*			/* Alto de la previsualización */
}

prop:Z
{
	extends:prop;
	bgcolor:#F2F2F2;
	width:96%;
	lmargin:2%;
	tmargin:2%;
}

prop:AT
{
    img-att:bt_attach.png;
    img-att-sel:bt_attach_sel.png;
}

prop:PH
{
    img-camera:bt_camera.png;
    img-camera-sel:bt_camera_sel.png;
}
 
prop:B
{
	extends:prop;
	forecolor:#000000;
	bgcolor:#cccccc;
	img-sel: ;

	forecolor-disabled:#ADAA9C;	/* Color de la letra cuando el botón está deshabilitado (locked ó disableedit)	*/
	bgcolor-disabled:#C6CEC6;	/* Color de fondo cuando el botón está deshabilitado (locked ó disableedit) 	*/

	forecolor-pressed:#FFFFFF;	/* Color de la letra cuando el usuario está pulsando el botón	*/
	bgcolor-pressed:#000000;	/* Color de fondo cuando el usuario está pulsando el botón 	*/
}
}

prop:VD {
	img-video:bt_video.png;
	img-video-sel:bt_video_sel.png;
}

.at {
	img-att:att.png; 		/* Icono de los prop type="AT" (attach, adjuntar un fichero) */
	img-att-sel:att_sel.png;
	img-att-width:40p;
	img-att-height:40p;
	onchange:refresh;
}

.boton {
	/* ATRIBUTOS BOTON */
	execute-async:true; (CR)
}

.calendario {
	/* ATRIBUTOS PARA CAMBIAR APARIENCIAS EN UNA COLECCIÓN EN MODO CALENDARIO */
	show-toolbar:false;		/* Quita la barra de botones entera */
	bgcolor:#COLOR;			/* Color de fondo de la barra de botones, días */
	forecolor:#COLOR;		/* Color del mes y año de la barra de botones, texto del día */
	cell-forecolor:#COLOR;		/* Color del mes y año de la barra de botones, texto del día */
	cell-bgcolor:#COLOR;		/* Fondo de los días */
	cell-bgcolor-out:#COLOR;	/* Fondo de los días */
	cell-bgcolor-selected:#COLOR;	/* Fondo de los días */
}

.calendario_contents {
	cell-bgcolor:#ff328ba9;
	cell-forecolor:#FFFFFF;
	cell-border-width:4;
	cell-border-color:#00000000;
	cell-align:center;
	align:center;
	fontsize:25;
	
	cell-selected-bgcolor:#00000000;
	cell-selected-forecolor:#ff328ba9;
	cell-selected-border-color:#00000000;
	
	weekdays-bgcolor:#00000000;	
	weekdays-forecolor:#ff328ba9;
	weekdays-fontsize:6;
	weekdays-longname:false;
	weekdays-align:top|left;
	border-width:2;
	page-swipe:true;
	cell-other-month-bgcolor:#50000000;
	border:false;
}

</code>


===== Paleta de Colores =====

A continuación, se propone una paleta de colores con su valor hexadecimal para su uso en nuestras aplicaciones.\\


{{wiki:paleta.PNG}}

==== Valores hexadecimales de transparencias ====
<code css>

.info
{
    alpha100%:FF;
    alpha95%:F2;
    alpha90%:E6,
    alpha85%:D9;
    alpha80%:CC;
    alpha75%:BF;
    alpha70%:B3;
    alpha65%:A6;
    alpha60%:99;
    alpha55%:8C;
    alpha50%:80;
    alpha45%:73;
    alpha40%:66;
    alpha35%:59;
    alpha30%:4D;
    alpha25%:40;
    alpha20%:33;
    alpha15%:26;
    alpha10%:1A;
    alpha5%:0D;
    alpha0%:00;
}

</code>
\\
===== Ficheros CSS externos =====

La maquinaria permite tener declarado ficheros CSS con la definición de ciertas características de los nodos. Para la realización de ésto, será necesario tener fichero CSS externo, que tenga el código que posteriormente se va a utilizar. \\
\\
La llamada a este fichero, se realiza dentro del nodo **app**, y con el nodo **style**. Aquí se muestra un ejemplo:
\\
<code xml>
<app prefix="Gen" version="0.0.0.0" companycolor="#FF8000,#FF4000" forecolor="#FFFFFF>
       <logon showalways="true" finduser="true" replica="true"></logon>
       <style url="default.css" />
</app>
</code>
\\
===== Ejemplo fichero CSS =====

<code css>
coll
{
	cell-bgcolor:#FFFFFF;
	cell-border-width:0;
	cell-border-color:#CD0A2D;
	cell-forecolor:#000000;
	cell-border:false;
	cell-even-color:#E8E8E8; 		/* Color de fondo para filas pares */
	cell-odd-color:#FFFFFF;  		/* Color de fondo para filas impares */
	cell-height:80p;	 		/* Alto de la celda */
	cell-tpadding:4p;	 		/* Relleno superior */
	cell-bpadding:4p;	 		/* Relleno inferior */
	cell-selected-border-color:#4B4D4F;
	editmask:0;				/* Máscara por defecto (Nuevo, editar, borrar, filtrar...) */
	show-toolbar:false;			/* Para que no aparezca la barra superior con el refresh y nuevo registro en los contents */
	notab:true; 				/* Para que no se vean las pestañas ó groups */
	nomenmask:24;
	dependent:false;
	check-owner:false;
}

group {
	imgbk:portada_interior.jpg;	
}

frame {
	width:100%;
	framebox:false;
	bgcolor:#00000000;
}

prop {
	visible:1;
	width:96%;
	fieldsize:4;
	lmargin:2%;		
	labelwidth:7;
	labelbox:false;
	fontsize:11;
	text-fontsize:11;
	forecolor:#4B4D4F;	
	text-border:false;	
	text-forecolor:#4B4D4F;
	border-color:#CD0A2D;	
	lines:1;
	fixed-lines:true;
	size:100;
}

prop:B {  /* Solo afecta a los props de tipo BOTON (type="B") */

	bgcolor-disabled:#C6CEC6;	/* Color de fondo cuando el botón está deshabilitado (locked ó disableedit) 	*/
	forecolor-disabled:#ADAA9C;	/* Color de la letra cuando el botón está deshabilitado (locked ó disableedit)	*/

	bgcolor-pressed:#000000;	/* Color de fondo cuando el usuario está pulsando el botón 	*/
	forecolor-pressed:#FFFFFF;	/* Color de la letra cuando el usuario está pulsando el botón	*/
}

prop:NC {  /* Solo afecta a los props de tipo CHECK (type="NC") */
	apply-css:true;
}

prop.particular {
	labelbox:false;
	textfont-size:7;
	labelwidth:7;
	fieldsize:4;
	size:13;
	onchange:Refresh;
	labelfont-bold:true;
		
	/* Para que salga el tooltip sobre el campo cuando nos situamos en él */
	expanded-hint-color-focus:#000000;
	expanded-hint-color:#000000; 
	tooltip-forecolor:#000000;
	floating-tooltip:true;
}

group.particular {

	imgbk:portada_interior.jpg;
	
}

frame.particular {
	width:100%;
	framebox:false;
	bgcolor:#00000000;
}

.etiqueta {
	extends:prop; /* Además de todo lo que tenga props, ponemos esto otro. Si hay algún atributo repetido, vale éste último. */
	labelfont-bold:true;
	labelshadow:false;
	fontsize:9;
	labelbox:false;
	textfont-size:10;
	labelwidth:15;
	fieldsize:4;
	size:13;
	onchange:Refresh;
	bgcolor:#FF8000;
}

.login {
	extends:prop;
	labelfont-bold:true;
	labelshadow:false;
	fontsize:9;
	labelbox:true;
	onchange:Refresh;
	bgcolor:#FF8000;
	forecolor:#FFFFFF;
	text-forecolor:#000000;
	text-bgcolor:#FFFFFF;
}

.edicion {
	extends:prop;
	labelfont-bold:true;
	labelshadow:false;
	fontsize:9;
	labelbox:true;
	onchange:Refresh;
	bgcolor:#FF8000;
	forecolor:#000000;
	text-forecolor:#000000;
	text-bgcolor:#FF8000;
}

.etiqueta_clientes {	
	labelbox:true;
	bgcolor:#FF8000;
	forecolor:#000000;
	text-forecolor:#000000;
	text-bgcolor:#FFFFFF;
	labelfont-bold:true;
	labelshadow:false;
	lmargin:14;
	labelwidth:14;
	align:right;
}
</code>