/*--------------------------------------------------------------------------
 Clic 2010
 ----------------------------------------------------------------------------
 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
 -------------------------------------------------------------------*/
body {
  background: #182236;
}
#wrapperBody {
	 
	 background:  url(../img/site-bg.png) repeat-x;
	/*padding-top:18px;*/
}
#wrapper {
    width: 990px;
    position: relative;
    margin: 0px auto;
	 
   /* background: #000000;*/
  
}

#wrapperFoot {
     position: relative;
   	 margin: 0px auto;
	 margin-top:0px;
	 clear:both;
     background: url(../img/wrapper-bottom-bg.png) #333333 top left repeat-x;
	 min-height: 254px;
	 height: auto !important;
	 height: 254px;
}

#header {
    width: 990px;
    /*height: 273px;*/
   height: 413px;
    position: relative;    
}

#body, #bodyGallery {
    background: #fff;
    width: 990px;
	padding-bottom:10px;
	position: relative;
	/*top: 122px;*/
	 min-height: 520px;
	 height: auto !important;
	 height: 520px;
	
}
.topLogin#body {
	top: 139px;
}

body.gallery { background:#000000;}
#bodyGallery { width: 440px;   margin-top:0px;color:#ffffff;}






/* =Layout343
 -------------------------------------------------------------------*/
/* Header
 -------------------------------------------------------------------*/
#siteTitle {
    background: url(../img/siteTitle.png) no-repeat left top;
    width: 254px;
    height: 128px;
    position: absolute;
    left: 360px;
   /* top: -15px;*/
	z-index: 999999;
}

#siteTitle span {display:none;}
#siteTitle a {
	display:block; 
	width: 200px;
    height: 202px;
	top:20px;
	left:44px;	
	position:absolute;
}
#siteDescription {
	width: 410px;
	height: 20px;
	background: url(../img/site-description.png) no-repeat;
	position: absolute;
	top: 133px;
	left: 270px;
}

#siteDescription span {display:none;}
#imgMask {
	width: 990px;
	height: 255px;
	background: url(../img/carrusel/helpers/img-mask.png) no-repeat;
	position: absolute;
	top: 158px;	
	z-index: 99;
}

#menuArea {
    width: 946px;
    height: 10px;
    background: url(../img/menu-bg.png) no-repeat top;
	top: 71px;
	position: absolute;	
}
#lang { 
 position:absolute;
 font-size:7pt;
 color:#ffffff;
 right:10px;
 top:283px;
}
#lang *{ 
 color:#ffffff;
  font-size:7pt;
  text-decoration:none;
}
#lang a {
	display:block;
	padding:3px;
 border:1px solid;
 background:#C01616;
 border-top:1px #E93838 solid;
  border-left:1px #E93838 solid;
 border-bottom:1px #880F0F solid;
 border-right:1px #880F0F solid;
}
#lang a:hover{
 background:#155BA1;
 border-top:1px #880F0F solid;
 border-left:1px #880F0F solid;
 border-bottom:1px #E93838 solid;
 border-right:1px #E93838 solid;
}
#bannerArea {
    position: absolute;
    left: 285px;
    top: 2px;
    width: 701px;
    height: 242px;
    background: url(../img/banner-hc.png) no-repeat top;
}
#pico {
    position: absolute;
    left: 282px;
    top: 2px;
    width: 56px;
    height: 242px;
    background: url(../img/banner-pico.png) no-repeat top;
	z-index:9999;
}
/* delete */
#bannerBody {
  
    position: absolute;
	top: 158px;	
	
}
/* =delete */
#quickLinks {
    position: absolute;
    height: 30px;
    width: 102px;
    top: 129px;
    right: 25px;
	z-index: 9999;
}
ul#quickLinks, ul#quickLinks li {
    padding: 0px;
    margin: 0px
}

#bannerArea h2, #bannerArea span.atnRep {
    display: none;
}
#quickLinks li {
    list-style: none;
    background: none;
}

#quickLinks li.home, #quickLinks li.contact, #quickLinks li.siteMap {
    position: absolute;
}
#quickLinks a {
    display: block;
    width: 34px;
    height: 27px;
}
#quickLinks a span {
    display: none;
}

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

#quickLinks li.contact {
    left: 43px;
    top: 1px;
}

#quickLinks li.siteMap {
    left: 79px;
    top: 1px;
}

