@charset "utf-8";
/*
CSS Document 
Autor: INDX comunicacion
Creacion: Abril 2011
*/

html { height:100%; margin:0 0 1px 0; overflow-x:hidden; overflow-y:auto;}
body {
	background: #CCC;
	background:-webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#CCC));
	background:-moz-linear-gradient(top,  #FAFAFA,  #CCC);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA', EndColorStr='#CCCCCC');
	background-attachment: fixed;
	
	height: 100%;

	font-family:Arial, Helvetica, sans-serif;
	color:#666;}

ul, li, img, body, html { margin:0; padding:0;}
ul,li{ list-style: none; margin:0; padding:0;}
h1 { font-size:24px; padding:0px;}
h2 {background: url('../imagenes/h2.png') no-repeat left;
	color: #FFF;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 46px;
	font-weight: 100;
	margin: 10px 0;
	line-height: 40px;
	padding-left: 28px;}
h3 { background: url('../imagenes/h3.png') no-repeat left;
	color: #0a3061;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 30px;
	font-weight: normal;
	margin: 10px 0;
	padding-left: 45px;}

a, a:hover { color:#007dd0; text-decoration:none;}
a img , img { border:none;}

.fl { float:left; }
.fr { float:right; }



#general {
	background: #b4becc;
	left:-470px;
	margin-left:50%;
	position:absolute;
	text-align:left;
	width: 940px;
	
	-moz-box-shadow: 0px 0px 10px #999;
	box-shadow: 0px 0px 10px #999;
	-webkit-box-shadow: 0px 0px 10px #999;}

#cabecera { margin-bottom: -80px;}
	#logo-ITSI {
		height: 170px;
		left: 10px;
		position: absolute;
		width: 150px;
		z-index: 20;}
	#redes-sociales {
		background: url('../imagenes/cabecera/redes-sociales-fondo.png') #1c56a1 no-repeat;
		height: 32px;
		text-align: right;
		width: 940px;}
		#redes-sociales img{margin: 3px 5px;}
				
	#menu-top {
		background: url('../imagenes/cabecera/menu-fondo.png') #d2d7d9 repeat-x;
		font-family: 'Yanone Kaffeesatz', arial, serif;
		margin:0;
		padding: 15px 0 0 160px;
		height: 65px;
		width: 780px;}
	#menu-top li { border-left:#FFF solid 1px; float:left; position:relative ;width:110px; height:50px;}
	#menu-top li a {
		color: #1b3a84;
		display: block;
		font-size:18px;
		font-weight: bold;
		height:30px;
		line-height: 16px;
		padding: 10px 0;
		text-align: center;
		}
	#menu-top li a span { font-weight:normal;}
	#menu-top li:hover { background: url('../imagenes/cabecera/menu-azul.png') no-repeat #2b5996; }
	#menu-top li:hover a { color:#FFF;}
	#menu-top li a.activo { background: url('../imagenes/cabecera/menu-naranja.png') no-repeat #df9a10; color: #FFF;}
	.desplegable { background:none; display:none; left: -1px; position: absolute; z-index: 101; }
	#menu-top ul.desplegable li { border:none; float:none; height:23px; margin: 1px; position:static; width:110px; }
	#menu-top ul.desplegable li a { background:#2b5996; border-bottom:1px solid #3b5577; border-top:1px solid #557aab; color:#F0F0F0; display:block; font-size:14px; height:18px; padding:3px 0 1px; }
	#menu-top ul.desplegable li a:hover { background:#293d58; color: #df9a10; }
	#menu-top ul.desplegable li a.activo { background:#465466; border-bottom:1px solid #555; border-top:1px solid #4B4B4B; color: #888; }
	
	#menu-top li.itsi { border: none; text-align:left; padding: 0; width: 114px; }
	#menu-top li.itsi:hover {background:none;}
	#menu-top li.itsi h1{
		color: #1b3a84;
		font-family: arial, serif;
		font-size:10px;
		font-weight:bold;
		line-height: 10px;
		margin-top: 5px;}

	#dorado {
		background: url('../imagenes/cabecera/dorado.png') no-repeat;
		height: 80px;
		position:relative;
		width: 940px;
		z-index: 10;}

#titulo {
	background: url('../imagenes/seccion/titulo-fondo.png') no-repeat #2666ae;
	border-bottom: 1px solid #878b91;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	height: 94px;
	position: relative;
	width: 940px;}
