body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	/*background: #d6d6d6;	/* Best to agree with the colour that ged2site uses for Graphviz's background */
        font-size: 14px
}

table {
	border: 0
}

.social_media {
        position: fixed;
        left: 75%;
        width: 20%;
}

#header_container {
	background:#378de5;
	color:white;
	border:1px solid #666;
	height:90px;
	left:0;
	position:fixed;
	width:100%;
	top:0;
	padding: 10px;
	z-index: 999
}

#header {
	line-height:100px;
	margin:0 auto;
	width:940px;
	text-align:center;
}

#container {
	margin:0 auto;
	overflow:auto;
	padding:80px 0;
	/*width:940px;*/
	margin: 25px 25% 0 5%;
}
#content{}

#container img {
	border: 7px solid #fff;
	margin: 5px
}

#footer_container {
	background:#eee;
	border:1px solid #666;
	bottom:0;
	height:60px;
	left:0;
	position:fixed;
	width:100%;
}

#footer {
	line-height:60px;
	margin:0 auto;
	width:940px;
	text-align:center;
}

.citation {
	position: relative;
	bottom: 0.5em;
	font-size: 0.8em;
}

h2 {
        /* position: relative;
        top:3em;
        border: 2px solid #2c4eac; */
        width: 85%;
        margin: auto;
        color:#2C4EAC;
        line-height: 2em;
}

h3 {
        color:#2C4EAC;
        width: 80%;
        margin: auto;
}

/* http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/ */
ul#nav {
        color:#2c4eac;
        font-family:helvetica,arial,sans-serif;margin:0;padding:0;width:30em
}
ul#nav li {
        margin:0;padding:0;list-style:none;margin:0 0 0.3em 0;color:#2c4eac;margin-left:10em;
}
ul#nav li a {
        color:#2c4eac;
        text-decoration:none;display:block;padding:0.3em 0.5em;border:1px solid silver;background:#fff
}
ul#nav li a:hover {
        /*border:1px solid gray;color:#000;background:#efefef*/
        border:1px solid gray;color:#2c4eac;background:#efefef
}

.myform {
	margin:0 auto;
	width:400px;
	padding:14px
}

.myform.myButton,.myButton {
	font:15px arial bold;
	background:#2c4eac;
	-moz-box-shadow:inset 0 1px 0 0 #bbdaf7;
	-webkit-box-shadow:inset 0 1px 0 0 #bbdaf7;
	box-shadow:inset 0 1px 0 0 #bbdaf7;
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#2c4eac),color-stop(1,#378de5) );
	background:-moz-linear-gradient( center top,#2c4eac 5%,#378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c4eac',endColorstr='#378de5');
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#fff;
	padding:6px 24px;
	text-shadow:1px 1px 0 #528ecc
}

.myform.myButton:hover,.myButton:hover {
	background:#378de5;
	background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#378de5),color-stop(1,#2c4eac) );
	background:-moz-linear-gradient( center top,#378de5 5%,#2c4eac 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5',endColorstr='#2c4eac')
}

myButton:active {
	top:1px
}

/* https://www.w3schools.com/howto/howto_js_collapsible.asp */
.collapsible {
  background-color: #378de5;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 10%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

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

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /*background-color: #f1f1f1;*/
  background-color: #ffffff;
}