* { padding: 0; margin: 0; }
a img {
  border: 0;
  text-align: center;
  vertical-align: middle;
}

html {
	font: 0.85em sans-serif;
	color: #303030;
	background: #f6f6f6;
}

body {
	margin: 0 auto;
	width: 95%;
	padding: 1em 0;
}

#skip-to-content {
	position: absolute; 
	top: 1em;
	left: 1em;
	text-indent: -999em;
}



/***************
	HEADER
***************/

#header {
	width: 100%;
	background: #9f9f9f;
	border: 1px solid #666666;
	position: relative;
	border-radius: 2px;
	margin-bottom: 1em;
	text-align: center;
}

#header a.title {
	color: #f1f1f1;
	font-size: 2.2em;
	font-weight: bold;
	letter-spacing: -0.05em;
	text-shadow: 1px 1px 1px #111;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	text-decoration: none;
}

/***************
	LEFT COLUMN
***************/

#left {
	width: 11.5em;
	float: left;
}

#left ul {
	list-style: none;
}

#left ul li {
	margin: 0.6em 0;
	border: 1px solid #a2a2a2;
	background: #e3e3e3;
}

#left ul li a {
	display: block;
	padding: 0em 0em;
	background: #e2e2e2;
	font-weight: bold;
	text-decoration: none;
}

#left ul li .home, #left ul li .friends {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}

#left ul li ul li {
	margin: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

#left ul li ul li a {
	padding: 0.5em 0em 0.5em 1.5em;
	font-size: 0.9em;
	font-weight: normal;
}

#left ul li a:hover {
	background-color: #cbcbcb;
	text-decoration: underline;
}

#left ul li.active a {
	background: #1555ad;
	color: white;
}

#left ul li.active li a {
	background: #1555ad;
}

#left ul li ul li .donate {
	background: #eceeec url('../img/make-a-donation.gif') no-repeat 50% 90%;
	padding: 0.7em 1.2em 4.7em 1.2em;
}

/***************
	MAIN CONTENT
***************/

#middle {
	margin: 0 0 0 11.5em;
	padding: 1em 0em 1em 1.5em;
	line-height: 1.3em;
}

#middle a:hover, #footer a:hover {
	color: #0051c0;
}

#middle ul {
	margin: 0.5em 0.5em;
}

#middle h1 {
	border-bottom: 2px solid #cdcdcd;
	padding-bottom: 0.3em;
}

#middle h2 {
	padding-bottom: 0.3em;
	border-bottom: 1px solid #cdcdcd;
}

#middle h3 {
	border-bottom: 1px solid #cdcdcd;
	padding-bottom: 0.2em;
}

#middle ul li {
  display: block;
}

#middle p {
	margin: 1em 0;
}

#middle img {
	margin: 0.5em 0;
}

.flexbox {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexbox .flexbox-half {
  width: 50%;
}

.flex-grow {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

.flex-grow-shrink {
  -webkit-flex: 1 1;
  flex: 1;
}

.listing-item {
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 1em;
  margin-right: 1em;
  vertical-align: middle;
  border-bottom: 2px solid white;
  text-align: left;
}

#projects h2, #news h2 {
  padding: 0.3em 1em;
  border-bottom: 1px solid #fff;
  text-align: left;
  margin-bottom: 0.7em;
}

#news h2 {
  background: #ebd3d3;
}

#projects h2 {
  background: #d3e0eb;
}

#news, #projects {
  background: #efefef;
  vertical-align: top;
  font-size: 0.9em;
  margin: 0.5em;
}

#news a:hover, #projects a:hover {
  background: #ddd;
}

/***************
	DOWNLOAD PAGE
***************/

#middle .download {
  margin-top: 1em;
  margin-bottom: 1em;
}

#middle .download h2 {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0.5em;
}

#middle .download div {
  padding-left: 0.2em;
  padding-right: 0.2em;
}

#middle .download div table {
  border-collapse: collapse;
  width: 100%;
}

#middle .download div .additional-software {
  line-height: 1em;
  font-size: 0.9em;
  max-height: 5.5em;
  overflow-y: auto;
}

#middle .download div table, #middle .download div tr, #middle .download div th, #middle .download div td {
  border: 1px solid;
  text-align: center;
}

/***************
	FOOTER
***************/
#footer {
	padding: 1em 0;
	border-top: 2px solid #e1e1e1;
	text-align: center;
	font-size: 0.7em;
	clear: both;
}