body 
{
    background-color: #FFFFFF;
    color: #333333;
    margin: 10px;
    font: 14px "Century Gothic", Verdana, Arial, sans-serif;
}
a
{
    text-decoration: none;
    color: #2329A9;
}
a:hover
{
    color: #131659;
	text-decoration: underline;
}
div.titulo a
{  
	z-index: 0;
}
.titulo 
{  
    font-size: 20px;
	color: #011F65;
}

p.titulo{
	background-image: url(../../images/armonia/titulo.jpg);
	height: 70px;
	background-position: top left;
	background-repeat: no-repeat;
	vertical-align: bottom ;
	margin: 8px;
	padding-left: 30px;
	padding-top: 20px;
}	
.nombre_plataforma
{
	position: absolute;
    font-size: 22px;
	margin-right: 5px;
	color:#FFFFFF;
	z-index: 3;
}
.imagen_nombre_plataforma
{
    font-size: 22px;
	margin-right: 5px;
	position: absolute;
	top: 5px;
	left: 150px;
	z-index: 3;
}
#ctl00_RepeaterEscuela_ctl00_nombre_plataforma
{
    width: 140px;
	height: 80px;
	margin-left: 10px;
	border-left: 15px hidden;
	float: left;
	
}
#cabecera_izquierda
{
	z-index: 3;
}
.cabecera
{
    left: 0px;
    top: 0px;
    width: 1058px;
    height: 297px;
	z-index: 4;
	background-image: url(../../images/armonia/cabecera.jpg);
	background-repeat:no-repeat;
}
.principal
{
    width: 90%;
    padding: 25px;
    margin-left: 31px;
	/*- background-image: url(../../images/pupitre/hojacuaderno.gif); */
	background-repeat: repeat;
    z-index: 0;
}

