/* mi_estilo.css                             */
/*    #ID selector	.CLASS selector       */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body {
	font-family: sans-serif; color: black;
	text-align: justify;
	background-image: url(../img/fondo.jpg);
	font-size: medium;}
a{color: #006699; font-weight:bold; text-decoration: none;}
/*a:link, a:visited {text-decoration: none;}*/
a:hover{text-decoration: underline;}

ul {list-style-position:inherit;}
ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: square; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: circle; }
ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { list-style-type: square; }

/*h1{font-family: sans-serif; font-size: 200%; color: black; margin: 0px; padding: 0px; text-shadow: 2px 2px 3px grey;}
h2{font-family: sans-serif; font-size: 170%; color: #006699; margin: 0px; padding: 0px;}
h3{font-family: sans-serif; font-size: 140%; color: #006699; margin: 0px; padding: 0px;}
h4{font-family: sans-serif; font-size: 110%; color: #006699; margin: 0px; padding: 0px;}
h5{font-family: sans-serif; font-size: 100%; color:  black; margin: 0px; padding: 0px;}
h6{font-family: sans-serif; font-size: 110%; color: black; margin: 0px; padding: 0px; text-align: center;} */

h1{font-family: sans-serif; font-size: 200%; color: black;}
h2{font-family: sans-serif; font-size: 170%; color: #006699;}
h3{font-family: sans-serif; font-size: 140%; color: #006699;}
h4{font-family: sans-serif; font-size: 120%; color: #006699;}
h5{font-family: sans-serif; font-size: 100%; color: black;}
h6{font-family: sans-serif; font-size: 120%; color: black; text-align: center; margin: 0px; padding: 5px;}


/***********************************************/
/* Layout Divs por ID                             */
/***********************************************/

#arriba_jst {border-bottom: 1px solid #cccccc; float: none;}
#centro_jst {float: none;}
#abajo_jst {border-bottom: 1px solid #cccccc; text-align: center; clear: both;}

#izq_20 {
	float: left; 
	width: 20%;
	margin-top: -1px;
	margin-right: 1%;
	margin-bottom: 5px;
	border: #cccccc 1px solid;
	background-image: url(../img/fondo.jpg);
	border-radius: 0px 20px 20px 20px; 
	box-shadow: 5px 5px 5px grey;
}

#izq_20 a {color: #006699; font-weight: normal;}

#izq_20 ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
} 
#izq_20 li {
	padding: 3px 6px 3px 3px;
	border-top: 1px solid #cccccc;
}
#der_20p {
	width: 20%;
	float: right;
	margin-top: -1px;
	margin-left: 10px;
	padding: 5px;
	border: #cccccc 1px solid;
	/*background-image: url(../img/fondo.jpg);*/
	border-radius: 0px 0px 20px 20px;
	box-shadow: 5px 5px 5px grey;
}
#der_640 {
	width: 640px;
	float: right;
	margin-top: -1px;
	margin-left: 10px;
	padding: 5px;
	border: #cccccc 1px solid;
	/*background-image: url(../img/fondo.jpg);*/
	border-radius: 0px 0px 20px 20px;
	box-shadow: 5px 5px 5px grey;
}
#der_25 {
	width: 25%;
	float: right;
	margin-top: -1px;
	margin-left: 10px;
	padding: 5px;
	border: #cccccc 1px solid;
	background-image: url(../img/fondo.jpg);
	border-radius: 20px 0px 20px 20px;
	box-shadow: 5px 5px 5px grey;
}
#der_25 a {color: #006699; font-weight: normal;}

