/* ********************************************************* */
/* ************************** GLOBAL STYLES **************** */
/* ********************************************************* */

body
{
	overflow-y: scroll;
}

body > div
{
	margin: 0 0 20px 0;
}

h1
{
	margin-bottom: 30px;
}

h3, h4, .modal h2, #animalscategoriesspacer
{
	margin: 0;
	padding: 5px;
}

h4
{
	font-size: 12px;
}

img
{
	outline: none !important;
	border: 0 !important;
}

figure
{
	margin: 0;
	padding: 0;
}

figcaption
{
	font-style: italic;
	padding: 10px 3px;
}

table
{
	border-spacing: 0;
	text-align: center;
	width: 100%;
}

th, td
{
	padding: 5px;
}

table, td
{
	border: 1px solid black;
}

ul {
	display: block;
	list-style-type: none;
	margin: 0;
}

li
{
	display: inline-block;
	vertical-align: top;
}

a:focus
{
	outline: none;
}

a:active
{
	color: dimgrey;
}

label::after, label:after
{
	content: ": ";
}
html[lang="fr"] label::after, html[lang="fr"] label:after
{
	content: " : "; /* French exception; needs space before */
}

code, .common
{
	background-color: #e3e3e3; /* pale gainsboro */
}

code, .tag, span[class^="tradeLevel"]
{
	padding: 1px 4px;
}

input[type=checkbox]
{
	vertical-align: middle;
}
input[type=checkbox] + label
{
	display: inline-block;
	margin: 0 0 0 3px;
}
input[type=checkbox] + label::after, input[type=checkbox] + label:after
{
	content: ''; /* overrides label::after, label:after */
}
input[type=checkbox], input[type=checkbox] + label
{
	cursor: pointer;
}

.hidden, .hidden2, .next-version,
	#recipe-content.noblock #takes, #recipe-content.noblock #gives
{
	display: none !important;
}

.noscroll
{
	overflow-y: hidden;
}

