@import "http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css"

$darkest: #1a2d32
$darker: #16303b
$dark: #295162
$medium: #9e9ea9
$light: #ddd
$lighter: #fffffb
$lightest: #ffffff

.container
  margin: 0 auto
  max-width: 640px

a
  font-weight: bold
  color: inherit
  text-decoration: none

body
  overflow-x: hidden
  padding: 20px
  
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif
  font-size: 100%
  line-height: 1.25
  color: $dark
  background-color: $lighter
  
.iphone-bar
  display: none
  height: 20px
  margin: -20px -20px 0 -20px
  background-color: black
  background-image: url("http://christiannaths.com/ui-assets/iphone-status-bar-black.png")
  background-size: cover
  background-position: center top
  
header
  box-sizing: border-box
  margin: 0 -20px 0 -20px
  margin-top: -20px
  padding: 0
  text-align: center
  height: 44px
  line-height: 44px
  
  color: $lighter
  background: $darkest
  
  .logo
    color: tomato
      
.toolbar
  box-sizing: border-box
  margin: 0 -20px
  height: 54px
  padding: 1em
  font-weight: 500
  text-align: center
  background-color: $lightest
  border-bottom: 1px solid $light
  
  button
    margin: -0.8em -0.375em
    padding: 0.75em
    font-size: 1.25rem
    color: $dark
    background-color: transparent
    border: 2px solid $light
    border-radius: 0px
    border: none
  
  .button-group:first-child
    float: left
      
  .button-group:nth-child(2)
    float: right
  

h2
  margin: 0.625em 0
  margin-top: 1.875em
  
  font-size: 0.875em
  font-weight: 500
  color: $medium
  
li
  overflow: hidden
  margin: 0 -10px -1px -10px
  padding: 10px
  
  background-color: $lightest
  border: 1px solid $light
    
  .date
    float: left
    padding: 0.125em 0.75em 0 0
    margin-left: 0.25em
    margin-right: 0.75em
    font-weight: bold
    text-align: center
    border-right: 3px solid $light
    
    .weekday, .day
      display: block
        
    .weekday
      font-size: 0.75em
      
    .day
      margin-top: -2px
      font-size: 1.3em

  a
    position: relative
    top: 3px
    display: block
    float: right
    width: 40px
    line-height: 2.5
    text-align: center
      
  h3
    font-weight: bold
      
  .duration, .location
    font-size: 0.875em
    color: $medium
      
  .duration
    margin-right: 0.25em
    padding-left: 0.1em
    padding-right: 0.5em
    border-right: 1px solid $light

li.past
  color: $medium
  background-color: #eee
  
li.next .date
  border-right-color: LightSeaGreen
    
button.subscribe
  position: relative
  top: -4px
  left: -11px
    
  span
    position: absolute
    top: 0
    left: 5px
    
    &:last-child
      font-size: 0.5em
      top: 7px
      left: 10px
  /* font-size: 1rem */