@require 'inc/wfpl/stylus_helpers.styl'
@require '.sha1sums.styl'

// dimensions
site_width = 934px // inside the shadow
site_padding = 30px
content_width = (site_width - (site_padding * 2))
font_size_normal = 15px
font_size_small = 13px
font_size_tiny = 11px
site_column_gap = 40px

// colors
content_bg = #fff
content_fg = #000
window_bg = #e6e7e8

// always show vertical scrollbar, so content doesn't shift around when
// switching from tall to short pages
html
	overflow-y: scroll

header, hgroup, section, footer, aside, nav, article, figure, img
	display: block

code.html
	display: block
	font: 12px monospace
	border: 1px solid black
	background: #ccc

.caption
	font-weight: bold
	* + &
		margin-top: 15px

.field
	padding-top: 3px;

div.field_notes
	font-size: 12px
	line-height: 16px

fieldset
	border: 1px dotted black
	padding: 0 15px 15px 15px
	margin: 15px 0
	position: relative

legend
	padding: 0 6px
	font-weight: bold

div.error
	border: 2px solid red
	padding: 13px
	margin: 20px
	background: #fdd

h1
	font-size: 22px
	margin: 20px 0 10px

h1 + h4.tagline
	margin: -10px 0 10px

h2
	font-size: 19px
	margin: 30px 0px 8px

h2 + h4.tagline
	margin: -8px 0 8px

h3
	font-size: 16px
	margin: 12px 0 5px

h3 + h4.tagline
	margin: -5px 0 5px

h4
	font-size: 12px
	margin: 10px 0 3px

h4 + h4.tagline
	margin: -3px 0 3px


h1, h2, h3, h4
	font-weight: bold

h4.tagline
	font-weight: normal


p.quote
	font-size: 14px
	font-weight: bold
	padding-bottom: 1px
	margin: 15px 15px 0 15px

p.quote:before, p.quote:after
	font-size: 40px
	line-height: 0
	color: #777
	font-weight: bold
	display: inline-block
	height: 10px
	position: relative

p.quote:before
	content: '“'
	top: 10px

p.quote:after
	content: '”'
	top: 20px
	width: 0; // make sure it doesn't wrap

p.attrib, p.attribution
	margin: 0 0 15px 20px
	margin-top: 1px
	padding-left: 30px
	font-size: 12px
	font-weight: normal
	&:before
		content: "— "

body
	margin: 0
	padding: 0
	background: window_bg
	color: content_fg
	font: font_size_normal Arimo, Arial, sans-serif

// call this for each ckeditor on each page
ckeditor(basename, element_name, width)
	// ckeditor ui, including border around wysiwyg area
	#{basename}_body #cke_{element_name}
		margin-left: -15px
		if width < 650px
			width: 680px
		else
			width: width + 30px
	// body tag of the wysiwyg area
	#{basename}_wysiwyg_{element_name}
		background: content_bg
		width: width
		margin: 0 auto
		if width <= 600px
			min-width: 0
			width: width
			margin: 0 auto
			border-right: 20px solid #eee
			border-left: 20px solid #eee
			border-top: 1px solid #eee
			border-bottom: 1px solid #eee
			min-height: 250px

ckeditor('admin_pages', 'content', content_width)

// outermost div for centering, shadow, etc
#centerer
	position: relative
	background: content_bg
	padding-top: 150px
	padding-right: site_padding
	padding-bottom: site_padding
	padding-left: site_padding
	width: site_width - @padding-left - @padding-right
	margin: 10px auto

nav#site-nav
	padding-bottom: 20px
	ul
		li_reset()
		space_evenly()

footer
	clear: both
	padding-top: 40px
	ul
		li_reset()
		li
			li_reset()
			display: inline-block
			margin-right: 10px

#wfpl_messages
	background: #ffd
	padding: 5px 12px
	margin: 0 0 20px 0
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
	border-radius: 4px
	p
		font-size: 120%
		padding: 5px 0
		margin: 0px

	hr
		display: block
		height: 1px
		border: 0
		border-top: 1px dotted #ddc;
		margin: 0
		padding: 0


#admin_links
	background: #fdd
	padding: 3px
	margin-bottom: 15px





// floating images (from pastable example code on admin_images)
span.wfpl_ifl
	display: block
	float: left
	clear: left
	font-size: 10px
	color: black
	text-align: right
	background-repeat: no-repeat
	background-position: left top
	margin: 0 10px 2px 0

span.wfpl_ifr
	display: block
	float: right
	clear: right
	font-size: 10px
	color: black
	font-weight: normal
	text-align: right
	background-repeat: no-repeat
	background-position: left top
	margin: 0 0 2px 10px

div.wfpl_ic
	margin: 15px auto
	font-size: 10px
	font-weight: normal
	text-align: right
	background-repeat: no-repeat
	background-position: center top


// hack so that vertical margins are only between siblings for the most part
td > :first-child,
th > :first-child,
legend + *,
article > :first-child,
aside > :first-child,
section > :first-child,
nav > :first-child,
div > :first-child,
.first
	margin-top: 0px

td > :last-child,
th > :last-child,
fieldset > :last-child,
article > :last-child,
aside > :last-child,
section > :last-child,
nav > :last-child,
div > :last-child,
.last
	margin-bottom: 0px

table.evenodd
	td, th
		padding: 6px 12px
		text-align: left
	> thead, > tbody, &
		> tr:nth-child(2n+1)
			> td, > th
				background: rgba(0,0,0,0.04)
			&:hover
				> td, > th
					background: rgba(0,0,0,0.07)
		> tr:nth-child(2n+0)
			> td, > th
				background: rgba(0,0,0,0.02)
			&:hover
				> td, > th
					background: rgba(0,0,0,0.09)

.field_error
	input
		border: 1px solid red

.password_suggestion
	& + &
		margin-left: 10px