[role="banner"] *,
.related-nav *,
[role="contentinfo"]{
  -moz-box-sizing: border-box;
       box-sizing: border-box}
[role="banner"] {
  overflow: hidden;
  background-color: #f3f3f3; }

/**
 * 1. Header
 *
 * @section mod-header
 */
#header{
    min-width: 0;
	position: static;
	background-color: transparent;
}
.logo{
	width: 23%;
	margin: .618em 2% 0 2%;
	float: left;
}
.logo a,
.site-name a{
	border-bottom-width: 0;
}

.internal-users{
	display: none;
}
    /**
     * 1.1 Search
     *
     * @subsubsection mod-header-search
     */
    [for="top-search"]{
		height: 0;
		width: 0;
		display: block;
		overflow: hidden;
		position: absolute;
	}
	.off-canvas{
		margin-right: 2%;
		display: none;
	}
    .search-toggle,   /*button to reveal search*/
    .student-toggle{  /*button to reveal profile*/
    	/*box model*/
		padding: 0 .618em;
		min-width: 22px;
		/*layout*/
		float: right;
		/*typography*/
		text-align: center;
		text-decoration: none;
	}
	.search-toggle,
	.search-toggle:link{
		border-radius: 0 0 4.5px 0;
	}
	.student-toggle,
	.student-toggle:link{
		border-right: 1px solid #333;
		border-radius: 0 0 0 4.5px;
	}
	.search-toggle:link,
	.student-toggle:link{
		border-bottom-width: 0;
	}
	.search-toggle:hover,
	.student-toggle:hover{
		background-color: #492c5d;
	}
	.search-toggle > img,
	.student-toggle > img{
		margin: 0.441176470588235em auto;
		width: 17px;
		display: block;
	}
	.student-toggle > img{
		padding-top: 1px;  /*Compensate for matching search icon height*/
	}
	#top-search-query,
	.top-search-button{
		margin-bottom: 0;
		font-size: 1em;
	}
	#top-search-query{
		border: 1px solid #ccc;
		margin-right: -32px;  /*IE8*/
		margin-right: -1.719rem;
		height: 27.506px;  /*IE8*/
		height: 1.719rem;
		padding: 0 2%;
		position: relative;
		width: 100%;
		-webkit-appearance: none;
		   -moz-appearance: none;
	}
	[placeholder]:focus:-moz-placeholder,  /*Firefox <19*/
	[placeholder]:focus::-moz-placeholder{  /*Firefox 19+*/
		color: transparent;
	}
	[placeholder]:focus::-webkit-input-placeholder{  /*Safari & Chrome*/
		color: transparent;
	}
	.top-search-button{
		border-width: 1px 1px 1px 0;
		height: 27.506px;  /*IE8*/
		height: 1.719rem;
		padding: 0;
		width: 27.506px;  /*IE8*/
		width: 1.719rem;
		position: relative;
		background: none #fff;
		border-color: #ccc;
		border-radius: 0 0 0 0;
		vertical-align: top;
		cursor: pointer;
		-webkit-appearance: none;
		   -moz-appearance: none;
		box-shadow: none;
	}
	.top-search-button:hover{
		background-color: #ccc;
	}
	.search-tools{
    	margin-bottom: 0;
    	margin-left: 0;
		font-size: 14px;  /*IE8*/
		font-size: 0.875rem;
		line-height: 1.071428571428571;  /*15px*/
	}
	.search-tools li{
		display: inline;
	}
	.search-tools li:after,
	.search-tools li::after{
		content: " | ";
	}
	.search-tools li:last-child:after,
	.search-tools li:last-child::after{
		content: "";
	}
	[role="search"],
	.active-search [role="search"]{  /*In case active-search JS is toggled.*/
		/*box model*/
		width: 40%;
		/*layout*/
		float: right;
		/*positioning*/
		position: static;
		/*backgrounds & borders*/
		background-color: transparent;
	}
	#header form,  /*Override old header nav styling.*/
	[role="search"],
	.active-search [role="search"]{
		padding: .618em .618em .618em 0;  /*Use padding for height calculations in JS.*/
	}
    