#recipe-content > div, #recipe-image, #alternates, 
	.categories-container:not(#animalscategoriescontainer) .category, #animals-container > .category
{
	box-shadow: 0 1px 3px dimgrey;
		-moz-box-shadow: 0 1px 3px dimgrey;
		-webkit-box-shadow: 0 1px 3px dimgrey;
}


/* ********************************************************* */
/* ************************** HEADER *********************** */
/* ********************************************************* */

#header-container
{
	position: relative;
}

#options-container
{
	position: absolute; /* same line as title */
		top: 0;
		right: 0;
	text-align: right;
}

#options-container > div
{
	margin-bottom: 6px;
	vertical-align: top;
}

#options-container > div:not(:first-child):not(:nth-child(2))
{
	margin-left: 5px;
}

/* ========= Search ========= */

#search
{
	background-color: white;
	border: 1px solid white;
	height: 34px;
	outline: 0;
	padding: 3px 8px;
	width: 220px;
	z-index: 50;
	border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
}

#search:focus
{
	box-shadow: 0 1px 2px dimgrey;
		-moz-box-shadow: 0 1px 2px dimgrey;
		-webkit-box-shadow: 0 1px 2px dimgrey;
}

#search, .ui-autocomplete, #filter-container > a, #filter-container ul, 
	#more-options-container, #more-options-menu
{
	box-shadow: 0 1px 2px #999; /* lighter than darkgrey, slightly than grey */
		-moz-box-shadow: 0 1px 2px #999;
		-webkit-box-shadow: 0 1px 2px #999;
}

@media only screen and (max-width: 650px) {
	/* all options on 1 new line not to overflow on title */
	#options-container
	{
		position: static;
	}
	
	#options-container > div:not(:first-child)
	{
		margin-left: 5px;
	}
	
	#search-container
	{
		display: inline-block;
	}
	
	#search
	{
		height: 39px;
	}
}

/* search result menu */
.ui-autocomplete {
	border: 0 !important;
	max-height: 80%;
	max-width: 220px;
	overflow-y: auto;
}

.ui-autocomplete, #filter-container ul, #more-options-menu
{	
	border-top: 3px solid dimgrey !important; /* override for .ui-autocomplete */
}

.ui-autocomplete li {
	display: block; /* override */
	padding: 3px;
}

/* ========= FILTER ========= */

#filter-container
{
	display: inline-block;
	position: relative; /* for menu */
	text-align: left;
}

#filter-container > a, #more-options-icon
{
	padding-right: 10px;
		padding-left: 10px;
}

#filter-container > a
{
	height: 35px;
	padding-top: 2px;
		padding-bottom: 2px;
	width: 66px;
}

#filter-container > a, #more-options-container
{
	display: inline-block;
}

#filter-container > a, #filter-container ul, #more-options-container, #more-options-menu
{
	background-color: gainsboro;
}

#filter-container > a:hover, #more-options-container:hover, #more-options-container a:hover, 
	#more-options-container .active a, #side-menu-container button:hover
{
	background-color: silver !important;
}

#filter-container > a:active, #more-options-container a:active, 
	#side-menu-container button:active
{
	background-color: darkgray !important;
}

#filter-container ul, #more-options-menu
{
	margin: auto;
	width: 105px;
	position: absolute;
		right: 0;
	z-index: 20;
}

#filter-container ul
{
	padding: 9px;
}

#filter-container ul, #filter-container ul img, #filter-container ul .icons *,
	#more-options-menu, #more-options-menu *
{	
	opacity: 0;
		filter: alpha(opacity=0);
	visibility: hidden;
	transition: visibility 0s, opacity .2s linear;
		-moz-transition: visibility 0s, opacity .2s linear;
		-ms-transition: visibility 0s, opacity .2s linear;
		-webkit-transition: visibility 0s, opacity .2s linear;
		-o-transition: visibility 0s, opacity .2s linear;
}

#filter-container a:hover + ul, #filter-container ul:hover, 
	#filter-container a:hover + ul img, #filter-container ul:hover img, 
	#filter-container .inactive:hover, #filter-container:hover .icons *,
	#more-options-container:hover #more-options-menu, #more-options-container:hover #more-options-menu *
{
	opacity: 1;
		filter: alpha(opacity=100);
	visibility: visible;
}

#filter-container .inactive, .category > div:hover .buttons span, 
	.buttons button:hover span, .buttons span:hover
{
	opacity: .5;
		filter: alpha(opacity=50);
}

#filter-active img
{
	vertical-align: top;
}

.filter
{
	display: inline-block;
	margin: 6px 5px 0 0;
	height: 25px;
	width: 26px;
}

.filter.filter-off
{
	background-image: url('filter-off.png');
}

.filter.filter-on
{
	background-image: url('filter-on.png');
}

/* ========= MORE OPTIONS ========= */

.more-options
{
	background-image: url('menu.png');
	display: inline-block;
	height: 25px;
	width: 25px;
}

#more-options-container
{
	text-align: left;
}

#more-options-container h3
{
	font-size: 1em;
	margin: 10px 4px;
	padding: 0;
}

#more-options-container ul
{
	padding: 0;
}

#more-options-container li
{
	width: 50%;
}

#more-options-container a
{
	color: black;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 12px 10px;
}

#more-options-icon
{
	padding-top: 6px;
		padding-bottom: 5px;
}

/* ========= LANGUAGE ========= */

#lang .active a /* radio button; can't select same language */
{
	cursor: default;
	pointer-events: none;
}

#lang abbr /* for screen readers only */
{
	text-decoration: none;
	pointer-events: none; 
}

/* ========= MODS ========= */

#mods li /* overrides #more-options-container li */
{
	width: 100%;
}

#mods a, #version a /* overrides #more-options-container a */
{
	padding-left: 4px;
		padding-right: 4px;
}

#mods a /* overrides #more-options-container a */
{
	text-align: left;
}

#mods-title
{
	position: relative;
}

#mods-all
{
	padding: 3px 6px 3px 3px !important; /* overrides #more-options-container a */
	position: absolute;
		top: -6px;
		right: 0;
}


/* ********************************************************* */
/* ************************** RECIPE *********************** */
/* ********************************************************* */

#recipe, #animals-container, .categories-container, .modal h2, footer
{
	text-align: center;
}

#recipe-content
{
	max-width: 470px;
	margin: 20px auto;
	position: relative;
}

#recipe-content > div
{
	background-color: whitesmoke;
}

#recipe-image
{
	background-color: #c6c6c6;
	max-width: 100%;
}

#alternates
{
	background-color: lightgrey;
	margin-top: -2px;
	min-height: 64px;
	text-align: left;
	padding: 7px 3px 3px 3px;
}

#alternates li
{
	margin-right: 3px;
}

#alternates li:last-child
{
	margin-right: 0;
}

#alternates li, #alternates img
{
	max-height: 64px;
}

.variants ul, #animalgivescontainer ul
{
	margin: 20px 0 10px 0;
	padding: 0 !important;
	text-align: left;
}

#related ul, #animalgivescontainer ul
{
	overflow-x: auto;
}

#related ul
{
	padding: 8px 0 6px 2px !important; /* overrides .ingredients ul */
	white-space: nowrap;
}

.notes abbr
{
	text-decoration: none;
}

.notes .cat
{
	line-height: 20px;
}

.notes .cat .tag
{
	
	text-shadow: 0 0 4px white;
}

.tag.cat3 /* because white is too visible */
{
	
	text-shadow: 0 0 4px #ffeeeb !important; /* paler */
}

.tag.cat7
{
	
	text-shadow: 0 0 4px #fbe9ff !important; /* paler */
}

#recipe-content h3, .modal h2, #side-menu-container button
{
	background-color: lightgrey;
}

.ingredients, #related ul
{
	display: block;
	padding: 20px 10px;
	text-align: left;
}

.ingredients ul, #enchantments ul,
	#animal-content ul:not(#animal-variants):not(#animalgives)
{
	padding-left: 12px;
	list-style-type: square;
	text-align: left;
}

/* overrides 2 rules above; padding will be done by ul for station bgcolor */
#takes .ingredients {
	padding-left: 0;
		padding-right: 0;
		padding-top: 15px; /* remove .ingredients li padding */
}
#takes .ingredients ul {
	padding-left: 22px;
}

