/***********/
/* Body 
 Main css styles for the whole site
 © E. Garcia Ladóna
 Dept. d'Oceanografia Fisica i Tecnologica
 Institut de Ciencies del Mar (ICM-CSIC)
 08003 Barcelona (Spain)
 ========================
 CHANGES:
 * 08/2020:
   - the class "creditos" rewritten and know including a new class named 
     "creditostext" to build the credits block as a pure css tooltip
   - a javaScript function finecss() has been added to fine tunning the
     css of the navigation bar.
=======================================================================*/
body {
 background-image: url('/images/backmap.gif');
 margin:auto;
 padding: 1.5ex;
 background-color: #E6F0F3;
 font: 14px Arial,Helvetica,"Bitstream Vera Sans",sans-serif;
 margin: 10px auto auto;
 text-align: left;
 width: 1000px;
 line-height:2.5ex;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 -webkit-box-shadow: 5px 5px 5px 5px #4c4c4c;
 box-shadow: 5px 5px 5px 5px #4c4c4c;
}

/************/
/* Cabecera */
/************/

/* No more needed
.m_i_ca {width:44ex;}
.m_ii_ca {width:22ex;}
.m_iii_ca {width:10ex;}
*/
div#cabecera {
 background-image: url("/images/bnD1012.jpg");
 margin: auto;
 padding: 0px 0px 0px 0px;
 text-align:center;
 font-weight:bold; 
 width:905px;
 height:79px;
 margin-bottom:0px;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 -webkit-box-shadow: 5px 5px 5px #4c4c4c;
 box-shadow: 5px 5px 5px #4c4c4c;
}

div#cabecera p {
 width:90%;
 margin-bottom:0px;
 margin-top:0px;
 margin-left:-5em; /* To slightly recenter the title */
 color:#fcff00;
 font-size:130%;
 font-weight:bold;
 font-family:"Comic Sans MS","Times","serif";
 text-align:center;
}

div#cabecera img { 
border:0px; 
margin: 3px 2px 3px 3px}

/* NAVEGACION */
div#menu {
 padding:0px;
 margin:auto;
 width: 905px;
 height: 20px;
 background: #f5d596; /* el color de fondo */
 -webkit-box-shadow: 5px 5px 5px #4c4c4c;
 box-shadow: 5px 5px 5px #4c4c4c;
 border-radius: 0px 0px 10px 10px;
}
 
ul#mi-menu {
 background: #f5d596;
 list-style-type: none;
 /* margin: 0 auto; si queremos centrarlo */
 padding: 0px;
 margin:auto;
 width: 58%;
 float: left;
 /*height: 20px;   la altura y su ancho dependerán de los textos */
}

ul#mi-menu ul {
 list-style-type: inherit;
 display: block;
 box-shadow: 5px 5px 5px #4c4c4c;
 border-radius: 0px 0px 10px 10px;
}

ul#mi-menu li {
  /*display: block;*/
  position: relative;
  float: left; /* la lista se ve horizontal */
  margin: 0;
  padding: 0;
  padding-left: 0.2em; /* separation between items */
  padding-left: 1em; 
  height: inherit;
  border: 0px;
  z-index:10000; /* Importante para sst.html utility **/
}

ul#mi-menu li a {
  /*display: block; Crucial*/ 
  display: inline-block;
  font-family: Tahoma;
  font-size: 12px;
  font-weight: bold;
  line-height: inherit;
  text-decoration: none;
  transition: color .2s ease-in-out;
}
/* eliminamos los bordes del primer y el último */
.mi-menu li:first-child a { border-left: none; }
.mi-menu li:last-child a { border-right: none; }
.mi-menu li:hover > a { color: Crimson; } /* efecto hover cambia el color */

ul#mi-menu li:hover > a { color: Crimson; }