#titulo h2 {
	float:left;
	margin: 45px 0 0 70px;}
#titulo ul {
	display: inline;
	float: right;
	font-size: 18px;
	list-style: none;
	position: absolute;
	bottom: 10px; right: 20px;
	z-index: 20;}
#titulo ul li { border-right: 1px solid #fff; color: #FFF; float: left;}
#titulo ul li.ultimo { border: none;}
#titulo ul li a {
	color: #FFF;
	display: block;
	padding: 0 10px;}
#titulo ul li a:hover { background: url('../imagenes/FFF-20.png') repeat;}

#contenedor {
	background: url('../imagenes/seccion/submenu-fondo.jpg') no-repeat #e8eaf6;
	border-bottom: 1px solid #8d8f92;
	border-top: 1px solid #f9fbfe;	
	overflow: auto;
	position: relative;
	width: 940px;}

#sombra {
	background: url('../imagenes/seccion/sombra.png') repeat-x bottom;
	bottom: 0px;
	float: left;
	height: 130px;
	position: absolute;}
#sombra.submenu { width: 230px; }
#sombra.carreras { width: 940px; }
	
#seccion {
	background: url('../imagenes/seccion/fondo-contenido.jpg') no-repeat top right #f1f6fc;
	border-left: 1px solid #e7ebf4;
	float: right;
	width: 709px;}
	
#seccion-sinfondo {
	background: url('../imagenes/seccion/sinfondo-contenido.png') repeat-x #f1f6fc;
	border-left: 1px solid #e7ebf4;
	float: right;
	width: 709px;}

#submenu h3 {
	background: url('../imagenes/h3-mini.png') no-repeat left;
	margin: 0 10px;
	padding-left: 30px;}

h4 {
	color: #3a516f;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 17px;
	margin: 0 0 0 40px;}
h5 {
	color: #3a516f;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 17px;
	margin:5px 0;}

#seccion p { margin: 10px 0; }

#submenu {
	float:left;
	margin-left: -230px;
	padding: 60px 0 30px 0;
	position: relative;
	width:210px;}

#submenu ul {
	margin-top: 30px;
	border-bottom: 1px solid #FFF;
	border-top: 1px solid #AAA;
	width: 228px;}
	
#submenu ul li a {
	border-bottom: 1px solid #AAA;
	border-top: 1px solid #EEE;
	color: #1f4677;
	display: block;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 18px;
	padding: 5px 0 5px 40px;
	width: 188px;}
#submenu ul li a:hover { background: url('../imagenes/FFF-50.png'); }
#submenu ul li a span { color: #007dd0; }

#submenu-hor {
	background: url('../imagenes/seccion/submenu-hor-fondo.jpg') no-repeat #CCC;
	border-bottom: 1px solid #8f9497;
	border-top: 1px solid #f8fafd;
	float: left;
	height: 125px;
	width: 940px;}
#submenu-hor #plantel { float: left; margin: 0 20px 0 50px; }
#submenu-hor .boton { cursor: pointer; display:block; float: left; font-family: 'Yanone Kaffeesatz', arial, serif; margin:15px 35px; height:32px; overflow:hidden; }
#submenu-hot .ultimo { background:#F40; margin-right: 0px;}
#submenu-hor .boton a{
	background: url('../imagenes/seccion/submenu-boton-fondo.png') no-repeat right top;
	border: 1px solid #d8d8d8;
	color: #d76500;
	display: block;
	font-size: 18px;
	font-weight:bold;
	height: 25px;
	padding: 3px 0 2px 10px;
	width: 148px;
	
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0px 0px 3px #BBB; box-shadow: 0px 0px 3px #BBB; -webkit-box-shadow: 0px 0px 3px #BBB;}
#submenu-hor .boton a span {color: #1c56a1; font-weight: normal; }
#submenu-hor .boton a:hover , #submenu-hor .boton a.actual { background-position: right bottom ; }
#submenu-hor .boton #desc {
	background: #FFF; color: #034398; font-size: 14px; line-height: 13px; margin: 5px auto; max-height: 105px; overflow: hidden; padding: 5px 5px; position: relative; width: 140px; z-index: 100;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px #888; box-shadow: 0px 0px 5px #888; -webkit-box-shadow: 0px 0px 5px #888;}

