/* CSS Document */

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

/*    Estructura  General    */

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

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

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

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

#centro_articulo {
	width: 100%;
	border: 2px solid #F60;
	float:left;
	padding: 0 2px 0 2px;
	margin: 13px 0 13px ;
	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:55px;
}

#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%;
	padding-left:5px;
}

/*     Textos      */

h1 {font-size: 200%}
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;
}

.hr-menu {
	margin:0 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:14px;
	border: 1px solid #F60;
}

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

.titul_fondo {
	text-align: right;
	background-color: #F60;
	width: 99.7%;
	color:#FFF;
	font-weight:bold;
	font-size:14px;
	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%;
}

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
  text-align: left;
  text-decoration: none;
  outline: none;
  letter-spacing: normal;
  word-spacing: normal;
}

.art-menu, .art-menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.art-menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}

.art-menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.art-menu li li
{
  float: none;
}

.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
}

.art-menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.art-menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.art-menu:after, .art-menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-menu, .art-menu ul
{
  min-height: 0;
}

.art-menu ul
{
  background-image: url('http://www.virtualnauta.com/images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px 5px 0 -35px;
}

.art-menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}




/* menu structure */

.art-menu
{
  padding: 12px 6px 0 6px;
}

.art-nav
{
  position: relative;
  height: 36px;
  z-index: 100;
}

.art-nav .l, .art-nav .r
{
  position: absolute;
  z-index: -1;
  top: 0;
  height: 24px;
  background-image: url('http://www.virtualnauta.com/images/nav.png');
}

.art-nav .l
{
  left: 0;
  right: 0;
}

.art-nav .r
{
  right: 0;
  width: 874px;
  clip: rect(auto, auto, auto, 874px);
}


/* end Menu */

/* begin MenuItem */
.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 24px;
  cursor: pointer;
  text-decoration: none;
}

.art-menu ul li
{
    margin:0;
    clear: both;
}


.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 72px;
  background-image: url('http://www.virtualnauta.com/images/menuitem.png');
}

.art-menu a .l
{
  left: 3px;
  right: 5px;
}

.art-menu a .r
{
  width: 410px;
  right: 3px;
  clip: rect(auto, auto, auto, 405px);
}

.art-menu a .t
{
  margin-right: 10px;
  margin-left: 10px;
  font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  color: #13212A;
  padding: 0 18px;
  margin: 0 5px;
  line-height: 24px;
  text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -24px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -24px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -24px;
}
.art-menu a:hover .t
{
  color: #162631;
}

.art-menu li:hover a .t
{
  color: #162631;
}

.art-menu li:hover>a .t
{
  color: #162631;
}


.art-menu a.active .l, .art-menu a.active .r
{
  top: -48px;
}

.art-menu a.active .t
{
  color: #FFFFFF;
}
/* end MenuItem */

/* begin MenuSeparator */


.art-menu .art-menu-li-separator
{
  display: block;
  width: 6px;
  height: 24px;
}

/* end MenuSeparator */