/* los submenús  HASTA AQUI */
ul#mi-menu li ul {
  position: absolute;
  margin: 0;
  padding: 0;
  opacity: 0; /* no son visibles */
  top: 24px;  /*se ubican debajo del enlace principal */
  background: #f5d596;
  border-radius: 0 0 5px 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: opacity .25s ease .1s;
 }
 /* son visibes al poner el cursor encima */
ul#mi-menu li:hover > ul {opacity: 1;}

/* cada uno de los items de los submenús */
ul#mi-menu li ul li {
  overflow: hidden;
  padding: 0;
  margin: 0;
  transition: height .25s ease .1s;
 }

ul#mi-menu li ul#uno li:after, ul#mi-menu li ul#dos li:after, ul#mi-menu li ul#tres li:after {
  content: "";

  height: 1px;
  background: black;
}

/* Fine tunning the width of the largest character */
ul#mi-menu li:hover > ul li {
 /*overflow: visible;*/
 overflow: hidden;
}
 
ul#mi-menu ul li a {
  margin: 0;
  padding-left:0.5em;
  padding-right:0.5em;
  border: none;
  text-decoration: none;
 }
/* Fine tunning the width of the largest character */
ul#mi-menu > li:last-child {float:right;}
ul#mi-menu li ul#uno li a#course2 {width: 24em;}
ul#mi-menu li ul#dos li a#course6 {width: 12.25em;}
ul#mi-menu li ul#tres li a#course9 {width: 7em;}

ul#mi-menu li.dropdown {display:block;}

ul.dropdown-content {
  top: 24px;
  left:-3em; 
  text-align:center;
  display: none;
  position: absolute;
  background-color: #f5d596;
  width:17em;
  transition: opacity .50s ease .1s;
  z-index: 1;
}

ul.dropdown-content a {
  text-decoration: none;
  display: block;
  float: left;
}
ul.dropdown-content a:hover {color: Crimson;}
.dropdown:hover ul.dropdown-content { display: block; }

.banderas {
 float:right;
 display:inline;
 margin-top:2px;
 padding-right:1ex;
}
/************************
* contenedor central de la
* pagina. TODO adecuar a
* la altura del browser 
*************************/
.body {
overflow-y:auto;
height:40em;
scrollbar-width:auto;
scrollbar-color:blue;
}

/************************
MENU de Contenidos/curso
*************************/
.ulmenuintro, .ulmenu {
 text-align:left;
 margin: 0em; 
 margin-left: 1em; 
 padding: 0em 0em 1em 1em; 
}
.ulmenu {
 float: right;
 padding: 2em; 
 width: 200px; 
 /*height: 30em;*/
 height: auto;
 font-size: 80%; 
 border: 3px solid #348fc9; 
 border-radius: 8px; 
 display: block; 
}

/*************
PIE DE PAGINA
**************/
.footnote { 
 border-top: 2px solid blue; 
 width:80%; 
 padding-bottom:2ex;
 padding-top:1ex;
 margin:auto;
 margin-top:2ex;
 }

/********************
ELEMENTOS DECORATIVOS
**********************/
a { text-decoration:none; }

.full {width:100%;}
.ochocinco { height:85%; }

.f11 {font-size:110%;}
.f095 {font-size:95%}
.f09 {font-size:90%}
.f085 {font-size:85%}
.f08 {font-size:80%}
.f16 {font-size:16pt;}
.f10 {font-size:10pt;}
.f8 {font-size: 8pt;}

.b {font-weight:bold;}
.i {font-style:italic;}
.teosbut {font-variant:small-caps; margin-right:1ex;}

.c {text-align: center;}
.l {text-align: left;}
.r {text-align: right;}
.j {text-align: justify;}

.vt {vertical-align:top;}
.vm {vertical-align:middle;}
.vb {vertical-align:bottom;}
.t {vertical-align:top;}

.fl {float:left;}
.fr {float:right;}

.mauto {margin:auto;}

.pl { padding-left: 2ex; }
.pr { padding-right: 2ex; }

