﻿/* Hecho por Mario Rodriguez Cardenas. www.negociosinteligentes.org generico@negociosinteligentes.org */
/* Todos los Derechos Reservados (c) y (R). Mexico, 2018 */
/* CSS para Aztec-Tech */

* {	/*   Hard Reset	(creo que este se aplica incluso DESPUÉS de todas las definiciones posteriores)   */
/*
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFF5D0;
*/
}

/* Aquí se pueden definir todos los DEFAULTS para reiniciar los valores ANTES de definirlos */



/**********************************************************************************************************************/
/* Se peden pblueefinir valores para títulos, párrafos, listas, tables, etc.*/

h1, h2, h3, h4 {/* Títulos principales */
	color:maroon;	/* navy*/
}

/**********************************************************************************************************************/
html body { /* Base estandar de todo el archivo*/
	margin: 0; padding: 0; border: 0;
	background-color:#110000; /* Color de fondo alrededor del area a utilizar  #400000 Rojo obscuro*/
}

/**********************************************************************************************************************/
.flotarizq{
	float:left;
}

.flotarder{
	float:right;
}

.flotarnada{
	clear:both;	/* Impide invadir el espacio del float de arriba. clear:both = Object is moved below any floating object. */
}

.fondoespecial{
	background-color:maroon;
}

.resaltado {	/* class resaltado */
	background-color:red;
	font-weight:bold;
	padding:10px 10px;		
}

.resaltadosimple {	/* class resaltado */
	font-weight:bold;
	font-style:italic;
}

.imagen1 img {/* Clase para IMÁGENES* sin alterar tamaño */
	padding:10px; margin:10px;
	border:thin black solid;
}

.centrarhorizontal {/* Centrar textos o imagenes en una serie cuando se ponen dentro de <p align="center"></p> */
 text-align: center; 
/*	width: 100%;
	margin:0 auto;	*/
}


/* Cambiar tamaño de imagenes a AJUST   NO SIRVE*/
/*
.imagenajust img{
	width:295px; height:221px;
	max-width:295px; max-height:221px;
}
*/

/* Estilo de los Hiperlinks pero definiendo una CLASE */	
.special-link a:link {color:silver;}
.special-link a:visited {color:silver;}
.special-link a:active {color:silver;}
.special-link a:hover {color:white; background-color:#D20000;}
.special-link a:focus {color:silver;}

/* Estilo de los Hiperlinks pero definiendo una CLASE */
.special-link2 a {text-decoration:none;}	
.special-link2 a:link {color:maroon;}
.special-link2 a:visited {color:maroon;}
.special-link2 a:active {color:maroon;}
.special-link2 a:hover {color:white; background-color:maroon;}
.special-link2 a:focus {color:maroon;}

/* Estilo de los Hiperlinks pero definiendo una CLASE */
.special-link3 a {text-decoration:none;}	
.special-link3 a:link {color:black;}
.special-link3 a:visited {color:black;}
.special-link3 a:active {color:black;}
.special-link3 a:hover {color:red; background-color:lime;}
.special-link3 a:focus {color:black;}


/**********************************************************************************************************************/
div {/* TODAS las divisiones */
	font-family:Arial, Helvetica, sans-serif;
}

/**********************************************************************************************************************/
#wrapper{/* TODO dentro del DIV principal, solo debajo de nivel BODY */
	width:900px;
	margin:0 auto;
	padding:0;
	background-color:white;	/* white */
	border:thin black solid;
}

/**********************************************************************************************************************/
#header {/* Cabecera completa */
	height:100px;

	background-image:url('../images/fondos/fondoaztecarq01.jpg');
	color:silver;/*white*/

	line-height:10%;
}
#header h2 {/* Títulos principales en Cabecera completa */
	color:white;
}


#logo-empresa {/* Cabecera.- Sección de Logotipo empresarial */
	float:left;
	margin:0px 10px 0px 0px;
	padding:0;
}

#titulo-empresa {/* Cabecera.- Sección de Texto nombre empresa*/
	with:40%;
	float:left;
	margin:15px 0px 0px 0px;
	padding:5px 10px;
	font-size:medium;
	font-weight:bolder;
}

#contact-info {/* Cabecera.- Sección de contacto */
	float:right; margin: 30px 5px 0px 0px;
	padding:5px 5px;
	font-size:medium;
	font-style: italic;	
}

#redes-sociales {/* Redes Sociales */
	float:right; margin: 30px 5px 0px 0px;
	padding:5px 5px;
	font-size:medium;
	font-style: italic;	
}



