/************************************Main settings************************************/
*
{
	box-sizing: content-box;
}

html
{
	width: 100%;
	height: 100%;
}

body
{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	
	height: 100%;
	
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url("../images/intro_background.png");
}

h1
{
	text-align: center;
}

/************************************Overall game settings************************************/
#header
{
	/*flex-grow: 1;/*Adapt header size depending on game area size*/
	
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	justify-content: center;
	background-color: #469840;
}

.game_area
{
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
}

/************************************game_area settings************************************/

#game_info
{
	display: flex;
	flex-direction: row;
	width: 100%;
	background-image: url("../images/header.png");
	align-items: center;
	text-align: center;
}

#game_info *
{
	flex: 1;
	height: 100%;
	border: 7px solid;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

#game_info > .menu
{
	cursor: pointer;
	border-image-source: url("../images/menu_unselected.png");
	border-image-slice: 8;
	border-image-repeat: round;
}

#game_info > #game_time
{
	border-image-source: url("../images/menu_time.png");
	border-image-slice: 8;
	border-image-repeat: round;
}

#game_info > .menu.selected
{
	border-image-source: url("../images/menu_selected.png");
}

#main_screen
{
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
}


/******************************Human (main_screen)*****************************/
#human_resources
{
	width: 20%;
	background-color: #F5F9BD;
}

#human_resources > .human
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.human > .name_status_portrait
{
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}

/*Human portrait*/
.human > .name_status_portrait > img
{
	width: 30%;
}

/*Human name and status container*/
.human > .name_status_portrait > .name_status
{
	width: 70%;
	display: flex;
	flex-direction: column;
	line-height: 0px;
}

/*Human name*/
.human > .name_status_portrait > .name_status > p
{
	width: 100%;
}

/*Human status container*/
.human > .name_status_portrait > .name_status > .status
{
	display: flex;
	flex-direction: row;
	align-items: center;
}

/*Human status icon*/
.human > .name_status_portrait > .name_status > .status > .status_icon
{
	max-width: 20px;
	max-height: 20px;
}

/**************************Fields (main_screen)************************/

#fields
{
}

#fields_overlay
{
	position: absolute;
}

/*******************Resources (main_screen)*************************/
#resources_container
{
	width: 20%;
	text-align: center;
	background-color: #F5F9BD;
}

#resources_container > #seeds
{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.seed
{
	cursor: pointer;
	width: 25%;
	z-index: 2;
}

.seed > p
{
	margin: auto;
}

.seed > img
{
	width: 100%;
}

#seeds_selector
{
	display: none;
	position: absolute;
	z-index: 1;
	width: 25%;
	height: auto;
}

#resources_container > #resources
{	
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	/*height: 66%;*/
	/*
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url("../images/resources_background.png");
	*/
}

#resources_container > #resources > .resource
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.resource > img
{
	width: 40%;
	align-self: center;
}

.resource > p
{
	width: 50%;
	align-self: center;
}