@charset "UTF-8";
/* CSS Document */
/*
Used colors
success green #319616
success green:hover #45c423
upload blue #165b96
upload blue:hover #4297de
failure red #c50000
failure red fill (lighter red) #f3b7b7
common orange #f05323
common grey #202324
Premier Yellow 2022 #ffc42c
Premier Orange 2022 #f05323
Premier Dark Grey 2022 #202324
*/
body {
	font-variant-ligatures: no-common-ligatures;
}
a.whiteLink {
	color: #FFF;
	font-weight: bold;
	font-size: 18px;
	text-decoration: underline;
}
a.whiteLink:hover {
	color: #FFF;
	font-weight: bold;
	font-size: 18px;
	text-decoration: none;
}
/* Add background image to logo bar 
div#headerSecondBar {
    background: url(../images/2018_christmas.png) center 6px no-repeat;
    background-color: #2a2e2f;
    padding: 10px 0px;
}
*/
/*Fix width and center text on dynamic announcement banner*/
div.column1.announcementBackground {
	width: 100%;
	text-align: center;
}

/********** PIQ Side Link ********/
#piqContainer {
	position: fixed;
	top: 214px;
	right: 0px;
	width: 80px;
	padding: 10px 4px 10px 10px;
	border-radius: 10px 0px 0px 10px;
	background-color: #444;
	z-index: 999;
/*	Transition timing set for hover animation below */
	transition: 0.25s;
}
#piqContainer:hover {
	background-color: #666;
	box-shadow: 0px 0px 10px 0px #222;
	width: 90px;
}

#piqContainer img {
	position: relative;
	top: 0px;
	left: -2px;
	width: 70px;
	height: auto;
}
#topPiqText, #bottomPiqText {
	font-size: 14px;
	color: white;
	font-weight: 400;
	max-width: 80px;
}
/********** VFO Side Link ********/
#vfoContainer {
	position: fixed;
	top: 400px;
	right: 0px;
	width: 80px;
	padding: 10px 4px 10px 10px;
	border-radius: 10px 0px 0px 10px;
	background-color: #444;
	z-index: 999;
/*	Transition timing set for hover animation below */
	transition: 0.25s;
}
#vfoContainer:hover {
	background-color: #666;
	box-shadow: 0px 0px 10px 0px #222;
	width: 90px;
}
#vfoContainer img {
	position: relative;
	top: 0px;
	left: -2px;
	width: 70px;
	height: auto;
}
#topVFOText, #bottomVFOText {
	font-size: 14px;
	color: white;
	font-weight: 400;
	max-width: 80px;
}
/******************** Common article styles for adding article pages **************************/
div.articleHolder {
    text-align: left;
    width: 100%;
    margin: auto;
}
div.article {
    width: 95%;
    margin: auto;
    max-width: 800px;
}

    
div.youTubeResponsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    /*background-color: red;  */ 
}
div.youTubeResponsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}


/******************** END Common article styles for adding article pages **************************/

/* Support Premiers Movember team */
#specialAnnouncement {
	/* Orange
	background-color: #f05323;
	color: #fff;
	*/
	/* Yellow */
	background-color: #f7d50a;
	color: #000;
	/* Light Green */
	background-color: #b2e291;
	color: #2b4f12;
	width: 100%;
	max-width: 1340px;
}

#specialAnnouncement div {
	max-width: 1340px;
	margin: 0px auto;
	position: relative;
	overflow: auto;
	text-align: center;
}
#specialAnnouncement h2 {
	text-align: center;
	padding:14px 12px 8px 12px;
}
#specialAnnouncement h4 {
	text-align: center;
	padding: 0px 12px 12px 12px;
	margin: auto;
}

