/*CSS para www.proveedorcientifico.com.mx
autor: webmaster
version: 1
fecha: 11.01.04
descr: colores institucionales.. navy + escala de grises.
*/

/******************************************************
 *****************************************************
	clases generales, todas las paginas
 *****************************************************
******************************************************/

body {	
	color:navy;
	scrollbar-3dlight-color : #ECECEC;
	scrollbar-arrow-color : #369;
	scrollbar-base-color : #39c;
	scrollbar-darkshadow-color : #ECECEC;
	scrollbar-face-color : #D1D1D1;
	scrollbar-highlight-color : #666;
	scrollbar-shadow-color : #006;
	scrollbar-track-color : #CFCFCF;

	background: 	#ccc
			url('/logos/pc_BackGround.jpg') 
	}

a{
	color:#009;
	font-weight : bold;
	background-color:transparent;
	text-decoration: underline;}

a:link { 
}a:visited{
	font-weight : normal;
}a:hover{
	text-decoration: underline overline;
	}

a:active{
	color:#06f;
	background-color:navy;
	text-decoration: underline overline;
	}

td{padding:4}

h1, h2, h3 { color: navy; background: transparent}
h1, h2, h3, h4, h5, h6 {font-family: "Arial Narrow", arial, times, sans-serif}
h1			{ text-align:center }
    h2, h3, h4, h5, h6  { text-align:left }
h1 { font: bold 170% }
h2 { font: italic 170% }
h3 { font: bold 140%; }
h4 { font: bold 100% }
h5 { font: italic 100% }
h6 { font: small-caps 100% }

th, strong {text-weight:bold}
em { font-style:italic}

dt{ 
	text-transform : uppercase;
	text-decoration: underline;
	text-align: left;	
}dd{ 
/*	font-weight: normal;*/
	color : #999;
	text-align : justify;	}

/******************************************************
	estas clases sirven para todas las paginas
 *****************************************************
SPAN.PC_name --> esta pensada para definir las caracteristicas de "Proveedor Cientifico" siempre 	que aparezcan como parte de un texto... mas grande, azul, bold y quizas con algun font
DIV.nota_actualizacion --> para informacion de fecha y autor 	de pagina
justificado,centrado,a_la_izq/der --> alineacion de texto justificado, centrado...
div.NARRACION --> se refiere a textos gramaticales (Valores, Mision,...) distinguido de tablas,listas,...
div.aviso --> es fondo amarillo palido y texto marron... son avisos/alertas/anuncios importantes
bg_#color --> hace el fondo del elemento de un color (permite ajustar tonalidad)
indentado --> agrega margenes alrededor del elemento

p.separador_alfabeto --> en los archivos enormes por orden alfabético, estas son las letras que 	separan los <div id=secc_X>

 *****************************************************
******************************************************/

span.pc_name{
	font-weight : bold;
	font-size:120%;
	color:navy;
	/*font-family : "HandelGothic BT";*/
}

div.nota_actualizacion{
	text-align:left;
	font-style : italic;
	font-size:75%;}

div.narracion, p.narracion {
	text-align:justify;
	font-family: "Arial Narrow", arial, times, sans-serif;
	margin: 2em;
	background-color:#ccf;
	border:2px solid white;
	padding:1.5em;}

div.aviso{
	margin:40px;
	border-color:#996;
	border-width:3px;
	border-style:dotted;
	background-color:#cc9;
	color: #963;
	font-family:courier,monospace; }

p.separador_alfabeto{
	font-weight:bold; 
	color:cyan; 
	background-color:navy; 
	padding:.5ex}
}.indentado, div.aviso p {margin:2em;}

.justificado	{ text-align: justify }
.a_la_derecha	{ text-align: right }
.centrado 	{ text-align: center }
.a_la_izquierda	{ text-align: left }
.deletreado	{ letter-spacing: 1ex }

.bg_blanco { background-color: #fff    }

/******************************************************
	estas clases dan servicio a eg.: /res/pc_banner.shtml
 *****************************************************

DIV.header_banner --> es el encabezado de la pagina.. logo y leyenda de proveedor
P.header_banner_logo --> contiene el logo y posiblemente el nombre de proveedor 
	(idealmente el font del logo y el logo del DIV deberian coincidir)
IMG.banner_logo --> propiamente el logo
P.header_banner_leyenda --> es la frase de "escuelas,hospitales..."

span.bienvenida_nombre --> es el encabezado (interior) de marca 	(logo y nombre)
span.bienvenida_visita  --> container del contenido sobre marca
span.bienvenida_botones --> fotos de aparatos
td.cell_bienvenida --> la celda (r2,c3) la tabla que guarda banner, aqui esta div.bienv.
span.bienvenida_nombre  --> el renglon donde dice "Bienvenido carlos"
span.bienvenida_visita  --> el renglon que dice "nos visitaste ayer"
input.bienvenida_botones --> botones para cambiar de usuario

span.exclamacion --> texto a resaltar dentro de un parrafo (grande/rojo/bold/italic?)
 *****************************************************
******************************************************/

.exclamacion { 
	font-size:120%;
	color:f00;	}

div#header_banner{ 
	background-color:navy;
	color:white;
	text-align:left;
 }

