/*
Float clearing goodness from Handcrafted CSS book
---------------------------------------------------------------------------------------------------------------------------------------------------- */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .group { height: 1%; }
*:first-child+html .group { min-height: 1px; }

body { line-height: 1.9em; color: #fff; background: #0b3065 url(images/bg.jpg) center top fixed no-repeat; background-size: cover; font-family: arial, sans-serif; }

.container { max-width: 60em; margin: 0 auto; padding: 0 2em; }
.text.container { max-width: 38em; text-align: center; margin: 50px auto 100px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); }

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

a { color: #da9803; text-decoration: none; }
a:hover { text-decoration: underline; }

h1.main-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; font-weight: normal; margin: 1.25em; text-align: center; font-size: 2.75em; letter-spacing: -1px; }

p { margin-bottom: 1em; font-size: 1.25em; }
hr { margin: 2em 0; }


/*
Book
---------------------------------------------------------------------------------------------------------------------------------------------------- */
.book-container { width: 375px; margin: 0 auto; display: block;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
}

.book { z-index: 5; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	-webkit-transition: 0.75s;
	-moz-transition: 0.75s;
	transition: 0.75s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 125px 0;
	-moz-transform-origin: 125px 0;
	transform-origin: 125px 0;
}
.book:after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 7px; background: url(images/ridge.png) repeat-y; z-index: 20;
	-webkit-transform: translateZ(1px); /* Fix for flickering in Chrome  */
}
.book:hover {
	-webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
	-moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
	transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
}

/*
Book cover and spine
---------------------------------------------------------------------------------------------------------------------------------------------------- */
.book-cover { position: relative; z-index: 10; }
.book-cover img { vertical-align: bottom; max-width: 100%; height: auto; }

.book-spine { position: absolute; color: #fff; position: absolute; bottom: 0; top: 0; width: 50px; z-index: 5; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); background: url(images/spine.jpg) -64px 0 no-repeat; background-size: auto 100%;
	-webkit-transform: rotateY(-90deg) translateX(-49px);
	-moz-transform: rotateY(-90deg) translateX(-49px);
	transform: rotateY(-90deg) translateX(-49px);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
}
.book-spine h1 { display: block; width: 325px; text-align: left; color: #fff; position: absolute; top: 0; left: 39px; text-indent: 43px; text-transform: uppercase; font-family: "league_gothic_condensedRg", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2em; opacity: 0.75; font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: rotateZ(90deg);
	-moz-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
}
.book-spine:before { display: block; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }