droom 0.0.1

data/app/assets/stylesheets/droom.css.sass

@@ -0,0 +1,1151 @@
+$datemark_width: 50px
+$datemark_margin: 5px
+$tool_button_height: 32px
+$tool_button_width: 32px
+
+@import definitions
+@import lib/toolbar
+@import lib/kalendae
+@import compass/css3/transform
+
+=icon($url)
+  display: inline-block
+  text-indent: 34px
+  height: 32px
+  width: 32px
+  line-height: 32px
+  overflow: hidden
+  background:
+    color: transparent
+    position: 0 0
+    repeat: no-repeat
+    image: image-url($url)
+  &:hover
+    background-position: 0 -32px
+  
+=smallicon($url)
+  display: inline-block
+  text-indent: 50px
+  height: 16px
+  width: 16px
+  line-height: 16px
+  overflow: hidden
+  margin: 0 0 18px -8px
+  white-space: nowrap
+  background:
+    color: transparent
+    position: 0 0
+    repeat: no-repeat
+    image: image-url($url)
+  &:hover
+    background-position: 0 -16px
+  
+=icon_with_text($url)
+  display: inline-block
+  text-indent: 26px
+  margin-top: 0
+  line-height: 30px
+  min-height: 30px
+  background:
+    color: transparent
+    position: 0 0
+    repeat: no-repeat
+    image: image-url($url)
+  &:hover
+    background-position: 0 -48px
+
+=hover
+  &:hover
+    color: $hover
+
+=blurred($color: $pale)
+  text-shadow: $color 0 0 3px
+  
+
+a.download
+  +icon_with_text('droom/download.png')
+  
+a.ical
+  +smallicon('droom/ical.png')
+
+.unavailable
+  +small
+  +pale
+
+.datemark
+  float: left
+  width: $datemark_width
+  margin-left: - $datemark_width - $datemark_margin
+  margin-right: $datemark_margin
+  text-align: right
+  color: $mid
+  line-height: 3em
+  padding-top: 5px
+  a, a:visited
+    color: $mid
+    +hover
+  span
+    display: block
+    line-height: 1
+    text-align: center
+  span.mon
+    +heading
+    text-transform: uppercase
+    font-size: 1em
+  span.dom
+    +heading
+    font-size: 2em
+    letter-spacing: -0.1em
+    margin-left: -4px
+    margin-top: -2px
+  span.year
+    +heading
+    font-size: 1em
+    margin-top: -2px
+  &.editing
+    +box-shadow
+    a, a:visited
+      color: $dark
+
+a.changed
+  color: $green
+  +hover
+  
+#events, #dashboard
+  h2.quiet
+    clear: both
+    margin-left: $datemark_width + $datemark_margin
+  > .documents
+    margin-left: $datemark_width + $datemark_margin
+  > #attendants
+    position: absolute
+    right: 0
+    margin-top: -1em
+    #new_document
+      margin-left: - $datemark_width - $datemark_margin
+
+#documents, #people, #group, #groups
+  margin-left: $datemark_width + $datemark_margin
+  p.admin, p.notification
+    margin-left: 0
+  form.document
+    margin-left: - $datemark_width - $datemark_margin
+
+#help_pages
+  h2
+    margin-bottom: 0
+  p
+    margin-top: 0.1em
+  
+#help_page
+  position: relative
+  margin-left: 10px
+  .controls
+    width: 640px
+    margin-left: 0
+  .video
+    width: 640px
+    overflow: hidden
+  .body
+    width: 640px
+    overflow: hidden
+    *:first-child
+      margin-top: 0
+    ul
+      padding-left: 14px
+  img
+    float: right
+    margin: 10px 0 10px 20px
+  
+.contents
+  h3
+    margin-top: 0
+  ul
+    padding-left: 0
+    list-style: none
+    li
+      margin-bottom: 1em
+
+
+div.event, div.document
+  position: relative
+  clear: both
+  margin-bottom: 20px
+  padding-left: $datemark_width + $datemark_margin
+  width: 600px
+  .overlay
+    width: 100%
+
+form.event, form.document
+  position: relative
+  padding-left: $datemark_width + $datemark_margin
+  width: 600px    
+
+form.person
+  position: relative
+  width: 900px
+
+div.event, form.event
+  .summary
+    p.name
+      margin: 0
+    p.practicalities
+      margin: 0
+      margin-top: -6px
+      color: $mid
+      time
+        +bold
+    p.description
+      margin-top: 0
+    div.documents
+      float: right
+      margin-left: 20px
+      margin-bottom: 10px
+      width: 200px
+
+.interjected
+  margin: 10px 0
+
+.people
+  .person_picker
+    font-size: 1.8em
+
+form.event
+  p.name
+    margin: 0
+  a.datepicker
+    color: $input
+  input.name
+    +heading
+    width: 600px
+    font-size: 3em
+  p.practicalities
+    margin: 0 0.5em
+  input.timepicker
+    +bold
+    font-size: 1.2em
+    width: 50px
+  input.venuepicker
+    font-size: 1.2em
+    width: 300px
+    padding: 4px
+  .description
+    margin-top: 0.5em
+    textarea
+      width: 600px
+      font-size: 1em
+      height: 250px
+
+form.document
+  .filepicker
+    position: relative
+    float: left
+    width: $datemark_width
+    margin-right: $datemark_margin
+    margin-left: - $datemark_width - $datemark_margin
+    input[type="file"]
+      display: none
+    p.tip
+      font-size: 0.65em
+      line-height: 1.1
+      color: $pale
+      margin: 0 5px
+  p.name, p.description
+    margin: 0
+  input.name
+    +heading
+    width: 600px
+    font-size: 2em
+  textarea
+    +book
+    width: 600px
+    font-size: 1em
+    height: 60px
+
+form.page
+  width: 600px
+  margin-left: $datemark_width + $datemark_margin
+  input[type="text"], input[type="email"], input[type="password"], select, textarea
+    width: 600px
+    font-size: 1.2em
+  input.pagetitle
+    width: 600px
+    font-size: 4em
+  textarea.large
+    height: 600px
+    font-size: 1.1em
+  textarea.small
+    height: 100px
+    font-size: 1.1em
+  label
+    +bold
+  p.explanatory
+    width: 50%
+    color: $mid
+
+
+
+h2.name
+  +heading
+  font-size: 3em
+  margin: 0
+  a
+    color: $dark
+    +hover
+    &.changed
+      color: $green
+    +hover
+
+p.description.changed
+  color: $green
+
+h2.quiet
+  font-size: 1.25em
+
+
+a.dl, a.ul
+  display: inline-block
+  min-height: 50px
+  text-indent: $datemark_width + $datemark_margin
+  padding-top: 4px
+  background:
+    position: 0 -10px
+    repeat: no-repeat
+    image: image-url('droom/medium_icons.png')
+  &.pdf
+    background-position: 0 -110px
+  &.doc, &.docx
+    background-position: 0 -210px
+  &.xls, &.xlsx
+    background-position: 0 -310px
+  &.minimal
+    height: 50px
+    width: $datemark_width
+    overflow: hidden
+    line-height: 100px
+
+div.document
+  h2.name
+    font-size: 1.75em
+    line-height: 1
+    margin-left: -$datemark_width - $datemark_margin
+    + p.description
+      margin-top: -20px
+  p.attachment
+    margin: 0
+    color: $mid
+  p.description
+    margin-top: 0
+
+ 
+table.main
+  th
+    text-align: left
+    vertical-align: bottom
+    +heading
+    a.sorter
+      position: relative
+      display: inline-block
+      padding: 4px 20px 4px 0
+      color: $pale
+      background:
+        position: right top
+        repeat: no-repeat
+        image: image-url('droom/tablesort.png')
+      &:hover
+        color: $link
+        background-position: right -32px
+      &[data-order="ASC"]
+        color: $dark
+        background-position: right -96px
+        &:hover
+          color: $link
+          background-position: right -64px
+      &[data-order="DESC"]
+        color: $dark
+        background-position: right -160px
+        &:hover
+          color: $link
+          background-position: right -32px
+  td, th
+    vertical-align: top
+    padding-right: 5px
+    h3, p
+      margin: 0
+    p.note
+      margin-top: -10px
+      margin-bottom: 10px
+    &.minor
+      max-width: 150px
+  td
+    &.name
+      +bold
+      
+    &.minor
+      span
+        display: block
+        padding-top: 8px
+    p.unavailable
+      line-height: 28px
+    a.event
+      display: block
+      padding-top: 8px
+      min-height: 22px
+    a.vcard
+      +icon("droom/vcard.png")
+
+table.documents
+  margin-bottom: 25px
+  th
+    white-space: nowrap
+    &.name
+      font-size: 120%
+  td.admin
+    min-width: 55px
+  td.description
+    p
+      margin: 0 0 10px 28px
+      +small
+      color: $mid
+  td.admin
+    padding-right: 2px
+    width: 24px
+    a
+      +opacity(0.5)
+      &:hover
+        +opacity(1)
+
+table.people
+  margin-bottom: 25px
+  margin-top: -20px
+  thead
+    tr
+      height: 30px
+  th, td
+    line-height: 32px
+    white-space: nowrap
+  td.icon
+    span
+      display: block
+      float: left
+      width: 20px
+      height: 20px
+      border: 2px solid white
+      background-color: $pale
+      +box-shadow()
+      &.active
+        background-color: $mid
+  th.name
+    +heading
+    vertical-align: top
+    width: 225px
+    input.title
+      width: 35px
+      +heading
+    input.forename
+      width: 80px
+      +heading
+    input.name
+      width: 160px
+      +heading
+    input.forename
+      width: 80px
+      +heading
+      + input.surname
+        width: 80px
+    label
+      +book
+      +pale
+  td.email, td.phone, td.address
+    width: 160px
+    input
+      width: 150px
+  th.group, th.admin
+    +book
+    max-width: 24px
+    height: 30px
+    padding-right: 2px
+    .rotate
+      +rotate(-75deg)
+  th.admin
+    color: $pale
+  td.admin
+    padding-right: 2px
+    width: 24px
+    a
+      +opacity(0.5)
+      &:hover
+        +opacity(1)
+  td.group
+    padding-right: 2px
+    width: 24px
+    .holder
+      a.toggle_active
+        .a_member, .not_a_member
+          height: 20px
+          background: url('droom/minisymbols.png') no-repeat
+        .a_member
+          background-position: 0 -384px
+          &:hover
+            background-position: 0 -528px
+        .not_a_member
+          background-position: 0 -600px
+          &:hover
+            background-position: 0 -360px
+  td.buttons
+    width: 80px
+
+table.groups
+  margin-bottom: 25px
+  th, td
+    line-height: 32px
+    white-space: nowrap
+  input[type="text"]
+    font-size: 1em
+  th.name
+    +heading
+    vertical-align: top
+    width: 200px
+    input.name
+      width: 190px
+      +heading
+  td.description
+    width: 250px
+    input
+      width: 240px
+  td.count
+    width: 15px
+  td.buttons
+    width: 80px
+  
+form.person
+  position: relative
+  p
+    float: left
+    margin-right: 10px
+  input[type="text"], input[type="email"]
+    font-size: 1em
+  input.title
+    width: 40px
+  .buttons
+    clear: left
+
+
+.eventline
+  font-size: 80%
+  h4
+    margin: 0
+  p
+    margin-top: 0
+
+p.twister
+  &:first-child
+    margin-top: 0
+  a
+    display: block
+    padding-left: 18px
+    background: 
+      repeat: no-repeat
+      position: 0 -62px
+      image: image-url('droom/twister.png')
+    &:hover
+      background-position: 0 -94px
+  &.closed
+    a
+      background-position:  0 2px
+      &:hover
+        background-position: 0 -30px
+
+
+#attendants
+  li
+    list-style: none
+    padding-left: 24px
+    background:
+      repeat: no-repeat
+      position: 0 0
+      image: image-url('droom/people_icons.png')
+      size: 20px
+    a.delete
+      position: absolute
+      display: none
+      right: -5px
+      height: 20px
+      line-height: 20px
+      padding: 0
+      margin-left: 10px
+    &.holder:hover 
+      a.delete
+        display: inline-block
+    &.group
+      +bold
+      background-position: 0 0
+    &.person
+      background-position: 0 0
+  .interjected
+    width: 132px
+    .suggestions
+      li
+        padding-left: 0
+    .notification
+      margin: 0
+
+.pagination
+  position: relative
+  clear: left
+  margin: 40px 0
+  height: 40px
+  span
+    display: block
+    float: left
+    margin-right: 5px
+    a
+      display: block
+      background-color: $pale
+      color: $dark
+      padding: 5px 10px
+      min-width: 16px
+      text-align: center
+      &:hover
+        background-color: $link
+        color: white
+      &:visited
+        color: $dark
+    &.current
+      +bold
+      background-color: $verypale
+      color: $mid
+      padding: 5px 10px
+      min-width: 16px
+      text-align: center
+    &.gap
+      border: 1px solid white
+      padding: 5px 10px
+      min-width: 16px
+      text-align: center
+      color: $dark
+  
+    
+
+p.notification
+  margin-left: $datemark_width + $datemark_margin
+  color: $green
+  +icon_with_text("droom/tick.png")
+
+
+span.erratic
+  display: block
+  overflow: hidden
+  input[type="text"], input[type="password"], input[type="email"], select
+    border-color: lighten($error, 40)
+    color: $error
+    &.empty
+      color: lighten($error, 40)
+  .error_message
+    color: $error
+    display: block
+    +bold
+    a.closer
+      display: block
+      float: left
+      width: 16px
+      height: 16px
+      margin-right: 2px
+      +text-hidden
+      background: 
+        image: image-url('droom/crosses.png')
+        color: transparent
+        position: 3px -58px
+        repeat: no-repeat
+
+p.admin
+  margin-left: $datemark_width + $datemark_margin
+
+a.add, a.edit, a.delete
+  display: inline-block
+  text-indent: 26px
+  margin-right: 10px
+  height: 24px
+  line-height: 20px
+  background:
+    image: image-url('droom/minisymbols.png')
+    position: 0 -48px
+    repeat: no-repeat
+    scroll: scroll
+  &:hover
+    color: $hover
+  &:active
+    color: $active
+  &.waiting
+    color: $pale
+    background-image: image-url('droom/spinner.gif')
+    background-position: top left
+  &.minimal
+    width: 24px
+    line-height: 100px
+    overflow: hidden
+    margin-right: 2px
+
+a.add
+  background-position: 0 -48px
+  color: $green
+  &:visited
+    color: $green
+    +hover
+  &:hover
+    background-position: 0 -72px
+  &:active
+    background-position: 0 -96px
+
+a.edit
+  background-position: 0 -720px
+  color: $blue
+  &:visited
+    color: $blue
+    +hover
+  &:hover
+    background-position: 0 -744px
+  &:active
+    background-position: 0 -768px
+  
+a.delete
+  background-position: 0 -504px
+  color: $mid
+  &:visited
+    color: $mid
+  &:hover
+    background-position: 0 -528px
+  &:active
+    background-position: 0 -576px
+
+// a.edit, a.delete
+//   display: none
+//   
+// .holder:hover 
+//   a.edit, a.delete
+//     display: inline-block
+
+
+ul.suggestions
+  position: absolute
+  overflow: hidden
+  color: $link
+  margin: 0
+  padding: 0
+  background-color: white
+  border: 1px solid $pale
+  border-top: 0
+  z-index: 100
+  +box-shadow
+  li
+    a, a:visited
+      display: block
+      padding: 8px 8px 8px 25px
+      cursor: hand
+      color: $dark
+      background:
+        position: 6px 11px
+        repeat: no-repeat
+        scroll: scroll
+      &.hover
+        color: white
+        background-color: $active
+        background-position: 6px -132px
+      &:active
+        color: $active
+        background-color: white
+        background-position: 6px -132px
+    &.person
+      a
+        background-image: image-url('droom/person_bullet.png')
+    &.event
+      a
+        background-image: image-url('droom/event_bullet.png')
+    &.document
+      a
+        background-image: image-url('droom/document_bullet.png')
+    &.venue
+      a
+        background-image: image-url('droom/venue_bullet.png')
+
+ul.search_results
+  position: absolute
+  overflow: hidden
+  margin: 0
+  margin-left: 7px
+  padding: 0
+  list-style: none
+  li
+    > a
+      display: block
+      padding: 8px 0 0 28px
+      cursor: hand
+      background:
+        repeat: no-repeat
+        scroll: scroll
+        image: image-url('droom/object_icons.png')
+    &.event
+      a
+        background-position: 0 4px
+    &.person
+      a
+        background-position: 0 -46px
+    &.venue
+      a
+        background-position: 0 -146px
+    &.document
+      a
+        background-image: image-url('droom/icons.png')
+    &.cancel
+      a
+        color: $mid
+        background-image: image-url('droom/minisymbols.png')
+        background-position: 0 -598px
+        padding: 0 0 0 24px
+        margin-top: 6px
+        
+    span.note
+      display: block
+      margin-left: 25px
+
+ul.downloads
+  margin: 0
+  padding: 0
+  list-style: none
+
+li.document
+  &:hover
+    .delete
+      display: inline-block
+  .delete
+    display: none
+    height: 20px
+    line-height: 20px
+    padding: 0
+    margin-left: 10px
+    background:
+      image: image-url('droom/minisymbols.png')
+      repeat: no-repeat
+      position: 0 -504px
+    &:hover
+      background-position: 0 -528px
+    &:active
+      background-position: 0 -576px
+      
+li.document a, a.document
+  display: inline-block
+  padding: 8px 0 0 28px
+  min-height: 22px
+  line-height: 22px
+  background: 
+    repeat: no-repeat
+    position: 0 0
+    image: image-url('droom/icons.png')
+  &.pdf
+    background-position: 0 -48px
+  &.doc, &.docx
+    background-position: 0 -96px
+    color: #1683ab
+    +hover
+  &.xls, &.xlsx
+    background-position: 0 -144px
+    color: #369620
+    +hover
+    
+li.more
+  +pale
+  a
+    display: block
+    padding: 5px 0
+    min-height: 22px
+
+
+
+#mask
+  position: fixed
+  top: 0
+  left: 0
+  height: 100%
+  width: 100%
+  background-color: white
+  display: none
+  z-index: 25
+
+.mask
+  position: absolute
+  top: 0
+  left: 0
+  height: 100%
+  width: 100%
+  background-color: white
+  display: none
+  z-index: 15
+
+.overlay
+  position: absolute
+  top: 0
+  left: 0
+  z-index: 30
+  
+
+div.popup
+  position: fixed
+  top: 100px
+  left: 100px
+  width: 600px
+  padding: 20px
+  z-index: 50
+  min-height: 400px
+  background-color: white
+  +box_shadow
+  border: 4px solid rgba(211, 24, 31, 0.6)
+  
+div.interjected
+  position: relative
+  width: 600px
+  z-index: 40
+  
+div.kal
+  position: absolute
+  left: 0
+  top: 0
+  padding: 10px
+  background-color: white
+  +box-shadow
+  z-index: 200
+  
+div.timepicker
+  +box-shadow(0 2px 2px #444)
+  position: absolute
+  display: none
+  height: 191px
+  width: 60px
+  overflow-x: none
+  overflow-y: auto
+  background: #fff
+  border: 1px solid #aaa
+  z-index: 99
+  margin: 0
+  ul
+    list-style-type: none
+    margin: 0
+    padding: 0
+  li
+    cursor: pointer
+    padding: 4px 3px
+    &.selected
+      background: $rubine
+      color: #fff
+      +bold
+    &:hover
+      background: $verypale
+    &:active
+      background: $rubine
+      color: #fff
+
+
+#minicalendar
+  position: relative
+  overflow: hidden
+  width: 222px
+  height: 260px
+  .scroller
+    width: 500px
+    height: 260px
+    table
+      position: relative
+      float: left
+
+#search, .search_results
+  position: relative
+  margin-left: 10px
+  
+table.minimonth
+  +light
+  font-style: normal
+  border-collapse: collapse
+  border:
+    style: solid
+    width: 1px
+    color: $page
+  color: $text
+  margin: 5px 0
+  h3
+    font-size: 1.2em
+    line-height: 22px
+    margin: 10px 0 5px 0
+  a
+    display: block
+    color: $link
+    font-weight: lighter
+    text-decoration: none
+  th
+    +heading
+  th, td
+    font-weight: normal
+    border:
+      style: solid
+      width: 1px
+      color: $page
+    vertical-align: top
+    text-align: center
+    height: 32px
+    width: 30px
+    line-height: 32px
+    padding: 0
+    overflow: hidden
+  td.m
+    a
+      display: block
+      overflow: hidden
+      font-size: 1.4em
+      line-height: 1
+      width: 32px
+      height: 32px
+      text-indent: 50px
+      background:
+        position: 0 5px
+        repeat: no-repeat
+        image: image-url('droom/minimonth.png')
+      &:hover
+        background-position: 0 -43px
+      &.previous
+        background-position: 0 -91px
+        &:hover
+          background-position: 0 -139px
+      &.waiting
+        background-image: image-url('droom/spinner.gif')
+        background-position: 8px 12px
+        &:hover
+          background-position: 8px 12px
+  th.day_name
+    color: $dark
+  td.t
+    background-color: $palest
+  td.w
+  td.u
+    color: $pale
+    +blurred
+  td.e
+    a:hover
+      background-color: $hover
+      color: $page
+  td.o
+    color: $verypale
+    a
+      color: $pale
+      &:hover
+        color: $page
+  td.t
+    font-weight: bold
+  td.p
+
+
+.pagination
+  position: relative
+  clear: left
+  margin: 40px 0
+  height: 40px
+  span
+    display: block
+    float: left
+    margin-right: 5px
+    a
+      display: block
+      background-color: $pale
+      color: $dark
+      padding: 5px 10px
+      min-width: 16px
+      text-align: center
+      &:hover
+        background-color: $link
+        color: white !important
+      &:visited
+        color: $dark
+    &.current
+      +bold
+      background-color: $verypale
+      color: $mid
+      padding: 5px 10px
+      min-width: 16px
+      text-align: center
+    &.gap
+      border: 1px solid white
+      padding: 5px 10px
+      min-width: 16px
+      text-align: center
+      color: $dark
+
+h3.setup
+  padding-left: 22px
+  background:
+    repeat: no-repeat
+    position: 0 0
+    image: image-url('droom/setup.png')
+    
+ul.setup
+  list-style: none
+  padding: 0
+  li
+    a
+
+#map
+  height: 700px
+  &.small
+    height: 225px
+    width: 225px
+
+.progress
+  height: 10px
+  width: 300px
+  border: 1px solid $pale
+  +border-radius(5px)
+  .bar
+    float: left
+    background: $mid
+    +border-radius(5px)
+    height: 10px
+    width: 0
+  .status
+    float: left
+    +heading
+    color: $mid
+    
+.window
+  overflow: auto
+  h2
+    margin: 5px 0 0
+  .window_venue_events
+    max-height: 120px
+
+.note, .formnote
+  font-size: 0.8em
+  color: $mid
+
+p.note
+  line-height: 1.2
+  white-space: normal
+  
+
+p.nothing_to_see
+  padding: 100px 0
+
+
+/* -------- map infowindows -------- */
+
+.window
+  h2
+    margin-bottom: 0.1em
+  address
+    font-style: normal
+    color: $mid
+    +small
+
+/* -------- drag_sort -------- */
+
+.handle
+  cursor: move
+
+.sortable-placeholder
+  height: 40px
+  background: #def