@import "compass/reset"
@import "compass/css3"
@import "compass/utilities/general/clearfix"

body, input, textarea
  margin: 40px
  color: #888
  background: #222
  font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif
  -wbkite-font-smoothing: antialiased
  
h1, h2, h3, h4, h5, h6
  color: white
  font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif
  line-height: 1em
  font-weight: 600
  margin-bottom: 0.5em
 
h1
  font-size: 72px
  line-height: 0.5em
  margin-bottom: 0.3em
  small
    font-size: 20px
  span
    +transition( color 1s)
  &:hover
    .char1
      +transition( color .2s)    
      color: red
    .char2
      +transition( color .2s .1s)    
      color: orange
    .char3
      +transition( color .2s .2s)    
      color: yellow
    .char4
      +transition( color .2s .3s)    
      color: green
    .char5
      +transition( color .2s .4s)    
      color: blue
    .char6
      +transition( color .2s .5s)    
      color: indigo
    .char7
      +transition( color .2s .6s)    
      color: violet
    .char8
      +transition( color .2s .7s)    
      color: red
    .char9
      +transition( color .2s .8s)    
      color: orange
    .char10
      +transition( color .2s .9s)    
      color: yellow
    .char11
      +transition( color .2s 1s)    
      color: green

h2
  font-size: 40px
  line-height: 1.2em
  text-align: center

h3
  font-size: 16px
  letter-spacing: 0.1em
  text-transform: uppercase

h4
  font-size: 20px
  margin-bottom: 1.25em

p
  margin-bottom: 1.25em


strong
  font-weight: bold
  
  
/* Forms */
input
  &[type=text], &[type=password]
    background: #fafafa
    +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1))
    border: 1px solid #dddddd
    color: #888888
    +border-radius(4px)

textarea
  background: #fafafa
  +box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.1))
  border: 1px solid #dddddd
  color: #888888
  +border-radius(4px)

input[type=text]:focus
  color: #373737

textarea
  &:focus
    color: #373737
  padding-left: 3px
  width: 98%

input[type=text]
  padding: 3px


/* Links */
a
  color: #09a1ec
  text-decoration: none
  &:hover
    color: #7fd2fa

#container
  width: 900px
  margin: 0 auto

header
  padding-bottom: 40px
  text-align: center
  width: 600px
  margin: 0 auto

.medianCutPalette h3
  margin-top: 20px

.imageSection
  margin-bottom: 80px
  background: #111111
  +border-radius(10px)
  +pie-clearfix
  .imageWrap
    +border-left-radius(10px)
    width: 400px
    height: 300px
    float: left
    margin-right: 20px
    background: url(../img/dark_checkered_bg.png)
    .targetImage
      +border-left-radius(10px)
  .colors
    margin-top: 20px
    width: 400px
    float: left
    .function
      clear: left
      margin-bottom: 10px
      +pie-clearfix
      .swatches .swatch
        width: 40px
        height: 20px
        margin-right: 2px
        background: #dddddd
        float: left
        +transition( all .5s)
        &:hover
          +transition( none)
          +scale(1.2, 1.2)
          +box-shadow( 0 1px 10px black)
        &:first-child
          +border-left-radius(4px)
        &:last-child
          +border-right-radius(4px)

/* Hardcoding the offset for the FB icon example
.fbIcon .imageWrap .targetImage
  +border-radius(0)
  position: relative
  top: 142px
  left: 192px

canvas
  display: none