/* ----------- formato portal ------------------------------------ */
#Portal {
   background-color: #ffffff;
   border: 1px solid #e6e6e6;
   margin: 0px auto;
   padding-bottom: 0px;
   padding-top: 5px;
   width: 798px
}

/* ----------- comun para body ----------------------------------- */
body {
   background: #ffffff;
   font-family: Arial, Verdana, Helvetica;
   font-size: 16px;
   margin: 0;
   padding: 0
}

/* ----------- informacion de persona activa en cabecera superior */
.infoLogin {
   color: green;
   cursor: default;
   font-size: 0.85em;
   padding-right: 5px;
   text-align: right
}


/* ----------- estructura basica del portal---------------------- */
.cabecera {
   color: #33addb;
   margin-top: -17px;
   padding: 2px 0 0 5px
}

.cabeceraLinea2 {
   color: #33addb;
   font-size: 0.85em;
   margin-bottom: 15px;
   padding: 5px
}

.subheader {
   background: #87ceeb;
   clear: both;
   color: #000000;
   font-size: 0.9em;
   height: 20px;
   margin: 0 0 5px 0;
   padding-top: 4px
}

.subheader_left {
   font-weight: bold;
   width: 615px
}

.subheader_left a {
   color: #000cff;
   padding-left: 5px;
   padding-right: 10px;
   text-decoration: none
}

.subheader_left a:hover {
   text-decoration: underline;
}

.subheader_right {
   float: right;
   text-align: right;
   width: 153px
}

.right {
   float: right;
   padding: 5px 0 0 2px;
   width: 148px
}

.left {
   background-color: #ffffff;
   color: #000;
   float: left;
   margin: 0 0 20px 0;
   padding: 5px 0 0 5px;
   width: 615px
}

.right_right {
   background: #87ceeb no-repeat bottom right;
   color: blue;
   float: right;
   font-size: 11px;
   margin-right: 5px;
   margin-top: 25px;
   overflow: auto;
   padding: 5px;
   white-space: nowrap;
   width: 158px
}

.footer {
   background-color: #ffffff;
   border-top: 1px solid #e6e6e6;
   clear: both;
   color: #999999;
   font-size: 11px;
   line-height: 11px;
   padding: 5px 0 5px 0;
   text-align: center
}

.footer a { 
   text-decoration: underline; 
}

/* ----------- presentacion de la aplicacion -------------------- */

.portalPresen {
   background-color: #ffffff;
   border: 1px solid #e6e6e6;
   font-size: 0.85em;
   margin: 0px auto;
   padding-bottom: 0px;
   padding-top: 5px;
   width: 798px
}

.textoPresen {
   color: #2f2f2f;
   padding-left: 10px;
   padding-right: 10px;
   text-align: justify
}

.nodo {
   color: blue;
   margin-bottom: 15px;
   margin-top: 10px
}

.expNodo {
   color: green;
   margin-bottom: -1px;
   margin-top: -1px
}

.linkPresen {
   background-color: #aaaa11;
   color: white;
   margin-right: -3px;
   padding-left: 3px;
   padding-right: 3px
}

.linkPresen:hover {
   color: #ff0000
}

.divx2Presen li {
   color: #000000
}

/* ----------- estructura de selector de colores ---------------- */

.menuColor {
   background: #ccff99;
   color: #242424;
   font-size: 11px;
   padding: 5px
}

.menuColorInterno {
   border-top: 1px #242424 solid;
   font-size: 11px;
   margin-bottom: 15px;
   margin-left: 3px;
   margin-right: 3px;
   margin-top: 2px
}

.calcolor {
   padding: 0px 0px 30px 5px
}

.calcolor ul {
   margin-left: -45px;
   padding-bottom: 7px
} 

.calcolor li {
   display: inline;
   font-size: 1px;
   line-height: 1px
} 

.calcolor li a {
   border: 1px solid #fff;
   display: block;
   float: left;
   height: 13px;
   margin: 0 4px 4px 0;
   text-decoration: none;
   width: 13px
} 

.calcolor li a:hover {
   border-color: #000000
}


/* ----------- definicion de colores ---------------------------- */
.color1 {
   background-color: #cc3333;
   border-bottom-color: #cc3333;
   border-left-color: #cc3333;
   border-right-color: #cc3333;
   border-top-color: #cc3333
}

