/* BASIC LAYOUT */

html {
	font: 15px/1.3 'Open Sans', Lato, sans-serif;
}

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

#app {
	height: 100%;
	display: flex;
	flex-direction: column;
}

#app > header {
  background-color: #eee;
  flex: 0 0 auto;
}

#app > main {
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
}

#app > footer {
  background-color: #eee;
  flex: 0 0 auto;
}

/* HEADER: NAVIGATION */

nav {
	border-bottom: 1px solid #ccc;
	margin: 0 0 1rem;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

nav li {
	float: left;
	margin-right: 1px;
	padding: 0;
	position: relative;
}

nav li a {
	background: #ddd;
	color: #333;
	display: block;
	padding: 0.5rem 2rem;
	text-decoration: none;
}

@media (hover: hover) {
	nav li a:hover,
	.list-mode li.list-link a,
	.word-mode li.list-link a,
	.quiz-mode li.quiz-link a {
		background: #468;
		color: #fff;
	}
}

nav li span {
	background: #468;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	border-radius: 0 0 0 1rem;
	color: #fff;
	font-size: 60%;
	font-weight: 700;
	padding: 0.1rem 0.1rem 0.2rem 0.5rem;
	position: absolute;
	right: 0rem;
	top: 0rem;
}

/* FILTERS */

form {
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0.5rem 0 1rem;
}

fieldset {
	border: none;
	flex: 1;
	margin: 0 2rem;
	padding: 0;
}

legend {
	display: none;
}

label {
	display: inline-block;
	margin-right: 0.5em;
}

select {
	border: 1px solid #ccc;
	font: inherit;
	padding: 0.3rem;
}

a.reset {
	color: inherit;
	font-size: 1.5rem;
	padding: 0 2rem;
	text-decoration: inherit;
	position: relative;
	top: -0.2rem;
}

/* VOCABLE CARD */

div.vocable-card {
	margin: 1rem;
	padding: 0.7rem 1rem 0.3rem;
	position: relative;
}

div.vocable-card div.vocable-card {
	border: 1px solid #ccc;
	margin: 0;
	padding: 0.5rem 1rem;
}

/* VOCABLE TEXT */

.vocable h1:lang(ru) {
	color: #369;
	font-size: 2rem;
	line-height: 1;
}

.vocable h1:lang(ru) b {
	font-weight: inherit;
	color: #6b3;
}

.vocable h1:lang(ru) i {
	display: block;
	font-weight: 400;
	font-size: 80%;
	opacity: 0.6;
}

.vocable .vocable h1:lang(ru) i {
	display: none;
}

.vocable h2 {
	color: #b37;
	font-size: 1.5rem;
}

.vocable h3 {
	color: #999;
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

/* EXAMPLES */

table.examples {
	border-collapse: collapse;
	margin: 1rem 0;
}

table.examples caption {
	color: #999;
	font-size: 1.2rem;
	font-weight: 400;
	text-align: left;
	margin: 0 0 0.5rem;
}

table.examples td b {
	font-weight: inherit;
}

table.examples td:last-child:before {
	content: "–";
	padding: 0 0.6em;
}

/* HIDDEN MODE FOR QUIZ */

/* inspired by https://gist.github.com/wizard04wsu/a6312c18dbf75da063c3907f00235336 */
#app.hide h1,
#app.hide.type-noun li.propgroup-gender span {
	color:transparent !important;
	opacity: 0.7;
	text-shadow:0 0 18px #468;
}

#app.hide h1 b {
	color:transparent !important;
}

#app.hide h1 i
{
	visibility: hidden;
}

#app.hide table.examples {
	display: none;
}

/* VOCABLE LIST */

table.vocable-list {
	border-collapse: collapse;
	margin: 1rem;
}

table.vocable-list thead th {
	background: #eee;
	font-weight: 700;
}

@media (hover: hover) {
	table.vocable-list tbody tr:hover {
		background: #feb;
		cursor: pointer;
	}
}

