@import compass/layout
@import "foundation/components/global"

@include sticky-footer(54px)

$color1: #4a404e
$color2: #6f6573
$color3: #f4f0e4  
$color4: #dd0b79

$primary-color: $color1
$anchor-font-color: #5fb9f5
$anchor-font-color-hover: darken($anchor-font-color, 5%)

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
$base-font-size: 100%

// Set your base font-size in pixels so emCalc can do its magic below
//$em-base: 20px

// We use these to control various global styles
$body-bg: #fff
$body-font-color: $color1
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
$body-font-weight: normal
$body-font-style: normal

$header-font-color: $color1

$global-radius: 10px

$form-spacing: emCalc(24px)

// Global Foundation Settings
@import settings

// Comment out this import if you are customizing you imports below
@import foundation


@mixin provider-color($bg, $fg: #fff)
  $darker: shade($bg, 5%)
  color: $fg
  background-color: $bg
  border-color: $darker
  &:hover
    background-color: $darker

form
  margin: 0em
  font-size: 1em

.hidden
  display: none

#header
  background-color: $color1
  color: $color3
  padding: 1em 0em
  
  .logo
    margin: 1em 0em
    width: 100%
    &.show-for-small
      padding: 0em 1em

#sub-header
  background-color: $color2
  color: $color3
  
  br
    display: none
  
  #motto
    text-align: center
    font-weight: bold
    padding: 1em
    margin-bottom: 0em

#footer
  background-color: $color1
  color: $color3
  text-align: center
  padding: 1em

#user-apis
  form, form>input[type=submit]
    width: 100%
  
  input[type=text]
    background-color: white

#user
  background-color: $color3
  padding: 2em 0em
  
  h1
    margin-top: 0em
  
  .info span
    color: $color4
    overflow: scroll
  
  #user-picture-column
    text-align: right
  
  #user-picture
    @include radius
    width: 5em
    height: 5em
  
  #user-data-wrapper
    @include radius
    background-color: $color1
    color: $color3
    width: 100%
    padding: 1em
    margin: 1em 0em 0em 0em
    #user-data
      overflow: hidden
      white-space: pre
      max-height: 10em
      overflow-y: scroll
      

#error
  background-color: $color4
  color: $color1
  padding: 2em 0em
  font-weight: bold
  span
    font-weight: normal

#authentication, #authorization
  margin-top: 2em

input[type=text]
  @include side-radius(left, $global-radius)
  background-color: $color3

#buttons
  margin-bottom: 2em

.provider-button
  @include button-base
  @include button-size($full-width: true)
  @include button-style
  @include radius
  @include single-transition
  @include inset-shadow(true)
  text-align: left
  padding-left: 1em
  padding-right: 1em
  span
    min-width: 90px
  img
    float: right
    width: 16px
    height: 16px


@media #{$small}
  #sub-header
    br
      display: inline
  #user
    #user-picture
      width: 14.5em
      height: 14.5em      
  #user-apis
    form, form>input[type=submit]
      margin-right: 1em
      display: inline-block
      vertical-align: top
      width: auto

// OAuth 1.0a
.provider-button.bitbucket
  @include provider-color(#EFEFF0, #205081)

.provider-button.flickr
  @include provider-color(#FF0084)

.provider-button.meetup
  @include provider-color(#EDEFED, #e51937)

.provider-button.plurk
  @include provider-color(#CF682F)

.provider-button.tumblr
  @include provider-color(#9BABBA, #2c4762)

.provider-button.twitter
  @include provider-color(#F8F8F8, #00ACED)

.provider-button.vimeo
  @include provider-color(#172322)

.provider-button.xero
  @include provider-color(#45474D, #00B7E2)

.provider-button.yahoo
  @include provider-color(#FAFAFC, #6E329D)

// OAuth 2.0
.provider-button.behance
  @include provider-color(#1A1A1A)

.provider-button.bitly
  @include provider-color(#F3F8FB, #EE6123)

.provider-button.cosm
  @include provider-color(#F2F4F5, #F1592A)

.provider-button.deviantart
  @include provider-color(#D4DFD0, #47594E)

.provider-button.facebook
  @include provider-color(#EDEDED, #3B5998)

.provider-button.foursquare
  @include provider-color(#8DC540)

.provider-button.github
  @include provider-color(#F5CDB6, #4A4A4A)

.provider-button.google
  @include provider-color(#F1F1F1, #2D2D2D)

.provider-button.linkedin
  @include provider-color(#F5F5F5, #010101)

.provider-button.paypal
  @include provider-color(#F5F5F5, #00457C)

.provider-button.reddit
  @include provider-color(#CEE3F8, #FF4500)

.provider-button.viadeo
  @include provider-color(#F8F9FB, #282828)

.provider-button.vk
  @include provider-color(#D9E1E8, #43658B)

.provider-button.yammer
  @include provider-color(#F5F5F5, #009AC7)

.provider-button.windows_live
  @include provider-color(#F89A1E)

.provider-button.yandex
  @include provider-color(#FF000A)

.provider-button.xing
  @include provider-color(#006567)