.color2 {
   background-color: #dd4477;
   border-bottom-color: #dd4477;
   border-left-color: #dd4477;
   border-right-color: #dd4477;
   border-top-color: #dd4477
}

.color3 {
   background-color: #994499;
   border-bottom-color: #994499;
   border-left-color: #994499;
   border-right-color: #994499;
   border-top-color: #994499
}

.color4 {
   background-color: #6633cc;
   border-bottom-color: #6633cc;
   border-left-color: #6633cc;
   border-right-color: #6633cc;
   border-top-color: #6633cc
}

.color5 {
   background-color: #336699;
   border-bottom-color: #336699;
   border-left-color: #336699;
   border-right-color: #336699;
   border-top-color: #336699
}

.color6 {
   background-color: #3366cc;
   border-bottom-color: #3366cc;
   border-left-color: #3366cc;
   border-right-color: #3366cc;
   border-top-color: #3366cc
}

.color7 {
   background-color: #22aa99;
   border-bottom-color: #22aa99;
   border-left-color: #22aa99;
   border-right-color: #22aa99;
   border-top-color: #22aa99
}

.color8 {
   background-color: #329262;
   border-bottom-color: #329262;
   border-left-color: #329262;
   border-right-color: #329262;
   border-top-color: #329262
}

.color9 {
   background-color: #109618;
   border-bottom-color: #109618;
   border-left-color: #109618;
   border-right-color: #109618;
   border-top-color: #109618
}

.color10 {
   background-color: #66aa00;
   border-bottom-color: #66aa00;
   border-left-color: #66aa00;
   border-right-color: #66aa00;
   border-top-color: #66aa00
}

.color11 {
   background-color: #aaaa11;
   border-bottom-color: #aaaa11;
   border-left-color: #aaaa11;
   border-right-color: #aaaa11;
   border-top-color: #aaaa11
}

.color12 {
   background-color: #d6ae00;
   border-bottom-color: #d6ae00;
   border-left-color: #d6ae00;
   border-right-color: #d6ae00;
   border-top-color: #d6ae00
}

.color13 {
   background-color: #ee8800;
   border-bottom-color: #ee8800;
   border-left-color: #ee8800;
   border-right-color: #ee8800;
   border-top-color: #ee8800
}

.color14 {
   background-color: #dd5511;
   border-bottom-color: #dd5511;
   border-left-color: #dd5511;
   border-right-color: #dd5511;
   border-top-color: #dd5511
}

.color15 {
   background-color: #a87070;
   border-bottom-color: #a87070;
   border-left-color: #a87070;
   border-right-color: #a87070;
   border-top-color: #a87070
}

.color16 {
   background-color: #8c6d8c;
   border-bottom-color: #8c6d8c;
   border-left-color: #8c6d8c;
   border-right-color: #8c6d8c;
   border-top-color: #8c6d8c
}

.color17 {
   background-color: #627487;
   border-bottom-color: #627487;
   border-left-color: #627487;
   border-right-color: #627487;
   border-top-color: #627487
}

.color18 {
   background-color: #7083a8;
   border-bottom-color: #7083a8;
   border-left-color: #7083a8;
   border-right-color: #7083a8;
   border-top-color: #7083a8
}

.color19 {
   background-color: #5c8d87;
   border-bottom-color: #5c8d87;
   border-left-color: #5c8d87;
   border-right-color: #5c8d87;
   border-top-color: #5c8d87
}

.color20 {
   background-color: #898951;
   border-bottom-color: #898951;
   border-left-color: #898951;
   border-right-color: #898951;
   border-top-color: #898951
}

.color21 {
   background-color: #b08959;
   border-bottom-color: #b08959;
   border-left-color: #b08959;
   border-right-color: #b08959;
   border-top-color: #b08959
}


/* ----------- contenido de un dia ------------------------------ */
.contenidoDia {
   font-size: 12px;
   margin-left: 15px;
   overflow: hidden
}


/* ----------- administracion usuarios--------------------------- */

.usrAdmTools {
   background-color: #87ceeb;
   font-size: 0.80em;
   padding: 5px
}