#inicio_menu
{
	/*background-image: url(../../images/armonia/menu_inicio.jpg);
	width: 140px;
	height: 76px; */
	background-image: url(../../images/armonia/menu_inicio.jpg);
	background-position:top;
	background-repeat:no-repeat;
}
#menu
{
	background-color: #FDF7DB;
	width: 140px;
	float: left;

}	
#fin_menu
{
   background-image: url(../../images/armonia/menu_fin.jpg);
	width: 140px;
	margin-top: 20px;
	height: 60px;
	float: left;
}
.izquierda
{
	background-image: url(../../images/armonia/menu_inicio.jpg);
	background-position:top;
	background-repeat:no-repeat;
    left: 72px;
    top: 297px;
    width: 140px; 
    position: absolute;
	z-index: 900;
}
a.migas
{
    text-decoration: none;
    color: #666666;  
}
a.migas:hover
{
    text-decoration: underline;
	color: #187CA7;
}
.migasfinal
{
    text-decoration: none;
    color: #187CA7;    
}
.migasfinal:hover
{
    font-weight: normal;
}
div.migas
{
    position: absolute;
    left: 250px;
    top: 297px;
	z-index: 3;
}
.row
{
    background-color: #D9E2F0;
	background-image: url(../../images/armonia/row.jpg);
	background-position:top;
	background-repeat: repeat-x;
}
.alternatingrow
{
    background-color: #E0E2F1;
	background-image: url(../../images/armonia/alternatinrow.jpg);
	background-position:top;
	background-repeat: repeat-x;
}
.header
{
   	background-image: url(../../images/armonia/header.jpg);
	background-position:top;
	background-repeat: repeat-x;
	background-color: #FBDDCC; 
    color: #011F65;
    font-size: 14px; 
    text-align: center;
}
.pager
{
    background-color: #555555;
}
p.legal 
{
    font-family: Verdana;
    font-size: 10px;
    text-align: justify;
}
.seccion
{
    font-size: 20px;
    font: "Century Gothic", Helvetica, sans-serif;	
	background-color: #FFFFFF;
	background-image: url(../../images/armonia/seccion.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	vertical-align: bottom ;
	margin: 8px;
	padding-left: 30px;
	padding-top: 20px;
    color: #FFFFFF;
	font-weight: bold;
	height: 30px;
	width:  802px;
    z-index: 0;
}
.subtitulo
{
    font-size: 14px;
    color: #660000;
    margin-top: 10px;
}
.titulo_leccion
{
    font-size: 14px;
    margin-top: 15px;
	font: Arial, Helvetica, sans-serif;
    font-weight: bold;
	color:#0033FF;
	border-bottom: 5px solid #325BD6;
	border-bottom-style: 
	 
}
div.linea_form 
{
    display: block;
    padding-top: 10px;
    float: left;  
}
div.elemento_form 
{
    float: left;
    padding-left: 20px;    
}
a.boton:link, a.boton:visited
{
    display: block;
	padding-top: 5px;
    font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	font: "Century Gothic", Helvetica, sans-serif;
	text-decoration: none;
    background-image: url(../../images/armonia/boton.jpg);
    text-align: center;
	vertical-align: middle;	
    width: 150px;
    height: 30px;
}
a.boton:hover, a.boton:active
{
    display: block;
	padding-top: 5px;	
    font-size: 14px;
	font-weight: bold;
	color: #365783;
	font: "Century Gothic", Helvetica, sans-serif;	
    background-image: url(../../images/armonia/boton_sel.jpg);
    text-align: center;
	vertical-align: middle;
    width: 150px;
    height: 30px;
}
a.botoncito:link, a.botoncito:visited
{
    display: block;
    font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #999999;
    background-image: url(../../images/armonia/botoncito.gif);
    text-align: center;
    width: 75px;
    height: 19px;
}
a.botoncito:hover, a.botoncito:active
{
    display: block;
    font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666CBB;
	font-weight: bold;	
    background-image: url(../../images/armonia/botoncito_sel.gif);
    text-align: center;
    width: 75px;
    height: 19px;
}
div.formulario
{
    width: 750px;
}
#mini_chat
{
    display: block;
    width: 280px;
    text-align: left;
    right: 0px;
    float: right;
    color: #E1D4BB;
	background-color: #E1D4BB;
    padding: 2px;
}
#maxi_chat
{
    display: block;
    width: 90%;
    text-align: left;
    color: #E1D4BB;
    padding: 12px;
	background-color: #E1D4BB;
}
#micro_chat
{
    width: 280px;
    right: 0px;
    float: right;
    text-align: left;
	background-color: #FFF9D9;
	z-index: 2;
}

#pizarra
{
    height: 250px;
    width: 280px;
    overflow-y: scroll;
		background-color: #FFF9D9;
}

#titulo_campus
{
    background-image: url(../../images/campus.gif);
    background-position: bottom left;
    background-repeat: no-repeat;
    z-index: 2;
}
#sesion
{
    text-align: right;
    position: absolute;
    right: 0px;
	z-index: 1;
    width: 280px;
}

.chat_list
{
    font-size: 10px;
}
.envio_mensaje 
{
    text-align: center;
}
div.escribir 
{
    padding: 8px;
    border-width: 1px;
    border-style: dotted;
}
div.titulo_escribir 
{
    padding: 3px;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    background-color: #325BD6; 
    color: #FFFFCC;
}
.cabecera_hilo 
{
	color: #29607E;
	background-color: #FFFFCC;
	font-size: 17px;
    border-width: 1px;
    border-color: #FFCC66;
    border-style: dashed;
    padding: 4px;

    top: 10px;
}
.nombre_hilo 
{
    font-weight: normal;
}
td.cabecera_articulo 
{
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    background-color: #555555;
}
td.datos_articulo
{
    width: 209px;
    background-color: #885555;
    vertical-align: top;
}
td.texto_articulo 
{
    width: 100%;
    /*- background-image: url('../../images/fondo_articulo.gif'); */
    text-align: justify;
    vertical-align: top;
    padding: 3px;
}
div.datos_articulo_sup
{
    /*- background-image: url('../../images/datos_articulo_sup.gif'); */
    width: 209px;
    height: 10px;
}
div.datos_articulo_cen
{
    /*- background-image: url('../../images/datos_articulo_cen.gif'); */
    width: 199px;
    padding-left: 10px;
    padding-bottom: 15px;
}
div.datos_articulo_inf
{
    /*- background-image: url('../../images/datos_articulo_inf.gif'); */
    width: 209px;
    height: 16px;
}
.dato_articulo 
{
    width: 100%;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
}
div.otros_foros
{
    font-size: 10px;
}
span.nombre_foro 
{
    font-size: 18px;
    font-weight: bold;
}
.asignatura
{
    font-size: 14px;
}
.imagen_asignatura 
{
    margin: 10px;
}
#desplegar
{
	background-image: url(../../images/manantial/maximizar.gif);
	background-repeat: no-repeat;
}
#ocultar
{
	background-image: url(../../images/manantial/minimizar.gif);
	background-repeat: no-repeat;
}
div.selec_escuela
{
	font-size: 14px;
	border: solid 1px #555555;
	padding: 5px;
}
.separador_vertical
{
	/* background-image: url(../../images/manantial/lateralrayas.gif); */
	background-repeat: repeat-y;
	z-index: 0;
	position: absolute;
	width: 90%;
	left: 200px;
	top: 330px;
}

#lista_emoticonos
{
    float: left;
    font-size: 1px;
	z-index: 200;
	width: 100%;
	height: 100%;
	display: none;
}

/* This style sheet is intended to contain OFTEN CHANGED rules used when the Menu control adapter is enabled. */

/* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */
/* whose class is AspNet-Menu-Vertical. */
/* Note that the example menu in this web site uses relative positioning to force the menu to occupy */
/* a specific place in the web page.  Your web site will likely use a different technique to position your */
/* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
/* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
/* work well for the sample page used to demonstrate an adapted menu. */
.CampusMenu 
{
    position:relative;
	background-color: #FDF7DB;
    left: 0;
	top: 35px;

}

.AspNet-Menu-Vertical
{
    position:relative;
	background-color: #FDF7DB;
	top: 0px;
    left: 0;
    z-index: 0;	

}

/* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
/* So, effectively says: style all tiers in the menu this way... */
.CampusMenu ul
{
    background: Transparent;
}

/* Top tier */
.CampusMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
    width: 140px;
	
	
}

