﻿html {
	background-color: rgb(31, 44, 51);
}

body {
	font-family: "Arial";
	font-size: 14px;
	background-color: rgb(244, 244, 245);
	color: rgb(31, 44, 51);
}

p {
	margin: 0 0 30px;
}

.btn-resident{
	color:white !important;
    text-decoration:none !important;
	
}

.btn-resident:visited{
    color:white !important;
}

.btn-resident:hover{
    background-color:black !important;
    color:white !important;
}

.blockquoteA {
    margin: 0px 0px 20px;
    padding: 10px 20px;
    font-size: 16px;
    border-left-color: rgb(119, 119, 119);
    border-left-width: 20px;
    border-left-style: solid;
    font-weight: 600;
}

.alertstyles {
    background-color:gainsboro;
    text-align:left;
    width:1100px;
    height:60px;
    margin-top:10px;
    margin-left:380px;
    border-radius:4px;
}

.alertstyles-longer {
    background-color:gainsboro;
    text-align:left;
    width:1100px;
    height:73px;
    margin-top:10px;
    margin-left:380px;
    border-radius:4px;
}

.eHRViewerPanel {
    padding:0;
	padding-left: 15px;
    margin:0;
    display: none;

}

.collapsible1 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  border-radius: 50px;
  margin-bottom: 20px;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .collapsible1:hover {
  background-color: #ccc; 
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-radius: 50px;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom :20px;
}


.active, .collapsible:hover {
  background-color: #ccc; 
}

.panel11 {
 padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.panel1 {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.mainheading {
		cursor:pointer;
}
	
.btn-resident::before{
content:"\f138";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:5px;
}

.btn-provider{
	color:white !important;
    text-decoration:none !important;
    background-color:rgb(69, 162, 57) !important;
	
}

.btn-provider:visited{
    color:white !important;
}

.btn-provider:hover{
    background-color:black !important;
    color:white !important;
}

.btn-provider::before{
content:"\f138";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:5px;
}


a{
	color: rgb(85, 186, 71) !important;
	text-decoration: underline;
}
    

a:hover{
	color: rgb(85, 186, 71) !important;
	text-decoration: underline;
}

a:visited {
        color: rgb(85, 186, 71) !important;
    }
/* ---------- Header ---------- */

header {
	background-color: rgb(31, 44, 51);
}

header a {
	margin-right: 22px;
}



nav {
    clear: both;
    background-color: rgb(0, 152, 219);
    height: 100px;
}

#navLogo {
	margin-top: 26px;
	float: left;
}

#navLogo img {
	width: 100%;
}

#navLinks .list-inline {
	margin-left: 0;
}

nav > div, nav > div > div {
	height: 100%;
}

#navLinks {
	height: 100%;
}

#navLinks > ul {
	height: 100%;
    float: right;
}

#navLinks > ul > li, #mobileMenuButton {
	background-color: rgb(0, 152, 219);
	position: relative;
	width: 155px;
	height: 100%;
	margin: 0;
	padding: 0;
	float: left;
	background: rgba(0,140,200,1);
	background: -moz-linear-gradient(left, rgba(0,140,200,1) 0%, rgba(0,153,219,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,140,200,1)), color-stop(100%, rgba(0,153,219,1)));
	background: -webkit-linear-gradient(left, rgba(0,140,200,1) 0%, rgba(0,153,219,1) 100%);
	background: -o-linear-gradient(left, rgba(0,140,200,1) 0%, rgba(0,153,219,1) 100%);
	background: -ms-linear-gradient(left, rgba(0,140,200,1) 0%, rgba(0,153,219,1) 100%);
	background: linear-gradient(to right, rgba(0,140,200,1) 0%, rgba(0,153,219,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008cc8', endColorstr='#0099db', GradientType=1 );
}

#navLinks > ul > li > a {
	font-size: 13px;
	text-decoration: none;
	text-align: center;
	color: rgb(244, 244, 245) !important;
	padding: 0 16px;
	display: table;
	width: 100%;
	height: 100%;
}

#navLinks > ul > li > a > div {
	display: table-cell;
	vertical-align: middle;
}

#navLinks > ul > li:hover {
	background: none;
	color: rgb(244, 244, 245);
	background-color: rgb(31, 44, 51);
}

#navLinks ul ul {
	display:none;
	padding: 20px 0;
	color: rgb(244, 244, 245);
	background-color: rgb(31, 44, 51);
	font-size: 14px;
	position: absolute;
	top: 100px;
	left: 0;
	z-index: 2;
	white-space:nowrap;
}

#navLinks ul ul li a {
	color: rgb(244, 244, 245) !important;
	text-decoration: none;
	padding: 5px 20px;
	display: block;
}

#navLinks ul ul li a:hover {
	background-color: rgb(69, 162, 57);
}

#headerContent {
	float: right;
    min-height: 50px;
}

#headerContent ul {
    display: inline-block;
    margin: 0;
    padding: 15px 0;
}

#headerContent ul > li {
    padding: 0;
}

#searchButton {
	color: rgb(255, 255, 255);
	border-radius: 4px;
	background-color: rgb(85, 186, 71);
	padding: 8px 25px;
	text-decoration: none;
}

