/* ================================================================*/
/* =============  D2.CSS  - for Default.aspx only ========2023-09===*/
/* =================================================================*/

* { box-sizing: border-box; }
td {border-width:0;}


html, body { font-size: 20px; font-family: Arial, Helvetica, sans-serif; }
body {
    position: absolute; display: block; top: 0; left: 0; border: 0px solid green;
    padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}

/* ------------------------------------------------------------- */

@media only screen and (pointer: coarse) 
  {   
	/* mobile device */

    


    /*   html, body { width: 50vw; }  */
       /*body, body * {max-width:500px !important;}	*/
    /*#MainHead { flex-direction: column-reverse;}*/
    /* .divBoxContainer { transform: scale(1.5,1.5); }*/    
    /*.divBoxContainer { width:100%; height: 524px !important;*/            /* 270*1.94=524 */ /*}
    /*.divBox { font-size: 194%; height: 524px !important;*/   /* 270*1.94 = 524*/ /*}
    /*#divUserSpot {background-color:blanchedalmond;}  */
  }
 
/*
@media (pointer: fine), (pointer: none) 
  {
	/* desktop * /
  }

/*@media only screen and (max-width:980px) 	 
  {
    #MainHead { flex-direction: column-reverse; }
  }*/
/* ------------------------------------------------------------- */



.disabled {pointer-events:none!important;  cursor: default!important; filter: grayscale(100%) brightness(140%) contrast(50%); } 


#divSite { position:absolute; top:0; left:0; display:block; margin-left: auto;  margin-right: auto; border:0px solid #aaa;  width: 1000px; }
#divMain {position: relative;  margin-left: auto;  margin-right: auto; padding-bottom:20px; border:0px solid brown; width:100%; overflow-x:scroll;}

#MainHead { position: relative;  display:block; width:100%; border:0px solid red; }


#divTopBanner { position: relative;  right: 0px; top: 0px;  padding: 0; margin: 0;
                width: 100%; overflow: hidden;                border:0px solid red;                        height:100px;     /*set height by option max value*/
                background-color: transparent;
}
    #divTopBanner * { white-space: nowrap; }    

.divBanner { position:absolute!important; display:block!important; overflow: hidden; display:none;            
             left: 50%!important; top: 50%!important;   -ms-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);             
             border: 1px solid transparent;             
}
    .divBanner table tr td { vertical-align: middle; }

/*  Comtrib main part of header */
.divBox {position:relative; display:block; height:320px;   width: 100%;  border:0px solid green; overflow:visible; z-index:999;}

/* /Comtrib main part of header */



#spHello {display:table-cell; padding-left: 5px; font-size:30px; border:0px solid red; cursor:pointer;}

#divSiteLink {position:absolute; top:0px; width:290px;}

.LogoImage {position:absolute; top:0px; height:80px; left:0px; border-style:none}
.Logo { position: absolute; top:24px; height: 65px; left:90px; border-style: none; cursor: pointer;}

#divSiteName { position: absolute; top:0px; left: 0px; font-family: 'Arial'; font-size: 30px; cursor:default;}


#tblDateValues {  position:relative;  top: 20px;  left: 0;}

#divAttendanceInfo { position: relative;  top: 0px;  left: 200px;  border: 0px solid red; }
#divTopLine { position: absolute; top: 20px; left: 0px; width: 500px; height: 20px; border: 0px solid yellow; }


#ulMyCommunities {width:300px; padding:0; margin:1em; border:2px solid #567; background-color:#cde; 
                  list-style-type: none; z-index:9999; box-shadow:2px 2px 8px 0px RGBA(128,128,128,1.0);} 
#ulMyCommunities > li {padding-left:0.5em; border:0px solid red; background-color:#def; z-index:9999;}
#ulMyCommunities > li:hover {background-color:#eef8ff; cursor:pointer;}


/* Site menu*/
#divSiteMenu { position: absolute; top: 296px; left:0; width: 310px; padding:15px; margin-left:25px; z-index:999; border:2px solid #888;
               box-shadow:2px 2px 8px 0px RGBA(128,128,128,1.0);}
ul#SiteMenu { margin: 0; list-style: none; padding: 0; z-index: 1000; list-style-type: none;}
    ul#SiteMenu li {display:block; width:100%; float: left; clear:left; margin:0px 0px 0px 0px; border:1px solid transparent;}
        ul#SiteMenu li img { width: 44px; height: 35px; border-width: 1px; border-style: solid; border-color: transparent; float: left; margin: 2px; }
        ul#SiteMenu li p {font-size: 20px; float: left; margin: 10px; line-height: 20px;}
    ul#SiteMenu li:not(.disabled) * { cursor: pointer; }            
        ul#SiteMenu li:not(.disabled):hover {border-color: #888; cursor: pointer;}
    ul#SiteMenu li.disabled { cursor: default;}  
/* /Site menu */

