body {
  padding-top: 50px;
  color: #333333;
  background-color: #ffffff;
  font-size:1.5em;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
}

/* GLOBAL STYLES */
.img-fluid{ /* scales image with the parent element */
	max-width: 100%;
	height: auto;
}

p {
  margin: 0 0 14px;
}

a {
  color: #337ab7;
  text-decoration: underline;
}

a:hover,
a:focus,
a:visited {
  color: #479ee8;
  text-decoration: underline;
}

a.anchor { /* allows for fixed top menu when using anchors */
    display: block;
    position: relative;
    top: -45px;
    visibility: hidden;
}

h1,
.h1 {
  font-size: 1.5em;
  padding-bottom:8px;
}

h2,
.h2 {
  font-size: 1.25em;
  padding-top: 4px;
  padding-bottom:4px;
}

h3,
.h3 {
  font-size: 1.15em;
  padding-top: 3px;
  padding-bottom:4px;
}

h4,
.h4 {
  font-size: 1.10em;
  font-weight:bold;
  padding-bottom:2px;
  padding-top:6px;
}

h4.blocked{ /* h4 with shaded background */
	background-color: #f4f4f4;
	padding: 10px 15px;
}

h4.blocked-green{ /* h4 with green background-white text */
	background-color: #596744;
	color:#ffffff;
	padding: 10px 15px;
	margin: 0px;
}

h4.blocked-gray{ /* h4 with gray background-black text */
	background-color: #f4f4f4;
	color:#000000;
	padding: 10px 15px;
	margin: 0px;
}

em{
	font-style:italic;
}

ul{
	list-style:square;
	margin-left:40px;
}

ul.focus{ /* added to give focus to menu items --- NOT WORKING!!! */
	border: 1px;
}


ul li{
	padding:3px 5px 3px 8px !important;
}

ol{
	margin-left:40px;
	list-style:decimal !important;
}

ol li{
	padding:5px 5px 5px 10px;
}

.indent{
	padding-left: 40px;
}

.webcastNote{
	font-size: 75%;
	font-weight:bold;
}

/*--- BREADCRUMBS ---*/

.breadcrumb {
  /*padding: 8px 15px; <---Bootstrap default*/
  padding: 0px;
  margin-bottom: 20px;
  list-style: none;
  /*background-color: #f5f5f5; <---Bootstrap default*/
  background-color: #ffffff;
  border-radius: 4px;
  font-size: 0.85em;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}

/*---TABLES---*/
table, .table, #table, th, td{
	/*border:0 !important;*/
}

.table > tbody > tr > td {
     vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  /*background-color: #f9f9f9;*/
  background-color: #f1f1f1; /*adjusting the gray bkgd in the striped table class*/
}

.table-40percent-width{
	max-width:40%;
}

.table-40percent-width tr td{
	width 50%;
}

@media (max-width: 550px) {
	.table-40percent-width{
		max-width: 99%;
	}
}

@media (max-width: 650px) {
	.table-40percent-width{
		max-width: 80%;
	}
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 1em;
  font-style:italic;
  /*border-left: 5px solid #eee; <-- Bootstrap default*/
  border-left: 0px;
}

p.img-caption{
	font-size:0.8em;
	/*font-style:oblique;*/
	color: #808080;
	text-align:center;
}


/*TOP FIXED NAV*/ 

.navbar-inverse { 
	background-color:#5f6062;
	/*border-color:#6fcde4;*/
	border-color:#5f6062;
	/* -- bumps main menu in, but no good for small screen
	padding-left:70px;
	padding-right:70px;*/
}

#topnav ul{
	margin-left:0px;
}
#topnav ul li{
	color:#FFF;
	float:right;
	display:inline;
	padding-left: 6px;
	padding-right: 6px;
	padding-bottom: 8px;
}

#topnav a{
	color:#fff;
	text-decoration:none;
}

#topnav a:hover{
	color:#ccc;
	text-decoration:none;
}

/* NAV BAR */

/* Remove the navbar's default rounded borders and increase the bottom margin */ 
.navbar {
	margin-bottom: 50px;
	border-radius: 0;
}
    
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 10px;
  text-decoration:none;
}

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.navbar-inverse .navbar-nav>li>a {
    /*color: #9d9d9d;*/
    color: #fff; /* adjusts color of main menu items */
}

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    /*background-color: #080808;*/
    background-color: transparent;
    text-decoration:underline;
}

.navbar-inverse .navbar-nav>.open>a, 
.navbar-inverse .navbar-nav>.open>a:focus, 
.navbar-inverse .navbar-nav>.open>a:hover {
    color: #fff;
    /*background-color: #080808;*/
    background-color: transparent;
    text-decoration:underline;
}

