html, body {
    font-family: Arial;
    margin: 0;
    padding: 0;
    background: #e6e6e6;
    height: 100%;
}

/*Estilos de Menu ********************/


.menu li {
    list-style-type: none;
    float: left;
    /*text-transform: uppercase;*/
    font-family:Verdana;
    font-size: 10px;
    /*font-weight: bold;*/
    line-height: 80px;
    padding-right: 50px;
}

.menu {   
/*width: 1000px;*/
height: 50px;
margin: 0 auto;
background: transparent  url('img/fondo_central.jpg') repeat-x;
}

.menu li a {
text-decoration: none;
color: #222;
display: block  !importnat;
position: relative;
width: 150px !importnat;
}

.menu li a:hover {
color: #000;
}

.menu ul li ul span {
background: url('img/flecha.png');
margin: -20px 50px;
width: 20px;
height: 10px;
position: absolute;
}

.menu ul li ul {
display: none; 
background: #F9DEE5 ;
padding: 10px 0;
position: absolute;
margin: -12px -20px;
}

.menu ul li:hover ul {
display: block;
}

.menu ul li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}

.menu ul li ul li a{
color: #444;
}

.menu ul li ul li a:hover {
color: #000;
}

#menu_i {
    float: left;
    width: 20px;
    height: 50px;
/*background: transparent url('img/lat_home_izqa.jpg') no-repeat;*/
    margin-left: -16px;
}

#menu_d{
    float: right;
    width: 20px;
    height: 40px;
/*background: transparent url('img/lat_home_drcha.jpg') no-repeat;*/
    margin-right: -16px;
}

.menu li a:hover {
    color: #000;
}li a:hover {
    color: #000;
} {
    color: #000;
}


#contenido {
    width: 900px;
    margin: 0 auto;
    background:transparent  url('img/fondo_central_home3.jpg') repeat-x ;
    border: 1px solid #d1d0ad;
    padding: 10px;
    min-height: 100%;
    height: auto !important;
    
}

#conte_i {
float: left;
width: 10px;
height: 500px;
background: transparent url('img/lat_home_izqa.jpg') no-repeat;
margin-left: -16px;
height: auto;
}

#conte_d{
float: right;
width: 10px;
height: 500px;
background: transparent url('img/latederecho.jpg') no-repeat;
margin-right: -16px;
}

.etiqueta1{
    font-family: Verdana; font-size: 14px; color: #0000ff !important; 
   background-color: #DEC9E7; border: #000099; border-style: solid; border-top-width: 1px; 
   border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px
}

#tooltip {
background-color: #CCCCCC;
border: 1px solid #888888;
color: #333333;
padding: 4px; 
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 7px;
}

#tooltip h3 {
font-size: 1.1em;
margin: 0;
padding: 0 3px;
text-align: left !important;
}

#tooltip p {
font-size: 0.95em;
margin: 5px 0 0 5px;
text-align: left;
}

.leyenda {
    font: bold 16px Arial, sans-serif;
    color:#9C2DD2; 
    padding:0 5px; 
    background-color: #f6f6f6;
}
.mensaje{
    width: 500px !important;
    font: bold 16px Arial, sans-serif;
    color:#9C2DD2; 
    padding:0 5px; 
    background-color: #f6f6f6;
}

/*Estiloos para los inputs***/

input { 
    font-family: Tahoma, Verdana, Arial; 
    font-size: 9px; color: #000000; 
    background-color: #DEC9E7; 
  /* background: url("iconos.gif") no-repeat scroll 0 0 transparent;*/
    border: #000099; 
    border-style: solid; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px;
    -moz-border-radius: 5px;
    -moz-border-radius: 7px 27px 100px 0px; 

}

textarea{
    font-family: Tahoma, Verdana, Arial; 
    font-size: 12px; color: #000000; 
    background-color: #DEC9E7; 
  /* background: url("iconos.gif") no-repeat scroll 0 0 transparent;*/
    border: #000099; 
    border-style: solid; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px;
    -moz-border-radius: 5px;
    -moz-border-radius: 7px 27px 100px 0px; 

}

/*input:hover{background:#ffffff; text-decoration:none;}

input.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
input.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
/*input.nombre{ background-position: 4px -21px; }
input.buscar{ background-position: 4px 4px; }
input.password{ background-position: 4px -46px; }
input.favorite{ background-position: 4px -70px; }*/
   
label{
display:block;
margin-bottom:10px;
color:#555555;
}

label span{
display:inline-block;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
}   
   
