@font-face {
    font-family: 'neoubold';
    src: url('../fonts/neou-bold-webfont.eot');
    src: url('../fonts/neou-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/neou-bold-webfont.woff') format('woff'),
         url('../fonts/neou-bold-webfont.ttf') format('truetype'),
         url('../fonts/neou-bold-webfont.svg#neoubold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'neouthin';
    src: url('../fonts/neou-thin-webfont.eot');
    src: url('../fonts/neou-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/neou-thin-webfont.woff') format('woff'),
         url('../fonts/neou-thin-webfont.ttf') format('truetype'),
         url('../fonts/neou-thin-webfont.svg#neouthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body{

	height:100%;

	font-family:'neouthin', Verdana, Geneva, sans-serif;
	font-size: 1em;

	color:#888888;

	min-height:400px;
	min-width:300px;

}

h1, h2, h3, h4{

	font-weight:lighter;

}

a{

	text-decoration:none;
	color:#888888;

}

.post-wrapper{

	position:relative;

	width:100%;
	height:100%;

}

.post{
	
	width:60%;
	height:90%;

	position:absolute;
	
	top:0;
	bottom:0;
	right:0;
	left:0;
	margin:auto;

}


.post-info{

	position:relative;

	width:100%;
	height:33%;

	max-height:40px;

}

.post-info .post-footer-titles{

	line-height:2.5em;

}

.post-info img{

	position:absolute;

	width:auto;
	height:100%;

	right:0;
	top:0;
	left:0;
	bottom:0;

	margin:auto;

}

.post-header{

	text-align:right;

	background-color:white;

	position:relative;

	width:100%;
	height:10%;
	top:0px;

}

.post-header .post-info{

	height:100%;

}

.post-header .post-info img{

	height:70%;

	left:auto;
	bottom:auto;

}

.post-content{

	position:relative;

	height:60%;

}

.post-content-image{

  max-width:100%;
	width:auto;
	max-height:100%;
	height:auto;

	position:absolute;

	top:0;
	bottom:0;
	right:0;
	left:0;
	margin:auto;

}

.post-footer{

	position:relative;

	width:100%;
	height:30%;
	bottom:0px;

}

.post-footer.first.first .post-footer-button.up{

	display:none;

}

.post-footer.first.last .post-footer-button.down{

	display:none;

}

.post-footer-titles{

	position:absolute;

	left:0;
	right:0;

	margin:auto;

	text-align:center;

}

.post-footer-contact{

	position:absolute;

	text-align:right;

	right:0;
	bottom:0;

	z-index:1;

}

.post-footer-button{

	position:absolute;

	height:100%;
	width:100%;

	top:0;
	bottom:0;

	max-width:40px;
	max-height:40px;

	margin:auto;

	background-color:white;

	cursor:pointer;

}

.post-footer-button.left{

	left:20%;

}

.post-footer-button.right{

	right:20%;

}

.post-footer-button.down, .post-footer-button.up{

	left:0px;
	right:0px;
	margin:auto;

}

.post-footer-button.thumbnails{

	left:0;
	bottom:0;

}

.thumbnail-view{
	
	position:absolute;

	z-index:100;
	background: rgb(255, 255, 255); /* Fix for lack of alpha support */
  background: rgba(255, 255, 255, .9);

}

.thumbnail-view-image{

	max-width:80%;
	width:auto;
	max-height:80%;
	height:auto;

	position:absolute;

	top:0;
	bottom:0;
	right:0;
	left:0;
	margin:auto;

}

@media only screen and (max-width: 700px) {

	.post{

		width:100%;

	}

	.post-header{

		text-align:center;

	}

	.post-header .post-info img{

		height:60%;

		left:0;

	}

	.post-info{

		font-size: .5em;

	}

	.post-info .post-footer-titles{

		line-height: 3.5;
		
	}

	.post-footer-contact{

		position:relative;

		text-align:center;

	}

	.post-footer-button.down{

		position:relative;

		text-align:center;

	}

	.post-footer-button.thumbnails{

		display:none;

	}
}

@media only screen and (max-height: 350px) {


	.post-info{

		font-size: .3em;

		line-height: 1.5em;

	}

	.post-footer-button.up, .post-footer-button.down{

		display:none;

	}

	.post-footer-contact{

		font-size: .6em;

		line-height: .8em;

	}
}