/* Hoja de estilos de Portal de Docentes Ibero */
/* Creada por Sergio García González (segarciamail@gmail.com) */

/*Se usa en body*/
@font-face {
	font-family: "Source Sans Pro";
	src: url("fonts/SourceSansPro-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/*Se usa en calendario y buscador de eventos*/
@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/*Se usa para títulos */
@font-face {
	font-family: "Teko";
	src: url("fonts/Teko-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

/*Se usa para los mapas de árboles de sitios*/
@font-face {
	font-family: "Noto Sans KR";
	src: url("fonts/NotoSansKR-Thin.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

/*Se usa para vínculos con símbolos*/
@font-face {
	font-family: "icons";
	src: url("fonts/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg"),
		url("fonts/websymbols-regular-webfont.eot");
	src: url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"),
		url("fonts/websymbols-regular-webfont.woff") format("woff"),
		url("fonts/websymbols-regular-webfont.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
/* -------------------------------------------------------------------------- */
/* Layout general */

body{
    margin: 0px;
    font-family: "Source Sans Pro";
    font-size: 14px;
    padding: 0px;
    height: auto;
    overflow-x: visible;
}

h1{
	font-family: Teko;
	font-size: 18;
	color: #C00520;
}

h2{
	font-size: 16;
	padding-left: 30px;
	font-weight: 100;
	color: #DE0528;
}

h3{
	font-size: 14;
	padding-left: 30px;
	font-weight: bold;
	color: #555555;
}

.parrafo {
	padding-left: 30px;
	margin-top: 8px;
}

th{
  background: #EEEEEE;
  color: #222222;
  font-weight: normal;
}

.clearfix {
	float: none;
	clear: both;
}

a {
	text-decoration: none;
	color: #888888;
}

a:visited {
	text-decoration: none;
	color: rgb(136, 136, 136);
}

a:hover {
	text-decoration: none;
	color: #000000;
}

input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], select {
	border-radius: 3px;
	background-color: transparent;
	border: 1px solid lightgray;
	color: #444444;
}

textarea {
	font-family: "Open Sans";
	font-size: 13px;
	border-radius: 3px;
	background-color: transparent;
	border: 1px solid lightgray;
	color: #444444;
	width: 600px;
	height: 60px;
}

.select {
	border-radius: 3px;
	background-color: transparent;
	border: 1px solid lightgray;
	color: #444444;
}

.btn01 {
	background-image: url("img/btn01st01.gif");
	height: 26px;
	width: 79px;
	border-radius: 3px;
	color: white;
	font-size: 12px;
	box-shadow: 0px 0px 3px gray;
	text-align: center;
	vertical-align: middle;
	transition: 400ms;
}
.btn01:hover {
	background-image: url("img/btn01st02.gif");
		box-shadow: 0px 0px 7px #444444;
}.btn01:active {
	background-image: url("img/btn01st02.gif");
		box-shadow: 0px 0px 7px #DE0528,  0px 0px 4px #B70C19 inset;
}

.btn02 {
	background-image: url("img/btn02st01.gif");
	height: 20px;
	width: 26px;
	border-radius: 3px;
	color: white;
	font-size: 12px;
	box-shadow: 0px 0px 3px gray;
	text-align: center;
	vertical-align: middle;
	transition: 400ms;
}
.btn02:hover {
	background-image: url("img/btn02st02.gif");
		box-shadow: 0px 0px 7px #444444;
}.btn02:active {
	background-image: url("img/btn02st02.gif");
		box-shadow: 0px 0px 7px #05DE28,  0px 0px 4px #0CB719 inset;
}

.td {   /*celdas para tablas de listados en mgmt*/
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	vertical-align: middle;
	color: #666666;
}

.table {   /*tablas de listados en mgmt*/
	margin: 0px auto;
	border-radius: 10px;
	border: 1px solid lightgray;
	margin-bottom: 30px;
}

.Strips {
	background-image: linear-gradient(rgb(249, 249, 249), rgb(238, 238, 238), rgb(233, 233, 233), rgb(240, 240, 240));	
}

.BtnComoTxt {
	font-size:12px;
	text-align:center;
	font-weight:bold;
	color:#BB0000;
	border-style:none;
	background:none;
	cursor:pointer;
}

#Overlay, #Overlay_i1, #Overlay_i2, #Overlay_i3, #Overlay_i4, #Overlay_d1, #Overlay_d2, #Overlay_d3, #Overlay_d4 {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 20;
  }
  
#ContentOverlay, #ContentOverlay_i1, #ContentOverlay_i2, #ContentOverlay_i3, #ContentOverlay_i4, #ContentOverlay_d1, #ContentOverlay_d2, #ContentOverlay_d3, #ContentOverlay_d4 {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 50px;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
  }
  
.closeOverlay, .closeOverlay_i1, .closeOverlay_i2, .closeOverlay_i3, .closeOverlay_i4, .closeOverlay_d1, .closeOverlay_d2, .closeOverlay_d3, .closeOverlay_d4 {
	display:block; 
	width:97%; 
	text-align:right; 
	font-family:icons; 
	margin-top:30px;
	color: white;
	cursor: pointer;
}


/* Tooltip */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
	visibility: hidden;
	width: 70px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0px;
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 110%;
	transition: 100ms;
  }
  
  .tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%; /* Flecha a la izq del globo */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent black transparent transparent;
	color: rgba(0, 0, 0, 0.8);
  }
  .tooltip:hover .tooltiptext {
	visibility: visible;
  }

  .tooltip2 {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
  }
  
  .tooltip2 .tooltiptext2 {
	visibility: hidden;
	width: 70px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0px;
	position: absolute;
	z-index: 1;
	top: -5px;
	right: 110%;
	transition: 100ms;
  }
  
  .tooltip2 .tooltiptext2::after {
	content: " ";
	position: absolute;
	top: 50%;
	left: 100%; /* Flecha a la der del globo */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent transparent black;
	color: rgba(0, 0, 0, 0.8);
  }
  .tooltip2:hover .tooltiptext2 {
	visibility: visible;
  }

  /* -------------------------------------------------------------------------- */

  
/* -------------------------------------------------------------------------- */
/* Acordeon */
.accordion {
	background-image: linear-gradient(to right, #9C7878, #EF4B4F);
	color: #dedede;
	cursor: pointer;
	padding: 10px;
	width: 95%;
	border: 1px solid #894A4A;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
	margin-left: 20px;
	margin-bottom: 1px;
	border-radius: 3px 30px 1px 10px;
  }
  
  .active, .accordion:hover {
 	background-image: linear-gradient(to right, #D34642, #EF4B4F);
    color: white;
  }
  .accordion:after {
	content: '\002B';
	color: white;
	font-weight: bold;
	float: right;
	margin-left: 5px;
	margin-right: 15px;
  }
  
  .active:after {
	content: "\2212";
    margin-right: 15px;
    color: white;
}
  
  .panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	margin-left: 20px;
	margin-right: 20px;
  }
  /* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/* Layout del header */

#hdrFila1 {
	display:table;
	width:100%;
	height: 24px !important;
	position: fixed;
	margin-top: -14px; /* Se le restan 10pixeles a la altura total de esta franja*/
	z-index: 20;
}
#hdrFila1 > div {
	display:table-cell;
	height: 24px !important;
}
.fondoGris {
	background-color: #555555;
	height: 24px !important;
}
.imgTop {
	width:1000px;
	height: 24px !important;
}
#hdrFila2 {
	display:table;
	width:100%;
	height: 76px !important;
	margin-top: 10px;
	position: fixed;
	z-index: 20;
}
#hdrFila2 > div {
	display:table-cell;
	height: 76px !important;
}
.gradIzq {
	background-image: linear-gradient(to right, #B60C19, #FE0034);
	height: 76px !important;
}
.imgBottom {
	width:1000px;
	height: 76px !important;
}
.gradDer {
	background-image: linear-gradient(to right, #FE0034, #B60C19);
	height: 76px !important;
}

.contador_table {
  display: table;
  position: fixed;
  width: 100%;
  top: 81px;
  z-index: 100;
}

.contador_row {
	display: table-row;
}

.contador_lat {
	display:table-cell;
	width: 25%;
}

.contador {
  display:table-cell;
  width: 966px;
  display: block;
  text-align: right;
  color: white;
}

/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/* Ligas relevantes y Cartelera */
#CajasCartelera {
	content: "";
	display: table;
	clear: both;
	margin: 0 auto;
	margin-bottom: 50px;
	width: 1200px;
	height: 400px;
}
#CajasCartelera div {
	float: left;
	padding: 0px 0px 0px 0px;
	height: 400px;
	display: table-cell;
}
#divLatCarteleraIzq {
	width:200px;
}
#divLatCarteleraCen {
	width: 800px;
	margin-top: -20px;
}
#divLatCarteleraDer {
	width:200px;
}
#divLatCarteleraIzq div, #divLatCarteleraDer div {
	width: 188px;
	height: 88px;
	border: 1px dotted #aaaaaa;
	text-align: center;
	font-size: 16px;
	margin: 5px;
	border-radius: 5px 5px 5px 5px;
	color: #DE0528;
	background-color: #EEEEEE;
	transition: 250ms;
	cursor: pointer;
}
#divLatCarteleraIzq div:hover, #divLatCarteleraDer div:hover {
	background-color: #F8F8F8;
	box-shadow: 0px 0px 5px #DE0528;
}
#divLatCarteleraIzq a, #divLatCarteleraDer a {
	color: #DE0528;
}