#quickLinks li.home a {
    background: url(../img/home.gif) 50% 50% no-repeat;
    background-color: none;
}

#quickLinks li.home a:hover {
    background: url(../img/home-hover.gif) 50% 50%  no-repeat;
}

#quickLinks li.contact a {
    height: 27px;
    background: url(../img/contacto.gif) 50% 50% no-repeat;
    background-color: none;
}

#quickLinks li.contact a:hover {
    background: url(../img/contacto-hover.gif) 50% 50%  no-repeat;
}

#quickLinks li.siteMap a {
    height: 27px;
    background: url(../img/mapa-sitio.gif) 50% 50% no-repeat;
    background-color: none;
}

#quickLinks li.siteMap a:hover {
    background: url(../img/mapa-sitio-hover.gif) 50% 50% no-repeat;
}
/* =Header
 ------------------------------------------------------------------*/
/* Body
 ------------------------------------------------------------------*/

#contenido, .contenido {
   
	margin:0px auto;
    padding-bottom: 10px;
    text-align: justify;
    min-height: 400px;
    height: auto !important;
    height: 400px;
    /* border: 1px solid #ff0000;*/
    position: relative;
	z-index:80;
	

	
}

/** AREA HOME **/

.inicio #barraLateral{
    width:230px;
    float:left;
	margin:20px 0px 0px 10px;
}

.inicio #areaCentral{
	width:740px;
	min-height: 400px;
    height: auto !important;
    height: 400px;
	float:left;

}

body.inicio #contenido,
body.inicio .contenido {
	float:left;
	margin-left:20px;
	margin-top:10px;
	width:710px;
}


body #contenido, body .contenido{
	position:relative; 
}

#fraile{
	background: url(../img/fraile-lateral.gif) no-repeat;
	width:229px;
	height:148px;
}

/* Le ponemos el fondo a la paginacion */
#paginacion {
    margin-top: 0px;
    padding-bottom: 5px;
    background: url(../img/content_bg.jpg) repeat-y top;
}
/* =Body
 ------------------------------------------------------------------*/
/* Footer
 ------------------------------------------------------------------*/
/* URL de pie de página de CLIC*/
#clicFoot {
    text-align: right;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 8pt;
   
	color: #666666;
	position:relative;
	width:984px;
	margin:0px auto;
}

#clicFoot * {
	color: #ffffff;
    font-size: 8pt;
}



/* =Footer
 -------------------------------------------------------------------*/


/*** CALENDARIO DE ACTIVIDADES **/

#idCalendar {
	width:220px;
	/*background: url(../img/sidebars/body.jpg) repeat-y;*/
	margin:0px;
	padding:0px;
	margin-bottom: 20px;
	left: 10px;
	position: relative;
}
#idCalendar ul{
	margin:0px;
	padding:0px;
	background-color: #333;
	margin-left: -1px;
	width: 221px
}

#idCalendar h2.sideTitle{
	width:220px;
	height:46px;
	background: url(../img/sidebars/calendario-top.png) no-repeat;
	margin:0px;
	padding:0px;
	width: 234px;
	left:-8px;
	position: relative;
}

#idCalendar h2.sideTitle span {
	display:none;
}

#idCalendar li { 
	position:relative;
	padding:0px;
	margin:0px;
	list-style:none;
	background:none;
	width:206px;
	padding:10px 4px;
	/*border-top:1px dashed #000000;*/
	margin:0px auto;
	background: url(../img/sidebars/calendar-divisor.png) bottom no-repeat;
}


#idCalendar li.lastItem { 
	/*border-bottom:1px dashed #000000;*/

}

#idCalendar li.firstItem { 
	border-top:none;
	/*border-bottom:1px dashed #000000;*/
}

#idCalendar li.onlyItem { 
	border-top:none;
	/*border-bottom:1px dashed #000000;*/

}

#idCalendar div.lastItem{
	/*background: url(../img/sidebars/bottom.jpg) #333 bottom no-repeat;*/
	margin:0px;
	padding-top:10px;
	padding-bottom:15px;
	text-align:center;
	font-weight:bold;
	position:relative;
	z-index:95;
	width:221px;
	margin-left: -1px;
	background-color: #333;
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

