/*
 * Utility
 */
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.remove {
    display: none;
}

/*
 * General
 */
html {
    font-size: 16px;
}

body {
    background: #F4F4F4;
    font-size: 16px;
    margin-top: 6em;
    /*padding-right: calc(100% - 100vw + 18px);    prevents reflow when scroll bar appears/disappears */
}

body.noscroll {
    overflow: hidden;
}

footer a, footer a:visited {
  color: #333!important;
}

header {
    background: #333;
    font-size: 16px;
    height: 6em;
    margin-right: calc(100% - 100vw);    /* prevents reflow when scroll bar appears/disappears */
    min-width: 640px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

header > * {
    display: inline-block;
}
header *:focus, #menu *:focus, footer *:focus {
    outline: 1px solid #009CDE;
}
aside *:focus {
    outline: 2px solid #009CDE;
    outline-offset: 2px;
}

footer > ul > li:first-child > ul > li > a:focus > img {
    outline: 1px solid #009CDE;
    outline-offset: 2px;
}

header > a {
    height: 4em;
    padding: 0;
    position: relative;
    top: 1em;
    left: 1em;
}

header > a > svg {
    height: 100%;
}

header #suffolk-logo .mark-white {
    fill:#fff;
    transition-duration: 1s;
}

header #suffolk-logo .suffolk-mark {
    fill:#ffbf0b;
    transition-duration: 1s;
}
header #suffolk-logo:hover .suffolk-mark, header #suffolk-logo:hover .mark-white {
    fill:#FFF;
}

header > nav {
    bottom: 0.5em;
    margin-left: 4em;
    position: relative;
    transition: 1s opacity;
}
header > nav.active {
    opacity: 1;
    transition: 1s opacity;
}
header > nav.remove {
    display: inline-block;
}
@media (max-width: 1160px) {
    header > nav {
        opacity: 0;
    }
    header > nav.remove {
        display: none;
    }
}

header > nav > ul > li {
    display: inline-block;
}
header > nav > ul > li:not(last-child) {
    margin-right: 1.5em;
}

header > nav > ul > li > a {
    border-bottom: 1px solid #FFBF0B;
    color: white;
    display: inline-block;
    padding: 0.5em;
    padding-bottom: 0.25em;
    text-decoration: none;
    transition: .5s border;
}
header > nav > ul > li > a:hover {
    border-bottom: 1px solid #FC4C02;
    text-decoration: none;
  	color: white;
}
header > nav > ul > li > a:visited {
  color: white;
}

header > div {
    position: absolute;
    right: 2em;
    top: 2.125em;
}

header > div > form {
    display: inline-block;
}

header > div > form > #HeaderSearchQueryControl_SearchTextBox {
    border: none;
    border-radius: 2px 0 0 2px;
    font-size: 16px;
    height: 1.5em;
    line-height: 1em;
    outline-offset: 0.25em;
    padding: 0.25em;
    position: relative;
    bottom: 0.5em;
    transition: 1s width, 1s opacity;
    width: 0;
    opacity: 0;
}
header > div > form > #HeaderSearchQueryControl_SearchTextBox.active {
    /*display: inline-block;*/
    opacity: 1;
    transition: 1s width, 1s opacity;
    width: 20em;
}
header > div > form > #HeaderSearchQueryControl_SearchTextBox.remove {
    display: none;
}

/*header > div > #HeaderSearchQueryControl_SearchButton {
    background: #D0D0CE;
    border: none;
    border-radius: 0 2px 2px 0;
    box-shadow: none;
    color: black;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    height: 1.5em;
    line-height: 1em;
    outline-offset: 0.25em;
    padding: 0.25em;
    margin-left: -0.25em;
    position: relative;
    bottom: 0.5em;
}*/

header > div button {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    height: 2em;
    width: 2em;
    padding: 0.25em;
    position: relative;
    bottom: 0.125em;
    margin-right: 0.5em;
}

header > div button > svg {
    height: 100%;
    width: 100%;
}

header > div #open-menu-btn:hover > svg * {
    fill: #D0D0CE;
}
header > div #HeaderSearchQueryControl_SearchButton:hover > svg * {
    stroke: #D0D0CE;
}
/*header > div #open-menu-btn.active:hover > svg * {
    fill: #DA291C;
}*/

@media (max-width: 820px) {
    header > nav {
        display: none;
    }

    /*header > div {
        margin-left: calc(100vw - 18em);
    }*/
}
/*@media (max-width: 960px) {
    header > div {
        position: relative;
        top: 0;
        left: 0;
    }
}*/
header #open-menu-btn *, header #HeaderSearchQueryControl_SearchButton * {
    transition-duration: .5s;
}

