/**********************************
***********************************
*******  SITEWIDE CSS FILE   ******
***********************************
**********************************/



/**********************************
*****  ROOT VARIABLES
**********************************/
:root 
	{
	/*     color pallet     */
	--black: #000000;
	--dark: #093299;
	--medium: #3F6ED7;
	--light: #A0D6EB;
	--contrast: #D954CD;
	--bright: #27CAFE;
	--highlight: #F9F6C7;
	--white: #FFFFFF;
	}



/**********************************
*****  COLOR PALLET RULES
**********************************/
.color-black
	{
	color: var(--black);	
	}	
.color-dark
	{
	color: var(--dark);	
	}
.color-medium
	{
	color: var(--medium);	
	}	
.color-light
	{
	color: var(--light);
	}	
.color-contrast
	{
	color: var(--contrast);	
	}	
.color-bright
	{
	color: var(--bright);	
	}
.color-highlight
	{
	color: var(--highlight);	
	}	
.color-white
	{
	color: var(--white);	
	}	


.background-black
	{
	background-color: var(--black);
	color: var(--white);
	}	
.background-dark
	{
	background-color: var(--dark);	
	}
.background-medium
	{
	background-color: var(--medium);	
	}	
.background-light
	{
	background-color: var(--light);	
	}	
.background-contrast
	{
	background-color: var(--contrast);	
	}	
.background-bright
	{
	background-color: var(--bright);	
	}
.background-highlight
	{
	background-color: var(--highlight);	
	}	
.background-white
	{
	background-color: var(--white);	
	}	
	

	
	

/**********************************
*******  GRID LAYOUT RULES
**********************************/
* {
    box-sizing: border-box;
    font-family: sans-serif;
	}

body
	{
	margin: 0;
	padding: 0;
	background: var(--white);
	}

main
	{
	padding: 1em;
	}

.banner
	{
	grid-area: banner;
	background: var(--black) url("../pogr8IMGS/mainBannerImg.png") no-repeat center;	
	background-size: 100%;
	height: 300px;
	padding: .5em;	
	}


.pNav
	{
	grid-area: pNav;
	position: fixed;
	top: 0px;
	left: 4px;
	z-index: 10;
	}
	

.grid-container
	{
	display: grid;
	grid-template-areas: 
	  'banner banner banner banner banner banner banner banner' 
	  'pNav pNav pNav pNav pNav pNav pNav pNav' 
	  'left main main main main main main main' 
	  'footer footer footer footer footer footer footer footer';
	grid-column-gap: 10px;
	} 


.left, .main
 	{
	padding: 10px;
	height: 300px; /* Should be removed. Only for demonstration */
	}


.left
	{
	grid-area: left;
	}


.main
	{
	grid-area: main;
	}


.footer 
	{
	grid-area: footer;
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
	}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'banner banner banner banner banner banner banner' 
      'pNav pNav pNav pNav pNav pNav pNav'       
      'left left left left left left left' 
      'main main main main main main main' 
      'footer footer footer footer footer footer footer';
  }
}  	



/**********************************
***** FLOAT CLEAR FIX RULE ********
**********************************/
.clearfix
	{
	overflow: auto;	
	}



/**********************************
*******  MAIN BANNER RULES   ******
**********************************/
.logo
	{
	max-width: 200px;
	position:relative;
	top: 80px;
	left: 10px;
	float: left;
	height: auto;
	}

.slogan_container
	{
	display: table;
	height: 50px;
	position: relative;
	top: 230px;
	}

.slogan
	{
	display: table-cell;
	color: var(--white);
	font-weight: bold;
	font-size: large;
	vertical-align: middle;
	}


@media screen and (max-width: 600px)
	{
	.banner
		{
		background-size: 122%;
		background-position: bottom center;
		}
	.logo
		{
		width: 120px;
		top: 165px;
		left: 3px;
		}
	.slogan_container
		{
		padding: .25em;
		height: 60px;
		top: 210px;
		}
	.slogan
		{
		font-size: medium;
		}
	}



/**********************************
*******  TEXT RULES  *************
**********************************/
h1, h3, h5
	{
	color: var(--dark);
	margin-bottom:0;
	}
h2, h4, h6
	{
	color: var(--medium);
	margin-bottom:0;
	}
	
	

p
	{
	color: var(--black);
	}


.no-margin /*to eliminate margins for text items*/
	{
	margin:0;
	}

strong
	{
	color: var(--dark);
	font-size: large;
	}

em
	{
	color: var(--contrast);
	font-size: large;
	}

code
	{
	font-size: 1.1em;
	font-weight: bold;
	color: green;
	background-color: var(--highlight);
	}







/******  Links ******/
a:link
	{
	color:var(--dark);
	}

