From b8c722f8e18d7af333e3d6b4db6982648868397f Mon Sep 17 00:00:00 2001 From: Steph Powell Date: Tue, 22 Jun 2010 13:55:04 -0600 Subject: [PATCH] Option cart form changes. Adding Google Analytics. Commenting out Thumbnails. Style changes. --- .../views/products/_option_cart_form.html.erb | 63 ++++ .../site/app/views/products/show.html.erb | 2 +- .../site/config/initializers/site.rb | 2 +- vendor/extensions/site/db/sample/trackers.yml | 3 + .../site/public/stylesheets/spreedemo.css | 321 ++++++++++++++++-- 5 files changed, 370 insertions(+), 21 deletions(-) create mode 100644 vendor/extensions/site/app/views/products/_option_cart_form.html.erb diff --git a/vendor/extensions/site/app/views/products/_option_cart_form.html.erb b/vendor/extensions/site/app/views/products/_option_cart_form.html.erb new file mode 100644 index 0000000..d598f13 --- /dev/null +++ b/vendor/extensions/site/app/views/products/_option_cart_form.html.erb @@ -0,0 +1,63 @@ +<% if @sc_matrix -%> +

Choose your color, size, and quantity:

+ + + + <% @sc_matrix['sizes'].each do |s| %> + + + <% end -%> + + <% @sc_matrix['colors'].each do |c| -%> + + + <% @sc_matrix['sizes'].each do |s| -%> + + + <% end -%> + + <% end -%> +
<%= s.presentation %>
<%= c.presentation %> + <% if @sc_matrix['variant_ids'][s.id.to_s + '_' + c.id.to_s] -%> + + <% else -%> + X + <% end -%> +
+<% else -%> + <% if @product.has_variants? %> +
+

<%= t('variants') %>

