@import "base"




/* =Global */


body, input, textarea 
  margin: 40px
  color: $color 
  background: $bgColor
  font:  16px/1.625em 'Varela Round',"lucida grande",tahoma,sans-serif
  font-weight: 400
  -webkit-font-smoothing: antialiased


h1,h2,h3,h4,h5,h6 
  color: $headingColor
  font-family: 'Terminal Dosis', 'lucida grande', tahoma, sans-serif
  line-height: 1em
  font-weight: 600
  margin-bottom: .5em

h1
  font-size:  72px
  line-height: .5em
  margin-bottom: .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],
input[type=password],
textarea 
  background: #fafafa
  +box-shadow(inset 0 1px 1px rgba(0,0,0,0.1))
  border: 1px solid #ddd
  color: #888
  +border-radius($radius)



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

textarea 
  padding-left: 3px
  width: 98%

input[type=text] 
  padding: 3px

/* Links */
a
  color: $blue
  text-decoration: none
  &:hover
    color: scale-color($blue, $lightness: 50%)


#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: #111
  +border-radius(10px)
  .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
      .swatches
        .swatch
          width: 40px
          height: 20px
          margin-right: 2px
          background: #ddd
          float: left
          +transition(all .5s)
          &:hover
            +transition(none)
            +scale(1.2, 1.2)
            +box-shadow(0 1px 10px rgba(0,0,0,1))
          &:first-child
            +border-left-radius($radius)
          &:last-child
            +border-right-radius($radius)

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