/**********************************************************************************************************************/
#menu {/* Área general del Menú de navegación */
	clear:both;	/* Impide invadir el espacio del float de arriba. clear:both = Object is moved below any floating object. */
	height:40px;
	line-height:40px;	/*Centra el contenido verticalmente, o el texto comenzaría centrado en pixel superior. RARO*/

	background-color:maroon;
	color: #DDAA70 ; /*#DDAA70 #70AADD */

	border-top:white solid medium;	/* #FFEEAA; */
	border-bottom:white solid medium;

	font-variant:small-caps;
	font-size:large;
	font-weight:bold;	
}

#menu ul {/* Lista entera que contiene los elementos del menú de navegación ul falta ol */
	width:110%;	/* Lo excedo un poco porque luego no cabe en el PREVIEW pero se ve bien en los browsers */
	overflow:hidden;
	margin:0; padding:0;/* margin:0px 0px 0px 20px; Mide 100% + 20px pero NO sale en el browser pero si lo detecta como sobre pasado */

	float:left;
}

#menu ul li {/* Elementos que forman el Menú de navegación ul*/
		display:inline;
		padding:40px 8px;
}

/* Estilo de los Hiperlinks para caa elemento de la lista del menú de navegación */	
#menu a {text-decoration:none; padding:10px 15px;}	/* El padding y el decoration del hiperlink es diferente por DIV */



/**********************************************************************************************************************/
#banner{/* Imagen de BANNER PRINCIPAL */
	clear:both;
}



/**********************************************************************************************************************/
#top-bar{/*Indica en qué sección estamos*/
	clear:both;
	font-style:italic;
	background-color:#FFEEAA;
	margin:0;
	padding:5px 10px;
	line-height:0px;
	border-bottom:thin navy solid;
}



/**********************************************************************************************************************/
#central-info {/* Área central de información */
	background-color:white;
	width:75%;
	float:left;
	margin:0px 5px;
	padding:5px;
	text-align:justify;
}

#central-info a {text-decoration:none;}

#central-info img {/* Área central de información IMÁGENES*/
	padding:10px; margin:5px;
	border:thin black solid;
}

#central-info h1 {/* Área central Texto y títulos*/
	margin:35px;	/* Revisar. sin margin a cero siempre hay espacio enorme, con esto es minimo FALLA 35px */
	padding:05px 0px 10px 0px;
	line-height:105%;
}

#central-info h2, h3 {/* Área central Texto y títulos*/
	margin:0;
	padding:20px 0px 10px 0px;
	line-height:120%;
}

#central-info p {/* Área central Texto y títulos*/
	margin:0;
	padding:0px 0px 5px 0px;
	line-height:120%;
}


/*   *   *   *   *   */
#central-extra{/* Área Central Inferior para noticias especiales  */
	/*ERROR por width o algo en contactos.	overflow:hidden;*/

	margin:0;
	padding:10px;
	border:thin navy solid;
	background-color:#FFEEAA;
}

#central-extra li{/* Área Central Inferior elementos de las listas  */
	padding-bottom:25px;
}

#central-extra p {/* Área Central Inferior elementos de las listas line-height:5px; */
	margin:0;
	padding:5px 0px;
	line-height:115%;
}



/**********************************************************************************************************************/
#product-section {/* Barra de Secciones rápidas */
	width:195px; /* width:200px; OK con margin-left:76.8%; */
	padding:0px;
	/*margin-left:76.8%;  Traté de cambiar por float:right; margin:0; 
	pero falla al subir Copyright aunque se arregla si Copyright clear:both; pero falla el fondo de color*/
	float:right; margin:0;

	background-color:maroon; /* #70AADD */
	color:white;


	font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	font-size:16px;
	text-align:center;

}

#product-header{/* Barra de productos.- Título */
	text-align:center;
	font-weight:bold;
	color:yellow;
	background-color:#FFEEAA;
	padding:1px;
}

#product-section ul {/* Barra de productos.- Lista de los productos */
	list-style:none;
	margin:0;
	padding:0;
}

#product-section ul li {/* Barra de productos.- Elementos en la lista de los productos */
	border:navy thin solid;/*ridge; se ve más fuerte pero separa demasiado*/
	margin:0;
	padding:0px 5px;
}

#product-section p {/* Barra de productos.- Párrafo de Texto */
	line-height:100%; 
}

#product-section img {/* Barra de productos.- Imágenes */
	width:180px; 	/* 150px Estandariza los tamaños de las portadas en la barra de productos, pero altera y deforma algo las imagenes */
	/* height:210px; */
}



/**********************************************************************************************************************/
#copyright {/* Sección sobre el creador de la página web */
	clear:both;	/* Impide invadir el espacio del float de arriba. clear:both = Object is moved below any floating object. */
	background-color:red;
	color:white;
	padding:1px;
	margin:0;
	
	font-size:xx-small;
	font-style:italic;
	text-align:center;

	line-height:2px;
}

/**********************************************************************************************************************/