+ +
+ <% end%> +<% end -%> + +<% if @product.has_stock? || Spree::Config[:allow_backorders] %> + <%= text_field_tag (@product.has_variants? ? :quantity : "variants[#{@product.master.id}]"), + 1, :class => "title", :size => 3 %> +   + +<% else %> + <%= content_tag('strong', t('out_of_stock')) %> +<% end %> diff --git a/vendor/extensions/site/app/views/products/show.html.erb b/vendor/extensions/site/app/views/products/show.html.erb index 5386c2b..90d1627 100644 --- a/vendor/extensions/site/app/views/products/show.html.erb +++ b/vendor/extensions/site/app/views/products/show.html.erb @@ -4,7 +4,7 @@ <%= render 'image' -%>
- <%= render 'thumbnails', :product => @product -%> + <%#= render 'thumbnails', :product => @product -%>
<% hook :product_properties do %> <%= render 'properties' %> diff --git a/vendor/extensions/site/config/initializers/site.rb b/vendor/extensions/site/config/initializers/site.rb index 933526c..d80c2b2 100644 --- a/vendor/extensions/site/config/initializers/site.rb +++ b/vendor/extensions/site/config/initializers/site.rb @@ -1,5 +1,5 @@ if Preference.table_exists? - Spree::Config.set(:stylesheets => 'screen,spreedemo') + Spree::Config.set(:stylesheets => 'spreedemo') Spree::Config.set(:allow_ssl_in_production => false) Spree::Config.set(:logo => '/images/logo.png') end diff --git a/vendor/extensions/site/db/sample/trackers.yml b/vendor/extensions/site/db/sample/trackers.yml index 86c4e81..3af733e 100644 --- a/vendor/extensions/site/db/sample/trackers.yml +++ b/vendor/extensions/site/db/sample/trackers.yml @@ -1,3 +1,6 @@ tracker_1: environment: development analytics_id: test +tracker_2: + environment: production + analytics_id: UA-525312-13 diff --git a/vendor/extensions/site/public/stylesheets/spreedemo.css b/vendor/extensions/site/public/stylesheets/spreedemo.css index 07e03d9..3b3fad7 100644 --- a/vendor/extensions/site/public/stylesheets/spreedemo.css +++ b/vendor/extensions/site/public/stylesheets/spreedemo.css @@ -1,25 +1,308 @@ -body { margin: 0px; background: #435A53; } +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } +*:focus { outline: 0; } +body { line-height: 1.5em; color: black; margin-top: 0px; background: #435A53; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; color: #333333; font-size: 75%; margin: 0px; } +ol, ul { list-style: none; } +table { border-collapse: separate; border-spacing: 0; vertical-align: middle; } +caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } +q, blockquote { quotes: "" ""; } +q:before { content: ""; } +q:after { content: ""; } +blockquote:before { content: ""; } +blockquote:after { content: ""; } +img a { border: none; } +hr { background: #dddddd; color: #dddddd; clear: both; float: none; width: 100%; height: 0.1em; margin: 0 0 1.45em; border: none; } +hr.space { background: #dddddd; color: #dddddd; clear: both; float: none; width: 100%; height: 0.1em; margin: 0 0 1.45em; border: none; background: #ffffff; color: #ffffff; } +h1 { font-weight: normal; color: #222222; font-size: 3em; line-height: 1; margin-bottom: 0.5em; font-size: 2.5em; } +h1 img { margin: 0; } +h2 { font-weight: normal; color: #222222; font-size: 2em; margin-bottom: 0.75em; } +h3 { font-weight: normal; color: #222222; font-size: 1.5em; line-height: 1; margin-bottom: 1em; } +h4 { font-weight: normal; color: #222222; font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } +h5 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } +h6 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; } +h2 img { margin: 0; } +h3 img { margin: 0; } +h4 img { margin: 0; } +h5 img { margin: 0; } +h6 img { margin: 0; } +p { margin: 0 0 1.5em; } +p img.left { display: inline; float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } +p img.right { display: inline; float: right; margin: 1.5em 0 1.5em 1.5em; padding: 0; } +a { text-decoration: underline; color: #2e6ab1; } +blockquote { margin: 1.5em; color: #666666; font-style: italic; } +strong { font-weight: bold; } +em { font-style: italic; } +dfn { font-style: italic; font-weight: bold; } +sup, sub { line-height: 0; } +abbr, acronym { border-bottom: 1px dotted #666666; } +address { margin: 0 0 1.5em; font-style: italic; } +del { color: #666666; } +pre { margin: 1.5em 0; white-space: pre; } +pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } +li ul { margin: 0 1.5em; } +li ol { margin: 0 1.5em; } +ul { margin: 0 1.5em 1.5em 1.5em; list-style-type: disc; } +ol { margin: 0 1.5em 1.5em 1.5em; list-style-type: decimal; } +dl { margin: 0 0 1.5em 0; } +dl dt { font-weight: bold; } +dd { margin-left: 1.5em; } +table { margin-bottom: 1.4em; width: 100%; } +th { font-weight: bold; } +thead th { background: #c3d9ff; } +th, td, caption { padding: 4px 10px 4px 5px; } +tr.even td { background: #e5ecf9; } +tfoot { font-style: italic; } +caption { background: #eeeeee; } +form p.field { margin-bottom: 0.5em; clear: both; } +form p.field span.req { color: red; float: left; margin-left: 2px; position: relative; top: -3px; } +form p.field input[type=text] { float: left; margin: 0 5px 7px 0; } +form p.field select { float: left; margin: 0 5px 7px 0; } +form p.field.radios { line-height: 150%; } + +label { font-weight: bold; } +fieldset { margin-bottom: 1em; } +legend { font-size: 150%; font-weight: bold; margin-bottom: 0.5em; } + +.quiet { color: #666666; } +.loud { color: #111111; } +.no_margin_or_padding { margin: 0; padding: 0; } +.leftie { float: left; width: 49%; } +.rightie { float: right; width: 49%; } +.clearfix { overflow: hidden; display: inline-block; } +.clearfix { display: block; } +.nowrap { white-space: nowrap; } +.no-bullets { list-style: none; } +.inline-list { list-style-type: none; margin: 0px; padding: 0px; display: inline; } +.inline-list li { margin: 0px; padding: 0px; display: inline; } +.colborder { padding-right: 24px; margin-right: 25px; border-right: 1px solid #eeeeee; } +div.left { float: left; width: 49%; } +div.right { float: right; width: 49%; } +a { outline: none; } +body.two-col #wrapper { background-image: url(../images/wrapper-back-2.png); } +.container { width: 950px; margin: 0 auto; overflow: hidden; display: block; } +.container_bg{ width:100%; background:url(../images/tile-header.png) top left repeat-x; } + +#sidebar { display: inline; float: left; width: 150px; margin-right: 10px; padding-right: 24px; margin-right: 25px; border-right: 1px solid #eeeeee; } +#sidebar h3 { margin-bottom: 0.5em; } +body.one-col #content { display: inline; float: left; width: 950px; } +body.two-col #content { display: inline; float: left; width: 750px; } +h1 { font-size: 2.5em; } +.form-buttons, .clear { clear: both; } +input.title { width: auto; } +p.follow-all { font-size: 1.3em; text-align: center; display: block; } +p img { float: left; margin-right: 5px; vertical-align: middle; } + +.navigation-list { list-style: none; margin: 0 0 1.5em -15px; } +.navigation-list li { margin: 0; } +.navigation-list li a { cursor: pointer !important; text-decoration: none; color: #333333; display: block; line-height: 2.5em; padding-left: 20px; width: 170px; white-space: nowrap; overflow: hidden; } +.navigation-list li a:hover { background: url(../images/menu-hover.png) right center no-repeat; } +.navigation-list li.current { width: 200px; } +.navigation-list li.current a { width: 180px; background: url(../images/menu-current.png) right center no-repeat; white-space: nowrap; overflow: hidden; } +.navigation-list li.current a.root { width: 183px; } +.navigation-list a.root { color: #222222; font-size: 1.5em; text-indent: -5px; line-height: 2.2em; } + +.breadcrumbs { margin-bottom: 1em; } +.breadcrumbs ul { list-style-type: none; margin: 0px; padding: 0px; display: inline; margin: 0; padding: 0; overflow: auto; } +.breadcrumbs ul li { margin: 0px; padding: 0px; display: inline; } +.breadcrumbs ul li { line-height: 20px; color: #666666; } +.breadcrumbs ul li a { text-decoration: none; padding: 5px 7px; color: #666666; } +.breadcrumbs ul li span { text-decoration: none; padding: 5px 7px; color: #666666; } +.breadcrumbs ul li span { color: #333333; } + +div#login-bar { display: inline; } + +ul#language-bar { list-style-type: none; margin: 0px; padding: 0px; display: inline; } +ul#language-bar li { margin: 0px; padding: 0px; display: inline; } +ul#language-bar strong { font-weight: normal; } +ul#nav-bar { line-height: 50px; float: right; clear: both; font-size: 1.2em; list-style: none; margin: 0; padding: 0; } +ul#nav-bar li { float: left; margin-left: 1em; } +ul#nav-bar li.cart-indicator a { padding-right: 40px; background: transparent url(../images/cart-empty_x32.png) center right no-repeat; display: block; } +ul#nav-bar li.cart-indicator a.full { background-image: url(../images/cart-full_x32.png); } + +.pagination { padding-top: 10px; text-align: right; } +.pagination a.page { padding: 0px 5px; margin: 0px 3px; } +.pagination span.page { padding: 0px 5px; margin: 0px 3px; } +.pagination a.page { text-decoration: none; border: 1px solid #9aafe5; color: #2e6ab1; } +.pagination a.page:hover { border: 1px solid #2b66a5; color: #000000; } +.pagination a.page:active { border: 1px solid #2b66a5; color: #000000; } +.pagination a.next_page { font-weight: bold; } +.pagination span.disabled_page { border: 1px solid #929292; color: #929292; } +.pagination span.current_page { font-weight: bold; border: 1px solid; border-color: #162f54; background-color: #2e6ab1; color: #ffffff; } +.flash { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 1.3em; margin-bottom: 1em; padding: 0.8em; } +.flash.notice { background: #ccddff url(../images/shadow_top.png) 0px -50px repeat-x; color: #556699; border: 1px solid #99aacc; } +.flash.errors { background: #f4b4b4 url(../images/shadow_top.png) 0px -50px repeat-x; color: #000000; border: 1px solid #000000; } +.formError { font-size: 1.3em; margin-bottom: 1em; padding: 0.8em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #f4b4b4 url(../images/shadow_top.png) 0px -50px repeat-x; color: #000000; border: 1px solid #000000; } +.formError p { margin: 0px; } +.formError ul { margin-bottom: 0px; } +.formError h2 { font-weight: bold; font-size: 1em; margin: 0px; } +.errorExplanation { font-size: 1.3em; margin-bottom: 1em; padding: 0.8em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #f4b4b4 url(../images/shadow_top.png) 0px -50px repeat-x; color: #000000; border: 1px solid #000000; } +.errorExplanation p { margin: 0px; } +.errorExplanation ul { margin-bottom: 0px; } +.errorExplanation h2 { font-weight: bold; font-size: 1em; margin: 0px; } +.fieldWithErrors { clear: none; } +button, a.button, input.button { -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; background: #efefef url(../images/buttons/bg-button.png) center left repeat-x !important; border-style: solid; border-width: 1px !important; border-color: #dddddd #999999 #999999 #dddddd !important; -moz-outline-radius: 0.3em; color: #111111; display: inline-block; font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; font-size: 1.1em !important; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.2em; margin: 0px; overflow: visible; padding: 10px 17px; text-decoration: none; text-transform: lowercase; width: auto; height: auto; cursor: pointer; } +button.primary, a.button.primary, input.button.primary { font-weight: bold; color: #000000; } +button:hover { background-image: url(../images/buttons/bg-button-hover.png) !important; } +a.button:hover { background-image: url(../images/buttons/bg-button-hover.png) !important; } +input.button:hover { background-image: url(../images/buttons/bg-button-hover.png) !important; } +button.large, a.button.large, input.button.large { -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; font-size: 1.4em !important; line-height: 1.4em; } +button.small, a.button.small, input.button.small { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-size: 0.9em; line-height: 1.4em; padding: 5px 10px; } +button.small img { margin: 0 3px 0 0 !important; } +a.button.small img { margin: 0 3px 0 0 !important; } +input.button.small img { margin: 0 3px 0 0 !important; } +button.update img { margin-right: 7px; } +button.checkout img { margin-right: 7px; } +a.button.update img { margin-right: 7px; } +a.button.checkout img { margin-right: 7px; } +input.button.update img { margin-right: 7px; } +input.button.checkout img { margin-right: 7px; } +button img { vertical-align: middle; } +a.button img { vertical-align: middle; } +input.button img { vertical-align: middle; } +button:focus { outline: none; } +a.button:focus { outline: none; } +input.button:focus { outline: none; } +button::-moz-focus-inner { padding: 0px; border: none; } +p a.button img { margin: 0 5px 0 0; } +p button img { margin: 0 5px 0 0; } +.prices { font-weight: bold; } +.prices #product-details .prices { font-size: 1.25em; } +.price.selling { color: #2e6ab1; } +#product-details .price.selling { font-size: 1.5em; } +.price.diff { font-style: italic; font-weight: normal; color: #666666; } +.product-listing { list-style: none; margin: 2em 0px 0px 0px; padding: 0px; } +.product-listing li { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; height: 180px; width: 140px; text-align: center; float: left; margin: 10px; padding: 10px; border: 1px solid #dddddd; position: relative; } +.product-listing li a { display: block; text-decoration: none; color: #111111; } +.product-listing li a.info { position: absolute; bottom: 0px; right: 0px; padding: 5px; width: 150px; min-height: 60px; background: #ffffff url(../images/shadow_top.png) 0px -35px repeat-x; border-top: 1px solid #ffffff; } +.product-listing li a.info span { display: block; } +.product-listing li:hover { border-color: #1b1b1b; } +.product-listing li:hover a.info { background: #1b1b1b url(../images/bottom_shine.png) bottom left repeat-x; color: #ffffff; } +ul.thumbnails { margin: 0; padding: 0; list-style: none; } +ul.thumbnails li { float: left; margin-right: 5px; padding: 3px; border: 1px solid #ffffff; min-height: 50px; width: 50px; position: relative; } +ul.thumbnails li img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } +ul.thumbnails li:hover { border-color: #cccccc; } +ul.thumbnails li.selected { border-color: #999999; } + +#product-variants { margin-bottom: 1em; } +#product-variants ul { list-style: none; margin: 0; padding: 0; } +#product-images { display: inline; float: left; width: 270px; margin-right: 10px; } +#product-images h4 { padding: 6px 0px; margin: 0px; font-weight: bold; clear: both; } +#product-images #main-image { min-height: 250px; position: relative; } +#product-images #main-image img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } +#product-description { display: inline; float: left; width: 310px; margin-right: 10px; padding-right: 24px; margin-right: 25px; border-right: 1px solid #eeeeee; } +#cart-form { display: inline; float: left; width: 270px; } +#taxon-crumbs { display: inline; float: left; width: 950px; margin-right: 10px; display: block; float: right; margin-top: 20px; width: 300px; } + +dl.table-display { margin: 0; padding: 0; } +dl.table-display dt { float: left; margin: 0; padding: 5px; border-top: 1px solid #dddddd; } +dl.table-display dd { float: left; margin: 0; padding: 5px; border-top: 1px solid #dddddd; } +dl.table-display dt { width: 100px; } +dl.table-display dd { width: 180px; } + +div#subtotal { float: right; width: 49%; width: auto; text-align: left; } +table { border-collapse: collapse; } +table th { background: transparent; border-bottom: 1px solid #dddddd; } +table#cart tr td { border-bottom: 1px solid #dddddd; padding: 1em 0; } +table#cart tr#none td { border-bottom: none; } +table#cart h4 { margin-bottom: 0em; } + +/* Login or Signup */ +#signup #new-customer { display: inline; float: left; width: 470px; margin-right: 10px; } +#signup #new-customer h2 { margin-bottom: 0.25em; } +#signup #new-customer p { margin-bottom: 10px; } +#signup #new-customer p input.title { padding: 3px; margin: 0px; } +#signup #new-customer input[type=checkbox] { top: 0em; } +#login #existing-customer { display: inline; float: left; width: 470px; margin-right: 10px; } +#login #existing-customer h2 { margin-bottom: 0.25em; } +#login #existing-customer p { margin-bottom: 10px; } +#login #existing-customer p input.title { padding: 3px; margin: 0px; } +#login #existing-customer input[type=checkbox] { top: 0em; } +input.openid_url { background: #ffffff url(../images/openid-inputicon.gif) no-repeat scroll 0pt 50%; padding-left: 18px; border: 1px solid #bbbbbb; font-size: 1.5em; } + +/* Progress Steps */ +ol.progress-steps { list-style: none; margin: 0; padding: 0; line-height: 1em; font-size: 12px; } +ol.progress-steps li { margin: 0; padding: 0; list-style: none; display: block; float: left; color: #999999; background-position: top left; background-repeat: no-repeat; background-image: url(../images/step-progress/incomplete-incomplete.gif); } +ol.progress-steps li span { padding: 5px 14px 7px 24px; display: block; float: left; background-position: top right; background-repeat: no-repeat; } +ol.progress-steps li a { text-decoration: none; color: #333333; } +ol.progress-steps li.current-first span { padding-left: 14px; } +ol.progress-steps li.completed-first span { padding-left: 14px; } +ol.progress-steps li.current-first { background-image: url(../images/step-progress/current-first.gif); } +ol.progress-steps li.completed-first { background-image: url(../images/step-progress/completed-first.gif) !important; } +ol.progress-steps li.current { color: #ffffff; } +ol.progress-steps li.current-first { color: #ffffff; } +ol.progress-steps li.current-last { color: #ffffff; } +ol.progress-steps li.completed { background-image: url(../images/step-progress/completed-completed.gif); } +ol.progress-steps li.current { background-image: url(../images/step-progress/completed-current.gif); } +ol.progress-steps li.current-last { background-image: url(../images/step-progress/completed-current.gif); } +ol.progress-steps li.next { background-image: url(../images/step-progress/current-incomplete.gif); } +ol.progress-steps li.next-last { background-image: url(../images/step-progress/current-incomplete.gif); } +ol.progress-steps li.last span { background-image: url(../images/step-progress/incomplete-right.gif); } +ol.progress-steps li.next-last span { background-image: url(../images/step-progress/incomplete-right.gif); } +ol.progress-steps li.current-last span { background-image: url(../images/step-progress/current-right.gif); } + +/* Checkout */ +div#checkout { position: relative; } +div#checkout .progress-steps { position: absolute; top: 0.5em; right: 0; } +div#checkout form { background-position: top right; background-repeat: no-repeat; } +div#checkout #checkout_form_address { background-image: url("../images/steps/2.png"); } +div#checkout #checkout_form_delivery { background-image: url("../images/steps/3.png"); } +div#checkout #checkout_form_address #billing label { width: 190px; float: left; padding-right: 10px; text-align: right; } +div#checkout #checkout_form_address #billing label.error { color: red; float: left; text-align: left; display: inline-block; top: 0px; font-size: 11px; border: none; padding: 0px; width: auto; } +div#checkout #checkout_form_address #shipping label { width: 190px; float: left; padding-right: 10px; text-align: right; } +div#checkout #checkout_form_address #shipping label.error { color: red; float: left; text-align: left; display: inline-block; top: 0px; font-size: 11px; border: none; padding: 0px; width: auto; } +div#checkout #checkout_form_address #billing input { width: 304px; } +div#checkout #checkout_form_address #shipping input { width: 304px; } +div#checkout #checkout_form_address #billing select { width: 304px; } +div#checkout #checkout_form_address #shipping select { width: 304px; } +div#checkout #checkout_form_address #billing p.checkbox { padding-left: 200px; } +div#checkout #checkout_form_address #shipping p.checkbox { padding-left: 200px; } +div#checkout #checkout_form_address .form-buttons { padding-left: 200px; } +div#checkout #checkout_form_address #billing p.checkbox label { width: auto !important; float: none !important; } +div#checkout #checkout_form_address #shipping p.checkbox label { width: auto !important; float: none !important; } +div#checkout #checkout_form_address #billing p.checkbox input { width: auto !important; } +div#checkout #checkout_form_address #shipping p.checkbox input { width: auto !important; } +div#checkout #checkout_form_payment { background-image: url("../images/steps/5.png"); } +div#checkout #checkout_form_payment select { width: 75px; } +div#checkout #checkout_form_payment #payment { display: inline; float: left; width: 310px; margin-right: 10px; } +div#checkout #checkout_form_payment #order_details { display: inline; float: left; width: 470px; margin-right: 10px; } +div#checkout #payment-methods { list-style: none; display: block; padding: 0; margin: 0; width: 720px; } +div#checkout #payment-methods li { display: block; display: inline; float: left; width: 190px; margin-right: 10px; } +div#checkout #payment-methods li.last { display: inline; float: left; width: 190px; } +div#checkout #checkout-summary { background-color: #c3c9df; float: right; margin-top: 10px; padding: 20px; width: 180px; } + +/* Spree Demo */ + +#wrapper { background: transparent url(../images/wrapper-back.png) top center no-repeat; padding: 25px 20px 20px; position: relative; } div.wrapper { width: 950px; margin: 0px auto; padding: 20px 0px; } div.clear { clear: both; } input { border: 2px solid #FFF; } +table th { border: none; } +button, button.large, button, a.button, a.button.large, input.button, input.button.large { background: none; } + +#header { position: relative; color: #2e6ab1; clear: both; } +#header a { color: #2e6ab1; } +#header a:hover { color: #3C7DFB; } div#header { width: 100%; background: url(/images/bg.jpg); border-bottom: 1px solid #000; color: #FFF; } - div#header div#logo { float: left; width: 30%; } - div#header div#nav { float: right; width: 68%; text-align: right; } - div#header a { color: #FFF; text-decoration: none; } - div#header div#uinfo { margin-bottom: 5px; } - div#header div#ssearch { background: #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: right; width: 200px; margin-right: 4px; } - div#header input#searchsubmit { float: right; background: #A5BBB4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #A5BBB4; } -div#intro { background-color: #435A53; border: 1px solid #272D2B; border-left: 0px; border-right: 0px; } - div#intro h2 { float: left; width: 49%; color: #A5BBB4; font-size: 34px; margin-bottom: 0px; } - div#intro h3 { float: right; width: 49%; color: #A5BBB4; margin: 10px 0px 0px 0px; } - div#intro a { color: #FFF; } + div#header div#logo { float: left; width: 30%; } + div#header div#nav { float: right; width: 68%; text-align: right; } + div#header a { color: #FFF; text-decoration: none; } + div#header div#uinfo { margin-bottom: 5px; } + div#header div#ssearch { background: #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; float: right; width: 200px; margin-right: 4px; } + div#header input#searchsubmit { float: right; background: #A5BBB4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #A5BBB4; } +div#intro { background-color: #435A53; border: 1px solid #272D2B; border-left: 0px; border-right: 0px; } + div#intro h2 { float: left; width: 49%; color: #A5BBB4; font-size: 34px; margin-bottom: 0px; } + div#intro h3 { float: right; width: 49%; color: #A5BBB4; margin: 10px 0px 0px 0px; } + div#intro a { color: #FFF; } div#content { background: #A5BBB4; } + +#footer { padding-top: 2em; clear: both; } +#footer div.left { width: 37%; } +#footer div.right { width: 63%; text-align: right; } div#footer { background: #435A53; color: #A5BBB4; clear: both; } - div#footer a { color: #FFF; } - div#footer td { vertical-align: top; } - div#footer p { margin: 3px 0px; } + div#footer a { color: #FFF; } + div#footer td { vertical-align: top; } + div#footer p { margin: 3px 0px; } ul#language-bar li#parent ul { display: none; margin: 0px; } ul#language-bar li#parent strong { color: #FFF; text-decoration: underline; } @@ -28,14 +311,14 @@ ul#language-bar li#parent a { margin: 4px 2px 0px 0px; } /* Product Nav */ div.product { float: left; border: 5px solid #FFF; position: relative; height: 180px; width: 270px; margin: 0px 35px 35px 0px; background: url(/images/product_bg.jpg); } - div.product img { height: 180px; } - div.product div.img { position: absolute; top: 0px; left: 0px; z-index: 2; } - div.product div.info { position: absolute; top: 0px; left: 0px; z-index: 1; text-align: center; background: #FFF; } - div.product div.info a { text-decoration: none; color: #000; font-weight: bold; } + div.product img { height: 180px; } + div.product div.img { position: absolute; top: 0px; left: 0px; z-index: 2; } + div.product div.info { position: absolute; top: 0px; left: 0px; z-index: 1; text-align: center; background: #FFF; } + div.product div.info a { text-decoration: none; color: #000; font-weight: bold; } /* Cart */ div#content form { background: #FFF; padding: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } -div#content form input[type="text"], div#content form input[type="password"] { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #D5F3EA; padding: 3px; } +div#content form input[type="text"], div#content form input[type="password"] { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #D5F3EA; padding: 3px; } /* Product */ div#product div.left { float: left; width: 500px; }