@import url('reset.css');
			
@font-face 			{
					font-family: 'Caecilia';
					src: url('../fonts/CaeciliaLTStd-Roman.otf') format('opentype');
					font-weight: normal;
					font-style: normal;
					}
						
/* general
—————————————————— */

body                {
					font-family: 'Caecilia';
                    font-size: 14px;
                    background-color: #000;
                    background-image: url(../img/bg.jpg);
                    background-size: cover;
                    background-attachment: fixed;
                    color: #ccc;
                    overflow-x: hidden;
					}
	
body,
h2					{ line-height: 2em; }

ul,
ol,
p,
hr					{ margin-bottom: 1.5em; }

a					{ color: #fff; border-bottom: 1px dotted #fff; }

a:hover				{ border-bottom-style: solid; }


/* sections
—————————————————— */

.wrapper			{ position: relative; top: 20px; width: 820px; margin: 0 auto; }

.header				{
					position: relative;
					width: 100%;
					height: 869px;
					}

.complete			{ width: 670px; margin-left: 75px; }
				
.ripped				{ display: none; }

.wtf				{
					display: none; 
					position: absolute;
					left: 3580px;
					top: 0;
					width: 820px;
					height: 800px;
					padding-right: 400px;
					background-image: url(../img/wtf-area.png);
					background-repeat: no-repeat;
					}

.wtf div			{
					position: relative;
					top: 140px;
					width: 560px;
					margin: 0 auto;
					}

.end-area			{
					position: absolute;
					display: none;
					top: 260px;
					left: 50%;
					width: 478px;
					height: 372px;
					margin-left: -239px;
					background-image: url(../img/end-area.png);
					}

.end-area img		{ display: block; width: 400px; margin: 60px auto; }

.play-area			{
					position: absolute;
					display: none;
					top: 390px;
					left: 50%;
					width: 820px;
					height: 300px;
					margin-left: -410px;
					}

.count				{
					z-index: -1;
					position: absolute;
					display: none;
					top: 640px;
					width: 236px;
					height: 237px;
					margin-left: -100px;
					text-align: center;
					background-image: url(../img/count.png);
					}
					
.count span			{
					display: block;
					margin-top: 110px;
					font-size: 16px;
					line-height: 1.5em;
					font-family: 'Georgia';
					font-style: italic;
					}

.score				{ text-align: center; }

.response			{ display: none; width: 400px; margin: 140px auto; }


/* buttons
—————————————————— */

.play-btn			{
					position: absolute;
					display: none;
					bottom: 130px;
					left: 50%;
					height: 60px;
					width: 90px;
					margin-left: -45px;
					background-image: url(../img/play.png);
					}
					
.play-btn:hover		{ background-image: url(../img/play-hover.png); }
					
.again-btn			{
					position: absolute;
					bottom: 150px;
					left: 50%;
					height: 60px;
					width: 112px;
					margin-left: -56px;
					background-image: url(../img/again.png);
					}
					
.again-btn:hover	{ background-image: url(../img/again-hover.png); }
					
.toggle-btn			{
					display: none;
					position: fixed;
					z-index: 100;
					top: 20px;
					right: 20px;
					width: 68px;
					height: 60px;
					background-image: url(../img/info.png);
					}

.toggle-btn:hover	{ background-image: url(../img/info-hover.png); }

.close				{ background-image: url(../img/close.png); }

.close:hover		{ background-image: url(../img/close-hover.png); }

.play-area button	{
					position: absolute;
					width: 169px;
					height: 174px;
					}

.superman-btn		{ left: -80px; opacity: 0.6; background-image: url(../img/superman-hover.png); }

.superman-btn:hover	{ opacity: 1; background-image: url(../img/superman-hover.png); }

.starwars-btn		{ right: -80px; opacity: 0.6; background-image: url(../img/starwars-hover.png); }

.starwars-btn:hover	{ opacity: 1; background-image: url(../img/starwars-hover.png); }