.headToolsTitle {
   color: #0033ff;
   font-size: 1.20em;
   padding-left: 5px;
   padding-top: 15px;
   padding-bottom: 15px
}

.headTools {
   padding-bottom: 25px
}

.tool {
   float: left;
   margin-left: 5px;
   margin-right: 10px
}

.tool a:hover {
   text-decoration: underline
}

.bodyTools {
   border-top: 1px #000cff solid;
   clear: both;
   overflow: auto;
   padding: 4px;
   padding-top: 10px;
   width: 99%
}

.invitacionesColor {
   border: 1px #000cff solid;
   height: 15px;
   width: 15px
}

.admLabel {
   font-weight: bold
}

.admItem {
   color: #000cff
}

.admUsrCalRow {
   border-top: 1px #d6ae00 solid;
   color: #000cff;
   padding-bottom: 45px
}

.admUsrCalRow2 {
   color: #000cff;
   padding-bottom: 25px
}

.admGrupoTrabajoRow {
   color: #000cff;
   font-size: 0.97em
}

/* ----------- Estilos de sugerencia de busquedas ---------------- */
div.suggestions {
   background-color: white;
   border: 1px solid black;
   font-size: 0.85em;
   position: absolute
}

div.suggestions div {
   cursor: default;
   padding: 0px 3px;
}

div.suggestions div.current {
   background-color: #3366cc;
   color: white
}

/* ----------- Estilos de divs draggables ----------------------- */

#rootDragg {
   background-color: #f4f4f4;
   border: 1px solid #333;
   font-size: 0.85em;
   height: 200px;
   margin: 2px;
   padding: 2px;
   position: absolute;
   width: 400px
}

#handleDragg {
   background-color: navy;
   color: white;
   cursor: default;
   font-weight: bold;
   height: 20px
}

#draggContent {
   clear: both; 
   margin-top: 5px; 
   height: 72%; 
   width: 98%; 
   overflow: hidden
}

/* ----------- fin formato portal ------------------------------- */

/* ----------- Formato formularios */

.par {
   background-color: #e3f2ff
}

.impar {
   background-color: #ffffff
}

a { 
   text-decoration: none
}

a:visited {
   color: #000cff
}

a.link {
   font-weight: normal
}

a.link:hover { 
   text-decoration: underline
} 

a.linkAction {
   color: #109618;
   font-weight: normal;
}

a.linkAction:hover { 
   text-decoration: underline
} 

img.button:hover {
   cursor: pointer
}

img.inputButtonLeft {
   float: left;   
   height: 22px
}

img.inputButtonRight {
   float: left;   
   height: 22px
}

input { 
   font-size: 0.85em
}

input.button {
   background-color: #ffffff;
   background-image: url(/jxcal/img/boto.gif);
   border: #ffffff 0px none;
   color: #5475c6;
   float: left;
   font-size: 0.85em;
   font-weight: bold;
   height: 22px
}

input.button:hover {
   cursor: pointer;
}

input.disabled {
   background-color: #ffffff;
   border: gray 1px solid;
   padding-left: 5px
}

input:focus {
   background-color: #fffcb8
}

input.texto {
   border: #000cff 1px solid;
   color: #000cff;
   font-weight: normal;
   padding-left: 5px
}

input.fecha {
   border: #000cff 1px solid;
   color: #000cff;
   padding-left: 5px
}

textarea {
   border: #000cff 1px solid;
   color: #000cff;
   font-family: Arial, Verdana, Helvetica;
   font-size: 1.1em;
   padding-left: 5px
}


textarea:focus {
   background-color: #fffcb8
}

select:focus {
   background-color: #fffcb8
}

/* ---------------------------------------------------------------------------*/
/* ---- Parametros de fecha de presentacion de calendario ------------------- */
/* ---------------------------------------------------------------------------*/

#paramCalVistaMes                  {font-size: 14px;
                                    color: #000cff;}

#paramCalVistaMes span.flechasMes  {position: absolute;
                                    margin-left: 5px;}

#paramCalVistaMes span.textoMes    {position: absolute;
                                    margin-left: 55px;
                                    margin-top: 2px;}

#paramCalVistaMes span.flechasAnyo {position: absolute;
                                    margin-left: 135px; }

