style.sass

@import "sass-vars.sass"
@import ../../sass/event.sass

@import ../../sass/landing.sass

@import ./sass/_reset.sass
@import ./sass/_config.sass
@import ./sass/_default.sass
@import ./sass/_elements.sass
@import ./sass/_messages.sass


@import ./sass/config/_utilities.sass
@import ./sass/config/_colors.sass
@import ./sass/config/_typography.sass
@import ./sass/config/_nineSixty.sass

=maxWidth
  :margin 0 auto
  :width 960px
  
  
#flashMessage
  //IE6 will only apply class colors to "relative" positioned divs
  :background = !light
  //
    Set position to "fixed" if you want the message to follow scroll, or "relative" 
    if you prefer to have it inline. Currently, only absolute works for IE6.
  :position absolute
  :border-bottom 2px solid
  :top 0
  :right 0
  :z-index 10
  :padding 10px 5px
  :text-align center
  :width 100%
  :overflow hidden
  .message
    :margin 0 auto
    :margin-left 1.5em
    :min-height 15px
    :padding 0 40px
  #close
    :border 2px solid
    :cursor pointer
    :right 10px
    :top 20%
    :padding 0 2px 5px
    :position absolute
    :width 15px
  &.success
    +flash(!success, "accept")
  &.alert
    +flash(!alert, "error")
  &.error
    +flash(!error, "exclamation")

.errorMessage
  :display none
  p
    :color = !errorText
  
.fieldWithErrors
  :background = "url('/images/icons/exclamation.png') no-repeat 1%" !error
  :line-height 1.6
  :padding 5px
  label
    :padding-left 20px

.checkbox, .radio
  :float left
  .fieldWithErrors
    :background-position 14%
    :overflow hidden
    :padding-left 20px
    :padding-bottom 2px
      
.label
  .fieldWithErrors
    label 
      :padding 10px 0
    
.file
  .fieldWithErrors
    :background-position 1% 42%
    :padding-left 30px

#errorExplanation
  :background-color = !error
  :border = "2px solid" !red
  :margin-bottom 20px
  :padding-bottom 10px
  h2
    +typeSans
    :background-color = !red
    :color #fff
    :font-size 12px
    :font-weight bold
    :padding 10px 20px
    :margin 0
    :text-align left
  p 
    :padding 10px 20px 0
  ul
    :padding-left 20px
    
    
/* Hide content from screenreader and browsers. 'hidden' HTML attribute is also useful */
.hidden
  display: none !important;
  visibility: hidden;

.initially-hidden
  display: none !important;
  visibility: hidden;

/* Micro clearfix from h5bp.com */
.clearfix
  &:before, &:after
    content: " ";
    display: table;


//
  Always add mixins first so styles can be overridden as needed. For instance:
  top-bar-inner has a +maxWidth mixin applied, which has a default padding of 0 15px, but
  here additional padding-top specific to the element is also added aftwerward.

body
  :background = !body
//basic layout elements
#wrapper
  :width 100%
  #top-bar
    :background = !topBar
    :border-bottom = "1px solid" !topBar - #333
    :height 80px
    :margin-bottom 30px
    :padding-top 10px
    &.tabs
      :height 100px
    #top-bar-inner
      +maxWidth
      +topBarType
      :padding 20px 20px 0
      //IE6 hack (top padding not being respected)
      :*margin-top 20px
      :width 940px
      #logo
        +logoType
        :float left
        :width 260px
      .tagline
        :float left
        :padding-top 5px
        :width 200px
      #nav
        :float right
        :padding-top 5px
        a
          :margin 0 10px
      //tabbed nav for an admin like area
      #tabs
        +roundedTop
        :background = !tabs
        :height 30px
        :margin-top 50px
        ul
          :list-style none
          :margin 0
        li
          :float left
          :display inline
          :margin-top 3px
          a
            :color = !tabLink
            :display block
        #primary-nav
          +primaryNavType
          ul li
            +roundedTop
            :cursor pointer
            :padding 4px 25px 11px
            &.active
              :background = !body
              :border-bottom = "1px solid" !body
              a
                :color = !tabs
        #secondary-nav
          +secondaryNavType
          :float right
          :margin 2px 10px
          ul li
            :float left
            :padding 0 10px
        
  #content
    +clearfix
    +maxWidth
    .tagline
      +baseLine
      +contentTaglineType
      :border-bottom = "1px solid" !border
      :border-top = "1px solid " !border
      :padding 16px 0 2px
      :text-align center
    #sidebar
      :float left
      :width 300px
      :margin 0 10px
    #main
      :float left
      :width 620px
      :margin 0 10px
  #footer
    :background = !topBar
    :border-top = "1px solid" !topBar - #333
    :margin-top 19px
    :padding 25px 40px
    :text-align center
    p
      :color = !light
    a
      :margin 0 10px
  