.top-nav,
.menu-button,
.search-toggle,
.student-toggle{
    font-size: 17px;
    font-size: 1.063rem;
    line-height: 1.764705882352941;  /*30/17*/
}

.top-nav,
.top-nav-list,
.menu-button,
.search-toggle,
.student-toggle{
    color: white;
    background-color: #64933a;
}
    
    /**
     * 1.2 Primary Nav
     *
     * @subsubsection mod-header-primary-nav
     */
    [role="navigation"]{
		/*box model*/
		margin-left: 0;
		width: 100%;
		/*layout*/
		clear: both;
		display: table;
		/*positioning*/
		position: relative;
		/*typography*/
        font-size: 17px;  /*IE8*/
        font-size: 1.063rem;
        letter-spacing: normal;
        line-height: 1.323529411764706;  /*22.5/17*/
	}
    .top-nav-list:before,
    .top-nav-list:after{
	    display: table;
	    clear: both;
	    content: "";
    }
    .top-nav-list:after{
	    clear: both;
    }
    .top-nav-list{
		/*box model*/
	    margin: 0 auto;
	    width: 100%;
		min-height: 44px;
		/*layout*/
	    display: table-row;
		display: -webkit-flex;
		    display: -ms-flex;
    	        display: flex;
    	/*positioning*/
	    position: relative;
	    /*typography*/
	    text-align: center;
	    /*lists*/
	    list-style-type: none;
	    /*flexbox*/
	    align-items: stretch;
		align-content: center;
	}
	.top-nav-list > li{
		border-left: 1px solid #333;
		min-height: 44px;  /*IE8*/
		width: 20%;  /*100/5*/
	    display: table-cell;  /*IE8*/
		display: -webkit-flex;
		display:     -ms-flex;
    	display:         flex;
	    overflow: hidden;
	    vertical-align: middle;  /*Works with table-cell, not with flex, so IE8*/
	}
	.top-nav-list > li:first-child{
		border-left-width: 0;
	}
	.top-nav-link{
		/*layout*/
		display: block;
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		/*typography*/
		font-weight: bold;
		text-decoration: none;
		/*flexbox*/
		-webkit-justify-content: center;
		        justify-content: center;
		-webkit-align-items: center;
		        align-items: center;
	}
    .top-nav-link,
	.top-nav-link:link,
	.top-nav-link:visited{
		/*box model*/
        border-bottom-width: 0;
		padding: 17px 2px;  /*IE8*/
		padding: 0.46875rem 0.25rem;  /*7.5/16 2.48/16*/
		width: 100%;
		/*typography*/
	    color: #fff;
	}
	.top-nav-link:hover/*,
	.secondary-nav a:hover*/{
		/*backgrounds & borders*/
		background-color: hsl(274, 17%, 42%);
		/*misc*/
		box-shadow: 0 0 2px #fdf4b6 inset;
		-webkit-transition: all .1s ease-out;
		        transition: all .1s ease-out;
		
	}
	.top-nav-link:focus/*,
	.secondary-nav a:focus*/{
		background-color: #492c5d;
	}
	
.site-name a{
    color: #fff;
    text-shadow: 0 1px 3px hsl(275, 33%, 11%);
}

#subsite_header{
	border-bottom-width: 0;
	margin-bottom: 15px;
}
#subsite_header h3{
	/*box model*/
	margin: 0;
	padding: 0 2%;
	width: 56%;
	/*layout*/
	float: none;
	/*typography*/
	font-weight: normal;
	line-height: 1.7175572519084; /*37.5/21.83333333333*/
	/*backgrounds & borders*/
	background-color: #46502b;
	border-radius: 0 0 2px 0;
}

