body { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; background-color: White; margin: 0px; padding: 0px; height: auto !important; min-height: 100%;
    background-color: White;
    /* 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 { }


/* LINKS */
a { color: #ff7900; text-decoration: none; } a:focus { outline: none; } a:hover { color: #008166;} a img { border: none; }
.adminLink {color: Fuchsia; font-weight: bold;} .adminLink:hover { color: #008166;}
a.thLink {  color: #277827; font-weight: bold; } a.thLink:hover  { color: Maroon; }
a.lLink {  color: #0b5925; } a.lLink:hover  { color: White; }
a.dLink {  color: #0b5925; font-weight: bold; } a.dLink:hover  { color: #008166; } a.dLink small {color: Gray; font-weight: normal;}
a.bdLink {  color: #0b5925; font-weight: bold; font-size: 16px; } a.bdLink:hover  { color: Red; } a.bdLink small {font-weight: normal; font-size: 12px;} 
div.link { color: #0b5925; font-weight: bold; padding-bottom: 8px; cursor: pointer; } div.link:hover { color: #008166; }
.hdnLink {  color: #0b5925; cursor: pointer; } .hdnLink:hover { color: #008166; }
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 #f0f6e8; border-radius: 6px; margin: 145px auto 0px auto; background-color: #f0f6e8; 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%; background-color: White; /* border-bottom: solid 1px #008166;  box-shadow: 0 8px 8px -4px #bbb; */ }

.pgTopBar { width: 100%; height: 36px; overflow: hidden; color: #d0fff5; font-size: 14px; background-color: #007f64;  }
.pgTopBar::after {content: "";clear: both;display: block;}
.pgTopBar a { color: #d0fff5; }   .pgTopBar a:hover { color: White; }   .pgTopBar i { color: #47a38f; font-style: normal; }
.pgTopBarCntnr { width: 100%; max-width: 1800px; margin: 0px auto 0px auto; padding: 7px 12px 7px 12px; }
.pgTopBarLeft { float: left; text-align: left; }
.pgTopBarLeftPhn,.pgTopBarLeftEml,.pgTopBarLeftAdr { display: none; }
.pgTopBarCenter { display: none; float: left; text-align: center; }
.pgTopBarRight { min-width: 120px; float: right; text-align: right; }
.pgTopBar .pdgRight { padding-right: 2%; }
.pgTopBar .highlight { color: #dea877; }  .pgTopBar .highlight a { color: #dea877; }  .pgTopBar .highlight a:hover { color: White; }


.pgHeader { width: 100%; height: auto; color: White; }
.pgHeaderHeight { height: 104px; }
.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: 7px 7px 7px 0px; }
.pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand { vertical-align: middle; }
.pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand img { max-width: 384px; width: 384px; 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: 104px; }
/*.pgHeader .rightNav { text-align: right; font-weight: bold; font-size: 14px; padding: 5px 2px 0px 0px; color: #96c7bd; }
.pgHeader .rightNav a { color: #007f64; } .pgHeader .rightNav a:hover { color: #ff7900; }
.pgHeader .rightNav .contactInfo { color: #8778a9; font-size: 11px; margin-top: 5px; }
.pgHeader .rightNav .pageTopLinkMailto { color: #8778a9; } a.pageTopLinkMailto:hover {color: Red; } */
.mblMenuIcon { color: #ff7900; } /* See mobile_collapser in css3menu.css */
.mblLoggedInHeader { font-size: 12px; font-weight: bold; text-align: right;  margin: 5px 15px 0px 0px; color: #8778a9; 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: 1100px) {
.pgHeader .pgHeaderLeft { width: 30%; }
.pgHeader .pgHeaderRight { width: 70%; }
}

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

.pgBody { min-height: 400px; z-index: 0; margin: 0px; margin: 0px auto 0px auto; }

.pgFooter { color: Gray; font-size: 12px; border-radius: 0px 0px 4px 4px; }
/* End of GENERAL LAYOUT */

/* HOME PAGE general */
#pgDefaultAspx { width: 100%; max-width: 1300px; margin: 0px auto 0px auto; padding: 0px; background-color: White; }



.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: inline-block; }
.lne12,.lne13,.lne14,.lne15,.lne16,.lne17,.lne18,.lne19,.lne20 { display: none; }
.LNEBox { width: 100%; height: 100%; overflow: hidden; color: #595959; text-align: center; -moz-text-align-last: justify; /* Code for Firefox */ }
.LNEBox .Inner {  }
.LNEBox .Heading { height: 40px; font-size: 30px; color: #008066; vertical-align: text-bottom; overflow: hidden; }
.LNEBox .Content { width: 100%; 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 */ margin: 25px 0px 0px 0px; width: 32%; 
                     color: #666666; text-align: left; -moz-text-align-last: left; /* Code for Firefox */ 
                     text-align-last: left; background-color: White; vertical-align: top; } 
.LNEBox .Content a:hover { color: #ff7900; } 
.LNEBox .Content img { width: 100%; max-width: 100%; height: 168px; margin: 0%; border-radius: 4px; vertical-align: middle; display: block; } /* thumbnail image */
.LNEBox .Content p { height: 15px; display: table-row; }
.LNEBox .Content b { display: block; font-size: 20px; font-weight: normal; margin: 10px 10px 0px 10px; }  /* article title text */
.LNEBox .Content em { display: block; font-style: normal; font-size: 13px; margin: 10px 10px; } /* article intro text */
.LNEBox .Content i { display: block; font-size: 8px; margin:  10px 10px; } /* authors<br />date and page title  */
.LNEBox .Content span { display: block; color: Red; font-size: 8px; margin:  0px 10px; } /* stickiness expiry date */

.LNEBox .Footer { margin-top: 10px; text-align: center;  }
.LNEBox .Footer a { font-size: 16px; font-weight: bold; color: #ff7900; } .LNEBox .Footer a:hover { color: #008166; } 


.DiaryBox { max-height: 700px; min-width: 195px; width: 100%; overflow: hidden; }
.DiaryBox .Heading { height: 40px; font-size: 30px; text-align: center;  color: #008066; vertical-align: text-bottom; overflow: hidden;}
.DiaryBox .Inner { border: solid 1px #e3e3e3; margin-top: 26px;} /* 275 */
.DiaryBox .Content {  max-height: 500px; font-size: 14px; padding: 15px; background-color: white; overflow: hidden; }
.DiaryBox .Footer { margin: 10px 10px 0px 10px; height: 30px; text-align: left; }
.DiaryBox .Footer a { font-size: 18px; color: #ff7900; } .DiaryBox .Footer a:hover { color: #008166; } 
.DiaryBox a { font-size: 14px; }
.DiaryBox div { border-top-color: #555555; }
.DiaryBox .ixDvdr3 { border-top: dotted 1px #555555; margin: 8px 0px 8px 0px; }

.hmPgIntro { margin-top: 30px; text-align: left; overflow: hidden; border: 1px solid #e3e3e3; font-size: 14px; padding: 12px; }
.hmPgIntro img { width: 90px; border-radius: 6px; margin-bottom: 6px; }
.hmPgIntro .heading { font-size: 30px; }
.hmPgIntro .intro { font-size: 20px; }

.twitter_box{ max-height: 600px;  margin-top: 30px;  background-color: #fff; text-align: center; overflow: hidden; border: 1px solid #e3e3e3;}

.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 #008166;  }
.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 #008166; 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: #0b5925; 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; }

/* 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 #008166; }
.MapIxLink { display: block; border-bottom: 1px dotted #008166; 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; }
.comment { border-bottom: dotted 1px #ddd; padding-bottom: 8px; margin-bottom: 15px; }






/* 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: 1100px) {
    .mblMenuIcon { float: right; margin: 0px 15px 0px 0px; font-size: 40px; } /* See mobile_collapser in css3menu.css */  
}
@media only screen and (min-width: 400px) and (max-width: 499px) {
    .pgHeaderHeight { height: 85px; }
    .pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand img {width : 300px; }
}
@media only screen and (max-width: 399px) {
    .pgHeaderHeight { height: 75px; }
    .pgHeader .pgHeaderLeft .pgHeaderBrandTbl .pgHeaderBrand img {width : 240px; }
    .mblMenuIcon { margin: 0px 5px 0px 0px; } /* See mobile_collapser in css3menu.css */
    .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 #008166; 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; }