h1.header_banner_logo{
	font-family:"HandelGothic BT","Times New Roman";
	text-align:center;	
	color:gold;
	font-size:200%;
}

img.banner_logo{ border:0px;	}

h2.header_banner_leyenda{
	color:white;
	margin-left:20ex;
	padding-right:1ex;
	border-top:gold dotted 1px;
	text-align:right;
	/*width:60ex;*/
}

span.bienvenida_nombre { font-weight:bold; }

span.bienvenida_visita { }

input.bienvenida_botones{
	color: navy;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, Geneva;
	background-color: silver;
	padding: 3px; 
	/* border: 1px solid #465056;*/
	border-style: solid;
	border-color: #ccc #465056 #465056 #ccc /*top right bottom left*/
	 width:140;
}

td.cell_bienvenida{background-color:#ccf}

div.bienvenida{	}

/******************************************************
	estas clases dan servicio a eg.: /res/pc_banner.shtml
 *****************************************************
table#menu --> es la tabla que guarda al ticker y al menu
td.menu --> generico para los botones del menu
a.menu_opcion --> links del menu

table#menu td.izquierda
table#menu td.centro	--> corrigen margenes del menu segun posicion
table#menu td.derecha 

div#menu_navegacion_div --> es el div donde esta la tabla
td.ticker --> opciones del ticker
 *****************************************************
******************************************************/

table#menu{
	width:100%;
	border-style:solid;
	border-width:0px;
	border-color:magenta
}td.menu{
	background-color:navy;
	font-weight:bold;
	color:white;
	text-align:center;
	border-top-style:solid;
	border-top-width:0px;
	border-top-color:navy;
	border-bottom-style:solid;
	border-bottom-width:0px;
	border-bottom-color:yellow;
}a.menu_opcion:visited,
a.menu_opcion:link,
a.menu_opcion:active,
a.menu_opcion:hover {
	background-color:transparent;
	font-weight:bold;
	color:#fff;
}table#menu td.centro, 
table#menu td.izquierda,
table#menu td.derecha
{	border-right-style: solid;
	border-right-width: 1px;
	border-right-color:silver;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color:silver;
}table#menu td.centro{  	}
table#menu td.izquierda{	border-left-width: 0px;	}
table#menu td.derecha{	border-right-width: 0px;	}

td.ticker{
	color:navy;
	background-color:white;
	border-style:solid; 
	border-color:navy;
	border-width:0px;
	border-bottom-width:3px;
}div#menu_navegacion_div{
	background-color:gold;
	width:100%;
	text-align:center;
	border-style:solid; 
	border-color:navy}

/******************************************************
	estas clases dan servicio a eg.: /res/pc_addr.shtml
 *****************************************************

DIV.direccion --> informacion de contacto de proveedor para el footer
P.direccion_electr --> correo electronico
P.direccion_titulo --> nombre de proveedor
P.direccion_postal --> cafetales... mexico df
P.direccion_telefonos --> telefono y fax
 *****************************************************
******************************************************/

div.direccion{
	text-align:center;
	background:url('/logos/bg-procimex_dark.gif')
		  fixed no-repeat bottom left;
}p.direccion_electr{
	font-family:"courier new","Times New Roman";
	font-size:150%;
	text-decoration:none;
}p.direccion_titulo{
	color:navy;
	font-family:"HandelGothic BT","Times New Roman";
	font-size:150%;
	font-weight : bold;
	text-decoration: underline;
}p.direccion_postal, 
p.direccion_telefonos{
	font-family:arial;
	font-size:90%;
}/****************************************************
	estas clases dan servicio a eg.: /marcas/x_marca.shtml & /marcas.shtml
 *****************************************************

img.logo_marca --> logos en el catalogo

DIV.titulo_marca --> es el encabezado (interior) de marca 	(logo y nombre)
DIV.cuerpo_marca --> container del contenido sobre marca
TABLE.prod_marca --> fotos y descripcion
TD.prod_marca_desc --> texto descriptivo
TD.prod_marca_foto --> imagenes reducidas

IMG.prod_marca_foto_micro --> fotos de aparatos
SPAN.prod_marca_desc_tit --> producto generico, eg: 
	Vaso de Precipitado ;; papel pH+
UL.prod_marca_desc_vars --> variedades del producto: 
	100ml, 200ml... ;; 4-8grados, 1-14grados,...

ul.prod_marca_desc_vars li --> ListItems of UL.Prod_marca..
 *****************************************************
******************************************************/