.ov {overflow:scroll;}
.ov30 {overflow-y:auto; max-height:30em;}

/* COLORES */
.n { color:#000000; }
.rojo { color: #EB0000; }
.ama { color: #FFFF00; }
.orab { color: #FF6700; }
.oras { color:rgb(255, 165, 0);}
.azul { color: #0000FF; }
.verdazul { color: #11BFB1; }
.verde { color: green; }
.bl { color: white; }
.gris { color: #8c8c8c;}
.ctrad { color: #D09557;}
.vio { color: #dc53dc;}
.mrojo { color: #7C0418;}
.azulo { color: #000099;}

.bbl { background-color:white; }
.bn { background-color:black; }
.ba { background-color:#AACCCC; }
.bgris { background-color:#DDDDDD; }
.bbgris { background-color:#B5B5B5;}
.fgris { background-color:#c5c5c5;}
.cadet { background-color:#85cccc;}

.ocre { background-color:#FFCC99; }
.crema { background-color: #FFFFFF; }
.aguamar { background-color: #CCFFFF; }
.bazul { background-color: #0000FF; }
.fazul { background-color:#859999; }
.fazulf { background-color:#95FFFF; }
.verdec { background-color:LightGreen; }
.ocreb { background-color:PeachPuff; }

.trs { border-bottom: 2px solid blue; } 
/* COLORES MAREAS */
.mareai{ background-color: #FFCC66;}
.mareaii{ background-color: #FF9966; }
.mareaiii{ background-color: #D09557; }
.mareaiv{ background-color: #FF8B66; }
.mareav{ background-color: #66ffff; }
.mareavi{ background-color: #8f8f8f; }

.viento{ background-color: #AAAAAA; }
.vientoi{ background-color: #ffff99; }
.vientoii{ background-color: #bbffff; }
.vientoiii{ background-color: #f0f557; }

.obso { color:red; font-style:italic; }

.boxazul {
 margin:auto;
 width:60%;
/* background-color:#7279B9;*/
 background-color:#8f96d2;
 color:#FFFFFF;
 padding:1.5ex;
}

.boxverde {
 background-color:#11BFB1;
 padding:1.5ex;
}
.warningon { border: 2px solid red;}

.listafig { list-style-position:inside;}

.shadow {
 -webkit-box-shadow: 5px 5px 5px #4c4c4c;
 box-shadow:   5px 5px 5px #4c4c4c;
}

.icon {height:15px; width:24px; border:0px;}

.version {
	color:#858585;
	margin:0px;
	padding:0px;
	margin-top:2em;
	text-align:center;}
 
.listcontent { 
 width:500px;
 display:inline-block;
 padding-left:1ex;
 line-height:2em; 
}
/**** TABLES *****/
.t12 { 
 background-color:#FFDDDD;
 margin:auto;
 border:1px solid black;
 border-spacing:2px;
}
.t12 tr, .t12 td, .t12 th { border:1px solid black; }
.pad25 { padding: 2px 5px 2px 15px; }

/*** ENLACES *****/
.enlace { border-bottom: solid blue 2px;}
.enlace p { font-size: 12px; }
.enlace ol {
 border-top: solid blue 2px;
 padding-top: 1ex;
}
.enlace ol li {
 background-color: #E6F0F3;
 padding-left: 7px;
 margin-bottom: 1ex;
/* padding: 2ex;*/
}
.enlace ol li ul { margin-top: 1ex; }
.enlace ol li ul li{ list-style-type:disc;}

/*** CREDITOS ****/
/***.credit {
 display:none;
 padding:1.5ex;
 font-size:85%;
 border: 0 solid black;
 border-radius: 8px 8px 8px 8px;
 box-shadow: 0 0 25px black;
 padding: 1ex;
 }*****/
 
/* Prueba de creditos 09/2020 */
.creditos {
margin-top:1em;
position: relative;
display: inline-block;
width: 100%;
}
.creditostext {
 font-size: 85%;
 box-shadow: 0 0 25px black;
 text-align: left;
}
/* Tooltip text */
.creditos .creditostext {
  visibility: hidden;
  background-color: #f5d596;
  padding: 0.5em 0.5em;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 4.5em;
  opacity: 0;
  transition: opacity 1s;
}

/* Tooltip arrow */
.creditos .creditostext::after {
  content: " ";
  position: absolute;
  top: 1em;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.creditos:hover .creditostext {
  visibility: visible;
  opacity: 1;
}

 /*** NOTA *****/
.nota { font-size: 10px; }
.aste { font-size: 14px; }

/*** FIGURAS *****/
.figurafix {
 margin:auto;
 background-color: #E6F0F3;
 border: 0 solid black;
 border-radius: 8px 8px 8px 8px;
 padding: 0ex;
 /*padding-left: 1ex;
 padding-right: 1ex;*/
 width: 90%;
}

.figura {
 margin:auto;
 background-color: #E6F0F3;
 border: 0 solid black;
 border-radius: 8px 8px 8px 8px;
 box-shadow: 0 0 100px black;
 padding: 0ex;
 /*padding-left: 1ex;
 padding-right: 1ex;*/
 position: fixed;
 top: 20%;
 left: 10%;
 width: 80%;
 z-index: 100;
}

.figura-old {
 margin:auto;
 background-color: #E6F0F3;
 border: 0 solid black;
 border-radius: 8px 8px 8px 8px;
 box-shadow: 0 0 100px black;
 padding: 0ex;
 padding-left: 1ex;
 padding-right: 1ex;
 position: fixed;
 top: 20%;
 left: 10%;
 width: 80%;
 z-index: 100;
}

.thumbl, .thumbr, .thumbliii {
font-weight:bold;
font-style:italic;
text-align:center;
padding:0.5ex;
width:100px;
font-size:80%;
border:solid 2px #82cfe5;
border-radius:8px;
}
.thumbl,.thumbliii{float:left;margin-right:1em;}
.thumbr {float:right;margin-left:1em;}

.thumbl img, .thumbr img {width:100%; } 
.thumbliii  {width:300px; }
.thumbliii img {width:30%; }  

/* margen para la figuras flotantes */
.margen{ float:left; margin: 0.5ex 2ex 1.5ex 0.5ex;}
.margenr{ float:right; margin: 0.5ex 0.5ex 1.5ex 2ex;}

/* labels se usa para la clase de color de la traduccioens de las figuras */
.labels {color:#0000FF;}

.close {
 vertical-align:top;
 height:35px;
 float:right;
}

.titulores {
 width:100%;
 height:5ex;
 margin:0px;
 margin-left:-1.2%;
 padding-right:0px;
 /*border: 1px solid black;*/
 border-radius:10px 10px 10px 10px ;
 margin:0px;
/*padding-top:-5px;*/
/*background-color:#18bfef;*/
/* FIRefox */
background: -moz-linear-gradient(#e6f0f3,#7fe2ff,#e6f0f3); 
/* Chrome */
background: -webkit-linear-gradient(#e6f0f3,#7fe2ff,#e6f0f3); 
background: -o-linear-gradient(#e6f0f3,#7fe2ff,#e6f0f3); 
/*Standard */
background: linear-gradient(#e6f0f3,#7fe2ff,#e6f0f3);
}

.titulores h3 {
 padding:0ex;
 padding-left:1ex;
 padding-top:1ex;
 margin:0px;
}

.cuerpo {
  margin:auto;
  margin:5px;
  background-color:#FFFFFF;
  border:2px solid #000000;
  border-radius:8px;
  padding:5px;
/* old fashion
 clear:both;
 margin:0px;
 padding: 1ex 1ex 0ex 1ex;*/
}

.piefig {
 clear:both;
 margin:0px 0px 1ex 0px;
 padding: 0ex 1ex 1ex 1ex;
}

/************* CALCUlADORAS *****************/
.calcul {
 margin:auto;
 padding:1ex;
 background-color:#FFCC99;
 width:60%;
 text-align:center;
}

span.aviso {color:red; display:none;}

.eosrow {
 padding-left:1ex;
 padding-right:2ex;
 background: #555; 
 color:#fff;
}


/************* EJERCICIOS *****************/
h2.titular {
 margin-bottom:0ex;
 padding-top:1ex;
 text-align:center;
}

/*** GLOSARY *****/
.glossari {
 position:absolute;
 /*top:150px;
 right:380px;*/
 /*top:28%;
 right:10%;*/
 top: 30%;
 left: 70%;
 width: 18ex;
 background-color: #F5D596;
 border: 0 solid black;
 border-radius: 8px 8px 8px 8px ;
 /*box-shadow: 0 0 100px black;*/
 padding: 0.25ex;
 z-index: 100;
}

/* TOOLTIPS */

/*.showtip {
 background-color: #d6f5f5;
 border-radius: 8px 8px 8px 8px;
 padding: 5px;
 vertical-align: middle;
 color:#4c4c34;
}*/

.showtsect {
 visibility:hidden;
 font-size:90%;
 width:450px;
 float:right;
 padding: 0.5em;
 margin-bottom:0.5em;
 font-weight: bold;
 vertical-align: middle;
 text-align: center;
 /*border: 4px solid #348fc9;
 border-radius: 8px 8px 8px 8px;*/
}
.showtsect img { width:400px; }

/** Imatge dels menus dinàmics *
.image_help {
 width:100%;
 margin-bottom:1em;
 padding:0px;
 padding-right:1ex;
}*/

.hrline {
  display: flex;
  visibility: hidden;
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
} 

/******** bvf page **************/
.campo {width:5em;}

.tg {border-collapse:collapse;border-spacing:0;}
.tg td {overflow:hidden;word-break:normal;}
.tg th {overflow:hidden;word-break:normal;}
.tg .tg-0lax {vertical-align:top;width:33%;}

/******** Diagrama TS **************/
#cuerpots { text-align:center; }

.axisf path, .axisf line {
    fill: none;
    stroke: black;
    stroke-width:2px;
    shape-rendering: crispEdges;
}
.axisf text {
    font-family: sans-serif;
    font-size: 0px;
}
.axisn path, .axisn line {
    fill: none;
    stroke: black;
    stroke-width:2px;
    shape-rendering: crispEdges;
    z-index:-999;
}
.axisn text {
    font-family: sans-serif;
    font-size: 14px;
}

.tstooltip {	
    position: absolute;
    text-align: left;
    width: 100px;
    height: auto;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 1px solid blue;
    border-radius: 8px;
    pointer-events: none;
}

/*************** wind graphic *********/
.textah {
	width:100%;
	overflow-x:auto;
	resize:none;
	white-space: pre;
}

/*************** new index *********/
.newdata {
  margin-right:0ex;
  border:solid 1px grey;
  border-top:solid 4px #358ecd;
  color:#358ecd;
  padding:0.5ex;
  margin-bottom:1ex;
}
.newdata_text, .newdata_text p {
padding-top:0ex;
margin-top:0ex;
}
.newdata_text { width:87%; }
/*************** CONTROL**************/
.btable * { border: solid black 1px; }

.ui-tabs-nav {
  text-align: center;  
}

.ui-tabs .ui-tabs-nav li {
  display: inline-block; 
  float: none;
  margin:0em; 
}
/*************** MARCOS POPUP **************/
.marco{
  margin:auto;
  background-color:#FFFFFF;
  border: 2px solid #000000;
  border-radius:8px;
  padding:5px;
}
/********** FIG Wiki ************/
.wiki {
width:6ex;
height:100%;
vertical-align: middle;
}