/*	Archivo CSS de la p?gina "ejemplo.html"	*/
/*	Este archivo puede ser empleado para el aprendizaje de t?cnicas CSS	*/
/*	LaWebera.es :: Dise?o Web :: Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.	*/
/*	Creado por Andr?s Fern?ndez el 28/04/2010	para LaWebera.es - http://www.lawebera.es/	*/
/* Aqu? establecemos los elementos generales que influyen en toda la p?gina, excepto en aquellos lugares donde se especifican otros valores	*/
/* Propiedades establecidas para todo lo contenido dentro de las etiquetas body */
body {
	margin: 0;
	padding: 0;
	font: 1em arial, helvetica, sans-serif;
	background: url(fondo.jpg); 
	}
 
h1, h2 {
	font: bold 80% verdana, arial, helvetica, sans-serif;
	color: #f70;
	text-align: center;
	margin-top: 20px; }
 
hr { color: #bdf; }
 
p { font-size: 75%; }
 
/*	Algunos elementos que tendr?n las mismas caracter?sticas en toda la p?gina	*/
#pagina {
  position:relative; 
	width: 1100px;
	margin: 0 auto;
	background: #BDBDBD; 
	overflow: hidden;  
	z-index:5; 
	visibility: visible; 
	}
 
.derecha {
	margin: 5px 5%;
	padding: 5px;
	border: solid 1px #eee; }
 
/*	Aqu? se establecen las propiedades de los componentes de la cabecera de la p?gina	*/
#imagencabecera img { border: 0; }
 
#imagencabecera {
	width: 100%;
	height: 150px;
	/*background: url(img/fondo1.jpg); */ 
	}
 
/* Propiedades del cuerpo central de la p?gina, donde aparecen los contenidos principales	*/
#contenedor {
	width: 100%;
	margin: 0 auto; 
	background: #BDBDBD;}
 
#central {
	width: 80%;
	float: right;
	padding: 0;
	background: #BDBDBD; }

.tercio2 {
	width: 70%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%;
	background: #BDBDBD; 
	}
 
	.tercio2 ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px;
		background: #BDBDBD; }
 
	.tercio2 li {
		margin: 5px;
		padding: 0 0 0 8px;
		background: #BDBDBD; }

.tercio3 {
	width: 80%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%;
	background: #BDBDBD; 
	}
 
	.tercio3 ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px;
		background: #BDBDBD; }
 
	.tercio3 li {
		margin: 5px;
		padding: 0 0 0 8px;
		background: #BDBDBD; }

		 
.tercio {
	width: 15%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%;
	background: #BDBDBD; }
 
	.tercio ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px;
		background: #BDBDBD; }
 
	.tercio li {
		margin: 5px;
		padding: 0 0 0 8px;
		background: #BDBDBD; }
		
.tercio4 {
	width: 10%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%;
	background: #BDBDBD; }
 
	.tercio4 ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px;
		background: #BDBDBD; }
 
	.tercio4 li {
		margin: 5px;
		padding: 0 0 0 8px;
		background: #BDBDBD; }
		
.tercio5 {
	width: 99%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%;
	background: #BDBDBD; 
	}
 
.tercio5 ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px;
		background: #BDBDBD; }
 
.tercio5 li {
		margin: 5px;
		padding: 0 0 0 8px;
		background: #BDBDBD; }		
 
 .tercio6 {
	width: 1%;
	padding: 5px;
	margin: 0 1.5% 0 0;
	float: left;
	font-size: 110%;
	background: #BDBDBD; }
 
.tercio6 ul {
		font-size: 75%;
		margin: 8px 0;
		padding: 0 8px;
		background: #BDBDBD; }
 
.tercio6 li {
		margin: 5px;
		padding: 0 0 0 8px;
		background: #BDBDBD; }
 
 
/* Componentes y sus propiedades de la columna izquierda	*/
#columna {
	width: 18%;
	height: 350px;
	padding: 10px 1%;
	float: left;
	background: white;
	display: block;
	background: #BDBDBD; }
 
	#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;
	background: url(img/col.jpg) top left no-repeat; }
 
.botcol {
	width: 100%;
	height: 20px;
	background: url(img/col.jpg) bottom left no-repeat;
	margin-bottom: 5px; }
 
.topcolr {
	width: 100%;
	height: 20px;
	background: url(img/colr.jpg) top right no-repeat; }
 
.botcolr {
	width: 100%;
	height: 20px;
	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: 98%;
	height: 48px;
	margin-top: 1px;
	padding: 2px 1%;
	background: url(img/fondo2.png);
	float: left;
	text-align: center; }
 
	#pie p {
		font: normal 90% arial, helvetica, sans-serif;
		padding: 0;
		margin: 5px 0 0 0;
		color: #f9f2f9; }
 
	#pie a {
		color: black;
		text-decoration: none;
		padding: 0;
		margin: 5px 0 0 0;
		font-size: 90%; }
 
		#pie a:hover { color: white; }
 
.icono {
	border: 0;
	width: 60px;
	height: 20px; }
 
/*		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;
	margin: 0 auto;
	background: url(img/boton-menu3.jpg) repeat-x; 
	z-index:1; }

 
.boton {
	width: 24.8%;
	height: 30px;
	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; 
	}
	
.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;
		font: bold 100% arial; }

.boton:hover div { visibility: visible;z-index:1; }
 
.boton ul {
		margin: 0 10px;
		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; }

#botonera2 {
	width: 100%;
	height: 100px;
	margin: 0 auto;
	background: url(img/boton-menu3.jpg) repeat-x; 
	z-index:1; }
 
.boton2 {
	width: 100%;
	height: 30px;
	float: left;
	text-align: center;
	margin-left: 1px;
	background: url(img/boton-menu.jpg) repeat-x;
	font-weight: bold;
	font-size: 95%;
	line-height: 30px; 
	}
 
.boton2:hover { background: url(img/boton-menu2.jpg) repeat-x; }
   
.boton2 a {
		color: white;
		text-decoration: none;
		display: block; 
		} 
 
.boton2 a:hover { color: black; }
 
/*	Desarrollo de los men?s desplegables	*/
.boton2 div {
		position: relative;
		width: 94.5%;
		background: url(img/desplegable3.png);
		font-size: 100%;
		visibility: hidden;
		text-align: left;
		padding: 10px 2px 10px 10px;
		font: bold 100% arial; }
 
.boton2:hover div { visibility: visible;z-index:1; }
 
.boton2 ul {
		margin: 0 10px;
		padding: 0;
		list-style-image: url(img/desplegable.png); }
 
.boton2 li a {
		color: white;
		text-decoration: none;
		padding: 3px; }
 
.boton2 li a:hover { color: #fa6; }