$form_width: 210px
$form_padding: 40px
#form-wrapper
background: rgb(250, 250, 250)
position: absolute
left: 50%
top: 20%
margin-left: -($form_width / 2 + $form_padding)
padding: $form_padding
width: $form_width
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
+box-shadow(0, 3px, 5px, rgba(0, 0, 0, .3))
header
*
margin-bottom: 1em
input[type=text], input[type=password], textarea
+border-radius(2px)
border: 1px solid #bbbbbb
width: 200px
font: 12px / 18px $sans_ff
margin: 0 0 10px
padding: 3px 4px
background: rgb(255, 255, 255)
color: #777777
&:focus
outline: none
border-color: rgb(132, 167, 237)
color: #333333
textarea
height: 150px
label
cursor: pointer
font-size: 12px
font-family: $sans_ff
font-weight: normal
input[type=submit]
display: block
border: none
position: relative
cursor: pointer
$bg: rgb(150, 100, 100)
background: $bg
background: -webkit-gradient(linear, left top, left bottom, from($bg), to(darken($bg, 10%)))
padding: 5px 10px 6px
color: white
text-decoration: none
font-weight: bold
text-shadow: 0 -1px 1px rgba(0, 0, 0, .25)
border: 1px solid rgba(0, 0, 0, .1)
border-top-color: rgba(255, 255, 255, .1)
border-bottom-color: rgba(0, 0, 0, .2)
+border-radius(5px)
+box-shadow(0, 1px, 0px, rgb(255, 255, 255))
+transition(background, .25s)
&:hover
$bg: $link_color_h
background: $bg
background: -webkit-gradient(linear, left top, left bottom, from($bg), to(darken($bg, 10%)))
&:active
$bg: $link_color_h
background: $bg
background: -webkit-gradient(linear, left top, left bottom, from(darken($bg,10%)), to($bg))
color: rgba(255, 255, 255, .8)
input.right
float: right
// inline label stuff
// @ref: http://www.zurb.com/playground/inline-form-labels
.field
+box-shadow(0, 1px, 0, rgb(255, 255, 255))
display: block
+border-radius(2px)
.field.inline
background: rgb(255, 255, 255)
+border-radius(2px)
input
position: relative
display: block
z-index: 2
margin-top: -22px
background-color: transparent
label
position: relative
z-index: 1
display: block
padding-left: 6px
opacity: .75
+transition(opacity, .15s, linear)
label.focus
opacity: .35
label.has-text
opacity: 0
-webkit-transition-duration: 0s
.field.top
input
position: relative
display: block
label
position: relative
display: block
.field
// for inline fields within on-top fields
// useful for input hints eg john@doe.com for an email field
display: block
margin-top: 4px
.field.upload
background: $page_color - rgb(20, 20, 20)
border: 1px solid $page_color - rgb(50, 50, 50)
display: block
padding: 3px 6px
margin-bottom: 7px
.field.left
display: block
input
position: relative
label
position: relative
.field.mini
input, textarea
width: 90px
.field.small
input, textarea
width: 120px
.field.medium
input, textarea
width: 330px
.field.large
input, textarea
width: 570px
.checkbox
position: relative
display: block
padding-bottom: 8px
input
margin-left: 10px