body, table, td, th, p, .nsfix {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

body {
margin: 0;
padding: 0;
}

@media screen and (max-width: 600px) {
#pennlogo {
display: none;
}
#top-nav {
display: none;
}
#content {
margin: 0;
}
}

@media screen and (min-width: 601px) {
#content {
font-size: 1.2em;
margin: 0 auto;
max-width: 50em;
}
}

#container {
width: 100%;
}

#header {
width: 100%;
height: 65px;
width: 100%;
background-color: #141E5C;
}

#logo {
color: white;
float: left;
padding: .6em;
text-decoration: none;
}

#logo a {
color: white;
font-size: 2.5em;
font-weight: bold;
text-decoration: none;
}

#header #pennlogo {
float: right;
padding-right: 20px;
}

#top-nav {
width: 100%;
height: 1.5em;
background-color: #AABCDE;
padding: 5px;
color: #141E5C;
font-weight: bold;
font-size: .9em;
}

#top-nav #nav {
float: left;
padding: 4px 0;
}

#top-nav #search {
float: right;
padding: 0 20px 0 0;
}

#top-nav #nav a, #top-nav #nav a:visited {
padding: 0 .8em;
text-decoration: none;
color: #141E5C;
}

#top-nav #nav a:hover {
color: #5073BC;
}

#content {
padding: 10px 20px;
margin-bottom: 12em;
}

#bottom-nav {
width: 100%;
height: 1em;
background-color: #141E5C;
padding: 5px;
color: #fff;
font-weight: bold;
font-size: .9em;
clear: both;
}

#bottom-nav #copy {
float: left;
padding: 0 1em;
}

#bottom-nav #contact {
float: right;
padding: 0 1em;
}

#bottom-nav #contact a, #bottom-nav #contact a:visited {
text-decoration: none;
color: #fff;
}

#bottom-nav #contact a:hover {
color: #a9bcde;
}

#updates {
overflow: auto;
margin: 30px 0 0 0;
}

a img { border: none; }

a:hover {
text-decoration: underline;
color: #990000;
}

blockquote {
background-color: #dddddd;
margin: 0 0 0 1em;
padding: .5em 1em;
}

code, pre, samp, kbd {
font-family: Courier New;
font-size: 1em;
}

strong {
color: #036;
}

h1 {
font-size: 1.5em;
color: #036;
}

h2 {
font-size: 1.3em;
color: #069;
}

h3 {
font-size: 1.1em;
color: #036;
}

h4 {
font-size: 1em;
color: #069;
}

ul, ol {
}

li {
padding: 0 0 .25em 0;
}

/* Basic table with thin solid black border and some padding */
.thin {
color: black;
empty-cells: show;
border: solid 1px black;
border-collapse: collapse;
background-color: white;
margin-bottom: 1em;
}
.thin caption {
font-weight: bold;
margin: auto;
border: solid 1px black;
background-color: #d3d3d3;
}
.thin td, .thin th {
color: black;
border: solid 1px black;
padding: 4px;
}
.thin td {
text-align: left;
vertical-align: top;
}
.thin thead th {
color: #363636;
background-color: #e6e6e6;
}

/* Alternate row colors */
table.alternate tr:nth-child(odd) td {
color: black;
background: #dae3fc;
}
table.alternate tr:nth-child(even) td {
color: black;
background: #ffffff
}

/* class to highlight paragraph or div containing important information */
.important {
border: 2px solid #b00;
padding: 1em 1em;
}

/* class to highlight paragraph or div containing warnings */
.warning {
border: 2px solid orange;
padding: 1em 1em;
}

/* class to highlight paragraph or div containing notes */
.note {
border: 2px solid lightgrey;
padding: 1em 1em;
}

/* apply this class to paragraphs enclosing featured standalone links (indent, enlarge link) */
.featured {
text-indent: 1em;
}

/* enlarge featured link */
.featured a {
font-size: 1.2em;
}