@font-face
  font-family: 'KlavikaWebBasic'
  src: url('fonts/KlavikaWebBasicRegular.woff')
  font-weight: normal
  font-style: normal
  
@font-face
  font-family: 'KlavikaWebBasic'
  src: url('fonts/KlavikaWebBasicBold.woff')
  font-weight: bold
  font-style: normal

// Colors

$color-base: #fff
$color-highlight: #8e9aa5

// Fonts

$font-base: 'KlavikaWebBasic'
// Base Settings

$base-size: 12px
$base-line: 1.4

// Buttons

button,
.btn-a,
input[type="submit"]
  background: #4bb64f
  border: 1px solid #081f09
  color: #041205
  cursor: pointer
  display: block
  font-size: (14px / 12px) + em
  font-weight: bold
  height: 20px
  line-height: 18px
  padding: 0
  text-align: center
  text-transform: uppercase
  width: 158px
  &:hover
    background: lighten(#4bb64f, 10%)
  
// Base

body
  -webkit-font-smoothing: antialiased
  background: url('images/bg.jpg') center top
  color: $color-base
  font-family: $font-base
  font-size: 12px
  line-height: $base-line
  width: 960px
  margin: 0 auto

h1,
h2,
h3,
h4
  font-weight: normal
  margin: 1em 0 0.9em 0
  
h1,
h2,
h3
  font-weight: bold

h1
  font-size: (28px / $base-size) + em

h2
  font-size: (24px / $base-size) + em
  em
    display: block
    font-family: $font-base
    font-size: (12px / 20px) + em
    margin-top: -0.5em

h3
  color: #919497
  font-size: (20px / $base-size) + em
  line-height: 1.1
  margin: 0

h4
  margin: 0.9em 0 0 0
  
p
  font-size: 14px

a
  color: #82add8
  &:hover
    color: lighten(#82add8, 10%)
  
em
  color: $color-highlight
  
ul, li
  margin: 0
  padding: 0
  list-style: none
  
fieldset
  border: 0
  
// Layout

.inner
  margin: 0 auto
  width: 734px
  
.rendered
  border: 1px solid #94a3ac
  border-top: none
  margin-top: 29px
  padding: 0 30px
  position: relative
  &:before
    content: ""
    display: block
    border-top: 1px solid #94a3ac
    left: 0
    position: absolute
    top: 0
    width: 43%
  &:after
    border-top: 1px solid #94a3ac
    content: ""
    display: block
    position: absolute
    right: 0
    top: 0
    width: 43%
  .title
    margin: 0 auto
    position: relative
    text-align: center
    top: -7px
    width: 14%  
    
// Form
form
  background: rgba(#000, 0.2)
  padding:  1px 10px
  width: 400px

label
  display: inline-block
  min-width: 80px
  
input,
select
  margin: 0
  
.quantity
  text-align: center
  width: 30px
  
.remove-vacation
  -webkit-transition: all 250ms linear
  -moz-transition: all 250ms linear
  -o-transition: all 250ms linear
  transition: all 250ms linear
  bottom: 10px
  opacity: 0
  position: absolute
  right: 15px
  .vacation:hover &
    opacity: 1
  
// Vacation

.vacation
  background: rgba(#252b30, 0.5)
  display: inline-block
  height: 155px
  padding: 12px 20px 15px 20px
  position: relative
  vertical-align: top
  width: 158px
  &.highlighted
    background: rgba(#252b30, 1)
  + .vacation
    margin-left: 36px
  button
    margin: 12px 0
  .price
    @extend .btn-a
    background: #82add8
    border: 1px solid #191d20
    color: #191d20
    cursor: default
    display: block
    font-size: 1.2em
    margin: 12px 0
    height: 18px
    line-height: 18px
    width: 156px
    &:hover
      background: #82add8

.chapter4-4
  .vacation,
  .vacation + .vacation
    margin: 0 36px 36px 0
    
.comments,
.no-comments
  height: 48px
  
.no-comments
  li
    color: $color-highlight
    
.featured
  font-size: (18px / $base-size) + em
  font-weight: bold
  margin-top: 22px
  .rendered & 
    text-align: center
    
#vacations
  overflow: hidden
    
#vacations ul
  clear: both
  float: left
  
#vacations #filters
  background: rgba(#252b30, 0.5)
  float: right
  margin: 0 60px 20px 0
  padding: 10px 8px
  text-align: center
  
  button,
  a
    background: #252b30
    border: 1px solid #121415
    color: $color-highlight
    font-weight: bold
    height: auto
    margin-top: 0
    text-decoration: none
    text-transform: none
    padding: 3px 5px
    width: auto
    &:hover
      color: lighten($color-highlight, 10%)

#filters
  li
    display: inline-block
    + li
      margin-left: 0.5em
  
#confirmations ul
  overflow: hidden

.confirmation
  float: left
  width: 50%

.ticket
  display: none
  width: 350px

.chapter4-4 .comments
  display: none
  
// .confirmation
//   position: relative
//   .ticket
//     left: 50%
//     position: relative
//     top: -130px

.ticket
  li
    vertical-align: top
  strong
    display: inline-block
    vertical-align: top
  .boarding-pass
    vertical-align: top
    width: 50px
    
.demo-5
  padding-top: 30px
  
img
  max-width: 100%

.favorite,
.status-list li,
.locations li
  background: rgba(#252b30, 0.5)
  display: inline-block
  margin: 15px 15px 0 0
  padding: 10px 14px 1px 14px
  width: 160px
  button
    margin-bottom: 12px
    
.locations li
  padding-bottom: 1em
  vertical-align: top
  h2
    font-size: 1.5em
  img
    margin-top: 1em
  
.status-list li
  width: auto

.demo-7
  form
    padding: 15px
  fieldset
    margin: 0 0 10px 0
  input[type="text"]
    min-width: 280px
  button
    margin: 10px 0
  h3
    margin-top: 15px

.booked-vacations
  li
    margin: 10px 0 0 0

  