//content elements
.box
  +baseLine
  +borderThin
  :background = !contentBox
  :padding 10px
  
.actions
  :border-top = "1px solid" !border
  :padding-top 20px

//paginate classes based on default output of mislav's will_paginate plugin
.paginate
  :float right
  a
    +borderThin
    :margin 0 5px
    :padding 1px 1px 1px 5px
    :text-decoration none
    &:hover
      :background = !link
      :border-color = !link
      :color #fff
  .next_page
    :background none
    :border 0
  .current
    :color = !contentBox
    :background = !link
    :margin 0 5px
    :padding 1px 1px 1px 5px
  .disabled
    :border none
    :color #888
/* ''
.uberbox-icon-close:before
  content: '\e801'
/* ''
.uberbox-icon-arrows-ccw:before
  content: '\e802'
/* ''
.uberbox-icon-share:before
  content: '\e803'
/* ''
.uberbox-icon-fullscreen:before
  content: '\e804'
/* ''
.uberbox-icon-exit-fullscreen:before
  content: '\e805'
/* ''
.uberbox-icon-download:before
  content: '\e806'
/* ''
.uberbox-icon-duckduckgo:before
  content: '\e80f'
/* ''
.uberbox-icon-aim:before
  content: '\e810'
/* ''
.uberbox-icon-delicious:before
  content: '\e812'
/* ''
.uberbox-icon-paypal:before
  content: '\e814'
/* ''
.uberbox-icon-flattr:before
  content: '\e815'
/* ''
.uberbox-icon-android:before
  content: '\e816'
/* ''
.uberbox-icon-eventful:before
  content: '\e817'
/* ''
.uberbox-icon-smashmag:before
  content: '\e818'
/* ''
.uberbox-icon-googleplus:before
  content: '\e819'
/* ''
.uberbox-icon-wikipedia:before
  content: '\e81a'
/* ''
.uberbox-icon-lanyrd:before
  content: '\e81b'
/* ''
.uberbox-icon-calendar:before
  content: '\e81c'
/* ''
.uberbox-icon-stumbleupon:before
  content: '\e81d'
/* ''
.uberbox-icon-fivehundredpx:before
  content: '\e81e'
/* ''
.uberbox-icon-pinterest:before
  content: '\e81f'
/* ''
.uberbox-icon-bitcoin:before
  content: '\e820'
/* ''
.uberbox-icon-w3c:before
  content: '\e821'
/* ''
.uberbox-icon-foursquare:before
  content: '\e822'
/* ''
.uberbox-icon-html5:before
  content: '\e823'
/* ''
.uberbox-icon-ie:before
  content: '\e824'
/* ''
.uberbox-icon-call:before
  content: '\e825'
/* ''
.uberbox-icon-grooveshark:before
  content: '\e826'
/* ''
.uberbox-icon-ninetyninedesigns:before
  content: '\e827'
/* ''
.uberbox-icon-forrst:before
  content: '\e828'
/* ''
.uberbox-icon-digg:before
  content: '\e829'
/* ''
.uberbox-icon-spotify:before
  content: '\e82a'
/* ''
.uberbox-icon-reddit:before
  content: '\e82b'
/* ''
.uberbox-icon-guest:before
  content: '\e82c'
/* ''
.uberbox-icon-gowalla:before
  content: '\e82d'
/* ''
.uberbox-icon-appstore:before
  content: '\e82e'
/* ''
.uberbox-icon-blogger:before
  content: '\e82f'
/* ''
.uberbox-icon-cc:before
  content: '\e830'
/* ''
.uberbox-icon-dribbble:before
  content: '\e831'
/* ''
.uberbox-icon-evernote:before
  content: '\e832'
/* ''
.uberbox-icon-flickr:before
  content: '\e833'
/* ''
.uberbox-icon-google:before
  content: '\e834'
/* ''
.uberbox-icon-viadeo:before
  content: '\e835'
/* ''
.uberbox-icon-instapaper:before
  content: '\e836'
/* ''
.uberbox-icon-weibo:before
  content: '\e837'
/* ''
.uberbox-icon-klout:before
  content: '\e838'
/* ''
.uberbox-icon-linkedin:before
  content: '\e839'
/* ''
.uberbox-icon-meetup:before
  content: '\e83a'
/* ''
.uberbox-icon-vk:before
  content: '\e83b'
/* ''
.uberbox-icon-plancast:before
  content: '\e83c'
/* ''
.uberbox-icon-disqus:before
  content: '\e83d'
/* ''
.uberbox-icon-rss:before
  content: '\e83e'
/* ''
.uberbox-icon-skype:before
  content: '\e83f'
/* ''
.uberbox-icon-twitter:before
  content: '\e840'
/* ''
.uberbox-icon-youtube:before
  content: '\e841'
/* ''
.uberbox-icon-vimeo:before
  content: '\e842'
/* ''
.uberbox-icon-windows:before
  content: '\e843'
/* ''
.uberbox-icon-xing:before
  content: '\e844'
/* ''
.uberbox-icon-yahoo:before
  content: '\e845'
/* ''
.uberbox-icon-chrome:before
  content: '\e846'
/* ''
.uberbox-icon-email:before
  content: '\e847'
/* ''
.uberbox-icon-macstore:before
  content: '\e848'
/* ''
.uberbox-icon-myspace:before
  content: '\e849'
/* ''
.uberbox-icon-podcast:before
  content: '\e84a'
/* ''
.uberbox-icon-amazon:before
  content: '\e84b'
/* ''
.uberbox-icon-steam:before
  content: '\e84c'
/* ''
.uberbox-icon-cloudapp:before
  content: '\e84d'
/* ''
.uberbox-icon-dropbox:before
  content: '\e84e'
/* ''
.uberbox-icon-ebay:before
  content: '\e84f'
/* ''
.uberbox-icon-facebook:before
  content: '\e850'
/* ''
.uberbox-icon-github:before
  content: '\e851'
/* ''
.uberbox-icon-github-circled:before
  content: '\e852'
/* ''
.uberbox-icon-googleplay:before
  content: '\e853'
/* ''
.uberbox-icon-itunes:before
  content: '\e854'
/* ''
.uberbox-icon-plurk:before
  content: '\e855'
/* ''
.uberbox-icon-songkick:before
  content: '\e856'
/* ''
.uberbox-icon-lastfm:before
  content: '\e857'
/* ''
.uberbox-icon-gmail:before
  content: '\e858'
/* ''
.uberbox-icon-pinboard:before
  content: '\e859'
/* ''
.uberbox-icon-openid:before
  content: '\e85a'
/* ''
.uberbox-icon-quora:before
  content: '\e85b'
/* ''
.uberbox-icon-soundcloud:before
  content: '\e85c'
/* ''
.uberbox-icon-tumblr:before
  content: '\e85d'
/* ''
.uberbox-icon-eventasaurus:before
  content: '\e85e'
/* ''
.uberbox-icon-wordpress:before
  content: '\e85f'
/* ''
.uberbox-icon-yelp:before
  content: '\e860'
/* ''
.uberbox-icon-intensedebate:before
  content: '\e861'
/* ''
.uberbox-icon-eventbrite:before
  content: '\e862'
/* ''
.uberbox-icon-scribd:before
  content: '\e863'
/* ''
.uberbox-icon-posterous:before
  content: '\e864'
/* ''
.uberbox-icon-stripe:before
  content: '\e865'
/* ''
.uberbox-icon-opentable:before
  content: '\e866'
/* ''
.uberbox-icon-cart:before
  content: '\e867'
/* ''
.uberbox-icon-print:before
  content: '\e868'
/* ''
.uberbox-icon-angellist:before
  content: '\e869'
/* ''
.uberbox-icon-instagram:before
  content: '\e86a'
/* ''
.uberbox-icon-dwolla:before
  content: '\e86b'
/* ''
.uberbox-icon-appnet:before
  content: '\e86c'
/* ''
.uberbox-icon-statusnet:before
  content: '\e86d'
/* ''
.uberbox-icon-acrobat:before
  content: '\e86e'
/* ''
.uberbox-icon-drupal:before
  content: '\e86f'
/* ''
.uberbox-icon-buffer:before
  content: '\e870'
/* ''
.uberbox-icon-pocket:before
  content: '\e871'
/* ''
.uberbox-icon-bitbucket:before
  content: '\e872'
/* ''
.uberbox-icon-lego:before
  content: '\e873'
/* ''
.uberbox-icon-login:before
  content: '\e874'
/* ''
.uberbox-icon-stackoverflow:before
  content: '\e875'
/* ''
.uberbox-icon-hackernews:before
  content: '\e876'
/* ''
.uberbox-icon-lkdto:before
  content: '\e877'
/* ''
.html
  position: fixed
  left: 50%
  top: -20%
  transform: translate(-50%, -50%)
  width: 320px
  border-radius: 5px
  color: #eee
  background: #333
  text-align: center
  font-size: 14px
  line-height: 24px
  transition: all 0.3s
  padding: 24px
  font-weight: 200
  opacity: 0
  z-index: 100002
  font-family: myriad-pro, 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial,sans-serif;
  &.uberbox-active
    top: 50%
    opacity: 1