html,body{margin:0;padding:0}
/*
.color_primary_0 { color: #5B8CC3 }
.color-primary-1 { color: #ECF2F9 } color de base
.color-primary-2 { color: #82ACDB }
.color-primary-3 { color: #3C6FA9 }
.color-primary-4 { color: #225A98 }


IMPORTANTE
NO ES NECESARIO HACER VARIBLES PARA MODIFICAR LOS ESTILOS, PORQUE CADA VARIABLE ES UN ESTILO
POR EJEMPLO NO PUEDES APLICAR UN BACKGRAOUND PARA UN BACKGROUND
CUANDO MODIFICAS EL BACK GROUND DEL BODY SOLO AFECTARA AL BODY Y ASI EN CUALQUIER CASO
*/

body{font: 100%/1.3 TrebuchetMS,Arial,sans-serif;
    text-align: left;background: #ECF2F9 ;padding-bottom:20px} /* fondo de Toda la Pagina	.color-primary-0  */
a { color: #0066B3; background: inherit; text-decoration: none;}
h1 { font: bold 2.1em Arial, Arial, Sans-Serif; color: #036DA7 }
h2 { font: bold 1.1em Arial, Arial, Sans-Serif; padding: 0; margin: 0; }

/*
Color de barra superior
*/
/*div#header{width:100%;overflow:hidden;background: #7E2217; }*/
div#header{width:100%;overflow:hidden;background: #ECF2F9; } /* cambia el fondo del encabezado */  /*#d9ff00*/  /*#fff*/
div#header h1,div#menu{width:770px;margin:0 auto;text-align:left}
/*div#header h1{padding: 20px 0 10px;color: #333399}*/
div#header h1{padding: 20px 0 10px;color: #336699} /*CAMBIA EL COLOR DEL TITULO*/

ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0} /**/
ul#nav{float:right;font-size: 100%} /*10%*/
ul#nav li{float:left; margin-left: 3px; text-align: center; width: 105px;font-size: 16px}
ul#nav a{float:left;width: 108px;padding: 3px 0;background: #ECF2F9;text-decoration:none;color: #336699; border-top : 0px solid #fff; border-left : 0px solid #fff; border-right : 0px solid #fff;} /*width cambia el ancho del cuadro de gestion y salir, padding cambia el atlo de los botones de gestion y salir, background cambia el fondo de los botones de gestion y salir sin pasar el mouse, text decoration no se que hace, color cambia el color de las letras de los botones de gestion y salir, los border top/left/right cambia el ancho y el color de los margenes de los botones de gestion y salir*/

ul#nav a:hover{background: #336699;color: #eee} 	/*background cambia el color de fondo de los botons de gestion y salir al pasar el mouse, color cambia el color de las letras de los botones al pasar el mouse*/

ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #d9ff00;color: #d9ff00} /**/ /*#d9ff00*/  /*#FFF*/

#right { /*      cambia el formato del cuadro donde se observa toda la informacion */
	font-size: 13px;
	float: left;
	width: 82%;
	padding: 1em;
	margin-bottom: 1.2em;
	background: #a1b6c9;
	text-align: justify;
}

#left #nav{float: 0; margin: 0 50px 0 0;} { /*	#nav modifica las caracteristicas desplazamiento de los links como la distancia de los menus de la derecha su desplazamiento etc etc, #left afecta el formato y desplazamiento del texto de los links*/
	float: 0;
	width: 15%;
	margin: 0 0 0 0;
	text-align: center;

}


 #left:hover
 {
	/*Color de barra lateral derecha de los menus 500px    /*#d9ff00*/  /*#fff*/

	text-align: center;

	padding: 0;
	margin: 0 0 0 0;								/*esto me permite cambiar el color delos menus al pasar el mouse pero todavia me falta que puedan ser */
	font-size: 16px;						/*links en todo el boton*/
	background : #ECF2F9;
	color: #eee;
}

/*
 #left .box: { // lo ocupas en main_.php
	/*Color de barra lateral derecha de los menus  /*#d9ff00*/  /*#fff*/  /*

	text-align: center;
	padding: 0;
	margin: 0;
	font-size: 16px;
	background : #ECF2F9;
	color: #eee;
} */


#content { 	/*cambia el formato de las letras de la informacion principal*/ /*#d9ff00*/  /*#1d428a*/
font: 100%/1.3 TrebuchetMS,Arial,sans-serif;
	margin: 0 auto;
    padding: 15px;
	background: #ECF2F9; /*fondo de la parte complementaria entre botnes y cuerpo*/
	color:#1d428a; /*cambia el color de las letras del cuerpo de texto*/
}

ul {  padding: 0; margin: 0;}
li {  list-style-type: none;}

.tabla_texto_reducido { background-color:#eee; border-collapse:collapse; } /*cambia el color de la tabla de detalles (texto reducido)*/ /*#d9ff00*/  /*#eee*/
.tabla_texto_reducido th { background-color:#000;color:white;width:50%; } /*no utilizado (aun)*/
.tabla_texto_reducido td, .tabla_texto_reducido th { padding:4px; font-size: 11px;} /*ancho de la tabla de detalles*//*100px*/  /*4px*/

.tabla_texto_muy_reducido { background-color:#eee;border-collapse:collapse; } /*no hace nada*/
.tabla_texto_muy_reducido th { background-color:#000;color:white;width:50%; } /*no utilizado (aun)*/
.tabla_texto_muy_reducido td, .tabla_texto_muy_reducido th { padding:4px; font-size: 9px;} /*#d9ff00*/  /*#fff*/

.tabla_texto_muy_muy_reducido { background-color:#eee;border-collapse:collapse; } /*no hace nada*/
.tabla_texto_muy_muy_reducido th { background-color:#000;color:white;width:50%; } /*no utilizado (aun)*/
.tabla_texto_muy_muy_reducido td, .tabla_texto_muy_reducido th { padding:2px; font-size: 7px;} /*#d9ff00*/  /*#fff*/

#button1 { /*no tiene funcion*/
  color: #1d428a;
}