a:visited
	{
	color:var(--contrast);
	}

a:hover
	{
	color:var(--medium	);
	}

a:active
	{
	color:var(--light);
	}






/**********************************
*******  IMG RULES   *********
**********************************/
img
	{
	width: 100%;
	height: auto;
	border-radius: 15px;
	}






/**********************************
*******  MAIN FOOTER RULES  *******
**********************************/

.mainFooter
	{
	display: table;
	margin:auto;
	margin-bottom: 1em;
	font-family: ariel, helvetica, sans-serif;
	font-size: small;
	}
.footNavigation
	{
	margin-left: 1em;
	}






/**********************************
******* PRIMARY NAVIGATION RULES
**********************************/

	
.pNav__item
	{
	display: inline-block;	
	background-color: var(--black);
	font-size: 14px;
	padding: .2em;
	margin-right: 2px;
	border-radius: 8px;
	}
	
.pNav a
	{
	color: var(--white);
	text-decoration: none;
	}
	
.pNav a:hover
	{
	color: var(--highlight);
	background-color: var(--medium);
	}

/*
@media screen and (max-width: 600px)
	{
	.pNav__item
		{
		display: block;
		text-align: center;
		}
	}
*/


/**********************************
*****  SECONDARY NAVIGATION RULES
**********************************/

.secondaryNavigation
	{
	background-color: var(--highlight);
	width:100%;
	}
	
.secondaryNavigation a
	{
	text-decoration: none;
	}
	
.secondaryNavigation a:hover
	{
	background-color: var(--light);
	}
	
.secondaryNavigation__item
	{
	display: inline-block;
	padding: 1em;
	}
	


@media screen and (max-width: 600px)
	{
	.secondaryNavigation__item
		{
		display: block;
		text-align: center;
		}
	}





/**********************************
*****  TERTIARY NAVIGATION RULES
**********************************/
.tertiaryNavigation
	{
	width: 100%;
	background-color: var(--highlight);
	overflow: hidden;
	}


/* Links inside the navbar */
.tertiaryNavigation a 
	{
	display: inline-block;
   float: left;
   font-size: 16px;
   color: $dark;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
  	}


/* The dropdown container */
.dropdown 
	{
   float: left;
   overflow: hidden;
   background-color: var(--highlight);
	}

/* Dropdown button */
.dropdown .dropbtn
	{
   font-size: 16px; 
   border: none;
   outline: none;
   color: $dark;
   padding: 14px 16px;
   background-color: var(--highlight);
   font-family: inherit; /* Important for vertical align on mobile phones */
   margin: 0; /* Important for vertical align on mobile phones */
 	}

/* Add a light background color to tertiaryNavigation links on hover */
.primaryNavigation2 a:hover, .dropdown:hover .dropbtn
	{
	background-color: var(--light);
	}

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

/* Links inside the dropdown */
.dropdown-content a 
	{
	float: none;
	color: var(--dark);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	}

/* Add a highlight background color to dropdown links on hover */
.dropdown-content a:hover
	{
	background-color: var(--highlight);
	}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content 
	{
	display: block;
	}




/**********************************
*******  TABLE RULES  *********
**********************************/

.linedTable table, th, tr, td
	{
	border: solid 1px var(--black);
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	text-align: center;
	}
	


.colorPallet__table table, th, td
	{
	padding: .5em;
	border: none;
	}




/**********************************
*******  PAGE SPECIFIC RULES
**********************************/

.hiddenSection
	{
	background-color: var(--highlight);
	margin-bottom: 1em;
	}
	
.icons
	{
	width:50px;
	float:left;
	margin-right: 4px;	
	}



.map
	{
	width: 400px;
	height: auto;
	border:none;
	}

@media screen and (max-width: 600px)
	{
	.map
		{
		width: 100%;
		height: auto;
		}
	}

	





/**********************************
*******  CAROUSEL SLIDE SHOW RULES
***********************************
*** Taken from W3C code examples
**********************************/

/* Carousel container */
.carousel-container {
  max-width: 450px;
  position: relative;
  margin-right: auto;
}


/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "prev button" to the right */
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: var(--white);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: var(--white);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}






/**********************************
*******  ROTATING SLIDE SHOW RULES
***********************************
*** Taken from W3C code examples
**********************************/
/* Rotate container */
.rotate-container {
  max-width: 450px;
  position: relative;
  margin-right: auto;
}


/* Hide the images by default */
.myPics {
    display: none;
}


/* Caption text */
.text {
  color: var(--white);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: var(--white);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  right: 20px;
}

/* The dots/bullets/indicators */
.bullet {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


.thisone, .bullet:hover {
  background-color: #717171;
}



/* Fading animation */
.change {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}