/* #recipe-content .ingredients ul li:not(.src):only-child, */
	#enchantments ul li:only-child { /* no bullet when 1 list item (except notes) */
	list-style-type: none;
}

.ingredients li, #enchantments li, 
	#animal-content ul:not(#animal-variants):not(#animalgives) > li
{
	display: list-item;
	padding: 5px 0;
}

/* First & last ingredients */
.ingredients ul:not(#recipe-stations):not(#recipe-ingredients) li:first-child, 
	.ingredients li.hidden:first-child + li, 
	#enchantments li:first-child, 
	#animal-content ul:not(#animal-variants):not(#animalgives) li:first-child
{
	padding-top: 0;
}

.ingredients ul:not(#recipe-stations) li:last-child, #enchantments li:last-child, 
	#animal-content ul:not(#animal-variants):not(#animalgives) li:last-child
{
	padding-bottom: 0;
}

/* Ingredient quantity */
.ingredients .qty
{
	width: 30px;
}

.ingredients .qty, .ingredients .cmd
{
	display: inline-block;
	padding-left: 10px;
}

/* Station ingredients section highlight */
#recipe-stations
{
	background-color: #ececec;
}

/* Uncraftable ingredient */
a.noblock
{
	color: darkmagenta;
}

#takes, #recipe-content.noblock .notes, #recipe-content.noblock .notes.hidden + #related
{
	margin-top: 20px;
}

@media only screen and (min-width: 905px) {
	#recipe-content:not(.noblock) .notes /* noblock notes always displayed under image */
	{
		position: absolute;
			right: -210px;
			top: 0;
		width: 50%;
		max-height: 100%;
		max-width: 200px;
		overflow-y: auto;
	}
}


/* ********************************************************* */
/* ************************** RARITY *********************** */
/* ********************************************************* */

.uncommon
{
	background-color: #f4e884; /* pale yellow */
}

.rare
{
	background-color: #abefff; /* pale aqua */
}

.epic
{
	background-color: pink;
}

span[class^="tradeLevel"]
{
	display: inline-block;
}


/* ********************************************************* */
/* *********************** ENCHANTMENTS ******************** */
/* ********************************************************* */

#enchantments table
{
	border: 0;
}

#enchantments th
{
	background-color: lightgrey;
}

#enchantments td
{
	border-color: lightgrey;
}

#enchantments td:not(:first-child)
{
	text-align: left;
	vertical-align: top;
}

#enchantments tr:last-child td
{
	border-bottom: 0;
}

#enchantments td:nth-child(1) /* levels */
{
	border-left: 0;
	width: 1%;
}

#enchantments td:nth-child(3) /* incompatible with */
{
	border-right: 0;
		border-bottom: 0;
	width: 23%;
}


/* ********************************************************* */
/* ************************** MODAL ************************ */
/* ********************************************************* */

.modal
{
	background-color: rgb(0, 0, 0); /* fallback */
		background-color: rgba(0, 0, 0, .6); /* black, faded */
	cursor: pointer;
	height: 100%;
		width: 100%;
	position: fixed;
		top: 0;
		left: 0;
	z-index: 100;
}

.modal-content
{
	background-color: whitesmoke;
	cursor: default; /* overrides .modal */
	box-shadow: 0 1px 3px #2f2f2f; /* darker dimgrey */
		-moz-box-shadow: 0 1px 3px #2f2f2f;
		-webkit-box-shadow: 0 1px 3px #2f2f2f;
	margin: auto;
		margin-top: 1.3em;
	max-width: 95%;
	position: relative;
}

.modal-body
{
	padding: 8px; /* photocard look */
}

@media only screen and (max-width: 904px) { /* full width on small screens; similar to notes */
	.modal-content
	{
		max-width: 100%;
		margin-left: 8px;
			margin-right: 8px;
	}
}
@media only screen and (min-width: 1500px) { /* prevents height overflow */
	.modal-content
	{
		max-width: 85%;
	}
}
@media only screen and (min-width: 1675px) {
	.modal-content
	{
		max-width: 75%;
	}
}

.modal-content img
{
	display: inline-block;
	max-width: 100%;
}

.buttons .button-cls
{
	background-image: url('close.png');
	height: 22px;
		width: 22px;
}


/**************************************/
/************* Categories *************/
/**************************************/

.categories-container
{
	margin: 0; /* no space between categories and animals */
}

.categories-container > div
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.categories-container a, #lang a, #filter-container ul a, #filter-container .inactive, 
	#alternates a, .variants a, #animalgivescontainer a:first-of-type, .buttons span, footer a
{
	transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		-webkit-transition: all .2s;
		-o-transition: all .2s;
}

.categories-container a:hover, #filter-container ul li:not(.inactive) a:hover, 
	#alternates a:hover, .variants a:hover, #animalgivescontainer a:first-of-type:hover, 
	footer a:hover
{
	opacity: .7;
		filter: alpha(opacity=70);
	
}

.category
{
	margin: 0 0 14px 0;
	vertical-align: top;
	display: inline-block;
	background-color: whitesmoke;
	position: relative; /* for subcategory */
}

.categories-container .category, #animals-container .category
{
	width: 100%;
}

@media only screen and (min-width: 460px), (orientation: landscape) {
	.categories-container .category, #animals-container .category:not(#cat20-main)
	{
		width: 49.5%; /* categories displayed on 2 columns */
	}
}

.category > div:first-child, .sub-category > div:first-child /* category title container */
{
	cursor: pointer;
	position: relative; /* for category toggle */
}

.category h4
{
	display: block !important;
}

.category ul
{
	padding: 10px;
}

.category ul:not(:last-child) /* has subcategory after */
{
	padding-bottom: 50px;
}

.category li, #alternates a, .variants li, #related li, #filter-container li, #filter-active,
	#animal-image, #animalgivescontainer a:first-of-type
{
	position: relative; /* for More icons position */
}

.category li:not(:last-child), .variants li:not(:last-child), #related li:not(:last-child),
	#animalgivescontainer li:not(:last-child)
{
	margin-right: 3px;
}
#related li:last-child
{
	margin-right: 2px; /* instead of ul padding-right */
}

.sub-category.closed
{
	display: block;
	width: 100%;
	position: absolute !important;
		bottom: 0;
}

#cat0 h3, .cat0
{
	background-color: lightskyblue !important;
}

#cat0 h4, .cat10
{
	background-color: #b8def5 !important; /* paler */
}

#cat1 h3, .cat1
{
	background-color: yellowgreen !important;
}

#cat1 h4, .cat11
{
	background-color: #c2e876 !important; /* paler */
}

#cat2 h3, .cat2
{
	background-color: gold !important;
}

#cat2 h4, .cat12
{
	background-color: #ffe971 !important; /* paler */
}

#cat3 h3, .cat3
{
	background-color: tomato !important;
}

#cat3 h4, .cat13
{
	background-color: #ffbbae !important; /* paler */
}

#cat4 h3, .cat4
{
	background-color: orange !important;
}

#cat4 h4, .cat14
{
	background-color: #ffd994 !important; /* paler */
}

#cat5 h3, .cat5
{
	background-color: #5c97ff !important; /* near cornflowerblue */
}

#cat5 h4, .cat15
{
	background-color: #c0d4f6 !important; /* paler */
}

#cat6 h3, .cat6
{
	background-color: #4bbd78 !important; /* near mediumseagreen */
}

#cat6 h4, .cat16
{
	background-color: #b1eaca !important; /* paler */
}

#cat7 h3, .cat7
{
	background-color: #bd4de6 !important; /* near mediumorquid */
}

#cat7 h4, .cat17
{
	background-color: #e1c0e9 !important; /* paler */
}

#cat8 h3, .cat8
{
	background-color: hotpink !important;
}

#cat8 h4, .cat18
{
	background-color: #ffcce5 !important; /* paler */
}

#cat9 h3, .cat9
{
	background-color: #60d2ce !important; /* mediumturquoise */
}


/**************************************/
/******** Animals & Creatures *********/
/**************************************/

#animals-container h3
{
	background-color: burlywood;
}

#animalscategoriescontainer h4, #animalscategoriesspacer, .cat20, .cat21
{
	background-color: #f0d2ac; /* paler */
}

#animal-content h4
{
	font-size: 14px;
	margin-left: -7px;
}

#animal
{
	margin-bottom: 10px;
	padding: 10px;
}

#animal > div
{
	position: relative; /* only used for notes position */
}

#animal-header
{
	display: inline-block;
}

#animal-title
{
	margin-top: 20px;
	float: right;
}

#animal-image
{
	display: inline-block;
	margin-right: 12px;
}

#animal-content
{
	margin: 15px 0 0 0;
}

#animal-content .variants ul, #animal-content table, #animalgivescontainer ul
{
	margin: 10px 0 0 0;
}

#animal-content table, #animal-content td
{
	border-color: burlywood;
}

#animal-content thead
{
	background-color: burlywood;
}

#animal, #animal-content td:first-child
{
	text-align: left;
}

#animal-content td
{
	width: 15%;
}

#animal-content td:nth-child(1) /* food */
{
	width: 20%;
}

#animal-content td:nth-child(2), #animal-content td:nth-child(5) /* taming, growing */
{
	width: 10%;
}

#animal-content td:first-child span /* food quantity */
{
	display: inline-block;
	padding: 0 10px 0 0; /* overrides ingredient quantity */
	text-align: right;
	width: 15px;
}

#animal-content .notes ul /* overrides .category ul */
{
	padding: 0 0 0 10px;
}

#animalgivescontainer ul /* overrides earlier #animalgivescontainer ul */
{
	display: flex;
	text-align: center;
}

#animalgivescontainer li
{
	background-color: #e3e3e3;
	min-width: 106px; /* use min/max, otherwise no effect bc of flex */
		max-width: 106px;
}

#animalgivescontainer li > div
{
	padding: 3px;
}

#animalgivescontainer li.trade ~ li:not(.trade) > div /* drop when there are trades */
{
	margin-top: calc(1em + 9px); /* title text + title padding + img padding */
}

#animalgivescontainer div[class^="tradeLevel"]
{
	font-weight: bold; /* drop item header */
}

#animalgivescontainer span[class^="tradeLevel"]:not(:last-child)
{
	margin-right: 3px; /* drop comment; spacing before comma */
}

#animalgivescontainer .tradeLevel1
{
	background-color: #b3b1af; /* stone badge */
}

#animalgivescontainer .tradeLevel2
{
	background-color: #d8af93; /* iron badge */
}

#animalgivescontainer .tradeLevel3
{
	background-color: #f0d543; /* gold badge */
}

#animalgivescontainer .tradeLevel4
{
	background-color: #45d77c; /* emerald badge */
}

#animalgivescontainer .tradeLevel5
{
	background-color: #5be3cc; /* diamond badge */
}

#animalgivescontainer .tradeLevel10
{
	background-color: #77b4f4; /* navy blue */
}

#animalgivescontainer .tradeLevel11
{
	background-color: #f2c455; /* gold */
}

#animalgivescontainer .qty
{
	display: block;
}

#animalgivescontainer .qty:not(:last-child)
{
	margin-bottom: 6px; /* spacing between quantity and comment */
}

#animalscategoriescontainer .category
{
	margin-bottom: 0; /* used as subcategory */
}

#animalscategoriesspacer /* fills uncolored gap between 2-column subcategories */
{
	position: absolute;
	display: inline-block;
	width: 90%;
}

@media only screen and (max-width: 849px) {
	#animal-content thead
	{
		word-break: break-word;
	}
	
	#animal-content .notes .ingredients
	{
		padding: 10px 0 0 15px;
	}
	
	/*#animalnotestitle::after,
		#animalnotestitle:after
	{
		margin-left: 4px; TODO find correct selector so applied to French only
	}*/
}

@media only screen and (min-width: 850px) {
	#animal-content
	{
		width: 75%;
	}
	
	#animal-content .notes
	{
		position: absolute;
			top: 0;
			right: 0;
		width: 50%;
		max-height: 100%;
		max-width: 200px;
		padding: 0 !important; /* no spacing in-box */
		overflow-y: auto;
		box-shadow: 0 1px 3px dimgrey;
			-moz-box-shadow: 0 1px 3px dimgrey;
			-webkit-box-shadow: 0 1px 3px dimgrey;
	}

	/** To look like heading **/
	#animalnotestitle
	{
		background-color: burlywood; /* same as table */
		display: block;
		font-weight: bold;
		padding: 5px;
		text-align: center;
	}

	#animalnotestitle::after, #animalnotestitle:after
	{
		content: none;
	}
}


/* ********************************************************* */
/* ************************** ICONS ************************ */
/* ********************************************************* */

.icons
{
	white-space: normal;
	vertical-align: sub;
}

.icons *, footer .icons
{
	display: inline-block;
	height: 15px;
	width: 15px;
}

#animal-image .icons > .icon-brd, #animal-image .icons > .icon-new, 
	#animal-variants .icons > .icon-brd
{
	display: none; /* for animal, hide repetitive icons */
}

/* more icons */
.icons .icon-alt
{
	background-image: url('alternates.png');
}
.icons .icon-alt-m
{
	background-image: url('alternates-mod.png');
}

.icons .icon-brd
{
	background-image: url('breedable.png');
}

.icons .icon-mod
{
	background-image: url('mod.png');
}

.icons .icon-new
{
	background-image: url('new.png');
}

.icons .icon-no
{
	background-image: url('no.png');
}

.icons .icon-var
{
	background-image: url('variants.png');
}
.icons .icon-var-m
{
	background-image: url('variants-mod.png');
}

.icons .icon-yes
{
	background-image: url('yes.png');
}

.icons .icon-img
{
	background-image: url('image.png');
}

/* block icons */
.icons .icon-hok
{
	background-image: url('icons/hok.png');
}

.icons .icon-pic
{
	background-image: url('icons/pic.png');
}

.icons .icon-wxd
{
	background-image: url('icons/wxd.png');
}

/* firework icons */
.icons .icon-fbb
{
	background-image: url('icons/fbb.png');
}

.icons .icon-fbq
{
	background-image: url('icons/fbq.png');
}

.icons .icon-fcr
{
	background-image: url('icons/fcr.png');
}

.icons .icon-fsb
{
	background-image: url('icons/fsb.png');
}

.icons .icon-fst
{
	background-image: url('icons/fst.png');
}

/* map icons */
.icons .icon-loc
{
	background-image: url('icons/loc.png');
}

.icons .icon-ocn
{
	background-image: url('icons/ocn.png');
}

.icons .icon-trs
{
	background-image: url('icons/trs.png');
}

.icons .icon-wdl
{
	background-image: url('icons/wdl.png');
}

.icons .icon-zmd, .icons .icon-ext
{
	background-image: url('icons/zmd.png');
}

/* banner pattern icons */
.icons .icon-crp
{
	background-image: url('icons/crp.png');
}

.icons .icon-flw
{
	background-image: url('icons/flw.png');
}

.icons .icon-glb
{
	background-image: url('icons/glb.png');
}

.icons .icon-skl
{
	background-image: url('icons/skl.png');
}

.icons .icon-snt
{
	background-image: url('icons/snt.png');
}

.icons .icon-thg
{
	background-image: url('icons/thg.png');
}

/* villager icons */
.icons .icon-bfn
{
	background-image: url('icons/bfn.png');
}

.icons .icon-brl
{
	background-image: url('icons/brl.png');
}

.icons .icon-brw
{
	background-image: url('icons/brw.png');
}

.icons .icon-cld
{
	background-image: url('icons/cld.png');
}

.icons .icon-cmp
{
	background-image: url('icons/cmp.png');
}

.icons .icon-crt
{
	background-image: url('icons/crt.png');
}

.icons .icon-flt
{
	background-image: url('icons/flt.png');
}

.icons .icon-grs
{
	background-image: url('icons/grs.png');
}

.icons .icon-lec
{
	background-image: url('icons/lec.png');
}

.icons .icon-lom
{
	background-image: url('icons/lom.png');
}

.icons .icon-smi
{
	background-image: url('icons/smi.png');
}

.icons .icon-smo
{
	background-image: url('icons/smo.png');
}

.icons .icon-stc
{
	background-image: url('icons/stc.png');
}

/* enchantment icons */
.icons .icon-emr
{
	background-image: url('icons/emr.png');
}

.icons .icon-fia
{
	background-image: url('icons/fia.png');
}

.icons .icon-ltr
{
	background-image: url('icons/ltr.png');
}

.icons .icon-grd
{
	background-image: url('icons/grd.png');
}

.icons .icon-spi
{
	background-image: url('icons/spi.png');
}

.icons .icon-swd
{
	background-image: url('icons/swd.png');
}

.icons .icon-trd
{
	background-image: url('icons/trd.png');
}

.icons .icon-zom
{
	background-image: url('icons/zom.png');
}

/* potion icons */
.icons .icon-bld
{
	background-image: url('icons/bld.png');
}

.icons .icon-fir
{
	background-image: url('icons/fir.png');
}

.icons .icon-glo
{
	background-image: url('icons/glo.png');
}

.icons .icon-idm
{
	background-image: url('icons/idm.png');
}

.icons .icon-iht
{
	background-image: url('icons/iht.png');
}

.icons .icon-inv
{
	background-image: url('icons/inv.png');
}

.icons .icon-jmp
{
	background-image: url('icons/jmp.png');
}

.icons .icon-lck
{
	background-image: url('icons/lck.png');
}

.icons .icon-lv2
{
	background-image: url('icons/lv2.png');
}

.icons .icon-lv4
{
	background-image: url('icons/lv4.png');
}

.icons .icon-nvs
{
	background-image: url('icons/nvs.png');
}

.icons .icon-psn
{
	background-image: url('icons/psn.png');
}

.icons .icon-red
{
	background-image: url('icons/red.png');
}

.icons .icon-reg
{
	background-image: url('icons/reg.png');
}

.icons .icon-sat
{
	background-image: url('icons/sat.png');
}

.icons .icon-slf
{
	background-image: url('icons/slf.png');
}

.icons .icon-slw, .icons .icon-ntw
{
	background-image: url('icons/slw.png');
}

.icons .icon-spd
{
	background-image: url('icons/spd.png');
}

.icons .icon-str
{
	background-image: url('icons/str.png');
}

.icons .icon-ttm
{
	background-image: url('icons/ttm.png');
}

.icons .icon-wit
{
	background-image: url('icons/wit.png');
}

.icons .icon-wkn
{
	background-image: url('icons/wkn.png');
}

.icons .icon-wrt
{
	background-image: url('icons/wrt.png');
}

.icons .icon-wtr
{
	background-image: url('icons/wtr.png');
}

#filter-container .icons, .categories-container .icons, 
	#alternates .icons, .variants .icons, #related .icons,
	#animal-image .icons, #animalgivescontainer .icons
{
	position: absolute;
		bottom: 2px;
		right: 3px;
	z-index: 10;
	width: 15px;
}

#filter-container .icons
{
	bottom: 0;
	right: 0;
}

#filter-active .icons
{
	bottom: -3px; /* since not inside a link */
}

.buttons:not(#side-menu-container)
{
	position: absolute;
		top: 0;
		right: 0;
}

.buttons span
{
	display: inline-block;
	margin: 6px;
	opacity: .25;
		filter: alpha(opacity=25);
}

.buttons .button-tgl
{
	background-image: url('arrow.png');
	height: 15px;
		width: 26px;
}

.buttons .button-tgl.button-shw, #side-menu-container #bottom
{
	transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
}



/* ********************************************************* */
/* ************************** SIDE MENU ******************** */
/* ********************************************************* */

#side-menu-container
{
	position: fixed;
	bottom: .2em;
		right: .2em;
	z-index: 15;
}

#side-menu-container button
{
	border: none;
	border-radius: 100%;
		-moz-border-radius: 100%;
		-webkit-border-radius: 100%;
	box-shadow: 0 0 4px grey;
		-moz-box-shadow: 0 0 4px grey;
		-webkit-box-shadow: 0 0 4px grey;
	cursor: pointer;
	display: block;
	padding: .9em .6em;
}

#side-menu-container button:not(:last-child)
{
	margin-bottom: .5em;
}



/**************************************/
/*************** Footer ***************/
/**************************************/

footer
{
	font-size: 10px;
	letter-spacing: .5px;
	margin: 80px 0 0 0;
}

footer li
{
	padding: 0 15px;
}

footer li:not(:last-child)
{
	border-right: 1px solid dimgrey; /* separator between items */
}

footer a
{
	text-decoration: none;
	color: dimgrey;
}

footer .icons
{
	margin: 0 7px 0 0;
	vertical-align: middle;
}

.icons.chg
{
	background-image: url('changelog.png');
	width: 17px !important;
}

.icons.tmb
{
	background-image: url('tumblr.png');
}

.icons.tdo
{
	background-image: url('todo.png');
}

.icons.twt
{
	background-image: url('twitter.png');
	width: 20px !important;
}