#specialAnnouncement div a h2 {
	text-align: left;
	padding:14px 0px;
	/*margin: 0px 0px 0px 2%;*/ 
	width: 50%;
	/*float: left;*/
	display: inline-block;	
}
#specialAnnouncement a {
	color: #FFF;
	text-decoration: underline;
}
#specialAnnouncement div a img {
	/*margin: 0px 2% 0px 0%;
	height: auto;
	width: 40%;*/
	max-height: 40px;
	max-width: 156px;
	/*float: left;*/
	display: inline-block;
	vertical-align: -12px;
}
#specialAnnouncement div a:hover h2 {
	color: #2a2e2f;	
}
.antimicrobial {
    background: #f7d50a url(../images/banner-protective-coatings.jpg) no-repeat center center/cover;
}
#bannerText {
	text-align: center;
	padding:20px 0px;
	margin: 0;
	color: #2a2e2f;
}
/* div to hold click button for summer students banner on home page */
#specialClick {
	position:absolute;
	top: 0px;
	left: 0px;
	padding: 20px 40px;	
}
/* REMEMBERANCE DAY ANNOUNCEMENT STYLES */
.remembranceDay {
	/* Remembrance day poppies */
	background-image: 
		url(images/corner_poppies_left.png),
		url(images/corner_poppies_right.png);
	background-position: 
		bottom left,
		bottom right;	
	background-repeat: no-repeat;
}
.remembranceDay h4 {
	max-width: 400px;	
}
/* CHRISTMAS BREAK ANNOUNCEMENT STYLES */
#xmasAnnouncement {
	/* Christmas Holly */
	background-image: 
		url(images/corner_holly_left.png),
		url(images/corner_holly_right.png);
	background-position: 
		4% center,
		96% center;	
	background-repeat: no-repeat;	
	background-color: #b2e291;
	color: #2b4f12;
	text-align: center;
}
#xmasAnnouncement h4 {
	color: #2b4f12;
	text-decoration: none;
	padding: 10px;
	font-size: 16px;
	margin: 0;
}
/******************** Add or Remove Seasonal Background images **************************/

#headerSecondBar {
	/* Original color burst image
	background-image: url(../images/nav-img.png); 
	background-repeat: no-repeat;
	*/
}
#headerSecondBar {
	/* Remembrance Day 
	background-image: url(../images/poppies.png); 
	background-position: 36%;
	background-repeat: no-repeat;
	*/
}
div.mfp-content {
	margin-top: 210px;
	margin-bottom: 100px;
}
@media all and (max-width:920px) {
#specialClick {
		position: relative;
		padding: 12px;
		text-align: center;
	}
#bannerText {
	padding:20px 0px 0px 0px;
}

}

@media all and (max-width:768px) {
.remembranceDay h2, .remembranceDay h4 {
	width: 50%;
	margin: auto;	
}
#headerSecondBar {
		/* Season image here as well
		background-image: url(../images/nav-img-m.png); 
		background-image: url(../images/poppies.png);
		*/
	}
}

/******************** CONTACT PAGE Job Postings **************************/

div.column3 div.jobDetails {
	padding: 6%;
	margin: 2%;
	width: 84%;
	display: none;	
}
div.column2 div.jobDetails {
}
div.column1 div.jobDetails {
	padding: 0 6% 2% 6%;
	margin: 2%;
	width: 84%;
	display: none;	
}
div.jobDetails h2 {
	text-align: left;
}
div.jobDetails p {
	margin: 10px 0px;
}
.add30px {
	padding-top: 30px;	
}
.jobPosition {
	padding-top: 16px;
	padding-bottom: 16px;	
	border-bottom: 2px solid #ffc42c;
}
div.rollButtonOrange, div.rollButtonYellow {
	background-color: #2a2e2f;
    border-radius: 30px;
    padding: 10px 20px;
    text-align: center;
    margin: 0 auto;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family:Roboto, sans-serif;
	font-size:14px;
	font-weight:800;
	letter-spacing: 2px;
	width: 150px;
}
div.rollButtonOrange:hover, div.rollButtonYellow:hover {
	color: #2a2e2f;
	background-color:#fff;
}
/******************** CONTACT PAGE Job Postings **************************/

