$lighter = #EEE
$light = #CCC
$neutral = #888
$dark = #333
$darker = #222
$bottom_bar_height = 32

body
	color: $darker
	background: $lighter
	font-family: "Alegreya", serif
	font-size: 18px
	line-height: 24px
	text-rendering: optimizeLegibility
	padding-bottom: $bottom_bar_height px

.pure-menu.pure-menu-open
	color: $lighter
	background: $darker
	li
		a
			color: $light
			background: $darker
			line-height: 22px
			&:hover
				background: $dark
				color: $lighter

	.pure-g-r
		.version
			padding: 5px 0px
			vertical-align: middle

.pure-menu.menu-main
	height: 34px

.pure-menu.menu-verses
	height: $bottom_bar_height px
	position: fixed
	left: 0
	bottom: 0
	:hover
		cursor: pointer
	.arrow
		width: 24px
		height: 24px
		left: -15px
		top: 2px
		position: absolute
		transition: .3s linear all
	.arrow.ng-hide
		transform: scale(.1)

a
	color: $dark

p
	margin: 24px 0px

.icon
	height: 18px
	width: 18px
	line-height: 18px
	margin-right: 7px
	margin-top: -2px
	vertical-align: middle
	display: inline-block

#section-meta .key
	padding-right: 10px
	font-style: italic
	text-align: right
	&:after
		content: ": "

.version
	vertical-align: top
	display: inline-block
	letter-spacing: normal
	word-spacing: normal

	.version-container
		border-top: 1px solid $light
		position: relative
		padding: 0px 10px
	.version-container-top
		border-top: 0px

	.version-menu
		color: $lighter
		padding: 0px 10px
		position: relative

	.section
		color: $lighter
		background: $dark
		padding: 1px 5px
		border-radius: 5px
		position: absolute
		left: 0px
		top: -6px

.pick
	background: $dark
	color: $light
	position: fixed
	left: 0
	bottom: $bottom_bar_height px
	transition: .3s linear all

	width: 100%
	.pick-in
		padding: 10px

	z-index: 2
	max-height: 50%
	overflow-y: scroll

	a
		color: $neutral

	#too-few, #too-many
		color: #F66
		text-align: center
		transition: .3s linear all
		height: 36px
	#too-few.ng-hide, #too-many.ng-hide
		height: 0px

	table
		margin: auto
		min-width: 50%
		th
			text-align: left
			color: $lighter
		td,th
			padding: 5px 15px
		tr.switch:hover
			background: $darker
			cursor: pointer

	.disabled
		color: $neutral

.pick.ng-hide
	max-height: 0

max_columns = 20
for columns in 1 .. max_columns
	.cols-{columns}
		.version
			width: (100 / columns)%

			.version-padded
				padding: 0px (100 / (5 * columns))%

.ng-hide-add, .ng-hide-remove
	display: block !important

.ngdialog.ngdialog-theme-default .ngdialog-content
	padding: 1px 18px
	line-height: inherit
	font-family: inherit
	font-size: inherit
	width: 700px