--- /dev/null
+@require 'code/wfpl/stylus-helpers.styl'
+@require '.image-mtimes.styl'
+
+// dimensions
+site-width = 934px // inside the shadow
+site-padding = 30px
+sidebar-width = 220px
+content-width = (site-width - (site-padding * 3) - sidebar-width)
+font-size-normal = 15px
+font-size-small = 13px
+font-size-tiny = 11px
+site-column-gap = 40px
+spritesheet-height = 1050px // for sprites near bottom
+
+// 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
+ margin-top: 15px
+ font-weight: bold
+
+.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
+ color: content-fg
+ font: font-size-normal Arimo, Arial, sans-serif
+
+ // Styles for the <body> tag within ckeditor
+ background: content-bg
+ width: content-width
+ margin: 0 auto
+ &.real_body_tag // revert the above for the <body> on the real site
+ background: window-bg
+ width: auto
+ margin: 0
+
+// expand the ckeditor widget so there's space for the content to be exactly
+// the size of the content outside the editor
+#cke_content
+ margin-right: -15px
+ margin-left: -15px
+
+// 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,
+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,
+section > :last-child,
+nav > :last-child,
+div > :last-child,
+.last
+ margin-bottom: 0px
+
+table.evenodd
+ > 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)
Got questions, comments, patches, etc.? Contact Jason Woofenden