@font-face {
    font-family: 'variant_round_bold_dbregular';
    src: url('variant-webfont.eot');
    src: url('variant-webfont.eot?#iefix') format('embedded-opentype'),
         url('variant-webfont.woff') format('woff'),
         url('variant-webfont.ttf') format('truetype'),
         url('variant-webfont.svg#variant_round_bold_dbregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body, form { width:100%; position:relative; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}

body { padding:0px; margin:0px; background-color:White; font:normal normal normal 12px/18px Arial, Helvetica,sans-serif; background:#3f7dbe url(../Images/page-bg.jpg) no-repeat top center;   }
a { text-decoration:none; }
a:hover { color:White; }
ul, li { list-style-type:none; padding:0; margin:0; }
label { font-weight:bold; }
textarea { font:normal normal normal 12px/18px Arial, Helvetica,sans-serif; }

.clr { clear:both; }
.fl { float:left; }
.fr { float:right; }
.overlay { position:absolute; top:0px; left:0px; background:black; opacity:0.3;  }
.sitewidth { max-width:1600px; min-width:1050px; margin:auto; }
.subtitle { color:#0053A5;  font-size:16px; line-height:normal; font-family:'variant_round_bold_dbregular'; margin-bottom:10px; }
.hint { font-weight:bold; color:#CCCC; font-size:10px; font-style:italic; }

.buttonheader { border-radius:10px; color:white; line-height:20px; padding:5px 10px; cursor:pointer; display:block; background:#03C923; background: #01d51b; background: -moz-linear-gradient(top,  #01d51b 0%, #04a636 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#01d51b), color-stop(100%,#04a636)); background: -webkit-linear-gradient(top,  #01d51b 0%,#04a636 100%); background: -o-linear-gradient(top,  #01d51b 0%,#04a636 100%); background: -ms-linear-gradient(top,  #01d51b 0%,#04a636 100%); background: linear-gradient(to bottom,  #01d51b 0%,#04a636 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01d51b', endColorstr='#04a636',GradientType=0 ); float:left; border:2px solid white; }
.buttonheader:hover {background-color:#640609; }
.button { background-color:#05A737; color:White!important; text-align:center; padding:12px 20px; border-radius:5px; font-weight:bold; font-size:14px; cursor:pointer; }
.buttonalt { background-color:#034585; color:White!important; text-align:center; padding:12px 20px; border-radius:5px; font-weight:bold; font-size:14px; cursor:pointer; }

.tbl { width:100%; border-collapse:collapse; } 
.tbl th { text-align:left; padding:10px; background-color:#034585; color:White; border-right:1px solid white; }
.tbl td { text-align:left; padding:5px 10px; background-color:white; border-right:1px solid #B9D1E8; border-bottom:1px solid #B9D1E8; }
.tbl tr.alt td { background-color:#F0F0F0; }
.tbl tr.hilite td { background-color:#AA0000; color:White; }
.tbl tr.expired td { background-color:#FF6666; color:White; }
.tbl td.buttons { text-align:right; width:160px; }
.tbl .button, .tbl .buttonalt { font-size:12px; font-weight:normal; padding:5px 15px; margin-bottom:5px; max-width:80px; display:inline-block; }

.tbl td .linkedrow { position:absolute;  border:3px double black; width:10px; height:100%; border-right:none; border-bottom-left-radius:15px;  border-top-left-radius:15px; top:-24px; left:-7px; }

table.form { border-collapse:collapse; padding:0; margin:0; }
table.form input { border:1px solid #D1D3D4; border-radius:4px; padding:7px 10px; }
table.form td { padding-left:10px; color:#5F5F5F; }
table.form select { width:100%!important; }

table.paging { margin-top:5px; }
table.paging .previous div, table.paging .next div { background-color:#05A737; color:White!important; text-align:center; padding:12px 20px; border-radius:5px; font-weight:bold; font-size:14px; cursor:pointer; }
table.paging .previous div a, table.paging .next div a { color:White; }

.form input.text, .form select.dropdown, .form textarea.text { font-size: 1em; font-weight:700; padding: 7px 2px; color: #9a9a9a; width: 80%; border: 1px solid #9a9a9a; }
.form label { display:block; }

.filebrowser { width:600px; }
.filebrowser #phUploadControl .text { float:left; width:200px; }
.filebrowser #phUploadControl .control { float:left; width:400px; }
.filebrowser .tbl tr { cursor:pointer; }
.filebrowser .tbl tr.selected td { background-color:#1655A6; color:White; }

#modalDialogBackground { position:fixed; top:0px; bottom:0px; left:0px; right:0px; background-color:rgba(0,0,0,0.3); z-index:10; }
.modaldialog { position:absolute; top:0px; left:0px; background-color:white; -webkit-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.25); }
.modaldialog .title { background-color:#1655A6; color:White; line-height:30px; padding:5px; font-size:1.2em; border-bottom:1px solid #404450; height:auto; }
.modaldialog .content { padding:10px 10px 0 10px; }
.modaldialog .buttons { padding:10px; }
.modaldialog .buttons .button, .modaldialog .buttons .buttonalt { float:right; }
.modaldialog .error { color:Red; }

.uploadobject { width:100%; background-color:#05A737; margin:auto; line-height:30px; height:30px; border:1px solid #1655A6; }
.uploadobject .inner { width:100%; height:100%; position:relative;  }
.uploadobject .inner .uploadbutton { height:100%; text-align:center; color:white; }
.uploadobject .inner .uploadbuttonanimation { background:url(../Images/preloader.gif) no-repeat center center; }
.uploadobject .progressbar { position:absolute; height:100%; left:0px; bottom:0px; width:0px; background-color:#C0C0C0; }

.messagecontainer { position:fixed; width:100%; top:0px; left:0px; z-index:100; }
.messagecontainer .message { padding:0 10px; margin:auto; width:500px; }
.messagecontainer .message div { background-color:#F0F0F0; padding:10px; border-radius:10px; border-top-left-radius:0; border-top-right-radius:0; }
.messagecontainer .message div.error { background-color:#f2dede; color:#b94a48; border:1px solid #eed3d7; }
.messagecontainer .message div.info { background-color:#dff0d8; color:#468847; border:1px solid #d6e9c6; }

#header { height:110px; background-color:#870D1C; border-bottom:1px solid white; min-width:1050px;}
#header .header { height:100%; background:#870D1C url(../Images/header.jpg) no-repeat center center; }
.header .logocontainer { width:50%; float:left; height:100%; overflow:hidden; }
.header .logocontainer .logo { width:351px; height:100%; margin-left:20%; background:url(../Images/logo.png) no-repeat left center; }
.header .detailscontainer { width:50%; float:left; margin-top:10px; }
.header .detailscontainercontainer { float:right; margin-right:10px;  }
.header .ui-helper-hidden-accessible { display:none; }
.header .loggedin .userdetails { text-align:right; color:White; line-height:30px; }
.header .loggedin .userdetails a.loggedinas { color:#03C923; font-weight:bold; }
.header .detailscontainer .buttonheader { margin-top:2px; float:right; padding:3px 10px; display:inline-block; float:none; margin-left:10px; }
.header .forgottonpassword { min-width:300px; }

.header .detailscontainer .form input { width:95%; }
.header .loggedout .btnforgottenpassword, .header .loggedout .btnrememberpassword { float:right; clear:both; margin-top:5px; font-size:1em; cursor:pointer; color:white; }

.header .quicksearch { height:37px; margin-top:10px; background-color:#FFFFFF; border-radius:5px; padding:1px 0 1px 10px;  position:relative;}
.header .quicksearch input { font-size: 1em; color: #8B8C8E; border: none; margin:0; width:170px; padding:9px 5px; float:left; margin-top:2px; background-color:#FFFFFF;  }
.header .quicksearch .searchicon { position:absolute; right:10px; top:0px; width:20px; height:100%; background:transparent url(../Images/icon-search.png) no-repeat center center; }
.ui-autocomplete { z-index:10000; }

.mainnavigation { position:relative; z-index:20; background-color:#034484; height:41px; border-bottom:1px solid white; min-width:1050px; box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.5);}
.mainnavigation .items { height:41px; padding:0; margin:0; list-style-type:none; width:100%; }
.mainnavigation .items li { float:left; padding:0; margin:0; list-style-type:none; text-align:center; position:relative; }
.mainnavigation .items .container { width:99%;  }

.mainnavigation .item { text-align:center; line-height:41px; cursor:pointer; display:block; font-size:1.1em; color:White; border-left:1px solid #5086BF; box-sizing:border-box; -moz-box-sizing:border-box;}
.mainnavigation .item:first-child { border-left:none; }
.mainnavigation  a { color: Black; text-decoration:none; }
.mainnavigation .item:hover { color:#03C923; }
.mainnavigation .selected { background-color:#B30B10;  }

.mainnavigation .item .dashboard { width:120px; margin:auto; height:100%; background:url(../Images/nav-dashboard.png) no-repeat left center; }
.mainnavigation .item .profile { width:85px; margin:auto; height:100%; background:url(../Images/nav-profile.png) no-repeat left center; }
.mainnavigation .item .knowledge { width:140px; margin:auto; height:100%; background:url(../Images/nav-knowledge.png) no-repeat left center; }
.mainnavigation .item .directory { width:140px; margin:auto; height:100%; background:url(../Images/nav-directory.png) no-repeat left center; }
.mainnavigation .item .gallery { width:100px; margin:auto; height:100%; background:url(../Images/nav-gallery.png) no-repeat left center; }
.mainnavigation .item .calendar { width:100px; margin:auto; height:100%; background:url(../Images/nav-calendar.png) no-repeat left center; }
.mainnavigation .item .admin { width:140px; margin:auto; height:100%; background:url(../Images/nav-admin.png) no-repeat left center; }

.mainnavigation .items li .dropdown { display:none; position:absolute; top:41px; left:0; background-color:#034484; border:1px solid white; border-top:none; min-width:100%; text-align:left; }
.mainnavigation .items li:hover .dropdown { display:block; }
.mainnavigation .items li:hover .dropdown .links { padding:5px 10px; }
.mainnavigation .items li:hover .dropdown .links li { float:none; text-align:left; }
.mainnavigation .items li:hover .dropdown .links a { line-height:25px; color:White; }
.mainnavigation .items li:hover .dropdown .links a:hover { color:#03C923; }

.mainnavigation .items .administration .dropdown { width:400px; left:auto; right:0; }
.mainnavigation .items .administration .left, .mainnavigation .items .administration .right { float:left; width:50%; }
.mainnavigation .items .administration .title {  color:#03C923; font-weight:bold; padding:5px 10px; }

#footer { height:45px; background-color:#1559A0; width:100%; position:fixed; left:0px; bottom:0px; }
#footer .inner { width:80%; margin:auto; color:White; line-height:45px; }
#footer .inner .copyright { float:left; }
#footer .inner .support { float:right; }
#footer .inner .dull { color:#77A5D2;}
#footer .inner a { color:White; }

.content .working { padding:30px 10px 60px 10px; min-height:500px; box-sizing:border-box; -moz-box-sizing:border-box; }
.content .columnA { width:26%; float:left; }
.content .columnB { width:74%; float:left; }
.content .columnC { width:50%; float:left; }

.content .column25 { width:25%; float:left; box-sizing:border-box; -moz-box-sizing:border-box; }
.content .column50 { width:50%; float:left; box-sizing:border-box; -moz-box-sizing:border-box; }

.content .columnA .bluebox { width:90%; margin:auto; }

.content .bluebox { background-color:#034585; border-radius:3px; box-sizing:border-box; -moz-box-sizing:border-box; padding:15px 10px 10px 10px;}
.content .bluebox .name { font-style:14px; text-transform:uppercase; font-weight:bold; color:White; }
.content .bluebox .info { margin-top:10px; }
.content .bluebox .info a { color:White; line-height:30px; }
.content .bluebox .title .text { float:left; color:white; font-size:28px; line-height:normal; font-family:'variant_round_bold_dbregular';  }

.content .whitebox { background-color:White; padding:15px 10px 10px 10px; border-radius:3px; }
.content .whitebox .title .text { float:left; color:#0053A5; font-size:28px; line-height:normal; font-family:'variant_round_bold_dbregular';  }
.content .whitebox .title .buttons { float:right; }
.content .whitebox a { color:#034585; }

#phNavigation .editpage { width:20px; height:20px; display:inline-block; background:url(../Images/ico-edit.png) no-repeat center center; cursor:pointer; }
#phNavigation .deletepage { width:20px; height:20px; display:inline-block; background:url(../Images/ico-delete.png) no-repeat center center; cursor:pointer; }

#phProfileImage { margin-bottom:10px }
#phProfileImage img { width:100%; }
#phProfileLeft #phOtherPages .button { margin-bottom:5px; display:block; width:48%; box-sizing:border-box; -moz-box-sizing:border-box; float:left; font-weight:normal; font-size:12px; padding:5px 0; }
#phProfileLeft #phOtherPages .button:nth-child(even) { float:right; }

#phProfileData .extended { clear:left; color:Black; font-family:Arial, Helvetica,sans-serif; font-size:14px; }

#phProfile #phNotifications ul { list-style-type:none; }
#phProfile #phNotifications ul .checkbox { float:left; }
#phProfile #phNotifications ul .name { float:left; margin-left:10px; }
#phProfile #phNotifications ul li { margin-bottom:5px; }

#phProfileTitle .tbl td { border:0; }

#phContactDetails { margin-top:10px; }

#phPermissionList #phGroups .item { background-color:#05A737; color:White!important; text-align:center; padding:12px 20px; border-radius:5px; font-weight:bold; font-size:14px; cursor:pointer; display:inline-block; }
#phPermissionList #phGroups .selected { background-color:#034585; color:White; }
#phPermissionList #phItems { margin-top:20px; }
#phPermissionList #phItems ul { list-style-type:none; }
#phPermissionList #phItems ul .checkbox { float:left; }
#phPermissionList #phItems ul .name { float:left; margin-left:10px; }
#phPermissionList #phItems ul li { margin-bottom:5px; float:left; width:33%; }

#phReportLeave #phDataList .tbl td.buttons { width:200px!important; }

.communicationupdate .filelist .file { float:left; }
.communicationupdate .filelist .comma { float:left; }

#phComunicationList .commitem { border:1px solid black; background-color:White; margin-top:10px; }
#phComunicationList .commitem .commtitle { padding:0 10px; background-color:#034585; color:White; line-height:50px; }
#phComunicationList .commitem .commtitle a { color:White; }
#phComunicationList .commitem .commtitle .button { line-height:normal; margin-top:5px; }
#phComunicationList .commitem .commbody { padding:10px; }
#phComunicationList .commitem .commfiles { padding:0 10px; background-color:#F0F0F0; color:White; line-height:40px; }

#phGalleryList .gallery { box-sizing:border-box; -moz-box-sizing:border-box; width:20%; margin-right:10px; float:left; border:1px solid #C0C0C0; border-radius:4px; background-color:#F0F0F0; padding:10px; margin-bottom:20px; }
#phGalleryList .gallery .img { width:100%; height:200px; overflow:hidden;}
#phGalleryList .gallery .img img { width:100%; }
#phGalleryList .gallery .name { text-align:center; color:#0053A5;  font-size:16px; line-height:25px; padding-top:10px; }

#phPhotoList .buttons { width:300px; }
#phPhotoList .uploadobject { line-height:42px; height:42px; border-radius:4px; border:none; font-size:14px; }
#phPhotoList .uploadobject .inner .uploadbutton { padding:0 10px; }

#phPhotoList .image { box-sizing:border-box; -moz-box-sizing:border-box; width:20%; margin-right:10px; float:left; border:1px solid #C0C0C0; border-radius:4px; background-color:#F0F0F0; padding:10px; margin-bottom:20px; }
#phPhotoList .image .img { width:100%; height:200px; overflow:hidden; }
#phPhotoList .edittitle { cursor:pointer; }

#phPhotoList .image .pnladmin { margin-top:5px; }
#phPhotoList .image .deleteimage, #phPhotoList .image .featureimage { width:48%; float:left; box-sizing:border-box; }
#phPhotoList .image .featureimage { float:right; }

#phPhotoGalleryImage .description { padding:10px 10px 0 10px; text-align:center; font-weight:bold; }

#phCalendarView, #phCalendarViewTopScroll { overflow:auto; }
#phCalendarViewTopScroll .calendartopscroll { line-height:1px; font-size:1px; }
table.calendar { width:100%; border-collapse:collapse; box-sizing:border-box; -moz-box-sizing:border-box; }
table.calendar th { padding:5px 10px; text-align:left; background-color:#E6EDF3; border:1px solid #D1D3D4;}
table.calendar td { border:1px solid #D1D3D4; padding:5px 10px; }
table.calendar .monthname { background-color:#7599BC; color:White; text-transform:uppercase; }
table.calendar .weekend { background-color:#0054A6; color:White; }
table.calendar .holiday { background-color:#03BC28; color:White; }
table.calendar .monthname a { color:White; }

#phDefaultLoggedOut .loggedout { width:30%; margin:auto; }
#phDefaultLoggedOut .loggedout .btnforgottenpassword, #phDefaultLoggedOut .loggedout .btnrememberpassword { clear:both; margin-top:5px; font-size:1em; cursor:pointer; color:black; }

#phDashboard #latestimages .button { margin-bottom:5px; display:block; width:48%; box-sizing:border-box; -moz-box-sizing:border-box; float:left; font-weight:normal; font-size:12px; padding:5px 0; }
#phDashboard #latestimages .imgcontainer { width:100%; overflow:hidden; margin-top:10px; max-height:260px;  }
#phDashboard #latestimages .imgcontainer img { width:100%;}

#phDashboard #phFeatured .profile { margin-top:20px; }
#phDashboard #phFeatured .image { float:left; width:30%; }
#phDashboard #phFeatured .image .thumbnail { width:100%; overflow:hidden; margin-top:10px; max-height:260px;  }
#phDashboard #phFeatured .image .thumbnail img { width:100%;}

#phDashboard #phFeatured .info { float:left; width:70%;box-sizing:border-box; -moz-box-sizing:border-box;  padding-left:20px; }
#phDashboard #phFeatured .info .subtitle { font-size:18px;}
#phDashboard #phFeatured .info .about { font-size:14px; margin-top:20px; }

#phDashboard #eventlist ul { list-style:none; width:100%; padding:0; margin:0; }
#phDashboard #eventlist ul.tabs li { float:left; color:White; line-height:30px; background-color:#034585; width:30%; border-top-right-radius:4px; border-top-left-radius:4px; box-sizing:border-box; -moz-box-sizing:border-box;  margin-right:5px; padding:5px 10px; cursor:pointer; font-weight:bold; }
#phDashboard #eventlist ul.tabs li.selected { background-color:White; color:#034585; }
#phDashboard #eventlist .whitebox { border-top-right-radius:0px; border-top-left-radius:0px; height:250px; overflow:auto; }

#phDashboard #eventlist ul.list { margin-top:10px; }
#phDashboard #eventlist ul.list .date { float:left; width:30%; }
#phDashboard #eventlist ul.list .name { float:left; width:70%; }
#phDashboard #eventlist ul.list li { margin-bottom:10px; }

#phDashboard #eventlist #anniversaries ul.list .name { float:left; width:50%; }
#phDashboard #eventlist #anniversaries ul.list .years { float:left; width:20%; }

#phAnnouncements .announcecontainer { padding-bottom:10px; margin-bottom:20px; border-bottom:1px dotted #C0C0C0; } 
#phAnnouncements .announcements { width:100%; border-collapse:collapse; margin-top:20px;  }
#phAnnouncements .announcements a { color:rgb(56,125,184); }
#phAnnouncements .announcements td { border-bottom:1px solid #BCD2E9; line-height:25px; padding:5px; font-size:1.3em; }
#phAnnouncements .announcements tr:last-child td { border-bottom:none; }
#phAnnouncements .announcements .icon { background:url(../Images/announcement.png) no-repeat center center; width:30px; min-height:25px; height:100%; }
#phAnnouncements .pagingcontrol { float:right; }

#phAnnouncements .pagingcontrol table.paging { margin-top:15px; }
#phAnnouncements .pagingcontrol table.paging .previous div, #phAnnouncements .pagingcontrol table.paging .next div { background-color:#05A737; color:White!important; text-align:center; padding:5px 10px; border-radius:5px; font-weight:bold; font-size:14px; cursor:pointer; }
#phAnnouncements .pagingcontrol table.paging .previous div a, #phAnnouncements .pagingcontrol table.paging .next div a { color:White; }

.phonedirectory .columnC .sepstart { border-left:7px solid #034585; border-collapse:separate; }
.phonedirectory .columnC .sepend { border-right:none; }
.phonedirectory .lastcolumn .tbl { border-right:7px solid #034585;  }

.cmscontentblock { margin-top:10px; background-color:#034585; color:White; border-radius:10px; min-height:210px; padding:10px; }

@media only screen and (max-width :1050px) 
{
    .header .logocontainer .logo { margin-left:10px; }
}