@import definitions

#content img
  margin: 0 5px
  padding: 2px

#content
  li, dd
    margin-left: 30px
    line-height: 1.5em
  dt
    margin-top: 1em
    font-weight: bold
  dd
    font-style: italic
  p
    line-height: 1.5em
    margin: 1em 0

blockquote, .note
  color: $gray
  font-style: italic
  padding: 0 0 0 33px
  margin: 5px

blockquote
  background: url(../images/theme/quote.png) no-repeat top left

.note .note-title
  font-style: normal
  font-weight: bold
  padding-right: 1em

.hidden
  display: none

.preload
  background-position: -9999px -9999px

#navigation a
  display: block

#nav-about
  width: 115px
  height: 52px
  +button_img(about)
  &:hover
    +button_img(about_h)

.nav-about
  +button_img(about_h)

#nav-other
  width: 130px
  height: 52px
  +button_img(other)
  &:hover
    +button_img(other_h)

.nav-other
  +button_img(other_h)

#nav-projects
  width: 127px
  height: 52px
  +button_img(projects)
  &:hover
    +button_img(projects_h)

.nav-projects
  +button_img(projects_h)

#nav-archives
  width: 155px
  height: 52px
  +button_img(archives)
  &:hover
    +button_img(archives_h)

.nav-archives
  +button_img(archives_h)

#services li
  margin-left: 0

#services h3
  display: block
  text-align: center
  a
    margin: auto
    display: block

#s-opinions
  width: 192px
  height: 52px
  +button_img(opinions)
  &:hover
    +button_img(opinions_h)

.s-opinions
  +button_img(opinions_h)

#s-tweets
  width: 183px
  height: 52px
  +button_img(tweets)
  &:hover
    +button_img(tweets_h)

.s-tweets
  +button_img(tweets_h)

#s-bookmarks
  width: 197px
  height: 52px
  +button_img(bookmarks)
  &:hover
    +button_img(bookmarks_h)

.s-bookmarks
  +button_img(bookmarks_h)

.spacer-20
  display: block
  height: 20px

.spacer-50
  display: block
  height: 50px

.spacer-100
  display: block
  height: 100px

.spacer-200
  display: block
  height: 200px

.feed-item
  list-style-type: none
  margin: 0.8em 0.3em

.feed-item-text, .feed-item-date
  display: block

.feed-item-text
  margin-top: 0.3em
  margin-left: 1em
  font-style: italic

.left-column
  float: left
  width: 400px

.right-column
  float: right
  width: 400px

.clearleft
  clear: both

.article-item
  padding: 0.5em 0
  display: block

.article-meta
  font-size: 0.8em

.tag
  font-weight: bold

.project-data
  border-left: 1px dashed $gray
  padding: 0 1em 1em 1.5em
  margin: 0 0 0 1.5em
  height: 300px

ul
  overflow: hidden
  &.article-meta
    list-style-type: none
  &.article-buttons
    text-align: center
    list-style-type: none
    display: block
    margin: auto
    border: 1px solid $gray
    background: white
    padding: 5px 0

#toc
  float: right
  width: 250px
  padding: 10px
  margin: 0 0 10px 15px
  +default_border
  ol
    li
      margin-left: 1.5em
      li
        margin-left: 1.5em
        li
          margin-left: 1.5em
          li
            margin-left: 1.5em
            li
              margin-left: 1.5em
  li
    line-height: 1.2em

#toctitle
  font-variant: small-caps
  font-weight: bold

.toc-top-link
  font-size: 13px
  margin-left: 15px

.contents > #toc
  display: none

.contents ol li
  list-style-type: none

div.navigation 
  display: block
  margin: auto
  text-align: center
  margin: 2em 0

div.navigation a
  font-weight: bold
  font-variant: small-caps
  margin-left: 3em
  margin-right: 3em

#content .article-buttons li
  font-family: "Arial", "Sans-serif"
  font-size: 0.8em
  font-weight: bold
  display: inline
  margin-left: 0
  vertical-align: top

#content .article-meta li
  margin-left: 0

.inner-border img
  margin-top: 7px

#legacy-comments, #intensedebate
  max-width: 800px
  margin: auto

.legacy-comment
  padding: 5px 0

.lc-header
  display: block
  height: 20px
  border: 1px solid #232323
  background: #121212
  padding: 5px

table
  margin: 10px auto
  +default_border

tr
  border-bottom: 1px solid $gray

#search_form tr, #timeline tr, #taglist tr
  border-bottom: none

table
  &#timeline, &#taglist
    border: none

tr, td, th
  padding: 5px

td
  border-left: 1px solid $gray
  border-right: 1px solid $gray

th
  background: #cecece
  +default_border

#taglist, #timeline
  width: 100%
  border-bottom: none
  margin: 20px 0

#taglist tr, #timeline tr
  padding: 2px
  width: 100%

#taglist td, #timeline td
  padding: 2px
  border-left: none
  border-right: none

#content input
  &[type=submit]
    color: #333333
    border: 2px solid $gray
    background: #cccccc
    outline: none
    padding: 0.1em 0.3em
    vertical-align: middle
    &:hover
      border: 2px solid #cf282d
      background: #eeeeee
      color: #121212
    &:active
      background: #aaaaaa
      outline: none
  &[type=text]
    color: #333333
    border: 2px solid #333333
    background: white
    outline: none
    text-align: left
    height: 21px
    vertical-align: middle
    &:hover, &:focus, &:active
      border: 2px solid #cf282d

#search_form
  clear: both

.gsc-resultsHeader, .gs-visibleUrl, .gsc-trailing-more-results, .gs-watermark
  display: none

.gsc-result
  padding: 0.5em 0

table.gsc-search-box
  height: 25px
  margin: auto
  margin-top: 20px

.gsc-control, .gsc-resultsRoot
  width: 850px

.gsc-search-box
  border: none
  td
    border: none

.gsc-input
  width: 400px

.gsc-branding
  color: black
  font-style: italic
  font-size: 80%
  border: none
  margin: auto
  padding: 0

td.gsc-branding-img
  text-align: left

div.gsc-clear-button
  background: transparent url("../images/theme/icons/close.png") no-repeat center 50%
  width: 10px
  height: 10px
  &:hover
    cursor: pointer

.gsc-cursor-page
  display: inline
  padding-right: 7px
  &:hover
    cursor: pointer

.gsc-cursor-current-page
  font-weight: bold