/************** DESTACADO **************/
@import url("/css/destacados.css");

html {
  background-image: url('/img/fondo.png');
  background-position: center; 
}

body {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  font-family: "Verdana", "Trebuchet MS", sans-serif;
}

label {
  float: left;
  text-align: right;
  font-weight: bold;
  margin: 10px 10px 5px 0px;
  margin: 0.75em 1em 0em 0;
}

input, textarea {
  background: #f0f0f0;
  color: #666;
  padding: 0em 0.5em;
  border: 1px solid #aaa;
  font-family: inherit;
  font-size: 1em;
}

input:hover,
textarea:hover {
  background: #ffffff;
  border: 1px solid #666;
}

form, fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  padding: 0;
  margin: 0;
}

a {
  color: #06c;
  text-decoration: none;
  padding: 0px 5px 0px 5px;
}

a:hover {
  background: #08d;
  text-decoration: none;
  color: #fff;
}

hr {
  clear: both;
  visibility: hidden;
  margin: 0;
}

acronym:hover, abbr:hover {
  cursor: help;
}

div#contenedor {
  padding: 0;
/*   width: 758px; */
  margin: auto;
  border-right: 1px solid #444;
  border-left: 1px solid #444;
  padding: 5px 0 0 0;
  background-color: #fff;
}

div#contenedor,
div#footer {
  width: 64em;
}

kbd {
  font-family: "Courier New", "Courier", monospace;
  background: #eee;
  padding: 0.25em 0.5em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.oculto {
  display: none;
}

.cita {
  background: #f5f5f5;
  border: 1px solid #ddd;
  margin: 15px;
  padding: 10px 20px 10px 20px;
  font-size: 1em;
  color: #222;
}

img.foto  {
  padding: 5px;
  background: #fff;
  border: 1px solid #666;
}

img.screenshot {
  background: #fff;
  padding: 4px;
  margin: 5px;
  border: 1px solid #888;
}

a.screenshot:hover {
  background: #fff;
  color: #fff;
}

a.screenshot:hover img {
  background: #4af;
  border: 1px solid #000;
}

.centrado {
  margin: auto !important;
  text-align: center;

}

/************** CABECERA **************/

#cabecera h1 {
  clear: both;
  width: 100%;
  height: 105px;
  background: url('/img/cabecera.jpg') repeat-x;
  background-position: right;
  margin: 10px 0 5px 0;
  margin-top: 0.4em;
}

div#acciones {
  color: #666;
  text-align: right;
  margin-right: 0.5em;
}

#acciones a {
  font-size: 0.85em;
}

div#buscador {
  margin: 0 5px;
  width: 325px;
  float: right;
  text-align: right;
}

div#buscador label {
  display: none;
}

div#buscador input#buscar {
  background: url('/img/buscar.gif') no-repeat;
  border: none;
  height: 16px;
  width: 20px;
}

div#buscador input#buscar:hover {
  border: 0px;
}


div#plantillas {
  font-size: 0.85em;
}

div#plantillas ul {
  display: inline;
}

div#plantillas ul li {
  display: inline;
}

div#plantillas,
span#navegacion {
  margin: 3px 7px;
}

span#navegacion {
  font-size: 0.95em;
  float: left;
  margin-top: 3px;
}

span#navegacion a {
  text-transform: lowercase;
}

/************** MENU **************/

div#menu {
  clear: both;
}

div#menu ul.secciones li.seccion {
  float: left;
  margin: 0 5px 5px 5px;
  margin: 0.5em 0.5em 0.5em 0.5em;
}

div#menu ul.secciones li.seccion strong {
  display: block;
  font-size: 1.1em;
}

div#menu ul.secciones li.empresa strong { border-bottom: 2px solid #F7DC67; }
div#menu ul.secciones li.soluciones_online strong { border-bottom: 2px solid #80AD80; }
div#menu ul.secciones li.ingenieria strong { border-bottom: 2px solid #3FA5D7; }
div#menu ul.secciones li.clientes strong { border-bottom: 2px solid #CE7E6F; }

div#menu ul.secciones li.seccion ul.subsecciones li.subseccion {
  font-size: 0.95em;
}


/************** COLUMNAS **************/


.columna {
  width: 205px; 
/* width: 17em; */
  float: right;
  margin: 0 0.5em 1em 1em;
}

.columna_oculta {
  display: none;
}

.vision               { height: 515px; background: url(/img/vision.jpg)           0 -80px no-repeat;  margin-top: 75px; }
.codigo_abierto       { height: 540px; background: url(/img/codigo-abierto.png)   0 0px no-repeat;    margin-top: 75px; }
.estandares_web       { height: 540px; background: url(/img/estandares-web.jpg)   0 0px no-repeat;    margin-top: 75px; }
.aplicaciones_web     { height: 345px; background: url(/img/aplicaciones_web.jpg) 0 0px no-repeat;    margin-top: 75px; }
.diseno_web           { height: 750px; background: url(/img/diseno_web.jpg)       0 0px no-repeat;    margin-top: 50px; }
.comercio_electronico { height: 600px; background: url(/img/formacion.jpg)        0 75px no-repeat; }
.gestion_de_contenidos{ height: 585px; background: url(/img/estandares-web.jpg)   0 80px no-repeat; }
.videovigilancia      { height: 470px; background: url(/img/videovigilancia.jpg)  0 0px no-repeat;    margin-top: 50px; }
.redes_y_sistemas     { height: 575px; background: url(/img/redes_y_sistemas.jpg) 0 80px no-repeat; }
.consultoria          { height: 540px; background: url(/img/codigo-abierto.png)   0 0px no-repeat;    margin-top: 75px; }
.streaming            { height: 220px; background: url(/img/streaming.jpg)        0 0px no-repeat; }
.formacion            { height: 540px; background: url(/img/formacion.jpg)        0 0px no-repeat;    margin-top: 75px; }
.descargas            { height: 520px; background: url(/img/codigo-abierto.png)   0 0px no-repeat;   margin-top: 75px;}