#idCalendar div.lastItem a{
	font-weight:bold;
	font-size:7pt;
	color: white;
	position: relative;
	top: 7px;
}
#idCalendar div.lastItem a:hover{
	text-decoration: underline;
	/*color: #00CCFF;*/
}
#idCalendar li h2 a   {
	color:#fff;
}
#idCalendar li h2 a:hover   {
	text-decoration: underline;
}
#idCalendar li.even h2  {
	padding:2px;
	padding-top:0px;
	width:160px;
	float:right;
}
  
 #idCalendar li div.fecha  {
	width:35px;
	font-size:14pt;
	font-weight:bold;
	text-align:center;
	color:#00CCFF;
	text-transform:uppercase;
	font: arial;
}
#idCalendar li.even div.fecha  {
	width:35px;
	float:left;
	text-transform:uppercase;
}

#idCalendar li.odd h2  {
	width:160px;
	padding-top:0px;
	padding:2px;
	float:right;
}


#idCalendar li.odd div.fecha  {
	width:35px;
	float:left;
	font-size:12pt;
	font-weight:bold;
	text-align:center;
	color:#00CCFF;
	text-transform:uppercase;
}
 
/**** ligas de interes **/

/*** CALENDARIO DE ACTIVIDADES **/

#ligasInteres{
	width:220px;
	/*background: url(../img/sidebars/body.jpg) repeat-y;*/
	margin:0px;
	padding:0px;
	position: relative;
	left: 10px;
}

#ligasInteres ul{
	margin:0px;
	padding:0px;
	background-color: #333;
}

#ligasInteres h2.sideTitle{
	width:220px;
	height:46px;
	background: url(../img/sidebars/sitios-de-interes.png) no-repeat;
	margin:0px;
	padding:0px;
	width: 234px;
	left:-8px;
	position: relative;
}

#ligasInteres h2.sideTitle span {
	display:none;
}

#ligasInteres li { 
	position:relative;
	padding:0px;
	margin:0px;
	list-style:none;
	background:none;
	width:206px;
	padding:10px 4px;
	/*border-top:1px dashed #000000;*/
	margin:0px auto;
	background: url(../img/sidebars/calendar-divisor.png) bottom no-repeat;
}

#ligasInteres li.lastItem { 
	/*border-bottom:1px dashed #000000;*/
	border-bottom:none;

	

}
#ligasInteres li.firstItem { 
	border-top:none;

}
#ligasInteres div.lastItem{
	/*background: url(../img/sidebars/bottom.jpg) bottom no-repeat;*/
	background-color: #333;
	margin:0px;
	padding-top:10px;
	padding-bottom:15px;
	text-align:center;
	font-weight:bold;
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}
#ligasInteres li h2 a   {
	color: white;
}
#ligasInteres li h2 a:hover  {
	text-decoration: underline;
}
#ligasInteres li h2  {
	padding:2px;
	padding-top:0px;
	width:150px;
	float:right;
}
#ligasInteres li div.loguito  {
	width:48px;
	float:left;
	text-align:center;
}
.message {
    padding: 10px;
    margin-top: 10px;
	margin-bottom: 10px;
    background: #FFDEDE;
    width: 338px;
    text-align: center;
    border: 1px solid #FF7F7F;
	color:#000000;
}
#flashMessage {
    background: #FFDEDE;
    border: 1px solid #FF7F7F;
    /*height:20px;*/
    padding: 3px;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
/* Mapa de ubicacion */
table#mapaUbicacion td {
    vertical-align: middle;
}

table#mapaUbicacion td.imagen {
    vertical-align: top;
    text-align: center;
    padding-left: 20px;
}

b.mapaUbicacion {
    font-size: 8pt;
    font-weight: normal
}




/****** MENU AREA ****/
ul.menu, ul.menu li{
    margin:0px;
    padding:0px;  
	z-index:9999;
} 