/* Carousel */

#slider {
	position: relative;
	overflow: hidden;
	margin: 20px auto 0 auto;
	border-radius: 4px;
}

#slider ul {
	position: relative;
	margin: 0;
	padding: 0;
	height: 400px;
	list-style: none;
	overflow: hidden;
}

#slider ul li {
	position: relative;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 800px;
	height: 400px;
	background:none;
	text-align: center;
	line-height: 300px;
}

a.control_prev, a.control_next {
	position: absolute;
	top: 40%;
	z-index: 10;
	display: block;
	padding: 35px 5px 35px 5px;
	width: auto;
	height: auto;
	background-image: linear-gradient(#bbbbbb, #999999, #777777, #777777, #777777, #777777, #999999);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 20px;
	font-family: "icons";
	color: #ffffff;
	opacity: 0.7;
	cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
	opacity: 1;
	-webkit-transition: all 0.2s ease;
}

a.control_prev {
	border-radius: 8px 0px 0px 8px;
}

a.control_next {
	right: 0;
	border-radius: 0px 8px 8px 0px;
}

.slider_option {
	position: relative;
	margin: 10px auto;
	width: 160px;
	font-size: 18px;
}

/* -------------------------------------------------------------------------- */





/* -------------------------------------------------------------------------- */
/* Ligas calendario y brightspace */

#CalBriSp {
	display: table;
	width: 670px;
	margin: 0 auto;
	margin-top: -33px;
}