header #open-menu-btn.active #menu-btn-middle {
    opacity: 0;
}
header #open-menu-btn.active #menu-btn-top {
    transform: matrix(.75, .75, -.75, .75, 8, 0);
}
header #open-menu-btn.active #menu-btn-bottom {
    transform: matrix(.75, -.75, .75, .75, -16, 8);
}

#menu {
    background: #333;
    opacity: 0;
    font-size: 16px;
    position: fixed;
    top: 6em;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding: 2em;
    margin-right: calc(100% - 100vw);
    transition: 1s opacity;
    z-index: 99;
}
#menu.active {
    display: block;
    opacity: 0.95;
    transition: .5s opacity;
}

#menu > ul {
    max-height: 100vh;
    width: 15em;
}
#menu > ul > li {
    list-style: none;
    border-bottom: 1px solid white;
    vertical-align: center;
}
#menu > ul > li > a, #menu > ul > li > button {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: white;
    display: inline-block;
    font-weight: bold;
    padding: 1em;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: 0.5s background, 0.25s color;
}
#menu > ul > li > a {
    width: calc(100% - 2em);
}
#menu > ul > li > button {
    font-size: 16px;
    width: 100%;
}
#menu > ul > li > a:hover, #menu > ul > li > button:hover {
    background: #D0D0CE;
    color: black;
    text-decoration: underline;
}
#menu > ul > li > button.active {
    background: #FFBF0B;
    color: black;
}
#menu > ul > li > button.active:after {
    transform: matrix(1, 0, 0, 1, 0, 0);
    filter: contrast(0) brightness(0);
}
#menu > ul > li > button:hover:after {
    filter: contrast(0) brightness(0);
}
#menu > ul > li > button > span {
    display: block;
    max-width: 12em;
}
#menu > ul > li > button:after {
    background: url('/images/chevron.svg') center / 1em 1em no-repeat local padding-box;
    content: '';
    position: absolute;
    right: 0.5em;
    top: calc(50% - 1em);
    transform: matrix(0, 1, -1, 0, 1, 1);
    height: 2em;
    width: 2em;
    transition: 0.5s;    
}

#menu .submenu {
    position: absolute;
    top: 2em;
    left: 17em;
    right: 2em;
    height: 29em;
    padding: 0 2em;
    opacity: 0;
    transition: 0.5s opacity;
}
#menu .submenu.active {
    opacity: 1;
}
#menu .submenu > li {
    background: url('/images/arrow.svg') left center / 1em 1em no-repeat local padding-box;
    display: inline-block;
    min-width: 10em;
    position: relative;
    width: calc((100% - 4em) / 2);
}
@media (max-width: 800px) {
    #menu .submenu > li {
        width: calc(100% - 2em);
    }
}

#menu .submenu > li > a {
    color: white;
    height: 2em;
    padding: 0.5em 1em 0.5em 2em;
    width: calc(100% - 4em);
    display: inline-block;
    text-decoration: underline;
}
#menu .submenu > li > a:hover > span {
    text-decoration: underline;
}

/* vertical centering */
#menu .submenu > li > a > span {
    position: absolute;
    text-align: left;
    top: 50%;
    transform: translate(0, -50%);     
}

/*
 *  Previous stuff
 */

#page {
	/*background-color: #D0D0CE;*/
	background-color: #F4F4F4;
    padding-right: calc(100% - 100vw + 18px);
}

#nav li {
	width: 510px;
}

#top #artwork {
	top: -15px;
	height: 223px;
}

#artwork img {
	width: 100%;
	height: 100%;
}

/*
 * Banner
 */

#banner {
    background: url('/images/access_oars.jpg') no-repeat;
    background-size: 100%;
    border-bottom: 4px solid #333;
    height: 20em;
    margin-right: calc(100% - 100vw);
    position: relative;
}
/*#banner:before {
    background: url('/images/banner-mask.svg') no-repeat; 
    content: '';
    position: absolute;
    height: 15em;
    width: 50em;
}*/

#banner > h1 {
    color: #FFBF0B;
    width: 12em;
    position: absolute;
    top: .5em;
    left: calc(50% - 6em);
    font-size: 4em;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 0 1px #333;
    text-transform: uppercase;
}
@media (max-width: 640px) {
    #banner {
        height: 11em;
    }
    #banner > h1 {
        font-size: 2.5em;
    }
}

#top {
	background-color: #333;
}

#top a img {
	background-color: #333;
}

ul#nav {
	width: 560px;
}

/*
 * Sidebar
 */

div#sidebar{
	background-color: white;

}


aside#sidebar > nav > ul {
    background: transparent;
    font-size: 12px;
}
aside#sidebar > nav > ul > li {
    background: #333;
    margin: 0.5em;
    padding: 0;
    transition: 0.5s background;
}
aside#sidebar > nav > ul > li:hover {
    background: #FFBF0B;
}

