#wrapper
{
  width: 800px; /*indicas el ancho total para el sitio*/
  height: auto; /*con el valor auto le decimos que el alto vaya creciendo con el contenido */
  margin: 0 auto; /*el primer valor indica el margen top y bottom (arriba y abajo) y el segundo el margen right y left (derecho e izquierdo). podrías poner los 4 valores en este orden: 0 auto 0 auto (top,right,bottom,left). cuando los valores para right y left se establecen en auto en la capa que contiene a todas las demás, se centra en la pantalla del usuario*/
}

#superior
{
  width: 100%; /*como esta capa está dentro de wrapper, 100% equivale al total de la capa padre, que son 800px*/
 text-align: center;
}


#izquierdo
{
  float: left; /*de esta manera flotarás la capa a la izquierda*/
  width: 200px;
  color: green;
  border:1px solid #ccd2d2;
}

#centro
{
  float: left; /*esta capa también la flotamos a la izquierda, para pegarla a la anterior*/
  width: 595px;
  text-align: center;
  color: blue;
  border:1px solid #ccd2d2;
}



#footer
{
  clear: both; /*la propiedad float hace que un elemento salga del flujo del documento. cuando queramos que el flujo vuelva a su sitio, utilizamos la propiedad clear en el elemento siguiente (el que debe volver al sitio)*/
  text-align: center;
}

#masthead{
	position: absolute;
	top: 0px;
	left: 2%;
	right: 2%;
	width:95.6%;
}

#utility{
	font: 75% Verdana,sans-serif;
	position: absolute;
	top: 13px;
	right: 10px;
	color: #919999;
}

#utility a{
	color: #ffffff;
}

#utility a:hover{
	text-decoration: underline;
}

.interno{
    width: 60%; 
    margin: auto;
    background: #336600;
	background:-moz-linear-gradient(180deg, #006600, #fff); /* Firefox */
	background:-webkit-gradient(linear, left top, left bottom, from(#006600), to(#009900)); /* Webkit */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-box-shadow:0 0 15px #aaa;
	-webkit-box-shadow:0 0 15px #aaa;

    color: bisque;
    padding: 20px 15px 50px 50px;
    border-radius: 10px;
    box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
}

.cabezote{
   width: 95%;
   margin: auto;
   background: #336633;
   padding: 20px 20px 20px 20px;
   border-radius: 10px;
   box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
   display: inherit;
   
}

.menu{
   width: 73%;
   height:auto;
   margin: auto;
   background:#333333;
   padding: 20px 15px 50px 50px;
   border-radius: 10px;
   box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
   display: inherit;
   color:#FFFFFF;
}

.menu a{
	color: #FFFFFF; 
}

.menu a:hover{
	text-decoration: underline;
}

.Titulos{
border-width:3px;
border-color:#000000; 
border-radius:1em;
border-style: solid; 
background-color:#B80101;
align:center;
display: inherit;
color: #FFFFFF;
font-weight:bold;
margin:0 auto;
box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
}

.BarraBuscar{
 width:80%; 
 border-width:1px; 
 border-color:#000000; 
 border-radius:1em; 
 border-style: solid; 
 background-color:#CCCCCC; 
 visibility:hidden
}

.contenido{
  border-width:3px;
  border-color:#000000; 
  border-radius:1em;
  border-style: solid; 
  background-color:#FDFCD9;
  align:center;
/*  position:fixed;*/
  display: inherit;
  box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
}

.contenido2{
  border-width:1px;
  border-color:#000000; 
  border-radius:5em;
  border-style: solid; 
  background-color:#FFFFFF;
  align:center;
  display: inherit;
  box-shadow: 0 30px 30px 0px rgba(0, 0, 0, 0.8);
  width:80%;
}

.tablas{
  border-left-color:#000000; 
  border-right-color:#000000; 
  border-top-color:#000000; 
  border-bottom-color:#000000; 
  border-top-left-radius:1em; 
  border-top-right-radius:1em; 
  border-bottom-left-radius:1em; 
  border-bottom-right-radius:1em; 
  border-style: solid; border:solid
}

ul.LinkedList { 
 margin:0px;
 padding: 0px;
 }
 

/* ul.LinkedList ul { display: none; } */
.HandCursorStyle { cursor: pointer; cursor: hand; }  /* For IE */

.piepagina{
   width: 95%;
   height: 5px;
   margin: auto;
   background: #000066; 
   padding: 10px 15px 50px 50px;
   border-radius: 10px;
   box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8);
   display: inherit;
}

.Bordes{
border-top-left-radius:1em; 
border-top-right-radius:1em; 
border-bottom-left-radius:1em; 
border-bottom-right-radius:1em;
}

.componentes{
    border: 1px solid;
	border-color:#FF0000;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	color:#2C2B33;
	font-size:12px;	
	position: relative;

}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input, textarea, select{
    border: 1px solid;
	border-color:#FF0000;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	color:#2C2B33;
	font-size:12px;	
	height: 30px;
}


input:focus, textarea:focus, select:focus, img:hover {
    box-shadow: 0 0 15px green;
    -webkit-box-shadow: 0 0 15px green; 
    -moz-box-shadow: 0 0 15px green;
    border:1px solid green; 
    background-color:white;
}

input:hover, textarea:hover, select:hover {
    border:2px solid green; 
    background-color:white;
}

textarea:focus {
    box-shadow: 0 0 15px green;
    -webkit-box-shadow: 0 0 15px green; 
    -moz-box-shadow: 0 0 15px green;
    border:1px solid green; 
    background-color:white;
}

.componentes2{
    border: 2px solid;
	border-color:#0000FF;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
	color:#669900;
	font-size:12px;	
}

/* DESDE AQUI EMPIEZA CONFIG DE PESTAÑAS */
#pestanas {
    font-size: 3ex;
    font-weight: bold;
}

#pestanas ul{
    margin-left: -40px;    
}

#pestanas li{
    list-style-type: none;
    float: left;
    text-align: center;
    margin: 0px 0px -1px -0px;
    background: black;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border: 2px solid black;
    border-bottom: dimgray;
    padding: 0px 20px 0px 20px;
}

#pestanas a:link{
    text-decoration: none;
    color: #FFFFFF;
}

#contenidopestanas{
    clear: both;  
    background: #FFFFF0; 
    padding: 5px 0px 5px 5px;
    border-radius: 1em;
    border-top-left-radius: 0px;
    border: 2px solid black;
    width: 100%;
}

/* ESTILO DEL BOTO */
a.ovalbutton{
background: transparent url('imagenes/btnGrabar.png') no-repeat;
display:inherit;
height: 24px; /* Height of button background height */
}

/* ESTILO DEL TOOPTIP*/
    .tooltip {
        width: 200px;    
        padding: 10px;
        margin: 0 0 12px 0;    
        z-index: 100;
        bottom: 100%;
        background:#FFFFFF;
		border: 2px solid #009933;
        color:#009900;
        text-align: center;
        font-weight: bold;
        font-size:12px;
	    border-radius: 5px;
    }