#CalBriSp a {
	color: #ef4b4f;
}

#CalBriSp a:active {
	color: #ef4b4f;
}

#CalBriSp a:visited {
	color: #ef4b4f;
}

/* -------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------- */
/* Layout del calendario y buscador de eventos */

#CajasCalendario {
  content: "";
  display: table;
  clear: both;
  margin: auto;
  width: 1416px;
	border-style:solid;
	border-width:1px;
	border-color:#DDDDDD;
}
#CajasCalendario div {
  float: left;
  height: 225px;
  padding: 0px 0px 0px 0px;
}
#divCalendario {
  width:246px;
  background:#F8F8F8;
}
#divPrograma {
  width: 1170px;
  background:#F8F8F8;
}


/* -------------------------------------------------------------------------- */
/* Estilos para el calendario */

#Calendario {
	border-collapse:collapse;
	border-spacing:0px;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	background:#F8F8F8;
	color:#555555;
	border-style:none;
	}
#Calendario td, th {
	padding:5px 0px 5px 0px;
	border-style:solid;
	border-width:1px;
	border-color:#DDDDDD;
	text-align:center;
	}
#Calendario td:hover {
	padding:4px 0px 4px 0px;
	background:#FE0034;
	color:white;
	font-weight:bold;
	font-size:14px;
	}
#Calendario input[type="submit"] {
	width:30px;
	text-align:center;
	padding:0px;
	background:none;
	border-style:none;
	cursor:pointer;
	}
