* {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
    --suffolk-blue: rgb( 0, 20, 137 );
}


/* Stop horizontal scrolling if anything overflows the width */
body {
	overflow-x: hidden;
}


/* Remove default browser padding/margin and establish relative sizing metrics */
html,
body {
	background: rgb( 255, 255, 255 );
	color: rgb( 0, 0, 0 );
	font: normal medium "Lucida Grande", Helvetica, Arial, sans-serif;
	padding: 0;
	margin: 0;
}

/* Relative layout parameters declared globally at the root */
html {
    --header-height: 3.5rem; /* Pure relative height definition */
    scroll-padding-top: var(--header-height); /* Clear anchor jumps relatively */
}

@media print {
    @page {
        size: A4 portrait;
        margin: .5cm;
    }
    /*
      a::after {
        content: " (" attr(href) ")";
      }
    */
    main > div > h2 {
        page-break-before: auto;
    }
}
@media screen {

	/* Flexbox gives us the flexiness we need. The top stays pinned 
	 * to the very top edge of the screen layout. */
	.top {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
			-ms-flex-align: center;
				align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
			-ms-flex-pack: center;
				justify-content: center;
                
		background-color: rgb( 200, 200, 200 );
		font-size: 80%;
		white-space: nowrap;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 100;

		/* Uses global relative variable instead of raw ems to prevent font-scaling mismatch */
		height: var(--header-height); 
	}
	
	/* This is our main wrapping element */
	.container {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		width: 100%;
		-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
		will-change: overflow;
		margin-top: 0;
		padding-top: 0;
	}

	/* Isolated padding rules to separate blocks to allow scrolling behavior properties */
	main {
		padding: 1rem;
		-ms-overflow-style: none;
	}

	/* Allows the navigation column to safely show inner scrollbars if contents overflow */
	nav {
		padding: 1rem;
		overflow-y: auto; 
		-webkit-overflow-scrolling: touch;
	}

	/* Left ONLY the main content panel scrollbars hidden; removed nav scrollbar hiding */
	main::-webkit-scrollbar {
		display: none;
	}

	/* Left sidebar stays fixed smoothly directly underneath the sticky header banner */
	nav {
		width: 12.5rem;
		background-color: var(--suffolk-blue);
		font-size: 70%;
		
		position: -webkit-sticky;
		position: sticky;

		/* Inherits the exact relative height metric from the root coordinate */
		top: var(--header-height); 
		
		/* Subtracts the relative header height from full viewport metric cleanly */
		height: calc(100vh - var(--header-height));
	}

	main {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
			-ms-flex: 1;
				flex: 1;
	}
    
    nav a {
        text-decoration: none;
        display: block;
        padding: .125rem 0;
        color: rgb( 220, 220, 220 );
        transition: all 50ms ease-in-out; /* makes setting of the active state smooth */
    }
    nav a:hover, nav a:focus {
        color: rgb( 150, 150, 150 );
    }
    nav ul, nav ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    nav li {
        margin-left: 1rem;
    }
}

@media print {
	.top { display: none; }
	nav { display: none; }
	.container { }
	main { }
}

a.current {
  background: black;
}

h1 { 
	text-align: center; 
}
table {
    width: 100%;
    border-spacing: 0;
}
th, td {
    text-align: left;
    vertical-align: top;
    padding: .5em;
}
td.bordered, th.bordered {
    border: solid black .1em;
}

p { text-align: justify; }

.section-container {}
.section-header {}
.section-body {
    margin-left: 2em;
    margin-bottom: 2em;
}

.subsection-container { page-break-inside: avoid; }
.subsection-header {}
.subsection-body {
    margin-left: 2em;
    margin-bottom: 2em;
}

div.book-reference { margin-left: 2em; margin-bottom: 1em; } /* this is for all books listed for a course */
div.book-container {padding: .5em; } /* this is for individual book */
span.book-authors{}
span.book-title{ font-style: italic; font-weight: bold; font-family: "Times New Roman"; font-size: 115% }
span.book-edition{}
span.book-publisher{}
span.book-isbn{}

.warning { color: red; }
.affirmation { color: green; }
.office-hours-slot {}
.day-of-week { text-transform: capitalize; }
.column-left{ 
    width: 20%; 
    font-weight: bold; 
    border: solid gray .1em; 
}
.column-right { 
    width: 80%; 
    border: solid gray .1em; 
}

.recommended, .nonrecommended, .prohibited, .marginal {
    text-align: center;
    vertical-align: middle;
    border: solid gray .1em; 
}
.recommended { background-color: rgb( 50, 255, 150 ); }
.nonrecommended { background-color: rgb( 255, 255, 150 ); }
.prohibited  { background-color: rgb( 255, 200, 200 ); }
.marginal { background-color: rgb( 220, 220, 220 ); }
.emphasized { font-weight: bold; }
.explanation { font-weight: bold; font-style: italic; }

div#grant-logo { /* parent container of suffolk logo */
    text-align: center;
    position: relative;
    margin-top: 1em;
    transform: scale( 1, 1 );
}
div#suffolk-logo { /* parent container of grant campus caption */
    position: relative;
    display: table;
    margin: 0 auto;
    padding-bottom: 0em;
}
div#grant-campus { /* grant campus caption */
    display: table-caption;
    caption-side: bottom;
    
    color: rgb( 180, 150, 40 );
    text-transform: uppercase;
    
    border-top: solid rgb( 180, 150, 40 ) .12em;
    border-bottom: solid rgb( 202, 174, 48 ) .12em;
    
    font-family: "Times New Roman", Times, serif;
    font-weight: 500;
    letter-spacing: .1em;
    
    margin-top: 0em;
    padding-top: 0em;
    margin-bottom: 0em;
}

a#college {
    text-decoration: none;
}
a#department {
    font-size: 140%;
    text-decoration: none;
}
div#timestamp {
    text-align: right;
    font-style: italic;
    margin-right: 1em;
}

.course-topics-table{ border-collapse: collapse; }
.course-topics-table-header-row,
.course-topics-table-header-cell{border: solid black .1em; background-color: rgb( 200, 200, 200 ); font-weight: bold; }
.course-topics-table-row,
.course-topics-table-cell {border: solid black .1em; }