@font-face{
font-family: montserrat;
src: url(../fuentes/montserrat-bold-webfont.eot), url(../fuentes/Montserrat-Regular.otf) format("opentype");
font-weight:200;
}

	
body {
  
  color: black;

  font-family: Lato,tahoma,sans-serif;
  
  font-size: 100%;  /* Enables font size scaling in MSIE */

  margin: 0;

  padding: 0;
  
  }

  

  html > body {

  font-size: 9pt;

}



#global {



width: 1150px; 

margin: auto;

border: 2px black solid;



}



.doNotDisplay {

  display: none !important;

}



a:link{

color:black;

}



a:hover{

color:blue;

}



a{

color:black;

}





/* ##### Header ##### */



/* ##### CHANGE background-color to change header color, hex code is OK ##### */



#header {

  color: inherit;

  width: 1150px;

  height: 250px;

  background-image: url(../archenanuevo.jpg);

}





.headerRight {

  color: black;

  font-weight: bold;

  background-color: transparent;

  font-size: 40px;

  font-family: inherit;

  font-style: italic;

  float: right;

  margin:  0;

  padding: 0.5ex 2ex;

  

}



.subHeader {

  color: black;

  position: relative;

  background-color: #E0F8F7;

  font-weight: bold;

  font-size: 109%;

  margin: 0px;

  padding: 5px 5px 4px;

  float:left;

  height: 18px;
}



.subHeaderRight {

  color: black;

  font-weight: bold;

  font-size: 109%;

  background-color: #E0F8F7;

  text-align: right;

  margin: 0px;

  padding: 5px 5px 4px;

  height: 18px;
}



.subHeader a {

  color: white;

  background-color: black;

  text-decoration: none;

  font-weight: bold;

  margin: 0;

  padding: 0 1ex;

}



.subHeader a:hover {

  color: black;

  background-color: white;

}



#cssmenu{

border:none;

border:0px;

background-color:#333333;

margin:0px;

padding:0px;

font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

height: 25px;

}


.active {

background: #BEBEBE;

}


#cssmenu ul{

background:#333333;

height:25px;

list-style:none;

margin:0;

padding:0;

	

}



#cssmenu li{

float:left;

padding:0px;

list-style-type: none;		

}



#cssmenu li a{

	

background: #333333 url("../seperator.gif") right no-repeat;

color:white;

display:block;

font-weight:normal;

line-height:25px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

	

}



#cssmenu li a:hover, 

#cssmenu ul li:hover a{

background: #2580a2 bottom center no-repeat;

color:white;

text-decoration:none;

	

}



#cssmenu li ul{

	

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

	

}



#cssmenu li:hover ul{

display:block;

	

	

}



#cssmenu li li {



background:url('../sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

	

}



#cssmenu li:hover li a{

	

background:none;

	

	

}



#cssmenu li ul a{

	

display:block;

height:25px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

	

}



#cssmenu li ul a:hover, #cssmenu li ul li:hover a{

	

background:#2580a2 url('../hover_sub.gif') center left no-repeat; border:0px;

color:#ffffff;

text-decoration:none;

	

}

#cssmenu p{

	

clear:left;

	

}	



/* ##### Right Side Bar #### */



.rightSideBar {

  width: 300px;

  height : 2230px;
 
  float: right;

  clear: right;

  font-size: 110%;
  

  background: #d9e1f7; /* Old browsers */
background: -moz-linear-gradient(left,  #d9e1f7 1%, #b8c6df 78%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#d9e1f7), color-stop(78%,#b8c6df)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #d9e1f7 1%,#b8c6df 78%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #d9e1f7 1%,#b8c6df 78%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #d9e1f7 1%,#b8c6df 78%); /* IE10+ */
background: linear-gradient(to right,  #d9e1f7 1%,#b8c6df 78%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9e1f7', endColorstr='#b8c6df',GradientType=1 ); /* IE6-9 */

border-left: 1px solid rgb(216,210,195);

   

}



.rightSideBar .sideBarTitle {

  color: rgb(64,64,64);

  background-color: rgb(135,206,250);

  font-weight: bold;

  margin: 0;

  padding: 0.8ex 1ex;

}



.rightSideBar ul {

  list-style-type: none;

  list-style-position: outside;

  margin: 0 0 1em 0;

  padding: 0;

}



.rightSideBar li {

  margin: 1ex;

  padding: 0 0 0 0;

}



.rightSideBar a {

  color: rgb(166,140,83);

  background-color: transparent;

  text-decoration: none;

}



.rightSideBar a:hover {

  color: rgb(202,225,255);

  background-color: transparent;

  text-decoration: none;

}



.rightSideBar .sideBarText {

  color: black;

  background-color: transparent;

  line-height: 1.25em;

  margin: 1ex 0.25ex 1.5em 0.75ex;

  padding: 0;

  display: block;

}



.rightSideBar .sideBarText a {

  text-decoration: underline;

  font-weight: bold;

}



.rightSideBar .sideBarText a:hover {

  text-decoration: none;

}



.rightSideBar .thisPage {

  color: rgb(64,64,64);

  background-color: transparent;

  font-weight: bold;

}





/* ##### Main Copy ##### */





#main-copy {

  width: 849px;

  height: 2230px;
  
  color: black;

  background: url('../imagenes/water1.gif');

  float: left;

}


.estacion{
	
	width: 23px; 
	
	margin: -3px 0px;
}
 
.peq{
	
vertical-align: top; 

display: inline-block; 

margin: 2px;	
	
}
 
.astro {

  color: white;

  background: black;

}

#ajaxavisos{
	
	font-size:110%;

}

