/*
      Created by Keith Donegan of Code-Sucks.com
	  
	  E-Mail: Keithdonegan@gmail.com
	  
	  You can do whatever you want with these layouts,
	  but it would be greatly appreciated if you gave a link
	  back to http://www.code-sucks.com
	  
*/


body {
 padding: 0px; margin: 0; 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
background: #0A0A2A url(images/foroun_mar8.jpg) repeat-y top center;
text-align: center;
}
#container { 
margin: 0px auto;
width: 845px;
background-image: url(images/back4.gif) repeat:-y repeat;


}
#header {
 color: #333;
 width: 800px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 87px;
 margin: 10px 0px 0px 0px;
 background: #0000CC;

background-image: url(images/bansall1.gif);
}
/* Menusito es un subheader  para el letrero del contador de visitas */
#menusito { 

float: left;
width: 800px;
 clear: both;
 color: #A9F5F2;
 border: 1px solid #ccc;
 background: #eeeeee;
 margin: 0px 0px 0px 0px;
 padding: 10px;

background-image: url(images/bgft.jpg);
background-repeat: repeat-x;
text-align: center;
font-size: .9em;

}
/*termina  Menusito */
/* Sidenav es la columna izquierda, donde se encuentra el navegador vertical lateral sidenav y los mensajitos*/
#sidenav { 
 color: #003399;
 border: none;
 background: none;
 margin: 0px 0px 0px 0px;
 padding: 5px;
 height: auto;
 width: 180px;
 float: left;
}
/* wrwpmtx es la columna derecha, el contenedor tanto del area de texto como del  el navegador por pestañas del area de texto */
#wrapmtx { 
 float:left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 0px 0px;
 padding: 9px;
 height: auto;
 width: 610px;
 display: inline;
}

  
img {
padding: 3px;
border: solid 1px #bce296;
}

img.floatTL {
float: left;
margin-right: 1em;
margin-bottom: 1em;
margin-top: 1em;
}

img.floatTR {
float: right;
margin-left: 1em;
margin-bottom: 3px;
margin-top: 1em;
}


img.floatTLH {
float: left;
margin-left:25px;
margin-bottom: 0;
margin-right:0px;
margin-top: 25px;
padding: 0;
border: none;
}

img.floatTLHflag {
float: left;
margin-left: 0px;
margin-bottom: 0;
margin-right:0px;
margin-top: 0;
padding: 0;
border: none;
}

img.floatTRHflag {
float: right;
margin-left: 0;
margin-bottom: 0;
margin-right:0px;
margin-top: 0;
padding: 0;
border: none;
}



img.floatTRH {
float: right;
margin-left: 0;
margin-bottom: 5px;
margin-right:5px;
margin-top: 0;
padding: 0;
border: none;
}



/* Esto , son los atributos de encabezados */
h1{color:#660099;
 border-bottom:
 1px solid #222;
 clear:both;
 color: #00FFCC;
 font:17px "Trebuchet MS",sans-serif;
 margin:0 12px 15px 28px;
 padding:0 15px 0 22px;
}
h1 a{color:#cf3;
}
h2,dt{color: #3333FF;
font:15px Tahoma,Arial,sans-serif;
}
h3{
font-size: 1em;
color: #ff7733;
background-image: url(images/hbgsm.jpg);
background-repeat: no-repeat;
padding-left: 45px;
padding-top: 6px;
padding-bottom: 6px;
margin-left: 7px;
}
hr{background:#222;
color:#222;
clear:both;
height:1px;
margin:0 12px 15px 28px;
}





/* Esto de abajo lo pase tal cual a ver que funciona*/

li,p,dd{line-height:150%;
}
ol,ul{list-style:none;
}
.align_center{text-align:center;
}
.align_right{text-align:right;
}
.float_left{float:left;
}
.float_right{float:right;
}
.caps{text-transform:uppercase;
}

