JustinCampbell/wedding

body
  background: $background
  color: $text
  font: 62.5% "Futura", "Arial", sans-serif

.container
  margin: 0 auto
  max-width: 1200px
  width: flex-grid(12)

nav
  background: $nav-background

.menu
  font-size: 2em
  position: relative
  ul
    padding: 0.5em
    li
      a
        padding: .75em 1em

  a
    color: $nav-color
    text-decoration: none
    display: block
    &:hover, &:active
      color: shade($nav-color, 5)

.menu-button
  float: right
  margin-right: 5%
  a
    background: $nav-background
    width: 80px
    padding: 0px 10px 4px
    text-align: center
    +border-radius(0 0 8px 8px)
    +shadow

.content-wrap
  background: $wrapper
  +box-shadow(inset 0px 50px 80px -50px #eeeef3)

.date
  font-size: 2em
  text-align: center

h1, h2, h3, h4
  color: $header-color

h1
  font-size: 4.25em
  text-align: center
  font-family: $script
  padding: 0 flex-gutter()

h2
  font-size: 3em
  font-family: $script
  padding: 0 flex-gutter()
  &:after
    content: ""
    display: block
    width: 100%
    height: 2px
    +linear-gradient(left, $wrapper 0%, #afafb4 20%, #afafb4 80%, $wrapper 100%)

h3
  font-size: 2.6em
  font-family: $script
  padding: 0 flex-gutter()

h4
  font-size: 2em
  font-style: oblique
  margin-bottom: 1em

h5
  font-size: 1.8em

p
  padding: 0 1em 2em
  font-size: 1.6em
  &.classy
    font-style: oblique

img
  max-width: 100%

form
  padding: 2em flex-gutter()

.header
  margin-bottom: 2em

.content
  margin: 0 auto
  min-height: 400px
  width: 100%
  padding-bottom: 4em

.seperator
  margin: 0 flex-gutter()
  +clearfix
  +section-shading

//HOME PAGE
.main-image
  margin: 0 flex-gutter() 2em
  background: #f7f7fc
  padding: 1em
  +photo-shadow

.info
  +clearfix
  margin: 0 0 2em

.head-shot
  background: #f7f7fc
  padding: .25em
  width: 75px
  height: 75px
  float: left
  margin-right: 1em
  +border-radius(100px)
  +photo-shadow
  img
    +border-radius(100px)

.content-image, .photo
  text-align: center
  max-width: flex-grid(12)
  margin: 0 auto 2em
  +photo-shadow
  background: #f7f7fc
  padding: .25em
  +rounded-corners
  img
    +rounded-corners

.content-image
  margin: 0 flex-gutter() 2em

//REGISTRY
.registries
  text-align: center
  a
    display: block
    margin: 0 flex-gutter() 2em
    img
      border: 5px solid $blue

.read-more
  text-align: right

.row
  +clearfix

.party
  .person
    margin-bottom: 3em
    text-align: center
    img
      width: 100%
    .name
      float: left
    .name, .title
      font-size: 2em
      margin-bottom: .5em
    .title
      color: $text-light
      float: right
    p
      clear: both
      display: block
      font-family: $helvetica
      padding: 0
      margin: 1em 0 2em
      text-align: left

//Section-shading
.section-shading
  +section-shading

.section-content
  position: relative
  padding: 0 flex-gutter()
  +clearfix

.about-us
  padding: 0

label
  font-size: 1.6em
  display: block

input[type="text"]
  width: 90%
  padding: .8em 4.8% .8em 5%
  border: 0
  margin: .5em 0 1.5em
  +box-shadow(inset 1px 1px 1px #CCC, 0px 0px 0px 1px #CCC)
  +border-radius(5px)
  font-size: 1.4em
  -webkit-appearance: none

input[type="submit"]
  width: 100%
  max-width: 320px
  padding: .6em 0
  font-size: 2.4em
  color: $white
  border: none
  +box-shadow(1px 1px 1px 0 #ccc)
  +border-radius(5px)
  +linear-gradient(lighten($blue, 10), $blue 50%)
  &:hover, &:active
    +box-shadow(inset 1px 1px 1px 0 #000)
    +linear-gradient($blue, darken($blue, 10) 50%)

.attending-content
  -webkit-transition: opacity 1s ease-out
  opacity: 0
  height: 0
  overflow: hidden
  &.expanded
    opacity: 1
    height: auto

.guest
  margin: 0 auto
  border: 1px solid #afafb4
  +rounded-corners
  padding: 1em 4%
  background: darken($wrapper, .1)
  margin: 2em auto

.formrow
  margin-bottom: 2em
  +clearfix

.attending
  text-align: right
  +clear-after
  input[type="radio"], label
    float: none
    margin-left: flex-gutter()
    +inline-block

.divider
  content: ""
  display: block
  width: 100%
  height: 2px
  +linear-gradient(left, $wrapper 0%, #afafb4 20%, #afafb4 80%, $wrapper 100%)
  margin: 2em 0


//Inputs

label
  float: left

input[type='checkbox'], input[type="radio"]
  float: right

.field_with_errors
  background: #f2dede

//ALERTS
.flash
  margin: 1em flex-gutter() 2em
  padding: 1em flex-gutter()
  border-color: #EED3D7
  font-size: 1.4em
  +rounded-corners
  &.alert
    background-color: #F2DEDE
    color: red
  &.notice
    background-color: #DEF2DE
    color: green

.map
  height: 250px
  width: 100%

.note
  margin: 0 1em
  font-size: 1.25em

.buttons
  text-align: center

.button
  @extend input[type="submit"]
  +inline-block
  text-decoration: none
  text-align: center
  margin: 0 flex-gutter() 1em

.sign-in
  .guest
    margin: 0 auto

// .rsvp
//   padding: .6em 0
//   color: $white
//   +border-radius(5px)
//   +linear-gradient(lighten($blue, 10), $blue 50%)
//   margin: .2em 0

.thank_you
  font: 4em $script
  text-align: center

hr
  border: none
  display: hidden
  &:after
    content: ""
    display: block
    width: 100%
    height: 2px
    +linear-gradient(left, $wrapper 0%, #afafb4 20%, #afafb4 80%, $wrapper 100%)