diff --git a/_/scss/_forms.scss b/_/scss/_forms.scss deleted file mode 100644 index c5d5d04..0000000 --- a/_/scss/_forms.scss +++ /dev/null @@ -1,34 +0,0 @@ -input, select, textarea, button { - display: inline-block; - font-family: $baseFontStack; - font-size: 1em; - line-height: marginBottom + px; - color: #222; - padding: ($marginBottom / 2) - 1px; - background-color: $inputBackgroundColour; - border: solid 1px $inputBorderColour; - @include border-radius(3px); - margin-right: 5px; -} - -.control-group { - margin-bottom: $marginBottom + px; -} - -.control-label { - float: left; - width: 140px; -} - -.controls { - margin-left: 160px; -} - -.btn { - display: inline-block; - background-color: $btnBackgroundColour; - border: solid 1px $btnBorderColour; - padding: ($marginBottom / 2) - 1px; - @include border-radius(3px); - @include box-shadow(3px); -} \ No newline at end of file diff --git a/_/scss/_mixins.scss b/_/scss/_mixins.scss deleted file mode 100644 index 1c4bbf8..0000000 --- a/_/scss/_mixins.scss +++ /dev/null @@ -1,29 +0,0 @@ -@mixin border-radius ($radius: 5px) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - -o-border-radius: $radius; - border-radius: $radius; - -} - -@mixin col-width ($span: 1) { - width: ( $columnWidth * $span ) + ( ( $span - 1 ) * $columnGutter ) * 1px; -} - -@mixin box-sizing ($box-model: 'border-box') { - -webkit-box-sizing: $box-model; - -moz-box-sizing: $box-model; - box-sizing: $box-model; -} - -@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) { - -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); -} - -@mixin transition($duration:0.2s, $ease:ease-out) { - -webkit-transition: all $duration $ease; - -moz-transition: all $duration $ease; - transition: all $duration $ease; -} \ No newline at end of file diff --git a/_/scss/_normalise.scss b/_/scss/_normalise.scss deleted file mode 100644 index 2cf6f89..0000000 --- a/_/scss/_normalise.scss +++ /dev/null @@ -1,49 +0,0 @@ -html { - background-color: $bodyBackgroundColour; - color: $color; - font-family: $baseFontStack; - font-size: ($baseFontSize / 16) * 1em; - line-height: $baseLineHeight; -} - -h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset { - margin-bottom: $marginBottom * 1px; -} - -h1 { - font-size: ($h1FontSize / $baseFontSize) * 1em; - line-height: ($marginBottom / $h1FontSize ) * 1em; -} - -h2 { - font-size: ($h2FontSize / $baseFontSize) * 1em; - line-height: ($marginBottom / $h2FontSize ) * 1em; -} - -h3 { - font-size: ($h3FontSize / $baseFontSize) * 1em; - line-height: ($marginBottom / $h3FontSize ) * 1em; -} - -h4 { - font-size: ($h4FontSize / $baseFontSize) * 1em; - line-height: ($marginBottom / $h4FontSize ) * 1em; -} - -h5 { - font-size: ($h5FontSize / $baseFontSize) * 1em; - line-height: ($marginBottom / $h5FontSize ) * 1em; -} - -h6 { - font-size: ($h6FontSize / $baseFontSize) * 1em; - line-height: ($marginBottom / $h6FontSize ) * 1em; -} - -ul, ol { - margin-left: $listMarginLeft * 1px; -} - -ul ul, ol ol { - margin-bottom: 0; -} \ No newline at end of file diff --git a/_/scss/_scaffolding.scss b/_/scss/_scaffolding.scss deleted file mode 100644 index b0995f0..0000000 --- a/_/scss/_scaffolding.scss +++ /dev/null @@ -1,70 +0,0 @@ -.container { - width: $containerWidth * 1px; - margin-left: auto; - margin-right: auto; - padding: 0 $containerPadding * 1px; - @media (max-width: 767px) { - width: auto; - } -} - -.container-fluid { - @media (max-width: 767px) { - padding: 0; - } -} - -.row { - margin-left: -$columnGutter * 1px; - *zoom: 1; - @media (max-width: 767px) { - margin-left: 0; - } -} - -.row:before, -.row:after { - display: table; - line-height: 0; - content: ""; -} - -.row:after { - clear: both; -} - -.row-fluid { - @media (max-width: 767px) { - padding: 0; - } -} - -.col { - display: inline-block; - *display: inline; - float: left; - margin-left: $columnGutter * 1px; - img { - width: 100%; - } - @media (max-width: 767px) { - display: block; - float: none; - width: 100%; - margin-left: 0; - @include box-sizing(border-box); - } -} - -.col1 { @include col-width(); } -.col2 { @include col-width(2); } -.col3 { @include col-width(3); } -.col4 { @include col-width(4); } -.col5 { @include col-width(5); } -.col6 { @include col-width(6); } -.col7 { @include col-width(7); } -.col8 { @include col-width(8); } -.col9 { @include col-width(9); } -.col10 { @include col-width(10); } -.col11 { @include col-width(11); } -.col12 { @include col-width(12); } \ No newline at end of file diff --git a/_/scss/_utilities.scss b/_/scss/_utilities.scss deleted file mode 100644 index b11b2c3..0000000 --- a/_/scss/_utilities.scss +++ /dev/null @@ -1,21 +0,0 @@ -.alignleft { - float: left; -} - -img.alignleft { - margin-right: $columnGutter * 1px; -} - -.alignright { - float: right; -} - -img.alignright { - margin-left : $columnGutter * 1px; -} - -.aligncenter { - display: block; - margin-left: auto; - margin-right: auto; -} \ No newline at end of file diff --git a/_/scss/_variables.scss b/_/scss/_variables.scss deleted file mode 100644 index e91dc7d..0000000 --- a/_/scss/_variables.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Base - -$color: #333; -$bodyBackgroundColour: #fff; - -$baseFontStack: 'Helvetica Neue', Helvetica, Arial, sans-serif; -$baseFontSize: 14; -$baseLineHeight: 1.5; -$marginBottom: ($baseFontSize * $baseLineHeight); - -$h1FontSize: 28; -$h2FontSize: 24; -$h3FontSize: 21; -$h4FontSize: 18; -$h5FontSize: 16; -$h6FontSize: 16; - -// Lists - -$listMarginLeft: 24; - -// Scaffolding - -$containerWidth: 940; -$containerPadding: 40; -$columnGutter: 20; -$columnCount: 12; -$columnWidth: ( ( $containerWidth + $columnGutter ) - ( $columnGutter * $columnCount ) ) / $columnCount; - -// Tables - -$tableBorderColour: #ddd; - -// Forms -$inputBorderColour: #ccc; -$inputBackgroundColour: #fff; -$btnBorderColour: #ccc; -$btnBackgroundColour: #eee; \ No newline at end of file diff --git a/_/scss/_vars.scss b/_/scss/_vars.scss new file mode 100755 index 0000000..ebd2291 --- /dev/null +++ b/_/scss/_vars.scss @@ -0,0 +1,37 @@ +// Base + +$base-colour: #333; +$base-background-colour: #fff; + +$base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif; +$base-font-size: 14; +$base-line-height: 1.5; +$base-margin-bottom: ($base-font-size * $base-line-height); + +$h1-font-size: 28; +$h2-font-size: 24; +$h3-font-size: 21; +$h4-font-size: 18; +$h5-font-size: 16; +$h6-font-size: 16; + +// Lists + +$list-margin-left: 24; + +// Scaffolding + +$column-gutter: 20; +$column-count: 12; +$container-max-width: 1200; + +// Tables + +$table-border-colour: #ddd; + +// Forms +$input-border: solid 1px #ccc; +$input-background: #fff; +$btn-border: solid 1px #ccc; +$btn-background: #eee; +$btn-color: #333; \ No newline at end of file diff --git a/_/scss/generic/_mixins.scss b/_/scss/generic/_mixins.scss new file mode 100755 index 0000000..28e176d --- /dev/null +++ b/_/scss/generic/_mixins.scss @@ -0,0 +1,49 @@ +@mixin breakpoint($point) { + @if $point == desktop { + @media (min-width: 1200px) { @content; } + } + @else if $point == tablet-landscape { + @media (min-width: 1024px) { @content; } + } + @else if $point == tablet-portrait { + @media (min-width: 768px) { @content; } + } +} + +@mixin border-radius ($radius: 5px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -o-border-radius: $radius; + border-radius: $radius; +} + +@mixin col-width ($span: 1) { + //width: ((($container-width / $column-count) * $span) - $column-gutter) / $container-width * 100%; + width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%; +} + +@mixin box-sizing ($box-model: 'border-box') { + -webkit-box-sizing: $box-model; + -moz-box-sizing: $box-model; + box-sizing: $box-model; +} + +@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) { + -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); + box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +} + +@mixin transition($duration:0.2s, $ease:ease-out) { + -webkit-transition: all $duration $ease; + -moz-transition: all $duration $ease; + transition: all $duration $ease; +} + +@mixin gradient($from, $to) { + background-color: $from; + background-image: -webkit-linear-gradient($from, $to); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); + background-image: -moz-linear-gradient($from, $to); + background-image: -o-linear-gradient($from, $to); +} \ No newline at end of file diff --git a/_/scss/generic/_normalise.scss b/_/scss/generic/_normalise.scss new file mode 100755 index 0000000..18490d1 --- /dev/null +++ b/_/scss/generic/_normalise.scss @@ -0,0 +1,53 @@ +html { + background-color: $base-background-colour; + color: $base-colour; + font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack; +} + +h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset { + margin-bottom: $base-margin-bottom * 1px; +} + +h1 { + font-size: ($h1-font-size / $base-font-size) * 1em; + line-height: ($base-margin-bottom / $h1-font-size ) * 1em; +} + +h2 { + font-size: ($h2-font-size / $base-font-size) * 1em; + line-height: ($base-margin-bottom / $h2-font-size ) * 1em; +} + +h3 { + font-size: ($h3-font-size / $base-font-size) * 1em; + line-height: ($base-margin-bottom / $h3-font-size ) * 1em; +} + +h4 { + font-size: ($h4-font-size / $base-font-size) * 1em; + line-height: ($base-margin-bottom / $h4-font-size ) * 1em; +} + +h5 { + font-size: ($h5-font-size / $base-font-size) * 1em; + line-height: ($base-margin-bottom / $h5-font-size ) * 1em; +} + +h6 { + font-size: ($h6-font-size / $base-font-size) * 1em; + line-height: ($base-margin-bottom / $h6-font-size ) * 1em; +} + +ul, ol { + margin-left: $list-margin-left * 1px; +} + +ul ul, ol ol { + margin-bottom: 0; +} + +img { + display: block; + max-width: 100%; + height: auto; +} \ No newline at end of file diff --git a/_/scss/_reset.scss b/_/scss/generic/_reset.scss old mode 100644 new mode 100755 similarity index 100% rename from _/scss/_reset.scss rename to _/scss/generic/_reset.scss diff --git a/_/scss/generic/_utilities.scss b/_/scss/generic/_utilities.scss new file mode 100755 index 0000000..0d6bd18 --- /dev/null +++ b/_/scss/generic/_utilities.scss @@ -0,0 +1,33 @@ +.alignleft { + float: left; +} + +img.alignleft { + margin-right: $column-gutter * 1px; +} + +.alignright { + float: right; +} + +img.alignright { + margin-left : $column-gutter * 1px; +} + +.aligncenter { + display: block; + margin-left: auto; + margin-right: auto; +} + +.clearfix { + *zoom:1; + &:before, + &:after{ + content: " "; + display: table; + } + &:after{ + clear: both; + } +} \ No newline at end of file diff --git a/_/scss/objects/_forms.scss b/_/scss/objects/_forms.scss new file mode 100755 index 0000000..68b0d1c --- /dev/null +++ b/_/scss/objects/_forms.scss @@ -0,0 +1,42 @@ +input, select, textarea, button { + display: inline-block; + font-family: $base-font-stack; + font-size: 1em; + line-height: $base-margin-bottom + px; + padding: 2.5px 5px; + color: $base-colour; + background: $input-background; + border: $input-border; + @include border-radius(3px); + margin-right: 5px; + margin-bottom: -1px; + width: 208px; +} + +.control-group { + margin-bottom: $base-margin-bottom + px; +} + +.control-label { + float: left; + width: 140px; +} + +.controls { + margin-left: 160px; + @extend .clearfix; +} + +.btn { + cursor: pointer; + display: inline-block; + background: $btn-background; + color: $btn-color; + line-height: $base-margin-bottom + px; + border: $btn-border; + @include border-radius(3px); + @include gradient(#fff, #eee); + &:hover { + @include gradient(#eee, #fff); + } +} \ No newline at end of file diff --git a/_/scss/_nav.scss b/_/scss/objects/_nav.scss old mode 100644 new mode 100755 similarity index 100% rename from _/scss/_nav.scss rename to _/scss/objects/_nav.scss diff --git a/_/scss/objects/_scaffolding.scss b/_/scss/objects/_scaffolding.scss new file mode 100755 index 0000000..9ea1e89 --- /dev/null +++ b/_/scss/objects/_scaffolding.scss @@ -0,0 +1,29 @@ +.container { + padding: 0 ($column-gutter * 2) * 1px; + max-width: $container-max-width * 1px; + margin: 0 auto; + @extend .clearfix; +} + +.row { + @include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; } + @extend .clearfix; +} + +.col { + display: block; + float: none; + width: auto; + @include breakpoint(tablet-portrait) { + float: left; + margin-left: ($column-gutter / $container-max-width) * 100%; + } +} + +@for $i from 1 through $column-count { + .col#{$i} { + @include breakpoint(tablet-portrait) { + @include col-width($i); + } + } +} \ No newline at end of file diff --git a/_/scss/_tables.scss b/_/scss/objects/_tables.scss old mode 100644 new mode 100755 similarity index 70% rename from _/scss/_tables.scss rename to _/scss/objects/_tables.scss index 2d99316..faa77c6 --- a/_/scss/_tables.scss +++ b/_/scss/objects/_tables.scss @@ -7,8 +7,8 @@ .table td { text-align: left; vertical-align: top; - border-top: 1px solid $tableBorderColour; - padding: ($marginBottom / 2) * 1px 10px; + border-top: 1px solid $table-border-colour; + padding: ($base-margin-bottom / 2) * 1px 10px; } .table th { diff --git a/_/scss/style.scss b/_/scss/style.scss old mode 100644 new mode 100755 index 46230b5..d81be57 --- a/_/scss/style.scss +++ b/_/scss/style.scss @@ -1,24 +1,23 @@ /* Theme Name: Bare Bones Theme URI: http://github.com/mikefrancis/barebones -Author: Mike Francis +Author: Mike Francis */ // Variables, Mixins -@import "variables"; -@import "mixins"; +@import 'vars'; +@import 'generic/mixins'; -// Base +// Generic -@import "reset"; -@import "normalise"; -@import "utilities"; +@import 'generic/reset'; +@import 'generic/normalise'; +@import 'generic/utilities'; -// Main +// Objects -@import "scaffolding"; -@import "nav"; -@import "tables"; -@import "forms"; -//@import "icons"; Still in development \ No newline at end of file +@import 'objects/scaffolding'; +@import 'objects/nav'; +@import 'objects/tables'; +@import 'objects/forms'; \ No newline at end of file diff --git a/style.css b/style.css index 15ffee4..097f7f6 100644 --- a/style.css +++ b/style.css @@ -1,335 +1,270 @@ /* Theme Name: Bare Bones Theme URI: http://github.com/mikefrancis/barebones -Author: Mike Francis +Author: Mike Francis */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; - padding: 0; -} + padding: 0; } table { border-collapse: collapse; - border-spacing: 0; -} + border-spacing: 0; } fieldset, img { - border: 0; -} + border: 0; } address, caption, cite, dfn, th, var { font-style: normal; - font-weight: normal; -} + font-weight: normal; } caption, th { - text-align: left; -} + text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; - font-weight: bold; -} + font-weight: bold; } q:before, q:after { - content: ''; -} + content: ''; } abbr, acronym { - border: 0; -} + border: 0; } html { background-color: white; color: #333333; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 0.875em; - line-height: 1.5; -} + font: 0.875em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset { - margin-bottom: 21px; -} + margin-bottom: 21px; } h1 { font-size: 2em; - line-height: 0.75em; -} + line-height: 0.75em; } h2 { font-size: 1.71429em; - line-height: 0.875em; -} + line-height: 0.875em; } h3 { font-size: 1.5em; - line-height: 1em; -} + line-height: 1em; } h4 { font-size: 1.28571em; - line-height: 1.16667em; -} + line-height: 1.16667em; } h5 { font-size: 1.14286em; - line-height: 1.3125em; -} + line-height: 1.3125em; } h6 { font-size: 1.14286em; - line-height: 1.3125em; -} + line-height: 1.3125em; } ul, ol { - margin-left: 24px; -} + margin-left: 24px; } ul ul, ol ol { - margin-bottom: 0; -} + margin-bottom: 0; } + +img { + display: block; + max-width: 100%; + height: auto; } .alignleft { - float: left; -} + float: left; } img.alignleft { - margin-right: 20px; -} + margin-right: 20px; } .alignright { - float: right; -} + float: right; } img.alignright { - margin-left: 20px; -} + margin-left: 20px; } .aligncenter { display: block; margin-left: auto; - margin-right: auto; -} + margin-right: auto; } + +.clearfix, .container, .row, .controls { + *zoom: 1; } + .clearfix:before, .container:before, .row:before, .controls:before, .clearfix:after, .container:after, .row:after, .controls:after { + content: " "; + display: table; } + .clearfix:after, .container:after, .row:after, .controls:after { + clear: both; } .container { - width: 940px; - margin-left: auto; - margin-right: auto; padding: 0 40px; -} -@media (max-width: 767px) { - .container { - width: auto; - } -} + max-width: 1200px; + margin: 0 auto; } -@media (max-width: 767px) { - .container-fluid { - padding: 0; - } -} - -.row { - margin-left: -20px; - *zoom: 1; -} -@media (max-width: 767px) { +@media (min-width: 768px) { .row { - margin-left: 0; - } -} - -.row:before, -.row:after { - display: table; - line-height: 0; - content: ""; -} - -.row:after { - clear: both; -} - -@media (max-width: 767px) { - .row-fluid { - padding: 0; - } -} + margin-left: -1.66667%; } } .col { - display: inline-block; - *display: inline; - float: left; - margin-left: 20px; -} -.col img { - width: 100%; -} -@media (max-width: 767px) { - .col { - display: block; - float: none; - width: 100%; - margin-left: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } -} + display: block; + float: none; + width: auto; } + @media (min-width: 768px) { + .col { + float: left; + margin-left: 1.66667%; } } -.col1 { - width: 60px; -} +@media (min-width: 768px) { + .col1 { + width: 6.66667%; } } -.col2 { - width: 140px; -} +@media (min-width: 768px) { + .col2 { + width: 15.0%; } } -.col3 { - width: 220px; -} +@media (min-width: 768px) { + .col3 { + width: 23.33333%; } } -.col4 { - width: 300px; -} +@media (min-width: 768px) { + .col4 { + width: 31.66667%; } } -.col5 { - width: 380px; -} +@media (min-width: 768px) { + .col5 { + width: 40.0%; } } -.col6 { - width: 460px; -} +@media (min-width: 768px) { + .col6 { + width: 48.33333%; } } -.col7 { - width: 540px; -} +@media (min-width: 768px) { + .col7 { + width: 56.66667%; } } -.col8 { - width: 620px; -} +@media (min-width: 768px) { + .col8 { + width: 65%; } } -.col9 { - width: 700px; -} +@media (min-width: 768px) { + .col9 { + width: 73.33333%; } } -.col10 { - width: 780px; -} +@media (min-width: 768px) { + .col10 { + width: 81.66667%; } } -.col11 { - width: 860px; -} +@media (min-width: 768px) { + .col11 { + width: 90%; } } -.col12 { - width: 940px; -} +@media (min-width: 768px) { + .col12 { + width: 98.33333%; } } .nav { list-style: none; - margin-left: 0; -} + margin-left: 0; } .nav > li, .nav > li > a { display: inline-block; - *display: inline; -} + *display: inline; } .nav-list { - border: solid 1px #ddd; + border: solid 1px #dddddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); -} + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } .nav-list > li, .nav-list > li > a { - display: block; -} + display: block; } .nav-list > li { - border-bottom: solid 1px #ddd; -} + border-bottom: solid 1px #dddddd; } .nav-list > li:last-child { - border-bottom: none; -} + border-bottom: none; } .nav-list > li > a { padding: 10px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} + transition: all 0.2s ease-out; } .nav-list > li > a:hover { - background-color: #fafafa; -} + background-color: #fafafa; } .table { width: 100%; - border-collapse: collapse; -} + border-collapse: collapse; } .table th, .table td { text-align: left; vertical-align: top; border-top: 1px solid #dddddd; - padding: 10.5px 10px; -} + padding: 10.5px 10px; } .table th { font-weight: bold; - border-top: 0; -} + border-top: 0; } .table thead th { - vertical-align: bottom; -} + vertical-align: bottom; } input, select, textarea, button { display: inline-block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; - line-height: marginBottompx; - color: #222; - padding: 9.5px; - background-color: white; + line-height: 21px; + padding: 2.5px 5px; + color: #333333; + background: white; border: solid 1px #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; margin-right: 5px; -} + margin-bottom: -1px; + width: 208px; } .control-group { - margin-bottom: 21px; -} + margin-bottom: 21px; } .control-label { float: left; - width: 140px; -} + width: 140px; } .controls { - margin-left: 160px; -} + margin-left: 160px; } .btn { + cursor: pointer; display: inline-block; - background-color: #eeeeee; + background: #eeeeee; + color: #333333; + line-height: 21px; border: solid 1px #cccccc; - padding: 9.5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1); - box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1); -} + background-color: white; + background-image: -webkit-linear-gradient(white, #eeeeee); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#eeeeee)); + background-image: -moz-linear-gradient(white, #eeeeee); + background-image: -o-linear-gradient(white, #eeeeee); } + .btn:hover { + background-color: #eeeeee; + background-image: -webkit-linear-gradient(#eeeeee, white); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(white)); + background-image: -moz-linear-gradient(#eeeeee, white); + background-image: -o-linear-gradient(#eeeeee, white); }