@charset "utf-8";
/* CSS Document */

/* page structur of <div> elements
#container
	#header
		#pageTitle
		#menuBar
	#colMask
		#colRight
			#menuSide
			#Circulars
			#Login
		#mainContent
	#footer
*/

/*
#DDDDDD gris claro
#c1e6ff azul claro (fin del degradado)
#E0EEEF azul fondo fulereno
#0b3ecb azul no tan fuerte
#080083 azul mas fuerte
*/

/*******************/
/* General setings */
/*******************/

/* empareja todos los navegadores */
* {
	margin:0;
	padding:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(/images/background.jpg);
	background-repeat:repeat-x;
	background-color:#c1e6ff; /* azul claro del fondo */
}
a {
	text-decoration:none;
	color: #0b3ecb;
}
a:hover {
	text-decoration:underline;
	color:#080083; /* azul mas obscuro */
}
h1, h2, h3, p {
	margin-top:0.5em;
	margin-bottom:0.5em;
}
img {
	margin:1ex;
}
p {
	text-align:justify;
}

ol, ul {
	margin-left:5ex;
}

/**************/
/* #container */
/**************/
#container { 
	width: 950px;
	margin: 1em auto 0 auto;
	background-color:#E0EEEF; /* gris claro, para evitar contraste */
}

/***********************/
/* #container->#header */
/***********************/
#header {
	overflow: auto; /* arregla el largo de la caja para el contendio flotante */
	background: #080083;
}
/* #container->#header->#pageTitle */
#pageTitle {
	overflow: auto; /* arregla el largo de la caja para el contendio flotante */
	color:#DDDDDD;
}
#pageTitle h2 {
	font-size:110%;
}
/* #container->#header->#menuBar */
#menuBar {
	overflow: auto; /* arregla el alto de la caja para el contendio flotante */
	background: #DDDDDD;
}
#menuBar ul {
	margin: 0; /* centra el menu */
	padding: 0;
	display: block;
	overflow: auto; /* arregla el largo de la caja para el contendio flotante */
	/*width: 40ex; /* ajustar el ancho */
}
#menuBar li {
	display: block;
	width: auto;
	float: left;
}
#menuBar ul li a {
	text-decoration: none;
	display: block;
	padding: 0.5em 1ex;
	text-align: center;
	font-weight:bold;
}
#menuBar a:hover {
	color: #dddddd;
	background: #0b3ecb; /* azul mas obscuro */
}
#menuBar .activo {
	border:1px solid #0b3ecb;
}
/***************/
/* #header end */
/***************/

/************************/
/* #container->#colMask */
/************************/
#colMask {
	overflow:auto;
	background-image: url(/images/celda.jpg);
}
/* #container->#colMask->#colRight */
#colRight {
	float: right; 
	width: 12em; /* dado que este elemento es flotante, debe asignarse un ancho */
}
#colRight h1, #colRight h2, #colRight h3, #colRight h4, #colRight p {
	margin:0;
}
#colRight h3, #colRight h3 a {
	background-color:#0b3ecb;
	color:#DDDDDD;
	text-align:center;
}
#colRight h3 a:hover {
	background-color:#080083;
	display:block;
}
/* #container->#colMask->#colRight->#menuSide */
#menuSide {
	margin:10px 10px 0 10px;
	border:1px solid #0b3ecb;
}
#menuSide ul {
	list-style-type: none;/**/
	margin-left:0;
	padding-left:20px;
}
#menuSide li a {
	text-decoration: none;
	font-weight:bold;
}
#menuSide a:hover {
	text-decoration:underline;
}
#menuSide .activo {
	list-style-type: circle;
}
/* #container->#colMask->#colRight->#Login */
#Circulars {
	margin:10px 10px 0 10px;
	border:1px solid #0b3ecb;
}
#Circulars a {
	text-decoration: none;
	font-weight:bold;
}
#Circulars a:hover {
	text-decoration:underline;
}
#Circulars .activo {
	list-style-type: circle;
}
/* #container->#colMask->#colRight->#Login */
#Login {
	margin:10px 10px 0 10px;
	border:1px solid #0b3ecb;
}

/* #container->#colMask->#mainContent */
#mainContent {
	margin: 0 12em 0 0;
	padding:10px;
	background-color:#E0EEEF;
}

/* #container->#colMask->#footer */
#footer { 
	padding: 0 10px; /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen por encima de él. */
	background:#FFFFFF; /*background:#DDDDDD; color gris*/
	color:#000000;	
	font-weight:400;
} 
#footer p {
	text-align:center;
	margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
	padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */

}



table {
	font-size:90%;
	background-color:#edf2f8; /* color claro */
	margin-left:auto;
	margin-right:auto; 
}
table thead {
	background-color:#9e3a38; /* fondo rojo cabecera*/
}
table th {
	color:#FFFFFF;
	padding:0.5ex;
	text-align:center;
}
table th.label {
	color:#000000;
	text-align:right;
}
table td {
	padding:0.5ex;
	vertical-align:top;
}
table#program td {
	border-bottom:1px solid #000000
}
table td.center {
	text-align:center;
}
table tr.medio, table td.medio {
	background-color:#dbe5f1; /* color medio */
}
table td.oscuro {
	background-color:#d3dfee; /* color oscuro */
}

input {
	width:250px;
}
#submit {
	width:auto;
}
textarea {
	width:250px;
	height:4em;
}

/* errores en rojo */
.errors {
	color:#FF0000;
}

/* Varias clases diversas para su reutilización */
.fltrt { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
	clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

/* para el comite */
span.indent {
	display:block;
	padding-left:1em;
}

table#inovice {
	margin-left: 0;
	text-align: center;
	border-collapse: collapse;
}

table#inovice td {
	border: 1px solid #000000;
}

/* .description para las "definition list" */
dl.description dt {
	font-weight: bold;
	margin:1ex 0 1ex 0;
}
dl.description dd {
	margin-left: 1em;
}