/*
//=======================================================================================
// Caja San Nicolas SC de AP de RL de CV
//=======================================================================================
*/

.hero {
  background-color: #F2F2F2;
  padding: 0;
}

.panel {
  background-color: #E6E6E6;
  padding: 0;
}

.green {
  background-color: #ABDB80;
  padding: 0;
}

*
{
	font-family      : 'Lucida Sans Unicode','Lucida Grande',Tahoma,Arial,san-serif;
	font-size        : 11px;
	font-weight      : normal;
	padding          : 0;
	/*border           : 0;*/
	margin           : 0;
}

html
{
	width     : 100%;
	height    : 100%;
}


body
{
	color: #373C40;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    height: 90%;
    margin:10px;
    font-size: 70%;
}

p
{
	margin-top    : 0.5em;
	margin-bottom : 0.5em;
}

select, input, textarea
{
	/*border : inset 2px white;*/
	margin : 2px 0px;
}

input, textarea
{
	padding-left   : 3px;
	padding-top    : 1px;
	padding-bottom : 1px;
	padding-right  : 2px;
}

input[type='button'], .button, button
{
/* 	border             : 1px solid #007CBE; */
/* 	background-color   : #dedad5; */
	color              : #007CBE;
	font-weight        : bold;
	padding            : 2px 3px 2px 3px;
/* 	margin             : 0; */
	cursor             : pointer;
/* 	-moz-border-radius : 3px 3px 0px 0px; */
}

input[type='button']:hover, .button:hover, button:hover
{
/*  	background-color : #a9ae9c; */
}

input[type='button'].grayButton, .grayButton
{
	border             : solid 1px #9C9C94;
	background-color   : #D9D9D1;
	color              : black;
	font-weight        : normal;
	padding            : 2px 3px 2px 3px;
	margin             : 0;
	-moz-border-radius : 3px; 
}

input[type='button'].grayButton:hover, .grayButton:hover
{
	border  : solid 1px #007CBE;
	color   : #007CBE;
	cursor  : pointer;
}

label
{
	color : #004C8E;
	padding-left : 10px;
}
	
	label.required
	{
		background   : url(imgs/asterisco.gif) no-repeat;
	}

fieldset
{
	border             : solid 2px #007CBE;
	-moz-border-radius : 3px;
	margin             : 10px 0px;
}
	fieldset > legend, fieldset > div.legend
	{
		padding    : 5px;
		background : #007CBE;
		color      : white;
	}

hr
{
	clear : both;
}

.label-container > label
{
	/*display       : block;*/
	padding-right : 3px;
	position      : relative;
	/*top           : 4px;*/
}

.justified
{
	text-align : justify;
}

.right
{
	text-align : right;
}

.left
{
	text-align : left;
}

.center
{
	text-align : center;
}

.currencycell
{
	text-align    : right;
	white-space   : nowrap;
	padding-right : 1em;
	min-width     : 6em;
}

a.blue
{
	color           : #004C8E;
	text-decoration : none;
}

a.blue:hover
{
	color          : #007CBE;
	text-decoration: underline;
}

a.blueb
{
	color           : #004C8E;
	font-weight     : bold;
	text-decoration : none;
}

a.blueb:hover
{
	color           : #007CBE;
	text-decoration : underline;
}

.red
{
	color           : #CC0000;
	text-decoration : none;
}

a.red:hover
{
	text-decoration : underline;
}

a.redb
{
	color           : #CC0000;
	font-weight     : bold;
	text-decoration : none;
}

a.redb:hover
{
	text-decoration : underline;
}