.contenido {
	background: url('../imagenes/seccion/sombra.png') bottom repeat-x;
	color: #203147;
	font-size: 12px;
	float: left;
	min-height: 300px;
	padding: 25px 60px 50px 70px;
	width: 579px;}

.contenido .banner {
	background: #f89f24;
	padding: 3px;
	height: 215px;
	width: 574px;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

.contenido .banner img {
	overflow: hidden;
	-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.contenido #globo {
	float: right;
	margin-bottom: 30px;
	width: 380px;}
.contenido #globo .flecha {
	background: url('../imagenes/seccion/flecha-globo.png') no-repeat;
	display: block;
	height: 19px;
	margin-left: 50px;
	margin-bottom: -10px;
	width: 17px;}
.contenido #globo p {
	background: #338ecb;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	padding: 8px 15px;
	width: 340px;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.contenido h3.subrayado {
	background: url('../imagenes/h3-mini.png') no-repeat left;
	border-bottom: 3px solid #3d94ce;
	clear: both;
	font-size: 24px;
	margin-top: 30px;
	padding-left: 30px;
	width: 550px;}
.contenido p {
	clear:both;
	color: #203147;
	font-size: 12px;
	padding-left: 20px;
	text-align: justify;
	width: 530px;}
.contenido ul {
	list-style: none;
	padding-left: 30px;}
.contenido ul.valores li { margin-bottom: 15px; width: 510px; }
.contenido ul.carrera {margin-bottom: 20px;}
.contenido ul.carrera li { list-style:disc; }
.contenido ul.carrera li.semestre {
	background:#338ecb;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	list-style:none; 
	margin:0 0 5px -15px;
	padding:2px 15px 2px 15px;
	
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;}
.contenido ul.carrera li.tronco { color:#338ecb;}

#carreras {
	background: url('../imagenes/carreras/fondo-carreras.png') no-repeat #f4ffff;
	float: left;
	height: 330px;
	width: 940px;}
#carreras #izq {
	float:left;
	margin: 10px 20px 10px 60px;
	width: 420px;}
#carreras #izq img {
	border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
	box-shadow: 0px 0px 5px #666; -moz-box-shadow: 0px 0px 5px #666; -webkit-box-shadow: 0px 0px 5px #666;}

#carreras #der {
	float: left;
	margin: 10px 20px 10px 20px;
	width: 400px;}
#carreras #der ul li{
	float: left;
	display: inline;
	margin: 0 40px 0 0;
	width: 82px;}
#carreras #der ul li a {
	color: #1c56a1;
	display: block;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 15px;
	margin: 0 0 10px 0;
	text-align: center;
	text-transform: uppercase;}
#carreras #der ul li a:hover { color: #d05c12; }
	
#carreras #der ul li a img {
	border: 3px solid #FFF;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	box-shadow: 0px 0px 3px #666; -moz-box-shadow: 0px 0px 3px #666; -webkit-box-shadow: 0px 0px 3px #666;
	margin-bottom: 5px;}
#carreras #der ul li a:hover img {
	border: 3px solid #d05c12;}

#home-plantel {
	border-bottom: 1px solid #999;
	border-top: 1px solid #FFF;
	height: 400px;
	width: 940px;}

#plantel-contenido {
	background: url('../imagenes/seccion/planteles-fondo.png') #FFF;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size:18px;
	height:400px;
	overflow:hidden;
	width:940px;}

#plantel-contenido #ubicacion-y-contacto { float: left; padding: 15px 10px; height: 370px; }
#plantel-contenido #ubicacion-y-contacto #mapa { float:left; margin-left:120px; width: 425px; }
#plantel-contenido #ubicacion-y-contacto #mapa iframe{ background:#1a70bb; padding: 5px; margin: 0 0 -12px 0; }
#plantel-contenido #ubicacion-y-contacto #mapa a { background:#1a70bb; color: #FFF; font-size: 14px; padding: 0 8px 3px;}
#plantel-contenido #ubicacion-y-contacto #directorio { color:#1c56a1; font-family: 'Yanone Kaffeesatz', arial, serif; font-size: 30px; float:left; margin-left: 30px; }
#plantel-contenido #ubicacion-y-contacto #directorio ul {	
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 900;
	margin: 10px 0 0 10px;}
