/*general settings colors: #004C8B y #EBEBEB */

div { border:0px;  }
body { overflow:auto; background-position:16px 25%;height:100%; }
html>body  { overflow:visible; height:100%;}
#Superior { position:absolute; top:3%; left:0%; width:33%; height:13%; overflow:auto; background-color:#EAEAEA;padding-left:2%;padding-top:2%; }
#Superior2 { position:absolute; top:16%; left:; width:100%; height:5%; overflow:auto; padding-left:2%;padding-top:2px;background: url(../images/fnds2.png) 0 0 repeat-x;  } /*background-color:#66cc00;*/
#Izquierda { position:absolute; top:15%; left:0; width:25%; height:85%; overflow:auto; background:transparent; }
#Derecha { border:0px; position:absolute; top:21%; left:0%; width:100%; height:95%;padding-left:2%; padding-top:0; margin-left:0; overflow:auto; background-color:#FFF; }
#Superior3 { position:absolute; top:3%; left:32%; width:34%; height:13%; overflow:auto; background-color:#EAEAEA;padding-left:2%;padding-top:1%; }
#Superior4 { position:absolute; top:3%; left:65%; width:34%; height:13%; overflow:auto; background-color:#EAEAEA;padding-left:2%;padding-top:1%; }
#Izquierda p { padding-top:160px; }
#vigilado { position:absolute; top:40%; left:0; width:3%; height:400px; overflow:auto;  background: url(../images/super.png) 0 0 no-repeat; }
#Superior5 { position:absolute; top:0%; left:0%; width:100%; height:18px; overflow:auto;background: url(../images/fnds5.png) 0 0 repeat-x; padding-top:2px; }/*background-color:#ccc;*/

body {
scrollbar-3dlight-color : #FFFFFF;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color :#003893;
scrollbar-arrow-color : #003893;
scrollbar-face-color : #EBEBEB; 
scrollbar-track-color : #FFFFFF; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
font-style: normal;
FONT-WEIGHT: normal;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffffff;
height:100%;

}

td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;


}
th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;}
.table {
cellspacing:0px;
cellpadding:0px;

}
select{
 font-size: 14px;
 font-weight: normal;
}
hinput{
 font-size: 12px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 border: 1pix #ffffff solid; 
 border-color: #FFFFFF solid; 
 font-weight: normal
}
textarea{
font-size: 12px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 border: 1pix #7F9DB9 solid; 
 border-color: #7F9DB9 solid; 
 font-weight: normal
}

.rlink {
    COLOR: #FFFFFF;  
    TEXT-DECORATION: none
}
.rlinkd {
     TEXT-DECORATION:underline;
} 
.rlink2 {
    COLOR: #336600;  
    TEXT-DECORATION: none
}

