/* Ancho total: 875px, ancho texto central: 700px, left:175 px */

body  {
  font-family: Optima,sans-serif;
  font-size: 1.5em;
  color: #333; /* Color de fuente por defecto */
  background: white;
}

/* Banner and basic navigation bar common to all pages */

#main {
  position: relative;
  width: 875px; /* h2 area 175 + .section 475 + .sidenote 190 */
  margin: 0px auto 0px auto;
  padding: 0px 0px 0px 0px;
}

#banner {
  position: relative;
  width: 875px;
  height: 95px;
  padding: 5px;
  margin: 0px 0px 0px 0px;
  border: 0px solid #CDC4AC;
  background: ;
}


#bannerimg {
  width: 872px;
  height: 95px;
  background: url(img/mainbanner.gif);
}


#menu {
  position: relative;
  width: 358px; /* 370 - 2 border - 5*2 padding */
  left: 0px; /* 650 - 370 */
  padding: 5px;
  margin: 5px 0px 25px 0px;
  border: 1px solid #CDC4AC;
  font-size: 13px;
  text-align: center;
  background: #FFFFF0;
}

#menu a, #menu a:visited {
  color: black;
}

#menu h1 {
  display: block;
  position: absolute;
  top: 0px;
  left: 368px; /* Referred to the content box of .section, so 1 border + 5 padding, no padding for absolute */
  width: 280px; /* 650 - 370, no border, no padding */
  height: 28px;
  font-size: 1.7em;
  font-family: Times;
  font-weight: normal;
  text-align: right;
  letter-spacing: -1px; 
  margin: 0px 0px -28px 0px;
}

#menu h1 span {
  position: relative;
  padding: 0px 4px 0px 3px;
  background: #FFFFF0;
  border: 1px solid #CDC4AC;
}



/* Left Box */

#leftframe {
  position:absolute;
  top: 0px;
  left:  4px;
  width: 165px;
  height: 401px;
  margin: 0;
  padding: 0;
/*  border: 1px dotted #CDC4AC;
  border-width: 1px; 
border:1px solid #eee;*/
  background: url(img/leftimg.jpg); 
}


.leftnote {
  width: 155px; 
  height: 390px;
  position: relative;
  left: 5px;
  font-size: 0.5em;
  margin: 0px 0px 5px 0px;;
  padding: 10px 5px 10px 5px;
}


.leftnote h3 {
  padding: 5px;   
  text-align:center; 
  color:black;
  font-size: 12px;
  font-weight: bold;
  margin: 5px 0px 1px 0px;
/*  background: url(img/menu_band.gif); */
}


.leftnote ul {
  position: relative;
  left: 0px;
  top: 0px;
  font-size: 10px;
  margin: 0px 0px 0px 0px;
  padding: 3px;
 }

.leftnote ul li {
  line-height:12px; 	
  list-style-type: disc;
  margin: 0px 0px 0px 22px;
  padding: 5px 0px 5px 10px;
}

.leftnote ul li a,  .leftnote ul li a:visited {
display:inline; 
text-align:center; 
text-decoration:underline; 
width:155px; 
line-height:12px; 
font-size:10px;
}



/* End of Left Box */


/* Central part */


#centralpart{           /* esto define la linea de separacion entre la cabecera y la zona central */
  position: relative;
  top: 30px;
  left: 0px;
  width: 875px;
  left:0;
  margin: 0;
  padding: 0;
/*  border:1px dotted #CDC4AC;
  border-width: 1px 0px 0px 0px; */
}




#centralframe {  /* Ahora defino el texto por defecto */
  position:relative;
  top: 0px;
  left:  175px;
  width: 699px;
  height: 402px;
  margin: 0;
  padding: 0;
  border: 1px solid #CDC4AC;
  border-width: 0px 1px 0px 1px;
  background: url(img/QFT-logo.gif); 
}

#centralframe a,  #centralframe a:visited {
color: black; 
font-size:1em;
}

#intro {
  position:relative;
  top: 5px;
  left:  222px;
  width: 470px;
  height: 390px;
  margin: 0;
  padding: 0;
/*  border: 1px solid black;
  border-width: 1px 1px 1px 1px; */
}



#intro h3 {
  top: 15px;
  text-align:left; 
  font-size: 16px;
  font-weight: bold;
  margin: 5px;
  padding: 5px;
  color: black;
}



#intro p { 
  position: relative;
  top: 0px;
  left: 30px;
  width: 400px;
  color:black;
}


#intro ul {
  position: relative;
  left: 10px;
  top: 0px;
  font-size: 12px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
 }

#intro ul li {
  line-height:15px; 	
  list-style-type: disc;
  margin: 5px 0px 5px 5px;
  padding: 5px 0px 5px 5px;
}



/* HERRAMIENTA CENTRAL BÁSICA */

.menu {
position:absolute;
left:175px;
top:-20px;
width:701px; 
margin:0; 
font-family: Optima,sans-serif;
/* font-family: verdana, arial, sans-serif; */
z-index:90;
}

/* ------- Preparamos la cabecera del menu de opciones central ------- */

