/*
	Regiments window (squads/squads.tpl and squads/editor.tpl). Built from the ui-* kit (ui.css);
	only the layout the kit has no component for lives here.
*/
.squads .squad-unit-tiles
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0 8px;
}

.squads label.squad-unit-tile
{
	margin: 0 0 8px;
	cursor: pointer;
}

.squads label.squad-unit-tile.selected
{
	border-color: #40331f;
}

.squads .squad-head
{
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 8px 0;
}

.squads .squad-head img
{
	width: 40px;
	height: 40px;
	border: 1px solid #8a7550;
}

.squads .squad-size
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.squads .ui-field .squad-size input
{
	width: 64px;
	text-align: center;
	-moz-appearance: textfield;
}

.squads .squad-size input::-webkit-inner-spin-button,
.squads .squad-size input::-webkit-outer-spin-button
{
	-webkit-appearance: none;
	margin: 0;
}

.squads .squad-quick
{
	margin: 4px 0 0;
}

.squads .ui-field select
{
	width: 100%;
}

.squads div.stats
{
	margin: 8px 0;
}

/* Battle */
.battle ul.available-units li 
{
	float: left;
}

.battle ul.available-units li span
{
	display: none;
}

/* Battle */
div.battle form.chooseUnits fieldset,
div.innerbattlefield
{
	overflow: hidden;
	border: 0px solid black;
}

div.battle form.chooseUnits label
{
	display: none;
}

div.battle div.battlefield-slot select
{
	display: none;
}

div.battle form.chooseUnits button
{
	display: block;
	clear: both;
	margin-top: 5px;
}

div.available-units div
{
	float: left;
}

div.battle label.checkbox
{
	width: 120px;
}

div.battle select.specialAction
{
	float: left;
	clear: none;
	width: 300px;
}

div.battle img
{
	border: 1px solid black;
	margin-left: 2px;
}