#searchButtonSmall {
	display: none;
}

#mobileMenuButton {
	display: none;
}
/*----Health Card Update Info Image attributes*/

img-wrapper {
    position:relative;
}


/*.img-overlay {
  position: absolute;
  top: 160px;
  bottom: 20px;
  left: 450px;
  right: -50px;
  text-align: center;
  
}*/

 /* Medium Devices, Desktops */
    @media only screen and (min-width : 695px) and (max-width: 991px) {
        .img-overlay {
            position: absolute;
            bottom: 105px;
            left: 80px;
            right: -50px;
            text-align: center;
        }
    }

 /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .img-overlay {
            position: absolute;
            bottom: 60px;
            left: 250px;
            right: -50px;
            text-align: center;
        }
    }

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    .img-overlay {
        position: absolute;
        top: 170px;
        bottom: 20px;
        left: 450px;
        right: -50px;
        text-align: center;
    }
}

    .img-overlay > a {
        text-decoration:none !important;
        color:white !important;
    }

     .img-overlay > a:visited {
         color:white !important;
        text-decoration:none !important;
    }

     .btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
img-overlay:before {
    content:'';
    display:block;
    height:50%;
}
   

.btn-success {
    background-color:rgb(12, 131, 183) !important;
    border-color:rgb(12, 131, 183) !important;
    border-radius:4px !important;
}

.btn-nonprovider {
    background-color: darkgray !important;
    border-color:rgb(12, 131, 183) !important;
    border-radius:4px !important;
    color:white !important;
}
btn-nonprovider > a{
    text-decoration:none !important;
    color:white !important;
}
.btn-nonprovider a:visited{
    color:white !important;
}

 .btn-nonprovider:hover {
        background-color:black;
    }
.btn-support {
    background-color: grey;
    border-color: black;
    border-radius: 4px !important;
}

.card {
    background-color: rgb(238, 238, 238);
    border-radius: 4px;
    height: 200px;
}

    .btn-support:hover {
        background-color:black;
    }
#blueBoxTextBar > a  {
    color: white !important;
    text-decoration: none !important;
}
#blueBoxTextBar > a:visited  {
    color: white !important;
   
}

/* ---------- Home ---------- */

#boxAreaHome, #boxAreaResidents, #boxAreaHealthcare, #boxAreaHealthdata {
	margin-top: 16px;
}

#boxAreaHome .blueBox, #boxAreaHome .greenBox, #boxAreaHome .grayBox{
	min-height: 590px;
	position: relative;
}

/*resource page*/
    #boxAreaHome.resBox {
    	min-height: 150px;
	position: relative;
    height:100px;
   
    }

#boxAreaHome .whiteBox {
    min-height: 360px;
	padding: 20px;
}

#grayBoxFeature {
	background-image: url('/Style Library/eHealthBranding/Images/EHESK-0158_WebsiteBanner_755x276_v4_B.jpg');
	height: 270px;
	background-position: center center; 
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
#blueBoxFeature {
	
	height: 270px;
	background-position: center center; 
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}


#blueBoxTextBar {
	background-color: rgba(0, 152, 219, 0.5);
	padding-bottom: 16px;
    padding-left:16px;
    padding-right:16px;
    padding-top:16px;
	width: 100%;
	bottom: 0;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
    position:absolute;
}

.whiteBoxText {
    margin-top: 16px;
}

.boxContentArea {
	padding: 20px;
}

.boxContentArea p:last-child{
	margin-bottom: 0;
}

a.button {
	text-decoration: none;
}

.boxButtonArea {
	padding: 0 16px 16px;
}

.boxButtonArea a {
	color: rgb(255, 255, 255) !important;
}

.boxButtonArea {
    padding-top: 16px;
    padding-bottom: 16px;
}

.boxButtonArea > div:first-child {
    margin-bottom: 16px;
}

a.blueBoxButton, a.whiteBoxButton {
	padding-right: 135px;
	padding-left: 20px;
	font-size: 18px;
	color: rgb(31, 44, 51) !important;
	font-weight: bold;
	height: 120px;
	display: table;
	background-position: top right;
	background-size: cover;
	text-decoration: none;
	border-radius: 5px;
    width: 100%;
}

a.blueBoxButton > div, a.whiteBoxButton > div {
	display: table-cell;
	vertical-align: middle;
}

#greenBoxFeature {
	height: 270px;
	background-position: center center; 
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

#greenBoxTextBar {
	background-color: rgba(85, 186, 71, 0.5);
	width: 100%;
    padding-bottom: 16px;
    padding-left:16px;
    padding-right:16px;
    padding-top:16px;
	bottom: 0;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
    position:absolute;
}

.whiteBox a.whiteBoxHeader, .whiteBox h1 {
	font-size: 28px;
	font-weight: bold;
	padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 16px;
    color: rgb(31, 44, 51) !important;
    text-decoration: none;
      margin-top:15px;
}

.whiteBox a.whiteBoxHeader, .whiteBox h2 {
	font-size: 24px !important;
	font-weight: normal;
	padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 16px;
    color: rgb(31, 44, 51) !important;
    text-decoration: none;
      margin-top:15px;
}