/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
.CampusMenu ul.AspNet-Menu ul
{
    left: 9.5em;
    top: 15px;
    z-index: 400;
}

/* The menu adapter generates a list item (li) in HTML for each menu item. */
/* Use this rule create the common appearance of each menu item. */
.CampusMenu ul.AspNet-Menu li
{
    height: 25px;
	background-color: #FDF7DB;
	/*- background-image: url(../../images/pupitre/pizarra.gif); */
    z-index: 0;
}

.CampusMenu ul.AspNet-Menu li li
{
    height: 23px;
    width: 201px;
	background-image: url(../../images/armonia/submenu.gif);
	background-position: left;
	background-repeat: no-repeat;
    padding-left: 0px;
	margin-left: 0px;
    padding-top: 0px;
    z-index: 500;
}
.CampusMenu ul.AspNet-Menu li li a
{
    /*color: #292FAB;*/
    padding-top: 0px;
    padding-left: 30px;
}

.CampusMenu ul.AspNet-Menu li:hover li:hover a,
.CampusMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a
{
    /*color: #3D4289;*/
	padding-top: 0px;
	padding-left: 30px;
	font: "Century Gothic", Helvetica, sans-serif;
	background: transparent url(../../images/armonia/check_peq.gif) left no-repeat;
}

/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
.CampusMenu ul.AspNet-Menu li a,
.CampusMenu ul.AspNet-Menu li span
{
    color: #3D4289;

	font: Arial, Helvetica, sans-serif;
    padding: 4px 2px 4px 28px;
    z-index: 0;
}

/* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
.CampusMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.CampusMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    color: #3D4289;
	font: Arial, Helvetica, sans-serif;
}

/* Not used presently.  This is here if you modify the menu adapter so it renders img tags, too. */
.CampusMenu ul.AspNet-Menu li a img
{
    border-style: none;
    vertical-align: middle;
}

/* When you hover over a menu item, this rule comes into play. */
/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
/* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
/* See MenuAdapter.js (in the JavaScript folder). */
.CampusMenu ul.AspNet-Menu li:hover, 
.CampusMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    padding-left: 0px;
	
}
.CampusMenu ul.AspNet-Menu li:hover li:hover, 
.CampusMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover
{
    height: 23px;
	
}

/* While you hover over a list item (li) you are also hovering over a link or span because */
/* the link or span covers the interior of the li.  So you can set some hover-related styles */
/* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
.CampusMenu ul.AspNet-Menu li a:hover,
.CampusMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: #898ECB;
	text-decoration: underline;
	font: Arial, Helvetica, sans-serif;
	background: transparent url(../../images/armonia/check.gif) left center no-repeat ;
	marging-left: 0px;
}

a.boton2:link, a.boton2:visited
{
    display: block;
	padding-top: 5px;
    font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	font: "Century Gothic", Helvetica, sans-serif;
	text-decoration: none;
    background-image: url(/images/armonia/boton2.jpg);
    text-align: center;
	vertical-align: middle;	
    width: 150px;
    height: 30px;
}
a.boton2:hover, a.boton2:active
{
    display: block;
	padding-top: 5px;	
    font-size: 14px;
	font-weight: bold;
	color: #365783;
	font: "Century Gothic", Helvetica, sans-serif;	
    background-image: url(/images/armonia/boton2_sel.jpg);
    text-align: center;
	vertical-align: middle;
    width: 150px;
    height: 30px;
}
