/* Whole page */

.light-hidden {
	display: none;
}

.container {
  margin-left: 0;
}

/* Menu */

#spacer-menu {
	height: 60px;
}

#light-menu {
	display: flex; flex-direction: row; align-items: center;
	width: 100%; height: 60px;
	overflow-x: auto; overflow-y: hidden;
}

#logo {
	width: auto; height: 100%; margin-bottom: 0;
}
#logo img {
	width: 60px;
	margin-bottom: -4.5px;
}

#light-menu li {
	display: flex; flex-direction: column;
	align-items: center; flex-grow: 1;
	height: 100%;
	padding: 0 2px;
}
#light-menu li > a {
	cursor: pointer;
}
#light-menu li > a:hover {
	text-decoration: none;
}
#light-menu li > a > svg {
	width: 20px;
}
#light-menu li > a > div {
	display: block;
	font-size: 12px;
}
#light-menu li:not(.opened) > a:hover::after,
#light-menu li:not(.opened) > a:focus::after {
	display: none;
}


#light-menu li span[notifications]:not([notifications="0"])::before {
	content: attr(notifications);
	display: inline-block; margin-right: 6px;
	vertical-align: middle;
	padding: 0 5px 0 4px; border-radius: 5px;
	font-family: NotoSans;
	background: #ffffff; color: #000000;
}


#menu {
	width: 100%; height: 0; overflow-x: hidden;
	font-family: NotoSans; font-size: 12px;
	transition: .1s ease;
	position: unset;
	left: unset;
}
#menu.opened {
	height: 100%;
	overflow-y: auto;
	left: unset;
}

#menu > div {
	width: 100%;
}
#menu h2 {
	font-size: 15px;
}
#menu h2 > svg {
	width: 24px;
}

#menu span {
	display: block;
	color: #b8b8b8;
	font-size: 10px;
}
#menu span > a {
	display: inline;
	margin: 0; font-style: normal;
	font-size: 12px;
}
#menu ul {
	list-style: none;
	margin: 10px 0; padding: 0;
	line-height: 20px;
	color: #b8b8b8;
}
#menu li {
	margin: 5px 0;
}

@media all and (max-width: 549px) {
	#light-menu, #spacer-menu {
		height: 40px;
	}
	#logo img {
		width: 40px;
	}
	#light-menu li > a > div {
		display: none;
	}
}

#menu form input {
	display: block;
	margin: 5px 15px; padding: 5px 10px;
	font-size: 14px;
	background: #e8e8e8; transition: background .15s ease;
}
#menu form input:first-child {
	margin-bottom: 0; border-bottom: none;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
}
#menu form input:nth-child(2) {
	margin-top: 0; border-top: 1px solid #dddddd;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}
#menu form a {
	display: block; margin-left: 15px;
}


/* Header */

header {
	padding: 0 8px;
}

/* Homepage */

#shoutbox {
	display: none;
}

section {
	width: unset;
	margin: 16px;
}
.home-title {
	padding: 10px;
}
.home-title p {
	font-size: 14px;
}

.home-pinned-content {
	margin-top: 30px;
}
.home-pinned-content article {
	margin: 5px 0;
}
.home-pinned-content article > a {
	width: 100%;
	display: flex; align-items: center;
	text-decoration: none;
}
.home-pinned-content img {
	flex-shrink: 0;
	width: 100px; height: 100px;
}
.home-pinned-content article div {
	flex-grow: 1; margin-left: 10px;
}
.home-pinned-content h2 {
	margin: 0; color: #242424;
	text-decoration: underline;
}
.home-pinned-content span {
	color: #000000; font-size: 14px;
}

.home-articles > div {
	margin-top: 30px;
}
.home-articles article {
	margin-bottom: 15px;
}
.home-articles article > img {
	flex-shrink: 0; width: 128px; height: 64px;
}
.home-articles article > div {
	margin-left: 5px;
}
.home-articles h1 > a {
	font-size: 13px; color: #666666;
}
.home-articles p {
	font-size: 14px;
}


/* Notifications */

.alert {
	display: none;
}