Clic 2009
 ----------------------------------------------------------------------------
 File: layout.css
 Gerardo Gonzalez Flores
gerardo AT clic DOT com DOT mx <--
 ---------------------------------------------------------------------------
 CSS Layout styles for the web site.
 Layout CSS para el sitio.
 --------------------------------------------------------------------------*/
/* Layout
 -------------------------------------------------------------------*/
html { } /* es correcto? */
body {
    background:#67C2CA url(../img/page-background-2010.png) repeat-x;
}

#wrapper {
 width:774px;
 margin: 0px auto;
 background: url(../img/bg-wrapper.png) repeat-y left top;
 position:relative;
 
}

#wrapperTop{ 
   width:774px;
   height:38px;
	 margin: 0px auto;
	background: url(../img/barra-misioneros-top.png) no-repeat left top;
	 position:relative;
	 margin-top:10px;

}

#header{ 
    position:relative;
    width:770px;
    height:267px;
    left:2px;
	

}
 
 #logotipo {
    background: url(../img/logo-jovenes-sin-fronteras-misioneros-de-san-carlos-scalabrinianos.png) no-repeat;
    width:189px;
    height:205px;
    margin:0px;
    padding:0px;
    position:absolute;
    top:42px;
    
 }
 #logotipo span { display:none; }
 #logotipo a { display:block; width:189px; height:205px;}

 #banner { 
   width:581px; 
   height:204px;
   top:43px;
   left:189px;
   /*background: url(../img/banner.jpg) no-repeat;*/
   position:absolute;
} 

#banderas {
   width:770px; 
   padding-top:1px;
   height:20px;
   top:247px;
   left:0px;
   /*background: url(../img/banderas.jpg) no-repeat;*/
   position:absolute;
}

/*** CONTENIDO ***/
#contenido.home {
    width:760px;
    padding:0px;
    margin:0px;
	padding-bottom:10px;
}

#contenido #contenidoPrin {
    width:765px;
    min-height: 275px;
    height: auto !important;
    height: 275px;
	margin-left:4px;
	padding-bottom:10px;
	margin-top:5px;
	background: url(../img/separador-horizontal.png) repeat-x bottom;
}

#contenidoSec{
    width:770px;
}

#areaCentral {
    float:left;
    width:536px;
    background: url(../img/separador-vertical.png) repeat-y right;
    min-height:430px;
    height:auto !important;
    height:430px;
	padding-top:10px;
    
}

.menu {
    width:226px;
    margin:0px auto;
}

#menuLateralDer {
    float:right;
    width:230px;
	padding-top:10px;
}
 

/** Frase dia **/
 #fraseDia{
    background:#D2E7E8;
    padding:5px;
    width:486px;
    margin:0px auto;
	padding:10px 16px;
    
 }
 
 .contFrase {
 	width:90%;
	margin:0px auto;
	padding:3px 0px;
 }
 
 #autorFrase {
 	text-align:right;
	font-size:8pt;
	font-style:italic;
 }
 
 /** Temas **/

div.temas {
    width:500px;
    margin:0px auto;
    min-height:30px;
    height: auto !important;
    height: 30px;
    padding-bottom:10px;
	padding-top:10px;
    border-bottom: 2px solid #cccccc;
    position:relative;
}
 



h2#titleMundoMisioneroMigrante {
    background: url(../img/titulos/c-mundo-misionero-migrante.png) no-repeat top left;
}

h2#titleTemas {
    background: url(../img/titulos/c-temas.png) no-repeat top left;
}

h2#titleMundoJoven {
    background: url(../img/titulos/c-mundo-joven.png) no-repeat top left;
}

h2#titleFraseDia{
    background: url(../img/titulos/c-frase-de-la-semana.png) no-repeat top left;
}

#body .title {
    width:auto;
    min-height:15px;
	height:auto !important;
	height:15px;
	
}
.title span {
    display:none;
}

.contenidos #areaCentral {
	margin-left:2px; 
	padding-left:10px;
	width:524px;
}
 
