@charset "UTF-8";
/* CSS Document */

body {
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  font-size: 75%;
  background-color:#aaa;
}

/* Esta capa contiene al resto, sirve para delimitar el tamaño en horizontal y dentrar la web */

#container {
  background-image:url(../images/css/fondo_header.jpg);
  background-repeat:no-repeat;
  background-color:#004E99;
}


/* Cabecera */
#header {
  height: 110px;
  padding: 40px 50px 0px 20px;
  font-size:250%;
  color:#fff;
}

/* Menú donde colocamos las pestañas */
#main_menu {
  padding: 0px 10px 0 20px;
  overflow:hidden;
  font-size: 95%;
}


/* Las pestañas las vamos a montar con una lista <u><li></li>...<li></li></ul>  */
/* La pestaña activa le daremos al elemento li la clase .activo                 */
/* <li class="activo"><a href=""><span>Item</span></a></li>                     */
/* Es imprescindible añadir la etiqueta span elglobdndo el texto para conseguir */
/* el efecto de pestaña y que pueda varial en tamaño                            */
#main_menu ul {
  list-style:none;
  margin:0;
}

#main_menu li {
   display:inline;
}

#main_menu li a {
  text-decoration:none;
  color:#34679A;
  float:left;
  background:url(../images/css/tableft.gif) no-repeat left top;
  padding:0 0 0 5px;
}

#main_menu li a span {
  display:block;
  background:url(../images/css/tabright.gif) no-repeat right top;
  padding:12px 12px 8px 8px;
  white-space: nowrap;
}

#main_menu li a:hover span {
  color:#fff100;
}
	  
#main_menu li.activo a span {
  background-position:100% -42px;
}	  
	  
#main_menu li a:hover {
  background-position:0% -42px;
}
  
#main_menu li.activo a {
  background-position:0% -42px;
  color:#fff100;
  font-weight: bold;
}

#main_menu li a:hover span {
  background-position:100% -42px;
 }

#main_menu li a:hover {
  color:#fff;
}


/* Sub menú, este menú admite elementos desplegables */ 
/* Lo vamos a montar como una lista sin ordenar <ul>  con la particularidad que cada elemento del primer */
/* nivel del mení lo vamos a montar con su propio ul de esta forma:                                      */
/* Nota, hay que asignar al div que contiene el sub_menu la clase 'menu_orig'                            
  <div id="sub_menu" class="menu_orig">
    <!-- ELEMENTO 2, tiene un submenú que se forma de esta manera -->
    <ul>
      <li><a href="#">Robocup</a>
        <ul>
          <li><a href="robocupsoc.html">RoboCup Soccer</a></li>
          <li><a href="robocupres.html">RoboCup Rescue</a></li>
          <li><a href="nanogram.html">Nanogram</a></li>
          <li><a href="robocuphome.html">RoboCup@Home</a></li>
          <li><a href="robocupjunior.html">RoboCup Junior</a></li>
        </ul>
      </li>
    </ul>
    <!-- ELEMENTO 2, no tiene submenús -->
    <ul> 
      <li><a href="#">Darpa</a></li>
    </ul>
  </div>	
*/

#sub_menu {
  background-color:#145A9F;
  text-align:right;
  height: 1.8em;
  padding-left:10px;
  font-size: 90%;
  background-image:url(../images/css/fondo_h1.jpg);
  background-position: 0 -7px;
}

#sub_menu.menu_orig a {
  border:none;
  color:#fff;  
}

#sub_menu.menu_orig ul li a {
  background-image:url(../images/css/separador_menu.gif);
  background-position: 100% 5px;
  background-repeat:no-repeat;
}

#sub_menu.menu_orig a:hover{
  color:#fff100;
}

/* Si queremos cambiar el tamaño de los sub menús hay que hacerlo aquí */
/* ej: width:12em */
/* inicialmente a 10, cambio a 13em */
#sub_menu.menu_orig ul {
  text-align:left;
  width:11em;
}

/* Estilo correspondiente a los submenús */
#sub_menu.menu_orig ul li ul li{
  border-bottom: 1px solid #fff;
}

#sub_menu.menu_orig ul li ul li a {
  background-image:none;
  background-color:#2063A4;
}

#sub_menu.menu_orig ul li ul li a:hover {
  color:#80a1cc;
}


/* Título de pa página, hay que englobar el título dentro de un a etiqueta h1 */
#title {
  background-color:#024E96;
  color:#fff;
  background-image:url(../images/css/fondo_h1.jpg);
  background-position:bottom;
  background-repeat:no-repeat;
  border-bottom:1px solid #CBCBCB;
}

#title h1 {
  padding:10px 280px 5px 20px;
}

/* Contenidos de la web */
#main {
  padding: 20px 20px 5px 20px;
  border-right:1px solid #666;
  border-left:1px solid #666;
  text-align:justify;
  background-color:#FFFFFF;
}

#main ul {
  list-style:disc;
  margin: 0 0 1em 2em;
}

#main ul ul {
  list-style:circle;
}

#main table {
  margin-bottom:1.5em;
}

/* Asignaremos esta clase a las tablas que muestran contenido tabulado             */
/* La cabeceras de la tabla las debemos marcar con <th> para diferenciar el estilo */
#main .tabla_decorada {
  border: none;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666;  
}

#main .tabla_decorada td, #main .tabla_decorada th {
  border-bottom: 1px solid #666666;
  border-right: 1px solid #666666; 
  padding: 3px 5px;
  background-color:#f0f0f0; 
}

#main .tabla_decorada th {
  font-weight:bold;
  background-color:#555;
  color:#fff;   
}

/* Creamos dos clases para poder colocar fotos */
/* La estructura para utilizarla es la siguiente:  
<div class="ficha_foto_derecha">
  <img src="../images/robot_1.jpg" alt="Robot" />
  <p>Pie de foto</p>
</div>
*/
#main .ficha_foto_derecha {
  width:250px;
  float:right;
  margin: 0 0 1em 2em;
}

#main .ficha_foto_izquierda {
  width:250px;
  float:left;
  margin: 0 2em 1em 0;
}


#main .ficha_foto_derecha p, #main .ficha_foto_izquierda p {
  background-color:#f0f0f0; 
  font-style:italic;
  font-size:90%;
  color:#333;
  padding:5px 10px;
}


/* Pié de página */
#footer {
  background-image:url(../images/css/fondo_footer.jpg);
  background-repeat:no-repeat;
  background-color:#2727A3;
  padding: 50px 0px 5px 20px;
  color:#fff;
  font-size: 90%;
  border:1px solid #666;
  border-top:none;
}