@import "includes/box_shadow"

*
  box-sizing: border-box

html
  -webkit-text-size-adjust: 100%

body
  background: #101010
  color: white
  font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
  letter-spacing: 0.1em
  font-weight: 400
  font-size: 100%
  overflow: hidden
  -webkit-font-smoothing: antialiased

a
  text-decoration: none

p a
  display: inline !important
  color: #acf
  &:hover
    color: #fff

#page
  position: absolute
  top: 40%
  margin-top: -230px
  width: 100%

#container
  padding-top: 20px

#wrapper
  background: #101010

header
  position: relative
  background: #0082bf
  height: 308px
  a
    display: block
    height: 306px
    width: 306px
    &:hover
      background: rgba(255, 255, 255, 0.1)
  img
    padding: 0
    margin: 0
    position: absolute
    bottom: 18px
    right: 20px

footer
  //background: #333
  color: #333
  text-align: right
  height: 28px
  p
    margin: 0 10px

.sg-5, .sg-7, .sg-11, .sg-17, .sg-35, .sg-5 a, .sg-7 a, .sg-11 a, .sg-17 a, .sg-35
  -moz-border-radius: 2px
  -webkit-border-radius: 2px
  border-radius: 2px

.sg-5 a, .sg-7 a, .sg-11 a, .sg-17 a
  border: 1px solid rgba(255, 255, 255, 0.1)

.sg-5
  height: 140px
  a
    position: relative
    display: block
    color: white
    height: 140px
    width: 140px

.sg-7
  height: 196px
  a
    position: relative
    display: block
    color: white
    height: 196px
    width: 196px

.sg-11
  height: 308px
  a
    display: block
    height: 308px
    width: 308px

.sg-17
  height: 476px
  a
    display: block
    width: 476px
    height: 476px

.about
  background-color: #99BF00

.portfolio
  background-color: #C03232

.contact
  background-color: #777

.about a:focus, .portfolio a:focus, .contact a:focus
  background: rgba(255, 255, 255, 0.1)

.about a:hover, .portfolio a:hover, .contact a:hover
  background: rgba(255, 255, 255, 0.2)

.about a span, .portfolio a span, .contact a span
  position: absolute
  top: 10px
  right: 20px

.category
  position: relative
  a
    display: block
    color: white
    text-decoration: none

.photo a
  display: block
  color: white
  text-decoration: none

.category a
  .arrow
    position: absolute
    font-size: 2em
    bottom: 20px
    left: 20px
  &:focus
    background: rgba(255, 255, 255, 0.1)

.photo a:focus
  background: rgba(255, 255, 255, 0.1)

.category a:hover, .photo a:hover
  background: rgba(255, 255, 255, 0.2)

.blank-category, .blank-photo
  position: relative
  background: #181818
  border-radius: 3px
  &:before
    display: block
    content: ""
    position: absolute
    width: 138px
    height: 138px
    border: 1px dotted rgba(255, 255, 255, 0.1)
    border-radius: 3px

.category h3
  position: absolute
  top: 16px
  right: 0
  text-align: right
  margin: 0 20px
  font-weight: 400
  font-size: 1em
  line-height: 1em

img

.page-links
  background: #666

.prev-link, .next-link
  color: white
  font-size: 2em
  position: relative
  display: block

.prev-link div, .next-link div
  position: absolute
  bottom: 15px

.prev-link div
  left: 20px

.next-link div
  right: 20px

.prev-link:hover, .next-link:hover
  background: rgba(255, 255, 255, 0.2)

.about-content
  background: #444
  color: #ccc
  overflow: auto
  div
    padding: 2px 12px
    p
      font-size: 0.9em
      margin-top: 0.7em
      margin-bottom: 0.7em
      line-height: 1.2em

/* FORM

.contact-form
  background: #ddd

.field_with_errors
  display: inline

form
  padding: 10px 25px
  p
    margin: 10px 0
    color: #555
  label
    color: #666
    display: block
    width: 85px
    float: left
    margin-top: 4px
    &.error
      float: none
      display: inline
      color: #990000
      margin-left: 10px
  textarea
    height: 150px
    width: 325px
    font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
    font-size: 1em
    padding: 5px
    color: #333
    border: 0
    border-radius: 3px
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
  input
    &[type='text']
      font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
      font-size: 1em
      padding: 5px
      color: #333
      border: 0
      border-radius: 3px
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
    &#contact_name, &#contact_email
      width: 175px
    &#contact_subject
      width: 325px

#alert
  background: #fffeef
  color: #664400
  border-width: 2px 0
  border-style: solid
  border-color: #996600
  padding: 0 10px 2px
  margin-top: 15px

#notice
  background: #efffef
  color: #446600
  border-width: 2px 0
  border-style: solid
  border-color: #669900
  padding: 0 10px 2px
  margin-top: 15px

.field_with_errors
  input, textarea
    background: #ffefef
    border-color: #cc3333 !important

input.error, textarea.error
  background: #ffefef
  border-color: #cc3333 !important

form input[type='submit']
  -webkit-font-smoothing: antialiased
  background: #666
  font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
  font-size: 1em
  padding: 6px 11px
  color: white
  border: 0
  border-radius: 3px
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.1)

.error
  position: relative
  background-color: #333333
  padding: 20px
  h1, p
    text-align: center
  h1
    font-size: 2em
    font-weight: 600
    line-height: 1em
    margin-top: 1em
    margin-bottom: 1em
  p.pointer
    position: absolute
    bottom: 60px
    left: 20px

.error-code
  text-align: center
  span
    color: rgba(255, 255, 255, 0.2)
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.1)
    font-size: 8em
    font-weight: 300
    line-height: 0.8em