.whiteBox a.whiteBoxHeader, .whiteBox h3 {
	font-size: 18px !important;
	font-weight: lighter;
	padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 16px;
    color: rgb(31, 44, 51) !important;
    text-decoration: none;
      margin-top:15px;
}

.unstyledList {
	margin: 0 60px 30px;
}

.unstyledList li {
	padding-left: 30px;
}

.unstyledList li i {
	font-size: 5px;
    padding-top: 8px;
}

#newsListItems li {
	margin-bottom: 25px;
}

#newsListItems li i {
	width: 30px;
    float: left;
	margin-top: 5px;
}

#newsListItems li div {
	width: 30px;
    float: left;
	margin-top: 5px;
}
#newsListItems li > span {
	margin-left: -30px;
	display: block;
    float: left;
    width: 100%;
}

#newsListItems li > span > a {
	padding-left: 30px;
	display: block;
}

    #newsListItems li > span > a, .ms-link:visited {
        color:rgb(85, 186, 71) !important;
    }
#buttonLinkList li {
	margin-bottom: 3px;
}


#buttonLinkList li ul {
	padding-left:20px;
	padding-bottom: 8px;
}

/* ---------- Residents, Healthcare shared styles ---------- */

#boxAreaResidents .whiteBox, #boxAreaHealthcare .whiteBox {
	padding: 20px;
}

#boxAreaResidents .subHeaderArea, #boxAreaHealthcare .subHeaderArea {
	margin-bottom: 8px;
}

#boxAreaHealthcare #greenBoxSidebarTextBar, #resourceBoxSidebarTextBar {
	font-size: 18px;
}

.boxWrapper {
	padding: 8px;
}

.boxWrapper .whiteBox {
	min-height: 220px;
    padding:20px;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;
    overflow: visible !important;
}
#residentsBoxFeature.featureImageOnly, #healthcareBoxFeature.featureImageOnly,#healthServiceBoxFeature.featureImageOnly,#healthdataBoxFeature.featureImageOnly,#CitizenBoxFeature.featureImageOnly{
	margin: 0;
	height: 300px;
}

#promoBox {
	background-color: rgb(255, 255, 255);
	margin-top: 16px;
	padding: 20px;
}

#imagePromoBox {
	background-color: rgb(255, 255, 255);
	background-image: url('/Style Library/eHealthBranding/Images/promo-image.png');
	height: 230px;
	background-position: center center;
	background-size: cover;
	margin-top: 16px;
	position: relative;
}

#imagePromoTopText {
	color: rgb(255, 255, 255);
    background-color: rgb(0, 173, 238);
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    padding: 10px 30px;
    font-size: 18px;
    display: block;
    font-weight: bold;
    width: 60%;
    position: absolute;
    top: 32px;
    left: 24px;
}

#imagePromoBottomText {
	color: rgb(255, 255, 255);
    background-color: rgb(0, 173, 238);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 0;
    font-size: 11px;
    display: block;
    font-weight: bold;
    width: 60%;
    position: absolute;
    bottom: 40px;
    left: 24px;
}

.whiteBoxIcon {
    height: 154px;
    overflow: hidden;
    text-align: center;
    display: table;
    width: 100%;
    max-width: 100%;
}

.whiteBoxIcon > div {
    display: table-cell;
    vertical-align: middle;
    max-width: 100%;
}

.whiteBoxLeft {
    width: 100%;
    margin-right: -100px;
    float: left;
}

.whiteBoxLeft > div {
    padding-right: 120px;
}

.whiteBoxLeft > div {
	height: 125px;
}

.whiteBoxLeftText {
	margin: 5px 0 25px 0;
}
.whiteBoxResLeftText {
    margin: 5px 0 25px 10px;
}
.whiteBoxRight {
    width: 100px;
    float: left;
}

.whiteBoxIcon img {
    max-width: 100%;
}

.whiteBox .pull-left {
    width: 66%;
}

.whiteBox .pull-right {
    width: 34%;
}

.whiteBox .pull-right > div {


    max-width: 100%;
}

/*Health data */

#healthdataBoxFeature {
	background-image: url('/Style Library/eHealthBranding/Images/data-and-analytics.jpg');
	height: 300px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
}

#boxAreahealthdata .whiteBox {
    min-height: 0;
}

#boxAreahealthdata .whiteBox > div {
    padding: 0;
}

/*citizen-engagement*/

#CitizenBoxFeature {
	background-image: url('/Style Library/eHealthBranding/Images/citizen-engagement.jpg');
	height: 300px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
}

#boxAreaCitizen .whiteBox {
    min-height: 0;
}

#boxAreaCitizen .whiteBox > div {
    padding: 0;
}

/* ---------- Residents ---------- */

#residentsBoxFeature {
	
	height: 300px;
	background-position: 0;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
  
}

#boxAreaResidents .whiteBox {
    min-height: 0;
}

#boxAreaResidents .whiteBox > div {
    padding: 0;
}

/* ---------- Healthcare ---------- */

#healthcareBoxFeature {
	background-position: 0 ;
	background-image: url('/Style Library/eHealthBranding/Images/hc-providers-banner-photo.jpg'); 
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
}