/******************** CORONA MESSAGE **************************/

#tempAlertContainer {
	background-color: #ffc42c; /* Premier Yellow */
	background-color: #d8ffcd; /* Light green */
	color: #202324;
	padding: 2px 14px;
	cursor: pointer;
}
#tempAlertContainer a {
		color: #202324;
		text-decoration: none;
}
p#tempAlertBut {
	margin: 2px;
	cursor: pointer;
	font-weight: 900;
}
p#tempAlertNote {
	display: none;
	padding: 0px 20px;
	cursor: pointer;
}


@media all and (max-width:768px) {
#tempAlertContainer {
	padding: 2px 10px;
	}
}


/******************** Styles for rotating fish for live fish cam link on Home Page **************************/

#fishContainer {
	background: transparent url('../images/fishButton.png') no-repeat 280px 20px;
	position: absolute;
	top: 0px;
	right: 10px;
	width: 400px;
	height: 420px;
	overflow: hidden;
	z-index: 1000;
}
#fishSpin {
	/*background-color: yellow;*/
	padding-left: 20px;
	width: 680px;
	height: 173px;
	-webkit-animation: spin 13s linear infinite;
	-moz-animation: spin 13s linear infinite;
	animation: spin 13s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

/******************** Styles for YouTube Video container **************************/

#fishVideoContainer {
	border-top: 30px solid #000;
	border-bottom: 30px solid #000;
	padding-bottom: 60%;
	/*background-color: yellow;*/
	position: relative;
	max-width: 1240px;
	margin: auto;
}


/******************** End styles for rotating fish for live fish cam link **************************/





/******************** Start styles for apparel promo boxes **************************/
.darkGrey {
	color: #202323;
}
.orange {
	color: #f05322;
}
.yellow {
	color: #ffc42c;
}
#adContainer {
	background-color: #fff;
	width: 100%;
	max-width: 1350px;
}
#adPart1 {
	color: white;
	background-color: #2a2e2f;
	padding: 3%;
	float: left;
	width: 44%;
}
#adPart1 h1 {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 16px;
	line-height: 1.1em;
	text-align: left;
}
#adPart1 p {
	text-align: left;
	margin-bottom: 16px;
	line-height: 1.1em;
}
#adPart1 img {
	text-align: center;
	margin: 10px 0px;
	width: 100%;
}
.apparelBut {
	text-align: center;
	margin-top: 20px;
}
#adPart2container{
	text-align: center;
}
#adPart2 {
	text-align: center;
	background-image: url("../images/temp/NorthFaceJacket.png"), url("../images/temp/Hi-Vis-Jacket.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left 40%, right 40%;
	background-size: 38% auto, 38% auto;
	background-color: #fff;
	padding: 10px 0px 0px 0px;
	font-family: omnes-pro, sans-serif;
	/* 
	Overflow hidden creates what's called block formatting context (BFC).
	Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.
	*/
	overflow: hidden;
}
#adPart2 h1 {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.1em;
}
#brandLogos  {
	width: 20%;
	margin: auto;
	text-align: center;
}
#brandLogos  img {
	max-width: 120px;
	margin: auto;
	display: block;
	width: 80%;
	height: auto;
	padding-bottom: 10px;
}
@media screen and (max-width: 1200px){
#adPart2container {
	padding-top: 3%;
}
}
@media screen and (max-width: 930px){
#adPart2container {
	padding-top: 8%;
}
}
/*  SWITCH TO 100% WIDTH STACKED */
@media screen and (max-width: 800px){
#adPart1 {
	width: 94%;
}
#adPart1 img {
	margin-top: 0px;
}
#adPart2 {
	width: 94%;
	position: relative;
}
}
/******************** End styles for apparel promo boxes **************************/

/* re-color progress bar on upload for to make more visible. */
span.progress-meter-front {
	background-color: #165b96 !important;
}