/*
Template para Joomla
Versión: 1.0
Creado por: Killyam Fernando Montero Cubides
Fecha: 20 de Octubre de 2007
Organización: Killyam Creative Inc. Ltda 2007
Basado en explicación de: Leandro D´Onofrio
*/

/* *********************************************
     INDICE
************************************************

Estilos Globales
	- Cuerpo - Línea -
	- Imagen - Línea -
	- vínculos - Línea -
	- Viñetas - Línea -
	- Viñetas de enlace en reposo - Línea -
	- Viñeta de enlace rollon - Línea -
Formateo de la cabecera
	- Cabecera - Línea - 67
Diseño y Formateo de la Plantilla
	- Marco Principal - Línea -
	- Cabecera - Línea - 89
	- Columna Izquuierda - Línea -
	- Columna de Contenido - Línea -
	- Columna Derecha - Línea - 
	- Pie de Página - Línea - 
Estilo de los artículos de contenido - Línea - 
Estilo de los módulos - Línea - 


*/


/* *********************************************
Estilos globales:
************************************************

Ahora nos queda agregar un par de reglas para elementos globales como body, img, li, a, etc. Es muy importante las reglas que establezcamos en la hoja de estilos en cascada con respecto al body del documento. Esto es debido a que el editor WYSIWYG de Joomla! tomará estas reglas para mostrarnos el contenido a medida que lo vamos agregando. Por eso, recomiendo que las reglas de body tan solo sean sobre el tipo de fuente, color, y color del background. */
* {
padding: 0;
margin: 0;
}
body{
background-repeat:repeat-x;
background-image:url(../images/fondo.jpg);
background-color: #E9E9E9;
}
/* Si por ejemplo especificamos más reglas (alineación del texto, imagen de fondo, etc) cuando estemos  usando el editor WYSIWYG será muy dificultoso crear los artículos. En caso de que necesitemos agregar más información del estilo, tan solo creamos un div contenedor del body y ahí si ponemos las reglas que queramos.*/
img {
padding: 4px 18px 4px 8px;
}
a{
text-decoration:none;
color:#006699;
}
.a{
width: 211px;
padding:5px;
vertical-align:top;
}
.b{
width: 591px;
padding:5px;
vertical-align:top;
}

.post {
	padding: 1em 0em 1em 2em;
	border-top: 1px solid #C9DEAB;
	overflow:hidden;
margin-right:2em;
width:580px;
}

.postcontainer {
padding:0;
margin:0;
margin-right:1.5em;
overflow:hidden;
}

.c{
padding:5px;
vertical-align:top;
}
.d{
width: 500px;
padding:5px;
vertical-align:middle;
}
.e{
padding:5px;
vertical-align:middle;
}