#boxAreaHealthcare .whiteBoxLeft {
    margin-right: -154px;
}

#boxAreaHealthcare .whiteBoxLeft > div {
    padding-right: 174px;
}

#boxAreaHealthcare .whiteBoxRight {
    width: 154px;
}

#boxAreaHealthcare .whiteBoxIcon img {
	padding: 0;
}

/* ---------- Social Icons ---------- */

.fa-vimeo, .fa-facebook, .fa-twitter ,.fa-linkedin{
	color: rgb(255, 255, 255);
}

/*Health Care Service Pages*/

#healthServiceBoxFeature {
	background-position: 0;
	/*background-image: url('../img/hc-providers-banner-photo.png'); */
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
    overflow:hidden;
}

#residentServiceBoxFeature {
   	height: 300px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
    overflow:hidden;
}


#healthdataBoxFeature {
   	height: 300px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
    overflow:hidden;
}

#CitizenBoxFeature {
   	height: 300px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	margin: -20px -20px 20px -20px;
    overflow:hidden;
}
/* ---------- Shared Styles ---------- */

/*input {
	border-style: none;
	border-width: 0;
	border-radius: 4px;
	background-color: rgb(255, 255, 255);
	height: 30px;
	padding: 0 16px;
	width: 240px;
	margin-right: 22px;
}*/

.spacerTop {
	margin-top: 16px;
}

.BoxButtonArea .spacerBottom {
	margin-bottom: 2px;
}

.blueBox {
	background-color: rgb(0, 152, 219);
	color: rgb(255, 255, 255);
}

.greenBox {
	background-color: rgb(85, 186, 71);
	color: rgb(255, 255, 255);
}
.resBox {
background-color: rgb(246, 246, 246);
	color: rgb(31, 44, 51);
}
.grayBox {
    background-color: gray;
	color: rgb(255, 255, 255);
}
.whiteBox {
	background-color: rgb(255, 255, 255);
	color: rgb(31, 44, 51);
}

.blueButton {
	background-color: rgb(12, 131, 183);
	color: rgb(255, 255, 255);
	border-radius: 4px;
	padding: 2px 10px;
}

.greenButton {
	background-color: rgb(69, 162, 57);
	color: rgb(255, 255, 255);
	border-radius: 4px;
	padding: 2px 10px;
    display: block;
}

.grayButton {
    background-color: rgb(117, 120, 123);
	color: rgb(255, 255, 255);
	border-radius: 4px;
	padding: 2px 10px;
    display: block;
}

#buttonLinkList .greenButton {
    font-size: 13px;
}

#buttonLinkList .grayButton  {
    font-size: 13px;
}
.greenButton img {
	width: 20px;
    float: left;
    margin-right: 10px;
}

/*.greenButton > span {
	margin-left: -30px;
    float: left;
    display: block;
    width: 100%;
    padding: 0;
}

.greenButton > span > span {
    padding: 0 0 0 30px;
    display: block;
}*/
/*gray button*/

.grayButton img {
	width: 20px;
    float: left;
    margin-right: 10px;
}

/*.grayButton > span {
	margin-left: -30px;
    float: left;
    display: block;
    width: 100%;
    padding: 0;
}

.grayButton > span > span {
    padding: 0 0 0 30px;
    display: block;
}*/

/*resource page*/

#resBoxSidebar.allService1 {
    min-height: 150px;
     height: 100px;
}
#resourceBoxSidebarTextBar {
/*background-color: rgb(85, 186, 71);*/
 /*padding: 0px 20px;*/
	font-size: 18px;
	/*font-weight: bold;*/
    

     background-color: rgb(69, 162, 57);
	color: rgb(255, 255, 255);
	border-radius: 4px;
	padding: 5px 5px 5px 10px;
    /*display: block;*/
    /*height:40px !important;*/
     min-height:40px !important;
   
}

#resourceBoxSidebarTextBar a {

    color:white !important;
    text-decoration: none !important;
}


#resourceBoxSidebarTextBar a:visited {
        color: white !important;
       
    }

    /*#resourceBoxSidebarTextBar  a:hover {
      
	color: black;
	text-decoration: none !important;
}*/
    #resourceBoxSidebarTextBar .fa-chevron-circle-right {
	width: 25px;
}

a .button:hover, a.button:hover {
	background-color: rgb(29, 41, 48);
}

.button .fa-chevron-circle-right {
	width: 25px;
}

.serviceDesk {
	left: 16px;
	bottom: 10px;
	position: absolute;
}

.viewAllServices {
	right: 16px;
	bottom: 10px;
	position: absolute;
}

.expandable {
    text-align: center;
    margin-bottom: 16px;
    padding: 16px 0;
}

#blueBoxSidebar .blueButton {
	display: block;
}

#blueBoxSidebar li:last-child, #greenBoxSidebar li:last-child {
    margin-bottom: -8px;
}

#blueBoxSidebar.allServices, #greenBoxSidebar.allServices , #grayBoxSidebar.allServices, #resBoxSidebar.allService1{
	min-height: 300px;
}

#blueBoxSidebarTextBar, #greenBoxSidebarTextBar,#grayBoxSidebarTextBar {
    background-color: rgb(31, 44, 51);
    padding: 15px 20px;
	font-size: 21px;
	font-weight: bold;
}

