1. /* reset */
  2.  
  3. *
  4.         { padding: 0; margin: 0; font-family: Verdana, sans-serif; font-size: 1em; }
  5.        
  6. /* common */
  7.        
  8. body
  9.         { font-size: 62.50%; background: transparent url("../images/backgrounds/bottom.png") repeat-x left bottom; min-width: 976px; }
  10. .clr
  11.         { width: 100%; clear: both; }
  12.        
  13. /* background gradients and brush */
  14.        
  15. #wrapper1
  16.         { background: transparent url("../images/backgrounds/top.png") repeat-x left top; }
  17. #wrapper2
  18.         { background: transparent url("../images/backgrounds/flowers.png") no-repeat -138px bottom; }
  19. #wrapper3
  20.         { padding: 60px; width: 856px; margin: 0 auto; position: relative; }
  21.        
  22. /* main */
  23.        
  24. .homepage #main
  25.         { border: 0; background: transparent; padding: 0; }
  26. .page #main
  27.         { border: 1px solid #b3b3b3; background: #fff; padding: 2px; width: 850px; }
  28.        
  29. /* header */
  30.  
  31. #header
  32.         { height: 68px; position: relative; }
  33. #logo
  34.         { display: block; width: 305px; height: 31px; text-indent: -5000px; background: transparent url("../images/backgrounds/logo.gif") no-repeat 0 0; position: absolute; top: 17px; left: 0; }
  35. #header form
  36.         { display: block; position: absolute; left: 537px; top: 25px; width: 148px; }
  37. #header form input
  38.         { width: 118px; height: 16px; border: 1px solid #ddd; background: #fff url("../images/backgrounds/search.png") no-repeat 6px 2px; font-size: 1.2em; padding: 2px 2px 2px 28px; }
  39. #cart
  40.         { display: block; width: 117px; height: 48px; position: absolute; top: 10px; right: 0; background: transparent url("../images/backgrounds/cart.gif") no-repeat 0 0; text-indent: -5000px; }
  41. #cart:hover
  42.         { background-position: left bottom; }
  43.        
  44. /* homepage header */
  45.  
  46. #homepage_header
  47.         { height: 333px; border: 1px solid #ddd; position: relative; }
  48. #homepage_header #hh_img
  49.         { position: absolute; top: -25px; left: 0; width: 854px; height: 311px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat; }
  50. #homepage_header #hh_link
  51.         { display: block; position: absolute; width: 854px; height: 286px; top: 0; left: 0; z-index: 100; }
  52. #homepage_header #hh_text
  53.         { font-size: 1.6em; color: #fff; position: absolute; width: 800px; height: 32px; left: 2px; bottom: 1px; background: transparent url("../images/backgrounds/redBar.png") repeat-x 0 0; text-align: center; padding: 12px 25px 0 25px; }
  54. html>body #homepage_header #hh_text
  55.         { bottom: 2px; }
  56. #homepage_header #hh_text a
  57.         { color: #fff; }
  58. #homepage_header #hh_text a:hover
  59.         { color: #000; }
  60.        
  61. /* main menu */
  62.        
  63. #main_menu
  64.         { width: 100%; padding: 10px 0 40px 0; clear: both; }
  65. #main_menu ul
  66.         { list-style-type: none; display: table-row; width: 100%; }
  67. #main_menu ul li
  68.         { text-align: center; display: table-cell; vertical-align: middle; }
  69. #main_menu ul li.link
  70.         { width: 1%; }
  71. #main_menu ul li a
  72.         { font-size: 1.6em; color: #999; text-decoration: none; white-space: nowrap; display: inline; }
  73. #main_menu ul li a:hover
  74.         { color: #000; }
  75. #main_menu ul li span
  76.         { font-size: 1.3em; color: #000; display: inline; }
  77.        
  78. /* red background main menu */
  79.        
  80. .page #main_menu
  81.         { height: 32px; width: 800px; background: transparent url("../images/backgrounds/redBar.png") repeat-x 0 0; padding: 12px 25px 0 25px; }
  82. .page #main_menu ul li a
  83.         { color: #fff; }
  84. .page #main_menu ul li a:hover
  85.         { color: #000; }
  86. .page #main_menu ul li span
  87.         { color: #fff; }
  88.        
  89. /* IE main menu */
  90.        
  91. #IEmain_menu
  92.         { width: 100%; padding: 10px 0 40px 0; clear: both; }
  93. #IEmain_menu table
  94.         { width: 100%; }
  95. #IEmain_menu td
  96.         { text-align: center; vertical-align: middle; }
  97. #IEmain_menu td.link
  98.         { width: 1%; }
  99. #IEmain_menu td a
  100.         { font-size: 1.6em; color: #999; text-decoration: none; white-space: nowrap; display: inline; }
  101. #IEmain_menu td a:hover
  102.         { color: #000; }
  103. #IEmain_menu td span
  104.         { font-size: 1.3em; color: #000; display: inline; }
  105.        
  106. /* red background IE main menu */
  107.        
  108. .page #IEmain_menu
  109.         { height: 44px; width: 800px; padding: 12px 25px 0 25px; background: transparent url("../images/backgrounds/redBar.png") repeat-x 0 0; }
  110. .page #IEmain_menu td a
  111.         { color: #fff; }
  112. .page #IEmain_menu td span
  113.         { color: #fff; }
  114. .page #IEmain_menu td a:hover
  115.         { color: #000; }
  116.        
  117. /* sidebar */
  118.  
  119. #sidebar
  120.         { width: 240px; float: left; }
  121. #sidebar h3
  122.         { font-size: 1.4em; color: #000; font-weight: normal; padding: 2px 0 7px 4px; }
  123. #sidebar h3.bestsellers
  124.         { height: 10px; width: 160px; background: transparent url("../images/backgrounds/sidebarTitles.gif") no-repeat 4px 2px; text-indent: -5000px; font-size: 0; line-height: 0; }
  125. #sidebar h3.browsebyproduct
  126.         { height: 10px; width: 160px; background: transparent url("../images/backgrounds/sidebarTitles.gif") no-repeat 4px -18px; text-indent: -5000px; font-size: 0; line-height: 0; }
  127. #sidebar ul
  128.         { list-style-type: none; padding: 0 0 11px 4px; }
  129. #sidebar ul li
  130.         { padding: 0 0 4px 0; }
  131. #sidebar ul li a
  132.         { font-size: 1.2em; color: #999; text-decoration: none; }
  133. #sidebar ul li a:hover
  134.         { color: #000; }
  135. #sidebar ul li span
  136.         { font-size: 1.2em; color: #000; padding: 0 4px 0 0; }
  137.        
  138. /* sidebar on pages other than homepage */
  139.        
  140. .page #sidebar
  141.         { width: 225px; float: left; padding: 0 0 0 15px; }
  142.        
  143. /* contents */
  144.  
  145. #contents
  146.         { width: 600px; float: right; display: inline; }
  147. .page #contents
  148.         { padding: 50px 0 0 0; }
  149.        
  150. /* one product */
  151.        
  152. #product
  153.         { height: 450px; clear: both; position: relative; padding: 12px; }
  154. #product a img
  155.         { width: 482px; height: 438px; border: 1px solid #ccc; float: left; }
  156. #product a:hover img
  157.         { border: 1px solid #000; }
  158. #product .data
  159.         { float: right; width: 306px; height: 438px; position: relative; }
  160. #product .data .inner
  161.         { width: 200px; position: absolute; left: 0; bottom: 0; }
  162. #product .data .name
  163.         { display: block; font-size: 2em; color: #000; padding: 0 0 2px 0; text-decoration: none; }
  164. #product .data .name:hover
  165.         { color: #999; }
  166. #product .data .description
  167.         { display: block; font-size: 1.6em; line-height: 1.4em; color: #999; padding: 0 0 6px 0; }
  168. #product .data .price
  169.         { display: block; font-size: 2.1em; color: #999; border-top: 1px solid #999; border-bottom: 1px solid #999; padding: 5px 0; }
  170.        
  171. #product .tocart
  172.         { display: block; width: 104px; height: 21px; background: transparent url("../images/buttons/toCartLarge.gif") no-repeat 0 0; text-indent: -5000px; outline: none; margin: 12px 0 22px 0; }
  173. #product .tocart:hover
  174.         { background-position: left bottom; }
  175.  
  176. #product .data .others
  177.         { display: block; font-size: 1.8em; color: #000; text-decoration: none; }
  178. #product .data .others:hover
  179.         { color: #999; }
  180.        
  181. #product .product_text
  182.         { display: block; width: 501px; height: 459px; background: transparent url("../images/backgrounds/ribbonLarge.gif") no-repeat right bottom; position: absolute; top: 0; left: 0; padding: 0; cursor: pointer; }
  183.        
  184. /* products list */
  185.        
  186. .product
  187.         { width: 172px; margin-right: 28px; float: left; padding: 0 0 27px 0; position: relative; display: inline; }
  188. .product a
  189.         { text-decoration: none; }
  190. .product img
  191.         { width: 170px; height: 175px; border: 1px solid #ccc; }
  192. .product span.name
  193.         { display: block; font-size: 1.4em; font-weight: bold; color: #000; padding: 18px 0 2px 0; cursor: pointer; }
  194. .product span.description
  195.         { display: block; font-size: 1.2em; line-height: 1.6em; color: #999; padding: 0 0 6px 0; }
  196. .product a:hover img
  197.         { border: 1px solid #000; }
  198. .product a:hover span.name
  199.         { color: #999; }
  200. .product a:hover span.description
  201.         { color: #000; }
  202.  
  203. .product .tocart
  204.         { display: block; width: 82px; height: 16px; background: transparent url("../images/buttons/toCart.gif") no-repeat 0 0; text-indent: -5000px; outline: none; }
  205. .product .tocart:hover
  206.         { background-position: left bottom; }
  207.        
  208. .product .discount50
  209.         { display: block; width: 174px; height: 180px; background: transparent url("../images/backgrounds/ribbon.gif") no-repeat right bottom; position: absolute; top: 0; left: 0; padding: 0; cursor: pointer; }