@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);


@media screen and (min-width: 850px) {
	
	*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
	
	/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
	.clearfix:before, .clearfix:after { content: " "; display: table; }
	.clearfix:after { clear: both; }
	
	body {
		font-family: Calibri, Lucida Grande, sans-serif;
		color: #333333;
	  background-image: url('../images/bg.jpg');
	  background-color: black;
		background-repeat: no-repeat;
		background-position: center center;
		font-size: 16px;
	}
	
	h1 {
	  font-family:'Fredericka the Great';
	  padding-top: 10px;
	  margin-top: 0px;
	  padding-bottom: 0px;
	}
	
	h2 {
	  font-family: Calibri, Lucida Grande, sans-serif;;
	  text-align: left;
	  margin-left: 10px;  
	  margin-bottom: 5px;
	}
	
	a {
		color: black;
		text-decoration: none;
		outline: none;
	}
	
	a:hover,
	a:active {
		color: #777;
	}
	
	a img {
		border: none;
	}
	
	/* Header Style */
	.main {
		position: absolute;
		padding: 2em;
	  top: 50%;
	  left: 50%;
	  height: 728px;
	  width: 1104px;
	  margin-top: -364px;
	  margin-left: -552px;
	}
	
	@media screen and (max-height: 766px) {
	  .main {
	    top: 20px;
	    margin-top: 0;
	  }
	}
	
	@media screen and (max-width: 1000px) {
	  .main {
	    left: -60px;
	    margin-left: 0;
	  }
	}
	
	.booglow {
		position: absolute;
	  top: 42px;
	  left: 113px;
	  height: 559px;
	  width: 881px;
	  box-shadow: 0px 0px 85px 20px rgba(0, 0, 0, .75);
	}
	
	.container {
		height: 100%;
	}
	
	
	
	/* Main Content */
	.main {
		max-width: 69em;
	}
	
	
	.bb-bookblock {
		width: 813px;
		height: 565px;
		margin: 0 auto;
		position: relative;
		z-index: 100;
	
		-webkit-perspective: 1300px;
		-moz-perspective: 1300px;
		perspective: 1300px;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
	.bb-page {
		position: absolute;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transition-property: -webkit-transform;
		-moz-transition-property: -moz-transform;
		transition-property: transform;
	}
	
	.bb-vertical .bb-page {
		width: 50%;
		height: 100%;
		left: 50%;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		transform-origin: left center;
	}
	
	.bb-horizontal .bb-page {
		width: 100%;
		height: 50%;
		top: 50%;
		-webkit-transform-origin: center top;
		-moz-transform-origin: center top;
		transform-origin: center top;
	}
	
	.bb-page > div,
	.bb-outer,
	.bb-content,
	.bb-inner {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: #fff;
	}

	.bb-outer {
	 	-webkit-backface-visibility: hidden;
	 	-moz-backface-visibility: hidden;
	 	backface-visibility: hidden;
	}
 	
	.bb-vertical .bb-content {
		width: 200%;
	}
	
	.bb-horizontal .bb-content {
		height: 200%;
	}
	
	.bb-page > div {
		width: 100%;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	
	.bb-page > div:not(:only-child) {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
	.bb-vertical .bb-back {
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	
	.bb-horizontal .bb-back {
		-webkit-transform: rotateX(-180deg);
		-moz-transform: rotateX(-180deg);
		transform: rotateX(-180deg);
	}
	
	.bb-outer {
		width: 100%;
		overflow: hidden;
		z-index: 999;
	}
	
	.bb-overlay, 
	.bb-flipoverlay {
		background-color: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	
	.bb-flipoverlay {
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	/* */
	
	.bb-bookblock.bb-vertical > div.bb-page:first-child,
	.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
	
	.bb-bookblock.bb-horizontal > div.bb-page:first-child,
	.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
		-webkit-transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
	
	/* Content display */
	.bb-vertical .bb-front .bb-content {
		left: -100%;
	}
	
	.bb-horizontal .bb-front .bb-content {
		top: -100%;
	}
	
	/* Flipping classes */
	.bb-vertical .bb-flip-next,
	.bb-vertical .bb-flip-initial {
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	
	.bb-vertical .bb-flip-prev {
		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	
	.bb-horizontal .bb-flip-next,
	.bb-horizontal .bb-flip-initial {
		-webkit-transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
	
	.bb-horizontal .bb-flip-prev {
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}
	
	.bb-vertical .bb-flip-next-end {
		-webkit-transform: rotateY(-15deg);
		-moz-transform: rotateY(-15deg);
		transform: rotateY(-15deg);
	}
	
	.bb-vertical .bb-flip-prev-end {
		-webkit-transform: rotateY(-165deg);
		-moz-transform: rotateY(-165deg);
		transform: rotateY(-165deg);
	}
	
	.bb-horizontal .bb-flip-next-end {
		-webkit-transform: rotateX(15deg);
		-moz-transform: rotateX(15deg);
		transform: rotateX(15deg);
	}
	
	.bb-horizontal .bb-flip-prev-end {
		-webkit-transform: rotateX(165deg);
		-moz-transform: rotateX(165deg);
		transform: rotateX(165deg);
	}
	
	.bb-item {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		background: #fff;
	}
	
	/* No JS */
	.no-js .bb-bookblock, 
	.no-js ul.bb-custom-grid li {
		width: auto;
		height: auto;
	}
	
	.no-js .bb-item {
		display: block;
		position: relative;
	}
	
	@font-face {
		font-family: 'arrows';
		src:url('../fonts/arrows/arrows.eot');
		src:url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),
			url('../fonts/arrows/arrows.woff') format('woff'),
			url('../fonts/arrows/arrows.ttf') format('truetype'),
			url('../fonts/arrows/arrows.svg#arrows') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	
	#book {
	  background-image: url('../images/whole_book.png');
	  background-repeat: no-repeat;
	  height: 578px;
	  padding-top: 5px;
	}
	
	#note {
	  text-align: center;
	  margin-top: 40px;  
	}
	
	#impressum {
	  text-align: left;  
	  
	}
	
	#yukiyaki {
	  margin-top: 20px;
	  border: 10px solid black;
	  border-radius: 25%;
	  
	}
	
	.page {
	  background-image: url('../images/page.jpg');
	  background-repeat: no-repeat;
	  height: 565px;
	}
	
	
	.halfpage {
	  position: relative;
	  float: left;
	  height: 560px;
	  width: 395px;
	  margin-left: 10px;
	  padding: 20px;
	}
	
	#emailform {
	  text-align: left;
	}
	
	#emailform textarea {
	 width: 330px;
	 height: 200px;
	 resize: none;
	}
	
	#emailform span {
	 display: block; 
	 margin-bottom: 3px; 
	}
	
	#emailform label {
	 display: block; 
	 margin-top: 5px;
	}
	
	.thanks { text-align: center; }
	
	#adrijan {
	
	  position: absolute;
	  top: 100px;
	  right: 10px;
	}
	
	.pfiati {
	  display: none !important;  
	}
	
	.fanart {
	  border: 10px solid black;
	  border-radius: 25%;
	}
	
	.description {
	  text-align: center;  
	}
	
	#flags {
	  float: left;
	  margin-left: 10px;
	  margin-top: 10px; 
	}
	
	#flags a:hover {
	    opacity: 0.4;
	}
	
	.flag {
	  height: 30px;
	  width: 50px;
	  border: 1px solid #333333;
	  border-radius: 50%;
	  margin: 0px;
	  padding: 0px;  
	  
	}
	
	.flagrow {
	  display: block;  
	}
	
	input, textarea
	{
	  border: 1px solid gray !important;
	  outline: none;
	  font-family: Tahoma; 
	}
	
	p {
	  text-align: left;  
	  margin: 10px;  
	}
	
	#about {
	  margin-top: 30px;
	}
	
	#cover {
	  margin-top: 10px;
	  margin-left: -10px;
	  border: 10px solid black;
	  border-radius: 25%;
	
	}
	
	#tagcloud {
	  text-align: justify;
	  margin-left: 10px;
	  float: left;
	  width: 100%;
	  height: 200px;
	}
	
	
	#tagcloud span {
	  margin-right: 5px;  
	}
	
	.small {
	  font-size: 10pt;  
	}
	.average {
	  font-size: 12pt;  
	}
	.big {
	  font-size: 16pt;
	  font-weight: bold;
	}
	
	.bb-custom-wrapper {
		width: 900px;
		position: relative;
		margin: 0 auto 40px;
		text-align: center;
	}
	
	
	.bb-custom-wrapper nav {
		width: 100%;
		height: 30px;
		z-index: 100;
		position: fixed;
		top: 0; 
	  left: 0;
	  right: 0;;
	/*	margin: 1em auto 0;
		position: relative;
		z-index: 0;
		text-align: center;
		display: none;
	*/
	}
	
	.bb-custom-wrapper nav a {
	 display: inline-block;
	 background: url('../images/nav/navb.png') #eddab9;
	 background-repeat: no-repeat;
	 background-position: 3px center;
	 padding: 5px 5px 5px 30px;
	 margin-top: 0px;
	 margin-right: 5px;
	 border-radius: 0 0 5px 5px;
	  border: 1px solid gray;
	  border-top: 0;
	
	 /* display: inline-block;
	  width: 15px;
	  height: 15px;
	  border-radius: 50%;
	  background: #f0f0f0;
	  margin: 3px;
	  box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 2px 1px rgba(255,255,255,0.9);
	*/
	
	}
	
	.bb-custom-wrapper nav a:hover, .bb-custom-wrapper nav a.bb-current {
		background-image: url('../images/nav/nav.png');
	}
	
	
	/* No JS */
	.no-js .bb-custom-wrapper {
		height: auto;
	}
	
	.no-js .bb-custom-content {
		height: 470px;
	}
}

@media screen and (max-width: 850px) {
	h1 { font-family: 'Fredericka the Great'; }
	.bb-item { display: block!important; margin: 10px; }
	form label { display: block; margin-bottom: 15px; }
	form label span { display: block; }
	body { background: mistyrose; font-family: Calibri, Lucida Grande, sans-serif; }
	.flagrow img { width: 40px; height: 27px; }
	input, textarea { width: 80%; }
	textarea { height: 50px; }
	nav { display: none; }
}