/* Fonts & basic color issues first */

:root {
/*
   Colors

*/
    --purdue-gold: #CFB991;
    --purdue-black: #000000;
    --purdue-white: #FFFFFF;
    --purdue-rush: #DAAA00;
    --purdue-field: #DDB945;
    --purdue-dust: #EBD99F;
    --purdue-railgray: #909795;
    --purdue-steam: #C4BFC0;
    --purdue-aged: #8E6F3E;  /* for AA on light */
    --purdue-steel: #555960;
    --purdue-coolgray: #6F727B;
    
/* https://marcom.purdue.edu/our-brand/visual-identity/ */
/* AA Legibility combos
	Large & small
		black on gold, white, rush, field, dust, railway, steam
		gold on black
		white on black, aged, steel, cool, aged on white
		rush, field, railway, steam on black
		dust on black, steel
		steel on white, dust
	Large (18pt or larger, or 14pt bold)
		black on aged, coolgray
		gold on steel
		aged, coolgray on dust
		rush, field, stream on steel
		dust on aged, cool
		steel on gold, rush, field, steam
*/
  
    /* Extended Color Palette */
    --text-color: var(--purdue-black);
    --text-light: var(--purdue-gold);
    --link-color: var(--purdue-coolgray);
    --link-hover: var(--purdue-rush);
    --link-visited: var(--purdue-steel);
    --border-color: var(--purdue-steel);
    --bg-light: var(--purdue-dust);
   
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Typography */
    --font-base: acumin-pro, "Franklin Gothic", sans-serif;
    --font-mono: courier-new, Courier, monospace;
    --font-serif: source-serif, "Georgia", Times, serif;
    --font-callout: united-sans, "Impact", var(--font-base);
    --line-height-base: 1.6;
    --line-height-tight: 1.3;
    
    /* Breakpoints (reference only, used in media queries) */
    --breakpoint-mobile: 768px;
    --breakpoint-desktop: 1024px;  
}
body
{
	color: var(--text-color);
	background-color: var(--purdue-white);
	text-align: justify;
	font: normal Medium/1.3em var(--font-serif);
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--font-serif);
	color: var(--purdue-black);
	font-weight: bold;
}

.invis { display: none; }
.cursive { font-family: "Zapf Chancery", "Apple Chancery", cursive; }

a:link
{
	background-color: inherit;
	cursor: pointer;
	color: var(--link-color);
}

a:visited { color: var(--link-visited); }
a:hover, a:active { text-decoration: underline; }


/* Headers */
h1
{
	text-transform: capitalize;
	font-family: var(--font-serif);
	color: var(--purdue-black);
	font-weight: bold;
	text-align: left;
	font-size: 1.6em;
	float: left;
	clear: left;
	padding: 0;
	margin: .75em;
	display: inline;
}

h2
{
	text-transform: capitalize;
	background-color: var(--purdue-field);
	font: oblique bold 1.2em var(--font-serif);
	text-align: center;
	padding: .5em 0 .5em 0;
	border: var(--purdue-black) thin ridge;
	margin: 1em auto .5em auto;
	clear: both;
}

h3
{
	text-indent: -1em;
	text-align: left;
	margin: 0;
	padding: 1em 0ex .4em 0ex;
}

h4
{
	padding: .75em 0 .5em 0;
	margin: 0;
}

p {
  margin-top: 1em ;
  margin-bottom: 1em ;
}

.center
{
	text-align: center;
	margin: auto;
}

/* Regular  formats */
strong
{
	font-style: oblique;
	font-weight: bold;
}

address
{
	display: inline;
	font: oblique normal .85em var(--font-mono);
}

hr
{
	margin: 1em auto 1em auto;
	width: 70%;
	height: 2pt;
	background-color: var(--purdue-black);
	color: inherit;
	display: block;
}

acronym
{
	text-transform: capitalize;
	font-variant: small-caps;
}

q, blockquote
{
	color: var(--purdue-steel);
	font: italic lighter .9em  var(--font-serif);
	text-align: justify;
	white-space: normal;
}

blockquote
{
	margin: .5em auto .5em auto;
	width: 80%;
	display: block;
}


/* Images */
img
{
	border: 0;
	padding: 0px;
	margin: 1.5em;
	vertical-align: middle;
	display: inline;
}

img.pdf
{
	padding: 0;
	margin: 0;
	vertical-align: text-bottom;
}

img.left
{
	float: left;
	clear: left;
}

img.right
{
	float: right;
	clear: right;
}

/* List styles */
ul.bullet
{
	list-style-type: disc;
	list-style-position: outside;
	margin: .6em 0 .6em 2.5em;
}

ul.box
{
	list-style-type: square;
	list-style-position: inside;
	margin: .6em 0 .6em 1.5em;
}

ol
{
	list-style-type: decimal;
	list-style-position: inside;
}

/* Special general styles */
.both { clear: both; }
.indent { margin: 0 0 0 2em; }

/* 
    Special sections 
*/

#main
{
	background-color: var(--purdue-aged);
	clear: both;
	border-color: var(--purdue-black);
	border-width: medium 0 0 0;
	border-style: solid;
	margin: 0;
}

#content
{
	background-color: var(--purdue-white);
	padding: 1em 2em 1em 2em;
	min-height: 46em;
	border-right: none;  /* Remove this border */
	margin: 0 0 0 16em;
}


#bottom
{
	background-color: var(--purdue-aged);
	color: var(--purdue-white);
	text-align: center;
	margin: 0;  /* Remove margin-left */
	width: 100%;  /* Full width */
	display: block;
	clear: both;
	padding: 1em 0;
	font-size: 75%;
}

/* Clearfix for #bottom to contain floats */
#bottom::after {
	content: "";
	display: table;
	clear: both;
}

#bottom footer {
	padding: 0 0 0 18em;  /* Add left padding to push content past sidebar */
	width: 100%;
	display: block;
	color: var(--purdue-white);
	display: inline-block;
	line-height: 1.5;
	box-sizing: border-box;
}

#footleft
{
	float: left;
	text-align: left;
	margin: 0 0 0 2em;
}

#footright
{
	float: right;
	text-align: right;
	margin: 0 2em 0 0;
}

#footright p, #footleft p {
	margin: 0;
	padding: 0;
	display: block;
	color: var(--purdue-white);
}

p.back {
    text-align: right;
    padding: 0;
    margin: .75em 1em -.5em 0;
}

p.back a {
    padding: .2em .75em;
    background: var(--purdue-steel);
    margin: 2px;
    color: var(--purdue-dust);
    font: normal bold normal small var(--font-base);
    border: 1px var(--purdue-black) solid;
}

p.back a:hover {
    color: var(--purdue-steel);
    background: var(--purdue-dust);
    border: 1px solid var(--purdue-steel);
    text-decoration: none;
}

/* Accessibility */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--purdue-black);
    color: var(--purdue-white);
    padding: 8px;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--purdue-gold);
    outline-offset: 2px;
}

/* Don't remove outline unless providing alternative */
*:focus {
    outline-offset: 2px;
}

/* For dark backgrounds */
#navsite a:focus,
#navsite button:focus {
    outline: 2px solid var(--purdue-dust);
    outline-offset: 2px;
}