* {box-sizing: border-box;}
body {background: #0a0c0f url("museumbg.png") repeat center fixed; color: #888; font-size: 1rem; line-height: 1.3em; font-family: sans-serif;}

hr {margin: 25px 0; border: 1px dotted #555;}

#container {width: 900px; margin: auto;}
	
	.header {float: left;width: 900px;}
		.header:after {clear:both;}
		.header h1, .header a {
			margin: 25px 0 5px 0; 
			text-decoration: none; 
			color: #007a7e; 
			letter-spacing: 5px; 
			font-family: "Noto Serif", serif;
			font-weight: 100;
			font-style: normal;
			text-shadow: 0 0 5px #007a7e;
			font-size: 3rem;
			}
			
	.blurb {width: 200px; padding: 0 15px 0 0; text-align: right;}
		.blurb h1 {color: #999;}

	.title {width: 700px; padding: 0; }
		.title h1 {color: #bbb;}

	.blurb h1, .title h1 {
		margin: 15px 0 15px 0; font-size: 1.5rem;  letter-spacing: 0px; font-family: "Noto Serif", serif; font-weight: 300; font-style: normal;}

.content {float: left;}

	.directory {width: 200px; padding: 0 15px 0 0; color: #999;}
		.directory h1 {
			background: url("artifactbg.png") repeat; 
			padding: .5em; 
			margin: 0 0 .3rem -5px; 
			border-radius: 10px; 
			font-size: 1.3rem; 
			line-height: .8em;
			font-family: "Noto Serif", serif;font-weight: 300; 
			font-style: normal;
			letter-spacing: 2px;
			}
		.directory h3 {
			color: #007a7e;
			background: url("artifactbg.png") repeat;
			padding: .3em .4em .4em .5em; 
			margin: .5rem 0 .3rem -5px; 
			border-radius: 10px; 
			font-size: 1.2rem; 
			line-height: .9rem; 
			font-family: "Noto Serif", serif;
			font-weight: 300; 
			font-style: normal;
			}
		
		.listing:link, .listing:visited {
			display: block; color: #888;  padding: .2rem .5rem; text-decoration: none; line-height: 1.3rem;}
			.listing:hover, .listing:active {color: #999;}
			
	.exhibition {width: 700px; padding: 0; background: #; color: #888;}
		.artifact {
			width: 100%;
			background: url("artifactbg.png") repeat; 
		    margin: 0 0 25px 0;
			border-radius: 10px;
			padding: .4em 1rem;
			font-size: 1em;
			line-height: 1.3rem;
			}
			.artifact h1 {margin: .2em 0 -.3em 0; color: #007a7e; font-size: 1.5em; font-family: "Noto Serif", serif; font-weight: 300; line-height: 1em; padding: 0;}
			.artifact h2 {margin: .2em 0 -.2em 0; color: #007a7e; font-size: 1.3em; font-family: "Noto Serif", serif; font-weight: 300; line-height: 1em; padding: 0;}
			.artifact h3 {margin: .3em 0; color: #007a7e; font-size: 1.1em; font-family: "Noto Serif", serif; font-weight: 300;}
			.artifact h4 {margin: .3em 0; color: #007a7e; font-size: 1em;   font-family: "Noto Serif", serif; font-weight: 200;}
			.artifact h5 {margin: .4em 0; color: #999999; font-size: .9em;  font-family: "Noto Serif", serif; font-weight: 200;}
			.artifact h6 {margin: .4em 0; color: #888888; font-size: .8em;  font-family: "Noto Serif", serif; font-weight: 200;}
			.artifact a:link, .artifact a:visited {
				color: #007a7e; 
				text-decoration: underline #777 dotted;
				font-family: "Noto Serif", serif;
				}
				.artifact a:hover, .artifact a:active {text-decoration: underline #777 solid;}

		.lyric {
			width: 100%;
			background: url("artifactbg.png") repeat; 
			display: inline-block;
		    margin: 0 0 1rem 0;
			border-radius: 10px;
			padding: .4rem .8rem;
			font-size: .9em;
			font-family: "Noto Serif", serif;
			font-style: italic;
			font-weight: 300;
			line-height: 1.5rem;
			}
			.lyric h4 {margin: 0; color: #007a7e; font-size: 1.2em; font-style: normal; font-family: "Noto Serif", serif; font-weight: 300;}
			.lyric h5 {margin: 0; color: #007a7e; font-size: .9em; font-style: normal; font-family: "Noto Serif", serif; font-weight: 400;}
			.lyric:hover {
				transition: all .3s ease-in-out; 
				background: url("artifactbg_hover.png") repeat; 
				color: #ccc;}
				
				.lyric ul, .lyric li {
					margin: 0 0 0 15px;
					padding: 0;
					list-style-type: circle;
					}

	.gal-container {
		float: left;
		columns: 2;
		column-gap: 1rem;
		width: 100%;
		margin: 0 auto;
		}
		.artifact_gal {
			width: 100%;
			background: url("artifactbg.png") repeat; 
			display: inline-block;
		    margin: 0 0 1rem 0;
			border-radius: 10px;
			padding: 10px;
			font-family: serif;
			}
			.artifact_gal:hover {
				transition: all .3s ease-in-out; 
				background: url("artifactbg_hover.png") repeat; 
				color: #ccc;}
			.artifact_gal img {
				width: 100%;
				border-radius: 5px;
				margin-bottom: 10px;
				}
			.descrip {
				display: block; 
				text-align: center;
				letter-spacing: 2px;
				}

.clear {clear: both;}

.footer {width: 100%; margin: 0 auto; color: #333; text-align: center;}