/** ligas **/ 
 
  a.verMas,
  a.verArticulo,
  a.verLiga,
  a.verGaleria,
  a.descargaSubsidio,
  a.descargaMaterial, 
  a.seeArticle,
  a.verNoticia
  {
    display:block;
	height:24px;
	margin-left:auto;
    margin-right:0px;
	clear:both;
 }
  
  
  a.verMas span,
  a.verArticulo span,
  a.verLiga span,
  a.verGaleria span,
  a.descargaSubsidio span,
  a.descargaMaterial span,
  a.seeArticle span,
  a.verNoticia span
  {
    display:none;
 }
 
 a.verMas{
    width:70px;
    background: url(../img/ver-mas.png) no-repeat 0px 0px;
    
 }
 
 a.verMas:hover{
    background: url(../img/ver-mas.png) no-repeat 0px -24px;
 }
 
 
  a.verArticulo{
    width:85px;
    background: url(../img/ver-articulo.png) no-repeat 0px 0px;
    
 }
 
 a.verArticulo:hover{
    background: url(../img/ver-articulo.png) no-repeat 0px -24px;
 }
 
 
  a.seeArticle{
    width:85px;
    background: url(../img/see-article.png) no-repeat 0px 0px;
    
 }
 
 a.seeArticle:hover{
    background: url(../img/see-article.png) no-repeat 0px -24px;
 }
 
 
 a.verLiga{
    width:66px;
    background: url(../img/ver-liga.png) no-repeat 0px 0px;
    
 }
 
 a.verLiga:hover{
    background: url(../img/ver-liga.png) no-repeat 0px -24px;
 }
 
 
 a.verGaleria{
    width:81px;
    background: url(../img/ver-galeria.png) no-repeat 0px 0px;
    
 }
 
 a.verGaleria:hover{
    background: url(../img/ver-galeria.png) no-repeat 0px -24px;
 }
 
 
 a.descargaSubsidio, a.descargaMaterial {
    width:68px;
    background: url(../img/descargar.png) no-repeat 0px 0px;
    
 }
 
 a.descargaSubsidio:hover, a.descargaMaterial:hover{
    background: url(../img/descargar.png) no-repeat 0px -24px;
 }
 
 
  a.verNoticia {
    width:81px;
    background: url(../img/ver-noticia.png) no-repeat 0px 0px;
    
 }
 
 a.verNoticia :hover{
    background: url(../img/ver-noticia.png) no-repeat 0px -24px;
 }
 /** Recuadros top **/



.temaPrin {
	width:253px;
	background: url(../img/recuadro-bg.png) repeat-y;
	float:left;
	margin-left:1px;
	
}

.temaPrin .title {
	width:253px;
	;
}

.temaPrin .temaCont {
   background: url(../img/recuadro-top.png) no-repeat top;
   padding-top:12px;
   min-height:250px;
   height: auto !important;
   height:250px;
   padding:12px 8px 10px 8px;
}

.temaPrin .vMas {
	min-height:4px;
    height: auto !important;
    height:4px;
	background: url(../img/recuadro-bottom.png) bottom no-repeat;
	position:relative;
	padding:8px;
}



.temaPrin h2#titleNoticias{
    background: #ffffff url(../img/titulos/c-noticias.png)  no-repeat;
}

.temaPrin h2#titleEditorial{
    background:  #ffffff url(../img/titulos/c-editorial.png) no-repeat;
}
 
.temaPrin h2#titleTuPagina{
    background:  #ffffff url(../img/titulos/c-tu-pagina.png) no-repeat;
}
 
 
 /** meu lateral **/
h2#masInfSeccion {
    background: url(../img/titulos/ml-mas-informacion-por-seccion.png) no-repeat;
    width:226px;
    height:33px;
} 

h2#masInfSeccion span,
h2#tuEspacio span{display:none;}
 
 
h2#tuEspacio {
    background: url(../img/titulos/ml-tu-espacio.png) no-repeat;
    width:226px;
    height:33px;
} 


 
 /** Footer **/
#footer {
    background: url(../img/footer-bg.png);
    width:770px;
    min-height:78px;
    min-height: auto !important;
    height:78px;
    margin-left:2px;
    color:#FFFFFF;
    text-align:center;
	
}

#footer * {
	 color:#FFFFFF;
	 font-size:8pt;
}  
/** MENU **/
 
ul#menu {
    background: url(../img/jovenes-sin-fronteras-barra.png) bottom left no-repeat;
    height:42px;
    margin:0px;
    padding:0px;
    width:  770px;
    margin:0px auto;
    position:relative;
} 


ul#menu, ul#menu li {
    padding: 0px;
    margin: 0px
}

ul#menu li {
    list-style: none;
    background: none;
}

#menu li#quienesSomos, #menu li#jbScalabrini, #menu li#misioneros,
#menu li#nuestraPresencia, #menu li#voluntariado, #menu li#ubicacion
{
    position: absolute;
    top:3px;
}

#menu a {
    display: block;
    height: 39px;
    width:auto;
}

#menu a span {
    display: none;
}

#menu li#quienesSomos {
    left: 185px;
    width: 118px;
}

#menu li#jbScalabrini {
    left: 303px;
    width: 117px;
    
}

#menu li#misioneros {
    left: 420px;
    width: 117px;
}

#menu li#nuestraPresencia {
    left: 537px;
    width: 117px;
}

#menu li#voluntariado {
    left: 654px;
    width: 117px;
}



#menu li#quienesSomos a {
    background: url(../img/menu/quienes-somos.png) 0px 0px  no-repeat;
}