#paramCalVistaMes span.textoAnyo   {position: absolute;
                                    margin-left: 185px;
                                    margin-top: 2px; }

#paramCalVistaMes span.vistasCal   {position: absolute;
                                    margin-left: 562px; }

#paramCalVistaMes img.button       {border: 0;
                                    background: #ffffff;
                                    background-color: #ffffff;}

#paramCalVistaMes img.button:hover {cursor: pointer;}

/* ---------------------------------------------------------------------------*/
/* ---- Formato de presentacion tabla que contiene el calendario del mes -----*/
/* ---------------------------------------------------------------------------*/

#tablaCalVistaMes                  {font-size: 14px;
                                    margin-top: 25px;
                                    background-color: #87ceeb;
                                    width: 614px;}

#tablaCalVistaMes td               {height: 80px;
                                    width: 14%;}

#tablaCalVistaMes th               {color: #000cff;
                                    font-weight: normal;}

#tablaCalVistaMes td.diaMesNoActual{color: gray;
                                    background-color: #f0f0f0;}

#tablaCalVistaMes td.diaLaborable  {color: blue; 
                                    background-color: #ffffff;
                                    overflow: hidden;}

#tablaCalVistaMes td.diaFinSemana  {color: red;
                                    background-color: #ffffff;
                                    font-weight: bold;
                                    overflow: hidden;}

#tablaCalVistaMes a.diaLaborable   {color: blue; 
                                    background-color: #ffffff;
                                    overflow: hidden;}

#tablaCalVistaMes a.diaFinSemana   {color: red;
                                    background-color: #ffffff;
                                    font-weight: bold;
                                    overflow: hidden;}

#tablaCalVistaMes div.celda        {width: 100%;
                                    height: 100%;
                                    overflow: hidden;
                                    margin-top: 1px;}

#tablaCalVistaMes div.textoEvento  a.textoEvento {
                                    font-size: 0.85em;
                                    color: black;
                                    font-weight: normal;
                                    width: 100%;
                                    height: 20%;
                                    overflow: hidden;}

#tablaCalVistaMes div.masEventos   {margin-top: 6px;
                                    font-size: 0.85em;
                                    font-weight: normal;
                                    width: 100%;
                                    height: 20%;}

#tablaCalVistaMes div.masEventos a:hover {text-decoration: underline;}

#tablaCalVistaMes div.sinEventos   {font-weight: normal;
                                    width: 150px;
                                    padding-left: 150px;}

#tablaCalVistaMes div.todosEventos {display: none;}

#tablaCalVistaMes div.textoEvento:hover {cursor: pointer;}


.cabeceraMes   {float: left; 
                text-align: center; 
                width: 86px;}

.celda         {border: 1px #87ceeb solid;
                background-color: white;
                width: 85px; 
                height: 80px;
                float: left;}

.diaMesNoActual{color: gray;
                padding: 2px;
                background-color: #f0f0f0;
                width: 95%;
                height: 95%;}

.diaLaborable  {color: blue; 
                padding: 2px;
                background-color: #ffffff;
                font-weight: bold;
                width: 95%;
                height: 95%;}

.diaFinSemana  {color: red;
                padding: 2px;
                background-color: #ffffff;
                font-weight: bold;
                width: 95%;
                height: 95%;}

.contenido     {background-color: #ffffff;
                padding: 1px;
                white-space: nowrap;
                width: 97%;
                height: 97%;
                overflow: hidden;}

 a.diaLaborable   {color: blue; 
                                    background-color: #ffffff;
                                    overflow: hidden;}

 a.diaFinSemana   {color: red;
                                    background-color: #ffffff;
                                    font-weight: bold;
                                    overflow: hidden;}



.textoEvento  a.textoEvento {
                                    font-size: 0.85em;
                                    color: black;
                                    font-weight: normal;
                                    width: 99%;
                                    height: 20%;
                                    overflow: hidden;}
.masEventos   {margin-top: 6px;
                                    font-size: 0.85em;
                                    font-weight: normal;
                                    width: 99%;
                                    height: 20%;}

.masEventos a:hover {text-decoration: underline;}

.sinEventos   {font-weight: normal; 
}

.todosEventos {display: none;}

.textoEvento:hover {cursor: pointer;}