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

body
	color: $darker
	background: $lighter
	font-family: "Noticia Text", serif
	padding-bottom: 36px

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

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

.pure-menu.menu-verses
	position: fixed
	left: 0
	bottom: 0
	:hover
		cursor: pointer
	.arrow
		left: -15px
		line-height: 22px
		position: absolute

#content
	margin-top: 1em

.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-menu
		color: $lighter
		padding: 0px 10px
		position: relative

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

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

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

	z-index: 2
	max-height: 50%
	overflow: auto

	a
		color: $neutral

	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