#Calendario td:hover input[type="submit"] {
	color:white;
	font-weight:bold;
	}
#Calendario input[type="submit"]:hover {
	color:white;
	font-weight:bold;
	}
#Calendario td:hover a {
	color:white;
	text-decoration:none;
	}
#Calendario a {
	color:#555555;
	text-decoration:none;
	}
#Calendario a:hover {
	color:white;
	text-decoration:none;
	}
#Calendario a:visited {
	color:#555555;
	text-decoration:none;
	}
#Calendario a:active {
	color:#555555;
	text-decoration:none;
	}
/* -------------------------------------------------------------------------- */





/* -------------------------------------------------------------------------- */
/* Estilos para iframes */
iframe {
  border-style:none;
  margin: 0px;
  padding:0px 0px 0px 0px;
  width: 1170px;
  height: 225px;
}

.arbol, .overlay_i1, .overlay_i2, .overlay_i3, .overlay_i4, .overlay_d1, .overlay_d2, .overlay_d3, .overlay_d4 {
	border: 1px black solid;
	margin: 0px;
	padding:0px 0px 0px 0px;
	/*width: 90%px;*/
	height: 600px;
	overflow-y: scroll;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	box-shadow: 5px 5px 10px black;
  }

  .flyer {
	border: 1px black solid;
	margin: 0px;
	padding:0px 0px 0px 0px;
	width: 370px;
	height: 200px;
	overflow-y: scroll;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	box-shadow: 5px 5px 10px gray;
  }
 /* -------------------------------------------------------------------------- */





/* -------------------------------------------------------------------------- */
/* Estilos para el programa */
#Programa {
	border-collapse:collapse;
	border-spacing:0px;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	background-color:#F8F8F8;
	color:#555555;
    width: 100%;
	}
#Programa td, th {
	padding:5px 10px 5px 10px;
	border-style:solid;
	border-width:1px;
	border-color:#DDDDDD;
	}
#Programa tr:hover {
	color:#FFFFFF;
	text-decoration:none;
	background-color:#EA4B6C;
	box-shadow: 0px 2px 4px #333333;
	text-shadow: 0px 0px 1px white;
	}
#Programa th {
    position: sticky;
    top: 0; /* Requerido para la stickiness */
}
#Programa a {
	display: block; /* Toda la celda es vínculo */
	text-decoration: none;
	color:#555555;
}
#Programa a:hover {
	color:#FFFFFF;
	text-shadow: 0px 0px 1px white;
}
#Programa tr:hover a {
	color:#FFFFFF;
	text-shadow: 0px 0px 1px white;
}
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* Layout del boletin y ligas laterales */
#CajasBoletin {
  content: "";
  display: table;
  clear: both;
  margin: auto;
  width: 1416px;
  height: auto;
}
#CajasBoletin div {
  float: left;
  padding: 0px 0px 0px 0px;
}
#divLatBolIzq {
  width:220px;
}
#divLatBolCen {
  width: 976px;
}
#divLatBolDer {
  width:220px;
}
#HeaderBoletines {
    text-align:center;
    background-image: linear-gradient(#F9F9F9, #EEEEEE, #E9E9E9, #F0F0F0);
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: white;
    border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #444444;
}

#frameBoletin {
	 width: 976px;
	 height: 3500px;
}


.ligasizq, .ligasder {
	background-image: url("img/state01.gif");
	height: 64px;
	width: 190px;
	border-radius: 3px;
	color: white;
	font-size: 14px;
	box-shadow: 0px 0px 3px gray;
	text-align: center;
	vertical-align: middle;
	transition: 400ms;
	word-wrap: break-word;
}
.ligasizq:hover, .ligasder:hover {
	background-image: url("img/state02.gif");
		box-shadow: 0px 0px 7px #444444;
}.ligasizq:active, .ligasder:active {
	background-image: url("img/state02.gif");
		box-shadow: 0px 0px 7px #DE0528,  0px 0px 4px #B70C19 inset;
}
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* Layout del login form */

#login {
	height: 600px;
	display: table-cell;
	vertical-align: middle;
	width: 1%;
}
#login table {
	margin: 0px auto;
	border-radius: 10px;
	border: 1px solid lightgray;
}

