:root {
	--text: #000000;
	--text-grey: #4a4a4a;
	--pale-grey: #999999;
	--bg-grey: #e9e8e8;
	--header-color: #5f0202;
	--nav-color: #5f0202;
	--main-color: #800000;
	--active-color: #dc8c8c;
	--highlight-color: #e332bb;

	/* When a color pair is displayed as a block the bg color is used as a background and fg color as foreground
     * When the color pair is used with an invisible (i.e. just text on the canvas background) only the bg color
     * is used 
	 */

	/* Overall background and text color */
	--canvas-color-bg: #ffffff;
	--canvas-color-fg: #000000;

	/* Primary Background and foreground color for headers and other bold and solid areas */
	--main-dark-color-bg: #5f0202;
	--main-dark-color-fg: #ffffff;

	/* A lighter version of the main color for use when an offset color is needed (secondary menus)  */
	--main-light-color-bg: #800000;
	--main-light-color-fg: #ffffff;

	/* Accent color, used generally for headers, links, buttons, and accent elements drawn on the canvas */
	--accent-color-bg: #800000;
	--accent-color-fg: #ffffff;

	/* Active color used for hovers, active trails.*/
	--active-color-bg: #dc8c8c;
	--active-color-fg: #000000;

	/* ? */
	--highlight-color-bg: #e332bb;
	--highlight-color-fg: #000000;

	/* Secondary accent colors, used for announcement paragraph */
	--secondary-accent-color-bg: #b26666;
	--secondary-accent-color-fg: #ffffff;
}

@font-face {
	font-family: 'Lyon Text Web';
	src: url('../fonts/LyonText-Regular-Web.eot');
	src: url('../fonts/LyonText-Regular-Web.eot?#iefix') format('embedded-opentype'),
	url('../fonts/LyonText-Regular-Web.woff2') format('woff2'),
	url('../fonts/LyonText-Regular-Web.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'Lyon Text Web';
	src: url('../fonts/LyonText-RegularItalic-Web.eot');
	src: url('../fonts/LyonText-RegularItalic-Web.eot?#iefix') format('embedded-opentype'),
	url('../fonts/LyonText-RegularItalic-Web.woff2') format('woff2'),
	url('../fonts/LyonText-RegularItalic-Web.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-stretch: normal;
}

@font-face {
	font-family: 'Lyon Text Web';
	src: url('../fonts/LyonText-Bold-Web.eot');
	src: url('../fonts/LyonText-Bold-Web.eot?#iefix') format('embedded-opentype'),
	url('../fonts/LyonText-Bold-Web.woff2') format('woff2'),
	url('../fonts/LyonText-Bold-Web.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}

body {
	font-feature-settings: "liga", "kern";
}

.section-header {
	background-color: #5f0202;
}

.section-main {
	background-color: #ffffff;
}

.section-accent {
	background-color: #e9e8e8;
}

header, nav, h1, h2, h3 {
	font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
}

.nav, .nav-top, .info, .body table, .image-caption {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
}

.intro, .body {
	font-family: "Lyon Text Web", serif;
}

/* Core styles from James' design document */
a {
	color: #800000;
}
a:hover {
	color: #dc8c8c;
}

h1, h2, h3 {
	font-weight: 700;
}

h1 {
	font-size: 32px;
	line-height: 34px;
	color: #800000; /* text-grey? */
}

h2 {
	font-size: 23px;
	line-height: 32px;
	color: #800000; /* text-grey? */
}

h3, .course-teaser h2 {
	font-size: 15px;
	line-height: 26px;
	color: #000; /* text? */
}

.nav-top {
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
}

.nav {
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 58px;
}

.sub-nav {
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: #fff;
}

h2.info {
	font-weight: 700;
}

.info {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.intro {
	font-size: 20px;
	line-height: 28px;
	color: black;
}
.body {
	font-size: 16px;
	line-height: 26px;
	color: black;
}
.body blockquote {
	font-style: italic;
	margin-left: 25px;
}
.body table {
	font-size: 15.5px;
}
.highlight {
	background-color: rgba(227, 50, 187, 0.1);
	border-color: #e332bb;
}
.image-caption {
	font-size: 14px;
	line-height: 20px;
}
#search-box {
	font-weight: 400;
	font-size: 32px;
	line-height: 34px;
}


/* A few specific overrides for colors that just don't quite work */
article.node--view-mode--teaser_tile.node--type--subject_area {
	background-color: var(--canvas-color-bg);
}
article.node--view-mode--teaser_tile.node--type--subject_area:hover {
	background-color: var(--active-color);
}
article.profile-teaser-tile {
	background-color: var(--canvas-color-bg);
}


/* Medium Size overrides */
@media only screen and (min-width: 738px) {

h1 {
	font-size: 48px;
	line-height: 52px;
}

h3, .course-teaser h2 {
	font-size: 17px;
	line-height: 28px;
}

}

/* Large Size */
@media only screen and (min-width: 960px) {

h2 {
	font-size: 24px;
	line-height: 34px;
}

.nav {
	border-top: 0px;
	font-size: 18px;
	line-height: 24px;
}
.sub-nav {
	font-weight: 500;
	line-height: 28px;
}

.info {
	font-size: 16px;
	line-height: 22px;
}
.intro {
	font-size: 24px;
	line-height: 32px;
}
.body {
	font-size: 18px;
	line-height: 28px;
}
.body blockquote {
	margin-left: 35px;
}
.body table {
	font-size: 17px;
}
#search-box {
	font-size: 48px;
	line-height: 52px;
}

}


/* Large Size */
@media only screen and (min-width: 1200px) {

h2 {
	font-size: 27px;
	line-height: 36px;
}

h3, .course-teaser h2 {
	font-size: 19px;
	line-height: 30px;
}

.body {
	font-size: 20px;
	line-height: 30px;
}
.body table {
	font-size: 19px;
}

}