body {
/*
	background-image:url('../images/bg.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	height: 100%;
*/
}

.header-container {
	margin-top: 0;
	width: 100%;
	background-image:url('../images/bg.jpg');

	background-repeat:no-repeat;
	background-size: cover;
	background-position:center;
	background-color: none;
}

.body-container { 
	background-color: white;
	width: 50em;
	max-width: 100%;
	margin: auto;
/* 	margin-top: 0; */
	
}

.top-bar {
	background-color: #9387ab;
}

.top-bar-section li:not(.has-form) a:not(.button) {
	background-color: #9387ab;
}

@media only screen and (min-width: 64.0625em) {
	.top-bar-section {
		display: inline-block;
	}
}

div.hr {
	margin-top: 1em;
	margin-bottom: 1em;
  height: 25px;
  background: #fff url(../images/bird_sep.jpg) no-repeat scroll center;
}
div.hr hr {
  display: none;
}

.top-space {
	margin-top: 10px;
}

.no-decoration {
	list-style-type: none;
}

.top-bar-section ul li > a {
	font-size: 1em;
}

/** this is needed when there are interactive elements inside the <a> tag. Right now there are not */
.clickable-div {
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('images/empty.gif');

}

.paypal-dropdown {
	padding-right: 1em;
}

.flex-row {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.framed-row {
	margin-top: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	border: 1px #7e7e7e;
	box-shadow: 1px 1px 4px #888;
}