.bordetabla {

        text-align: center;

	border-collapse: collapse;

	font-weight: bold;

}



.bordetabla th { 

  border: 2px solid black;

  height: 20px;

  width: 77px;

}



.bordetabla td {

  border: 2px solid black;

  height: 20px;

  width: 77px;

  

}
.principal{

border: 3px inset blue;

border-collapse:collapse;
}

h2,h3{

  text-align: center;

}

.tooltip {color: white; padding: 3px; font-size: 90%;}
#beaufort span{
margin-top: 3px;
display: inline-block;
width: 6px;
height: 6px;
border-top: 1px solid grey;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
}
#ultimo{
border-right: 1px solid grey;
}


#tabla_avisos{
	
	border-collapse: collapse;
	border: 1px solid black;
	font-size: 12px;
	font-family: 'Open Sans', sans-serif;
}

.estrecho{
	width:5%;
}
#tabla_avisos th{
	padding: 5px;
	border: 1px solid black;
	background-color: lightblue;
}

#tabla_avisos td{
	border: 1px solid black;
	text-align: center;
	background-color: #E0E0E0;
	padding: 5px;
}

.dia_tabla{
	background-color: #1b488e !important;
	color: white;
	font-size: 14px;
}

.avisos3 {
background-color: yellow;
color:black;
border: 1px solid black;
padding:3px;
}
.avisos2 {
background-color: orange;
color:black;
border: 1px solid black;
padding:3px;
}
.avisos1 {
background-color: red;
color:black;
border: 1px solid black;
padding:3px;
}

#riesgo {
background-color: black;
font-size: 18px;
font-weight: bold;
text-align: center;
color: white;
padding: 15px;
}

#riesgo span{
margin-left: 7px;
font-size: 14px;
}

#sin_riesgo {
background-color: black;
font-size: 18px;
font-weight: bold;
text-align: center;
color: white;
padding: 15px;
border: 5px solid #32CD32;
}

.activo td{
background-color: #ff7272 !important;
}


.blinking{
    animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}

#div_aumen {
position : absolute;
top : 1000px;
right : 150px;
width : 772px;
height : 592px;
text-align: center;
border : 3px solid green;
background-color : white;
display : none;
z-Index: 2;
}

#cerrar{
border: 1px solid black; 
margin: 3px; 
width: 75px; 
background-color: yellow; 
font-weight: bold; 
text-align: center;
cursor: pointer; 
float: right;
display: none;
}

#hora_hirlam{
text-align: center;
margin: 3px auto;
color: blue;
font-weight: bold;
}

#elem_hora{
text-align: center;
margin: 3px auto;
color: blue;
font-weight: bold;
}

#div_play{
text-align: center;	
font-family: tahoma, sans-serif;
}

/* ##### Footer ##### */



#footer {

  color: black;

  background-color: rgb(230,223,207);

  text-align: center;

  line-height: 1.5em;

  margin: 0;

  padding: 1em 4mm 1em 4mm;

  clear: both;

  border-top: 1px solid rgb(216,210,195);

}



#footer div {

  margin: 0;

  padding: 0 0 1ex 0;

}



#footer a {

  color: black;

  background-color: transparent;

  text-decoration: underline;

  font-weight: bold;

}



#footer a:hover {

  text-decoration: none;

}



 