/* ----------------------------
 changes main menu font size */

@media (min-width: 768px){ 
.container-fluid>.navbar-collapse, 
.container-fluid>.navbar-header, 
.container>.navbar-collapse, 
.container>.navbar-header {
    margin-right: 0;
    margin-left: 0;
    font-size: 14px;
}

/* ---------------------------- */


/* MAIN MENU --- centered

    margin-right: 0;
    margin-left: 0;
    font-size: 16px;
    text-shadow: 2px 2px 1px 0 black;
}*/

/* MAIN MENU --- centered*/

.navbar .navbar-nav {
     font-size: 18px;
    }

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
    
    .navbar-nav>li {
        float: none;
        display:inline-block;
	}
}

.navbar-collapse {
	margin:0 auto;
    padding-right: 0px;
    padding-left: 0px;
    overflow-x: visible;
   -webkit-overflow-scrolling: touch;
     /* border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);*/
}

.dropdown-menu .divider{
  height: 1px;
  margin: 0; /*---changed from bootstrap default to minimize space between menu items: margin: 9px 0;*/
  overflow: hidden;
  background-color: #e5e5e5;
}


/*JUMBOTRON (header)*/
    
.jumbotron {
  padding-top: 10px;
  padding-bottom: 10px;
  /*margin-bottom: 30px;*/
  margin-bottom: 0; /* Remove the jumbotron's default bottom margin */ 
  color: inherit;
  background-color: #fff;
  /*background-image:url("../images/header-bkgd.jpg");
  background-repeat: no-repeat;
  background-size:100% auto;*/
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}
.jumbotron > hr {
  border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 6px;
}
.jumbotron .container {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
 .jumbotron {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
  .jumbotron img,
  .jumbotron .img {
    width: 300%;
  }
}

/* ---------------------------------- */
/* OSA Panel */

.panel-primary {
  border-color: #6fcee0;
}
.panel-primary > .panel-heading {
  /*color: #fff;*/
  color: #000000;
  background-color: #6fcee0;
  /*background-color: #114955;*/
  border-color: #6fcee0;
  font-size: 18px;
  font-weight:bold;
}
.panel-body {
  min-height: 300px;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #6fcee0;
  font-size:larger;
}
.panel-primary > .panel-heading .badge {
  color: #6fcee0;
  background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #6fcee0;
}


/* ---------------------------------- */

/* BUTTONS */

.btn-default {
  color: #333;
  background-color: #9fe0f0;
  border-color: #6fcde4;
}
.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
/* ---------------------------------- */

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height*/ 
  margin-bottom: 100px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here 
  height: 70px;*/
  line-height: 16px;
  background-color: #f4f4f4;
  font-size:0.85em;
}

/* Add a gray background color and some padding to the footer */
footer {
	background-color: #f2f2f2;
	padding: 25px;
}

.footer p{
	padding-top: 23px; /* Vertically center the text there */
	float:right;
	text-align:right;
}

@media screen and (max-width: 568px) {
	.footer{
		height: 100px;
}
	.footer p{
		text-align:center; /* center footer text on small screens */
	}
}

/*******************************
* ACCORDION STYLES
* Does not work properly if "in" is added after "collapse".
*******************************/
.panel-group .panel {
	border-radius: 0;
	box-shadow: none;
	border-color: #e7e7e7;
}

.panel-default > .panel-heading {
	padding: 0;
	border-radius: 0;
	color: #3a3a3a;
	background-color: #f4f4f4;
	border-color: #e7e7e7;
}

.panel-title {
	font-size: 105%;
	font-weight: normal;
	padding: 0px;
}

.panel-title > a {
	display: block;
	padding: 15px;
	text-decoration: none;
}

.panel-title > a:hover {
	/*text-decoration: underline;*/
	background-color: #f1f1f1;

}

.more-less {
	float: right;
	/*color: #a4a4a4;*/
	color: #3a3a3a;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
	border-top-color: #EEEEEE;
}

