/* CSS Document */

/*   Reset  */
* {
	padding:0;
	margin:0;
}

/*    Estructura  General    */

body {
	background-color: #FFF;
	font-size: 70%;
}

#contenedor  {
	width: 950px;
	text-align: left;
	margin: 0 auto; /* centrar con firefox */
	padding: 0;
	height: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#000;
}

#izquierda {
	width: 18%;
	float: left;
	padding: 3px 0 0 2px;
	margin: 13px 0 0 0;
}

#centro {
	width: 62%;
	border: 2px solid #F60;
	float:left;
	padding: 0 2px 0 2px;
	margin: 13px 0 13px 2px;
	background-color:#FFF;
}

#derecha {
	width: 18%;
	float: left;
	padding:0 0 0 2px;
	margin: 8px 0 0 1px;
}

#cabecera {
	width: 100%;
	height: 90px;
	background-color: #FFF;
}

#pie {
	width:100%;
	text-align:center;
	margin: 0 auto; /* centrar con firefox */
	height: auto;
	float:left;
}

#conten {
	width:100%;
	height:60px;
}

#ruta {
	width: 100%;
	height:20px;
}

#contenedor_editor  {
	width: 100%;
	text-align: left;
	margin: 0 auto; /* centrar con firefox */
	padding: 0;
	height: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#000;
}

.seccion {
	width:100%; 
	height:270px;
}

/*      Links      */

a {color: #069}

.items a {
	text-decoration: none;
	color:#000;
	font-weight:normal;
}

.items a:hover {
	text-decoration:underline;
	color:#069;
	font-weight:normal;
}

a.apretado {
	text-decoration:none;
	color:#069;
	font-weight:bold;
}

.ruta a {
	text-decoration: none;
	color:#FFF;
	font-weight: bold;
	background:#069;
	width:100%;
}

.ruta a:hover {
	text-decoration:underline;
	color:#FFF;
	font-weight: bold;
	background:#069;
	width:100%;
}

.ruta {
	color:#FFF;
	font-weight: bold;
	background:#069;
	width:100%;
}

/*     Textos      */

h1 {font-size:22px}
h2 {font-size: 18px}
h3 {font-size: 14px; font-weight:bold}
#centro h1 {
	text-align:center;
	text-decoration:underline;
}

h2, h3{
	margin: 0 0 10px 0;
}

pre {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:14px;
}

p.items {
	line-height: 4px;
}

/* Linea divisoria entre secciones */
hr {
	background-color: #069;
	color:#069;
	margin:3px 0 3px 0;
}

hr.cabecera {
	margin:3px 0 3px 0;
}

/* Titulo de los recuadros de codigo y resultado */
.tit_fondo{
	text-align: center;
	background-color: #F60;
	width: 99.7%;
	color:#FFF;
	font-weight:bold;
	font-size:12px;
	border: 1px solid #F60;
}

.titu_fondo {
	text-align: left;
	background-color: #F60;
	width: 99.7%;
	color:#FFF;
	font-weight:bold;
	font-size:12px;
	border: 1px solid #F60;
}

.titul_fondo {
	text-align: right;
	background-color: #F60;
	width: 99.7%;
	color:#FFF;
	font-weight:bold;
	font-size:12px;
	border: 1px solid #F60;
}

.titulo-grande {
	font-size:56px;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#069;
}

/* Titulo de los menus izquierdos y derechos */
.tit_menu {
	background-color: #069;
	width: 99%;
	color:#FFF;
	font-weight:bold;
	font-size:12px;
	text-align:center;
}

.tit_menu2 {
	font-size:14px;
	font-weight: bolder;
	color: #F60;
	margin:7px 0 2px 0;
}

.cabecera2 {
	width:99.6%;
	background-color:#FFF;
	font-size:11px;
	position: relative;
	top:3px;
	left:0;
	padding-left: 3px;
}

/* Recuadro del codigo */
.codigo {
	background-color:#FFFFDA;
	border: 1px #F60 solid;
	padding:1px 1px 10px 1px;
	margin:1px;
	width:99%;
	height: inherit;
}