.menu ul {
padding:0px; 
margin:0;
list-style-type: none;
border:0;
}

/* float the list so that the items are in a line and define borders */

.menu ul li.top {
float:left;  /* float:left; */ 
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px; /* padding: 0px 1px 0px 0px ;*/
border:  1px  dotted #CDC4AC;
border-width: 0px 1px 0px 0px;
}


.menu ul li.first{
float:left;  /* float:left; */ 
margin: 0px;
padding: 0px 0px 0px 0px ;
border:  1px  dotted #CDC4AC;
border-width: 0px 1px 0px 1px;
}


/* style the menu option links to be 139px wide by 20px high with a top and right border 1px solid white. 
Set background color and font size. */

.menu ul li a.top,  .menu ul li a.top:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:139px; 
color:black; 
font-weight: bold;
background: url(img/menu_band.gif); 
line-height:20px; 
font-size:11px;
}


/* set the background and foreground color of the main menu li on hover */

.menu ul li:hover a.top {
color:#fff; 
background: url(img/grey.gif);
}


/* ------- Definimos las pestañas de opciones --------- */ 

.menu ul li div.centralf {
display: none;
}

/* make the sub menu ul visible and position it beneath the first list item */

.menu ul li:hover div.centralf {
  text-align:left;
  display:block; 
  position:absolute; 
  top:20px; 
  left:1px; 
  width: 698px;
  height: 402px;
  margin: 0;
  padding: 0;
/*  border: 1px solid black;
  border-width: 1px 1px 1px 1px; */
  background: url(img/QFT-logo.gif);
}


.menu ul li ul {
  display:block;
  list-style-type: disc;
  position: relative;
  left: 45px;
  top: 0px;
  font-size: 12px;
  line-height:13px; 
  margin: 0px;
  padding: 0px;
  border:0px;
}

.menu ul li ul li {
  margin: 5px 0px 0px 10px;
  padding: 5px 0px 0px 10px;
  width:400px; 
}




.cbox {
  position:relative;
  top: 2px;
  left:  218px;
  width: 467px;
  height: 388px;
  padding: 5px;
}


.cbox p {
  position: relative;
  top: 0px;
  left: 25px;
  width: 430px;
  font-size: 12px;
  padding: 5px;
  margin: 0px;
}


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


.cbox h3 {
  text-align:left; 
  font-size: 16px;
  font-weight: bold;
  margin: 0px;
  padding: 5px;
  color: black;
  font-family: Optima,sans-serif;
}


.cbox h4 {
  position:relative;
  left:25px;
  text-align:left; 
  font-size: 13px;
  font-weight: bold;
  margin: 2px;
  padding: 10px;
  color: black;
  font-family: Optima,sans-serif;
}

.cbox a,  .cbox a:visited {
display:inline; 
text-decoration:none;
color:blue;
background:none;
font-size:12px;
font-weight:normal;
}











/* ----------------- Fin del Experimento ---------------- */ 


/* Herramienta central I: galería */


#gallery {width:677px; height:378px; padding:10px; border:0px solid #333; background: url(img/QFT-background.jpg) ; position:relative; }
#gallery b.default {position:absolute; left:300px; top:30px; width:271px; height:240px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:black; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; left:0px; top: 0px; width:270px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:220px; position:relative; left: 0px;top: 15px; float:left;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a.pic {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a.pic span {display:none;}
#gallery ul li a.pic img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a.pic:hover {white-space:normal; border-color:#555 #ddd #eee #333; background: url(img/gris_claro.gif);}
#gallery ul li a.pic:hover b {position:absolute; left:290px; top:0; width:271px; height:287px; text-align:center; background:; z-index:20;}
#gallery ul li a.pic:hover span {display:block; color:black; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; left:0px; top: 0px; width:270px; margin:0 auto;}
#gallery ul li a.pic:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}


#gallery ul li a.pic:active, #gallery ul li a.pic:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:url(img/gris_claro.gif);}
#gallery ul li a.pic:active b, #gallery ul li a.pic:focus b {position:absolute; left:290px; top:0; width:271px; height:287px; text-align:center; background:; z-index:10;}
#gallery ul li a.pic:active span, #gallery ul li a.pic:focus span {display:block; color:black; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; left:0px; top: 0px; width:270px; margin:0 auto;}
#gallery ul li a.pic:active img, #gallery ul li a.pic:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}



/* Herramienta central II: Investigación */






/* Herramienta central II: buscadores */

.centralbars{text-align:center;
  position: relative;
  top:  5px;
  left: 0px;
  margin:10px 0px 0px 0px; 
  padding: 15px 0px 0px 0px;
  vertical-align:middle; 
  width:467px; 
 
}


/* Herramienta central III: Tabla con links */


#tablelinks table{
margin: 5px 10px 5px 5px;
padding: 10px 5px 10px 5px;
}

#tablelinks dl{
margin: 0;
padding: 0;
border:1px dotted #CDC4AC;
border-width: 0px 1px 0px 0px;
}


#tablelinks td{
margin: 0;
padding: 0;
}

#tablelinks dt{
padding: 5px 2px 10px 2px;
text-align:left; 
color:black; 
line-height:2.0em; 
font-size:1.0em;
}