/* Esto de arriba lo pase tal cual a ver que funciona*/
a:link {
color: #003366;
border-bottom: 0px solid #efefef;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}

a:visited {
color: #FFFFBF;
border-bottom: 0px solid #efefef;
font-family: verdana, arial, sans-serif;
text-decoration: none;
}

a:hover {
color: #00FF33;
text-decoration: none;
}


.presgoogle{
padding-left:35px;
}

.videotube{
padding-left:115px;
}

/* Aquí abajo va el codigo css  para el area de texto */
#maintext {
float: left;
	width: 621px;
	line-height: 18px;
	text-align: left;
	padding-top: 20px;
	padding-bottom: 11px;
	font-family: verdana, arial, sans-serif;
	color: #000000;
	font-size:16px;

 border: 1px solid  #ccc;
 border-top: 1px Solid #FFFFFF;
 margin: 0px 2px 2px 0px;
 padding: 4px;
 background-color: #FFFFFF;
}
#maintext h1{
color: #00FF00;
font-size: 1.2em;
background-image: url(images/hbg.jpg);
background-repeat: no-repeat;
padding-left: 65px;
padding-bottom: 6px;
padding-top: 6px;
}
#maintext h2{
color: #00FF00;
font-size: 1.0em;
background-image: url(images/hbg.jpg);
background-repeat: no-repeat;
padding-left: 65px;
padding-bottom: 8px;
padding-top: 8px;
}
#maintext p{
color: #330066;
text-align: justify;
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
padding-right: 11px;
}
#maintext a{
color: #00d0ff;
text-decoration: none;
}
#maintext a:hover{
color: #ff7733;
}
.inset
{ 
float:right;
width:346px;
padding:5px;
border:#66cc00 1px solid;
margin:5px 0 0 5px;
background:#ddffc5;
color:inherit;
font-size:85%;
}

/* Aquí abajo el va el codigo css  para el formulario del libro de visitas*/

#guestform {

 float: left;
 width: 610px;
 line-height: 4px;
 text-align: left;
 padding-top: 5px;
 padding-bottom: 5px;
 font-family:  arial, verdana, sans-serif;
 color: #000000;
 font-size:16px;

 border: 1px solid  #ccc;
 border-top: 1px Solid #FFFFFF;
 margin: 0px 2px 2px 0px;
 padding: 4px;
 background-color: #81F7F3;
}

.textareagb 
{font-family: arial, Garamond,verdana;
font-size: 1.2em;
width:570px;height:170px;} 


#guestform h1{
color: #00FF00;
font-size: 1.4em;
background-image: url(images/hbg.jpg);
background-repeat: no-repeat;
padding-left: 65px;
padding-bottom: 2px;
padding-top: 2px;
line-height: -2px;
}

/* Aquí arriba el va el codigo css  para el formulario del libro de visitas*/
blockquote {
font-family: monospace;
font-size: .9em;
background-color: #e9ffd9;
margin: 5px;
padding: 10px;
text-align: justify;
}

/* Aquí arriba el va el codigo css  para el area de texto*/





#footer { 
 width: 810px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #eeeeee;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 float: left;
background-image: url(images/bgft.jpg);
background-repeat: repeat-x;
text-align: center;
font-size: 11px;



}


/* Aquí abajo inserté el codigo css para el navegador por pestañas del área de texto maintext */

#navpest {    /* enseguida los valores que tomará ul bajo la id navpest */


width: 621px;  /* debe coincidir con el ancho del contenedor inferior */

	list-style: none; /*Eliminamos el estilo de lista*/
	padding: 0; /*Evita la indentación que aparece en algunos navegadores*/
	margin: 0;
	display: inline; /*Nos permite integrar con los elementos li y evitar problemas -*/
	float: left;	  /*en algunos navegadores*/
	border-bottom: 1px Solid Black;

}


#navpest li {/* enseguida los valores que tomará li en la ul bajo la id navpest */
	width: 83px;
	display: block;
	float: left; /*Flota los elementos de la lista*/
	text-align: center;
	margin-right: 3px;
	position: relative; /*Hacemos el ajuste de 1 pixel para simular la integración -*/
	top: 1px;           /*con la capa de contenido*/
}

