:root{
--bg:#13224b; /*dark blue*/
--txtdull:#9d9b93; 
--med2:#0e47a1; /*medium blue*/
--bright2:#0199e4; /*aqua*/
--med1:#e7910a; /*orange*/
--bright1:#ffbc26; /*yellow*/
--bg2:#d5e7f2; /*pale blue*/
--bg1:#efebdf; /*pale yellow*/
}
html{
height: 100%;width: 100%;padding: 0;margin: 0;
}
#page-bg{z-index: -999;min-height: 100%;min-width: 1024px;width: 100%;height: 100%;position: fixed;top: 0; left: 0;opacity:0.6;filter:alpha(opacity=60);}
#page-wrapper,.page-wrap {position: relative;/*width:1100px*/;margin: 0px auto;color: #333; }
body,td{font-family: 'Roboto', sans-serif;}
#page-head{
display:flex;
height:120px;
z-index: 8000;
position: relative;
background: #fff;
}
#page-logo{
max-width:150px;
padding:15px;
}
#page-logo a{
height:100%;
width:100%;
}
#page-logo img{
height:100%;width:auto;
}
a{
display:inline-block;
color:#081C34; text-decoration: none; font-weight: bold
}
a:hover {  text-decoration: none}
.chkbtn {  filter: Invert}
.adminedit {
display:inline-block;
font-size: 10px;
font-weight: bold;
color: #990000;
background-color: #FFFF66;
margin: 2px;
padding: 2px 10px;;
border-radius:5px;
}
#adminMenu{
display:flex;
justify-content:flex-end;
background: rgb(255,255,255,0.7);
color: #000;
border: 1px solid #FFF;
border-radius: 5px;
padding: 10px;
margin-bottom:20px;
}
#adminMenu li{
padding:5px;
}
#adminMenu a{
display: block;
padding: 5px 10px;
background: #000033;
border-radius: 4px;
}
#adminMenu a:hover{
filter:invert();
}
#page-menu-wrap{
position: sticky;
top: 0;
z-index: 1000;
}
#page-menu{
border-top:4px solid white;
}
#page-menu>ul{
display:flex;
width:100%;
background:var(--bg);
justify-content:space-around;
}
#page-menu>ul>li{
vertical-align:top;
position:relative;
text-align:center;
transition:background 400ms;
z-index:1000;
}
#page-menu a{
color:#FFF;
font-weight:normal;
padding:15px 10px;
}
#page-menu>ul>li.active,#page-menu>ul>li:hover{
background:#fff;	
}
#page-menu>ul>li:hover>a{
color:#000;
}
#page-menu>ul>li>ul{
position:absolute;
display:none;
opacity:0;
top:45px;left:0px;
z-index:1001;
min-width:225px;
transition:all 200ms ease;
border-radius:5px;
overflow:hidden;
box-shadow:2px 2px 7px rgb(0,0,0,0.1);
}
#page-menu>ul>li>ul.anim{
display:block;
animation:flyup 200ms forwards;
}
@keyframes flyup{
0%{opacity:0;top:90px;}
100%{opacity:1;top:45px;}
}
#page-menu>ul>li>ul>li{
position:relative;
display:block;
margin:0px;padding:0px;
text-align:left;
background:#fff;
}
#page-menu>ul>li>ul>li>a{
display:block;
padding:7px 10px;
border-top:1px solid #fefefe;
border-bottom:1px dashed #efefef;
border-left:3px solid #fff;
margin:0px;
color:#000;
font-weight:normal;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
#page-menu>ul>li>ul>li>a:hover{
filter: contrast(120%);
}
#page-menu.college>ul>li>ul>li>a:hover{
border-color:var(--bright1);
}
#page-menu.hospital>ul>li>ul>li>a:hover{
border-color:var(--bright2);
}
#page-menu #subsidiary{
padding:10px !important;

}
#page-menu #subsidiary a{
display:inline-block;
padding:5px 10px;
border-radius:5px;
font-size:80%;
}
#page-menu>ul>li:hover#subsidiary a{
color:#fff;
}
h1{ 
font-family: 'Noto Serif', serif;
color:#000;
font-size:150%;
margin:5px 0px;padding:5px 0px;
border-bottom:1px dotted #AAA;
display:block;
word-wrap: break-word;
}
h1 .category{
font-size:55%;
padding:2px 5px;
margin-right:10px;
border-right:1px dotted #AAA;
color:#AAA;
display:inline-block;
}
h1 .pagetitle{
display:inline-block;
}
h2{ 
font-family: 'Noto Serif', serif;
color:#000;
font-size:135%;
margin:5px 0px;padding:5px 0px;
display:block;
word-wrap: break-word;
}
.title1 
{
font-size: 14px;
color:#FFFFFF;
background-color:#050F3F;
padding:10px;
}
.box1 
{
border: 2px solid #CFE3E9;
background-image: url(imgs/bg1.jpg);
padding:5px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   
}
.box2 {
padding: 5px;
border: 2px solid #F2E6D2;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   
}
.tablerow1,.listStyle1 li{
border-bottom: 1px dotted #999999;
}
.listStyle1 li{
display:table;
}
.listStyle1 li>div{
display:table-cell;
vertical-align:middle;
padding:5px;
}
.listStyle1 .category{
font-size:75%;
padding:2px 5px;
margin-right:10px;
color:#AAA;
}
.formmsg {
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;
padding: 2px;
}
.snippet1 {
background-color: #D5E5F3;
padding: 5px;
}
.last-updated-on{
display:block;
text-align:right;
padding-top:30px;
color:#666;
}
.navig1 {
color: #999999;
margin: 5px;
line-height:18px;
}
.navig1 a {
font-size: 13px;
font-weight: bold;
color: #000000;

margin: 2px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
border: 1px solid #C2B7AB;
}
.navig1 a:hover {
color:  #4F4539;
background-color: #E0DBD6;
border: 1px solid #999999;
}
.navig1 .active {
color: #FFFFFF;
background-color: #706252;
font-weight: bold;
font-size: 13px;
margin: 2px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
border: 1px solid #C2B7AB;
}
.photothumb
{
width:170px;
height:120px;
background-image: url("imgs/albumfolder.gif");
background-repeat: no-repeat;
text-align:center;
}
.bullet1,.b1 {
background-image: url(imgs/b1.gif);
padding-left: 12px;
background-repeat: no-repeat;
background-position: 0px 8px;
}
.line{ background-image: url(imgs/line.gif);background-repeat: repeat-x;}
.more,.more a,a.more{
font-weight: normal;
text-decoration: underline;
margin:1px 5px;
}
.more a:hover{
text-decoration: none;
color: #3D3E6F;
}
.errormsg,.formmsg
{
color: #CC0000;
background-color: #FFFFCC;
padding: 5px;
border: 1px solid #CC0000;
}
form{margin:0px;padding:0px;clear:both}
label{
float:left;
}
.row{
clear:both;
}
.col{
display:inline-block;
vertical-align:middle;
}
#page-footer{
display:block;
z-index: 8000;
position: relative;
padding:15vh 5vw 5vh;
background:url(imgs/footer-bg.jpg) no-repeat;
background-size:cover;
}
#page-updated{
margin-top:20px;
}
#footer-cols{
display:flex;
justify-content:space-between;
position:relative;
}
#footer-cols li{
padding:5px;
position:relative;
}
.footer-menu{
color:#fff;
}
.footer-menu .title{
font-size:130%;
padding-bottom:15px;
}
#footer-logo img{
width:100%;height:15vh;
object-fit:contain;
filter:invert();
}
#page-footer li a{
font-weight:normal;
color:#fff;
}
#credits{
margin-top:5vh;
border-top:1px solid #ECF0F4;
padding-top:20px;
}
.scrollbar ::-webkit-scrollbar {
  width: 15px;height:15px;
}
.scrollbar ::-webkit-scrollbar-track {
  background: rgb(200,200,200,0.3);
  border-radius:4px;
}
.scrollbar ::-webkit-scrollbar-thumb {
  background: rgb(200,200,200,0.6);
  border-radius:4px;
}
.scrollbar ::-webkit-scrollbar-thumb:hover {
  background: rgb(200,200,200,0.8);
}