#login h2 {
	color: #DE0528;
	font-size: 18px;
	padding-bottom: 20px;
	text-align: center;
	font-weight: normal;
	text-decoration: none;
}

#login h3 {
	color: #444444;
	font-size: 14px;
	padding-bottom: 20px;
	text-align: center;
	font-weight: normal;
	text-decoration: none;
}
#NombreUsuario {
    color: #CCCCCC;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    margin-top: -12px;
    animation-name: EntraNombre;
	animation-duration: 1s;
	position: fixed;
	z-index: 30;
	width: 500px;
	margin-left: 250px;
	text-shadow: 1px 1px 3px black;
}
@keyframes EntraNombre {
    from {
        margin-top: -40px;
    }
    to {
        margin-top: -12px;
    }
}

#logout {
    margin-top: 85px;
	position: fixed;
	padding: 3px 15px 3px 15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #555555;
	color: white;
	margin-left: 1230px;
	border: 1px solid black;
}
#logout a {
	text-decoration: none;
	color: white;
}
#logout a:hover {
	text-shadow: 0px 0px 7px lightgray;
}

#pwdupd {
    margin-top: 85px;
	position: fixed;
	padding: 3px 15px 3px 15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #555555;
	color: white;
	margin-left: 1081px;
	border: 1px solid black;
}
#pwdupd a {
	text-decoration: none;
	color: white;
}
#pwdupd a:hover {
	text-shadow: 0px 0px 7px lightgray;
}


#btnconvoc {
    margin-top: 85px;
	position: fixed;
	padding: 3px 15px 3px 15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #555555;
	color: white;
	margin-left: 966px;
	border: 1px solid black;
}
#btnconvoc a {
	text-decoration: none;
	color: white;
}
#btnconvoc a:hover {
	text-shadow: 0px 0px 7px lightgray;
}



#btneymj {
    margin-top: 85px;
	position: fixed;
	padding: 3px 15px 3px 15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #555555;
	color: white;
	margin-left: 972px;
	border: 1px solid black;
}
#btneymj a {
	text-decoration: none;
	color: white;
}
#btneymj a:hover {
	text-shadow: 0px 0px 7px lightgray;
}



#btnofe {
    margin-top: 85px;
	position: fixed;
	padding: 3px 15px 3px 15px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #555555;
	color: white;
	margin-left: 972px;
	border: 1px solid black;
}
#btnofe a {
	text-decoration: none;
	color: white;
}
#btnofe a:hover {
	text-shadow: 0px 0px 7px lightgray;
}


/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* ABCC */
#MiForm {
	height: 600px;
	display: table-cell;
	vertical-align: middle;
	width: 1%;
}

#MiForm table {
	margin: 0px auto;
	border-radius: 10px;
	border: 1px solid lightgray;
}

#MiForm .sector {
	color: #777777;
	font-size: 14px;
	text-align: left;
	font-weight: bold;
	text-decoration: none;
	background-image: linear-gradient(to right, #cccccc, #eeeeee);
	border-radius: 5px;
	padding-left: 10px;
	padding-top: 6px;
	padding-bottom: 2px;
}
#MiForm td {
	color: #555555;
}
#MiForm h2 {
	color: #DE0528;
	font-size: 15px;
	padding-bottom: 20px;
	text-align: center;
	font-weight: normal;
	text-decoration: none;
}

#MiForm h3 {
	color: #444444;
	font-size: 14px;
	padding-bottom: 20px;
	text-align: center;
	font-weight: normal;
	text-decoration: none;
}
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* Árbol */
#tablaArbol {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
}

#tablaArbol th {
	font-size: 10pt;
    position: sticky;
	top: 0; /* Requerido para la stickiness */
}

#tablaArbol .celdaArbol {
	font-size: 12pt;
	border-style:solid;
	border-width:1px;
	border-color:#F9F9F9;
	background-color: white;
	padding-top: 5px;
	padding-bottom: 5px;
}

#tablaArbol .areaArbol {
	font-size: 11pt;
	border-bottom-width: 1px;
	border-bottom: solid;
	border-color:#F9F9F9;
	background-color: white;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	font-family: 'Noto Sans KR', sans-serif;
}