@charset "utf-8";

/* New CSS file for HTML5 version of personal web site. */

/* Override browser defaults. */
body {
	margin: 0;
	padding: 0;
	background-color: #dddacb;
	color: #333;
	font-weight: normal;
	font-size: 100%;
}

h1 {
	font-size: 160%;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

h2 {
	font-size: 145%;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

h3 {
	font-size: 130%;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

h4 {
	font-size: 115%;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
}

ul {
	list-style-type: disc;
}

a {
	text-decoration: underline;
	font-weight: normal;
	color: #33f;
}

a:hover {
	color: #000;
	background-color: #b0e4de;
	text-decoration: underline;
}

table {
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
	border-top: 1px solid #ddd;
	max-width: 900px;
}

th, td {
	padding: .25em .5em;
	vertical-align: top;
	border-bottom: 1px solid #ddd;
}

th {
	font-weight: normal;
	text-align: center;
}

td {
	text-align: left;
}

/* Use serif fonts in headings and sans-serif fonts elsewhere. */
body {
	font-family: Verdana, Geneva, sans-serif;
}

/* Make sure new HTML5 block elements are displayed correctly by some 
older browsers. There are other new elements, but I'm not likely to use them. */
header, section, footer, aside, nav, main, article, figure {
    display: block;
}

/* Style for Row 1: Header only */
   
.header {
    margin: 0 2em 0 2em;
    padding: 1em;
    text-align: center;
    color: #fff;
    background-color: #0c6e40;
}

/* Style for Row 2: Nav only */

.topnav {
    margin: 0 2em 0 2em;
    background-color: #eec22d;
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: .75em 1.25em;
	text-decoration: none;
    font-size: 80%;
}

.topnav a:hover {
	background-color: #0c6e40;
	color: #fff;
}

.topnav .icon {
  display: none;
  border: none;
/*  border-color: #fff;
  border-style: solid;
  border-width: 1px; */
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
  }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
  }

}

/* Style for Row 3: Main only */

.main {
    margin: 0 2em 0 2em;
    padding: 1em;
    background-color: #fff;
}
/* Style for Row 4: Main only */

.footer {
    margin: 0 2em 0 2em;
    padding: .6em 1em;
    background-color: #eec22d;
}
.footer p {
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 80%;
    vertical-align: middle;
}