/* Tap-to-place (touch screens can't drag): the tapped unit and the slots it can go to. */
img.tap-unit
{
	cursor: pointer;
	/* A finger on a unit drags it instead of scrolling the page. */
	touch-action: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

img.tap-selected
{
	outline: 2px solid #f0c040;
	outline-offset: 1px;
}

img.touch-drag-ghost
{
	position: fixed;
	z-index: 100000;
	margin: 0;
	opacity: 0.8;
	pointer-events: none;
}

.tap-placing div.battlefield-slot
{
	cursor: pointer;
	box-shadow: inset 0 0 0 2px rgba(240, 192, 64, 0.8);
}

/* The slot under a finger-dragged unit. */
div.battlefield-slot.touch-over
{
	box-shadow: inset 0 0 0 3px #f0c040;
}

div.battle img.unit-selected
{
	position: absolute;
	left: 10px;
	top: 50px;
}

div.battle div.battlefield div.unit
{
	padding: 0px;
}

div.battle div.battlefield div.unit img
{
	margin: 0px 0px 0px 0px;
	display: block;
}

div.battle div.clear-button
{
	position: absolute;
	left: 0px;
	width: 74px;
	bottom: 10px;
	text-align: center;
}

div.battle div.clear-button span
{
	text-transform: uppercase;
	font-weight: bold;
	color: black;
	background: white;
	border: 2px solid white;
	border-left: 5px solid white;
	border-right: 5px solid white;
}

div.battle div.battlefield div.unit.defender
{
	position: absolute;
	left: 9px;
	top: 10px;
}

div.battle div.battlefield div.unit.attacker
{
	position: absolute;
	left: 9px;
	bottom: 9px;
}

div.battle div.battlefield div.unit.attacker.attacking,
div.battle div.battlefield div.unit.attacker.dying,
div.battle div.battlefield div.unit.attacker.fled,
div.battle div.battlefield div.unit.attacker.whiped,
div.battle div.battlefield div.unit.attacker.stunned
{
	left: 6px;
	bottom: 6px;
}

div.battle div.battlefield div.unit.defender.attacking,
div.battle div.battlefield div.unit.defender.dying,
div.battle div.battlefield div.unit.defender.fled,
div.battle div.battlefield div.unit.defender.whiped,
div.battle div.battlefield div.unit.defender.stunned
{
	left: 6px;
	top: 7px;
}


div.battle div.battlefield div.unit.attacking
{
	border: 3px solid green;
}

div.battle div.battlefield div.unit.dying
{
	border: 3px solid red;
}

div.battle div.battlefield div.unit.fled,
div.battle div.battlefield div.unit.whiped
{
	border: 3px solid yellow;
}

div.battle div.battlefield div.unit.stunned
{
	border: 3px solid purple;
}

div.battle div.battlefield div.unit.fled img,
div.battle div.battlefield div.unit.whiped img
{
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

/*
	Challenge slots
*/
div.battlefield-slot.elevation
{
	background-image:url('../images/slots/elevation.png');
}

div.battlefield-slot.forest
{
	background-image:url('../images/slots/forest.png');
}

div.battlefield-slot.grass
{
	background-image:url('../images/slots/grass.png');
}

div.battlefield-slot.ruins
{
	background-image:url('../images/slots/ruins.png');
}

div.battlefield-slot.swamp
{
	background-image:url('../images/slots/swamp.png');
}

div.battlefield-decoration-left
{
	background-image:url('../images/slots/links.png');
}

div.battlefield-decoration-right
{
	background-image:url('../images/slots/rechts.png');
}

div.battlefield-decoration-left,
div.battlefield-decoration-right
{
	float: left;
	border: none;
	position: relative;
	width: 16px;
	height: 150px;
}

div.battle div.challenge-slot,
div.battle div.battlefield-slot
{
	float: left;
	width: 75px;
	height: 150px;
	border: none;
	position: relative;
}

div.battle div.clear-button span:hover
{
	cursor: pointer;
}

div.battle form.chooseUnits button.clear
{
	display: none;
}

div.chooseUnitContainer,
div.battlefield
{
	overflow: auto;
	position: relative;
	width: 100%;
	height: 171px;
}

ul.fightlog
{
	margin-top: 3px;
}

ul.fightlog a
{
	color: black;
	text-decoration: none;
}

ul.fightlog li.current a
{
	color: red;
}

div.battle ul.fightlog
{
	overflow: auto;
	height: 115px;
	padding: 2px;
}

div.battle.simulator ul.fightlog
{
	height: auto;
}

/*
	Simulator
*/
.selected_units
{
	width: 30px;
	position: absolute;
	top: 10px;
	left: 20px;
	margin: 0px 0px 0px 0px
}

/* Spells! */
div.spell
{
	margin-top: 5px;
	padding-top: 5px;
}

/* HELP */
div.help p
{
	clear: both;
}

/* Formation */
div.formation label
{
	float: left;
	width: 100px;
}

div.formation select
{
	float: left;
	clear: none;
	width: 75px;
}

/* Clan */
div.clan form.membermanager label
{
	float: left;
	width: 100px;
}

div.clan form.membermanager select
{
	float: left;
	clear: none;
}

div.clan textarea
{
	width: 215px;
	height: 75px;
}

div.clan span.clanmember
{
	float: left;
}

div.clan span.online-status
{
	float: right;
}

div.clan ul.clanmembers li
{
	clear: both;
}

div.clan p
{
	clear: left;
}

/* News bar */
.newsbar div.newsbar-line
{
	z-index: 5;
	background-image:url('../images/statusbar.png');
	width: 100%;
	height: 21px;
	position: relative;
}

.newsbar .goLeft
{
	float: left;
}

.newsbar .goLeft a
{
	width: 40px;
	height: 21px;
	background-image:url('../images/statusbar_left.png');
	display: block;
	position: relative; 
	left: -33px;
	z-index: 2;
	outline: none;
}

.newsbar .goRight
{
	float: right;
}

.newsbar .goRight a
{
	width: 40px;
	height: 21px;
	background-image:url('../images/statusbar_right.png');
	display: block;
	position: relative; 
	left: 33px;
	z-index: 2;
	outline: none;
}

.newsbar .newsbar-villagename .goLeft
{
	float: left;
}

.newsbar .newsbar-villagename .goLeft a
{
	width: 33px;
	height: 21px;
	background-image:url('../images/villagebar_left.png');
	display: block;
	position: relative; 
	left: -33px;
	z-index: 2;
	outline: none;
}

.newsbar .newsbar-villagename .goRight
{
	float: right;
}

.newsbar .newsbar-villagename .goRight a
{
	width: 33px;
	height: 21px;
	background-image:url('../images/villagebar_right.png');
	display: block;
	position: relative; 
	left: 33px;
	z-index: 2;
	outline: none;
}

/* Home, minimap and inbox at the right end: even gaps, centred in the bar, clear of the scroll curl. */
.newsbar div.newsbar-icons
{
	float: right;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 21px;
	margin-right: -18px;
	position: relative;
	z-index: 3;
}

.newsbar div.newsbar-icons a
{
	display: block;
	line-height: 0;
	text-decoration: none;
}

.newsbar .goLeft a span,
.newsbar .goRight a span
{
	display: none;
}

.newsbar div.newsbar-content
{
	line-height: 20px;
	text-align: center;
	position: absolute;
	left: 0px;
	width: 88%;
	z-index: 2;
}

.newsbar div.newsbar-content a
{
	color: black;
}

.newsbar div.newsbar-content a:hover
{
	color: red;
}

.newsbar div.newsbar-content ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.newsbar div.newsbar-content ul li
{
	float: left;
	display: block;
	width: 100px;
}

.newsbar div.newsbar-villagename
{
	position: absolute;
	z-index: 0;
	width: 350px;
	left: 50%;
	margin-left: -175px;
	text-align: center;
	background:url('../images/villagebar.png');
	bottom: 21px;
	height: 20px;
	line-height: 20px;
}

.newsbar div.newsbar-villagename a
{
	color: black;
	text-decoration: none;
}

/* Newsflash! */
div.newsflash
{
	line-height: 21px;
	background:url(../images/statusbar.png);
}

/* Overview */
.overview img
{
	height: 25px;
	float: right;
}

.overview li
{
	line-height: 25px;
}

.overview td.building-cors
{
	width: 25%;
	text-align: center;
}

.overview td.building-level
{
	width: 50px;
	text-align: center;
}

div.dialog table.table_window div.guiwindow.overview table td.building-name
{
	padding-left: 5px;
}

/* Help */
.help p.navigation
{
	margin-top: 15px;
	border-top: 1px solid gold;
}

/* Special units */
.specialunit
{
	background:url('../images/background_yellow.png');
	border: 1px solid #FFCC00;
	padding: 5px;
	margin-bottom: 5px;
}

/*
	Messages
*/
div.messages tr.unread td
{
	font-weight: bold;
}

/*
	Ranking
*/
table tr.current td
{
	background: yellow;
}

/*
	Logbook
*/
.logbook a
{
	color: black;
}

/*
	Searchbox
*/
div.searchbox
{
	border: 1px solid gold;
	padding: 5px;
}

form.searchbox li
{
	width: 50%;
	float: left;
	clear: none;
}

form.searchbox li.search_filter
{
	width: 100%;
}

form.searchbox li.minimum-distance
{
	width: 20%;
}

form.searchbox li.maximum-distance
{
	width: 30%;
}

form.searchbox fieldset
{
	border: 0px none black;
}

form.searchbox legend
{
	margin-bottom: 2px;
}

form.searchbox input,
form.searchbox select
{
	float: left;
	width: 150px;
}

form.searchbox input.checkbox
{
	width: auto;
}

form.searchbox label
{
	float: none;
	text-align: left;
	width: auto;
}

form.searchbox span.minus
{
	display: block;
	float: left;
	padding: 2px;
	font-weight: bold;
}

form.searchbox li.distance input
{
	width: 50px;
}

/*
	Spells
*/
div.spell p.castdetails
{
	padding-top: 0px;
	margin-top: -4px;
	border-bottom: 1px solid #bfb39b;
}

ul.bonusbuildings li
{
	clear: left;
}

ul.bonusbuildings li div.image
{
	float: left;
}

ul.bonusbuildings li div.description
{
	float: left;
	width: 235px;
	overflow: hidden;
}

form#selectrace select
{
	width: 200px;
}

.dialog table.table_window div.guiwindow table.logbook td.actions
{
	width: 100px;
	text-align: center;
}

/**  Underworld **/
.underworld.army input[type=checkbox]
{
	float: left;
}

h3 label
{
	display: inline;
	padding: 0;
}

.dialog table.table_window div.guiwindow.underworld.battle table
{
	border-collapse: collapse;
}

.underworld.battle tr.success
{
	background: green;
}

.underworld.battle tr.failure
{
	background: red;
}

/*
	Server settings
*/
.serversettings table.serversettings-speeds
{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 8px 0;
}

.serversettings table.serversettings-speeds td
{
	padding: 3px 6px;
}

.serversettings table.serversettings-speeds td.serversettings-value
{
	text-align: right;
	font-weight: bold;
}

.serversettings h3
{
	margin-top: 16px;
}

/*
	Defense formation: the attack picker's terrain slots, each with a front place and
	(with enough regiments) a reserve place below it. Regiments are dragged or tapped in.
*/
div.formation p.formation-help
{
	margin: 0 0 8px;
}

div.formation p.formation-note
{
	margin: 6px 0 0;
	font-size: 0.9em;
}

div.formation div.formation-scroll
{
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

div.formation div.formation-field
{
	overflow: hidden;
	margin: 0 auto;
}

div.formation div.formation-slot
{
	float: left;
	width: 75px;
	height: 150px;
	position: relative;
}

div.formation span.formation-terrain
{
	position: absolute;
	left: 2px;
	right: 2px;
	top: 3px;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #40331f;
	background: rgba(251, 243, 220, 0.85);
	border-radius: 3px;
}

div.formation div.formation-cell
{
	position: absolute;
	left: 9px;
	width: 55px;
	height: 55px;
	border: 1px dashed rgba(251, 243, 220, 0.9);
	border-radius: 3px;
}

div.formation div.formation-cell.front
{
	top: 22px;
}

div.formation div.formation-slot.rows-1 div.formation-cell.front
{
	top: 52px;
}

div.formation div.formation-cell.reserve
{
	top: 86px;
}

div.formation div.formation-cell.filled
{
	border-color: transparent;
}

div.formation span.formation-cell-label
{
	display: block;
	margin-top: 19px;
	font-size: 10px;
	text-align: center;
	color: #40331f;
	background: rgba(251, 243, 220, 0.85);
}

div.formation div.formation-cell.filled span.formation-cell-label
{
	display: none;
}

div.formation div.formation-cell.reserve img.unit-selected
{
	opacity: 0.85;
}

div.formation img.unit-selected
{
	position: absolute;
	left: 1px;
	top: 1px;
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

div.formation div.clear-button
{
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 3px;
	text-align: center;
	font-size: 10px;
	line-height: 14px;
}

div.formation div.clear-button span
{
	display: block;
	color: #000097;
	text-decoration: underline;
	background: rgba(251, 243, 220, 0.9);
	cursor: pointer;
}

div.formation div.clear-button span:hover
{
	color: #b3261e;
}

.tap-placing div.formation-cell
{
	cursor: pointer;
	box-shadow: inset 0 0 0 2px rgba(240, 192, 64, 0.8);
}

div.formation div.formation-cell.touch-over,
div.formation div.formation-cell.hover
{
	box-shadow: inset 0 0 0 3px #f0c040;
}

div.formation div.formation-pool
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

div.formation div.formation-unit
{
	width: 92px;
	text-align: center;
	font-size: 11px;
	line-height: 14px;
}

div.formation div.formation-unit img
{
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto 2px;
	border: 1px solid black;
	position: relative;
	z-index: 1;
}

div.formation div.formation-unit span
{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.formation div.formation-unit span.formation-unit-name
{
	font-weight: bold;
}

/* Placed regiments stay in the list (drag them again to move them), dimmed. */
div.formation div.formation-unit.placed img,
div.formation div.formation-unit.placed span
{
	opacity: 0.45;
}

div.formation div.ui-btn-row
{
	margin-top: 10px;
}

/* Tap-to-place marks the places, not the whole terrain column. */
.tap-placing div.formation-slot
{
	box-shadow: none;
}