#plantel-contenido #ubicacion-y-contacto #directorio li {
	clear:both;
	font-size:16px;
	line-height:14px;
	list-style-image: url('../imagenes/seccion/planteles-vineta.png');
	margin: 20px 0;}
#plantel-contenido #ubicacion-y-contacto #directorio li span { font-size: 14px; font-weight:normal; }

#plantel-contenido #oferta-educativa { padding: 25px 0 0 20px; height: 375px;}
#plantel-contenido #oferta-educativa #intro { height:90px; margin-left: 20px; width: 900px;}
#plantel-contenido #oferta-educativa #intro h4 { color: #007dd0; font-size:24px; font-weight:lighter; margin-left: 10px;}
#plantel-contenido #oferta-educativa #carrera { float: left; height: 250px; margin: 10px; width: 160px;}

#plantel-contenido #oferta-educativa #carrera a{
  float: left;
  font-family: 'Yanone Kaffeesatz', arial, serif;
  margin:10px 0;

  /* antes: height fijo + overflow:hidden (eso cortaba el texto) */
  height: auto;
  min-height: 25px;
  overflow: visible;
  white-space: normal;
  line-height: 16px;

  background: url('./imagenes/seccion/submenu-boton-fondo.png') no-repeat right top;
  border: 1px solid #d8d8d8;
  color: #d76500;
  display: block;

  font-size: 18px;
  font-weight:bold;

  padding: 6px 8px 6px 10px;
  width: 148px;

  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  -moz-box-shadow: 0px 0px 3px #BBB; box-shadow: 0px 0px 3px #BBB; -webkit-box-shadow: 0px 0px 3px #BBB;
}

#plantel-contenido #oferta-educativa #carrera a span{
  display:block;          /* "General" en otra línea */
  color: #1c56a1;
  font-weight: normal;
  margin-top: 2px;
}
	
#plantel-contenido #oferta-educativa #carrera a span {color: #1c56a1; font-weight: normal; }
#plantel-contenido #oferta-educativa #carrera a:hover { background-position: right bottom ; }

#plantel-contenido #conoce-nuestro-plantel { height:370px; padding:25px 0 0 20px;}
#plantel-contenido #conoce-nuestro-plantel #intro { height:40px; margin-left: 20px; width: 900px;}
#plantel-contenido #conoce-nuestro-plantel #intro h4 { color:#007dd0; font-size:24px; font-weight:lighter; margin-left: 10px;}
#plantel-contenido #conoce-nuestro-plantel #galeria { clear:both; display:block; height:290px; margin:auto; position:relative; width: 555px; }

/* GALERIA */
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{ margin-top:1em; }
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:555px;
		height:290px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:40px;
		height:40px;
		position:absolute;
		left:-50px;
		top:135px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ left:565px; }														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{ background:url('../imagenes/seccion/galeria-ant.png') no-repeat 0 0;
		display:block;
		position:relative;
		width:40px;
		height:40px;			
		}	
	#nextBtn a, #slider1next a{ background:url('../imagenes/seccion/galeria-sig.png') no-repeat 0 0; }	

#plantel-contenido #video {
	height:405px;
	padding:0;}
#plantel-contenido #video #galeria {
	clear:both;
	display:block;
	height:405px;
	margin:auto;
	position:relative;
	text-align:center;
	width: 940px; }

.contacto h4{ color: #007dd0; float:left; font-size:24px; font-weight:lighter; margin:20px 0 10px 0;}


li h4 {margin-left:0;}

form#contacto {
	background:#e6ebf1;
	border:#bcbcbc solid 1px;
	float:left;
	margin: 10px 0;
	padding:20px 30px 20px 50px;
	width:470px}
form#contacto label {
	color:#007dd0;
	float:left;
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size:16px;
	width:50px;}
form#contacto input {
	border:#bcbcbc solid 1px;
	float:left;
	margin-bottom: 10px;
	width: 390px;}
form#contacto textarea {
	border:#bcbcbc solid 1px;
	float:left;
	height: 90px;
	margin-bottom: 10px;
	width: 440px;}

form#contacto input.boton20px{
	background:url('../imagenes/virtual/boton-20px.png') no-repeat top right;
	border:#d0cfcd solid 1px;
	color:#185399;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	float:right;
	height:22px;
	margin-right: 27px;
	max-width:110px;
	padding-right:15px;
	
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;}
form#contacto input.boton20px:hover { background-position:bottom right;}