/* ---------- Footer ---------- */

footer {
	background-color: rgb(31, 44, 51);
	min-height: 100px;
	padding-top: 20px;
	margin-top: 16px;
    height:80px;
    clear:both;
    padding-bottom:0px;
    position:sticky;
}

#footerLinks {
	padding-top: 20px;
}



/* ---------- Responsive ---------- */

/* Extra extra small devices (phones, 375px and less) */
@media (max-width: 375px) {

    .blockquoteA {
        margin: 0px 0px 20px;
        padding: 10px 20px;
        font-size: 10px;
        border-left-color: rgb(119, 119, 119);
        border-left-width: 5px;
        border-left-style: solid;
        font-weight: 600;
    }

    

    .alertstyles {
        background-color: gainsboro;
        text-align: center;
        width: 400px;
        height: 60px;
        margin-top: 10px;
        margin-left: 0px;
        border-radius: 4px;
    }
	
	.alertstyles-longer {
    background-color:gainsboro;
    text-align:left;
    width:1100px;
    height:73px;
    margin-top:10px;
    margin-left:220px;
    border-radius:4px;
}
	
	
	header a {
		margin-right: 11px;
	}
	
	#blueBoxTextBar, #greenBoxTextBar, #grayBoxTextBar {
		font-size: 14px;
	}

    #greenBoxTextBar{
        padding-top:0px !important;
    }
	
	.whiteBox h1 {
		font-size: 14px;
        margin-top:15px;
	}
	
	#residentsBoxFeature, #healthdataBoxFeature,#CitizenBoxFeature, #healthcareBoxFeature, #healthServiceBoxFeature, #residentServiceBoxFeature,#residentServiceBoxFeature.featureImageOnly, #residentsBoxFeature.featureImageOnly, #healthcareBoxFeature.featureImageOnly #healthServiceBoxFeature.featureImageOnly,#healthdataBoxFeature.featureImageOnly,#CitizenBoxFeature.featureImageOnly {
		height: 150px;
      
	}
	
	#imagePromoBox {
		height: 200px;
	}
	
	#imagePromoTopText {
		padding: 10px ;
		font-size: 13px;
		top: 20px;
		left: 15px;
	}

	#imagePromoBottomText {
		font-size: 9px;
		bottom: 25px;
		left: 15px;
	}
	
	#boxAreaHealthcare .whiteBoxLeft {
		margin-right: -100px;
	}
	
	#boxAreaHealthcare .whiteBoxRight {
		width: 100px;
	}
     #resourceBoxSidebarTextBar {
        padding-bottom: 5px !important;
        padding-top: 5px !important;
        display:block;
        /*text-decoration: underline;*/
   border-bottom-style: inset;
   border-bottom-color:white;
   border-color:white;

    }

}