#tablelinks dd{
position:relative;
top:-1.0em;
left:-2.0em;
width:100px;
}

#tablelinks a, #tablelinks a:visited{
text-align:left; 
text-decoration:none; 
color:blue; 
border:0;
width:100px;
background:; 
line-height:1.0em; 
font-size:0.8em;
font-weight: normal;
}


#tablelinks a:hover{
color:black; 
background: url(img/grey.gif);
}



/* Particular elements needed in different pages: proyectos */


.abstract {
  width: 680px; /* With 1+1 borders and 5+5 padding, requires 475px */
  position: relative;
  font-size: 0.5em;
  left: 175px;
  margin: 15px 0px 15px 0px;
  padding:15px 10px 15px 10px;
  border: 1px solid #CDC4AC;
  background: url(img/QFT-background.jpg);
}

.abstract h2 {
  padding: 10px;   
  text-align:center; 
  color:black;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0px 1px 0px;
}


.abstract h3 {
  padding: 5px;   
  text-align:center; 
  color:black;
  font-size: 12px;
  font-weight: bold;
  margin: 5px 0px 1px 0px;
}

.mysidenote {
  width: 155px;
  position: absolute;
  top: -1px;
  left: -176px; 
  padding: 10px 5px 10px 5px;
  margin: 0;
  border: 1px solid #CDC4AC;
  background: url(img/leftimg.jpg); 
  }


.mysidenote h3 {
  padding: 5px;   
  text-align:center; 
  color:black;
  font-size: 12px;
  font-weight: bold;
  margin: 5px 0px 1px 0px;
/*  background: url(img/menu_band.gif); */
}


.mysidenote ul {
  position: relative;
  left: 0px;
  top: 0px;
  font-size: 10px;
  margin: 0px 0px 0px 0px;
  padding: 3px;
 }

.mysidenote ul li {
  line-height:12px; 	
  list-style-type: disc;
  margin: 0px 0px 0px 22px;
  padding: 5px 0px 5px 10px;
}

.mysidenote ul li a,  .mysidenote ul li a:visited {
display:inline; 
text-align:center; 
text-decoration:underline; 
width:155px; 
line-height:12px; 
font-size:10px;
}

.mynote {position: relative;width:155px;float:left; }
.mynote h2 {text-align:left;}
.mynote h3 {text-align:center; color:black;font-size:1.1em;}
.mynote p {text-align:center}


/* End of Left Box */


/* This defines several-line elements within a main line.*/

.defbox{text-align:left}
.defbox p{display:inline} /* El ancho por defecto está determinado por su contenido */
.defbox span{
  margin:0px 0px 0px 0px; 
  vertical-align:middle; 
  width:625px; 
  position: relative;
  left: -1.0em;
  display:table-cell; 
  display:inline-table;   display:inline-block;
} 



.definition {
  width: 620px;
  top:-0.5em;
  position: relative;
  left: 25px;
  padding: 15px 0px 0px 0px;
}


/*  Definiciones menores  */

p {
  font-size: 12px;
  margin: 5px 0px 5px 0px;
  text-align:left; 
  line-height:20px; 
}

ul {
  font-size: 12px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
 }

ul li {
  left: 25px; 	
  margin: 5px 0px 5px 22px;
  padding: 5px 0px 5px 22px;
  list-style-type: disc;
}

ol {
  font-size: 12px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

ol li {
  margin: 5px 0px 5px 22px;
  padding: 5px 0px 5px 22px;
}

em {
  font-style: normal;
  color: black;
}


h3 {
  font-size: 14px;
  font-weight: bold;
   /* color: #000070; */
  margin: 5px 0px 1px 0px;
}

h4 {
  font-size: 12px;
  font-weight: normal;
  margin: 1px 0px -4px 0px; /* 1 - 5 = -4 */
}

h5 {
  font-size: 12px;
  font-weight: normal;
  color: #333;
  margin-top: -8px;
  margin-bottom: 8px
}

small {
      font-size: 10px;
      font-weight: normal;
      margin-top: 0px;
      margin-bottom: 0px
      }


table {
  margin: 0px 0px 0px 0px;
  border-spacing: 0px 5px;
}

td {
  font-size: 12px;
  text-align: left;
  vertical-align: top;
  padding: 0px;
}

td p {
  margin: 0px 0px 5px 0px;
}

th {
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  padding: 0px 4px 0px 0px;
}

a  {text-decoration: none}

a:link    {color: blue;}
a:visited {color: #800080;}
a:active  {color: #891111;}

a:hover   {text-decoration: underline}

a.black {color: #333}


/* Experimentos */


#footer {
  position: relative;
  top: 30px;
  left: 170px; 
  width: 700px;
  height: 32px;
  padding: 0;
  margin: 5px 0px 0px 0px;
  border:1px dotted #CDC4AC;
  border-width: 1px 0px 0px 0px;

}

#miembros {
  position:relative;
  top: 20px;
  left:  218px;
  width: 467px;
  height: 388px;
  padding: 10px;
  margin: 10px;
}