#pie{
	background: url('../imagenes/pie/fondo.png') repeat-x #b8c1cd;
	float:left;
	height: 158px;
	padding: 1px 0;
	width: 940px;}
#pie #logo {
	float: left;
	height: 124px;
	margin: 0 20px 0 60px;
	width: 100px;}
#pie #direcciones{
	display:block;
	height: 99px;
	margin: 0 0 0 180px;
	width: 760px;}
#pie #direcciones ul li {
	color: #003c8b;
	display: inline;
	float: left;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 9px;
	margin: 30px 20px 0 0;
	line-height: 12px;
	width: 160px;}
#pie #direcciones ul li span {
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;}
#pie #info { margin-top: 5px; text-align: center; }
#pie #info a {
	color:#cfdae8;
	font-size: 12px;}
#pie #info a:hover { color: #FFF;}
#pie #info a.indx {
	color: #83a0c5;
	font-size:9px;
	font-weight: normal;
	margin-top: 2px;
	margin-right: 75px;}
#pie #info a.indx:hover {
	color:#a9bdd7;}


.col-1 { width: 40px; margin: 10px; float: left; }
.col-2 { width: 100px; margin: 10px; float: left; }
.col-3 { width: 160px; margin: 10px; float: left; }
.col-4 { width: 220px; margin: 10px; float: left; }
.col-5 { width: 280px; margin: 10px; float: left; }
.col-6 { width: 340px; margin: 10px; float: left; }
.col-7 { width: 400px; margin: 10px; float: left; }
.col-8 { width: 460px; margin: 10px; float: left; }
.col-9 { width: 520px; margin: 10px; float: left; }
.col-10 { width: 580px; margin: 10px; float: left; }
.col-11 { width: 640px; margin: 10px; float: left; }
.col-12 { width: 700px; margin: 10px; float: left; }
.col-13 { width: 760px; margin: 10px; float: left; }
.col-14 { width: 820px; margin: 10px; float: left; }
.col-15 { width: 880px; margin: 10px; float: left; }
.col-16 { width: 940px; margin: 10px; float: left; }

.primera-col { margin-left: 0px }
.ultima-col { margin-right: 0px; }

#general{
  width: 1100px;
  left: -550px;   /* (1100 / 2) */
}

/* Bloques principales que estaban en 940px */
#redes-sociales,
#dorado,
#titulo,
#contenedor,
#submenu-hor,
#carreras,
#home-plantel,
#plantel-contenido,
#plantel-contenido #video #galeria,
#pie{
  width: 1100px;
}

#sombra.carreras{ width: 1100px; }

/* Menú: antes 780px (940-160). Ahora 940px (1100-160) */
#menu-top{ width: 940px; }

/* Sección derecha: antes 709px. Ahora 869px (1100 - 231 aprox) */
#seccion,
#seccion-sinfondo{
  width: 869px;
}

/* Evitar que la zona de oferta/conoce se corte si crece el texto */
#plantel-contenido #oferta-educativa{
  height: auto;
  min-height: 375px;
}
#plantel-contenido #conoce-nuestro-plantel{
  height: auto;
  min-height: 370px;
}

/* Intros más anchos y sin altura fija */
#plantel-contenido #oferta-educativa #intro,
#plantel-contenido #conoce-nuestro-plantel #intro{
  width: 1060px;
  height: auto;
}

/* ---- FIX: NO recortar el nombre de la carrera ---- */
#plantel-contenido #oferta-educativa #carrera a{
  height: auto;          /* antes 32px/25px fijo */
  min-height: 25px;
  overflow: visible;     /* antes hidden */
  white-space: normal;   /* permite 2+ líneas */
  line-height: 16px;
  padding: 6px 8px 6px 10px;  /* un poco más cómodo */
}

#plantel-contenido #oferta-educativa #carrera a span{
  display: block;        /* “General” abajo */
  margin-top: 2px;
}

.contenido .banner{
  height: auto !important;    /* antes: 215px (recortaba) */
}

.contenido .banner img{
  display: block;
  width: 100%;                /* ajusta al ancho del banner */
  height: auto;               /* mantiene proporción */
}