/* Recuadro del resultado */
.resultado {
	border: 1px #F60 solid;
	padding:1px 1px 10px 1px;
	margin:5px 1px 1px 1px;
	width:99%;
	height: inherit;
}

.cont-cod-res {
	width:100%;
	height:auto;
	margin: 0 auto; /* centrar con firefox */
}

.codigo50 {
	background-color:#FFFFDA;
	border:1px #F60 solid;
	padding:1px 1px 10px 1px;
	margin:1px;
	width:49%;
	height:inherit;
	float:left;
	vertical-align:top;
}

.resultado50 {
	border:1px #F60 solid;
	padding:1px 1px 10px 1px;
	margin:1px;
	width:48.5%;
	height:inherit;
	float:right;
	vertical-align:top;
}

.codigo-libre {
	background-color:#FFFFDA;
	border:1px #F60 solid;
	padding:1px 1px 10px 1px;
	margin:1px;
	height:inherit;
	float:left;
	vertical-align:top;
}

.resultado-libre {
	border:1px #F60 solid;
	padding:1px 1px 10px 1px;
	margin:1px;
	height:inherit;
	float:right;
	vertical-align:top;
}

blockquote.etiquetas {margin:20px}

.rojo {color:#F00}
.verde {color: #090}
.naranja {color:#F60}
.azul {color:#069}

/*       Disenio        */

.flechitas {
	width:100%;
	height: 20px;
}

.anterior {float: left;}
.centro {text-align: center;}
.siguiente {float:right;}

.pc {
	background-color:#FFFFDA;
	border: 1px #F60 dotted;
	padding:2px;
	margin:2px;
	width:98%;
}

.pc51 {
	background-color:#FFFFDA;
	border: 1px #F60 dotted;
	padding:2px;
	margin:2px;
	width:51%;
}

.pc40 {
	background-color:#FFFFDA;
	border: 1px #F60 dotted;
	padding:2px;
	margin:2px;
	width:42%;
}

i.protagonista {
	color: #069;
	margin: 0 0 10px 113px;
}

p {line-height: 16px}

table, tr, td, th {
	border: solid 1px #AAA;
	vertical-align:top;
}

td {padding: 1px}

/* th de las tablas de propiedades y etiquetas al final de cada pagina */
.encabeza {padding-left: 2px}

/* tr de las tablas de propiedades y etiquetas al final de cada pagina */
.encab {
	height:16px;
	background-color:#F60;
	color:#FFFFFF;
	vertical-align:middle
}

li {
	line-height:20px;
	margin-left:20px;
}

/* Recuadros del menu de la derecha */
.recuadro_menu {
	background-color:#FFF;
	border: 1px #069 solid;
	padding:1px 1px 10px 1px;
	margin:5px 1px 1px 1px;
	width:99%;
	height: inherit;
}

/* Tablas de propiedades, etiquetas, etc. al final de cada pagina */
.tablas {width: 100%; background-color:#FFFFDA}

img {border:0;}

/* Index Styles */

#centro_index {
	width: 530px;
	border: 2px solid #F60;
	float:left;
	padding: 0 2px 0 2px;
	margin: 13px 0 13px 2px;
	background-color:#FFF;
}

#cen_izq_index {
	width: 260px;
	border:none;
	background-color:#FFF;
	float:left;
	padding: 0 2px 0 2px;
}

#cen_der_index {
	width: 260px;
	border:none;
	background-color:#FFF;
	float: right;
	padding: 0 2px 0 2px;
}

#derecha_index {
	width: 18%;
	float: left;
	padding: 3px 0 0 2px;
	margin: 13px 0 0 0;
}

.ruta1 {
	color:#FFF;
	font-weight: bold;
	background:#069;
	float:left;
	width:50%;
}

.ruta2 {
	color:#FFF;
	font-weight: bold;
	background:#069;
	float:right;
	width:50%;
}