/*	Sitio: Semana de la FCA
 *	Autor: Dirección de la FCA
 *	Programador: ITI. Jesús Eduardo Salinas Guel
 *	Actualización: 11 de Octubre de 2015 
 *	Versión: 2.0
 *
 *	Se emplean los colores institucionales
 *	Azul		#1A3256
 *	Amarillo	#FBB900
 *	Dorado		#BEA665
 *	Gris		#878786
 *	Negro		#000000
 * */

/*	--------------------------------------------------
 * 	TIPOGRAFÍA DEL SITIO WEB
 * 	LATO
 * 	https://www.google.com/fonts/specimen/Lato
 *	https://www.google.com/fonts/specimen/Lato
 * 	Solo se utilizará el formato Light 300, Normal 400 y Bold 700
 *	--------------------------------------------------
 * */

@CHARSER "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);

/*	--------------------------------------------------
 *	ICONOS
 *	ELEGANT FONT
 *	http://www.UI.com/packs/elegant-font
 *	
 *	Iconos para representar los elementos del menú
 *	--------------------------------------------------
 * */

@font-face {
	font-family:	"UI";
	src:			url("Icon/UI.eot");
	src:			url("Icon/UI.eot#iefix") format("embedded-opentype"),
		 			url("Icon/UI.woff") format("woff"),
		 			url("Icon/UI.ttf") format("truetype"),
		 			url("Icon/UI.svg") format("svg");
	font-weight:	normal;
	font-style:		normal;
}

[class^="UI-"]:before, [class*=" UI-"]:before,
[class^="UI-"]:after, [class*=" UI-"]:after {   
	font-family:	UI;
	font-size:		10px;
	font-style:		normal;
	margin-right:	10px;
}

.UI-add18:before {
	content: "\e000";
}
.UI-arrow39:before {
	content: "\e001";
}
.UI-calendar5:before {
	content: "\e002";
}
.UI-check-mark2:before {
	content: "\e003";
}
.UI-clock171:before {
	content: "\e004";
}
.UI-close5:before {
	content: "\e005";
}
.UI-container12:before {
	content: "\e006";
}
.UI-credit-card27:before {
	content: "\e007";
}
.UI-document221:before {
	content: "\e008";
}
.UI-download8:before {
	content: "\e009";
}
.UI-email122:before {
	content: "\e00a";
}
.UI-exclamation-mark:before {
	content: "\e00b";
}
.UI-gear38:before {
	content: "\e00c";
}
.UI-house3:before {
	content: "\e00d";
}
.UI-info:before {
	content: "\e00e";
}
.UI-key3:before {
	content: "\e00f";
}
.UI-leftarrow1:before {
	content: "\e010";
}
.UI-lightbulb1:before {
	content: "\e011";
}
.UI-multimedia-option:before {
	content: "\e012";
}
.UI-pin71:before {
	content: "\e013";
}
.UI-question2:before {
	content: "\e014";
}
.UI-quotation-mark2:before {
	content: "\e015";
}
.UI-quote7:before {
	content: "\e016";
}
.UI-speechbubble1:before {
	content: "\e017";
}
.UI-speechbubble6:before {
	content: "\e018";
}
.UI-star204:before {
	content: "\e019";
}
.UI-tag10:before {
	content: "\e01a";
}
.UI-triangle38:before {
	content: "\e01b";
}
.UI-upload5:before {
	content: "\e01c";
}
.UI-user197:before {
	content: "\e01d";
}
.UI-users32:before {
	content: "\e01e";
}
.UI-youtube1:before {
	content: "\e01f";
}

/*	--------------------------------------------------
 * 	PARAMETROS GENERALES
 * 	Establecer en 0 los margenes y el relleno.
 * 	Establecer una tipografía para el sitio y un tamaño por defecto de 12 puntos y el formato (font-weight) Normal 400.
 * 	Establecer una separación entre parrafos de 12 puntos.
 *	Establecer un tamaño del sitio minimo de 920px.
 *	--------------------------------------------------
 * */

* {
	margin:		0;
	padding:	0;
}

body {
	font-family:		'Lato', sans-serif;
	font-size:			12pt;
	font-weight:		300;
	min-width:			920px;
	background-color:	#FFF;
	color:				#000;
}

p {
	margin-bottom: 12pt;
}

h1 {
	font-variant:	small-caps;
}

h2 {
	color:			#878786;
	font-variant:	small-caps;
}

a {
	text-decoration:	none;
	color:				#000;
}

/*	--------------------------------------------------
 * 	CONTAINER
 *	Contenedor del sitio con un ancho minimo de 800px
 *	Dentro del contenedor se tiene el Encabezado, Menú, Contenido y el Pie de página
 *	--------------------------------------------------
 * */

#Container {
	margin:				0 auto;
	width:				100%;
	height:				100%;
	background-color:	#FFF;
}

/*	--------------------------------------------------
 * 	HEADER
 *	Encabezado del sitio
 *	Dentro del encabezado se tiene un apartado para el logotipode 450x100px
 *	--------------------------------------------------
 * */

#Header {
	background-color:	#1A3256;
	width:				100%;
	min-height:			100px;
	color:				#FFF;
}

#Header_Logo {
	width:	90%;
	margin:	0 auto;
}

#Header_Logo img {
	vertical-align: middle;
}

