/* small screen layout */
/* common */
.desktop { display: none; }

#content
{
	position: relative;
	min-height: 369px;
	padding-top: 1.2em;
	background-color: #BA8;
	background-image: url("assets/cloth.jpg");
	transition: .8s ease-in-out;
}

/* Header */
header::before { height: 22vw; }

header nav
{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	top: -0.1em;
	font-size: .9em;
}

.hover header nav > a:hover, .touch header nav > a:active,
.hover header nav > span:hover, .touch header nav > span:active
{
	top: 2px;
	box-shadow: 0 2px 5px -1px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
}

.show_menu header nav span
{
	color: red;
	font-weight: bold;
}

header nav > a, header nav > span
{
	display: inline-block;
	position: relative;
	line-height: 19px; /* iOS fix */
	height: 1.2em;
	padding: 8px 0;
	vertical-align: top;
	text-align: center;
	background-color: #FEC;
	background-image: url("assets/paper.jpg");
	box-shadow: 0 7px 5px -5px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
	transition: .2s;
	z-index: 10;
}

header nav > a
{
	flex-basis: 40%;
	cursor: pointer;
}

header nav > span
{
	cursor: context-menu;
	flex-basis: 20%;
}

header .second_level
{
	background-color: #DDD;
	background-image: url("assets/leather.jpg");
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	box-shadow: 0 0 8px 0 #555 inset;
	flex-basis: 100%;
}

header .second_level > div
{
	width: 12em;
	margin: 1.5em auto 1em auto;
	padding: 1em;
	text-align: center;
	background-color: #FEC;
	background-image: url("assets/paper.jpg");
	box-shadow: -1px -1px 0 0.5px gray, 0 0 4px 0 gray inset;
	border-radius: 4px;
}

header nav a
{
	padding: 8px 0;
	line-height: 19px; /* iOS fix */
}

/* show or hide more menu */
.no_menu #content { margin-top: -314px; }

/* Pane, enable more feature to keep screen clean */

@media screen and (max-width: 599px)
{
	.more.hide h2, .more.hide p, .more.hide ol { display: none; }
	
	.more span.mbutton
	{
		display: inline-block;
		margin: .5em 0 1em 0;
		cursor: pointer;
		font-style: italic;
		color: #877;
	}
	
	.more.hide span.mbutton::before { content: "More..."; }
	.more.show span.mbutton::before { content: "Less..."; }
	.hover .more span.mbutton:hover, .touch .more span.mbutton:active { text-shadow: 0 0 1px black; }
}