#subsite_header h3 a,
#subsite_header h3 a:link{
	border-bottom: 1px solid #fff;
}
#subsite_header .trees,
#subsite_header .fish,
#subsite_header .geoduck{
	display: none;
}

	/**
	 * 1.3 Related Nav
	 *
	 * Related links with iconographic circles.
	 *
	 * @subsubsection mod-typography-l-related
	 */
	.related-nav {
	  display: -webkit-flex;
	  -webkit-flex-wrap: wrap;
	  flex-wrap: wrap; }
	
	.related-nav > li {
	  margin: 1.262201279030629em 0;
	  margin-right: 2%;
	  width: 15%;
	  width: 14.5% \9;  /*IE8*/
	  display: block;
	  vertical-align: top;
	  float: left;
	  text-align: center; }
	  
	.related-nav > li:last-child {
	    margin-right: 0; }
	
	.related-nav-icon {
	  margin: 0 auto;
	  padding: 15%;
	  width: 75%;
	  text-align: center;
	  background-color: #64933a;
	  border-radius: 50%; }
	
	.related-nav a:hover .related-nav-icon {
	  background: #0086ee; }

/**
 * 2. Footer
 *
 * @subsection mod-footer
 */
[role="contentinfo"]:before,
[role="contentinfo"]:after{
	clear: both;
	display: table;
	content: "";
}
.base,
.link-list{
	/*box model*/
	margin:0.535714285714286em 0 1.071428571428571em 0;  /*22.5/14/3 15/14  So, 22.5 + 7.5 + 15 = 45*/
    /*typography*/
    font-size: 17px;  /*IE8*/
    font-size: 1.063rem;
    line-height: 1.607142857142857;  /*22.5/14*/
}
.wrapper{
	margin: 0 auto;
	max-width: 1312px;  /*IE8*/
	max-width: 82rem;
}
.unit-2-7,
.unit-3-7{
	margin: 0 2%;
    float:left;
}
.unit-2-7{
    width: 24.571428571428571%;
}
.unit-3-7{
    width: 38.857142857142857%;
}

[role="contentinfo"]{
	clear: left;
    color:#fff;
    background-color: #000;
}

.page-footer a,
.page-footer a:link,
.page-footer a:visited{
    color:#fff;
}
.page-footer a:hover{
    color:#e5e5e5;
}
.link-list{
	list-style-type: none;
}
.footer-map{
	/*box model*/
	margin-left: 2%;
	width: 50%;
	/*layout*/
    display: block;
    float: right;
}
.footer-map img{
	max-height: 112.5px;
}
.page-footer .vcard{
	/*box model*/
	border-width: 0;
	height: auto;
	margin: auto;
	padding: 0;
	width: auto;
	/*layout*/
	float: none;
	overflow: auto;
	/*typography*/
	text-align: left;
}
.page-footer .vcard .fn{
	/*layout*/
	display: inherit;
	font-weight: normal;
	/*typography*/
	font-size: inherit;
	line-height: inherit;
}
.mini-mark{
    width:100px;
    vertical-align: bottom;
}

/**
 * 3. Homepage
 *
 * @subsection homepage
 */
#vignettes2013{
	background-color: #e3f3fe;
}
#vignettes2013 h2{
	margin: 0;
	padding: 1.090671126299716em 2%;
	padding-bottom: 8px;
	padding-bottom: 0.46875rem;
	color: white;
	background-color: #0086ee;
}
#vignettes2013 h2,
#vignettes2013 h2 a,
#vignettes2013 h2 a:link,
#vignettes2013 h2 a:visited{
	color: white;
}
#vignettes2013 h4{
	margin: 0.779950083194676em 0 0.363976705490849em 0;
}
#vignettes2013 .content{
	margin: 0 2%;
}

/* list content */
#vignettes2013 ul{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}
#vignettes2013 .first ul{
	margin-left: 1.2em;
    list-style-type: square;
}
#vignettes2013 .first li{
	margin: 0;
}
#vignettes2013 .third li a{
	font-weight: normal;
}