.glyphicon {
  position: relative;

  padding-top: -3px;
  display: inline-block;
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  font-size: 1.5em;
  line-height: 0.8;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------- */

/* CLICKABLE PARAGRAPH / Button
---------------------------------- */

.clickable a  {
  color: #fff;
  font-size:1.1em;
  background: #5F6062;
  border-radius: 4px;
  border: solid 6px #70CDE3;
  padding: 10px;
  text-decoration: none;
  text-align:center;
  line-height:normal;
  float: left;
  width: 100%;
  margin: 0 0 10px 0;
}  

.clickable a:hover  {
  text-decoration: none;
  /*opacity: 0.90;*/
  background: #7d7e81;
  border: solid 6px #7ad7ef;
}
    
/* CLICKABLE Button - Seniors' Month
---------------------------------- */

.button-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.button-container button {
  flex: 1;
  color: #fff;
  font-size: 1.1em;
  background: #7d7e81;
  border-radius: 4px;
  border: solid 6px #7ad7ef;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  line-height: normal;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
  min-width: 150px;
}

/* Hover effect */
.button-container button:hover:not(:disabled) {
  background: #5F6062;
}

/* Disabled state */
.button-container button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Stack buttons on screens smaller than 600px */
@media (max-width: 600px) {
  .button-container {
    flex-direction: column;
  }

  .button-container button {
    width: 100%;
  }
}

/* CLICKABLE PARAGRAPH / Button - WEBCAST
---------------------------------- */

.clickableWebcast a  {
  color: #fff;
  font-size:1.25em;
  /*font-weight:bold;*/
  background: #5F6062;
  border-radius: 4px;
  border: solid 6px #70CDE3;
  /*padding: 10px;*/
  text-decoration: none;
  text-align:center;
  line-height:normal;
  /*float: left;*/
  width: 100%;
  margin: 0 0 10px 0;
  min-height: 100px;
  display:table;
}  

.clickableWebcast a:hover  {
  text-decoration: none;
  /*opacity: 0.90;*/
  background: #7d7e81;
  border: solid 6px #7ad7ef;
}

.clickableWebcast span{
	display:table-cell;
	vertical-align:middle;
}

/* ---------------------------------- 

/* CHUNKS of info (ex: Visiting the House of Assembly - tours) 
---------------------------------- */

.chunk{
	margin-bottom:10px;
	padding: 15px;
	background-color: #f4f4f4;
	border-radius: 4px;
  	border: solid 1px #e7e7e7;
  	vertical-align:middle;
  	/*display: table;*/
 }
 
 .chunk p{
 	font-size:1.2em;
	text-align:center;
	/*display: table-cell;
    vertical-align: middle;*/
}
/* ---------------------------------- */

/* Search Container Styles - website google search 
---------------------------------- */
.searchcontainer td {
	border: 0;
}

.cse {
    width: 60%; /* make sure you don't use inline width */
    margin: 0 auto;
}

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

input.gsc-input{
	height: 28px !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	margin-top: 2px !important;
	font-size: 14px !important;
}

.gsc-input-box {
	height: 32px !important;
}

.gsib_a {
	padding: 0 6px 0 !important;
}
.gsst_a{
	padding-top: 7px !important;
}

/* ---------------------------------- */

@media (max-width: 568px) {
	.partTimeImg{
		display:none; /* hides images on screen sizes smaller than 586px */
	}
}

/* Scroll to Top Button
---------------------------------- */
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #596744; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #788862; /* Add a dark-grey background on hover */
}


/* Auto Number Tables
---------------------------------- */
.css-serial {
  counter-reset: serial-number;  /* Set the serial number counter to 0 */
}

.css-serial td:first-child:before {
  counter-increment: serial-number;  /* Increment the serial number counter */
  content: counter(serial-number);  /* Display the counter */
}



.btn {
  font-size: 12px;
}

/* Vertical Align (Bootstrap 'row' class) <-- used to vertically align grid row contents. 
---------------------------------- */

.vertical-align {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Jump To Content (Accessibility) 
---------------------------------- */

a.skip-2content{
	left:-999px;
	position:absolute;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
	z-index:-999px;
}

a.skip-2content:focus, a.skip-2content:active{
	left:auto;
	top:auto;
	width:30%;
	height:auto;
	overflow:auto;
	margin:10px 35%;
	padding:5px;
	text-align:center;
	font-size:1.2em;
	z-index:999;
	background-color:black;
	color:white;
}

/*--- BREADCRUMBS ---*/

.breadcrumb {
  /*padding: 8px 15px; <---Bootstrap default*/
  padding: 0px;
  margin-bottom: 20px;
  list-style: none;
  /*background-color: #f5f5f5; <---Bootstrap default*/
  background-color: #ffffff;
  border-radius: 4px;
  font-size: 0.85em;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}


/* "NEW!" font styling
---------------------------------- */
.notice{
	color: red;
	font-weight: bold;
	font-variant: small-caps;
	font-size: 75%;
	vertical-align: top;
}

/* Photo Gallery styling
---------------------------------- */
.lightbox img{
	border: solid 3px #5f6062;	
}