/*  -------------------------- DISEÑO AZUL para creandolaweb.com --------------------------------- */

* {
	margin: 0;
	padding: 0;
}
			
body {
	text-align: center;    /* Esto es la primera parte del método para hacer que en resoluciones mayores de la óptima (1024x768 en este caso), la página (en realidad el div "todo") quede centrada en la ventana del navegador  */
	font-size: medium;
	font-family: "Bitstream Vera Sans", Verdana, Arial;
	/*background: yellow;*/
}
			
#todo {
	/*float: left;*/
	width: 980px;
	margin-top: 10px;
	margin-left: auto;	/* Esta línea y las dos siguientes son la segunda parte del método para centrar la página en resoluciones mayores  */
	margin-right: auto;
	text-align: left;   /* Esto es porque queremos centrar la página en la ventana del navegador, pero no queremos que todos los textos de la página estén centrados  */
	font-size: 100%;
	background: #fff;
	border: 1px solid #888;
}

/*a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}*/

strong {
	font-weight: bold;
	color: orange;
}





/* ------------------------------------------------------ CABECERA ---------------------------------------------------------------------*/

#cabecera {
	float: left;
	width: 100%;      /* Los elementos flotantes deben tener especificada su anchura  */
	background-color: #0000c8;
}

#logo {
	margin: 25px 50px 0px 100px;
}

#titulo {
	margin: 0 0 15px 20px;
}

#navegacion {
	clear: both;
	float: right;
	margin: 0 140px 0 0;
	display: inline;   /* Truco para que IE/Win calcule correctamente el margen. IE/Win tiene la tendencia a mostrar el doble del margen de un elemento flotante del lado al cual está alineado.  */
	list-style: none;
	background: url(nav-borde.gif) repeat-x bottom left;
}

#navegacion li {
	float: left;
	/*font-family: Verdana, Arial;*/
	font-size: 110%;
}

#navegacion a {
	float: left;
	display: block;
	margin: 0 1px 1px 0;
	padding: 5px 16px;
	color: #fff;
	text-decoration: none;
	border: 1px solid #ccc;
	border-bottom: none;
	background: #a7c9ff url(nav-off.gif) repeat-x top left;
}

#navegacion a:hover,
#inicio #p-inicio a,
#diseno #p-diseno a,
#programacion #p-programacion a,
#contacto #p-contacto a {
	color: #0064ff;
	margin-bottom: 0px;
	padding-bottom: 6px;
	background: #fff url(nav-on.gif) repeat-x top left;
}





/* ------------------------------------------------------ PRINCIPAL ---------------------------------------------------------------------*/

#principal {
	clear: both;
	float: left;
	width: 650px;
	margin: 25px 0 25px 30px;
	display: inline;  /* Véase #navegacion  */
}

#ruta {
	color: #ababab;
	font-size: 70%;
}

#ruta a {
	color: #9a9a9a;
	font-weight: bold;
}

#ruta a:hover {
	color: #444;
}

h1 {
	color: #aac8f0;
	font-size: 230%;
	margin: 15px 0 10px 0;
}

h3 {
	color: #666;
	font-size: 80%;
	font-family: Verdana;
	font-weight: bold;
}

#principal #contenido {
	margin: 30px 25px 15px 35px;
	color: #444;
}

#principal #contenido p {
	margin-top: 20px;
	font-size: 75%;
	text-indent: 15px;
}

#principal #contenido a {
	color: orange;
	font-weight: bold;
}





/* ------------------------------------------------------ MENÚ LATERAL ---------------------------------------------------------------------*/

#menu-lateral {         /*  puede ocupar en total un ancho de 300px (incluidos márgenes)  */
	float: right;
	width: 250px;
	margin: 25px 25px 25px 25px;
	display: inline;   /* Véase #navegacion  */
	background: #c4def6 url(menu-lateral-bottom.gif) no-repeat bottom left;
}

#menu-lateral ul {
	list-style: none;
	padding-top: 25px;
	background: url(menu-lateral-top.gif) no-repeat top left;
}

#menu-lateral li {
	font-family: Verdana;
	font-size: 70%;
	font-weight: bold;
	padding: 0px 20px 30px 35px;
	line-height: 150%;
}

#menu-lateral a {
	color: #000;
}

#menu-lateral a:hover {

}

#menu-lateral a.email {
	display: block;
	margin-top:10px;
	color:#444;
	/*font-size:11px;*/
}





/* ------------------------------------------------------ PIE DE PÁGINA ---------------------------------------------------------------------*/

#pie {
	clear: both;
	border-top: 1px solid #999;
}

#nav-pie {
	float: left;
	width: 75%;
	padding: 0 0 0 25%;   /*  provisional, a la espera de una solución mejor para centrar el #nav-pie  */
	list-style: none;
	background: #fff;
}

#nav-pie li {
	float: left;
	color: #ccc;
	padding-right: 10px;
}

#nav-pie a {
	color: #ccc;
	font-weight: bold;
	font-size: 80%;
	text-decoration: none;
}

#nav-pie a:hover {
	color: #222;
	text-decoration: none;
}

#avisos {
	clear: both;
	float: left;
	width: 980px;	/*  Los elementos flotantes deben tener definida específicamente su anchura   */
	padding: 4px 0 4px 0;
	list-style: none;
	font-size: 70%;
	background-color: #0000c8;
	color: #ffffff;
}

#copy {
	padding-bottom: 15px;
	text-align: center;
	font-size: 110%;
}

#iva {
	float: left;
	margin: 0 0 0 3px;
	padding-top: 15px;	/* Es necesario para que tanto la línea de texto de #iva como la de #estandares esté a la misma altura. Si no, #iva se alinea automáticamente a la altura de las imágenes de #estandares  */
}

#estandares {
	float: right;
	margin: 0 3px 0 0;
}

#estandares img {
	border: 0;
}