/* ******************************************
Formateo de la cabecera
*********************************************

Y formateamos el título de la plantilla que está en el header 
#header h1{ 
}*/
 
 
 
 
/* *****************************************
Diseño y Formateo de la plantilla 
***************************************** */
#wrapper {
 margin: auto;
 width: 802px;
 margin-top: 0px;
} 
#header {
 width: 802px;
 background-image:url(../images/cabecera.jpg);
 background-repeat:no-repeat;
 /*float: left;  Código que permite continuar en la línea */
 height:109px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding: 0px;
 font-size:10px;
}
#leftcolumn {
 margin: 0px 0px 0px 0px; /* Código que permite ajustar top,left,bottom,rigth */
 padding: 0px 0px 0px 0px;
 width: 802px;
 height: 216px;
}
#content {
 float:left; /* Código que permite continuar en la línea */
 margin: 0px;
 padding: 0px; /* Código que permite espacio interno de top,left,bottom,rigth */
 width: 470px;
 display: inline;
 background-color:#ffffff;
}
#uno {
 margin: 0px 5px 5px 0px; /* Código que permite ajustar top,left,bottom,rigth */
 padding: 10px;  /* Código que permite espacio interno de top,left,bottom,rigth */
 width: 802px;
 float: left; /* Código que permite continuar en la línea */
 background-repeat:no-repeat;
 text-align:left;
}
#footer {
 width: 802px;
 clear: both; /* Código que permite saltar la línea */
 padding-top: 10px; /* Código que permite espacio interno de top,left,bottom,rigth */
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:9px;
 color:#999999;
 text-align:center;
}
.contact_email{
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:9px;
 color:#999999;
}
td.pietabla{
	background-image:url(../images/pietabla.jpg);
	background-repeat:no-repeat;
	width: 802px;
	height: 23px;
}
td.cuerpotabla{
    background-image:url(../images/tf.jpg);
	background-color:#E9E9E9;
	width: 802px;
	vertical-align:text-top;
	margin:auto;
}
table.tablatres{
	width: 802px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.componentheading{
font:14px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:normal;
color:#000099;
text-align:left;
}
.component{
font-family:Verdana, arial;
font-size:11px;
color: #4F4F4F;
padding:5px;
}



/* ********************************************
Estilos de los artículos de contenido
***********************************************

.contentheading:  Podemos controlar el estilo de los títulos de los artículos. */
/* Además le hemos agregado que, cuando el mouse pase sobre el titulo, este cambie de color. */
.contentheading {
font:14px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:normal;
color:#000099;
text-align:left;
}
.contentheading a{
color:#000099;
}
.contentheading a:hover{
color:#0066FF;
} 
/* .contentpaneopen:  Podemos controlar el contenido mostrado en cada artículo. */
/* En el ejemplo especificamos un color, padding y alineación del texto. Además especificamos como se deben mostrar las listas. Vean que se le agregó una imagen llamada ' lista.gif ' la cual está guardada en la carpeta ' images ' dentro del template. */
.contentpaneopen{
font-family:Verdana, arial;
font-size:11px;
color: #4F4F4F;
padding:5px;
}
.contentpane{
font-family:Verdana, arial;
font-size:11px;
color: #4F4F4F;
padding:5px;
}
.contentpaneopen li{
margin-left: 20px;
padding: 0px 0px 10px 0px;
list-style-image: url(../images/vineta.jpg);
}
/* .createdate / .modifydate: Controlamos la fecha de creación / modificación del artículo. */
.createdate, .modifydate{ 
font-size: 0.8em;
color: #5F5F5F;
}
/* .readon:  Controlamos la manera de mostrar el link ' Leer más... ' */
.readon, .readon:hover{
color: #497858;
text-decoration:underline;
}
/* .pagenav_next / .pagenav_prev / .back_button: Son las clases que controlan los links ' Siguiente ' , ' Anterior ' y ' Volver ' */
td.buttonheading{
padding:3px;
height:15px;
}



/* ******************************************************
Estilos referentes a los módulos.
*********************************************************

Conté en la primera parte, que nosotros podemos especificar el estilo en que se mostraran los módulos: tablas, divs, en bruto. El asunto es que cada estilo posee clases diferentes. Por ejemplo si nosotros cargamos un módulo en divs [ mosLoadModules (left, -2) ] la clase contenedora será ' moduletable '. En cambio si cargamos un modulo con extra divs[ mosLoadModules (left, -3) ] la clase será ' module '. Lo mismo sucede si cargamos el modulo en tablas. Yo en este caso solamente me voy a abocar a nombrar las clases si cargamos los modulos en divs (-2) simplemente porque así se cargaron en el ejemplo del primer tutorial. En todo caso, si cambian el estilo de carga tengan en cuenta lo que dije. */
.moduletable{ /* Cada modulo será cargado en un div diferente. Cada uno de estos divs tendrán la clase ' moduletable ' */
margin-bottom:0px;/* En el ejemplo hicimos que cada modulo cargado esté separado unos 20px */
}
.moduletable h3 { /* Es el título de cada módulo. */
font:Verdana, Arial, Helvetica, sans-serif;
margin-bottom:10px;
font-size:16px;
font-weight:bolder;
color:#CC3300;
border-bottom: 1px solid #006699;
margin-bottom:10px;
}
.moduletable .mainlevel{ /* .moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo menú. */
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:500;
float:left; /* Código que permite continuar en la línea */
}
.mainlevel-topmenu{ 
text-decoration:none;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size:10px;
padding-right: 10px;
margin-left: 7px;
}
.bajar{
margin-top: 67px;
}
.moduletable_leftmenu{
background-image:url(../images/casilla.jpg);
background-repeat:no-repeat;
background-color:#E9E9E9;
margin-left:0px;
padding-left:10px;
width: 390px;
height:100px;
}
.mainlevel-leftmenu{
width:225px;
background-image:url(../images/vineta.jpg);
background-repeat:no-repeat;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:500;
float:left; /* Código que permite continuar en la línea */
margin-bottom:3px;
height:15px;
}
.sublevel{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-top: 3px;
padding-left:5px;
display:block;
}
a:hover.sublevel-leftmenu{
font-size: 10px;
color:#0066FF;
}
.moduletable_leftmenu h3{
width: 225px;
font:Verdana, Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size: 16px;
color:#CC3300;
border-bottom: 1px solid #006699;
margin-bottom:10px;
}
.moduletable_rightmenu{
background-image:url(../images/casilla2.jpg);
background-repeat:no-repeat;
background-color:#E9E9E9;
margin-left:5px;
padding-left:10px;
width: 390px;
height:100px;
}
.mainlevel-rightmenu{
width:190px;
background-image:url(../images/vineta.jpg);
background-repeat:no-repeat;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:500;
float:left; /* Código que permite continuar en la línea */
margin-bottom:3px;
height:15px;
}
.moduletable_rightmenu h3{
width: 190px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bolder;
color: #CC3300;
border-bottom: 1px solid #006699;
margin-bottom:10px;
}
	  /*     * .moduletable .latestnews: Es la clase específica del modulo ' Últimas noticias '. Los títulos son cargados en una lista.
    		 * .moduletable .mostread: Es la clase específica del modulo ' Popular '.Los títulos son cargados en una lista.
    		 * .moduletable .search: Es la clase específica del modulo ' Buscador '.*/
.moduletable .search input{
border:0px;
font:Arial, Helvetica, sans-serif;
background-color:#ffffff;
color:#666;
padding:2px 0px 2px 5px;
width:100px;
margin-top: 0px;
}
.moduletable .search input:hover{
border:0px;
} /* De esta forma especificamos el color, borde, fuente y padding de la caja de introducción de texto. Además al pasar el mouse sobre él cambia el color de fondo. 
Podemos especificar una clase tanto para el módulo como para los elementos del menú en sí (esta ultima opción es solo para módulos del tipo menú). En el primer caso al modulo que contiene ' Menú principal ' se le agrego el sufijo ' _menu ' por lo cual la clase final será ' moduletable_menu '. Noten que el sufijo ' _menu ' se acopló a la clase ' moduletable ' nombrada más arriba. En el segundo caso se añadió el sufijo ' -nav ' a los elementos del ' Menú superior '. De esta manera la clase resultante para cada elemento será ' mainlevel-nav ' */
#mod_login_username {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:100px;
}
#mod_login_password {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
width:100px;
}