#img_der {
	float: right;
	padding-top: 10px;	
	padding-left: 10px;
	padding-bottom: 10px;
}
#img_izq {
	float: left;
	padding-top: 10px;	
	padding-right: 10px;
	padding-bottom: 10px;
}
#img_newline {
	clear: both;
}
#art_80 {
	box-sizing:border-box; 
	width: 78.5%;
	float: left;    
	margin-bottom: 0.5%;
	margin-top: -1px;
	/*margin-left: 0.8%; */
	padding: 5px;
	border: #cccccc 1px solid;
	background-image: url(../img/fondo.jpg);
	border-radius: 20px 0px 20px 20px;
	box-shadow: 5px 5px 5px grey;
}
#art_50 {
	box-sizing:border-box; 
	width: 49%;
	float: left; 
	/*margin-top: 0.5%; */
	margin-bottom: 0.5%;
	margin-left: 0.8%;
	padding: 5px;
	border: #cccccc 1px solid;
	background-image: url(../img/fondo.jpg);
	border-radius: 20px 0px 20px 20px;
	box-shadow: 5px 5px 5px grey;
}
/*=================<div id="menucss">=============================
funciona con elementos de menucss identados ul-li, siempre que no tengan blancos (usar chr(160)! ! !)
el numero de niveles que se puede poner es ilimitado. para no hacer lo de los falsos blancos es poner
white-space: nowrap; dentro de la div menucss se necesita que el menucss esté dentro de <div id="menucss">
=====================background-image:url(../img/fondo.jpg)=====background-color: #eeeeee;=====================*/

#menucss {white-space: nowrap; text-align: left; font-size:medium; color: #006699; margin-top: -1px; padding-right:15px; padding-bottom: 5px; float:left;} 
#menucss ul {list-style-type: none; margin:0px; background-image:url(../img/fondo.jpg); width: auto; padding-left:0px; border: #cccccc 1px solid; border-radius: 0px 20px 20px 0px; box-shadow: 5px 5px 5px grey;} 
#menucss ul li ul {display: none; } /* display none necesario para que no salgan los submenucsss antes de tiempo*/
#menucss ul li:hover > ul {display: block; position: absolute; top: -1px; left:100%; } /**/
#menucss ul li {padding: 3px 6px 3px 3px; border-top:solid 1px #cccccc;}
#menucss ul li a {text-decoration:none;} 
#menucss ul li:hover {position: relative; background-color: #cccccc;}

/***********************************************/
/* Components por CLASS                           */
/***********************************************/
/************** .feature styles ***************/
.floating-box {display: inline-block; padding: 5px}
.sensu {color: red;}
.fossil {color: grey;}
.titulo {font-family: sans-serif; text-align: center; font-size: 200%; font-weight:bold; color: black; margin: 0px; padding: 0px; text-shadow: 2px 2px 3px grey;}
.text_60 {font-size: 60%;}
.text_80 {font-size: 80%;}
.text_80C {font-size: 80%; text-align: center;}
.text_80j {font-size: 80%; text-align: justify;}
.text_80D {font-size: 80%; text-align: right;}
.text_c {text-align: center;}
.text_i {text-align: left;}
.text_j {text-align: justify;}
.text_d {text-align: right;}
.text_120 {font-size: 120%;}
.text_120C {font-size: 120%; text-align: center;}
.text_120j {font-size: 120%; text-align: justify;}
.text_120D {font-size: 120%; text-align: right;}
.divide_linea_rayas {border: thin solid #cccccc; list-style: none;}

.buttonize{display:inline-block;padding:.4em .7em;border:1px solid #666;border-radius:8px;background-color:#CCC;background-image:-webkit-linear-gradient(top,#DDD,#BBB);background-image:-moz-linear-gradient(top,#DDD,#BBB);background-image:linear-gradient(top,#DDD,#BBB)}
.buttonize:link,.buttonize:visited,.buttonize:hover,.buttonize:active{text-decoration:none;color:#444}.buttonize:hover{background-color:#BBB;background-image:-webkit-linear-gradient(top,#DDD,#AAA);background-image:-moz-linear-gradient(top,#DDD,#AAA);background-image:linear-gradient(top,#DDD,#AAA)}
.buttonize:active{background:#CCC}
.buttonize.left{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0;border-right-width:0}
.buttonize.middle{border-radius:0;margin-left:0;margin-right:0;border-right-width:0}
.buttonize.right{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.buttonize.bold{font-weight:bold}