.novedades {
  width: 17em;
  text-align: right;  
  background-color: #ececec;
  margin-top: -170px;
}

.novedades h2 {
  font-size: 1.5em;
  margin: 10px 5px 15px 5px;
}

.novedades h3 {
  font-size: 1em;
  margin-right: 5px;
}

.novedades p {
  color: #555;
  font-size: 0.95em;
  margin: 5px;
}

/************** CONTENIDOS **************/

div#contenidos {
  margin: 0 15px 0 15px;
  text-align: justify;
  min-height: 325px;
}

div#contenidos h2 {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  color: #60D560;
  font-weight: bold;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 1.3em;
  margin: 25px 0 25px 0;
}

div#contenidos p {
  text-indent: 35px;
  line-height: 18px;
  line-height: 1.5em;
}

div#contenidos a {
  padding: 0;
}

div#contenidos ul {
  padding: 0 0 0 80px;
  list-style-image: url('/img/bolo.gif'); 
}

div#contenidos ul li {
  margin: 10px 0;
}
div#contenidos ul.proyectos {
  padding: 0;
  margin: 0 0 0 125px;
}

div#contenidos ul.proyectos li {
  margin-bottom: 20px;
}

div#contenidos ul.proyectos li span.descripcion {
  margin-top: 5px;
  display: block;
  color: #444;
  font-size: 0.95em;
}

div#contenidos ul.proyectos li span.descripcion strong {
  font-size: inherit;
/*   font-weight: normal; */
  color: #000;
}

div#contenidos ul.proyectos li a.externo {
  color: #008;
  padding: 0;
  font-size: 0.85em;
  border-bottom: 1px dashed #000;
}

div#contenidos ul.proyectos li a.externo:hover {
  color: #008;
  border-bottom: 1px solid #008;
  background: none;
}

div#contenidos ul.proyectos li strong {
  color: #000;
}

div#contenidos ul.proyectos li img {
  border: 1px solid #666;
  position: absolute;
  margin: 0 0 0 -75px;
}

/************** PIE **************/

div#footer {
  clear: both;
  background: #fff url('/img/footer.jpg') bottom left repeat-x;
  padding-top: 20px;
  text-align: center;
  color: #777;
  letter-spacing: 0.5px;
  font-size: 0.95em;
}

div#footer span {
  font-size: 0.85em;
}

div#validaciones {
  margin: 10px;
}

div#footer img {
  border: none;
}

a.etiqueta:hover {
  background: none !important;
}


/************** TABLA DE TARIFAS HOSTING **************/


table.hosting {
  border: 0px solid #000;
  text-align: center;
  font-family: Verdana, Helvetica, Arial, sans-serif;;
  font-weight: normal;
  padding: 15px; 
  width: 90%;
  margin: auto;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

table.hosting tr.par {
  background: #fefefe;
}

table.hosting td.f {
  text-align: left;
}

table.hosting td.p {
  color: #c00;
  font-weight: bold;
  font-style: normal;
}

table.hosting td strong {
  text-transform: uppercase;
  display: block;
  color: #006;
  letter-spacing: -0.5px;
}

table.hosting th {
  text-align: left;
  font-weight: bold;
  padding: 7px 0px 0px 0px; 
  border-bottom: 1px dotted #888;
}


/************** FORMULARIO DE CONTACTO **************/


form#contactar {
  width: 90%;
  margin: 20px auto;
}

form#contactar label {
  width: 30%;
}

form#contactar textarea,
form#contactar input {
  width: 60%;
  margin: 10px 0px 5px 0px;
}

form#contactar textarea {
  height: 125px;
}

form#contactar input.boton {
  background: url(/img/boton.gif);
  border: 0px solid #000;
  color: #000;
  font-size: 0.95em;
  margin: 0px;
  padding: 0px;
  height: 21px;
  width: 91px !important;
}


/************** AVISO LEGAL **************/


.pequeno {
  font-size: 0.85em;
  letter-spacing: -0.3px;
}


/************** HACK PARA EL FOOTER **************/

html {
  height: 100%;
}

body {
  height: 100%;
}

div#contenedor {
  position: relative;
  min-height: 100%;
}

* html div#contenedor {
  height: 100%;
}

div#footer {
  position: relative;
/*   margin-top: -185px; */
/*   width: 758px; */
  font-size: 1em !important;
  padding: 0;
  padding-top: 3em;
  margin: auto;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

/* Hack para el MSIE ... */
div.resultados_busqueda ul li {
  width: 99%;
}








#destacado img {
width: 100%;
height: 100%;
}



/* html { height: 100%; overflow:hidden;} */
/* body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; } */
/* img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: white; } */


div#medal {
  width: 219px;
  height: 88px;
  float: right;
  margin-top: 1em;
  right: 1em;
  position: relative;
}

div#medal img {
  border: none;
}

div#medal a {
  color: #000;
}

div#medal a:hover {
  background: none;
  color: #000;
  text-decoration: underline;
}

div#medal div {
  text-align: center;
  font-size: 11px;
  position: absolute;
top: 10px;
left: 62px;
  width: 159px;
}

div#medal div strong {
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 1px;
}

.highlighted {
  padding: 0 1em;
  background: #fff7c0; 
  border: 1px dotted #e5e5e5;
}

.notice {
background: #ff0;
width: 44em;
margin: 1em;
}
.notice p {
padding: 1em;
}