@media only screen and (max-width: 600px) {
body {
	margin: 0;
	padding: 0;
	font: 1em arial, helvetica, sans-serif; }
 
h1, h2 {
	font: bold 100% verdana, arial, helvetica, sans-serif;
	color: #f70;
	text-align: center;
	margin-top: 10%; }
 
hr { color: #bdf; }
 
p { font-size: 75%; }
 
/*	Algunos elementos que tendr?n las mismas caracter?sticas en toda la p?gina	*/
#pagina {
	width: 80%;
	margin: 0 auto; }
 
.derecha {
/*	margin: 5px 5%;*/
	margin: 0.5%;
/*	padding: 5px; */
	padding: 0.1%;
	border: solid 1px #eee; }

img {
    max-width: 100%;
    height: auto;
}
#descripcion {
	background: #f6b841;
	font: normal 0.9em tahoma, arial, sans-serif;
	color: #ffffff;
    text-decoration: bold;
}   
td	{
	background: #E9ECEE;
	font: normal 0.9em tahoma, arial, sans-serif;
	color: #169;
}
#pie {
	width: 100%;
/*	height: 48px; */
	height: 5%;	
	margin-top: 1px;
	padding: 2px 1%;
	background: url(img/fondo2.png); 
	float: left;
	text-align: center; }
}

@media only screen and (min-width: 600px) {
body {
	margin: 0;
	padding: 0;
	font: 1em arial, helvetica, sans-serif; }
 
h1, h2 {
	font: bold 100% verdana, arial, helvetica, sans-serif;
	color: #f70;
	text-align: center;
	margin-top: 10%; }
 
hr { color: #bdf; }
 
p { font-size: 75%; }
 
/*	Algunos elementos que tendr?n las mismas caracter?sticas en toda la p?gina	*/
#pagina {
	width: 80%;
	margin: 0 auto; }
 
.derecha {
/*	margin: 5px 5%;*/
	margin: 0.1%;
/*	padding: 5px; */
	padding: 0.1%;
	border: solid 1px #eee; }

img {
    max-width: 100%;
    height: auto;
}
 
/*	Aqu? se establecen las propiedades de los componentes de la cabecera de la p?gina	*/
#imagencabecera img { border: 0; }
 
#imagencabecera {
	width: 100%;
	height: 25%;
/*	height: 120px; */
	background: url(img/fondo1.jpg); }
 
/* Propiedades del cuerpo central de la p?gina, donde aparecen los contenidos principales	*/
#contenedor {
	width: 100%;
	margin: 0 auto; }
 
#central {
	width: 80%;
	float: right;
	padding: 0;
	background: #fff; }
 
.tercio {
	width: 30%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%; }
 
	.tercio ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px; }
 
	.tercio li {
		margin: 5px;
		padding: 0 0 0 8px; }
 
/* Componentes y sus propiedades de la columna izquierda	*/
#columna {
	width: 18%;
/*	height: 350px; */
	height: 30%;
/*	padding: 10px 1%; */
	padding: 1%;
	float: left;
	background: white;
	display: block; }
 
	#columna h3 {
		font: bold 90% verdana, tahoma, sans-serif;
		color: #169;
		text-align: center;
		margin: 0;
		padding: 0 10px 5px 15px; }
 
	#columna ul {
		list-style: circle;
		padding: 0 0 0 25px;
		margin: 0; }
 
	#columna li a {
		color: #169;
		text-decoration: none;
		font-size: 80%; }
 
		#columna li a:hover {
			color: #f60;
			text-decoration: underline; }
 
.col {
	width: 100%;
	background: url(img/medcol.jpg) repeat-y; }
 
.topcol {
	width: 100%;
/*	height: 20px; */
	height: 10%;
    background: url(img/col.jpg) top left no-repeat; }
 
.botcol {
	width: 100%;
/*	height: 20px; */
	height: 5%;
	background: url(img/col.jpg) bottom left no-repeat;
	margin-bottom: 5px; }
 
.topcolr {
	width: 100%;
/*	height: 20px; */
	height: 5%;
	background: url(img/colr.jpg) top right no-repeat; }
 
.botcolr {
	width: 100%;
/*	height: 20px; */
	height: 5%;
	background: url(img/colr.jpg) bottom right no-repeat; }
 
.colr {
	width: 100%;
	background: url(img/medcolr.jpg) right repeat-y; }
 
/*	A continuaci?n, se colocan los elementos componentes del pie de p?gina	*/
#pie {
	width: 100%;
/*	height: 48px; */
	height: 5%;	
	margin-top: 1px;
	padding: 2px 1%;
	background: url(img/fondo2.png); 
	float: left;
	text-align: center; }
 
	#pie p {
		font: normal 70% arial, helvetica, sans-serif;
		padding: 0;
		margin: 5px 0 0 0;
		color: #fff; }
 
	#pie a {
		color: black;
		text-decoration: none;
		padding: 0;
		margin: 5px 0 0 0;
		font-size: 70%; }
 
		#pie a:hover { color: white; }
 
.icono {
	border: 0;
/*	width: 60px; */
	width : 10% ;
/*	height: 20px; } */
	height: 5%; }
	
 
/*		AQU? COMIENZA EL DESARROLLO DEL MEN?	*/
/*	Esto corresponde al men? fijo, el que siempre estar? visible y se ubica debajo de la cabecera de la p?gina	*/
#botonera {
	width: 100%;
/*	height: 30px; */
    height: 5%;
	margin: 0;
	background: url(img/boton-menu3.jpg) repeat-x; }
 
.boton {
	width: 20%;
/*	height: 30px; */
    height: 8%;
	float: left;
	text-align: center;
	margin-left: 1px;
	background: url(img/boton-menu.jpg) repeat-x;
	font-weight: bold;
	font-size: 75%;
/*	line-height: 30px;*/ 
    line-height: 15%;}
 
	.boton:hover { background: url(img/boton-menu2.jpg) repeat-x; }
 
	.boton a {
		color: white;
		text-decoration: none;
		display: block; }
 
		.boton a:hover { color: black; }
 
	/*	Desarrollo de los men?s desplegables	*/
.boton div {
		position: relative;
		width: 94.5%;
		background: url(img/desplegable3.png);
		font-size: 100%;
		visibility: hidden;
		text-align: left;
 		padding: 10px 2px 10px 10px;
/*		padding: 10% 2% 10% 10%; */ 
 		font: bold 100% arial; }
 
	.boton:hover div {visibility: visible; }
 
	.boton ul {
    	margin: 0 10px; 
/*        margin: 5%; */
		padding: 0;
		list-style-image: url(img/desplegable.png); }
 
	.boton li a {
		color: white;
		text-decoration: none;
		padding: 3px; 
        }
 
		.boton li a:hover { color: #fa6; }
td	{
	background: #E9ECEE;
	font: normal 0.9em tahoma, arial, sans-serif;
	color: #169;
}
#descripcion {
	background: #f6b841;
	font: normal 0.9em tahoma, arial, sans-serif;
	color: #ffffff;
}        
#negativo {
	background: #E9ECEE;
	font: normal 0.9em tahoma, arial, sans-serif;
	color: #ff0000;
}
}