@charset "UTF-8";

@-ms-viewport{
	width: device-width;
}

@viewport{
	width: device-width;
}

/**
 * Responsive Styles
 *
 * Styles for the PeopleAdmin portal template.
 *
 * These styles were originally developed by Justin McDowell. They theme
 * the PeopleAdmin portal template mostly to use Evergreen's brand colors
 * in the interface.
 *
 * Styles in this file are organized according to the SMACSS
 * principles: http://smacss.com/
 *
 * @project    The Evergreen State College
 * @author     The Evergreen State College
 * @copyright  2016 by the author
 * @license    CC:BY-SA
 */
 
/**
 * I. Base Styles
 *
 * Styles generally for generic html elements. Classed or IDed
 * elements should typically be included in the Modules section.
 */

body{
	/**
	 * OpenType features available in Proxima Nova
	 * c2sc - Small capitals from capitals (Note: don't use font-feature-settings for small-caps)
	 * frac - Fractions
	 * liga - Standard ligatures
	 * lnum - Lining figures ("uppercase" numbers)
	 * onum - Oldstyle figures ("lowercase" numbers); at least one Win10/Chrome combination chokes on this
	 * ordn - Ordinals (1st, 2nd) - bad support
	 * pnum - Proportional figures (Varying width numbers)
	 * salt - Stylistic alternates
	 * smcp - Small capitals (Note: don't use font-feature-settings for small-caps)
	 * ss## - Stylistic sets (## is 01-20; I don't know how many sets this font has)
	 * subs - Subscripts
	 * sups - Superscripts
	 * tnum - Tabular figures (Fixed-width numbers)
	 */
	font-feature-settings: "kern", "liga";  /* Low-level OpenType features; these could be turned off eventually */
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	font-variant-numeric: oldstyle-nums;
	text-rendering: optimizeLegibility;
	background-color: hsl(0, 0%, 95%);
}

body,
input,
button{
	-moz-osx-font-smoothing: grayscale;  /* Reduce text chubbiness in Firefox */
	-webkit-font-smoothing: antialiased;  /* Reduce text chubbiness in Safari, Chrome */
}

a{
	border-bottom: 1px solid hsl(275, 11%, 78%);  /* blueberry susan, tint 75% */
	color: hsl(276, 36%, 27%);  /* blueberry susan */
	font-weight: bold;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s ease;
}

a:visited{
	color: hsl(347, 73%, 22%);
	border-bottom-color: hsl(275, 11%, 78%);  /* wine, tint 75% */
}

a:hover{
	color: hsl(206, 100%, 47%);  /* sky blue */
	border-bottom-color: hsl(206, 100%, 47%);  /* sky blue */
	text-decoration: none;
}

a:focus,
a:active{
	background-color: hsla(276, 36%, 27%, 0.1);  /* blueberry susan */
	outline-width: 0;
}

/**
 * II. Layout Styles
 *
 * Styles for overarching page layout elements like main columns,
 * rows, and wrappers.
 */
div#header{
	background-color: hsl(0, 0%, 95%);  /* neutral */
	border-bottom: 44px solid hsl(92, 43%, 40%);  /* evergreen neue */
}

.header-inner{
	background-color: hsl(0, 0%, 95%);  /* neutral */
}

/**
 * III. Module Styles
 *
 * Styles for specific or reusable, components.
 */
.fast-find ul li a,
.fast-find ul li a:visited{
	border-bottom-width: 0;
	background-color: hsl(92, 43%, 40%);  /* evergreen neue */
	box-shadow: none;
}

.fast-find ul li a:hover{
	background-color: hsl(275, 13%, 56%);  /* blueberry susan, tint 40% */
	box-shadow: 0 0 1px hsla(52, 95%, 85%, 0.5) inset;  /* highlight */
}

.image-one,
.image-two,
.image-three,
.image-four,
.text-box-one,
.text-box-two,
.text-box-three,
.text-box-four{
	background-color: hsl(276, 13%, 85%);  /* blueberry susan, tint 80% */
}

.navbar-default{
	border-width: 0;
	background-color: transparent;
}

/*.navbar-nav{
	color: hsl(206, 100%, 23%);*/  /* sky blue, shade 66.667% */
	/*background-color: hsl(207, 85%, 89%);*/  /* sky blue, tint 80% */
/*}*/

#footer a,
#footer a:visited{
	color: hsl(92, 43%, 40%);  /* evergreen neue */
	border-color: hsl(91, 44%, 24%);  /* evergreen neue, shade 40% */
}

#footer a:hover{
	color: hsl(206, 100%, 47%);  /* sky blue */
	border-bottom-color: hsl(206, 100%, 47%);  /* sky blue */
	text-decoration: none;
}

/**
 * IV. State Styles
 *
 * Styles generally for elements that might have different states,
 * depending on how they're set. Typically these are for JS or
 * otherwise app-like functions.
 */