.add{width: 400px; height: 200px; font: 1em verdana;}
.centrar{text-align:center;}
INPUT {background-color: #c8d5e4; color: #666; text-align:center;}
IMG{margin: 5px;}
BODY {background-color: #9dbad9; font: 11px verdana;}
H1 { 
 margin-bottom: 0;
 padding: 4px 0 10px 10px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
 color: #69C;
 font: bold 1.8em Trebuchet Ms;
 background: url(images/h1_01.gif) no-repeat left top; /* Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */
 }
h1 span {
 padding: 4px 20px 10px 5px;
 margin: 0 0 3px 0;
 background: url(images/h1_02.gif) no-repeat right top; /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
}
H2 {font: 1.2em trebuchet MS; background: red; color: white; text-align: center; padding: 2px 10px 2px 0px; font-weight: bold;}
H3{font: 1.4em trebuchet MS;color: #6699CC;}
#t2{background-color: white; width: 760px; margin:auto;}
#b{width: 760px;margin: auto;}
#banner {background-color: #c7d8f9;}
#cuerpo{background: url("images/online.jpg") no-repeat top center;color:#444;}
#menu{width: 125px;}
#menu a{text-decoration: none; color:black;}
#menu a:hover{color: white;}
#cursos{width: 350px;}
#cursos ul{margin: 0px 0px 0px 0px;list-style: disc; padding: 0px 0px 0px 18px;}
#familias{text-align:center; margin: 0; padding: 0;}
.noli {list-style: none;}
.menu {font: 9px verdana; font-weight: bold; padding: 4px 2px 4px 5px;border: 1px solid white;}
.t{background: #6699CC; color: white}
.s {background:#c8d5e4;}
.ptitulo {text-align: center; color: #000; font-weight: bold;font-size: 12px;}
a.familia{MARGIN-TOP: 1PX;PADDING: 2px 5px 2px 5px;DISPLAY: block;COLOR: white;HEIGHT: 15px;TEXT-DECORATION: none;TEXT-ALIGN: center;BACKGROUND-COLOR: #6699CC;}
a.familia:hover{COLOR: #000;border: 1PX SOLID BLACK;}
#nav{letter-spacing: 1px;border-bottom: 1px solid #6699CC; padding: 5px 2px 0px 2px;}
#nav a{padding: 2px 5px 0px 5px;text-decoration: none;color: #6699CC; font-size: 1.2em; border-top: 1px solid #9dbad9;border-left: 1px solid #9dbad9;border-right: 1px solid #9dbad9;}
#nav a:hover{background: #6699CC; color: white;}
#nav a:hover{background: #6699CC; color: white;}
a.cursos {color: blue; text-decoration: none; font-size: 1em;}
a.cursos:hover {text-decoration: underline;}

/*********************** LISTAS DE DEFINICION *******************************/

dl .nota {
	color: #999;
	background: #f8fafc url(images/information.gif) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #69c;
	border-bottom: 2px solid #69c;
	line-height: 1.3em;
	margin-left: 1.8em; 
}

dl .nota a { text-decoration: none; color: #c00; border-bottom: 1px dashed #c00;}
dl .nota i , dl b , dl i { color: #c00; }

dl ul {margin: 1em 0 1em 1.5em;}
dl ul li {list-style-type:none; margin: .5em 0; color: #69c;}

dt { 

 height: 35px;
 margin: 0 0 .5em 1em;
 padding: 0px 0 3px 15px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
 color: #c00;
 font: bold .9em Trebuchet Ms;
 background: url(images/h1_01.gif) no-repeat left top; /* Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */
 }

dt a.cat_cursos , dt span  {
 display: block;
 height: 35px;
 color: #c00;
 text-decoration: none;
 padding: 10px 15px 3px 0px;
 background: url(images/h1_02.gif) no-repeat right top; /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
}

dd {margin: 0 0 .5em 2.5em;  }
dd a {
	font: 1.2em Trebuchet MS;
	text-decoration: none;
	background: url(images/flecha.gif) 2px 2px no-repeat ;
	padding: 0 0 0 1.5em;
}


/**************** BARRA DE NAVEGACION  ************************************/
#nav2 ul { 
padding: 1em 0;
}
#nav2 li { 
 display: inline;
 margin: 0 0 .5em 1em;
 padding: .5em 0 1em 15px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
 color: #c00;
 font: bold 1.2em Trebuchet Ms;
 background: url(images/h1_01.gif) no-repeat left top; /* Rollover effect using "Fast rollovers without preload" concept for the left part of the tab */
 }
 
* html body #nav2 li { padding: 0 0 1em 15px;} /* Corrige la subida de la imagen de fondo en IE */

#nav2 li a  {
 color: #c00;
 text-decoration: none;
 padding: .5em 15px 1em 0px;
 background: url(images/h1_02.gif) no-repeat right top; /* Rollover effect using "Fast rollovers without preload" concept for the right part of the tab */
}

.boton{font-size:10px;font-family:Verdana;font-weight:bold;color:white;background:#9dbad9;border:0px;width:80px;height:19px;}
.boton2{font: 10px Verdana; font-weight:bold;color:#000;background:#eee;border:1px solid black;width:300px;height:19px;margin: 2px 20px 2px 0px;}
.boton3{ font:10px Verdana; font-weight:bold; color:#fff; background:#6699CC; border:1px solid black; width:300px; margin: 12px 20px 2px 0px;padding: 2px 5px 2px 5px;}
.ins_tit{font-size: 1.2em; ;color: red;padding: 2px 0px 2px 10px;border-bottom: 1px dashed red;padding:0px 0px 2px 0px;}
.clave{background-color: #6699CC;color: #fff;text-align: center;font-weight: bold;padding: 3px 3px 3px 3px;}
.valor{background-color: #9dbad9;}
.inputgrande{width:210px;}
.imputmedio{width:90px;}
.imputpeque{width:20px;}
.footer{background-image: url(images/foot.gif); height: 20px;text-align: center; color: #fff; padding: 5px 0px 2px 0px;}
.footer a{color:#222; text-decoration: none;}
.footer a:hover{font-weight: bold;}
.pasos{color: #6699CC; font-size: 1.1em; margin-left: 25px;}
.direccion{background-color:#ccc; color: #6699CC;padding: 5px 2px 5px 2px; font-size: 1.1em;font-weight: bold;}