/* TITLES */

h1 {
	text-align:center;
	font-size:400%;
	margin-top:40px;
}
h2 {
	text-align:center;
	font-size:350%;
	margin-top:60px;
}

h3 {
	font-size:150%;
	margin-top:10px;
}



/* EVERYTHING WHERE YOU PICK OPTIONS FROM A TABLE */








table {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}

td.sep_column {
	width:15px;
}


/* Inactive or Active */
table tr td .pick_container {
	border: 2px solid gold;
	margin:2px;
	
	cursor:pointer;
	position: relative;
	overflow:hidden;
}
table tr td  .imagecontainer {
	overflow:hidden;
}
table tr td .imagecontainer img {
	object-fit:cover;
	max-width:100%;
}

/* Inactive */
table tr td.inactive .pick_container {
	opacity:0.2;
	filter:grayscale(1);
	transition: opacity 0.6s;
	transition: filter 0.6s;
	
	border: 2px solid transparent;
}
/* Hover table */
table:hover tr td.inactive .pick_container {
	opacity:0.4;
	filter:grayscale(0.7);
}
/* Hover row */
table:hover tr:hover td.inactive .pick_container {
	opacity:0.7;
	filter:grayscale(0.2);
}
/* Hover pick */
table:hover tr:hover td.inactive:hover .pick_container {
	opacity:0.8;
	filter:grayscale(0.2);
	
}
/* Hover or activated */
table:hover tr:hover td:hover .pick_container .imagecontainer {
	transform: scale(1.2);
	/*transition: transform 0.1s;*/
}


table tr td.disabled .pick_container {
	filter:grayscale(1) !important;
	opacity:0.1 !important;
	cursor: not-allowed;
}



/* SPECIFIC PER TABLE */

table.girl_picks .pick_container .imagecontainer {
	height:200px;
	width:200px;	
}
table.girl_picks .pick_container .imagecontainer img {
	min-height:200px;
	min-width:200px;
}


table.perks .pick_container .imagecontainer {
	height:100px;
	width:100px;
}
table.perks .pick_container .imagecontainer img {
	min-height:100px;
	min-width:100px;
}

table.perks .perk_receiver .imagecontainer {
	height:100px;
	width:100px;
}
table.perks .perk_receiver .imagecontainer img {
	min-height:100px;
	min-width:100px;
}


table.result .result_container .imagecontainer {
	height:250px;
	width:250px;
}
table.result .result_container .imagecontainer img {
	min-height:250px;
	min-width:250px;
}
table.result td:hover .result_container .imagecontainer {
	transform: scale(1.1);
}
table.result {
	text-align:center;
}
table.result td {
	display:inline-block;
}






/* INFO LINKS */


td div.pick_container div.infolinks {
	position: absolute;	
	bottom: 5px;
	right: 5px;
	
	height:20px;
	width:150px;
	text-align:right;	
}

td div.pick_container div.infolinks a {
	text-decoration:none;
}	

td div.pick_container div.infolinks div.infolink {
	width: 20px;
	height: 20px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	display:inline-block;
	opacity:0.6;
	
}

td div.pick_container div.infolinks div.infolink:hover {
	opacity:1;
}








h2:focus {
	outline:none;
}




td .global_tooltip {
	position: fixed;
	z-index: 10;
	top: 40px;
	right: 40px;
	
	background-color: purple;
	color: #fff;
	padding: 25px;
	
	opacity:0;
	transition: opacity 0.9s;
	
	text-align:right;
	
	visibility:hidden;
}



td:hover .global_tooltip {
	opacity:1;
	visibility:visible;
}
td:hover .global_tooltip:hover {
	opacity:0;
	visibility:hidden;
}

td.category_desc {
	padding-left:10px;
	vertical-align:top;
}
span.traitdesc {
	color:beige;
	font-size:85%;
}

div.currency_sheet {
	text-align:right;
	
	position: fixed;
	bottom:40px;
	right:40px;
	
	background-color: green;
	color: #fff;
	padding: 25px;
}
div.currency_sheet.toomuch {
	background-color: red;
}

div.notification_area {
	text-align:right;
	
	position: fixed;
	bottom:230px;
	right:40px;
	
	
}

div.notification_area div {
	background-color: red;
	color: #fff;
	padding-left: 25px;
	padding-right: 25px;
	padding-top:10px;
	padding-bottom:10px;
	margin-top:10px;
}


.button {
	padding:10px;
	background-color:beige;
	color:black;
	margin:0 auto;
	width:300px;
	text-align:center;
	cursor:pointer;
	transition: 0s ease;
}
.button:hover {
	box-shadow: 0 0 0 10px gold;
	transition: .5s ease;
}
.button:active {
	background-color: gold;
	transition: 0s;
}

span.requirement {
	display: inline-block;
	width:10px;
	text-align:center;
}
span.requirement.yes {
	color:lightgreen;
}
span.requirement.no {
	color:red;
}