@font-face {
	font-family: Title;
	src: url(/static/IMFellDWPica-Regular.ttf);
}

body {
	background: rgb(192, 161, 84) url(/static/texture.png);
	font-family: "Alegreya", serif;
	color: rgb(30, 30, 30);
}

a {
	text-decoration: none;
	color: rgb(204, 51, 0);
}

.container {
	max-width: 100%;
}


@media all and (min-width: 800px) {
	#birds {
		position: absolute;
		top: 10px;
		right: 0;
		width: 386px;
		height: 121px;
		background: url(/static/birds.png);
		background-position: right top;
		background-repeat: no-repeat;
	}
}

.top {	
	margin: 50px 0 40px 0;
}

nav a {
	padding: 10px 10px 5px 10px;
	background: rgb(238, 221, 187);
}
nav a:hover {
	background: rgb(255, 240, 209);
}
nav a.selected {
	background: rgb(204, 51, 0);
	color: rgb(238, 221, 187);
}
nav.top-nav a {	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

header .title, 
header .title a, 
header .title a:visited {	
	font-family: Title;
	font-size: 350%;
	font-weigt: bold;
	color: white;
	text-shadow: 2px 2px rgba(0, 0, 0, .1)
}
header .subtitle {
	color: rgb(153, 119, 85)
}


.tag-listing {
	margin-top: 20px;
	color: rgb(238, 221, 187);
	font-size: 80%;
}

.post .tags {
	text-align: right;
	font-size: 80%;
}
.post .tags a {
	display: inline-block;
	margin-left: 10px;
}

.post-fragment {
	margin-bottom: 30px;
}
.date {
	color: rgb(153, 119, 85);
	font-size: 125%;
	padding: 8px;
}
.post-title {
	font-family: Title;
	font-size: 200%;
}

.intro {
	font-size: 125%;
	margin-bottom: 20px;
}

.content {
	position: relative;
	padding-bottom: 80px;
	min-height: 100vh;
}
.pane {
	position: relative;
	padding: 20px;
	background: rgb(238, 221, 187);
}
.pane.transparent {
	background: rgba(238, 221, 187, 0.8);
}

.pagination {
	padding: 10px 0;
}

footer {
	background: rgb(0, 70, 70) url(/static/footer-texture.png);
	padding: 30px;
	color: rgb(204, 187, 153);
}
footer a, footer a:visited {
	color: rgb(255, 73, 28);
}

.tr-caption {
	padding: 5px;
	font-size: 75%;
}
.tr-caption h3 {
	font-size: 100%;
}

.image-grid img {
	width: 100%;
}

.blog-image {
	float: right;
	width: 35%;
	font-size: 75%;
	padding: 10px;
	text-align: center;
}
.blog-image img {	
	width: 100%;
}
.blog-image.wide {
	width: 50%;
}
.blog-image.left {
	float: left;
}

.post h1 {
	font-size: 150%;
	color: rgb(153, 119, 85)
}
.post-fragment h1 {
	display: none;
}

.help-icon img {
	display: inline-block;
	padding-bottom: 5px;
}

blockquote {
	background: rgb(255, 240, 211);
	background: linear-gradient(90deg,rgba(255, 240, 211, 1) 0%, rgba(255, 240, 211, 1) 70%, rgba(255, 240, 211, 0) 100%);
	padding: 5px 10px;
	border-left: 1px solid black;
}

a.btn, a.btn.btn-mine:active {
	background: #3498b6;
	border-color: #1b7894;
}
a.btn:hover {
	background: #43a5c3;
	border-color: #1b7894;
}