body {
	/* background-image:  url("hex_tesselation.jpg"); */
	/* background-repeat:  repeat; */
	background-color: #D5D5D5;
	margin: 0;
	font-family: 'Josefin Sans';
}

.full_width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

a.div_link {
	text-decoration: none;
}

div.page_title {
	width: 100%;
	background-color: #062F4F;
	border-top: 0.25em solid #264F6F;
	padding: 0.5em 0em 0.75em 0em;
	text-align: center;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

	font-size: 3em;
	color: #FFF;
}

div.footer {
	width: 100%;
	height: 1em;
	position: absolute;
	bottom: 0;

	background-color: #373737;
	border-top: 0.25em solid #575757;
	padding: 0.5em 0em 0.75em 0em;
	text-align: center;
	box-shadow: 1px -1px 5px rgba(0, 0, 0, .5);

	font-size: 1em;
	color: #FFF;
}

div.content_wrapper {
	min-height: 100%;
	margin: 0;
	padding-bottom: 2.5em; /* make space for footer */
	position: relative;
}

div.main_area {
	max-width: 900px;
	margin: auto; /* centers div */
	min-height: 100%;
	background: #F4F4F4;
	padding-bottom: 4em; /* make space for footer */

	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

div.model_list {
	max-width: 200px;
	background: #F4F4F4;
	float: left;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	margin: 2em;
}

div.model_title {
	background-color: #59375A;
	border-top: 0.25em solid #94618E;
	font-size: 2em;
	padding: 0.5em 20% 0.75em 1em;
	text-align: left;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

	color: #FFF;
	z-index: 1;
}

img.header_image {
	width: 40%;
	margin-top: -90px;
	float: right;
	z-index: 2;
}

img.crease_pattern {
	width: 60%;
	float: right;
}

div.current_model {
	overflow: auto; /* makes div expand to fill remaining space */
	padding: 2em;
}

div.model_details {
	background: #F4F4F4;
	overflow: visible;
	padding: 2em;
	padding-top: 1em;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

	font-family: 'Roboto';
	font-weight: 400;
}

div.main_area div.model_display {
	width: 30%;
	margin: 1.4%;
	display: inline-block;
	vertical-align: bottom;
}

@media only screen and (max-width: 500px) {
	div.main_area div.model_display {
		width: 45%;
		margin: 2%;
		display: inline-block;
		vertical-align: bottom;
	}
}

@media only screen and (max-width: 400px) {
	div.main_area div.model_display {
		width: 95%;
		margin: 2.5%;
		display: inline-block;
		vertical-align: bottom;
	}
}

div.model_list div.model_display {
	max-width: 90%;
	margin: 4%;
	display: inline-block;
	vertical-align: bottom;
}

div.model_name {
	background-color: #373737;
	border-top: 0.25em solid #575757;
	color: #FFF;
	padding: 0.75em;
	padding-top: 0.5em;
	margin-top: -1em;
	text-align: left;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

div.model_display:hover div.model_name {
	background-color: #9F509F;
	border-top: 0.25em solid #BD75BF;
}

div.model_display:hover img {
	/*filter: url(#monochrome);*/
	/*-webkit-filter: url(#monochrome);*/
}

div.model_display img {
	width:  100%;
}

.defs-only {
  position: absolute;
  height: 0; width: 0;
  overflow: none;
  left: -100%;
}
