/*
	Theme Name: Yellowknife
	Theme URI: http://matthewhollett.com/design/
	Description: Yellowknife is a responsive WordPress theme, custom designed for Toxic Legacies Project by Matthew Hollett.
	Version: 1.0
	Author: Matthew Hollett
	Author URI: http://matthewhollett.com/
*/



/* Google Web Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Lora:400,400italic,700,700italic|Expletus+Sans:600);



*, *:after, *:before { /* global box-sizing */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
}
html, body {min-height: 100%;}
body {
 font-family: 'Lora', 'Georgia', 'Times New Roman', serif; color: #222;
 background: #fff url('images/home-aerial.jpg') top center no-repeat; background-size: cover; background-attachment: fixed;
}
a {text-decoration: none;}
a:link, a:visited {color: #cc7227;}
a:hover, a:active {color: #5b9dce; outline: 0;}
img {max-width: 100%; height: auto;}
iframe {max-width: 100%;}
a img {border: none;}
a:focus, input:focus {outline: 0;}

ul {list-style: none; margin: 0; padding: 0;}
ul li {margin: 0; padding: 0 0 0 21px;}

h1, h2, h3, h4, h5, h6 {line-height: 1.2;}
h1:first-child {margin-top: 0;}
.clear {font-size: 0; height: 0; clear: both;}
.smallcaps {font-size: 0.9em;}

.logo, .nav, .button, .emm-paginate, form label, #wpadminbar {
	-webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}



/* top bar and navigation menu */
.top-bar {position: relative; width: 1040px; margin: 0 auto;}

.top-nav {margin: 0; padding: 0;}
.top-nav ul {
 list-style: none; margin: 0; padding: 0 20px;
 background: rgba(91, 157, 206, 0.8); border-top: 1px #44759a solid; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
}
.top-nav ul li {
 display: inline-block; margin: 0 0 1px 0; padding: 0; font-size: 1.2em; line-height: 1.2;
 font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; font-stretch: condensed;
}
.top-nav ul li a, .top-nav ul li span {display: block; width: 100%; margin: 0; padding: 7px 12px;}
.top-nav ul li a:link, .top-nav ul li a:visited {color: #fff;}
.top-nav ul li a:hover, .top-nav ul li a:active {color: #222; outline: 0;}
.top-nav ul li.current_page_item>a {color: #222;}

.top-nav ul li ul {
 display: none !important; position: absolute; margin: -1px 0 0 0; padding: 0.5em 0 0.75em 0;
 font-size: 0.95em; background-color: #eee; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); z-index: 1000;
}
.top-nav ul li ul li {display: block; margin: 0; padding: 0;}
.top-nav ul li ul li a {padding: 8px 16px;}
.top-nav ul li:hover ul {display: block !important;}
.top-nav ul li ul li ul {
 position: relative; margin: -0.25em 0 0 0; padding: 0 0 0 0.75em; font-size: 0.92em;
 background-color: transparent; box-shadow: none; z-index: 1;
}
.top-nav ul li ul li ul li a {padding-top: 3px; padding-bottom: 3px;}
.top-nav ul li ul li ul li a::before {display: inline-block; content: '\2022'; vertical-align: top; margin-right: 5px;}



/* wrapper and header */
.wrapper {
 position: relative; width: 1040px; margin: 0 auto; padding: 28px 30px 30px 30px;
 box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
 background: -moz-linear-gradient(top, rgba(204,208,223,0.8) 0%, rgba(255,255,255,0.8) 33%, rgba(255,255,255,0.8) 65%, rgba(214,221,221,0.8) 100%);
 background: -webkit-linear-gradient(top, rgba(204,208,223,0.8) 0%,rgba(255,255,255,0.8) 33%,rgba(255,255,255,0.8) 65%,rgba(214,221,221,0.8) 100%);
 background: linear-gradient(to bottom, rgba(204,208,223,0.8) 0%,rgba(255,255,255,0.8) 33%,rgba(255,255,255,0.8) 65%,rgba(214,221,221,0.8) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccccd0df', endColorstr='#ccd6dddd',GradientType=0 );
}

.header {position: relative; min-height: 30px; margin-bottom: 30px;}
.logo {
 float: left; width: 20.5%; height: 200px;
 background: url('images/toxic-logo.jpg') top left no-repeat; background-size: contain;
}
.logo a {display: block; width: 100%; height: 100%;}
.byline {
 float: left; width: auto; max-width: 430px; margin: 9px 0 0 4.5%; color: #555; font-size: 1.1em; line-height: 1.2;
 font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; font-stretch: condensed;
}
.byline p {margin-bottom: 0;}
.byline-short {display: none;}



/* sidebar */
.sidebar {float: left; width: 20.5%; margin: 0;}

.sidebar-nav ul {list-style: none; margin: 0; padding: 0;}
.sidebar-nav ul li {
 display: block; margin: 0 0 1px 0; padding: 0; font-size: 1.2em; line-height: 1.2;
 font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; font-stretch: condensed;
}

.sidebar-nav ul li:nth-child(1), .home-nav ul li:nth-child(1) {background-color: rgba(158, 123,  54, 0.5); border-right: 10px rgba(158, 123,  54, 0.7) solid;}
.sidebar-nav ul li:nth-child(2), .home-nav ul li:nth-child(2) {background-color: rgba(122,  45, 122, 0.5); border-right: 10px rgba(122,  45, 122, 0.7) solid;}
.sidebar-nav ul li:nth-child(3), .home-nav ul li:nth-child(3) {background-color: rgba( 74,  86, 142, 0.5); border-right: 10px rgba( 74,  86, 142, 0.7) solid;}
.sidebar-nav ul li:nth-child(4), .home-nav ul li:nth-child(4) {background-color: rgba(127,  47,  63, 0.5); border-right: 10px rgba(127,  47,  63, 0.7) solid;}
.sidebar-nav ul li:nth-child(5), .home-nav ul li:nth-child(5) {background-color: rgba( 55,  95,  99, 0.5); border-right: 10px rgba( 55,  95,  99, 0.7) solid;}
.sidebar-nav ul li:nth-child(6), .home-nav ul li:nth-child(6) {background-color: rgba( 90,  61, 153, 0.5); border-right: 10px rgba( 90,  61, 153, 0.7) solid;}
.sidebar-nav ul li:nth-child(7), .home-nav ul li:nth-child(7) {background-color: rgba(158, 123,  54, 0.5); border-right: 10px rgba(158, 123,  54, 0.7) solid;}
.sidebar-nav ul li:nth-child(8), .home-nav ul li:nth-child(8) {background-color: rgba(122,  45, 122, 0.5); border-right: 10px rgba(122,  45, 122, 0.7) solid;}
.sidebar-nav ul li:nth-child(9), .home-nav ul li:nth-child(9) {background-color: rgba( 74,  86, 142, 0.5); border-right: 10px rgba( 74,  86, 142, 0.7) solid;}
.sidebar-nav ul li:nth-child(10), .home-nav ul li:nth-child(10) {background-color: rgba(127,  47,  63, 0.5); border-right: 10px rgba(127,  47,  63, 0.7) solid;}
.sidebar-nav ul li:nth-child(11), .home-nav ul li:nth-child(11) {background-color: rgba( 55,  95,  99, 0.5); border-right: 10px rgba( 55,  95,  99, 0.7) solid;}
.sidebar-nav ul li:nth-child(12), .home-nav ul li:nth-child(12) {background-color: rgba( 90,  61, 153, 0.5); border-right: 10px rgba( 90,  61, 153, 0.7) solid;}

.sidebar-nav ul li a {display: block; padding: 10px 20px;}
.sidebar-nav ul li a:link, .sidebar-nav ul li a:visited {color: #fff;}
.sidebar-nav ul li a:hover, .sidebar-nav ul li a:active {color: #222; outline: 0;}

.sidebar-nav ul li.current_page_item {border-right-width: 20px; margin-right: -10px;}
.sidebar-nav ul li.current_page_item a {color: #222;}



/* body */
.section {float: left; width: 75%; margin-left: 4.5%;}
.section article {line-height: 1.5;}

.section-page, .section-archive, .section-single {position: relative; margin-top: -59px;}
.section-page h1, .section-archive h1, .section-single h1 {
 margin-bottom: 0;
 font-family: 'Expletus Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Trebuchet MS', 'Arial', sans-serif;
}

.section article h2 {margin-top: 2em;}
.section article h2:first-child {margin-top: 1em;}

.section article ul {list-style: none; margin: 0; padding: 0;}
.section article ul li {margin: 0; padding: 0 0 0 21px; background: url('images/bullet.png') 0 0.25em no-repeat;}

.section-archive article {clear: both; padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px #bbb solid;}



/* home */
.section-home {width: 100%; margin-left: 0;}

.home-nav {margin: 0; background: url('images/home-headframe-2x.jpg') top right no-repeat; background-size: auto 100%; overflow: hidden;}
.home-nav ul {float: left; width: 67.5%; list-style: none; margin: 0; padding: 0; background-color: #e3e1e6;}
.home-nav ul li {
 display: block; margin: 0 0 1px 0; padding: 0; font-size: 2.1em; line-height: 1.2;
 font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; font-stretch: condensed;
}
.home-nav ul li:last-child {margin-bottom: 0;}
.home-nav ul li a {display: block; padding: 22px 40px;}
.home-nav ul li a:link, .home-nav ul li a:visited {color: #fff;}
.home-nav ul li a:hover, .home-nav ul li a:active {color: #222; outline: 0;}

.home-intro {margin-top: 40px;}
.home-intro h1 {font-size: 1.8em;}
.home-map {float: right; max-width: 390px; height: auto; margin: 0 0 40px 40px; border: 1px #fff solid;}



/* search and social */
.social {position: absolute; top: 5px; right: 30px; list-style: none; margin: 0; padding: 0; line-height: 1;}
.social a {display: inline-block; vertical-align: middle; background: none; margin: 0 12px 0 0; padding: 2px 3px 1px 3px;}
.social a.social-facebook {width: 22px; height: 22px; background: url('images/social-facebook.png') center no-repeat;}
.social a.social-twitter {width: 22px; height: 22px; background: url('images/social-twitter.png') center no-repeat;}
.social a.social-instagram {width: 22px; height: 22px; background: url('images/social-instagram.png') center no-repeat;}
.social a:last-child {margin-right: 0;}

.social a, .social .search-submit {opacity: 0.8;}
.social a:hover, .social .search-submit:hover {opacity: 1;}

.search-form {display: inline-block; position: relative; vertical-align: middle; margin: 0 13px 0 0; padding: 0;}
.search-div {margin: 0; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset, #0782a3 0 0 5px; overflow: hidden;}
.search-input {
 float: left; width: 150px; margin: 0; padding: 2px 5px !important;
 font-size: 1em; color: #333; font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; font-stretch: condensed;
 border: 0; background-color: transparent;
 -webkit-transition: all 0.10s ease-out;
 -moz-transition:    all 0.10s ease-out;
 -ms-transition:     all 0.10s ease-out;
 -o-transition:      all 0.10s ease-out;
 transition:         all 0.10s ease-out;
}
.search-div.expanded {background-color: rgba(255, 255, 255, 0.4); box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset, #222 0 0 1px;}
.search-div.expanded .search-input {
 width: 120px;
 -webkit-transition: all 0.10s ease-in;
 -moz-transition:    all 0.10s ease-in;
 -ms-transition:     all 0.10s ease-in;
 -o-transition:      all 0.10s ease-in;
 transition:         all 0.10s ease-in;
}
.search-submit {
 width: 22px; height: 22px; margin: 3px 1px 0 0; padding: 0;
 background: url('images/icon-magnifier.png') center no-repeat; border: 0; cursor: pointer;
}



/* news */
.section-news h2 {margin-bottom: 0;}
.date {margin-top: 0; color: #888;}



/* contact page */
.button, .wpcf7-submit {
 display: inline-block;
 border-width: 0;
 background: #f18073;
 background: -webkit-gradient(linear, left top, left bottom, from(#f18073), to(#f15e4e));
 background: -webkit-linear-gradient(top, #f18073, #f15e4e);
 background: -moz-linear-gradient(top, #f18073, #f15e4e);
 background: -ms-linear-gradient(top, #f18073, #f15e4e);
 background: -o-linear-gradient(top, #f18073, #f15e4e);
 padding: 7px 20px !important;
 border-radius: 5px !important;
 box-shadow: 0 1px 0 #444;
 text-shadow: rgba(0,0,0,.4) 0 1px 2px;
 color: #eee !important;
 font-size: 1.1em !important;
 text-decoration: none;
 vertical-align: middle;
 cursor: pointer;
}
.button:hover, .button:active, .wpcf7-submit:hover, .wpcf7-submit:active {
 background: #6d98e1 !important;
 color: #fff;
}

.wpcf7 p {margin-top: 1em; margin-bottom: 0;}
.wpcf7 input, .wpcf7 textarea {
  display: block; width: 98%; max-width: 278px; margin-top: 0.3em; padding: 5px 7px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Trebuchet MS', 'Arial', sans-serif !important; font-size: 0.9em;
  border: 1px #999 solid; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition:    all 0.30s ease-in-out;
  -ms-transition:     all 0.30s ease-in-out;
  -o-transition:      all 0.30s ease-in-out;
  transition:         all 0.30s ease-in-out;
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
  box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 12px inset, #fff 0 0 5px;
  border: 1px #6d98e1 solid;
}
.wpcf7 textarea {height: 185px;}
.wpcf7 input.wpcf7-submit {
 display: block; width: auto; margin: 1em 0; border-width: 0;
 -webkit-transition: none;
 -moz-transition:    none;
 -ms-transition:     none;
 -o-transition:      none;
 transition:         none;
}

.wpcf7-response-output {width: auto; background-color: #fee8c5; color: #222; margin: -1em 0 1em 0 !important;} /* don't add padding because div is on page even when empty */
span.wpcf7-not-valid-tip, span.wpcf7-not-valid-tip-no-ajax {display: block; color: #222 !important; font-size: 0.9em;}



/* misc */
.read-more {}

.gallery {}
.gallery dl {float: left; margin: 4px;}
.gallery dl dt {}
.gallery dl dt a {}
.gallery dl dt a img {height: auto;}

.gallery br {display: none;}
.gallery:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

.emm-paginate {clear: both; display: block; margin: 1em 0; font-size: 0.95em;}
.emm-paginate a {padding: 1px 6px; text-align: center;}
.emm-paginate a:link, .emm-paginate a:visited {}
.emm-paginate a:hover, .emm-paginate a:active {background-color: #ccc;}
.emm-paginate .emm-title {color: #222; margin-right: 4px;}
.emm-paginate .emm-gap {color: #999;}
.emm-paginate .emm-page {}
.emm-paginate .emm-prev, .emm-paginate .emm-next {}
.emm-paginate .emm-current {background-color: #ccc; color: #fff; padding: 1px 6px; cursor: default;}



/* footer */
.footer {
 position: relative; width: 1040px; margin: 0 auto 30px auto; padding: 10px 30px; color: #fff; font-size: 0.9em;
 background: rgba(34, 34, 34, 0.8); border-top: 4px #222 solid; border-bottom: 1px #222 solid;
 box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
}

.foot-copyright {
 float: left; width: 23%; font-size: 1.3em;
 font-family: 'Open Sans Condensed', 'Arial Narrow', Helvetica, Arial, sans-serif; font-stretch: condensed;
}
.foot-copyright p {margin-top: 0.5em;}
.foot-sponsors {float: right; width: 72%;}

ul.sponsors-list {list-style: none; margin: 0; padding: 0;}
ul.sponsors-list li {
 display: inline-block; max-width: 100%; background: none; margin: 0; padding: 0; opacity: 0.8;
 -webkit-transition: opacity 0.2s ease-in-out;
 -moz-transition:    opacity 0.2s ease-in-out;
 -ms-transition:     opacity 0.2s ease-in-out;
 -o-transition:      opacity 0.2s ease-in-out;
 transition:         opacity 0.2s ease-in-out;
}
ul.sponsors-list li#sponsors-mun {position: relative; top: 11px; width: 84px; height: 50px; background: url('images/sponsor-mun.png') center center no-repeat; margin-right: 70px;}
ul.sponsors-list li#sponsors-sshrc {width: 535px; height: 22px; background: url('images/sponsor-sshrc.png') center center no-repeat; background-size: contain;}
ul.sponsors-list li a {display: block; width: 100%; height: 100%; margin: 0;}
ul.sponsors-list li:hover {opacity: 1;}



/* selections */
::selection {
	background: #04a4cc;
	color: #fff;
	text-shadow: none;
}
::-webkit-selection {
	background: #04a4cc;
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: #04a4cc;
	color: #fff;
	text-shadow: none;
}
/* hide input placeholder text on focus */
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}



/* wordpress core */
div#wpadminbar {
 z-index: 10000 !important;
}
.alignnone {
	margin: 0 20px 20px 0;
}
.aligncenter, div.aligncenter {
	display: block;
	margin: 0 auto 5px auto;
}
.alignright {
	float: right;
	margin: 0 0 20px 20px;
}
.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}
.aligncenter {
	display: block;
	margin: 0 auto 5px auto;
}
a img.alignright {
	float: right;
	margin: 0 0 20px 20px;
}
a img.alignnone {
	margin: 0 20px 20px 0;
}
a img.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}
a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	padding: 5px 3px 10px;
	max-width: 100% !important;
}
.wp-caption.alignnone {
	margin: 0 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 0 20px 20px 0;
}
.wp-caption.alignright {
	margin: 0 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	padding: 0;
	max-width: 100% !important;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}






/* responsive */

/* When width is less than 1110 */
@media only screen and (max-width: 1110px) {
 .top-bar, .wrapper, .footer {width: 95%; max-width: 1110px; min-width: 310px;}
 
 .sidebar-nav ul li {font-size: 1.15em;}
 .sidebar-nav ul li a {padding: 12px 15px;}
 
 .section-page, .section-archive, .section-single {margin-top: 0;}
 
 ul.sponsors-list li {margin: 1em 0;}
 ul.sponsors-list li#sponsors-mun {top: 0;}
}


/* When width is less than 950 */
@media only screen and (max-width: 950px) {
 .logo {height: 170px;}
 .home-nav ul li {font-size: 1.75em;}
 .home-nav ul li a {padding: 20px 30px;}
}


/* When width is less than 900 */
@media only screen and (max-width: 900px) {
 .logo {height: 160px;}
}


/* When width is less than 800 */
@media only screen and (max-width: 800px) {
 .logo {width: 30%; min-width: 150px;}
 .byline {max-width: 50%;}
 .byline-long {display: none;}
 .byline-short {display: block;}
 .home-nav ul li {font-size: 1.5em;}
 .home-nav ul li a {padding: 16px 20px;}
 
 .section {margin-left: 0;}
 .section-page, .section-archive, .section-single {margin-top: 3em;}
 .section, .sidebar {display: block; float: none; width: 100%; top: 0; left: 0; right: 0; bottom: 0;}
 
 .foot-copyright, .foot-sponsors {display: block; float: none; width: 100%; top: 0; left: 0; right: 0; bottom: 0;}
}


/* When width is less than 750 */
@media only screen and (max-width: 750px) {
 .logo {height: 180px;}
 .home-intro {margin-top: 0;}
}


/* When width is less than 700 */
@media only screen and (max-width: 700px) {
 .logo {height: 170px;}
 .home-nav ul li {font-size: 1.4em;}
 .home-nav ul li a {padding: 14px 20px;}
 
 .social {
  position: relative; width: 100%; max-width: 1110px; min-width: 310px; text-align: right; padding-right: 20px;
  margin: 0 auto; top: auto; right: auto; background-color: rgba( 74,  86, 142, 0.8);
 }
}

/* When width is less than 650 */
@media only screen and (max-width: 650px) {
 .logo {height: 160px;}
 .home-nav {background-image: none;}
 .home-nav ul {width: 100%; background-color: transparent;}
 .home-map {float: none; max-width: 100%; margin: 1em 0;}
}


/* When width is less than 600 */
@media only screen and (max-width: 600px) {
 .wrapper, .footer {padding: 20px;}
 .top-nav ul {padding: 0 10px;}
 
 .logo {height: 150px;}
}


/* When width is less than 550 */
@media only screen and (max-width: 550px) {
 .logo {height: 150px;}
}


/* When width is less than 480 */
@media only screen and (max-width: 480px) {
 .top-bar, .wrapper, .footer {width: 100%;}
 .wrapper, .footer {padding: 15px;}
 .top-nav ul {padding: 0 8px;}
 
 .byline {max-width: 40%; margin: 0 0 0 7%; font-size: 1.05em;}
 .home-nav ul li {font-size: 1.15em;}
 .home-nav ul li a {padding: 12px 15px;}
 
 .alignright, .alignleft {display: block; float: none !important; width: auto; height: auto; margin: 10px 0 !important; padding: 0;}
 
 .footer {margin-bottom: 0;}
}






/* higher-resolution images for retina screens */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {

 .logo {
  background-image: url('images/toxic-logo-2x.jpg');
  background-size: contain;
 }

 .search-submit {
  background: url('images/icon-magnifier-2x.png') center center no-repeat;
  background-size: 22px 22px; /* note: image is smaller than div */
 }
 
 .social a.social-facebook {
  background-image: url('images/social-facebook-2x.png');
  background-size: 22px 22px;
 }
 .social a.social-twitter {
  background-image: url('images/social-twitter-2x.png');
  background-size: 22px 22px;
 }
 .social a.social-instagram {
  background-image: url('images/social-instagram-2x.png');
  background-size: 22px 22px;
 }
 
 ul.sponsors-list li#sponsors-mun {
  background-image: url('images/sponsor-mun-2x.png');
  background-size: 84px 50px;
 }
 ul.sponsors-list li#sponsors-sshrc {
  background-image: url('images/sponsor-sshrc-2x.png');
  background-size: contain;
 }

}