/* ==== Fonts ==== */

@font-face{ 
	font-family: 'Oxygen Mono';
	src: url('fonts/Oxygen_Mono/OxygenMono-Regular.ttf') format('truetype');
}
@font-face{ 
	font-family: 'Sanchez';
	src: url('fonts/Sanchez/Sanchez-Regular.ttf') format('truetype');
}
@font-face{ 
	font-family: 'Permanent Marker';
	src: url('fonts/Permanent_Marker/PermanentMarker.ttf') format('truetype');
}

/* ==== Body, Basics ==== */

html {
	min-height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
	/* background: red; */
}
body {
	min-height: 98%;
	height: 98%;
	width: 98%;
	padding: 0;
	margin: 0 1% 1% 1%;
	/* border: solid 1em rgba(0,0,0,0.5); */
	/* box-shadow: inset 0 0 5em red; */
	background-color: #bbb;
	background: -webkit-linear-gradient(top, #cccccf, #403838) fixed;
	background: linear-gradient(top, #cccccf, #403838) fixed;
	background-attachment: fixed;
	overflow: auto;
	font-family: 'Sanchez', 'Oxygen', sans-serif;
}

button {
    outline: none;
}

.state {
	display: none;
}
strong {
	font-family: 'Permanent Marker', cursive;
}

/* === HEADER === */

header {
	height: 7em;
	margin-top: 1%;
	background-image: url('../images/octopus-eye_336x112.png');
	background-size: 336px 112px;
	background-repeat: no-repeat;
	background-position: center center;
}
header > h1 {
	width: 90%;
	text-align: center;
	margin: 0 auto;
	font-family: 'Permanent Marker', cursive;
	font-size: 200%;
	text-shadow: 2px 2px 1px white, -2px 2px 1px white, -2px -2px 1px white, 2px -2px 1px white;
	letter-spacing: 0.25em;
}
	.conspiracyWord {
		display: inline-block;
		margin: 0 2.1em 0 0em;
	}
	.clickerWord {
		display: inline-block;
		margin: 0 0 0 0;
	}
	h1 .version {
		font-family: 'Sanchez', 'Oxygen', sans-serif;
		font-size: 50%;
		display: inline-block;
		margin: 0 0 0 0;	
		letter-spacing: 0;
		text-shadow: none;
		opacity: 0.25;
	}


nav {
	display: none;
	position: fixed;
	z-index: 10;
	top: 0;
	width: 100%;
	margin: 0 -1% 0 -1%;
	text-align: center;
	background-color: rgba(0,0,0,0.85);
	font-family: 'Sanchez', 'Oxygen', sans-serif;
	font-family: 'Permanent Marker', cursive;
}
	nav > a {
		display: inline-block;
		box-sizing: border-box;
		width: 25%;
		height: 100%;
		padding: 1em;
		text-decoration: none;
		color: white;
		font-weight: bold;
	}
	nav > a:hover {
		background-color: rgba(0,0,0,1);
	}
	nav > a:active {
		background-color: white;
		color: black;
	}

	body.scrolled-down nav {
		display: block;
	}

	nav > a.industry { color: rgba(203,199,163,1); }
	nav > a.politics { color: rgba(163,191,161,1); }
	nav > a.media { color: rgba(156,165,185,1);}



.side-nav-menu {
	display: block;
	position: absolute;
	font-size: 12px;
	right: 1em;
	width: 44px;
	height: 1em;
	padding-top: 26px;
	text-align: center;
	background-position: top center;
	background-color: rgba(0,0,0,0.2);
	background-repeat: no-repeat;
	background-image: url('../images/eye1_32x32.png');
	font-family: 'Permanent Marker', cursive;
	color: white;
	text-decoration: none;
	border-radius: 44px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
	.state-menu .side-nav-menu {
		background-image: url('../images/eye2_32x32.png');
	}


section.intro
,section.walkthru {
	width: 90%;
	margin: 2em auto 10em auto;
	font-family: 'Sanchez', serif;
	font-size: 130%;
	line-height: 1.5em;
}
section.intro {
	max-width: 40em;
}
	.nwo {
		font-size: 140%;
		font-family: 'Permanent Marker', cursive;
		text-align: center;
	}

	section.intro  button
	,section.walkthru button	{
		display: block;
		width: 50%;
		margin: 1em auto;
		padding: 0.5em 0;
		font-size: 140%;
		font-family: 'Permanent Marker', cursive;
		text-align: center;
		cursor: pointer;
		border: none;
		border-radius: 0.5em;
		background-color: rgba(255,255,255,0.5);
		box-shadow: 0 0.1em 0 rgba(0,0,0,0.5);
		
	}
section.walkthru {
	width: 90%;
	height: 100&;
	padding: 280px 4% 10em 4%;
	margin-top: 0;
	position: absolute; 
	z-index: 50;
	background-color: rgba(255,255,255,0.5);
}


section.progress {
	position: relative;
	text-align: center;
	margin: 0 auto;
	max-width: 100em;
}
	.mindControlPercent, 
	.upgradeUnlockedPercent {
		position: absolute;
		top: 0;
		font-family: 'Sanchez', 'Permanent Marker', cursive;
		color: rgba(0,0,0,0.9);
		font-size: 0.8em;
		line-height: 2em;
		z-index: 2;
	}
	.mindControlPercent {
		left: 1em;
	}
	.upgradeUnlockedPercent {
		right: 1em;
	}

	.progressVal {
		font-family: 'Permanent Marker', cursive;
		position: absolute;
		display: none;
		height: 1.6em;
		line-height: 1.6em;
		top: 0;
		width: 100%;
		text-align: center;
	}
	section.progress:hover .progressVal {
		display: block;
	}
	.progressBar {
		height: 1.6em;
		background: rgba(0,0,0,0.1);
	}
	.progressBar > div {
		margin: 0 auto;
		height: 100%;
		background: rgba(0,0,0,0.4);
	}


.threeCols {
	display: none;
	width: 100%;
	min-height: 10em;
	max-width: 100em;
	margin: 0 auto;
	/* overflow: auto; */
}

	.threeCols > section {
		display: block;
		width: 31%;
		margin: 0 1%;
		float: left;
		padding-bottom: 5em;
	}
	.threeCols > section h2 {
		font-family: 'Permanent Marker', cursive;
		text-align: center;
		margin: 0.5em 0 0 0;
		padding: 0;
		color: rgba(255,255,255,0.9);
		letter-spacing: 0.125em;
		text-shadow: 0 0.1em 0 rgba(0,0,0,0.25);
	}

.focus {
	position: relative;
	width: 100%;
	padding: 1em 0;
	/* background: #aaa; */
}
	.focus .arrow {
		position: absolute;
		width: auto;
		min-width: 4em;

		padding: 0.5em;
		border-radius: 0.5em;
		font-family: 'Oxygen Mono', monospace;
		color: #333;
		cursor: pointer;
		text-align: center;	
	}
	.arrow:hover {
		background-color: rgba(0,0,0,0.25);
		border-color: white;
	}
	.arrow.leftOut
	,.arrow.rightOut {
		border-radius: 0 0 0.5em 0.5em;
		border-top: dashed 3px rgba(255,255,255,0.5);	
	}
	.arrow.up {
		width: 6em;
		border-radius: 0 0.5em 0.5em 0;
		border-left: dashed 3px rgba(255,255,255,0.5);
		margin-bottom: -1em;
		margin-right: -2em;
	}
	
	.arrow.leftOut:after {
		position: absolute;
		top: -10px; left: -10px;
		content: " ";
		width: 0; height: 0;
		border: solid 10px transparent; 
		border-right: solid 10px white;
	}
	.arrow.rightOut:after {
		position: absolute;
		top: -10px; right: -10px;
		content: " ";
		width: 0; height: 0;
		border: solid 10px transparent; 
		border-left: solid 10px white;	
	}
	.arrow.up:after {
		position: absolute;
		top: -10px; left: -10px;
		content: " ";
		width: 0; height: 0;
		border: solid 10px transparent; 
		border-bottom: solid 10px white;	
	}
	.arrow .details {
		display: none;
		/* position: absolute; */
		font-size: 80%;
		color: white;
		margin: 0 -5em 0 -5em;
		text-shadow: 1px 1px 1em black;
	}
	.arrow:hover .details {
		display: block;
		
	}
	
	/* Positions of arrows */
	.arrow.leftOut {	
		top: 20%;
		left: 0;
	}
	.arrow.rightOut {
		top: 50%;
		right: 0;
	}
	.arrow.up {
		bottom: 0;
		right: 0;
	}
	/* Active arrows */
	.arrow.active {
		background-color: rgba(255,255,255,0.5);
		border-width: 3px;
	}
	.arrow.active:hover {
		background-color: rgba(255,255,255,0.3);
	}
	/* Sector-specific arrow styles */
	.industry .arrow.leftOut {
	
	}
	.industry .arrow.rightOut
	,.politics .arrow.rightOut {
		min-width: 8em;
		margin-right: -4em;
	}
	.politics .arrow.leftOut
	,.media .arrow.leftOut	{
		min-width: 8em;
		margin-left: -4em;
	}	


.clicker {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0px auto;
	cursor: pointer;
	background-color: rgba(0,0,0,0.2);
	background-position: 50% 50%;
	background-size: 100% 100%;
	border-radius: 0.5em;
	box-shadow: 0 0.25em 0 rgba(0,0,0,0.5);	
}
	.clicker:hover {
		width: 206px;
		height: 206px;
		margin: -3px auto;
	}
	.clicker:active {
		width: 190px;
		height: 190px;
		margin: 5px auto;
		/* box-shadow: 0 0.25em 0 rgba(0,0,0,0.5), 0 0 4em rgba(255,255,255,0.75); */
	}

.industry .clicker {
	background-image: url('../images/industry_200x200.png');
	background-color: rgba(200,180,0,0.2);
}
.politics .clicker {
	background-image: url('../images/politics_200x200.png');
	background-color: rgba(0,150,0,0.2);
}
.media .clicker {
	background-image: url('../images/media_200x200.png');
	background-color: rgba(0,50,150,0.2);
}




.metrics {
	display: none;
	padding: 1em 0;
	margin: 0 0 1em 0;
	/* border-bottom: 0.1em solid #333; */
	
	text-align: center;
	font-size: 1.2em;
	background-color: rgba(0,0,0,0.2);
	/* color: white; */
	background-repeat: no-repeat;
	background-position: 0.5em 0.5em;
	background-size: 1.5em 1.5em;
}


.industry  .metrics {	background-color: rgba(200,180,0,0.2); 
	padding: 2.5em 0;
}
.politics .metrics {	background-color: rgba(0,150,0,0.2); }
.media .metrics {		background-color: rgba(0,50,150,0.2); }

/*
.fixed .metrics {
	position: fixed;
	top: 0;
	width: 32%;	
	z-index: 5;
	box-shadow: 0 0 0.2em rgba(0,0,0,0.9);
}
.fixed .industry .metrics {	
	background-color: rgba(200,200,170,1); 
	background-image: url('../images/industry_200x200.png'); 
}
.fixed .politics .metrics {	background-color: rgba(170,200,170,1); 
	background-image: url('../images/politics_200x200.png');
}
.fixed .media .metrics {	background-color: rgba(170,180,200,1); 
	background-image: url('../images/media_200x200.png');
}
*/

	.mainMetric {
		font-size: 140%;
	}
	.metrics .perClick {
		display: none;
	}
	.money:before {
		display: inline-block;
		margin-right: 0.5em;
		content: '$';
		opacity: 0.5;
	}
	.units {
		font-size: 80%;
		opacity: 0.5;
	}	
	/*
	.metrics .money:after {
		display: inline-block;
		margin-left: 1em;
		content: 'k';
		opacity: 0.5;
	}
	*/
	.val {
		font-family: 'Oxygen Mono', monospace;
	}


.upgradeList {
	display: block;
	padding: 0; margin: 0;
	list-style: none;
	font-family: 'Sanchez', serif;
}
.upgradeList > li { /* same as .upgrade */
	display: block;
	min-height: 4em;
	width: 100%;
	margin: 0.5em 0;
	color: #eee;
}
.upgradeList > li:hover {
	color: white;
	cursor: pointer;
}

	/* FRONT */
	.upgrade .front {
		background: rgba(0,0,0,0.4);
		padding: 1em;
	}
	.upgrade .name {
		display: block;
		font-size: 1.2em;
		float: left;
		width: 50%;
	}
	.upgrade .count {
		display: block;
		float: left;
		font-size: 2em;
		min-width: 10%;
		color: rgba(0,0,0,0.75);
	}
	.upgrade button.buy {
		/* position: absolute;
		top: 0.5em; right: 0.5em;
		*/
		float: right;
		height: 100%;
		width: 40%;
		padding: 0.5em;
		border: 0;
		font-size: 1.2em;
		cursor: pointer;
		background-color: rgba(0,0,0,0.25);
		color: inherit;
		-webkit-transition: all 0.25s;
		transition: all 0.25s;
		overflow: visible;
		border-radius: 0.5em;
		box-shadow: 0 0.25em 0 rgba(0,0,0,0.5);
	}
	.buyText {
		display: none;
		margin: -1em 0 0 0;
		opacity: 0.5;
		font-family: 'Permanent Marker', cursive;	
	}
	.upgradeList > li button.buy:hover .buyText {
		opacity: 1.0;
	}
	button.buy:hover {
		background-color: rgba(0,0,0,0.4);
	}
	button.buy:active {
		background-color: rgba(0,0,0,0.6);
		margin: 0.3em 0 -0.3em 0;
	}
	/* BACK */
	.upgradeList > li .back {
		background: rgba(0,0,0,0.6);
	}
	.upgradeList > li.flipped .back {
		padding: 1em;
	}

	/* Owned, Afford, ... */
	.upgrade.notOwned.cannotAfford {
		opacity: 0.5;
	}
	.upgrade.notOwned.afford {
		opacity: 1.0;
	}
	.upgrade.notOwned.cannotAfford .front {
		background: rgba(0,0,0,0.25);
	}
	.upgrade.cannotAfford button.buy {
		background-color: transparent;
		box-shadow: none;
	}
	.cannAfford button.buy:hover {
		background-color: transparent;
	}
	.upgrade.unknown {
		display: none;
	}

.upgrades-tease {
	text-align: center;
	font-size: 80%;
	opacity: 0.8;
}


/* Flip-Card */

.flipcard, .flip {
	display: block;
	cursor: pointer;
	-webkit-perspective: 800;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}
.flipcard.flipped, .flip.flipped {
    
}
.flipcard .face, .flipcard .front, .flipcard .back
,.flip .face, .flip .front, .flip .back {
    -webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.5s, height 0.25s;
	overflow: hidden;
}
.flipcard .front, .flip .front {
	height: auto;
}
.flipcard.flipped .front, .flip.flipped .front {
	-webkit-transform: rotateY(-180deg);
	height: 0;
	padding: 0; 
	margin: 0;	
}
.flipcard .back, .flip .back {
    -webkit-transform: rotateY(180deg);
	height: 0;
	padding: 0; 
	margin: 0;
}
.flipcard.flipped .back, .flip.flipped .back {
	-webkit-transform: rotateY(0deg);
	height: auto;
}
	
/* === FOOTER === */

footer {

}

/* === Other States === */

.congrats {
	font-size: 200%;
	padding: 2em 0;
	text-align: center;
}


/* === Menu === */

.menu {
	display: none;
	padding: 1em;
	margin: 1em 0 0 0;
	overflow: auto;
	background: rgba(20,20,20,0.85);
	color: #eee;
	font-size: 120%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	font-family: 'Sanchez', serif;
}
	.menu > div {
		float: left;
		width: 45%;
		min-width: 10em;
		margin: 0 2%;
	}
		.about {
			text-shadow: 0 0.1em 0.3em black;
		}
		.about a {
			color: #777E74;
		}
		.about a:visited {
			color: #78777F;
		}

.options button {
	display: block;
	margin: 1em auto;
	min-width: 10em;
	cursor: pointer;
	font-family: 'Permanent Marker', cursive;
	font-size: 140%;
	border: solid .2em transparent;
	border-radius: 0.5em;
	background-color: #eee;
}
	.options button:hover {
		background-color: #fff;
		border: solid .2em black;
	}
	.options button.stopLoop
	,.options button.startLoop {
		display: inline-block;
		font-size: 90%;
	}

	.options button.on {

	}
	.options button.on:before {
		content:  "[\2713] "
	}
	.options button.off:before {
		content:  "[ ] "
	}

.lastSaved {
	text-align: center;
	margin: 1em 0;
}

/* floating number */
.click-earn {
	display: block;
	position: absolute;
	background-color: rgba(255,255,255,0.5);
	padding: 0.25em 0.5em;
	border-radius: 1em;
	/* font-family: 'Permanent Marker', cursive; 
	font-size: 130%;
	*/
	font-family: 'Oxygen Mono', monospace;
	font-size: 120%;
	box-shadow: 0 1em 1em rgba(0,0,0,0.2);
}

/* Notifications */

.notifications {
	text-align: center;
}




/* Helpers */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}















/* === Media Queries for RESPONSIVE === */



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

	.clicker {
		width: 120px;
		height: 120px;
	}
	.clicker:hover {
		width: 125px;
		height: 125px;
	}
	.clicker:active {
		width: 115px;
		height: 115px;
	}
	footer {
		position: static;
	}
	
}


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

	body > header > h1 {
		font-size: 110%;
	}
	
	.progressVal {
		display: block;
	}
	
	.clicker {
		width: 100px;
		height: 100px;
	}
	.clicker:hover {
		width: 105px;
		height: 105px;
	}
	.clicker:active {
		width: 95px;
		height: 95px;
	}
	.threeCols > section h2 {
		font-size: 130%;
	}
	.upgrade button.buy {
		width: auto;
		float: none;
		clear: both;
	}
	.upgrade .front {
		padding: 0.5em;
	}
	.focus .arrow {
		position: relative;
		width: auto;
		height: auto;
		margin: 0.75em !important;
		padding: 2em 0.5em 0.5em 0.5em;
		border: solid 1px rgba(255,255,255,0.3);
		border-radius: 0.5em;
		background-color: rgba(255,255,255,0.2);
		line-height: 1.5em;
		font-size: 80%;
		box-shadow: 0 0.25em 0 rgba(0,0,0,0.5);
	}
	.focus .arrow:after {
		top: 0.5em;
		bottom: 0;
		left: 50%;
	}
	.focus .arrow.active {
		background: rgba(255,255,255,0.75);
	}
	.arrow .details {
		display: block;
	}
	
	.about {
		font-size: 90%;
	}
	
	.mindControlPercent, 
	.upgradeUnlockedPercent {
		display: none;
	}

}


@media only screen and (max-height : 35em) {
	footer .foot {
		max-height: 15em;
		background: #222;
	}
	.fixed .metrics {
		position: static;
		width: auto;
	}
	footer {
		position: static;
	}
}


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

	header {
		margin-top: 3.5em;
	}
	.threeCols > section {
		width: auto;
		float: none;
	}
	.fixed .metrics {
		position: static;
		width: auto;
	}
	
	.clicker {
		width: 120px;
		height: 120px;
	}
	.clicker:hover {
		width: 125px;
		height: 125px;
	}
	.clicker:active {
		width: 115px;
		height: 115px;
	}	
	.focus .arrow {
		padding: 0.5em;
		font-size: 100%;
	}
	.focus .arrow:after {
		display: none;
	}
	/*
	.upgradeList {
		max-height: 20em; overflow: auto;
	}
	*/
	.menu > div {
		width: 100%;
	}

	nav {
		display: block;
	}
	.side-nav-menu {
		display: none;
	}
}