#navpest li a {
	width: 83px; /*Fijamos el ancho para que el enlace sea toda la pestaña y no solo el texto*/
	display: block;
	background: #3B9CCC;
	border: 1px Solid #000;
	text-decoration: none;
}

#navpest li a:link, a:visited, a:active{
	color: #000;
}

#navpest li a:hover {
	color: #CEE59F;
}

/*Clase especial que resaltará dependiendo de la sección*/
#navpest a.pestactual {
	width: 83px;
	display: block;
	background: #FFFFFF;
	border-top: 1px Solid #000;
	border-bottom: 1px Solid #FFFFFF;
	text-decoration: none;
}

a.pestactual:link, a.pestactual:visited, a.pestactual:active {
	color: #000;
}

a.pestactual:hover {
	color: #000;
}




/* Aquí arriba inserté el codigo css para el navegador por pestañas del área de texto maintext */



/* abajo Estan son las declaraciones para el menú vertical de la columna izquierda*/
#menucontainer{
width: 160px;
float: left;
 margin: 8px 4px 2px 0px;
 padding: 8px;
}


#menu h5{
font-size:12px;
line-height:5px;
color:#0000CC;
text-align:center;
}
#menu li{background:url(images/menu_li.jpg) repeat-x left bottom;font:13px Verdana,sans-serif;margin:0 0 0 5px; 
}
#menu a{background:url(images/arrow.jpg) no-repeat left center;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #444;border-top:1px solid #444;display:block;padding:7px 0 7px 10px; color:#FFFFFF;
}
#menu a:hover{ background:url(images/arrow2.jpg ) no-repeat left center; background-color: #FF0000;color: #FF0000;
}
.links{margin:0 0 10px 10px;overflow:hidden;
}
.links a{white-space:nowrap;
}
.links li{padding:0 0 5px;
}


/* arriba Estan son las declaraciones para el menú vertical de la columna izquierda*/


/* abajo Estan son las declaraciones para el nuevo formato de menú vertical */




.buttonscontainer {
width: 130px;
float: left;
 margin: 8px 4px 2px 0px;
 padding: 8px;
}


.buttons a {
background:url(images/arrow.jpg) no-repeat left center;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #444;border-top:1px solid #444;display:block;padding:5px 0 7px 5px; color:#FFFFFF;
}

.buttons a:hover {
background:url(images/arrow2.jpg ) no-repeat left center;
 background-color:#FF0000;
color: #FF0000;
}
.buttons a:visited {
color: #33FF00;
}


/* arriba Estan son las declaraciones para el nuevo formato de menú vertical */

/* abajo Estan son las declaraciones para la zona de mensajes (mensajitos) de la columna izquierda*/

.mensajitos{
float: left;

width: 160px;

 border:#CEF6E3 1px solid;

 margin: 8px 4px 2px 0px;
 padding: 8px;
 background-color: none;
}

.mensajitos p{
color: #BFFFFF;
text-align: justify;
padding-top: 0px;
padding-left: 5px;
padding-bottom: 10px;
padding-right: 11px;
}

.mensajitos h5{
color: #00FF00;
font-size: 0.9em;
background-image: url(images/hbgizq.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-bottom: 1px;
padding-top: 9px;
}
.mensajitos a{
color: #FFFF00;
text-decoration: none;
}
.mensajitos a:hover{
color: #ff7733;
}

.mensajitos a:visited{
color: #F7FE2E;
}

table {
  height:100%;
  border-style:double;
  background-color:aliceblue;
  border-spacing:12px;
 }

th {
  border-style:solid;
  background-color:aquamarine;
 }
  
td {
  border-style:groove;
  background-color:green;
  padding:4px;
 }




/* arriba Estan son las declaraciones para la zona de mensajes (mensajitos) de la columna izquierda*/