/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
	#boxAreaResidents .col-sm-8 {
		float: none !important;
	}
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }

  	#searchSpan {
		z-index: 3;
		text-align: center;
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
	}

    #SearchBox {
		z-index: 3;
		text-align: center;
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
	}

    #SearchBox input[type='text'] {
      max-width:50%;
    }

	#searchSpan input {
		max-width:50%;
	}

	#searchSpan > div {
		background-color: rgb(244, 244, 245);
		padding: 20px 0;
		width: 100%;
	}

    .blockquoteA {
        margin: 0px 0px 20px;
        padding: 10px 20px;
        font-size: 10px;
        border-left-color: rgb(119, 119, 119);
        border-left-width: 5px;
        border-left-style: solid;
        font-weight: 600;
    }



    .alertstyles {
        background-color: gainsboro;
        text-align: center;
        width: 400px;
        height: 60px;
        margin-top: 10px;
        margin-left: 0px;
        border-radius: 4px;
    }
	
	.alertstyles-longer {
    background-color:gainsboro;
    text-align:left;
    width:1100px;
    height:73px;
    margin-top:10px;
    margin-left:220px;
    border-radius:4px;
	}

	nav {
		min-height: 64px;
        height: auto;
	}

	body.sticky nav {
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		z-index: 2;
	}

	body.sticky header{
		padding-bottom: 65px;
	}

	#navLogo {
		margin-top: 16px;
	}

	#navLogo img {
		width: 100px;
	}

	#headerContent {
		float: none;
	}

	#mobileSearchButton {
		display: block;
		background-color: rgb(85, 186, 71);
		position: absolute;
		top: 0;
		right: 0;
		width: 64px;
		height: 50px;
		margin: 0;
	}

	#mobileSearchButton.selected {
		background-color: rgb(244, 244, 245);
	}

	#mobileSearchButton img {
		padding: 12px 19px;
	}

	#navLinks {
		position: relative;
	}

	#mobileMenuButton {
		display: block;
		float: right;
		width: 64px;
		height: 64px;
		margin: 0;
	}

	#mobileMenuButton.selected {
		background: none;
		background-color: rgb(31, 44, 51);
	}

	#mobileMenuButton img {
		padding: 20px;
	}

	.boxButtonArea .col-md-6:first-child {
		padding-bottom: 3px;
	}

	.boxButtonArea > div:first-child {
		margin-bottom: 3px;
	}

	#footerLinks {
		padding: 0;
	}

	#footerLinks li {
		display: block;
	}
	
	#footerLeft {
		padding-top: 9px;
	}

	#boxAreaHome .blueBox, #boxAreaHome .greenBox {
		min-height: 0;
	}

    .blueBox{
        margin-top:-1px;
    }

	.whiteBox {
		margin-bottom: 16px;
	}

	#blueBoxFeature, #greenBoxFeature,#grayBoxFeature {
		background-position: center 25%;
	}

    #blueBoxFeature{
        height:inherit !important;
    }

    #blueBoxTextBar{
        position:relative !important;
    }


	a.blueBoxButton {
		padding-right: 50%;
		height: 55px;
		font-size: 14px;
	}

	#navLinks {
		background: none;
		background-color: rgb(31, 44, 51);
		height: auto;
		padding: 20px 0;
		width: 100%;
		z-index: 2;
		margin-top: 64px;
        clear: both;
	}

	#navLinks ul {
		float: none;
        margin-bottom: 0;
	}

	#navLinks a:hover {
		background-color: rgb(69, 162, 57);
	}


	#navLinks > ul > li > a {
		font-size: 14px;
		text-decoration: none;
		text-align: left;
		color: rgb(244, 244, 245);
		padding: 8px 20px;
		display: table;
		height: 100%;
	}

	#navLinks > ul > li {
		background: none;
		width: 100%;
		float: none;
        position: static;
        height: auto;
	}

	#navLinks > ul > li:hover ul {
		display: none !important;
	}

	#navLinks ul ul {
		display: none; 
	}

	.expandable.selected {
		background-color: rgb(31, 44, 51);
	}

	#boxAreaHome .whiteBox {
		min-height: 0;
	}
    
    #servicesBlue, #servicesGreen, #searchSpan, #navLinks, #sidebarLinkList {
        display: none;
    }

    #navLogoWrapper {
        float: left;
    }
	
	#blueBoxSidebar.allServices, #greenBoxSidebar.allServices, #grayBoxSidebar.allServices,#resBoxSidebar.allService1 {
		margin-top: 16px;
	}
	
	.boxWrapper {
		padding: 0 8px;
	}
	
	.boxWrapper .whiteBoxButton {
		margin-bottom: 0;
	}
	
	.boxWrapper .whiteBox {
		min-height: 0;
	}
	
	#boxAreaResidents .subHeaderArea, #boxAreaHealthcare .subHeaderArea {
		margin-bottom: 16px;
	}
	
	#boxAreaResidents .whiteBox, #boxAreaHealthcare .whiteBox {
		margin-left: 0;
		margin-right: 0;
	}
	
    .whiteBoxIcon {
        height: 90px;
    }

	.whiteBoxLeft, #boxAreaHealthcare .whiteBoxLeft {
		margin-right: -100px;
	}
	
	.whiteBoxLeft > div, #boxAreaHealthcare .whiteBoxLeft > div {
        height: 90px;
		padding-right: 120px;
    }
	
	.whiteBoxRight, #boxAreaHealthcare .whiteBoxRight {
		width: 100px;
	}
	
	#blueBoxSidebar.allServices, #greenBoxSidebar.allServices, #grayBoxSidebar.allServices, #resBoxSidebar.allService1 {
		min-height: 0;
	}
	
	#healthcareBoxFeature {
		background-position: 0 -80px;		
	}
     #resourceBoxSidebarTextBar {
        padding-bottom: 10px !important;
        padding-top: 10px !important;
        display:block;
        /*text-decoration: underline;*/
         border-bottom-style: inset;
         border-width:medium ;
         border-bottom-color:white !important;
         border-top-color:white;
      border-color:white !important;
   height:40px !important;
   min-height:40px !important;

    }

     #resourceBoxSidebarTextBar {
		font-size: 12px;
        word-wrap:normal;

	}
}

@media (max-width: 600px) {
	#healthcareBoxFeature {
		background-position: 0 -60px;
		height: 200px !important;
	}
}

@media (max-width: 500px) {
	#healthcareBoxFeature {
		background-position: 0 -40px;
	}
}

@media (max-width: 400px) {	
	#healthcareBoxFeature {
		background-position: 0 0;
	}
}

