/**********/
/* BASICS */
/**********/
ul, ol {
	list-style: none;
	padding-left: 0 !important;
}
.greek_banner {
	background-color: #000000;
	background-image: url("data:image/svg+xml,%3Csvg width='32' height='64' viewBox='0 0 32 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28h20V16h-4v8H4V4h28v28h-4V8H8v12h4v-8h12v20H0v-4zm12 8h20v4H16v24H0v-4h12V36zm16 12h-4v12h8v4H20V44h12v12h-4v-8zM0 36h8v20H0v-4h4V40H0v-4z' fill='%23f98400' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
	position: absolute;
	height: 36px;
	width: 100%;
}
.greek_banner.top { top: 0;	}
.greek_banner.bottom { bottom: 0; }

#ui > .button.left {
	position: absolute;
	top: 40px;
	left: 5px;
}
#ui > .button.right {
	position: absolute;
	top: 40px;
	right: 5px;
}
.ui.sidebar, #ui {
	position: absolute !important;
	overflow: hidden;
}
#ui {
	pointer-events: none;
}
.ui {
	pointer-events: all;
}
data {
	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 0.9em !important;
	margin: 0 !important
}

/************/
/* SIDEBARS */
/************/
.ship_stats {
	overflow: hidden;
}
.ship_stats h1,
.ship_stats h2,
.ship_stats h3 {
	text-align: center;
	margin-bottom: 0.2em !important;
}
.ship_stats h3 {
	font-style: italic !important;
	margin-top: 0;
}
.shipname-small { font-size: 20px; }	/* over 10 chars */
.shipname-medium { font-size: 24px; }	/* 8-10 chars */
.shipname-large { font-size: 28px; }	/* 7 chars & under */
.upgrades {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr
}
#trophies-ui > div,
#gods-ui > div,
.crew {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.crew li {
	background: #876;
	border: 2px solid black;
	border-radius: 5px;
	width: 50px;
	height: 50px;
	margin-bottom: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.crew li.gold {
	border-color: gold;
}
.avatar {
	border: 1px solid black;
}
.avatar.dead {
	filter: grayscale();
}
.ui.avatar.image {
    width: 45px !important;
    height: 45px !important;
	background: white;
}


/*********/
/* ITEMS */
/*********/
.gameitem {
	background: url(../img/items.png) no-repeat;
	display: block;
	height: 32px;
	width: 32px;
}
.supplies i {
	float: left;
}
.ring-of-gyges	{ background-position: 0px 0px; }
.philosophers-stone { background-position: -32px 0px; }
.gorgoneion		{ background-position: -64px 0px; }
.wing-of-icarus { background-position: -192px 0px; }
.lotus-fruit	{ background-position: -224px 0px; }
.golden-fleece	{ background-position: -288px 0px; }

.achilles-shield{ background-position: 0px -32px; }
.petasos		{ background-position: -32px -32px; }
.damocles-sword	{ background-position: -64px -32px; }
.harpe			{ background-position: -96px -32px; }
.asclepius-rod	{ background-position: -160px -32px; }
.thyrsus		{ background-position: -192px -32px; }
.dragons-teeth	{ background-position: -256px -32px; }
.omphalos		{ background-position: -288px -32px; }
.winnowing-oar	{ background-position: -320px -32px; }

.gold,
.gold-low		{ background-position: 0px -64px; }
.gold-med		{ background-position: -32px -64px; }
.gold-high		{ background-position: -64px -64px; }
.wine			{ background-position: -96px -64px; }
.bread			{ background-position: -128px -64px; }
.chicken		{ background-position: -256px -64px; }
.fish			{ background-position: -288px -64px; }

.compass		{ background-position: 0px -96px; }
.salt-box		{ background-position: -32px -96px; }
.ships-wheel	{ background-position: -64px -96px; }
.ship-armour	{ background-position: -96px -96px; }
.silk-sails		{ background-position: -128px -96px; }
.cotton-sails	{ background-position: -160px -96px; }
.fishing-net	{ background-position: -192px -96px; }
.ship-oars		{ background-position: -224px -96px; }


/**********/
/* MODALS */
/**********/
.modal {
	top: 40px !important;
	margin-top: 20px !important;
}
.ui.modal > .header,
.ui.modal > .actions {
	text-align: center !important;
}
.modal img {
	width: 200px;
}
.modal .image.content {
    align-items: flex-start;
}
.town, .monster {
	color: red;
}
.modal .content {
	font-size: 1.2rem !important;
}
.modal .content .extra {
	text-align: center !important;
}
.modal.tiny .content {
	text-align: center !important;
}
.sailor-checkbox-wrap {
	position: relative;
	display: inline-block;
}
.sailor-checkbox-wrap input {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
}
.or {
	margin-top: 0.3em !important;
	z-index: 20 !important;
}


/*************/
/* GOD FACES */
/*************/
.god {
	width: 50px;
	height: 50px;
}
.modal .god {
	background: white url(../img/gods-white-60px-2by3.png) no-repeat;
}
.sidebar .god {
	background: black url(../img/gods-black-yellow-50px-2by3.png) no-repeat;
}
.god.poseidon	{ background-position: 0 0; }
.god.artemis	{ background-position: -50px 0; }
.god.ares		{ background-position: 0 -50px; }
.god.uranus		{ background-position: -50px -50px; }
.god.demeter	{ background-position: 0 -100px; }
.god.hephaestus	{ background-position: -50px -100px; }

.sidebar .godafter {
    position: absolute; /* Positions psuedo element relative to .icon */
	content: ""; /* Allows psuedo element to show */
    width: 50px; /* Same dimensions as .icon */
    height: 50px;
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
.sidebar .god.score3 { filter: hue-rotate(60deg) saturate(3); }
.sidebar .god.score2 { filter: hue-rotate(40deg) saturate(3); }
.sidebar .god.score1 { filter: hue-rotate(20deg) saturate(3); }
.sidebar .god.score0 { filter: grayscale(); }
.sidebar .god.score-1 { filter: hue-rotate(-15deg) saturate(3); }
.sidebar .god.score-2 { filter: hue-rotate(-30deg) saturate(3); }
.sidebar .god.score-3 { filter: hue-rotate(-45deg) saturate(3); }
.sidebar .god.score-4 { filter: hue-rotate(-60deg) saturate(3); }