ul.menu {
  height:42px;
  position:relative;
  background:none;
  position:absolute; 
}

 /*ul.menu li a span {display:none}*/
 ul.menu li a h1  { margin:0px; padding:0px;}

 ul.menu li {
    background-image:none;
    list-style-image:none;
    height: 42px;
    display:block;
    /*position:relative; /** protofish **/
    z-index:96896;
	top: 0px;
 }
    
 ul.menu a { display:block; height:42px;}

 ul.menu li#mnHistoria {position:absolute; left:0px;  width:160px; }
 ul.menu li#mnInicio {position:absolute; left:0px;  width:160px; }
 ul.menu li#mnQuienes-somos  {position:absolute; left:160px; width:202px;}
 ul.menu li#mnEnsenanza {position:absolute; left:600px; width:173px;}
 ul.menu li#mnContacto {position:absolute; left:758px;  width:213px;}
 
 ul.home li#mnHistoria {position:absolute; left:0px; width:136px; }
 ul.home li#mnQuienes-somos  {position:absolute; left:160px; width:202px;}
 ul.home li#mnEnsenanza {position:absolute; left:600px; width:173px;}
 ul.home li#mnContacto {position:absolute; left:758px;  width:213px;}
 
 
 /*ul.menu li#mnInicio a#linkInicio { background: url(../img/menu/new/inicio.png) 0px -0px  no-repeat; }
 ul.menu li#mnInicio a#linkInicio:hover,  
 ul.menu li#mnInicio.hover  a#linkInicio { background: url(../img/menu/inicio.png) 0px -42px  no-repeat; }*/
 
 ul.menu li#mnHistoria a#linkHistoria { background: url(../img/menu/new/inicio.png) 0px -0px  no-repeat; }
 ul.menu li#mnHistoria a#linkHistoria:hover,  
 ul.menu li#mnHistoria.hover  a#linkHistoria { background: url(../img/menu/new/inicio.png) 0px -42px  no-repeat; }
 
 ul.menu li#mnInicio a#linkInicio { background: url(../img/menu/new/inicio.png) 0px -0px  no-repeat; }
 ul.menu li#mnInicio a#linkInicio:hover,  
 ul.menu li#mnInicio.hover  a#linkInicio { background: url(../img/menu/new/inicio.png) 0px -42px  no-repeat; }
 
 ul.menu li#mnQuienes-somos a#linkQuienes-somos { background: url(../img/menu/new/quienes-somos.png) 0px -0px  no-repeat; }
 ul.menu li#mnQuienes-somos a#linkQuienes-somos:hover,  
 ul.menu li#mnQuienes-somos.hover  a#linkQuienes-somos { background: url(../img/menu/new/quienes-somos.png) 0px -42px  no-repeat; }
 
 ul.menu li#mnEnsenanza a#linkEnsenanza { background: url(../img/menu/new/ensenanza.png) 0px -0px  no-repeat; }
 ul.menu li#mnEnsenanza a#linkEnsenanza:hover,  
 ul.menu li#mnEnsenanza.hover  a#linkEnsenanza { background: url(../img/menu/new/ensenanza.png) 0px -42px  no-repeat; }
 
 ul.menu li#mnContacto  a#linkContacto { background: url(../img/menu/new/contacto.png) 0px 0px  no-repeat; }
 ul.menu li#mnContacto  a#linkContacto:hover,
 ul.menu li#mnContacto.hover   a#linkContacto { background: url(../img/menu/new/contacto.png) 0px -42px  no-repeat; }
 
ul.menu li a span  { display:none;} 

/* Esto es para los submenus anidados */
ul.menu li ul.sub {
    z-index: 9999;
    margin: 0px;
    padding: 0px;
    border-left: 4px #cccccc solid;
	border-right: none;
	border-bottom: none;
	border-top: none;
    position: absolute; /** relative para protofish **/
    width: 150px;
    color: #0F1522;
    text-align: left;
    background: #666 url(../img/menu/menu_bg.png) repeat-x;
	-moz-box-shadow: 0 0 8px black;
	-webkit-box-shadow: 0 0 8px black;
	box-shadow: 0 0 8px black;
}
ul.menu ul.sub li{
    display: block;
    float: none;
    border-bottom: 2px #5E5F5F solid;
    min-height: 5px;
    height: auto !important;
    height: 5px;
	padding: 4px;
	padding-left: 10px;
	background:	url(../img/bullet-sub-levels.gif) left no-repeat; /*modified from original*/
	margin-left: 3px;/*modified from original*/
}
ul.menu ul.sub li.subChild {
    margin-left: 15px;
}
ul.menu ul.sub li:hover{
  
	background:	url(../img/bullet-sub-levels.gif) left no-repeat gray;
}
ul.menu ul.sub li.hover a{
    color:gray;  
	 /*modified from original*/
}
ul.menu ul.sub li.last hover a{
    border:none;
}

ul.menu ul.sub li a span { display:block;}

ul.menu ul.sub li a {
    min-height: 5px;
    height: auto !important;
    height: 5px;
    color: #333;
    text-align:left;
    z-index: 99999;
    width: auto;
    background:none;
    padding:2px;
	text-decoration:none;
    
}