.select { font-family: Tahoma, Verdana, Arial; font-size: 12px; color: #FFFFFF; background-color: #6699CC; 
border: #000099; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}

.casilla-seleccion {
background:#FFF;
color:#000;
font-size:16px;
}

input[type=checkbox] {
      font-family: Tahoma, Verdana, Arial; 
    font-size: 10px; color: #000000; 
    background-color: #DEC9E7; 
     border: #000099; 
    border-style: solid; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px;

    
    /*position: absolute;
    left: -999em;*/
}

input[type=checkbox] + label {
    display: block;
    height: 16px;
    padding-left: 25px;
    background-color: #DEC9E7; 
   /* background: url(bullet.gif) top left no-repeat;*/
}

input[type=checkbox]:checked + label {
    background-image: url(bullet_checked.gif);
}

#bot1 {
    border: 0 0 0 0;
    padding: 0;
    text-align: center;
    }

#bot1 a{
    background: transparent url('img/botona.png') no-repeat scroll top center;
/*    background-image: url('img/botona.png');
    background-position: center top;*/
    height:41px;
    width:100px;
    display: block;
    text-decoration: none;
    padding-top: 5px;
  /*  background-repeat: no-repeat;*/
    font-weight: bold;
}

#bot1 a:hover{
    background-image:url('img/botonc.png');
    }

#bot1 a:focus{
    background-image:url('img/botona.png');
    }

.boton{
     background: transparent url('img/botona.png') no-repeat scroll top center;
     font-size:10px;
        font-family:Verdana,Helvetica;
        font-weight:bold;
        color:white;
        
        border:0px;
        width:100px;
        height:41px;
}
.boton:hover{
    background-image:url('img/botonc.png');
    }

.boton:focus{
    background-image:url('img/botona.png');
    }

.areadatos{
    width:970px;
    background-color: #f6f6f6; 
    border: #000099; 
    border-style: solid; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px
  
}


/*estilo para tablas
 table {
		border-collapse:collapse;
		background:#EFF4FB repeat-x;
		border-left:1px solid #686868;
		border-right:1px solid #686868;
		font:0.8em/145% 'Trebuchet MS',helvetica,arial,verdana;
		color: #333;
}

td, th {
		padding:2px;
}

caption {
		padding: 0 0 .5em 0;
		text-align: left;
		font-size: 1.4em;
		font-weight: bold;
		text-transform: uppercase;
		color: #333;
		background: transparent;
}

/* para los =links dentro de las tablas
----------------------------------------------- */
/*
table a {
		color:#950000;
		text-decoration:none;
}

table a:link {}

table a:visited {
	/*	font-weight:normal;
		color:#666;
		text-decoration: line-through;
}

table a:hover {
		border-bottom: 1px dashed #bbb;
}

/* para los ecnabezados y pie de tabla =head =foot
----------------------------------------------- */
/*
thead th, tfoot th, tfoot td {
		background:#333  repeat-x;
		color:#fff
}

tfoot td {
		text-align:right
}

/*para el cuerpo de las tablas =body
----------------------------------------------- */
/*
tbody th, tbody td {
		border-bottom: dotted 1px #333;
}

tbody th {
		white-space: nowrap;
}

tbody th a {
		color:#333;
}

.odd {}

tbody tr:hover {
		background:#fafafa
}

.detailText{
    width: 100%;
}

input textarea{
    width: 100%
}*/

table.width200,table.rwd_auto {border:1px solid #ccc;width:100%;margin:0 0 50px 0}
        .width200 th,.rwd_auto th {background:#ccc;padding:5px;text-align:center;}
        .width200 td,.rwd_auto td {border-bottom:1px solid #ccc;padding:5px;text-align:center}
        .width200 tr:last-child td, .rwd_auto tr:last-child td{border:0}
        
    .rwd {width:100%;overflow:auto;}
        .rwd table.rwd_auto {width:auto;min-width:100%}
            .rwd_auto th,.rwd_auto td {white-space: nowrap;}
            
    @media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px)  
    {
    
        table.width200, .width200 thead, .width200 tbody, .width200 th, .width200 td, .width200 tr { display: block; }
        
        .width200 thead tr { position: absolute;top: -9999px;left: -9999px; }
        
        .width200 tr { border: 1px solid #ccc; }
        
        .width200 td { border: none;border-bottom: 1px solid #ccc; position: relative;padding-left: 50%;text-align:left }
        
        .width200 td:before {  position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
        
        .width200 td:nth-of-type(1):before { content: "Nombre"; }
        .width200 td:nth-of-type(2):before { content: "Apellidos"; }
        .width200 td:nth-of-type(3):before { content: "Cargo"; }
        .width200 td:nth-of-type(4):before { content: "Twitter"; }
        .width200 td:nth-of-type(5):before { content: "ID"; }
        
        .descarto {display:none;}
        .fontsize {font-size:10px}
    }
    
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-width : 320px) and (max-width : 480px) 
    {
        body { width: 320px; }
        .descarto {display:none;}
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-width: 768px) and (max-width: 1024px) 
    {
        body { width: 495px; }
        .descarto {display:none;}
        .fontsize {font-size:10px}
    }