#menu li#quienesSomos a:hover {
    background: url(../img/menu/quienes-somos.png) 0px -39px  no-repeat;
}

#menu li#jbScalabrini a {
    background: url(../img/menu/jb-scalabrini.png) 0px 0px  no-repeat;
}

#menu li#jbScalabrini a:hover {
    background: url(../img/menu/jb-scalabrini.png) 0px -39px  no-repeat;
}

#menu li#misioneros a {
   background: url(../img/menu/misioneros.png) 0px 0px  no-repeat;
}

#menu li#misioneros a:hover {
   background: url(../img/menu/misioneros.png) 0px -39px  no-repeat;
}


#menu li#nuestraPresencia a {
   background: url(../img/menu/nuestra-presencia.png) 0px 0px  no-repeat;
}

#menu li#nuestraPresencia a:hover {
   background: url(../img/menu/nuestra-presencia.png) 0px -39px  no-repeat;
}

#menu li#voluntariado a {
   background: url(../img/menu/voluntariado.png) 0px 0px  no-repeat;
}

#menu li#voluntariado a:hover {
   background: url(../img/menu/voluntariado.png) 0px -39px  no-repeat;
}

/* quicklinks */
ul#quickLinks, ul#quickLinks li {
    padding: 0px;
    margin: 0px
}

#quickLinks li {
    list-style: none;
    background: none;
}

#quickLinks li.home, #quickLinks li.contact, #quickLinks li.siteMap {
    position: absolute;
}

#quickLinks a {
    display: block;
    width: 25px;
    height: 22px;
}

#quickLinks a span {
    display: none;
}

#quickLinks li.home {
    left: 0px;
    top: 0px;
}

#quickLinks li.contact {
    left: 45px;
    top: 0px;
}

#quickLinks li.siteMap {
    left: 90px;
    top: 0px;
}

#quickLinks li.home a {
    background: url(../img/home-over.gif) 0px -22px  no-repeat;
}

#quickLinks li.home a:hover {
    background: url(../img/home-over.gif) 0px 0px #000000 no-repeat;
}

#quickLinks li.contact a {
    height: 23px;
    background: url(../img/contacto-over.gif)   0px -22px no-repeat;
}

#quickLinks li.contact a:hover {
    background: url(../img/contacto-over.gif) 0px 0px #000000 no-repeat;
}

#quickLinks li.siteMap a {
    height: 23px;
    background: url(../img/mapa-sitio-over.gif)  0px -22px no-repeat;
}

#quickLinks li.siteMap a:hover {
    background: url(../img/mapa-sitio-over.gif) 0px 0px #000000 no-repeat;
}
/* =quicklinks */

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

table.tblDetalles{
	background:#e2e2e2;
	padding:5px;
}

 
table.tblDetalles *{
    font-size:8pt;
}

.liga {
	color:#000099;
}


h1.tituloI {
	font-size:11pt;
	padding:5px;
	padding-left:0px;
}

strong.jovenes { display:block; padding-top:10px; padding-bottom:5px;}



/*** estilos 2006 **/

.separador{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding-top:5px;
}

/* imagenes listado */
.verListado{
    text-align:right;
    padding-top:5px;
}

/* elementos en la pagina de index */
.itemIndexRight{
 padding-right:5px;
}

.itemIndexLeft{
 padding-left:5px;
}

/* Barra de titulos interiores */

.titLineaAzul{
    background-image: url(../imgs/barra_tit_int_top_bg.jpg);
    background-repeat: repeat-x;
    background-position: right bottom; 

}

/* Posicionamiento de las imagenes del art�culo de la p�gina principal*/
.posImagen {
    float:right;
    padding-left:5px;
    padding-bottom:5px;
}

#contArt span{
    vertical-align:sub;
} 

.bordeFoto{
    border: 1px solid #000033;
}
.borde{
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
}
.bordeSis{
    border: 1px solid #000000;
}


.cursiva{
    font-style: italic;
}
.subrayado{
    text-decoration:underline;
}
.negrita {
    font-weight: bold;
}
.centrado{
    text-align: center; 
}
.derecha{
    text-align: right;
}
.izquierda{
    text-align:left;
}
.justificado{
    text-align:justify;
}
.titComent{
    background:#CCCCCC;
}

/** Contactanos **/
div#footer div.contactanos *
 {
	color:#000066;
}

div#footer div.contactanos {
	padding-bottom:5px;
}

#calendarioActividades  span , #revistaJSF span{ display:none;}
#calendarioActividades a, #revistaJSF a { display:block; width:228px;
 height:75px;}

#calendarioActividades {
 background: url(../img/calendario-actividades.png) ;
 width:228px;
 height:75px;

}

#revistaJSF {
 background: url(../img/revista-jsf.png) ;
 width:228px;
 height:75px;

}