ul.menu ul.sub li a:hover {
    width: auto;
    color: #E4E4E4;
    /*text-decoration:underline;*/
    /*background: gray;*/
}
 /**** protofish ***/
/* show hide behaviour */
ul.menu ul,
ul.menu li:hover ul ul,
ul.menu ul ul,
ul.menu li:hover ul ul ul,
ul.menu ul ul ul,
ul.menu li:hover ul ul ul ul {
    position: absolute;
    left: -999em;
}

ul.menu li:hover ul,
ul.menu li li:hover ul,
ul.menu li li li:hover ul,
ul.menu li li li li:hover ul {
    left: 25px;
    z-index: 999;
}

/* show hide behaviour with protofish */
ul.menu li.hover ul ul,
ul.menu li.hover ul ul ul,
ul.menu li.hover ul ul ul ul {
    position: absolute;
    left: 25px;
}

ul.menu li.hover ul,
ul.menu li li.hover ul,
ul.menu li li li.hover ul,
ul.menu li li li li.hover ul {
    left: 25px;
    z-index: 999;
}
/**= MENU **/


.padding { text-align:right; padding-right:10px;}

ul#subDesc {
	width:152px;
	
}

ul#subQuienes-somos{
	width:178px;
}


ul#subCont{
	width:137px;
}


ul.sub li, 
ul.sub li a span{ 
	padding-bottom:2px;
	font-size:10pt;
	font-family: "arial";
	color: black;
	/*text-shadow: 1px 1px 1px #000, 1px 1px 10px #333; /*added from original*/
}


/**** GALERIA DE EVENTOS ***/
.notes{ position:relative;}
#notes{ float:left;}
#notesSec{ float:right;}
.notes  .element {position:relative;  width:400px; height:400px;}
.notes  .element .detail{ 
position:absolute; 
width:400px; 
 
bottom:0px; left:0px;
color:#ffffff;
background: url(../img/alpha-notes.png) repeat;
height:80px;
}

.notes  .element .detail .title {
	font-size:11pt;
	padding:3px;
}
.notes  .element .detail .description {
    font-size:9pt;
    padding:0px 20px 5px 20px;
}

#notesContainer {
	margin:0px auto;
	width:803px;
	padding-top:35px;
}



/** Listados Descargas **/

table#listadoDescargasCliente {
	width:90%;
	
}

table#listadoDescargasCliente td{
	font-size:10pt;
	
}

table#listadoDescargasCliente td.titulo h2{
 	
	text-align:left;
}

table#listadoDescargasCliente td.descripcion{
 	padding:2px 10px;
	color:#4A4A4A;
	font-size:9pt
	}
table#listadoDescargasCliente td.descripcion span{
	font-size:9pt;
	font-weight:bold;
	
}

table#listadoDescargasCliente div.separador {
	margin:15px auto;
	border-bottom:1px dashed #cccccc;
	width:70%;
	
}


/*LIGAS PIE*/

 table#ligasPie {
 	width:990px;
	margin:0px auto;
	margin-top:10px;
 } 

  table#ligasPie th, table#ligasPie td{
  	width:330px;
	background: url(../img/ligas-td-bg.png) repeat-y;	
  }
table#ligasPie tbody td.revistasOtrosIdiomas {
	border-left:1px dashed #ffffff;
	border-right:1px dashed #ffffff;
}

table#ligasPie tbody td {
	vertical-align:top;
}

table#ligasPie tbody td a{
	color:#ffffff;
}

table#ligasPie tbody td ul li{
	color:#ffffff;
	background:url("../img/bullet-menu.gif") no-repeat scroll 0.1em 0.3em;
	padding-left:10px;
    
}
/*** #descarga **/
table#listadoDescargasCliente h2{
	padding:0px;
	padding-left:21px;
	background: url(../img/app/download.gif) no-repeat left top;
}
/** ligasPie **/
table#ligasPie ul li.bgLiga {
	min-height:24px; 
	height: auto !important;
	height:24px;
	padding-left:28px;
	padding-top:2px;
}


.contenido a,
#contenido a {
	color:#003366;
}
.contenido a:hover,
#contenido a:hover {
	text-decoration: underline;
}
#jqueryCarrousel, #bannerBody {
	width: 990px;
	height: 255px;
}