/*
BEST JEWEL is a jewel game with multiple mods.
Copyright © 2013 - 2014 Rémi DUCCESCHI
remi.ducceschi@gmail.com

This file is part of Best Jewel.

Best Jewel is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	display: flex;
	flex-flow: column;
	background-color: black;
	color: #CCC;
}

header, footer
{
	flex-grow: 0;
	text-align: center;
	background-color: green;
}

header
{
	margin-bottom: 1%;
}

footer
{
	margin-top: 1%;
}

#content
{
	flex-grow: 1;
	display: flex;
	flex-flow: row;
}

section, #menus
{
	vertical-align: middle;
}

section
{
	flex-grow: 1;
	background-color: blue;
}

#menus
{
	flex-grow: 0;
	display: flex;
	flex-flow: column;
}

aside, nav
{
	padding: 1%;
}

aside
{
	flex-grow: 1;
}

button
{
	display: block;
	margin: 3px;
}

@media (min-aspect-ratio: 1/1) /* width >= height (landscape) */
{
	body
	{
		flex-flow: column;
	}

	#content
	{
		flex-flow: row;
	}

	#menus
	{
		flex-flow: column;
		margin: 0;
		margin-left: 1%;
		margin-right: 1%;
	}
}

@media (max-aspect-ratio: 1/1) /* width <= height (portrait) */
{
	body
	{
		flex-flow: column;
	}

	#content
	{
		flex-flow: column;
	}

	#menus
	{
		flex-flow: row;
		margin: 0;
	}
}