/*	--------------------------------------------------
 * 	MENU
 *	Menú del sitio
 *	En el se agregarán los botones para navegar por el sitio web
 * 	Se tendrá una altura minima de 50px para el espacio del botón
 * 
 *	Para Usuario Público
 * 	Inicio - Calendario
 *	Para Usuario FCA
 *	Inicio - Calendario - Boletos
 *	Para Usuarios Staff
 *	Inicio - Calendario - Boletos - Validar Boleto
 *	Para Usuario Administrador
 *	Inicio - Calendario - Boletos - validar Boleto - Administración
 *	--------------------------------------------------
 * */

#Menu {
	background-color:	#FBB900;
	width:				100%;
	min-height:			50px;
	color:				#1A3256;
	font-size:			10pt;
	font-weight:		400;
	text-align:			center;
}

#Menu_Content {
	width:		90%;
	min-height:	50px;
	margin:		0 auto;
}

#Menu ul {
	list-style:	none;
	overflow:	hidden;
	float:		left;
	width:		100%;
}

#Menu li {
	display:	inline;
}

#Menu a {
	float:				left; 
	padding:			17px 10px;
	color:				#1A3256;
	text-decoration:	none;
}

#Menu a:hover {
	color:				#FFF;
	background-color:	#1A3256;
}

/*	--------------------------------------------------
 * 	CONTENT
 *	Contenedor de mensajes y redes sociales
 *	Espacio para agregar el banner de la Semana de la FCA y una zona para redes sociales 
 *	--------------------------------------------------
 * */

#Content {
	background-color:	#FFF;
	width:				100%;
	margin-top:			20px;
	color:				#000;
	font-weight:		300;
}

#Content_All {
	width:	90%;
	margin:	0 auto;
}

#Content_Body {
	width:	69%;
	float:	left;
}

#Content_Social {
	width:	30%;
	float:	right;
}

/*	--------------------------------------------------
 * 	FOOTER
 *	Contenedor de pie de página 
 *	--------------------------------------------------
 * */

#Footer {
	clear:				both;
	width:				100%;
	padding-top:		5px;
	color:				#878786;
	font-weight:		200;
}

#Footer_Content {
	width:		90%;
	margin:		30px auto 0 auto;
	padding: 	20px 0 10px 0;
	border-top:	1px solid #CCC;
	font-size:	8pt;
}

#Footer_Content a {
	text-decoration:	none;
	color:				#878786;
}

/*	--------------------------------------------------
 *	SubMenu
 *	Todos las páginas que requieran de un sub menú tendrán la siguiente configuración
 *	--------------------------------------------------
 * */

.SubMenu {
	background-color:	#FFF;
	width:				100%;
	color:				#1A3256;
	font-size:			10pt;
	font-weight:		400;
	text-align:			center;
	list-style:			none;
	overflow:			hidden;
	float:				left;
	padding-bottom:		20px;
}

.SubMenu li {
	display:	inline;
}

.SubMenu a {
	float:				left; 
	padding:			10px 10px;
	color:				#1A3256;
	text-decoration:	none;
}

.SubMenu a:hover {
	color:				#878786;
}

/*	--------------------------------------------------
 *	MENU ADMINISTRACION
 *	Sólo la página de administración contendra este menu
 *	--------------------------------------------------
 * */

.MenuAdministracion {
	background-color:	#FFF;
	width:				100%;
	color:				#1A3256;
	font-size:			12pt;
	font-weight:		400;
	list-style:			none;
	overflow:			hidden;
}

.MenuAdministracion li {
	padding:	10px;
}

.MenuAdministracion a { 
	padding:			10px 10px;
	color:				#1A3256;
	text-decoration:	none;
}

.MenuAdministracion a:hover {
	color:				#878786;
}

/*	--------------------------------------------------
 *	TABLAS
 *	Configuración para todas las tablas del sitio
 *	--------------------------------------------------
 * */

table {
	border-collapse:	collapse;
}

tr:hover {
	background-color:	#878786;
	color:				#FFFFFF;
}

td {
	padding: 10px;
}

/*	--------------------------------------------------
 *	FORMULARIO
 *	Configuración para todas los formularios del sitio
 *	--------------------------------------------------
 * */

.Formulario_Linea {
	min-height: 40px;
}

.Formulario_Linea label {
	text-align:	right;
	float:		left;
	width:		150px;
	padding:	5px;
}

.Formulario_Linea input[type="text"] {
	text-align:	left;
	float:		left;
	width:		255px;
	height:		20px;
	padding:	2px;
}

.Formulario_Linea input[type="number"] {
	padding:	2px;
}

.Formulario_Linea textarea {
	width:		255px;
	height:		150px;
	padding:	5px;
}

.Requerido {
	color:		#FF0000;
	padding:	0 5px;
}

/*	--------------------------------------------------
 *	LOGIN
 *	Configuración solo para la página de Inicio de sesión
 *	--------------------------------------------------
 * */

.Login input {
	width:		200px;
	padding:	5px;
	margin:		5px;
}

/*	--------------------------------------------------
 *	NOTIFICACIONES
 *	Correcto - Mensaje cunado se realiza una acción de manera satisfactoria
 *	Error - Mensaje cuando se produce un error
 *	Aviso - Mensaje cuando se requiere resolver un problema
 *	--------------------------------------------------*/

.Notificacion {
	width:		90%;
	padding:	10px;
	color:		#424239;
	text-align:	left;
	font-size:	12pt;
}

.Correcto{
	background-color:	#BFF1BC;
}

.Aviso {
	background-color:	#FCF0B0;
}

.Error {
	background-color:	#FF7070;
}

.Nota {
	background-color:	lightgoldenrodyellow;
}