table.vocable-list th,
table.vocable-list td {
	border: 1px solid #ccc;
	font-weight: 400;
	padding: 0.2rem 1rem;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

th:lang(ru) b,
td:lang(ru) b {
	font-weight: 700;
	color: #6b3;
}

table.vocable-list td.center {
	text-align: center;
}

table.vocable-list td.right {
	text-align: right;
}

/* LABEL LIST */

ul.label-list {
	list-style: none;
	margin: 0 0 0.5rem;
	overflow: hidden;
	padding: 0 1px 1px 0;
}

ul.label-list li {
	float: left;
	margin: 0 -1px 0 0;
	overflow: hidden;
}

ul.label-list li > span {
	display: block;
	overflow: hidden;
}

ul.label-list span.group span {
	color: #333;
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 700;
	padding: 0.1rem 0.7rem;
	text-transform: uppercase;
}

ul.label-list span.prop {
	border: 1px solid #ccc;
	display: block;
	font-size: 1.1rem;
	padding: 0.2rem 0.7rem;
}

ul.label-list li:first-child span.prop {
	border-radius: 1rem 0 0 1rem;
}

ul.label-list li:last-child span.prop {
	border-radius: 0 1rem 1rem 0;
}

ul.label-list li:only-child span.prop {
	border-radius: 1rem;
}

li.prop-animate   { color: #393 }
li.prop-feminine  { color: #c35 }
li.prop-masculine { color: #44f }
li.prop-neuter    { color: #6b3 }
li.prop-plural    { color: #f63 }

ul.label-list li.prop-inanimate span,
ul.label-list li.prop-imperfective span,
ul.label-list li.prop-nominative span,
ul.label-list li.prop-present span,
ul.label-list li.prop-singular span {
	background: #fff;
	color: #666
}

ul.label-list a {
	color: #468;
	text-decoration: none;
}

/* SIMPLE PROPS IN TABLE */

span.prop span.group {
	font-size: 0.7rem;
	text-transform: uppercase;
}

span.prop span.group:after {
	content: ":";
}

/* INDIVIDUAL PROPS */

.prop-animate   { color: #393 }
.prop-feminine  { color: #c35 }
.prop-masculine { color: #44f }
.prop-neuter    { color: #2a2 }
.prop-plural    { color: #f63 }

.prop-inanimate,
.prop-imperfective,
.prop-nominative,
.prop-present,
.prop-singular {
	color: #999
}

/* FORMS */

ul.forms {
	list-style: none;
	margin: 2rem 0 0.5rem;
	overflow: hidden;
	padding: 0 1px 1px 0;
}

ul.forms li {
	float: left;
	margin: 0 -1px -1px 0;
}

/* QUIZ CONTROLS */

ul.quiz-controls {
	overflow: hidden;
	list-style: none;
	margin: 0 0 2px;
	padding: 0;
	display: flex;
	flex-direction: row;
}

ul.quiz-controls li {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

ul.quiz-controls li span {
	color: #fff;
	display: block;
	font-size: 1.5rem;
	padding: 1rem 2rem;
	text-align: center;
	cursor: pointer;
	text-decoration: inherit;
	text-align: center;
}

span.action-reveal {
	background: #46b;
}

span.action-win {
	background: #393;
	border-right: 2px solid #fff;
}

span.action-loose {
	background: #c33;
}

ul.quiz-controls li.reveal           { display: none; }
#app.hide ul.quiz-controls li.reveal { display: block; }
#app.hide ul.quiz-controls li.next   { display: none; }

/* QUIZ STATS */

ul.stats {
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

ul.stats li.good-box { background: #393; }
ul.stats li.well-box { background: #46b; }
ul.stats li.new-box { background: #fb0; }
ul.stats li.learn-box { background: #e92; }
ul.stats li.cellar-box { background: #c33; }

ul.stats li {
	border-left: 2px solid #fff;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.5rem;
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-align: center;
	white-space: nowrap;
}

ul.stats li:first-child {
	border-left: none;
}

ul.stats a {
	color: inherit;
	text-decoration: inherit;
	display: block;
	padding: 0.3rem 0.3rem 1rem;
}

ul.stats span {
	display: block;
	font-size: 0.7rem;
	text-align: left;
}

/* EXTERNAL RESOURCES */

ul.ext {
	list-style: none;
	margin: 2rem 1px 0 0;
	overflow: hidden;
	padding: 0;
}

ul.ext li {
	color: #468;
	float: left;
	margin: 0 -1px 0 0;
	padding: 0;
}

@media (hover: hover) {
	ul.ext li:hover {
		background: #468;
		color: #fff;
	}
}

ul.ext a,
ul.ext span {
	border: 1px solid #ccc;
	color: inherit;
	cursor: pointer;
	display: block;
	padding: 1rem;
	text-decoration: inherit;
}

ul.ext li.wiktionary a:after {
	content: "W";
	font-weight: 700;
}

ul.ext li.audio span:after {
	content: "▶\fe0e";
}

/* PRINT CSS */

@media print {

	::-webkit-scrollbar {
		display: none;
	}

	#app {
		display: block;
	}

	header,
	footer,
	.no-print {
		display: none;
	}

	table.vocable-list th,
	table.vocable-list td {
		background: none !important;
		border: none;
		padding: 0 1rem 0.2rem 0;
	}

	th:lang(ru) b {
		color: #000;
		font-weight: inherit;
	}

	span.prop {
		color: #000;
	}
}