/* tabs */
.tabs{
position:relative;
z-index:100;
border-left:1px solid #AAA;
}
.tabs li{
position:relative;
padding:10px;
border:1px solid #AAA;
border-left:none;
float:left;
top:1px;
background:#EFEFEF;
cursor:pointer;
}
.tabs li.active{
position:relative;
border-bottom:1px solid #FFF;
border-top:2px solid #CC0000;
top:0px;
background:#FFF;
}
.tabContent{
z-index:90;
position:relative;
top:-1px;
border:1px solid #AAA;
padding:7px;
}
.tabContent>li{
display:none;
}
#cover-photo{
position:relative;
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
background-size: cover;
margin:calc(-20px) calc(-20px) 0 calc(-20px);
width:calc(100% + 40px);
}
#cover-photo>img{
width:100%;
display:block;
opacity:0;
}

/*form  components - BEGIN*/
.msgAck,.msgSuccess {
font-size: 12px;
font-weight: bold;
color:#003300;
font-size:110%;
margin: 2px;padding: 7px;
background:#CFDEC5;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgHide{
float:right;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
background:#FFFFFF;
padding:1px 3px;
font-size:80%;
margin:0px 5px;
}
.msgErr,.msgFail {
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;padding: 7px;
background:#F0E4BF;
border:1px dotted #EDD2C0;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgPage,.msgForm{
font-size: 12px;
font-weight: bold;
color: #CC0000;
margin: 2px;padding: 2px;
border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;
}
.msgAck li,.msgSuccess li,.msgErr li,.msgFail li{
list-style-type:circle;
padding:3px 0px;
}
::placeholder {font-family:Arial !important;color:#666 !important;font-weight:normal !important;}
input[type=submit],input[type=button]{
padding:5px 10px;
}
input[type=radio]{
position:relative;
top:2px;
margin-right:3px;
}
input[type=text],input[type=password],input[type=number],
select,textarea{
display:inline-block;
font-size:16px;
padding:10px;
border:1px solid #8E9DA8;
border-radius:5px;
width:100%;
background:transparent;
}
input:focus,texarea:focus,select:focus{
outline: none;
border-color:rgb(133,100,33) !important;
}
input[type=text]:hover,textarea:hover{
background:rgb(255,255,255,0.4);}
input::placeholder,select.placeholder{
color:rgb(114,103,65);
}
button,.btnMain,
input[type=submit],input[type=button]{
display: inline-block;
padding:10px 20px !important;
outline: none;
border: none;
border-radius: 20px;
text-transform: uppercase;
color: #000;
cursor: pointer;
transition: all .2s ease-in-out;
background-size: 500% 200%;
background-position:left top;
background-color: var(--txtdull);
}
.btnLarge{
padding:20px 30px !important;border-radius: 30px;
}
.btnOutline{
display: inline-block;
padding:10px 20px !important;
border-radius: 20px;
border:1px solid #777;
background:#fff;
font-weight:normal;
transition:all 200ms;
}
.btnOutline:hover{
background:#777;
color:#fff;
}
.btnMain:focus,.btnMain:hover,
input[type=submit]:hover,input[type=button]:hover{
background-position:bottom right;
color: #FFF;
}
.btnMain:active {
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
inset 0 -2px 5px 1px #b17d10,
inset 0 -1px 1px 3px rgba(250,227,133,1);
}
select option.placeholder{
display:none;
}
select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;	
min-width: 80px;
padding-right: 25px;
}
.dropdown{
display: inline-block;
position: relative;
}
.dropdown:before{
font-family: "Font Awesome 5 Free";
font-weight: 900; 
content: "\f150";
color: #AAA;
padding: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
text-align: center;
right: 5px;
pointer-events: none;
box-sizing: border-box;
}
input[readonly],input[disabled],select[readonly],
button[readonly],button[disabled],
select[disabled],textarea[disabled],
fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea,fieldset[disabled] .prefix{
opacity:0.7;
background:#EFEFEF;
text-shadow:none;
color:#555;
}
.component{
width:100%;
}
fieldset {
border:1px solid #EEE;
padding:7px;
margin:7px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset legend{
font-size:14px;
font-weight:bold;
}
fieldset>ul>li{
padding:10px;
border-bottom:2px solid var(--primary);
}
fieldset>ul>li>label{
position:relative;
display:flex;
flex-wrap:wrap;
margin:3px 0px;
padding:3px 0px;
clear:both;
line-height:24px;
border-top:1px dotted #EEE;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset>ul>li>label>span,fieldset>ul>li>span{
min-width:200px;
flex:0 0 20%;
padding-left:20px;
padding-bottom:7px;
vertical-align:top;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset>ul>li>label>div,fieldset>ul>li>div{
flex:1 1 auto;
vertical-align:top;
padding-bottom:7px;
padding-right:5px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
fieldset .prefix{
display:inline-block;
border:1px solid #aaa;
border-radius:4px;
pointer-events: none;
opacity: 0.7; 
}
fieldset .prefix:before{
position:relative;
content: attr(prefix);
padding:0 0 0px 10px;
top:-1px;
}
fieldset .prefix input{
border:0;outline:none;
}
fieldset .clean{
background:none;border:none;
}
fieldset .custom{
padding:0 10px;
}
fieldset error{
position:relative;
display:block;
font-size:80%;
padding:0 10px;
color:red;
}
.mandatory:after{
position:relative;
content:'*';
color:#FF0000;
font-size:130%;
top:2px;left:2px;
}
/*form components - END*/

/*responsive relateds - BEGIN*/
.cols,.cols li{
display:flex;
padding:5px;
}
.responsive{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
.responsive>*{
padding:10px;
}
.tblresponsive tr td,.tblresponsive tr th{
padding:revert-layer;
border-bottom:1px solid #CCC;
}
.tblresponsive thead th{
border-bottom:2px solid #CCC;
background:#EEE;
font-weight:bold;
}
.tblresponsive thead th:first-child{
border-top-left-radius:10px;
}
.tblresponsive thead th:last-child{
border-top-right-radius:10px;
}
.tleft{text-align:left}
.tcenter{text-align:center}
.tright{text-align:right}
.cellmiddle{display:inline-block;vertical-align:middle;padding:5px;}
.c25p{width:25%;}.c33p{width:33%;}.c50p{width:50%;}.c75p{width:75%;}
.m5{padding:5px;}.m10{padding:10px;}.m15{padding:15px;}.m20{padding:20px;}
.m5p{padding:5%;}.m10p{padding:10%;}.m15p{padding:15%;}.m20p{padding:20%;}
.clear{clear:both;}
/*responsive relateds - END*/

/*effects-BEGIN*/
.peep-up{
transition:all 1s ease-in-out;
}
.peep-up:hover{
transform:translateY(-10px) scale(101%,101%);
}
/*effects-END*/

.social-icons {display:flex;flex-direction:column;}
.social-icons ul{display:flex;}
.social-icons li{display:inline-block;vertical-align:middle;text-align:center;}
.social-icons a{display:block;transition:background-color 0.3s;padding:20px;}
.hmiddle{left:50%;transform:translate(-50%,0);}

/*specific to page*/
.college-bgmed{
background: var(--med1) !important;
}
.hospital-bgmed{
background: var(--med2) !important;
}
.college-bgbright{
background: var(--bright1) !important;
}
.hospital-bgbright{
background: var(--bright2) !important;
}
.college-bgpale{
background: var(--bg1) !important;
}
.hospital-bgpale{
background: var(--bg2) !important;
}
.college-bdbright{
border-color: var(--bright1) !important;
}
.hospital-bdbright{
border-color: var(--bright2) !important;
}
.college-fcmed{
color: var(--med1) !important;
}
.hospital-fcmed{
color: var(--med2) !important;
}
.college-fcbright{
color: var(--bright1) !important;
}
.hospital-fcbright{
color: var(--bright2) !important;
}
#page-body{
position:relative;
z-index:900;
background:#FFF;
padding:20px;
}
#header-top{
position:relative;
padding:10px;
text-align:right;
font-size:80%;
}
#header-top svg{
position:absolute;
left: -1px;bottom: -1px;
height:100%;width:auto;
}
#site-title{
flex:1 1 auto;
display:flex;
flex-direction:column;
}
#site-name a{
font-size:135%;
font-weight:normal;
color:var(--bg);
}
#site-title-a{
display:flex;
justify-content:space-between;
align-items:center;
flex:1 1 auto;
}
#site-title #address{
display:block;
font-size:79%;
color:var(--txtdull);
}
#quick-contacts{
padding:10px 30px;
display:flex;
}
#quick-contacts li{
padding:0 20px;
}
#quick-contacts>li>a>*{
padding:3px;
}
#quick-contacts a{
display:flex;
color:var(--txtdull);
font-weight:normal;
align-items:center;
}
#quick-contacts img{
height:30px;width:auto;
}
#quick-contacts b{
display:block;
color:#000;
}
#dept-main-menu{
position:static !important;
}
#dept-main-menu #dept-menu{
position:absolute;
left:0;
width:100%;
flex-wrap: wrap;
text-align:left;
align-items: flex-start;
padding:10px;
background:#FFF;
}
#dept-main-menu #dept-menu.anim{
display:flex;
}
#dept-main-menu #dept-menu li{
flex-grow:0;
flex-basis: 250px;
}
#dept-main-menu #dept-menu .icon{
background-size:contain;
background-repeat:no-repeat;
flex:0 0 20px;
margin-right:10px;
opacity:0.3;
}
#dept-main-menu #dept-menu a{
display:flex;
justify-content:flex-start;
}
#dept-main-menu #dept-menu .dept{
flex:1 1 auto;
}
#dept-main-menu #dept-menu a:hover{
background-color:#FFF;
color:#000;
}
#content-more{
border-top:2px dotted #AAA;
margin-top:20px;
padding-top:20px;
}
#content-more ul li{
background-position: 0px 22px;
}
.content-horiz-titles{
position:relative;
text-align:center;
}
.content-horiz-titles li{
display:inline-block;
padding:0 !important;margin:15px;
min-width:200px;
vertical-align:top;
background:none !important;
background:yellow !important;
border-bottom:2px solid #000099;
}
.content-horiz-titles a{
display:block;
padding:20px;
width:100%;height:100%;
background:#F4F5F7;
}
.content-horiz-titles a:hover{
background:#E8EAEE;
border-bottom:#000;
}
.content-horiz-titles a.active{
background:#000099;
color:#FFF;
}
#social-links a,#contact-links a{
font-weight:normal;
color:#777;
font-size:85%;
}
.margin1 {
padding:10px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   
}
.news-home{
margin:10px;
padding:0px;
}
.news-home li{
background:url(imgs/b1.jpg) no-repeat 0px 0px;
padding-left:25px;
line-height:20px;
color:#FFFFFF;
font-size: 13px;
margin-bottom:10px;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   
}
.news-home a{
color:#FFFFFF;
}
.line-m{
margin:5px 0px;
border-bottom:1px solid #A23F83;
}
.sticky{
position: fixed;
}
.phone{
display:none;
}
#popup{
background:#FFF;
}
#popup .btnClose{
float:right;
cursor:pointer;
background:none;
border:none;
padding:5px 10px;
font-size:130%;
font-weight:normal;
}
.news-block{
margin:10px 20px; padding:5px 10px; border-bottom:2px solid #DDD;border-left:5px solid #DDD;border-right:1px solid#EEE;border-top:1px solid#EEE;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; /*fix extra padding-width*/   }
.news-block .b1{font-size:15px; font-weight:bold; background-position:0px 7px;}
.news-content{margin:5px}
.news-content a{font-size:11px;color:#CC3300}

@media screen and (min-device-width:1000px){ /* only for monitor */
#cover-photo.vertical{
width:30vw;
top:0px;
height:100vh;
position: fixed;
margin:0 0 0 -20px;
}
#cover-photo.vertical~script~h1,
#cover-photo.vertical~script~h1~.pagecontent,
#cover-photo.vertical~script~h1~#content-more{
padding-left:31vw;
}
}