/**
  Layout Structure
  Permite definir layouts basados en columnas
  <div class="layout"></div>
*/
div.layout
{
	width     : 100%;
	/*margin    : auto;*/
	max-width : 100%;
}

	/**
	Define el comportamiento global de los nodos en layout
	*/
	div.layout *
	{
		font-size : 100%;
	}
	
	/**
	 Define un bloque de diseño 
	 <div class="columns1"></div>
	*/
	div.layout div.columns1
	{
		width : 100%;
		clear : both;
	}
		/**
		 Define el comportamiento de los div dentro de columns1
		 <div></div>
		*/
		div.layout div.columns1 > div
		{
			width : 100%;
		}
	
	/**
	 Define un bloque de diseño a 2 columnas, debe estar contenido en un bloque columns1
	 <div class="columns2"></div>
	*/
	div.layout div.columns2
	{
		width : 100%;
		float : left;
	}
	
		/**
		 Define el comportamiento de los div dentro de columns2
		 <div></div>
		*/
		div.layout div.columns2 > div
		{
			width   : 50%;
			float   : left;
		}

	/**
	 Define un bloque de diseño a 3 columnas, debe estar contenido en un bloque columns1
	 <div class="columns3"></div>
	*/
	div.layout div.columns3
	{
		width : 100%;
		float : left;
	}
	
		/**
		 Define el comportamiento de los div dentro de columns3
		 <div></div>
		*/
		div.layout div.columns3 > div
		{
			width   : 33.33%;
			float   : left;
		}
	
	/**
	 Define un bloque de diseño a 4 columnas, debe estar contenido en un bloque columns1
	 <div class="columns4"></div>
	*/
	div.layout div.columns4
	{
		width : 100%; 
		float : left;
	}
		
		/**
		 Define el comportamiento de los div dentro de columns4
		 <div></div>
		*/
		div.layout div.columns4 > div
		{
			width   : 25%;
			float   : left;
		}
		
		
	/**
	 Define un bloque de diseño a anchos de columnas 25 y 75 %
	 */
	div.layout div.columns-1-3
	{
		width : 100%;
		float : left;
	}
		/**
		 Define el comportamiento de los div dentro de columns-3-1
		*/
		div.layout div.columns-1-3 > div:first-child
		{
			width : 25%;
			float : left;
		}
		div.layout div.columns-1-3 > div:last-child
		{
			width   : 70%;
			float   : left;
		}

	/**
	 Define un bloque de diseño a anchos de columnas 75 y 25 %
	 */
	div.layout div.columns-3-1
	{
		width : 100%;
		float : left;
	}
		/**
		 Define el comportamiento de los div dentro de columns-3-1
		*/
		div.layout div.columns-3-1 > div:first-child
		{
			width : 70%;
			float : left;
		}
		div.layout div.columns-3-1 > div:last-child
		{
			width : 25%;
			float : left;
		}
		
	/**
	 * Los bloques para etiqueta - control de formularios
	 */
	div.layout div.form-control
	{
	}
		
		div.layout div.form-control > div:first-child
		{
			text-align  : right;
			line-height : 2em;
		}
		
			div.layout div.form-control > div:first-child > label
			{
				padding-right : 1em;
			}
		
		
		div.layout div.form-control > div:last-child
		{
			line-height : 2em;
		}
		
		
	/**
	 Define un bloque de diseño a anchos de columnas personalizados (no funciona!!)
	 */
	div.layout div.columns_custom
	{
		width : 100%;
		float : left;
	}
		/**
		 Define el comportamiento de los div dentro de columns-3-1
		*/
		div.layout div.columns_custom > div
		{
			width   : auto;
			float   : left;
		}
		

	div.layout div.header
	{
		clear     : both;
	}
		
		div.layout div.header h1, div.layout div.header .title
		{
			font-size   : 153.9%;
			font-weight : bold;
			width       : 100%;
			margin      : 1em 0;
		}
		
	/** Para el encabezado de un documento del sistema. */
	/** Muestra en una linea el titulo del documento y el folio, y en otra el nombre del cliente y el estatus del documento, formateados. */
	/** Ejemplo de uso.
		<div class="layout">
			<div class="doc-header">
				<h1>Solicitud de Contrato de Servicios</h1>
				<h2>Folio: 005690910</h2>
				<h3>Alfredo Trejo Nuñez</h3>
				<h4>Recibido</h4>
			</div>
		</div>
	*/
	div.layout div.doc-header
	{
		clear     : both;
	}
		
		/** Título del documento */
		div.layout div.doc-header h1
		{
			font-size   : 153.9%;
			font-weight : bold;
			width       : 80%;
			margin      : 10px 0px 0px 0px;
			float       : left;
			white-space : nowrap;
		}
		
		/** Este se puede utilizar para mostrar el folio en el header de un documento. */
		div.layout div.doc-header h1 + h2
		{
			font-size   : 153.9%;
			font-weight : bold;
			width       : 20%;
			margin      : 10px 0px 0px 0px;
			text-align  : left;
			color       : #CC0000;
			float       : right;
			white-space : nowrap;
		}

		/** Este se puede utilizar para mostrar el nombre del cliente en el header de un documento. */
		div.layout div.doc-header h3
		{
			font-size   : 153.9%;
			font-weight : bold;
			width       : 80%;
			margin      : 0px 0px 10px 0px;
			color       : #007CBE;
			float       : left;
			white-space : nowrap;
		}

		/** Este se puede utilizar para mostrar el estatus en el header de un documento. */
		div.layout div.doc-header h3 + h4
		{
			font-size   : 133.9%;
			font-weight : bold;
			width       : 20%;
			margin      : 0px 0px 10px 0px;
			text-align  : left;
			float       : right;
			white-space : nowrap;
		}

	div.layout div.body
	{
		clear     : both;
	}

		div.layout div.body h2, div.layout div.body .section
		{
			padding          : 3px;
			padding-left     : 10px;
			background-color : #D9D9D1;
			border-bottom    : solid 2px #2c8215; /*#007CBE;*/
			display          : block;
			margin-top       : 15px;
			margin-bottom    : 5px;
			font-weight      : bold;
			letter-spacing   : 0.15em;
		}
		
		div.layout div.body h3 
		{
			padding          : 3px;
			padding-left     : 10px;
			display          : block;
			margin-top       : 5px;
			margin-bottom    : 5px;
			font-weight      : bold;
			border-bottom    : 3px solid #DEDAD5;
			/*background-color : #F0ECE7;*/
			letter-spacing   : 0.15em;
		}
		
		div.layout div.body .form-section
		{
			padding-bottom : 15px;
		}
		
		div.layout div.body .number
		{
			font-family : Monospace;
			font-weight : bold;
		}
		
	
	div.layout div.footer
	{
		font-size : 85%;
		clear     : both;
	}

		div.layout .footer dl > *
		{
			font-size : 83%;
		}

		div.layout .footer dl > dd
		{
			padding-left : 10px;
		}
	
		/**
		Define el ancho de los label del panel de filtros de generic list
		*/
		div.layout div.gl-filters div.label-container
		{
			width     : 30%;
			max-width : 30%;
			float     : left;
		}
		
		/**
		Define el ancho de los filtros que no son range input del panel de filtros de generic list
		*/
		div.layout div.gl-filters div.filter-container
		{
			width  :70%;
			position: relative; 
			top: -3px;
		}
		
		/**
		Define el ancho de los filtros que son range input del panel de filtros de generic list
		*/
		div.layout div.gl-filters div.rangefilter-container
		{
			width  :auto;
			position: relative; 
			top: -3px;
			float: left;
		}

