@import "../client/style"
@import "./ui"

html
	--primary #fb4e4e

body
	margin 0
	color #34495e
	word-break break-word

main
	margin 0 0 0 330px
	padding 64px
	width 850px
	max-width calc(100% - 330px)

	h1
		margin 0 0 24px 0
		padding 16px 0
		font-size 1.5em
		border-bottom solid 2px #eee

	h2
		margin 1em 0 24px 0
		padding 0 0 16px 0
		font-size 1.4em
		border-bottom solid 1px #eee

	h3
		margin 1em 0 0 0
		padding 0
		font-size 1.25em

	h4
		margin 1em 0 0 0

	p
		margin 1em 0
		line-height 1.6em

	hr
		border none
		border-bottom solid 2px #eee

	> aside
		margin-top 32px
		padding-top 32px
		border-top solid 2px #eee

	> footer
		margin 32px 0 0 0
		border-top solid 2px #eee

		> small
			display block
			margin 16px 0 0 0
			color #aaa

nav
	display block
	position fixed
	z-index 10000
	top 0
	left 0
	width 330px
	height 100%
	overflow auto
	padding 32px
	background #fff
	border-right solid 2px #eee

	ul
		padding 0
		margin 0

@media (max-width 1025px)
	main
		margin 0
		max-width 100%

	nav
		position relative
		width 100%
		max-height 128px
		background #f9f9f9
		border-right none

@media (max-width 768px)
	main
		padding 32px

@media (max-width 512px)
	main
		padding 16px

table
	width 100%
	max-width 100%
	overflow auto
	border-spacing 0
	border-collapse collapse

	thead
		font-weight bold
		border-bottom solid 2px #eee

		tr
			th
				text-align left

	tbody
		tr
			&:nth-child(odd)
				background #fbfbfb

	th, td
		padding 8px 16px
		min-width 128px

code
	padding 4px 8px
	font-family Consolas, 'Courier New', Courier, Monaco, monospace
	//color #295c92
	background #f2f2f2
	border-radius 4px

pre
	overflow auto

	> code
		display block
		padding 16px

kbd.group
	display inline-block
	padding 4px
	background #fbfbfb
	border 1px solid #d6d6d6
	border-radius 4px
	box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)

kbd.key
	display inline-block
	padding 6px 8px
	background #fff
	border solid 1px #cecece
	border-radius 4px
	box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)

td
	> kbd.group,
	> kbd.key
		margin 4px