body { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; margin: 0px; padding: 0px; height: auto !important; min-height: 100%;
    background-color: white; /*#eae7e4;*/
    /* disable text size adjust on the iPhone */ -webkit-text-size-adjust: none;  }

.VisioSoftLink { white-space: nowrap; }

/* GENERAL STYLES */
* {
    box-sizing: border-box;
} /* This makes sure that the padding and border are included in the total width and height of the elements */
img { max-width: 100%; height: auto;  } /* To display bigger images small use style width rather than attribute width */
.ixDvdr3 { height: 0px; border-top: dotted 1px #BF8F00; margin: 3px 0px 3px 0px; }
.underlined1 { border-bottom: 1px solid #777777; padding-bottom: 3px; margin-bottom: 2px; display: inline-block; width: 100%; }
.underlined2 { border-bottom: 1px dotted #777777; padding-bottom: 3px; margin-bottom: 2px; display: inline-block; width: 100%; }
ol.liHrzGap5 li, ul.liHrzGap5 li { margin-bottom: 5px; }
ol.liHrzGap10 li, ul.liHrzGap10 li { margin-bottom: 10px; }
div.photoFrame { border: 1px dotted Gray; text-align: center; padding: 8px; font-size: 12px; border-radius: 4px; }
div.photoFrame img { width: 100%; border-radius: 4px; }
.txtAlgnRtoC, .txtAlgnLtoC { text-align: center; }
.fontSizeSmaller { font-size: smaller; }
.fitToWidth {  }

#scrollToGoToTopBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; color: white; cursor: pointer; }
#scrollToGoToTopBtn:hover { }

.Heading { height: 40px; font-size: 30px; color: #000; vertical-align: text-bottom; overflow: hidden; }

/* LINKS */
a { color: #085dbb; text-decoration: none; } a:focus { outline: none; } a:hover { color: #df4f4f;} a img { border: none; }
.adminLink {color: Fuchsia; font-weight: bold;} .adminLink:hover { color: #df4f4f;}
a.thLink {  color: #085dbb; font-weight: bold; } a.thLink:hover  { color: #df4f4f; }
a.lLink {  color: #085dbb; } a.lLink:hover  { color: White; }
a.dLink {  color: #085dbb; font-weight: bold; } a.dLink:hover  { color: #df4f4f; } a.dLink small {color: Gray; font-weight: normal;}
a.bdLink {  color: #085dbb; font-weight: bold; font-size: 16px; } a.bdLink:hover  { color: Red; } a.bdLink small {font-weight: normal; font-size: 12px;} 
div.link { color: #085dbb; font-weight: bold; padding-bottom: 8px; cursor: pointer; } div.link:hover { color: #df4f4f; }
.hdnLink {  color: #085dbb; cursor: pointer; } .hdnLink:hover { color: #df4f4f; }
a.introLink { font-size: 16px; font-weight: bold; } a.introLink:hover { color: Black; } 
a.linkButton { padding: 6px; display: inline-block; border: 1px solid Gray; border-radius: 4px; text-align: center; margin: 5px;  }
a.linkButton:hover { background-color: #444444; color: White;  }


/* GENERAL LAYOUT */
.bdyBkgAll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;  }
.bdyBkgHeaderAll { color: White; padding: 0px; width: 100%; }
.bdyBkgTopBar { height: 24px; width: 100%; overflow: hidden; color: White; font-size: 12px; padding: 5px;  }
.bdyBkgHeader { width: 100%; overflow: hidden; color: White; padding: 0px;  }
.bdyBkgNav { height: 45px; }
.bdyBkgPgAll {}
.bdyBkgPgBody {}
.bdyBkgFooter {}

/* bdyAllOuterOverlay - A div totally covering div_All. Anything in it will display on top of the normal page. */
#bdyAllOuterOverlay { position: absolute; top: 0px; width: 100%; height: 1200px; margin: 0px auto 0px auto; background-color: black ; opacity: 0.5; filter: alpha(opacity=50); z-index: 11;  }
#bdyAllInnerOverlay { position: absolute; top: 0px; width: 100%; height: 1200px; text-align: center;  z-index: 12; }

/*
#div_pgeovrMsg_box { top: 0px; width: 600px; height: 400px; border: 1px solid #145c84; border-radius: 6px; margin: 170px auto 0px auto; background: White url("../Images/PageoverMsgFrame.jpg") no-repeat scroll center;  z-index: 13 }
#div_pgeovrMsg { width: 540px; height: 260px; margin: 100px auto 0px auto; padding: 10px; overflow: hidden; }
#div_pgeovrMsg_btns { width: 540px; height: 27px; margin: 8px auto 0px auto; overflow: hidden; text-align: center; }
*/
#div_pgeovrMsg_box { top: 0px; width: 600px; max-width: 100%; border: 1px solid #085dba; border-radius: 6px; margin: 145px auto 0px auto; background-color: #085dba; z-index: 13 }
#div_pgeovrMsg { margin: 0px 4% 0px 4%; padding: 10px; background-color: White; }
#div_pgeovrMsg_btns { width: 540px; max-width: 100%; margin: 0px auto 0px auto; padding: 8px; overflow: hidden; text-align: center; }


.pgAll { width: 100%; max-width: 100%; margin: 0px auto 0px auto; color: #555555;  }
.pgAllInner { width: 100%;  }

.pgHeaderAll { width: 100%; max-width: 1300px; margin: 0px auto 0px auto; background-color: transparent; /* border-bottom: solid 1px #df4f4f;  box-shadow: 0 8px 8px -4px #bbb; */ }

.pgTopBar { width: 100%; max-width: 1300px; height: 24px; overflow: hidden; margin: 0px auto 0px auto; padding: 5px 12px; color: black; text-align: right; }
.pgTopBar::after {content: "";clear: both;display: block;}
.pgTopBar a { color: black; }   .pgTopBar a:hover { color: red }   
.pgTopBar .highlight { color: #d6bba3; }  .pgTopBar .highlight a { color: #d6bba3; }  .pgTopBar .highlight a:hover { color: #ef7d7d; }


.pgHeader { width: 100%; height: auto; color: White; }
.pgHeaderHeight { height: 60px; }
.pgHeaderCntnr { width: 100%; max-width: 1800px; margin: 0px auto 0px auto; padding: 0px 12px 0px 12px;  }
.pgHeader .pgHeaderLeft { width: 0%; float: left; color: #91bf38; }
.pgHeader .pgHeaderLeft .pgHeaderBrandTbl { width: 100%; }
.pgHeader .pgHeaderLeft .pgHeaderBrandTbl td { padding: 0px 7px 0px 0px; }
.pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand { vertical-align: middle; }
.pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand img { max-width: 324px; width: 324px; min-width: 200px !important; vertical-align: middle;  }

.pgHeader .pgHeaderRight { width: 100%; float: right; text-align: right;  }
.pgHeader .pgHeaderRightCntnr { width: 100%; margin: 0px; padding: 0px  }
.pgHeader .pgHeaderRightCntnr .positionRelativeDiv { position: relative; height: 60px; /* a z-index here displays the UL background. gar */}
.pgHeader .pgHeaderRightCntnr .positionRelativeDiv .pgHeaderBrand { float: left; vertical-align: middle; margin: 0px 7px 0px 0px; }
.pgHeader .pgHeaderRightCntnr .positionRelativeDiv .pgHeaderBrand img { max-width: 324px; width: 324px; min-width: 200px !important; vertical-align: middle;  }

/*.pgHeader .rightNav { text-align: right; font-weight: bold; font-size: 14px; padding: 5px 2px 0px 0px; color: #96c7bd; }
.pgHeader .rightNav a { color: #1041c1; } .pgHeader .rightNav a:hover { color: #085dbb; }
.pgHeader .rightNav .contactInfo { color: #8778a9; font-size: 11px; margin-top: 5px; }
.pgHeader .rightNav .pageTopLinkMailto { color: #8778a9; } a.pageTopLinkMailto:hover {color: Red; } */
.mblLoggedInHeader { font-size: 12px; font-weight: bold; text-align: right;  margin: 5px 15px 0px 0px; color: red; display: none;  }
.mblLoggedInHeader a { color: White; } .mblLoggedInHeader a:hover { color: #f3781e; }

#pgTopNavContainer { position: absolute; width: 100%; height: 100%; text-align: right; height: 40px; bottom: 0px; right: 0px;  }

@media only screen and (min-width: 900px) {
.pgHeader .pgHeaderLeft { width: 30%; }
.pgHeader .pgHeaderRight { width: 70%; }
.pgHeader .pgHeaderRightCntnr .positionRelativeDiv .pgHeaderBrand { display: none; }
}

.pgBodyAll { border-top: none; border-radius: 0px 0px 4px 4px;  }

.pgBody { min-height: 400px; z-index: 0; margin: 0px; width: 100%; max-width: 1300px; margin: 0px auto 0px auto; }

.pgFooter { width: 100%; background-color: #e2dace; /*#e83555;*/ color: black; font-size: 14px; }
.pgFooter .container { width: 100%; max-width: 1300px; margin: 0px auto 0px auto; text-align: center; padding: 18px 0px; }
.pgFooter .container .dvdr { display: none; clear: both; height: 15px; }
.pgFooterItem { display: inline-block; white-space: nowrap; margin: 12px; border: solid 1px #c8c8c8; border-radius: 10px; padding: 10px;  height: 100px; vertical-align: middle; }
.pgFooterItem a { color: black; display: inline-block; border: 1px solid transparent; border-radius: 6px; padding: 5px; } 
.pgFooterItem a:hover { border-color: #9a826b; }
.pgFooterItem img { height: 60px; vertical-align: middle; }
.pgFooterItem .text { display: inline-block; text-align: left; margin-left: 8px; vertical-align: middle; }
.pgFooterItem .text img { height: 16px; vertical-align: middle; }

/* End of GENERAL LAYOUT */

/* HOME PAGE general */
.pgDefaultAspx { width: 100%; max-width: 1300px !important; margin: 0px auto 0px auto; padding: 0px; background-color: transparent; }



.AllLNEBox { text-align: center; }
.AllLNEBox a { display: inline-block !important; margin: 17px 5px 0px 5px; width: 195px; height: 325px; overflow: hidden; color: #666666; text-align: left; background-color: White; border: 1px solid #f1f1f1; } 
.AllLNEBox a:hover { color: Red; } 
.AllLNEBox img { width: 174px; margin: 10px; height: 135px; border-radius: 2px;  display: block; } /* thumbnail image */
.AllLNEBox p { height: 15px; display: table-row; }
.AllLNEBox b { display: inline-block; font-size: 14px; margin: 10px 10px 0px 10px;  } /* article title text */
.AllLNEBox em { display: inline-block; font-style: normal; font-size: 13px; margin: 0px 10px; } /* article intro text */
.AllLNEBox i { display: inline-block; font-size: 8px; margin:  5px 10px; } /* authors<br />date and page title  */
.AllLNEBox span { color: Red; font-size: 8px; } /* stickiness expiry date */
           
[class*="lne"] {  display: block; }
.lne9,.lne10,.lne11,.lne12,.lne13,.lne14,.lne15,.lne16,.lne17,.lne18,.lne19,.lne20 { display: none; }
.LNEBox { width: 100%; height: 100%; overflow: hidden; text-align: center; -moz-text-align-last: justify; /* Code for Firefox */ border: dotted 1px #555; border-radius: 6px; }
.LNEBox .Inner { }
.LNEBox .Heading { font-size: 30px; padding: 0px; text-align: center; border-bottom: dotted 1px #555; background-color: #e8e2d8; }
.LNEBox .Content { overflow: hidden; text-align: justify; text-align-last: justify; -moz-text-align-last: justify; /* Code for Firefox */ }

.LNEBox .Content a { /* display: inline-block; See [class*="lne"] above */ width: 100%;
                     color: #656565; text-align: left; -moz-text-align-last: left; /* Code for Firefox */ 
                     text-align-last: left; vertical-align: top; 
                     padding: 6px 10px 10px 10px; border-bottom: dotted 1px #555; } 
.LNEBox .Content a:hover { color: black; } 
.lne8 { border-bottom-color: #bdd0e4 !important; }
/*.LNEBox .Content img { width: 140px; height: 105px; max-width: 100%; margin: 5px 12px 5px 0px; border-radius: 4px; vertical-align: top; display: block; float: left; } /* thumbnail image */
.LNEBox .Content img { width: 24%; max-width: 200px; margin: 5px 1% 0px 0px; border-radius: 4px; vertical-align: top; display: inline-block; float: left; } /* thumbnail image */
.LNEBox .Content p { height: 15px; display: table-row; }
.LNEBox .Content .text { float: left; width: 74%; margin: 0px 0% 10px 1%; }
.LNEBox .Content b { display: block; font-size: 1.2em; margin: 0px; }  /* article title text */
.LNEBox .Content em { display: block; font-style: normal; margin-top: 10px; } /* article intro text */
.LNEBox .Content i { display: none; /* display: block; */ font-size: 0.75em; margin-top:  10px; } /* authors<br />date and page title  */
.LNEBox .Content ii { display: block; font-size: 0.75em; margin-top:  10px; } /* <iii>authors</iii><iii>date</iii></iii><iii>host page title</iii>  */
.LNEBox .Content ii iii { } 
.LNEBox .Content ii .auth { display: inline-block; margin-right:  15px; } .LNEBox .Content ii .pbDtSts { display: inline-block; margin-right:  15px; } 
.LNEBox .Content ii .hstPg { display: block; } .LNEBox .Content ii .hstPg:before { content: "@ " }

.LNEBox .Content span { display: none; /* display: block; */  color: Red; font-size: .5em; margin:  0px 10px; } /* stickiness expiry date */

.LNEBox .Footer { margin-bottom: 10px; text-align: center; padding-top: 8px; }
.LNEBox .Footer a { font-size: 16px; font-weight: bold; color: #085dbb; } .LNEBox .Footer a:hover { color: #085dba; } 

.LNEBox .Content .lneInnerLink { display: inline; color: blue; font-size: inherit; } 
.LNEBox .Content .lneInnerLink:hover { color: red; }

.DiaryBox { max-height: 700px; min-width: 195px; width: 100%; overflow: hidden; }
.DiaryBox .Heading { height: 40px; font-size: 30px; text-align: center;  color: #000; vertical-align: text-bottom; overflow: hidden;}
.DiaryBox .Inner { border: solid 1px #e3e3e3; border-radius: 4px; margin-top: 25px; min-height: 300px; }
.DiaryBox .Content { height: 270px; font-size: 14px; padding: 15px 15px 0px 15px; background-color: white; overflow: hidden; }
.DiaryBox .Footer { margin: 0px 15px 0px 15px; height: auto; text-align: left; }
.DiaryBox .Footer a { font-size: 18px; color: #085dbb; } .DiaryBox .Footer a:hover { color: #df4f4f; } 
.DiaryBox a { font-size: 14px; }
.DiaryBox div { border-top-color: #555555; }
.DiaryBox .ixDvdr3 { border-top: dotted 1px #555555; margin: 8px 0px 8px 0px; }

.hmPgSchoolAwardsArea { width: 100%; padding: 12px; margin-top: 40px; text-align: justify; -moz-text-align-last: justify; text-align-last: justify; }
.hmPgSchoolAwardsArea img { height: 90px; }


/* End of HOME PAGE */


/* Awards page styles - AwardForm.jpg - w:400 x h:550 */
@media screen 
{
.currentAward { text-align: center; display: inline-block; }
.formImgFrame { position: relative; overflow: hidden; }

.awardDate { position: absolute; top: 55px; text-align: center; color: #00a4ff; width: inherit; }
.awardeeName { position: absolute; top: 410px; font-size: 24px; color: #000000; font-family: Comic Sans MS; text-align: center; width: inherit; }
.awarderClass { position: absolute; top: 25px; font-size: 22px; color: #00a4ff; text-align: center; width: inherit; }
.awardReason { position: absolute; top: 450px; font-size: 18px; color: #000000; font-family: Comic Sans MS; text-align: center; width: 380px; padding: 0px 10px; }
.awarderName { position: absolute; top: 500px; font-size: 16px; text-align: center; width: inherit; display: none; }
}
@media print 
{
.currentAward { text-align: center; display: inline-block; width: 400px; }
.formImgFrame { position: relative; overflow: hidden; }

.awardDate { position: absolute; top: 55px; text-align: center; color: #00a4ff; width: inherit; }
.awardeeName { position: absolute; top: 410px; font-size: 48pt; color: #000000; font-family: Comic Sans MS; text-align: center; width: 800px; }
.awarderClass { position: absolute; top: 25px; font-size: 24pt; color: #00a4ff; text-align: center; width: inherit; }
.awardReason { position: absolute; top: 450px; font-size: 24pt; color: #000000; font-family: Comic Sans MS; text-align: center; width: 380px; padding: 0px 10px; }
.awarderName { position: absolute; top: 500px; font-size: 16pt; text-align: center; width: inherit; display: none; }
}



.pgFull { background-color: white; }
/* .pgContentDiv { margin: 15px auto 15px auto; } */

/* Page heading styles */
.pageHdgDiv { margin: 10px 12px 0px 12px; padding: 6px 0px 8px 0px !important;  border-bottom: solid 1px black;  }
.pageHdgDiv h1 { float:left; margin: 0px; font-size: 22px; } 
.pageHdgDiv div { float: right; padding-top: 3px; }
.pageHdgDiv::after { content: ""; clear: both; display: block; }

.classHdgDiv { margin: 0px 12px 0px 12px; padding: 6px 0px 8px 0px !important;  border-bottom: solid 1px #df4f4f; text-align: center; }
.classHdgDiv h1 { width: 100%; margin: 0px; font-size: 22px; text-align: center;} 
.classHdgDiv div { padding: 3px 0px 3px 0px; }
.classHdgDiv a { display: inline-block; margin: 2px 4px; padding: 3px 5px; font-size: 12px; font-weight: bold; }
.classHdgDiv .sClsPgLink { background-color: #085dbb; color: White; }
.classHdgDiv .sClsPgLink:hover { color: Yellow; }
.classHdgDiv .sClsPgLinkDvdr { display: none; width: 2px; height: 8px; background-color: Gray; margin: 0px 10px 0px 10px;  }

.MapIxMblMenuIcon { display: block; border-bottom: solid 2px #888888; margin: 0px 12px 0px 12px; padding-bottom: 2px; text-align: left; }
.MapIxMblMenuIcon big { font-weight: bold;}

.classRepsBox { display: inline-block; padding: 15px; border: 1px solid Silver; border-radius: 4px; font-weight: 18px;}
.classRepsBox img { width: 120px; }
.classRepsBox  div { display: inline-block; padding: 15px; margin: 10px; border: 1px solid Silver; }

.YERsViewerHdr { background-color: #007b5f; color: white; }

/* Form table */
.tblForm { border: 1px solid #b0b0b0; } 
.tblForm th { padding: 5px; background-color: #e6e6e6; }
.tblForm .thTop { border: 1px solid #b0b0b0; text-align: left; }
.tblForm .thBig { border: 1px solid #b0b0b0; font-size: large; }
.tblForm td { padding: 3px 10px 3px 10px; vertical-align: top; }
.tblForm .tdBBrd {border-bottom: 1px solid #b0b0b0; }
.tblForm table { padding: 5px; } 
.tblForm table th { font-weight: bold; text-align: left; text-decoration: underline; }
.divTblFormContainer { border: 1px solid #b0b0b0; }
.tdSpacious td { padding: 10px 10px 10px 10px !important; }
.tdTight td { padding: 3px 10px 3px 10px !important; }

/* Bordered table */
.tblBordered th { border: 1px solid #b0b0b0; }
.tblBordered td { border: 1px solid #b0b0b0; }
.tblBorderedAdmin td { border: 1px solid Blue; }

/* Inner table */
.tblInner { border: none; margin: 0px; padding: 0px;  }
.tblInner td { border: none; padding: 3px 10px 3px 0px;}

.divBordered { border: 1px solid #b0b0b0; padding: 8px; }

/* The following is used as a resorce container pane in VsCmEditor */
.PageOverWorkPane { position: fixed; top: 0px; right: 0px; margin-top: 10px; /* see div_PageTopSpace */ margin-right: 5px;
                          background-color: White; border: 3px solid Black; border-radius: 4px; padding: 5px; display: none; }
                          
/* IMPORTANT: For the following see also MAPArticleIndexWidth=230 and MAPArticleBodyWidth=680 in client setup */
.MAPIxContainer { display: none; border-bottom: solid 2px #df4f4f; }
.MapIxLink { display: block; border-bottom: 1px dotted #df4f4f; padding-bottom: 6px; margin-bottom: 6px; } /* <a ..> tag */
a.MapIxLink { color: #444444; } a.MapIxLink:hover { color: Red; }
.MapIxLink small { color: Silver; }
.MapIxLink small span { color: Red; font-size: x-small; }
/* .selectedMapIxLink { background: url('../Images/ssImg_Next.gif') no-repeat center right; padding-right: 18px; } /* <a ..> tag */
.selectedMapIxLink { color: #000000 !important; font-weight: bold; } .selectedMapIxLink:hover { color: Red !important; }
.MAPBodyContainer { } 

.MapArticleTtl { margin-top: 0px; font-size: 20px; }

.MyAcctMenuIx { display: none; }
.MyAcctMenuIx a { font-size: 14px; }
.MyAcctMenuIx a small { font-size: 10px; }


/* Resource pages styles */
.rpResource, .RpItemFrame { width: 100%; padding: 10px; background-color: #f5f1ec; vertical-align: top; border: 1px dotted grey; border-radius: 6px; } /* td */
.rpResource { margin-bottom: 24px; }
.rpResource .rpTitle { font-weight: bold; font-size: larger; }
.rpResource .rpSecTitle { font-weight: bold; }
.rpResource .authors {  }
.rpResource .rpDates { margin-top: 10px;  }
.rpResource .rpDates .rpDateRecorded { color: #959595 }
.rpResource .rpTitleNote { margin-top: 10px; }
.rpResource .RpLinks { margin-top: 10px;  }
.rpResource .rpDescriptionCls { margin-top: 10px;  }
.rpResource .rpDescriptionCls span { display: block;  }
.rpResource .rpDescriptionCls small { display: block; margin-top: 10px; }
.rpResource .rpDescriptionCls small:before { font-weight: bold; font-size: inherit; display: block; content: "** Foot Note **"; }
.rpResource .RpStateInfo { margin-top: 10px; color: red; text-align: right; }

.research { }
.research a { color: #085dbb; text-decoration: none; } a:focus { outline: none; }
.research a:hover { color: #df4f4f;} a img { border: none; }
.research img { vertical-align: middle; margin-top: 6px; border: solid 1px #dedede; border-radius: 4px; width: 100%; }
.research .title { font-weight: bold; font-size: 20px; font-family: Calibri, Arial; }
.research .extraTitle {  }
.research .authors { margin-top: 10px; }
.research .publicationDateOrStatus {  }
.research .descriptionName { margin: 15px 0px 5px 0px; font-weight: bold; }
.research .description { }
.research .citationText { margin-top: 15px; font-size: 14px; color: black;  }
.research .shortDescription { /* Nothing here because shortDescription displays on the home page */  }
.research .footNote { margin-top: 20px; font-style: italic; }
.research .orderDateTime { margin-top: 15px; font-size: smaller; color: #aaa; }
.research .dirLinksSection { padding-top: 5px;  }
.research .dirLink { color: #085dbb; margin-bottom: 10px; display: inline-block; }
.research .dataDiv { padding: 12px; border: dotted 1px grey; border-radius: 4px;  }

.research .dataFileGroup { width: 100%; margin-top: 12px; }
.research .dataFileGroup .dataFileGroupName { width: 35%; min-width: 200px; display: inline-block; padding: 5px;}
.research .dataFileGroup .dataFileLinks { width: 63%; min-width: 200px; display: inline-block;}
.research .dataFileGroup .dataFileLinks .dataFileLink { display: inline-block; border: solid 1px grey; padding: 5px; margin: 0px 6px 6px 0px; }

.researchBorderBottom { background-color: #939393; height: 1px; margin-top: 25px; clear: both; }


/* Media mobile phones. (Mobile 1st. The order is important) */
[class*="col-"] { width: 100%; float: none; padding: 12px; }

/* If more than 1320px wide show all */
@media only screen and (min-width: 1320px) {
    .pgTopBarLeftPhn,.pgTopBarLeftEml,.pgTopBarLeftAdr { display: inline; }
    .pgTopBarLeft { width: 65%; } .pgTopBarCenter { width: 2%; } .pgTopBarRight { width: 33%; }
}
@media screen and (min-width: 900px) and (max-width: 1319px) {
    .pgTopBarLeftPhn,.pgTopBarLeftEml { display: inline; }
    .pgTopBarLeft { width: 50%; } .pgTopBarRight { width: 48%; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
    .pgTopBarLeftPhn { display: inline; }
    .pgTopBarLeft { width: 25%; } .pgTopBarRight { width: 73%; }
}
@media screen and (min-width: 100px) and (max-width: 599px) {
    .pgTopBarLeft { width: 0%; } .pgTopBarCenter { width: 0%; }  .pgTopBarRight { width: 100%; text-align: center; font-size: 12px; }
}

/* Page top nav */
@media only screen and (max-width: 900px) {
    .pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand { display: none; }
    .pgHeader .pgHeaderRightCntnr .positionRelativeDiv { z-index: 30; } /* We need this here otherwise header doesn't show */
    #pgTopNavContainer { height: 0px; top: 15px; }
}
@media only screen and (max-width: 550px) and (min-width: 450px), only screen and (max-height: 550px) and (min-height: 450px)  {
    .pgHeaderHeight { height: 85px; }
    .pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand img {width: 290px; }
    .pgHeader .pgHeaderRightCntnr .positionRelativeDiv .pgHeaderBrand img {width: 290px; }
}
@media only screen and (max-width: 449px), only screen and (max-height: 449px) {
    .pgHeaderHeight { height: 75px; }
    .pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand img {width: 220px; }
    .pgHeader .pgHeaderRightCntnr .positionRelativeDiv .pgHeaderBrand img {width: 220px; }
    .pgTopBarRightContact { display: none; }
    .VisioSoftLink { white-space: normal; }
}

/* For desktops, laptops, tablets - page content display switching point */
@media only screen and (min-width: 768px) 
{
    .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}    
    [class*="col-"] { float: left; }

    .MAPIxContainer { display: block; border-right: 1px dotted #df4f4f; border-bottom: none; }
    .MyAcctMenuIx { display: block; }
    .MapIxMblMenuIcon { display: none; }
    
    .txtAlgnRtoC { text-align: right; }
    .txtAlgnLtoC { text-align: left; }
    .fontSizeSmaller { font-size: inherit; }
    .fitToWidth { font-size: inherit;  }

}/* End of For desktops, laptops, tablets */

.row::after { content: ""; clear: both; display: block; }



/* TABS */
ul.tab { list-style-type: none; margin: 0px; padding: 0px; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; border-radius: 4px 4px 0px 0px;}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a { display: inline-block; color: black; text-align: center; padding: 3px 16px; text-decoration: none; transition: 0.3s; font-size: 17px;}
/* Change background color of links on hover */
ul.tab li a:hover { background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active { background-color: #ccc;}
/* Style the tab content */
.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none;}
/* End of TABS */


/* AP Page styles */

.UsrGrpAreas { margin-top: 40px; border-top: 2px solid #b0b0b0; padding: 0px 0px; }
.UsrGrpHdg { position: relative; height: 28px; padding: 2px 0px 0px 10px; width: 100%; top: -12px; left: 0px; font-size: 14px; font-weight: bold; 
             background-color: #e6e6e6; border: 2px solid #b0b0b0; border-radius: 4px; }
             
             
#div_PageBottomMenu { background-color: #eeeeee; border-radius: 10px; font-size: 10px; }
#tbl_PageBottomMenu { width: auto; padding: 10px;  }
#tbl_PageBottomMenu th { text-align: left; border-bottom: 1px solid Gray; }
#tbl_PageBottomMenu td { text-align: left; vertical-align: top; }
#tbl_PageBottomMenu a { display: block; margin: 6px 15px 0px 0px; }
#tbl_PageBottomMenu .tdSpace { width: 15px; }




/* Cirles */

.tblCircle { border-radius: 50%; overflow: hidden; }
.tblCircle td { vertical-align: middle; text-align: center; }
.linkTblCircle { cursor: pointer; }
.pgLeftTblCircle { width: 120px; height: 120px; color: white; display: inline-table; padding: 10px; }
.pgRightTblCircle { width: 60px; height: 60px; color: white; display: inline-table; padding: 10px; }

.hmPgTblCirle { float: left; width: 10vw; max-width: 120px; min-width: 100px; height: 10vw; max-height: 120px; min-height: 100px; transition: box-shadow 0.25s; color: #000; box-shadow: none;
                font-weight: bold; font-family: Arial, sans-serif; font-size: 1.2vw; display: inline-table; margin-right: 15px; padding: 10px; }
.hmPgTblCirle:hover { box-shadow: #575757 0px 2px 16px 2px; }

.hmPgTblCirleImg { float: left; width: 10vw; max-width: 140px; min-width: 90px; transition: box-shadow 0.25s; color: #000; box-shadow: none;  
                   display: inline-table; margin: 12px 12px 12px 0px; }
.hmPgTblCirleImg img { width: 100%; }
.hmPgTblCirleImg:hover { box-shadow: #575757 0px 2px 16px 2px; }