.color1
{
	color : white;
}

.color2
{
	color : #007CBE;
}

.color3
{
	color : #004C8E;
}

.background1
{
	background-color : white;
}

.background2
{
	background-color : #007CBE;
}

.background2
{
	background-color : #004C8E;
}

.background3
{
	background-color : #C0C0C0
}

hr.inset
{
	border : inset 1px white;
}

hr.dotted-line
{
	background-image    : url('imgs/point.gif');
	background-position : center center;
	background-repeat   : repeat-x;
	border              : none;
	height              : 0px;
	padding             : 0px;
}

div.separator
{
	background-image : url('imgs/1x1.gif');
	border           : none;
	height           : 1px;
}

/**
Clase base para tablas
uso <table class="base"></table>
automaticamente definira los estilos de los header, hover a los tr, las celdas
*/
table.base
{
	border-spacing : 0px;
	width          : 100%;
}
	/** Cambia el comportamiento de los input en las tablas */
	table.base input, table.base select
	{
		margin:0;
	}
	
	/** Define el comportamiento de los tr inpares */
	table.base > tbody > tr.odd
	{
		background-color : #D9D9D1;
	}
	
	/** Define el comportamiento de los tr inpares */
	table.base > tbody > tr.detail
	{
		background-color : white;
	}
	
	/** Rows en hover */
	table.base > tbody > tr.odd:hover * , table.base > tbody > tr.pair:hover *
	{
		background-color : #FFFFDE;
	}
	
	/** Headers en hover */
	table.base > tbody > tr:hover > th, table.base > tbody > tr:hover > td > table > tbody > tr > th
	{
		background-color : #2c8215; /*#007CBE;*/
	}
	
	
	table.base > tbody > tr.selected, table.base > tbody > tr.selected:hover
	{
		background-color : #FFE6D5;
	}
	
	/** Celdas */
	table.base > tbody > tr > th, table.base > tr > th, table.base > tr > td, table.base > tbody > tr > td , table.base > tr.pair > td , table.base > tr.odd > td
	{
		margin        : 0;
		border        : 0;
		padding-left  : 2px;
		padding-right : 2px;
		height        : 21px;
		min-height    : 21px;
	}
	
	/** Headers */
	table.base > tbody > tr > th, table.base > tr > th, table.base > tbody > tr > th:hover, table.base > tr > th:hover
	{
		font-weight      : bold;
		background-color : #2c8215; /*#007CBE;*/
		color            : #FFFFFF;
		text-align       : left;
		padding-left     : 0.5em;
		padding-right    : 0.5em;
	}
	
	table.base > tbody > tr > th:first-child
	{
		-moz-border-radius-topleft : 3px;
	}

	table.base > tbody> tr > th:last-child
	{
		-moz-border-radius-topright : 3px;
	}

	form.register
	{
	    width:800px;
	    margin: 10px auto 0px auto;
	    height:740px;
	    background-color:#fff;
	    padding:0px;
	    -moz-border-radius:20px;
	    -webkit-border-radius:20px;
	}