* { margin: 0; padding: 0; }

body { font-family: Arial, Helvetica, sans-serif; }

#prueba2 { width: 645px; }

#contenedor { width: 98%; border: 1px solid #DFDFDF; padding: 1px; }

/*  Cabecera  */
#header { width: 100%; position: relative; margin-bottom: 5px; } 
#header .modulo .cab{ background:#40b3ba; width:100%; height:34px; overflow: hidden; }
#header .modulo .cab h2{ color:#fff; background:#000; float:left; font-size:18px; text-transform:uppercase; padding:7px 10px 6px 10px; font-weight:normal; }
#header .modulo .cab .triangulo{ float:left; }
#header #botonera { width: 100%; list-style-type: none; }
#header #botonera li { width: 16%; height: 19px; float: left; font-size: 11px; padding: 5px 0 0 0; margin: 0.38%; text-align: center; background: -moz-linear-gradient(top, #FFF , #E9E8E7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF),  to(#E9E8E7)); cursor: pointer; }
#header #botonera li:first-child, #header #botonera li:last-child { margin-right: 0; }
#header #botonera li:hover, #header #botonera li.activo { background: none; background-color: #40b3ba; font-weight: bold; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#header #botonera li { margin: 0.38% 0.48% 0.38% 0.47%; }
	#header #botonera li:first-child { margin: 0.38% 0.50% 0.38% 0; }
	#header #botonera li:last-child { margin: 0.38% 0 0.38% 0.50%; }
}

/* Cabecera-Ayuda */

#header > img { width: 21px; height: 21px; position: absolute; top: 7px; right: 2%; }
#ayuda > div { width: 99.9%; background-color: #fff; display: none; position: absolute; top: 35px; font-size: 12px; border-bottom: 5px solid #000; }
#ayuda > div img { position: absolute; right: 2.5%; top: -6px; }
#ayuda > div p { margin: 5px; color: #999; }
#ayuda > div p.negrita { font-weight: bold; color: #666; }

/* Tablas */

#tablas { clear: both; padding-top: 5px; }
#tablas .tabla-puntos, #tablas .tabla-geopolitico, #tablas .tabla-pib, #tablas .tabla-poblacion, #tablas .tabla-idioma { display: none; }

#geopolitico, #clasico, #puntos, #pib, #poblacion, #idioma { width: 100%; height: 400px; overflow: hidden; clear: both; }

#tablas .cabecera { width: 100%; height: 30px; font-size: 11px; margin-top: 3px; }
#tablas .cabecera > div { float: left; overflow: hidden; }
#tablas .cabecera .nombre { width: 61.7%; height: 23px; padding-top: 7px; }
#tablas .cabecera .nombre p { margin-left: 5px; }
#tablas .cabecera .oro, #tablas .cabecera .plata, #tablas .cabecera .bronce { width: 12%; border-left: 1px dotted #DFDFDF; text-align: center; }
#tablas .cabecera .bronce { border-right: 1px dotted #DFDFDF; }

#tablas .linea { width: 100%; height: 21px; color: #333; font-size: 12px; }
#tablas .linea:hover { font-weight: bold; }
#tablas .linea > div { float: left; overflow: hidden; background: -moz-linear-gradient(top, #FFF , #E9E8E7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF),  to(#E9E8E7)); background-color: #F5F4F4; border-bottom: 1px solid #DFDFDF; }
#tablas .linea > div p { height: 18px; padding-top: 3px;}
#tablas .linea .nombre { width: 61.7%; height: 21px; }
#tablas .linea .nombre p { padding-left: 5px; }
#tablas .linea .nombre p.id { width: 28px; float:left; }
#tablas .linea .nombre img { position: relative; top: 3px; margin-left: 5px; }
#tablas .linea .oro, #tablas .linea .plata, #tablas .linea .bronce { width: 12%; height: 21px; border-left: 1px dotted #DFDFDF; text-align: center; } 
span { height: 21px; padding-top: 3px; }
#tablas .linea .bronce { border-right: 1px dotted #DFDFDF; }

/* Puntos */

#tablas .tabla-puntos .cabecera .nombre { width: 51.7%; }
#tablas .tabla-puntos .cabecera .puntos { width: 10%; height: 23px; text-align: center; padding-top: 7px; }

#tablas #puntos .linea .nombre { width: 51.7%; height: 21px; }
#tablas #puntos .linea .puntos { width: 10%; height: 21px; text-align: center; }

/* PIB, Poblacion */

#tablas .tabla-pib .cabecera .nombre, #tablas .tabla-poblacion .cabecera .nombre  { width: 31.3%; padding-top: 7px; }
#tablas .tabla-pib .cabecera .media, #tablas .tabla-pib .cabecera .puntos, #tablas .tabla-poblacion .cabecera .media, #tablas .tabla-poblacion .cabecera .puntos  { width: 10%; height: 23px; border-left: 1px dotted #DFDFDF; text-align: center; padding-top: 7px; }
#tablas .tabla-pib .cabecera .pib, #tablas .tabla-poblacion .cabecera .poblacion { width: 10%; height: 23px; text-align: center; border-left: 1px dotted #DFDFDF; padding-top: 7px; }

#tablas #pib .linea .nombre , #poblacion .linea .nombre{ width: 31.3%; height: 21px; }
#tablas .tabla-pib .linea .media, #tablas .tabla-pib .linea .puntos, #tablas .tabla-poblacion .linea .media, #tablas .tabla-poblacion .linea .puntos  { width: 10%; height: 21px; border-left: 1px dotted #DFDFDF; text-align: center }
#tablas #pib .linea .pib, #poblacion .linea .poblacion { width: 10%; height: 21px; text-align: center; border-left: 1px dotted #DFDFDF; }


/* Grupo de nombres para grupos geopoliticos e idiomas */

#tablas .tabla-geopolitico .nombres { width: 100%; max-height: 60px; position: absolute; bottom: 0; left: 0; display: none; }
#tablas .tabla-idioma .nombres { width: 100%; max-height: 60px; position: absolute; bottom: 0; left: 0; display: none; }

/* Scroll */

body #clasico, body #puntos, body #pib, body #geopolitico, body #idioma, body #poblacion {background-color: #transparent; }