/* Small devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {

	#boxAreaHome .whiteBox {
		min-height: 425px;
	}
   .blockquoteA {
        margin: 0px 0px 20px;
        padding: 10px 20px;
        font-size: 10px;
        border-left-color: rgb(119, 119, 119);
        border-left-width: 5px;
        border-left-style: solid;
        font-weight: 600;
    }



    .alertstyles {
        background-color: gainsboro;
        text-align: center;
        width: 400px;
        height: 60px;
        margin-top: 10px;
        margin-left: 0px;
        border-radius: 4px;
    }

	.alertstyles-longer {
    background-color:gainsboro;
    text-align:left;
    width:1100px;
    height:73px;
    margin-top:10px;
    margin-left:220px;
    border-radius:4px;
}

	nav {
		height: 65px;
	}

	#navLinks > ul > li {
		width: 118px;
	}

	#navLinks > ul > li > a {
		font-size: 12px;
	}

	#navLinks ul ul {
		top: 65px;
		font-size: 11px;
	}

	#navLogo {
		margin-top: 17px;
	}

    #navLinks .list-inline {
	margin-left: 0;
}

 
	.col-md-6:first-child a.blueBoxButton {
		margin-right: 0;
		margin-bottom: 16px;
	}

	.col-md-6:last-child a.blueBoxButton {
		margin-left: 0;
	}

	a.blueBoxButton, a.whiteBoxButton {
		height: 55px;
		font-size: 14px;
		background-size: cover;
		background-position-y: 35%;
	}

	#boxAreaHome .blueBox, #boxAreaHome .greenBox{
		min-height: 549px;
	}

	#blueBoxTextBar, #greenBoxTextBar, #resourceBoxSidebarTextBar {
		font-size: 18px;
	}
	
	#blueBoxFeature, #greenBoxFeature,#grayBoxFeature {
		height: 200px;
	}

   #greenBoxTextBar{
        padding-top:36px !important;
        position:relative !important;
    }
	
	#imagePromoBox {
		height: 140px;
	}
	
	#imagePromoTopText {
		padding: 10px ;
		font-size: 11px;
		top: 20px;
		left: 15px;
	}

	#imagePromoBottomText {
		font-size: 6px;
		bottom: 25px;
		left: 15px;
	}
	
	.boxWrapper .whiteBox {
		min-height: 100px;
	}

	.whiteBoxIcon {
		height: 100px;
	}
	
	#boxAreaHealthcare .whiteBoxIcon {
		height: 154px;
	}

	.whiteBoxIcon img {
		padding: 25px 0;
	}
	
	.whiteBoxLeft > div {
		padding-right: 150px;
	}
	
	#boxAreaResidents .whiteBox a.whiteBoxHeader {
		font-size: 14px;
	}
	
	#healthcareBoxFeature {
		background-position: -75px 0;
	}
	
	.whiteBox #healthcareBoxFeature {
		background-position: 0 0;
	}
}



    /* Medium devices (desktops, 992px to 1199px) */
    @media (min-width: 992px) and (max-width: 1199px) {

        #boxAreaHome .blueBox, #boxAreaHome .greenBox, #boxAreaHome .grayBox {
            min-height: 529px;
        }

        #navLinks > ul > li {
            width: 155px;
        }

        #navLogo {
            margin-top: 29px;
        }

        #blueBoxTextBar, #greenBoxTextBar, #grayBoxTextBar, #resourceBoxSidebarTextBar {
            font-size: 18px;
        }

        #greenBoxTextBar {
            padding-top: 0px !important;
        }

        #blueBoxFeature, #greenBoxFeature, #grayBoxFeature {
            height: 200px;
        }


        .custom-right-img {
            height: 194px !important;
        }

        #blueBoxTextBar {
            padding-top: 0px !important;
        }

        #imagePromoBox {
            height: 164px;
        }

        #imagePromoTopText {
            padding: 5px 30px;
            font-size: 11px;
            top: 20px;
            left: 20px;
        }

        #imagePromoBottomText {
            font-size: 6px;
            bottom: 25px;
            left: 20px;
        }

        .whiteBoxLeftText {
            margin: 5px 0;
        }

        .whiteBoxResLeftText {
            margin: 5px 0;
        }

        .whiteBoxIcon {
            height: 180px;
        }

        #boxAreaHealthcare .boxWrapper .whiteBox {
            min-height: 280px;
        }

        #healthcareBoxFeature {
            background-position: 0 -20px;
        }

        .whiteBox #healthcareBoxFeature {
            background-position: 0 -65px;
        }

        .alertstyles {
            background-color: gainsboro;
            text-align: left;
            width: 1100px;
            height: 60px;
            margin-top: 10px;
            margin-left: 240px;
            border-radius: 4px;
        }
		
		.alertstyles-longer {
			background-color:gainsboro;
			text-align:left;
			width:1100px;
			height:73px;
			margin-top:10px;
			margin-left:220px;
			border-radius:4px;
		}
    }


    .feedback {
        background-color: rgb(31, 44, 51);
        color: rgb(255, 255, 255);
        border-radius: 10px;
        padding: 2px 10px;
        display: block;
        position: center;
        font-size: large;
        padding-bottom: 15px;
        padding-top: 15px;
    }

        .feedback a:hover {
            color: white !important;
        }


    .headericons {
        text-decoration: none !important;
    }

    /* Medium and up (desktops, 992px and up) */
    @media (min-width: 992px) {
        .boxButtonArea .col-md-6:first-child {
            padding-right: 0px;
        }

        .boxButtonArea .col-md-6:last-child {
            padding-left: 0px;
        }

        .boxButtonArea .col-md-6:first-child > div {
            margin-right: 8px;
        }

        .boxButtonArea .col-md-6:last-child > div {
            margin-left: 8px;
        }
    }

    /* Small and up (tablets and desktops, 768px and up) */
    @media (min-width: 768px) {
        #headerContent > div {
            display: inline-block;
        }

        #servicesBlue, #servicesGreen, #navLinks, #sidebarLinkList {
            display: block !important;
        }

        #searchSpan {
            display: inline-block !important;
        }

        #SearchBox {
            display: inline-block !important;
        }

        #boxAreaHealthcare .whiteBoxLeft > div {
            height: 154px;
        }
    }
    /*custom overide*/
    #s4-bodyContainer {
        padding-bottom: 80px;
    }

    /*added to fix IE8 issues*/
    body #s4-workspace {
        /*margin-bottom:-80px;*/
        min-height: 100%;
        overflow: auto;
    }

    a.ms-listlink {
        color: rgb(85, 186, 71) !important;
    }
    /* Up to Medium (phones and tablets, up to 991px) */
    @media (max-width: 991px) {
        .whiteBoxLeft > div {
            display: table;
        }

            .whiteBoxLeft > div > div {
                display: table-cell;
                vertical-align: middle;
            }
    }

    .custom-right-img-xs {
        background: url('/Style Library/eHealthBranding/Images/hc-providers-banner-photo2.jpg');
        height: 234.86px;
        background-position: center 25%;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
    }

    .custom-right-img {
        background: url('/Style Library/eHealthBranding/Images/hc-providers-banner-photo2.jpg');
        width: 100%;
        background-position: center 25%;
        height: 102px;
        background-repeat: no-repeat;
        background-size: cover;
    }

    @media (min-width:1200px) {

        .custom-right-img {
            height: 100%;
        }
    }

    @media (min-width:695px) and (max-width:991px) {
        #blueBoxTextBar {
            padding-top: 0px !important;
        }


        .custom-right-img {
            background-position: center 25%;
            height: 126px !important;
        }
    }

    @media (min-width:768px) and (max-width:792px) {
        #blueBoxTextBar {
            padding-top: 0px !important;
        }


        .custom-right-img {
            background-position: center 25%;
            height: 102px !important;
        }
    }

    .resident-button {
        display: block;
        background-color: rgb(12, 131, 183);
        border-color: white !important;
        border-bottom-style: solid;
        margin-left: 20px;
        margin-right: 20px;
        border-radius: 5px !important;
        border-width: 2px;
        color: white !important;
        font-size: 16px;
    }

        .resident-button:hover {
            background-color: black !important;
            color: white !important;
        }

        .resident-button:visited {
            color: white !important;
            text-decoration: none !important;
        }

    .img-overlay a:hover {
        background-color: black !important;
    }

    .btn-provider-reverse {
        color: rgb(69, 162, 57) !important;
        text-decoration: none !important;
        background-color: white !important;
        border: 2px solid rgb(69, 162, 57) !important;
    }

    .btn-resident-reverse {
        border: 2px solid rgb(12, 131, 183) !important;
        color: rgb(12, 131, 183) !important;
        text-decoration: none !important;
        background-color: white !important;
    }

    .btn-provider-reverse:hover {
        background-color: rgb(69, 162, 57) !important;
        color: white !important;
    }

    .btn-resident-reverse:hover {
        background-color: rgb(12, 131, 183) !important;
        color: white !important;
    }

    .btn-provider-reverse::before {
        content: "\f138";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        padding-right: 5px;
    }

    .btn-resident-reverse::before {
        content: "\f138";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        padding-right: 5px;
    }

