html {
    scrollbar-width: thin;
    background-color: rgba(250,250,246,1);
    font-family: "Segoe UI", Calibri, Verdana, sans-serif;
}

body, html {
    /*    overflow-y: auto; */
    height: 100%;
    width: 100%;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


/* when screen sise is 900px or less */
/*
@media only screen and (max-width:900px)  {
}
*/

/* mobile device */
@media only screen and (pointer: coarse)  {
    /*body, html { overflow-x: hidden; }  to avoid horizontal shifting*/

    body {
        font-size: 16px; /* ! 16px minimum !   for text inputs to avoid auto-scaling in iPhon Safari  */
        
        /* max-width: 42em; /* 16*42=672px */ 

        background-color: #fafaff;
        margin:0;
        padding:0;
        /*margin-right: auto; margin-left: auto;*/
    }
    #divAll { width: 100%; margin:auto;}
    #imgQrCode { display: none; }
}

/* desktop */
@media (pointer: fine), (pointer: none) 
{
    body {
        font-size: 16px;
        max-width: 80em; /* 16*80=1280px */
        overflow-x: hidden; /*to avoid horizontal shifting*/
        /*  width: 40em;            80em;*/
        position: relative;
        margin-right: auto; margin-left: auto;
        outline: 0px solid red;
    }        
} 
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


div { box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}

.redInfo { color:#d40; font-weight:bold;  border:1px solid #d40; background-color:transparent; padding:0 0.3em 0 0.3em; margin:0 0.2em 0 0.2em;}
.Info  {   color:#c20; font-weight:bold;  border:0px solid #d40; background-color:transparent; padding:0 0.3em 0 0.3em; margin:0 0.2em 0 0.2em; font-size:0.7em; }

.fixedOnTop { position: fixed; top: 0px; max-width:80em;}


img, table, div {display:block; }
img { margin: 0.3em;  border:0px solid blue;}

.div, td {border:0px solid blue; min-height:1.5rem;}

a { cursor: pointer; text-decoration:none; color:#06c; font-size:inherit; }
a:hover { text-decoration:underline; color: #036; background-color:#cde;}

.btn {border:1px solid #345; cursor:pointer; border-radius:2em; background-color: #e4eaf2;  padding:0 1em 0.1em 1em;}
.btn:hover {border-color:#234;  background-color: #f0f4fa; cursor:pointer;}
/*.btn {border:none; text-decoration:underline; cursor:pointer;}*/


iframe { max-width: 100%; border: none; }



input[type="checkbox"] { display: none; }    /* see h ttps://jsfiddle.net/JohnSReid/pr9Lx5th/3/ */
        input[type="checkbox"] + label:before { margin: 0 0 0 1em;  line-height: normal; position:relative; /*top:0.33em;*/
            /* background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
            border: 1px solid #000000; height: 1em; width:1em; display: block; overflow:hidden; cursor: pointer; }
        input[type="checkbox"] + label:before { content: '';
            /* background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
            border-color: #000000; color: #000000; font-size: 1em; line-height: 1em; text-align: center; }
        input[type="checkbox"]:disabled + label:before { border-color: #aaa; color: #aaa; cursor:default; 
            /* background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
            }
        input[type="checkbox"]:checked + label:before { content: '✓'; }









#imgLogo { position:absolute; max-height:70%; top:4%; left:1%; border-radius:50%; border:1px solid #fff; box-shadow:rgba(255,255,255,1) 0px 0px 50px;}

#imgQrCode {position:absolute; margin:0.5em; right:0; top:0;  width:5em; height:5em; border:3px solid #fff; border-radius:5px;}

#divAll {position:relative; outline:0px solid cyan; width:100%;} 

#divHeader { height: 10rem; width: 100%;
    background-repeat: no-repeat; background-position: center; background-size: cover; /* cover; auto; contain; */    
    background-image: linear-gradient(to right, rgba(250,250,246,1) 15%, rgba(240,244,246,0.6) 30%, rgba(240,244,246,0) 40%, rgba(240,244,246,0)), url(../img/3512oxfordave.png);
}
#divSiteName {width:70%; margin-left:5.7em; font-size:1.8em; color:#fff; 
              text-shadow: 0.1em 0.1em 0.2em #330, 0 0 1em blue, 0 0 0.2em blue, 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000 ;}


    



#spDebug {margin-left:5em; color:red; background-color:antiquewhite; text-shadow:none;}

#divWait {position:absolute; top:1em; right:50%;  height:1em; width:1em; }
#divWait > img { height:3em; width:3em; }


/* Menu ------------------------------------------ */
#divMenu {display:table; border:0px solid red; background-color:#cde; height:1.8em; width:100%; z-index:7; }                
#divMenu > ul { display:block;  background-color: transparent; list-style-type: none; margin: 0; padding: 0; z-index: 5; }
#divMenu > ul > li { display:inline-block; margin-left:0.0em; padding:0.1em 0.4em 0.1em 0.3em; cursor:pointer; height:1.8em; }         
li.liAdmin {display:none;}
span.spAdmin {color: #b00;}   
    
#divMenu ul li:hover {background-color:#def;}
#divMenu > ul > li > span {margin-left:0.1em; border:1px solid transparent;}
#divMenu ul li:hover > span { border-bottom-color:#469; }
#divMenu ul .liSelected {
    background-color: rgba(250,250,246,1);
    border-radius: 10px 10px 0px 0px;
}

                        /* submenu 1 level */   
#divMenu ul ul {position:absolute; display:none; list-style-type:none; 
                padding:0.2em; margin:0.4em 0 0 0;  z-index:8;  
                background-color:#cde; border:1px solid #68b; box-shadow: rgba(0,0,0,0.2) 2px 2px 8px;
}                        
#divMenu ul li:hover > ul { display:block; }
#divMenu    .ulSubMenu > li {cursor:pointer; margin:0.2em; padding:0.5em;} 
#divMenu    .ulSubMenu > li:not(:last-child) {border-bottom: 1px solid #abc;}
/* /Menu ----------------------------------------- */



#ifrUserLobby {position: absolute; text-align:center; top:9.7em; right:0px; width:180px; height:44px; 
                   z-index:999; background-color:transparent; border: 0px solid green;}

#divC { min-height: 1.5rem; position:absolute; top:12.8rem; width:100%; padding-left: 0.2rem;outline:0px solid green;}        
#divDeviceIndicator {position:absolute; top:0px; right:0px; width:4px; height:4px; border:1px solid #8af; background-color:#8af;}
#ifrPage {outline:0px solid blue; width:calc(100% - 0.4em); }

#divFooter {position:relative; left:0; background-color: #abc; width:100%; height:4em; margin:0; padding:0;} 




/*=====================================*/
/*=====================================*/
/*== Articles =========================*/

.div { display:block; }
#divCategories {  width:100%;  border:1px solid #ddd;       }
#divArtList {margin: 0.5rem 0 0 0; border:0px solid #eee; }

#divArtProto { display:block; width: 100%!important;                                         /* height: 3.3rem; */
            border-bottom: 0px solid #888; background-color: #fff;             /* ffe */
            box-shadow:1px 2px 4px 0px rgba(0,0,0,0.2); margin-bottom:8px; 
        /*    height:fit-content;  */
            height:auto;
}
#divArtProto:hover { background-color:#fff; }                                            /* #fbfbcc*/
.divArticlePlate {position:relative; display:block; min-height:4.5rem;                 
                  width: 100%; background-color:rgba(240,244,246,1);
                  border:0px solid transparent;  }
    .divArticlePlate:hover {
        cursor: pointer; outline: 1px solid red;
    }


.divImgUser {height:4rem; width:4rem; border:1px solid #ddd; border-radius:50%; float:left; 
             background-repeat: no-repeat; background-size: cover; }

.imgAuthor {height:100%; width:100%; margin:0!important; }

.authorName {margin:0 1rem 0.1rem 1rem; display:inline-block;  border:0px solid green; }
.articleDate {margin-right:0.5rem; font-size:0.7em;}
.divArticleBtns {position:absolute; right:0.1em; top:0.1em; width:7em; line-height:0.8em;}
.spArID {position:absolute; display: block; font-size:0.8em; top:0; right:0.5em; margin-top:0em; padding:0; text-align:right; color:#678; border:0px solid red;}    
.iconCorner { position:absolute; right:0.3em; bottom:-0.5em; z-index:3; 
}


.divArticleTitle { margin:0 0 0.3em 4.7rem; border:0px solid green; width:90%;}       
.divArticleTitle input[type="text"] {  width:100%; font-weight:bold; font-size:1rem; }        
.spArticleTitle {  width:100%; font-weight:600; font-size:1.1rem; color:#556;  }
.divArticleCategory {margin:-0.4em 0 0 5.1em; padding-left:2em; font-size:0.8em; color:#77f;}


.articleText {display:block; width:100%; margin-top:0rem; padding:0 0.1rem 0 0.2rem;  border:0px solid brown;}

/* .img-content {max-width:99%; display:block; border:2px solid red;}  */


/*=====================================*/
/*==  Categories ======================*/

#divCat { font-size: 1.2em;  width:calc(100% - 4em); height: 2em; display: inline-block; border:0px solid red;  }
#selCategory, #tbPlusText { margin-top: 0.2em; font-size: 1.1em; padding-left: 0em; width:calc(100% - 0.3em);  border-color: #bed7ef; border-width: 0.05em; display: inline-block; }
#tbPlusText { margin: 0; padding:0 2px 0 3px; border-width:thin;  }
    #tbPlusText:focus { border-color:transparent; }

#btnPlus { }  /*color: #de6c2d      font-weight: bold;*/
#btnEdit { }   /*position: relative;*/
#btnGetImage {width:0.80em; margin-top:0.05em; cursor:pointer; filter: grayscale(1) brightness(0.8) contrast(2.5);}
    #btnGetImage:disabled { cursor:default; filter: grayscale(1) brightness(1.3) contrast(1); }

#btnSaveSection { font-weight: bold;}
#btnRemove { font-weight: 400; }   /*font-weight: bold; position: relative;*/

.SectionButton { display:inline-block; font-size: 1.5em; width:0.9em; vertical-align: middle; margin: -3px 0 0 10px; padding-left: 3px; padding-right: 0; 
                 border: none; background-color: transparent; cursor: pointer;}
    .SectionButton:disabled { cursor:default; color:#aaa;}

/*== /Categories ======================*/

/*=====================================*/