/* Load fonts */
@font-face {
    font-family: "SourceSansPro-R";
    src: local("SourceSansPro-Regular"), url('SourceSansPro-Regular.otf') format("opentype"); /* non-IE */
}

@font-face {
    font-family: "SourceSansPro-B";
    src: local("SourceSansPro-Bold"), url('SourceSansPro-Bold.otf') format("opentype"); /* non-IE */
}

@font-face {
    font-family: "SourceSansPro-SB";
    src: local("SourceSansPro-Semibold"), url('SourceSansPro-Semibold.otf') format("opentype"); /* non-IE */
}

@font-face {
    font-family: "SourceSansPro-EL";
    src: local("SourceSansPro-ExtraLight"), url('SourceSansPro-ExtraLight.otf') format("opentype"); /* non-IE */
}

@font-face {
    font-family: "SourceSansPro-L";
    src: local("SourceSansPro-Light"), url('SourceSansPro-Light.otf') format("opentype"); /* non-IE */
}

/* Needed to keep footer at bottom */
html {
  height: 100%;
  position: relative;
}

.main-container {
  min-height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  padding-bottom: 7rem;
}
/* End of keep footer at bottom */

* {
margin: 0;
padding: 0;
box-sizing: border-box; /* footer at bottom */
}

*:before, /* footer at bottom */
*:after {
  box-sizing: border-box;
}

body {
font-family: "SourceSansPro-R", palatino;
padding:0;
position: relative; /* footer at bottom */
height: 100%;
max-width:120ex;
min-width:120ex;
background-color:#fefcf9;
}

body {margin-left:2em;margin-right:2em;}
@media(min-width:60em){body{margin-left: 10em;margin-right:auto;}}


body {font-size:14px;}
@media(min-width:60em){body{font-size: 16px;}}


#content {
    display: block;
    margin-top: 2em;
    padding: 3em 0 6em 0;
    border-top: 0.3em solid midnightblue;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 7rem;
  background-color: AliceBlue;
  background-image: url(Penn_Logo.png);
  background-repeat: no-repeat;
  background-position: 10% 50%;
  background-size: 18%;
}

h1 {
  font-family: "SourceSansPro-L";
  font-weight: 600;
}

h2 {
font-family: "SourceSansPro-L";
display: block;
font-size: 150%;
font-weight: 600;
line-height: 120%;
margin-bottom: 0.7em;
margin-top: 2em;
color: black;
}

h3 { /* Media */
  display: block;
  font-size: 150%;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 0.7em;
  margin-top: 0em;
  }

p, li, dl {
margin-bottom: 1em;
line-height: 140%;
}


a {
text-decoration: none;
color: midnightblue;
}

a:active {
 color: #777;
}

a:hover {
text-decoration: underline;
}

/* Navigation */
.box-link {
    display: block;
    padding: 0.1em;
    padding-top: 0.5em;
    padding-bottom: 1em;
    height: 100%;
    vertical-align: inherit;
    color: black;
    letter-spacing: 0.1em;
}

.box-link:hover{ /* hover color for navigation text */
    color: #dcefff;
    text-decoration: none;
    background-color: midnightblue;
}

table#navtable {
    width:100%;
    font-size:105%;
    font-family:"SourceSansPro-R";
    font-weight:400;
    border-collapse: collapse;
    text-align: center;
    padding: 0.4em;
    border:solid 0px midnightblue;
}

#navtable td {
    width:16.666666666667%;
    vertical-align: top;
    padding: 0;
    border-top: 8px solid AliceBlue;
}

#navtable td:hover { /* hover color over navigation */
    border-top: 8px solid midnightblue;
}

#navtable td.current{
    border-top: 8px solid midnightblue;
}

/* Contact info */
dl#contact
{
    width: 100%;
}
dl#contact dt
{
    float: left;
    display: inline;
    padding-right: 1ex;
    font-weight:600;
}

/* Teaching */
dl#teaching dt{
font-weight:700;
margin-top: 2em;
}

dl#teaching dd{
margin-left: 1em;
}

/* Accordion for research and teaching */
.accordion {
  background-color: #eee;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 110%;
  font-weight: 600;
  font-family: "SourceSansPro-L";
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: 400;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: #fefcf9;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}