/*Defino los estilos de la siguiente manera: un nombre que yo elijo y luego entre llave ({}),
todos los parámetros que quiera para ese estilo.

Los estilos que no tienen un punto antes del nombre, se refieren siempre a nombres de etiquetas
de HTML (ejemplo: body, a:link, input, th) y no necesito usar el parámetro "class" en el formulario
para decir cuál estilo estoy aplicando. Ya que al llevar el nombre de una etiqueta de HTML, cuando
encuentre esa etiqueta en el código de la página, le aplicará automáticamente el estilo que tenga 
el mismo nombre.

Los estilos que tienen un punto (.) adelante del nombre, se refieren a estilos personalizados, es
decir, no corresponden a ningún nombre de etiquetas de HTML.
Estos estilos son los que debemos poner en el parámetro "class" del elemento al que le queramos
aplicar el estilo, ya que el navegador no sabrá, de otra manera, cuál es el estilo que queremos aplicar.*/

body {

/*Para el estilo "body" hemos definido sólo los márgenes de la página, ya que como en todos los códigos
llamamos a la hoja de estilos, a todos los "body" les aplicaría el mismo estilo.
Lo que estoy diciendo acá es que todos los márgenes de la página serán de "0" pixeles.
Otra forma de poner esto sería: 
margin: 0px;
Ya que margin sólo asume todos los márgenes.*/

	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.Estilo1{

 /*"Estilo1": es un estilo personalizado que usaremos para los textos comunes que tendremos en nuestro
 sistema. Al llevar el punto, debemos llamarlo en el parámetro "class" de algún elemento (celda de una
 tabla, elemento de formulario, etc.).*/
 
 /*"font-family": es la familia de fuentes. Se recomienda usar fuentes que se sepan existan en la mayoría
 de las máquinas, ya que estas fuentes se buscan en la máquina local donde se está ejecutando el sistema y
 no en hosting. Es decir, si en la máquina donde estoy ejecutando el sistema no tiene la Verdana, voy a ver
 el sistema diferente a si lo ejecuto en la máquina de al lado que sí tiene la Verdana.
 Se suelen poner varias fuentes separadas por comas. Esto significa que si no encuentra la primera (en este
 caso la Verdana) instalada en la máquina, buscará la segunda (Arial) y así sucesivamente hasta que encuentre
 alguna de las de la lista. Si no encuentra ninguna, mostrará el texto en la fuente predeterminada del navegador
 en esa máquina.*/
 
  font-family:Verdana, Arial, Helvetica, sans-serif;
	
	/*"font-size": es el tamaño de la fuente. Se miden en pixeles. Lo idea es usar un tamaño entre 10 y 12 pixeles
	para los textos comunes.*/
	
  font-size:11px;
	
	/*"font-style": es el estilo del tipo de fuente. Permite uno de los siguientes valores: normal (la letra normal);
	italic (italica) y oblique (oblícua). Los estilos italic y oblique son similares.*/
	
  font-style:normal;
	
	/*"color": es el color de la fuente. Se pone el símbolo # (numeral) seguido de un número hexadecimal como valor 
	para cualquier color.
	Para ver los colores en hexadecimal (si usan el editor "HTMLKit", en la solapa "TOOLS", hacer click sobre el ícono
	que tiene los tres circulitos de colores. Esto abrirá una ventana con los distintos colores, si seleccionamos uno
	nos pega en la hoja de código directamente el valor hexadecimal.
	En este ejemplo el color es un gris.*/
	
  color:#818181;
}

.Estilo2{

/*"Estilo2": es otro estilo personalizado, muy parecido al "Estilo1", sólo que le decimos que la fuente
se mostrará en negrita. Este tipo de estilo lo usaremos para los títulos de las tablas, etc.*/

  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
	
/*"font-weight": establece el grosor de cada letra. Los valores son alguno de los siguientes: normal 
(normal), bold (negrita).*/

  font-weight: bold;
	color:#818181;
}
  
.Estilo3{

/*"Estilo3": este estilo lo vamos a usar para los títulos de las páginas. Es igual al "Estilo2", sólo 
que cambia el color de la letra a un azul marino (#336699).*/

	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#336699;
	font-weight: bold;
}

a:link {

/*El estilo "a", es el que usamos para los vínculos (etiquetas <a href....>). Si pusiera sólo "a", tomaría
el mismo estilo para todos los estados del vínculo. 
En este caso "a:link" significa el estado "link" del vínculo "a". Para eso sirven los dos puntos (:) que
están entre la "a" y "link". Para decir que lo que está después de los dos puntos (en este caso "link") es 
un parámetro o propiedad de lo que está delante de los dos puntos (en este caso "a").
En este caso los separé para que se den cuenta cuáles son los estados de un vínculo (similares a los de un botón):
"link":  es el estado de cuando se abre por primera vez la página, el vínculo todavía no ha sido visitado.*/

/*"text-decoration": es para ver el estilo del vínculo. Si no se pone el vínculo aparece subrayado por defecto.
Al ponerle el valor "none" le estoy diciendo que no lo subraye.*/

	text-decoration: none;
	color: #818181;
}

a:visited {

/*"visited": es cuando el vínculo ya ha sido visitado.*/

	text-decoration: none;
	color: #818181;
}

a:hover {

/*"hover": es cuando ponemos el cursor sobre el vínculo, pero no le hacemos click.*/

	text-decoration: none;
	color: #336699;
}

a:active {

/*"active": es cuando seleccionamos el vínculo con el cursor.*/

	text-decoration: none;
	color: #336699;
}

.cajas{

/*"cajas": es el estilo que le voy a aplicar a todos los elementos de formulario para que por ejemplo,
en las cajas de texto (input type="text"), me muestre este estilo en lo que escribo y no la fuente por
defecto.*/

  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
  font-style:normal;
  color:#818181;
}
		 
input {

/*"input": es un estilo que por no tener el punto delante, corresponde a una etiqueta de HTML.
Este estilo hará que todos los input tengan el mismo formato.*/

	color: #818181;
	
	/*"border-top": es el border superior del input (de la caja de texto). Le estoy diciendo que ese borde
	debe ser sólido (solid; podría haber puesto "dotted" y significa que hace un borde punteado), va a ser
	del grosor de 1px y va a tener el color #336699 (azul marino).
	Lo mismo le aplico a los otros bordes. Esto lo podría reducir a poner directamente una línea:
	
	border: solid 1px #336699;
	
	Asume que son los cuatro bordes.*/
	
	border-top: solid 1px #336699;
	border-left: solid 1px #336699;
	border-bottom: solid 1px #336699;
	border-right: solid 1px #336699;
	
	/*"background (o background-color)": es para definir el color de fondo, en este caso de los input.
	Le digo que el color de fondo será blanco.*/
	
	background: #ffffff;
	
	/*"background-attachment": es para saber cómo queda el fondo del elemento (generalmente se usa cuando
	el fondo es una imagen). Al poner "fixed" significa que el fondo quedará quieto y si tiene una imagen
	no se verá como mosaico.*/
	
  background-attachment: fixed;
}

th{

/*"th": es el estilo que le aplicaremos al encabezado de las tablas. Todas las tablas, aunque no los usemos, 
tienen un encabezado para poner, por ejemplo, el título de la tabla.
La idea de hacer esto es porque sólo se puede poner un "th" en cada tabla y de esta forma el estilo se 
aplicará al encabezado y no a todas las celdas (td) de las tablas que tengamos en la página.*/

	background-color: #eeeeee;
	
	/*"height": es para ponerle una altura fija a la celda.*/
	
	height: 25px;
	
	/*establezco todos los márgenes.*/
	
	margin: -5em;
	
	/*"padding": es la distancia desde el borde hacia los lados de la celda que no se va a poder usar
	para mostrar texto o imagen dentro de la celda.*/
	
	padding: 5px;
	
	/*"text-align": es la alineación de lo que ponga dentro de la celda. Los valores pueden ser:
	center: centrado
	left: izquierda
	rigth: derecha*/
	
	text-align: center;
	
	/*"border-bottom-color": es para determinar el color del borde inferior (lo mismo para los otros bordes:
	left: izquierdo, right: derecho, top: superior*/
	
	border-bottom-color: #336699;
	border-left-color: #336699;
	border-right-color: #336699;
	border-top-color: #336699;	
}