#divMainMenu { position: absolute;  top: 0px;  width: 100%;  border: 0px solid green;  z-index: 999;}

/* MAIN MENU   ----------------------------------------------------------*/
.divMenu{display:inline-block; font-family:Verdana, Geneva, Tahoma, sans-serif;  padding-left:25px; padding-right:25px; 
         cursor:pointer; text-decoration:none; line-height:32px;  border: 1px solid transparent;
}
.divMenu:hover { border: 1px solid #888;     /* text-shadow: 0px 0px 6px #ffff00; */  }

ul#MainMenu { position: absolute; left: 140px; top: 0px; display: block; font-size: 0;}    
ul#MainMenu, ul#MainMenu ul { margin: 0; list-style: none; padding: 0; }   /*border-color: #79b7e7;*/
        
        /*ul#MainMenu ul { display: none; position: absolute; left: -1px; top: 98%; padding: 0px 0px 1px 0px; /* submenu box =*/
        ul#MainMenu ul { display: block; position: absolute; left: -1px; top: 98%; padding: 0px 0px 1px 0px; /* submenu box =*/
                           visibility: hidden; opacity: 0; transition: visibility 0.3s linear, opacity 0.3s linear; transition-delay: 0s; 
                         border:1px solid #79b7e7; box-shadow:2px 2px 8px 0px RGBA(128,128,128,1.0); }

    /*   ul#MainMenu li:last-of-type ul {right: -40px !important; left:unset!important;}        */

        ul#MainMenu li:hover > .ul_Ok { visibility: visible; 
                                        opacity: 1; transition: visibility 0.3s linear, opacity 0.3s linear; transition-delay: 0.3s; }
        
    ul#MainMenu li { position: relative; display: block; white-space: nowrap; float: left; font-size: 32px; }
    ul#MainMenu > li { margin-right: 2px; padding:0px 0px 10px 0px;  }
        ul#MainMenu > li a, ul#MainMenu > li .a { display:inline-block; font-family:Arial,Helvetica,sans-serif; font-size:30px; padding-left:30px; padding-right:30px; 
               border:1px solid transparent; line-height:30px; text-decoration:none; /*text-decoration:underline;*/ }
        ul#MainMenu > li:hover > a:not(.disabled), ul#MainMenu > li:hover > .a:not(.disabled) { border: 1px solid #888; cursor:pointer;}    
        ul#MainMenu a:active, ul#MainMenu a:focus { outline-style: none; }

        ul#MainMenu > li > ul > li {width:100%;}
        ul#MainMenu > li > ul > li > a {width:100%;}
/* End MAIN MENU --------------------------------------------------------*/



#ambient { position: relative; width: 100%; max-width:1000px; margin-left: auto; margin-right: auto;  border:0px solid green !important;}

.footer { text-align: center; position: absolute; bottom: 0px; width: 100% ;}

#divSingle { position: absolute; top: 0px; left: 0px; width: 100%; margin-left: auto; margin-right: auto; 
             background-color: transparent; z-index: 111;}

#FrameSingle { width:100%; max-width:1000px; height:100%; background-color:transparent!important; 
               overflow:scroll !important; border:0px solid blue}

#FrameL { width: 50%; height: 100%; border: 0px solid red;max-width:1000px;}
#FrameC { width: 50%; height: 100%; border: 0px solid green;max-width:1000px;}
#FrameMore { position: absolute; top: 0px; left: 0px; width: 100%; height: 300px;
    background-color: transparent; margin-left: auto; margin-right: auto; z-index: 123;}

#imgGoogleTranslate { margin-left: 20px;}
.ico16 { width: 16px; height: 16px; vertical-align: middle;}

.sel { /* color:red */
}

a[onclick=''] { font-style: italic !important; }

#FrameMore { width: 0px;}


/*  Pop Up Frame */
.divPopUpFrame { position: absolute; left: 0px; top: 0px; width: 50px; height: 30px; display: none; border-width: 3px; /*background-color:#789;*/ /* #003300; */
    border-style: solid; /* border:3px solid #789;*/
    cursor: move; z-index: 20001; box-shadow: 3px 3px 8px rgba(0,0,0,0.9);
}
.popUpFrame { display: block; z-index: 20002; background-color: transparent; margin-top: 18px; margin-left: -1px; border-width: 1px;
    border-style: solid; /*border:1px solid #789;*/
}

#divPopUpFrameClose { position: absolute; margin-top: 0px; text-align: right; z-index: 20003; padding-top: 2px;}
.spX { /*color:#eee; */ /*background-color:#dd1100;       */
    cursor: default; margin-right: 2px; margin-bottom: 2px; font-size: 12px; font-family: Arial; font-weight: bold; }
    .spX:hover { /* color:#ffffff; */ /*background-color:#ff2200; */
        border-width: 1px; border-style: solid; /*  border:1px solid #fff; */
    }
/* /Pop Up Frame */

#audio {height:26px; width:300px; position:absolute; top:0px; right:24px; z-index:9999}