.show-div {
    display: inherit;
    visibility: visible;
}

.hide-div {
    display: none;
    visibility: hidden;
}


.MSHRLoginbutton {
    background-color: #49b24a;
  	border: none;
	border-radius: 4px;
	color: #ffffff !important;
  	padding: 15px 151.5px;
  	text-align: center;
  	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
  	font: Arial, "sans-serif";
	font-weight: 800;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
	box-shadow: 0 6px 15px 0 rgba(0,0,0,0.2);
	 -webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;
	white-space: nowrap;
}


.MSHRLoginbutton:hover {
	background-color:#498946;
	color: #ffffff !important;		
}

.MSHRLoginbutton:visited {
	color: #ffffff !important;		
}

.MSHRpageButton {
	background-color: #49b24a;
  	border: none;
	border-radius: 4px;
	color: #ffffff !important;
  	padding: 18px;
  	text-align: center;
  	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
  	font: Arial, "sans-serif";
	font-weight: 800;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
	box-shadow: 0 6px 15px 0 rgba(0,0,0,0.2);
	 -webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;
	white-space: nowrap;
}

.MSHRpageButton:hover {
	background-color:#498946;
    color: #ffffff !important;	
}
.MSHRpageButton:visited {
	color: #ffffff !important;	
}	
.CertificateButton {
	background-color: #49b24a;
	height: 80Px;
	width: 250px;
  	border: none;
	border-radius: 4px;
	color: #ffffff !important;
  	padding: 18px;
  	text-align: center;
  	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
  	font: Arial, "sans-serif";
	font-weight: 800;
  	font-size: 16px;
  	margin: 4px 2px;
  	cursor: pointer;
	box-shadow: 0 6px 15px 0 rgba(0,0,0,0.2);
	 -webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;
	white-space: nowrap;
}

.CertificateButton:hover {
	background-color:#498946;
    color: #ffffff !important;	
}
.CertificateButton:visited {
	color: #ffffff !important;	
}