/* CSS Document */

html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}
body{margin:0px;}

video {
/* override other styles to make responsive */
width: 100%    !important;
height: auto   !important;
}

/* Headings */
h1{font-size:36px; color: #1b5e20;}
h2{font-size:30px;}
h3{font-size:24px;}
h1,h2,h3{font-family: 'Cabin', sans-serif;font-weight:400;margin:10px 0;}

/* Links */
a:link, a:visited {color: #0d4d7c;}
a:hover {color: #000;}
			
/* My Navigation Menu TOP */			
.my-nav {
	width: 100%;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	position: relative;
	border-bottom: 2px solid #283744;
	margin:0px;
	padding:0px;
}
.my-nav ul {
	height: 40px;
	padding: 0px;
	margin:auto;
	width:600px;
}
.my-nav li {
	display: inline;
	float: left;
	background-color:#f8f8f8;
}
.my-nav a {
	color: #000;
	display: inline-block;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	/* text-shadow: 1px 1px 0px #283744; */
}
.my-nav li a {
	border-right: 1px solid #576979;			
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.my-nav li:first-child a {
	 border-left: 1px solid #576979;
}
.my-nav a:hover {
	background-color: #898989;
	color: #FFF;
}
.my-nav a.active {
	background-color: #1b5e20;
	color: #fff;
	font-weight: bold;
}		
.my-nav a#pull {
	display: none;
}

/*Styles for screen 640px and lower*/
@media screen and (max-width: 640px) {
	.my-nav { 
		height: auto;
		border-bottom: 0;
	}
	.my-nav ul {
		width: 100%;
		display: none;
		height: auto;
	}
	.my-nav li {
		display: block;
		float: none;
		width: 100%;
	}	
	.my-nav li a {
		border-bottom: 1px solid #576979;
		border-left: 1px solid #576979;
	}
	.my-nav li:first-child {
		border-top: 1px solid #576979;
	}			
	.my-nav a {
		text-align: left;
		width: 100%;
		text-indent: 25px;
		padding: 0px;
	}			
	.my-nav a#pull {
		display: block;
		background-color: #333;
		color: #fff;
		width: 100%;
		position: relative;
		font-weight: bold;
	}
	.my-nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}			
}

/* My Navigation Menu RIGHT */
.my-nav-right ul {
	list-style-type: none;
	margin: 0;
	margin-bottom: 40px;
	padding: 0;
	background-color: #f8f8f8;
}

.my-nav-right li a {
	display: block;
	color: #000;
	padding: 8px 16px;
	text-decoration: none;
}

.my-nav-right li a.active {
	background-color: #388e3c;
	color: white;
}

.my-nav-right li a:hover:not(.active) {
	background-color: #1b5e20;
	color: white;
}

.my-nav-right-heading{background: #333; color: #fff; line-height:40px; padding-left:14px;}

/* My Navigation Menu Curriculum */
.my-nav-curriculum ul {
	padding: 0;
	margin:auto;
	width:100%;
	list-style-type: none;
}
.my-nav-curriculum li {
	background-color: #ccc;
}
.my-nav-curriculum a {
	color: #000;
	display: block;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
	text-decoration: none;
	line-height: 40px;
}
.my-nav-curriculum a:hover {
	background-color: #0d4d7c; /* or #555*/
	color: #FFF;
}
.my-nav-curriculum a.active {
	background-color: #333;
	color: white;
}		
/*Styles for screen 960px and lower*/
@media screen and (max-width: 960px) {
	.my-nav-curriculum { 
		height: auto;
		border-bottom: 0;
	}
	.my-nav-curriculum ul {
		width: 100%;
		display: none;
		height: auto;
	}
	.my-nav-curriculum li {
		display: block;
		float: none;
		width: 100%;
	}	
	.my-nav-curriculum li a {
/*				border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;*/
	}
	.my-nav-curriculum a {
		text-align: left;
		width: 100%;
		text-indent: 25px;
		padding: 0px;
	}
}



/* ----------- My Navigation TOP NAV WITH DROPDOWN ---------------- */

/* topnav Header */
.topnav-container{width:100%; max-width:1200px; margin:0 auto; padding:0px;}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 16px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 860px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 860px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}






/* ----- TAB PAGES ------- */
/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
/* Style the links inside the tab */
div.tab a {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 16px 16px;
    transition: 0.3s;
}
/* Change background color of links on hover */
div.tab a:hover {
    background: #1b5e20;
	color: #FFF;
}
/* Create an active/current tablink class */
div.tab a.active {
    background: #388e3c; color: white;
}
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Pagination */
.pagination-container {
    text-align: center;
}
.pagination {
    display: inline-block;
}
.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 4px 4px;
}
.pagination a.active {
    background-color: #4b91cc;
    color: white;
    border: 1px solid #4b91cc;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
.pagination a.disable {
    background-color: #ddd;
    color: white;
    border: 1px solid #ddd;
}

/* Images */
.img-logo{margin:10px auto; padding:0px;}
.img-size{width: 100%; margin:0 auto; padding:0px;}

/* Read more */
.read-more-container{ margin: 30px 0px;}
.read-more{border-radius:4px; padding:10px;}
a.read-more{text-decoration:none;color:#fff;background-color:#283744;}
a.read-more:hover {text-decoration: underline;}


/* Container */
/*.clear-float-left {clear: left;}*/	
.container{width:100%; max-width:1200px; margin:0px auto; padding:0px;}

/* Header */
.header-container{width:100%; max-width:1200px; margin:0 auto; margin-bottom: 20px; padding:0; text-align:center; background-color:#f8f8f8; border-bottom: 1px solid #e0e0e0;}

/* Content Area */
.content-container{width:100%; max-width:1200px; margin:0px auto; padding:0px;}	
.col-container::after {content: ""; clear: both; display: block;}		
.col-sides {width: 16%; float: left;}

/* .col-content-old {width: 60%; float: left; padding-bottom:1%; padding-left:4%; padding-right:4%; padding-top:0; min-height: 800px;} */

.col-content {width: 80%; float: left; padding-bottom:1%; padding-right:4%; padding-top:0; min-height: 800px;}

.content-card{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);margin-top: 20px; margin-bottom: 20px; padding: 20px;}
.content-card h2 a{text-decoration:none; color: #000;}
.content-card h2 a:hover{text-decoration:underline; color: #0d4d7c;}
.content-card-weekly{margin-top: 0px; margin-bottom: 20px; padding: 20px; border: 1px solid #e0e0e0; border-left: 10px solid #e0e0e0;}
.content-card-weekly p{font-style:italic;}

/* Footer */
.myfooter {clear:both; width:100%; max-width:1200px; margin:0 auto;border-top: 1px solid #e0e0e0; text-align:center;}

/*  Two Column   */
.col-two {width: 46%; float: left; margin: 0px 1%; padding:0px 1%;}

/*  Three Column   */
.col-three {width: 30.67%; float: left; margin: 0px 1%;}

/* Newsletter grid */
.col-newsletter {width: 23%; float: left;}


/* Bullet point */
.bullet-container li{padding-bottom:10px;}

/* Table */
.table-container {overflow-x:auto; padding: 0px; margin: 0px; width: 100%;}
table {border-collapse: collapse;border-spacing: 0;border: 1px solid #ddd; width: 100%;}
th, td {border: none;text-align: left;vertical-align: top;padding: 8px;}
th{font-weight:bold;}
tr:nth-child(even){background-color: #f2f2f2;}

/* Contact Us Map */
#map {height:400px;width: 100%;} 

/* Contact Us Form */
.form {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=password], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=submit] {
    width: 100%;
    background-color: #4b91cc;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color: #283744;
}

/* Form Button*/
button{
    width: 100%;
    background-color: #4b91cc;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover{
	background-color: #283744;
}

/* Horizontal Rule / Line */
hr.hr-style {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 24px;
margin-bottom: 20px;
}				

/* Responsive Layout */
@media only screen and (max-width: 420px){
	/*.img-logo{width: 100%; margin:10px auto; padding:0px;}*/
	.col-content{ min-height:0px;}
	.col-newsletter {width: 100%;}
	.col-two {width: 100%;}
	.col-three {width: 100%;}
}

@media only screen and (max-width: 960px){
	body{margin:0px; padding:0px 12px;}
	.img-size{width: 100%; margin:0px; padding:0px;}
	.col-container, .col-sides, .col-content, content-card {width: 100%;}
	.col-content{width:100%; margin:0px; padding:0px;}
	.content-card-weekly{margin-top: 20px;}
	div.tab a{width: 100%;}
}

@media screen and (max-width: 640px) {
	.img-logo{width: 100%; margin:10px auto; padding:0px;}
}








/* -------------------- NOT BEING USE  ---------------- */		
/* ----------- My Navigation Menu LEFT ---------------- */			
.my-nav-left {
	height: 40px;
	width: 100%;
	position: relative;
	margin:0px;
	padding:0px;
}
.my-nav-left ul {
	padding: 0;
	margin:auto;
	width:100%;
	list-style-type: none;
	background-color: #f8f8f8;
}

.my-nav-left a {
	color: #000;
	display: block;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
	text-decoration: none;
	line-height: 40px;
}
.my-nav-left li a {
	/*border-bottom: 1px solid #576979;*/
}
.my-nav-left a:hover {
	background-color: #1b5e20;
	color: #FFF;
}
.my-nav-left a.active {
	background-color: #388e3c;
	color: white;
}

.my-nav-left-heading{background: #333; color: #fff; line-height:40px; padding-left:14px;}

.my-nav-left a#pullLeft {
	display: none;
}

/*Styles for screen 960px and lower*/
@media screen and (max-width: 960px) {
	.my-nav-left { 
		height: auto;
		border-bottom: 0;
	}
	.my-nav-left ul {
		width: 100%;
		display: none;
		height: auto;
	}
	.my-nav-left li {
		display: block;
		float: none;
		width: 100%;
	}	
	.my-nav-left li a {
/*				border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;*/
	}
	.my-nav-left a {
		text-align: left;
		width: 100%;
		text-indent: 25px;
		padding: 0px;
	}			
	.my-nav-left a#pullLeft {
		display: block;
		background: #333; color: #fff;
		width: 100%;
		position: relative;
		font-weight: bold;
	}
	.my-nav-left a#pullLeft:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: block;
		position: absolute;
		right: 15px;
		top: 10px;
	}			
}

#red{background-color:red; color:white;}
#green{background-color:green; color:white;}
#blue{background-color:blue; color:white;}
#orange{background-color:orange; color:black;}