body {
	background-image: url('img/groovepaper.png');
}

a {
	color: black;
	text-decoration: none;
}
a:hover {
	color: #003f7f;
	border-color: black;
}
.column {
	float: left;
	width: 61px;
}
.cell {
	float: left;
	width: 62px;
	height: 94px;
	border: 1px;
	border-style: dashed none none dashed;
/*	border-color: #DBDBDB;
*/	width: 60px;
}
.emptyCell, .emptyHalfCell, .legend, .posterPlug {
	float: left;
	position: relative;
	width: 62px;
	height: 95px;
}
.emptyHalfCell { /* as emptyCell, but: */
	height: 45px;
}
.legend { /* as emptyCell, but: */
	height: 285px;
}
.license {
	float: left;
	font-family: "PT Sans";
	font-size: 12px;
	text-align: center;
	margin: 2em 1em;
}
.metadata {
	float: left;
	display: flex;
	flex-direction: row;
	margin-left: 1em;
}
.contact {
	float: right;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 330px;
	font-family: "PT Sans";
	font-size: 18px;
	text-align: right;
	position: relative;
	margin-right: 1em;
}
.contact a {
	display: flex;
	flex-direction: row;
}
.moreStuff {
	width: 205px;
	right: 100px;
}
.hireMe {
	background: rgb(150, 217, 242);
	border-radius: 2px;
	display: inline;
	font-size: .7em;
	padding: 2px 3px;
}
.logo {
	width: 62px;
	margin-top: 18px;
}
.moreStuff {
	margin-top: 2em;
}

.columnLabel, .twoColumnLabel {
	bottom: 5px;
	position: absolute;
	font-family: "PT Sans";
	font-size: 12px;
	text-align: center;
	width: 100%;
}
.twoColumnLabel { /* as columnLabel, but: */
	left: 50%;
}
.columnBottom { /* for cells with nothing below them; turns on their bottom-side border */
	border-style: dashed none dashed dashed;
}
.columnRight { /* for cells with nothing to their right; turns on their right-side border */
	border-style: dashed dashed none dashed;
	width: 60px;
}
.columnBottomRight { /* for cells with nothing to their bottom or their right; turns on both */
	border-style: dashed;
	width: 60px;
}
.tropeIdentifier {
	font-family: 'PT Sans', sans-serif;
	font-size: 27px;
	text-align: center;
	margin: 8px 0 0 0;
	clear: both;
}
.tropeName {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 11px;
	text-align: center;
	margin: 0 2px;
	line-height: 13px;
}
.tropePopularity {
	font-family: "PT Sans";
	font-size: 9px;
	float: right;
	margin: 2px 3px;
}