table.tabla_marcas img.logo_marca {border:0}

div.cuerpo_marca{ text-align:center; }

table.prod_marca{ background:silver;filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#999999); 	}

td.prod_marca_desc  {
	font-family:arial;
	background:white;
	vertical-align:center;}

td.prod_marca_foto  {
	font-family:arial;
	vertical-align:center;
	text-align:center;
}div.titulo_marca{
	text-align:center;
	/*background:silver;*/
	color:navy;
	text-transform: uppercase}

span.prod_marca_desc_tit{
	font-family : arial;
	font-weight : bold;}

ul.prod_marca_desc_vars{font-size : 80%;}

ul.prod_marca_desc_vars li {
	color : SlateGray ;
	line-height: 1.1
}/*
IMG.prod_marca_foto_micro
*/

/****************************************************
	estas clases dan servicio a eg.:  home & index	(e.g. con el reloj )
 *****************************************************

div.fachada --> es donde se encuentra la foto y la rosa en la portada
.clocktext --> define las caracteristicas de los relojes (countdown, y clock)
form.reloj --> caracteristicas generales de los relojes
 *****************************************************
******************************************************/

div.fachada {text-align:center;}

.clocktext  { 	color: #666;
		font-size: 28px;
		font-family: Verdana, Arial, Helvetica, Geneva;
		background-color: #EEE;
/*		padding: 3px 3px 3px 3px;*/
		border: 1px solid #465056;
}form.reloj{
	text-align:center;
	vertical-align:center;
}/****************************************************
	estas clases dan servicio a lineas.shtml
 *****************************************************

ul.lineas_variedades son las sublistas de 2o nivel ie. acido -> SULFURICO -> 1 galon
li.linea_prod   a  --> es el primer nivel ie. ACEITE -> para bombas ->
li.linea_prod_var  --> son hijos de ul.lineas_variedades ie. aceite -> PARA BOMBAS -> ...
li.linea_marca  a  --> es el ultimo nivel, a pag. de marcas aceite->para bombas->FELISA
 *****************************************************
******************************************************/

ul.lineas_variedades {
	color:white;
	font-weight:bold;

	/*display:none; */

/*por alguna extraña razon, si se pone "none" desde css (inline <style> o <link>) JScript lo toma originalmente como "" ... como si mantuviera su valor default !! !! */

} 

/****************************************************
	estas clases dan servicio a personal.shtml
 *****************************************************

tabla_bolsa --> es donde se ponen los puestos y sus funciones
td.tabla_bolsa_puesto --> enuncia el puesto
td.tabla_bolsa_puesto_desc --> enuncia las funciones del puesto
 *****************************************************
******************************************************/

#tabla_bolsa {	}

td.tabla_bolsa_puesto{
	background-color:#fff;
	font-weight:bold}

td.tabla_bolsa_puesto_desc{
	background-color:#9090ff
	}

/****************************************************
	estas clases dan servicio a mision.shtml & mision_LG.shtml
 *****************************************************
span.mision_subtitulo --> para "tiempo y vida"
 *****************************************************
******************************************************/

h1 span.mision_subtitulo{
	letter-spacing:1ex;
	word-spacing: 2ex;
	color:#900}

/****************************************************
	estas clases dan servicio a rosa.shtml
 *****************************************************
table.rosa --> es la tabla con los botones de navegacion, puede estar insertada en otra
td.hold_rosa --> en footer.shtml lleva la rosa...
 *****************************************************
******************************************************/

table.rosa {background-color:#999}

td.hold_rosa{	}

/******************************************************
		para la busqueda en google
 *****************************************************
Nota: input se refiere tanto al boton, como al texto, como al switch
 *****************************************************
******************************************************/

div.google_search{background-color:silver}

div.google_search a:hover, a:active {background-color:silver}

div.google_search input{
	color: navy;
	border-style: solid;
	border-color: #ccc #465056 #465056 #ccc /*top right bottom left*/
}/* .... FIN  codigo veridico Proveedorcientifico.com.mx ... */
/* ............................................ */
/* ...... EMPIEZAN  Pruebas ......... */

p.literario { 
	text-indent: 1em;
	color: red; 
	font-size: 12pt }

p.literario:first-letter { color: green; font-size: 200% }
p.literario:first-line { color: blue }

/*<!--  <font face="HandelGothic BT">PROVEEDOR CIENTIFICO S/A</font></p>  -->*/