A.tlink2:link{color: #0080FF; text-decoration:none; }
A.tlink2:visited {color: #0080FF; text-decoration:none; }
A.tlink2:hover {Font-size:10px;FONT-WEIGHT: bold; COLOR: #0080FF; text-decoration:underline; }
A.tlink2:active {color: #0080FF;text-decoration:none;}

A.flink1:link{font-size: 11px;color: #FFFFFF; text-decoration:none; }
A.flink1:visited {font-size: 11px;color: #FFFFFF; text-decoration:none; }
A.flink1:hover {font-size: 11px;FONT-WEIGHT: normal; COLOR: #FFFFFF; text-decoration:underline; } 
A.flink1:active {font-size: 11px;color: #FFFFFF;text-decoration:none;}  

A.flink3:link{color: #004C8B; text-decoration:none; } 
A.flink3:visited {color: #004C8B; text-decoration:none; }
A.flink3:hover {Font-size:13px;FONT-WEIGHT: bold; COLOR: #004C8B; text-decoration:underline; }
A.flink3:active {color: #004C8B;text-decoration:none;} 

A.plink:link{color: #CCCCCC; text-decoration:none; } 
A.plink:visited {color: #CCCCCC; text-decoration:none; }
A.plink:hover {Font-size:1px; COLOR: #CCCCCC; text-decoration:none; }
A.plink:active {color: #CCCCCC;text-decoration:none;}

A.flink2:link{color: #FFFFFF; text-decoration:none; } 
A.flink2:visited {color: #FFFFFF; text-decoration:none; }
A.flink2:hover {FONT-WEIGHT: bold; COLOR: #FFFFFF; text-decoration:underline; } 
A.flink2:active {color: #FFFFFF;text-decoration:none;}  

A.flink4:link{color: #0000FF; text-decoration:none; } 
A.flink4:visited {color: #0000FF; text-decoration:none; }
A.flink4:hover {Font-size:12px;FONT-WEIGHT: normal; COLOR: #00CC33; text-decoration:none; }
/* background-color: #FFFFFF; en el hover para que le de fondo al link */
A.flink4:active {color: #0000FF;text-decoration:none;}



.fuente {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #000000;
    text-decoration: none;
}
/* fuentes mensajes */
.fgreen {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color:#00CC33;
    text-decoration: none;
}

.fwhite {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color:#FFF;
    text-decoration: none;
}

.fred {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #FF0000;
    text-decoration: none;
}

.freda {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #FF5500;
    text-decoration: none;
}



.forange {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #FF5500;
    text-decoration: none;
}


.fblack {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #000000;
    text-decoration: none;
}
.fblue{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #0000FF;
    text-decoration: none;
}

.fbluem{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #0000FF;
    text-decoration: none;
}
.ftit1{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: bold;
    color: #000000;
    text-decoration: none;
}
/*------------*/


.fuente2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    FONT-WEIGHT: normal;
    color: #000000;
    text-decoration: none;
}

.fuente22 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    FONT-WEIGHT: normal;
    color: #000000;
    text-decoration: none;
}
.fuentelk{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:1px;
    font-style: normal;
    FONT-WEIGHT: normal;
    color: #CCCCCC;
    text-decoration: none;
}
.fuente3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    FONT-WEIGHT: normal;
    text-decoration: none;
}
.fuente4{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    FONT-WEIGHT: normal;
    text-decoration: none;
}

.fuente5{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    font-style: normal;
    color: #ffffff;
    FONT-WEIGHT: bold;
    text-decoration: none;
}
.fuente6{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    FONT-WEIGHT: bold;
    text-decoration: none;
}
.fuente7{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    color: #004C8B;
    FONT-WEIGHT: bold;
   
}
.fuente8{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    color: #004C8B;
    FONT-WEIGHT: bold;
    text-decoration: none;
}
.fuente9{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    FONT-WEIGHT: bold;
    text-decoration: none;
}

.fuente10{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style: normal;
    color: #004C8B;
    FONT-WEIGHT: bold;
    text-decoration:underline;
}
.fuente11{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-style: normal;
    color: #004C8B;
    FONT-WEIGHT: bold;
    text-decoration:underline;
}
.fuentes{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    FONT-WEIGHT: bold;
}
/* fuentes   */
.font8 {
    font-size: 8px;
}
.font9 {
    font-size: 9px;
}
.font10 {
    font-size: 10px;
    
}
.font10b {
font-size: 10pt; 
color: #000099;
}

.font11 {
    font-size: 11px;
    font-weight: normal
}

.font12 {
    font-size: 12px;
    font-weight: normal;
}
.font12b {
    font-size: 12px;
    font-weight: bold;
}
.font12w {
    font-size: 12px;
    COLOR: #FFFFFF;
    font-weight: bold; 
}
.font14 {
    font-size: 14px;
    font-weight: normal
}
.font16 {
    font-size: 16px;
    font-weight: normal
}
.font20 {
    font-size: 20px;
    font-weight: normal
}
/* links   */
.rlink {
    COLOR: #000000;  
    TEXT-DECORATION: none
}



a.info {
    position:relative; 
    z-index:24; background-color:#fff;
    color:#000;
    text-decoration:none;
}
a.info:hover {
  z-index:25; background-color:#ffffff;
}
a.info span {
  display: none;
}
a.info:hover span { 
  display:block;
  position:absolute;
  top:2em;
  left:2em;
  /*width:300px; */
  border:1px solid #38EB35;
  background-color:#FFFCA2;
  color:#000000;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 5px;
}

a.infog {
    position:relative; 
    z-index:24; background-color:#ECEEEE;
    color:#000;
    text-decoration:none;
}
a.infog:hover {
  z-index:25; background-color:#ECECEC;
}
a.infog span {
  display: none;
}
a.infog:hover span {
  display:block;
  position:absolute;
  top:2em;
  left:2em;
  /*width:300px; */
  border:1px solid #38EB35;
  background-color:#FFFCA2;
  color:#000000;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 5px;
}


/*
a.infog {
    position:relative; 
    z-index:24; background-color:#ECECEC;
    color:#000;
    text-decoration:none;
}
a.infog:hover {
  z-index:26; background-color:#ECECEC;
}
a.infog span {
  display: none;
}
a.infog:hover span {
  display:block;
  position:absolute;
  top:2em;
  left:2em;

  border:1px solid #38EB35;
  background-color:#FFFCA2;
  color:#000000;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 5px;
}       */


<!--.botones {  font-family: Verdana, Arial, Helvetica, sans-serif;FONT-WEIGHT: bold; font-size: 11px; color: #004C8B; background-color: #CCCCCC; border-color: #004C8B ; border-top-width: 1pix; border-right-width: 1pix; border-bottom-width: 1pix; border-left-width: 1pix}
.botons {  font-family: Verdana, Arial, Helvetica, sans-serif;FONT-WEIGHT: bold; font-size: 11px; color: #008000; background-color: #EBEBEB;}
.imputbox {  font-size: 10pt; color: #000099; background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; border: 1pix #000000 solid; border-color: #000000 solid; font-weight: normal}
.inputboxt {  font-size: 8pt; color: #000099; background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; border: 1pix #000000 solid; border-color: #000000 solid; font-weight: normal}
.imputf {  font-size: 10px; color: #000000; background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; border: 0pix #000000 solid; border-color: #000000 solid; font-weight: bold}

-->
















/* style calendary */
.calendar {
  position: relative;
  display: none;
  border-top: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  font-size: 11px;
  color: #000;
  cursor: default;
  background: #c8d0d4;
  font-family: tahoma,verdana,sans-serif;
}

.calendar table {
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
  font-size: 11px;
  color: #000;
  cursor: default;
  background: #c8d0d4;
  font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;
  padding: 1px;
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
}

.calendar .nav {
  background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;
  padding: 1px;
  border: 1px solid #000;
  background: #788084;
  color: #fff;
  text-align: center;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #000;
  padding: 2px;
  text-align: center;
  background: #e8f0f4;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #f00;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  border-top: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  padding: 0px;
  background-color: #d8e0e4;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  padding: 2px 0px 0px 2px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
  background-color: #b8c0c4;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #aaa;
}
.calendar tbody .day.othermonth.oweekend {
  color: #faa;
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #000;
  background: #e8f4f0;
}

.calendar tbody .rowhilite td {
  background: #d8e4e0;
}

.calendar tbody .rowhilite td.wn {
  background: #c8d4d0;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  padding: 1px 3px 1px 1px;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  padding: 2px 2px 0px 2px;
  border: 1px solid;
  border-color: #000 #fff #fff #000;
}

.calendar tbody td.selected { /* Cell showing selected date */
  font-weight: bold;
  padding: 2px 2px 0px 2px;
  border: 1px solid;
  border-color: #000 #fff #fff #000;
  background: #d8e0e4;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #f00;
}

.calendar tbody td.today { /* Cell showing today date */
  font-weight: bold;
  color: #00f;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #e8f0f4;
  padding: 1px;
  border: 1px solid #000;
  background: #788084;
  color: #fff;
  text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
  padding: 1px;
  background: #d8e0e4;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  padding: 2px 0px 0px 2px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
  background: #d8e0e4;
  font-size: 90%;
  padding: 1px;
  z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .active {
  background: #c8d0d4;
  padding: 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

.calendar .combo .hilite {
  background: #048;
  color: #aef;
}

.calendar td.time {
  border-top: 1px solid #000;
  padding: 1px 0px;
  text-align: center;
  background-color: #e8f0f4;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: #fff;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #000;
  background-color: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}