.category01 { background-color: #BCBEC0; border-color: #A4B0B3; }
.category02 { background-color: #E4D1BA; border-color: #F3CC9E; }
.category03 { background-color: #EFE5D8; border-color: #FCE8D1; }
.category04 { background-color: #E6E7E8; border-color: #DAE4F4; }
.category05 { background-color: #C6E8F0; border-color: #96D9F2; }
.category06 { background-color: #CAE4B7; border-color: #B3D78A; }
.category07 { background-color: #83C66F; border-color: #55B948; }
.category08 { background-color: #FABBA3; border-color: #F6926A; }
.category09 { background-color: #FCD7C8; border-color: #F89E72; }
.category10 { background-color: #FBF7C1; border-color: #FCF18B; }
.category11 { background-color: #FDBE68; border-color: #FBAD43; }
.category12 { background-color: #F6ADCD; border-color: #F388A2; }

#PToS {
	width: 1220px;
	margin: 0 auto;
}

#chartName {
	width: 515px;
	height: 190px;
	float: right;
	text-align: right;
}

#options {
	/*visibility: hidden;*/
	font-family: "PT Sans";
	font-size: 12px;
	letter-spacing: 0;
}

#footer {
	width: 1220px;
	margin: 80px auto 0;
}

#footer p {
	margin-top: 60px;
	font-family: "PT Sans";
	font-size: 20px;
}

.molecule {
	width: 226px; /* width of a molecule image */
	height: 355px;
	float: left;
	position: relative;
	margin-left: -116px; /* ( width of page [1220] - width of the far right image [226] ) / ( number of columns [10] - 1 [for the full-width column on the far right] ) */
	margin-top: -125px;
	background-repeat: no-repeat;
	background-position: bottom;
	transition: background-position 0.5s;
	z-index: 5;
	cursor: pointer;
}

.molecule:hover {
	background-position: top;
}

.unlockedMolecule:nth-of-type(1) {
	margin-left: 0px;
	background-image: url('img/molecules/serifed/star-wars.png');
}
.unlockedMolecule:nth-of-type(2) { background-image: url('img/molecules/serifed/mass-effect.png'); }
.unlockedMolecule:nth-of-type(3) { background-image: url('img/molecules/serifed/dilbert.png'); }
.unlockedMolecule:nth-of-type(4) { background-image: url('img/molecules/serifed/avatar.png'); }
.unlockedMolecule:nth-of-type(5) { background-image: url('img/molecules/serifed/mlp-fim.png'); }
.unlockedMolecule:nth-of-type(6) { background-image: url('img/molecules/serifed/gurren-lagann.png'); }
.unlockedMolecule:nth-of-type(7) { background-image: url('img/molecules/serifed/death-note.png'); }
.unlockedMolecule:nth-of-type(8) { background-image: url('img/molecules/serifed/firefly.png'); }
.unlockedMolecule:nth-of-type(9) { background-image: url('img/molecules/serifed/wall-e.png'); }
.unlockedMolecule:nth-of-type(10) { background-image: url('img/molecules/serifed/ghostbusters.png'); }

.lockedMolecule:nth-of-type(1) {
	margin-left: 0px;
	background-image: url('img/molecules/locked/star-wars.png');
}
.lockedMolecule:nth-of-type(2) { background-image: url('img/molecules/locked/mass-effect.png'); }
.lockedMolecule:nth-of-type(3) { background-image: url('img/molecules/locked/dilbert.png'); }
.lockedMolecule:nth-of-type(4) { background-image: url('img/molecules/locked/avatar.png'); }
.lockedMolecule:nth-of-type(5) { background-image: url('img/molecules/locked/mlp-fim.png'); }
.lockedMolecule:nth-of-type(6) { background-image: url('img/molecules/locked/gurren-lagann.png'); }
.lockedMolecule:nth-of-type(7) { background-image: url('img/molecules/locked/death-note.png'); }
.lockedMolecule:nth-of-type(8) { background-image: url('img/molecules/locked/firefly.png'); }
.lockedMolecule:nth-of-type(9) { background-image: url('img/molecules/locked/wall-e.png'); }
.lockedMolecule:nth-of-type(10) { background-image: url('img/molecules/locked/ghostbusters.png'); }

/* preloading */
.unlockedMolecule:nth-of-type(1):before {
	display: none;
	content: url('img/molecules/locked/star-wars.png');
}
.unlockedMolecule:nth-of-type(2):before { display: none; content: url('img/molecules/locked/mass-effect.png'); }
.unlockedMolecule:nth-of-type(3):before { display: none; content: url('img/molecules/locked/dilbert.png'); }
.unlockedMolecule:nth-of-type(4):before { display: none; content: url('img/molecules/locked/avatar.png'); }
.unlockedMolecule:nth-of-type(5):before { display: none; content: url('img/molecules/locked/mlp-fim.png'); }
.unlockedMolecule:nth-of-type(6):before { display: none; content: url('img/molecules/locked/gurren-lagann.png'); }
.unlockedMolecule:nth-of-type(7):before { display: none; content: url('img/molecules/locked/death-note.png'); }
.unlockedMolecule:nth-of-type(8):before { display: none; content: url('img/molecules/locked/firefly.png'); }
.unlockedMolecule:nth-of-type(9):before { display: none; content: url('img/molecules/locked/wall-e.png'); }
.unlockedMolecule:nth-of-type(10):before { display: none; background-image: url('img/molecules/locked/ghostbusters.png'); }

/* column width: 61px */

#previewWindow { /* the window that the trope preview is loaded into */
	visibility: hidden;
	position: fixed;
	overflow: hidden;
	top: 175px;
	left: 250px;
	width: 610px; /* Variables dependent on this: previewWindowWidth in the JavaScript; #tropePreview width */
	height: 430px;
	border-left: 10px solid #58595B;
	background: black;
}

#tropePreview {
	/* display: none; */
	/* Top margin is -190px if Adblock is on, -260 if it's off. */
	margin: 0;
	margin-top: -260px; /* cuts off TVTropes' top nav strip */
	margin-left: -190px; /* cuts off TVTropes' left nav strip */
	/* background-color: #E6E7E8; */
	width: 800px; /* width of previewWindow plus the margin-left */
	height: 690px;
	position: absolute;
}

#floatfix {
	clear: left;
	visibility: hidden;
}

.hidden {
	display: none;
}