aside#sidebar > nav > ul > li > a {
    color: white;
    display: block;
    height: 3.5em;
    position: relative;
}
aside#sidebar > nav > ul > li > a > span {
    left: 50%;
    margin-right: -50%;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%); 
}

.ep_tm_key_tools li {
	display: block;
	float: none;
	padding: 0;
	border-right: none;
	border-left: none;
}

#sidebar ul.ep_tm_key_tools{
	margin-bottom: 0;
}


/*
 * Page Content
 */
.ep_tm_page_content select {
	color: black;
}

#page #content .sys_header {
	width: auto;
}

.ep_tm_page_content {
	width: auto;
}

#page .ep_tm_page_content table {
	border: none;
}

#page .ep_tm_page_content table td, #page .ep_tm_page_content table th {
	border: none;
}

.ep_tm_page_content .ep_form_text {
	color: black;
	padding: 0;
	margin-right: 0;
}

#content .ep_tm_page_content ul li {
	background: none;
}

#page ul.ep_tab_bar li {
	background: none;
	padding: 0;
}

#page a.ep_box_collapse_link, #page .ep_items_filters a {
	text-decoration: none;
}

#page div[epsection="contributors_container"] td {
	padding: 1px;
}

#page div[epsection="contributors_container"] select {
	width: 100%;
}

#ep_eprint_view_panels ul {
	padding-top:0px;
}

#ep_eprint_view_panels ul li {
	background: none;
	padding-left: 0px;
}

.ep_form_action_button {
	background-color: #333;
	border-color: #333;
}

.ep_form_action_button:active {
	background-color: #333;
	border-color: #333;
}

/*
 * Footer
 */
footer {
	background-color: #F4F4F4;
    padding: 2em;
    padding-right: calc(100% - 100vw + 18px);
}

footer h1 {
    font-size: 2em;
}
footer h2 {
    font-size: 1em;
}
footer h3 {
    font-size: 0.75em;
    font-weight: 900;
}

footer > ul {
    margin: 3em 0;
}
footer > ul > li {
    border-top: 1px solid black;
    display: inline-block;
    /*height: 5em;*/
    margin: 0.5em 1em 0.5em 0;
    min-width: 13em;
    width: calc(100% / 4 - 2em);
}
@media (max-width: 960px) {
    footer > ul > li {
        width: calc(100% / 3 - 2em);
    }
}
@media (max-width: 740px) {
    footer > ul > li {
        width: calc(100% / 2 - 2em);
    }
}

footer > ul > li > h3 {
    padding-left: 0.125em;
}

footer > ul > li > ul {
    /*background: #dfd;*/
    height: 5em;
    margin-top: 1em;
    overflow: hidden; 
    padding-left: 0.125em;
}

footer > ul > li > ul > li > a {
    color: #333;
    font-size: 0.75em;
    text-decoration: none;
}
footer > ul > li > ul > li > span {
    font-family: monospace;
    font-size: 0.75em;
}

footer > ul li > ul > li > span > a {
    color: #333;
    letter-spacing: -.5px;
    text-decoration: none;
}

footer img {
    filter: saturate(0);
    float: left;
    height: 2em;
    margin-top: 1em;
    transition: 1s filter;
}
footer .twitter-icon img {
    margin-right: 1em;
}
footer .facebook-icon img {
    margin-left: 0.125em;
    margin-right: 2em;
}
footer img:hover {
    filter: saturate(1);
}

.facet_header {
	color: #606060;
}
.potential_facet, .potential_facet li {
	padding-left: 0 !important;
	font-size: 0.9em;
}

#page .ep_form_input_grid th, #page .ep_form_input_grid td {
	padding: 3px;
}

/*** GRF v3.1 Update ***/
button.clear_button, button.select_button {
	font-weight: 400;
	line-height: normal;
	box-shadow: none;
}

#page a.html_report_print {
	color: white;
	text-decoration: none;
}

.ep_history_xmlblock {
	font-size: 13px;
}

.ep_history_item, .ep_history_action, .ep_history_details {
	max-width: 745px;
}

#content .ep_tab_panel ul {
	list-style-position: inside;
}

.ep_paginate_list {
	width: var(--menu-width);
	padding-left: calc((100% - var(--menu-width)) / 2);	
	padding-right: calc((100% - var(--menu-width)) / 2)
}

.ep_paginate_list > .ep_search_result {
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
}

.eptype_subject_text {
	max-width: 254px;
}

.ep_boolean_list > dd {
	padding-left: 5px;
	padding-top: 0;
}

#page #cc-update {
	position: fixed;
	right: unset;
	left: 0px;
	bottom: -5px;
}

#page #cc-update .cc-link {
	color: transparent;
	background: transparent;
	padding: 0;
	border-radius: 0;
	border: 0;
	opacity: 100%;
	box-shadow: none;
}
#page #cc-update .cc-link > img {
	height: 80px;
	width: 80px;
}