/**
 * Homepage
 * @author David Sklar
 */

@media screen, projection {

  .hp #content {width: 960px; padding: 0; }

  .hp #crumbs {position: absolute; top: -3000px; left: -3000px; }

  .hp h2 {color: #3b3b3b; font-size: 1.6em; font-weight: normal; padding: 3px 0 3px 10px; margin: 0; margin-bottom: 10px; border-left: solid 10px #447eb3; }


  .hp .section {padding-top: 10px; margin-bottom: 10px; position: relative; background: url('../gfx/bg_section.png') 0 0 repeat-x; border-top: solid 3px #cfcfcf; clear: both; }
  .hp .section .top-right {text-transform: lowercase; position: absolute; top: 24px; right: 10px; }

  .hp .box {padding: 10px; margin-bottom: 10px; background: #e8e8e8; border: 0; overflow: hidden; }
  .hp .box h2 {padding: 0; margin-top: 0; border-left: 0; }

  .hp .box-475x150 {width: 435px; height: 110px; padding: 20px; overflow: hidden; }
  .hp .box-475x150 h3 {font-size: 1.4em; font-weight: normal; margin-top: 0; margin-bottom: 0.25em; }
  .hp .box-475x150 h3 a {text-decoration: underline; }
  .hp .box-475x150 h3 a:hover, .hp .box-475x150 h3 a:focus {text-decoration: none; }


  .hp ul.col-4 {width: 884px; padding: 0 38px; margin-bottom: 10px; position: relative; overflow: visible; }
  .hp ul.col-4 li {width: 190px;padding: 0 15px 0 16px; margin-bottom: 10px; background: url('../gfx/line_vertical_dashed-light-grey.gif') 0 0 repeat-y; }
  .hp ul.col-4 ul {width: auto; margin: 0; float: none; }
  .hp ul.col-4 ul li {width: auto; padding: 0; margin: 0; background: none; float: none; }
  .hp ul.col-4 .sticker {color: #fff; font-size: 1.1em; line-height: 1.3; width: 95px; padding: 5px 10px; position: absolute; top: 60px; left: 0; background: #cc0000; background: rgba(204, 0, 0, 0.8); display: block; overflow: hidden; cursor: pointer; }
  .hp ul.col-4 a:hover .sticker {background: #cc0000; }
  .hp ul.col-4 .sticker b {display: block; }


  /* switchboard */
  .hp ul.control li span.r-5 {width: 20px; height: 36px; position: absolute; left: -30px; z-index: 1; display: block; background: #9a9898 url('../gfx/ico_arrow_11x18.gif') no-repeat; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }


  /* slider */
  .hp .col-4 .ms-frame {width: 885px !important; }
  .hp .ms-btn-prev, .hp .ms-btn-next {width: 42px; height: 42px; position: absolute; top: 65px; z-index: 2; background: #447eb3 url('../gfx/ico_arrow_11x18.gif') 14px 12px no-repeat; border: solid 4px #fff; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; display: block; cursor: pointer; }
  .hp .ms-btn-prev {left: -25px; }
  .hp .ms-btn-next {right: -25px; background-position: 17px -88px; }
  .hp a.disabled {background-color: #bbbebe; cursor: default; }


  /* banner 730x200 */
  .hp #banner-730x200 {height: 200px; position: relative; background: #e1ecf6; overflow: hidden; }

  .hp #banner-730x200 ul.control {list-style: none; width: 180px; height: 180px; padding: 10px; margin: 0; background: #447eb3; float: right; }
  .hp #banner-730x200 ul.control li {height: 40px; padding: 10px 0; margin: 0; position: relative; background: url('../gfx/line_dashed-light-blue.gif') 0 100% repeat-x; display: block; counter-increment: item; }
  .hp #banner-730x200 ul.control li.last-child {background: none; }
  .hp #banner-730x200 ul.control li span.r-5 {top: 12px; background-color: #447eb3; background-position: 6px 9px; }
  .hp #banner-730x200 ul.control a {color: #a2bfd9; font-size: 1.3em; font-weight: bold; text-decoration: none; line-height: 1.3; display: block; overflow: hidden; }
  .hp #banner-730x200 ul.control li.set a, .hp #banner-730x200 ul.control a:hover {color: #fff; }

  .hp #banner-730x200 img {width: 730px; height: 200px; margin-bottom: 10px; display: block; }


  /* short message */
  #message {color: #000; height: 1.5em; padding: 10px; padding-left: 35px; position: relative; overflow: hidden; }
  #message div {margin: 0 10px; }
  #message span.ico {width: 12px; height: 24px; position: absolute; top: 0; left: 20px; background: url('../gfx/ico.png?1332399742') -48px -50px; display: block; }


  /* buy of the week */
  #buy-of-week {width: 720px; position: relative; background: #e1ecf6; float: right; overflow: visible; }

  #buy-of-week h2.red {font-size: 2.0em; padding: 0 10px; position: absolute; top: -5px; left: 40px; z-index: 1; background: #fff; }

  #buy-of-week ul.control {width: 260px; padding: 0; margin: 0; position: absolute; right: 10px; bottom: 10px; }
  #buy-of-week ul.control li {padding: 0; margin: 0; position: relative; background: none; }

  #buy-of-week ul.control a {color: #3b3b3b; text-decoration: none; height: 65px; padding: 10px 10px 11px 75px; position: relative; background: url('../gfx/line_dashed-blue.gif') 0 100% repeat-x; display: block; }
  #buy-of-week ul.control li.first-child a {padding-top: 0; }
  #buy-of-week ul.control li.last-child a {padding-bottom: 0; background: none; }

  #buy-of-week ul.control li span.r-5 {top: 25px; background-color: #e1ecf6; background-position: 6px -191px; }
  #buy-of-week ul.control li.first-child span.r-5 {top: 15px; }

  #buy-of-week ul.control strong {height: 2.8em; font-weight: normal; line-height: 1.35; display: inline-block; overflow: hidden; }
  #buy-of-week ul.control .price, #buy-of-week ul.control .discount {font-size: 1.2em; }
  #buy-of-week ul.control .discount {color: #447eb3; font-weight: bold; font-style: normal; padding-left: 0.5em; }

  #buy-of-week ul.control .i-box {width: 61px; height: 61px; position: absolute; top: 10px; left: 0; background: #fff center no-repeat; border: solid 2px #bbbebe; display: block; overflow: hidden; }
  #buy-of-week ul.control a:hover .i-box, #buy-of-week ul.control a:focus .i-box, #buy-of-week ul.control li.set .i-box {border-color: #447eb3; }
  #buy-of-week ul.control li.first-child .i-box {top: 0; }

  #buy-of-week .p-list, #buy-of-week .p-list li {width: 430px; height: 217px; }

  #buy-of-week .p-list {font-size: 1.0em; padding: 10px; margin: 0; background: #fff; }
  #buy-of-week .p-list li {padding: 0; margin: 0; margin-bottom: 10px; border: 0; /* background: orange; */ }
  #buy-of-week .p-list h3 {font-size: 1.35em; line-height: 1.35; height: 40px; padding-top: 15px; margin: 0; /* background: pink; */ }
  #buy-of-week .p-list h3 a {height: 1.4em; overflow: hidden; /* background: silver; */ }

  #buy-of-week .p-list .i-box { float: left; }
  #buy-of-week .p-list .i-box a {width: 235px; height: 160px; overflow: hidden; /* background: red; */ }

  #buy-of-week .p-list .flr {font-weight: bold; line-height: 1.5; width: 175px; position: static; /* background: green; */ }
  #buy-of-week .p-list .flr i.th {font-style: normal; width: 75px; display: inline-block; }
  #buy-of-week .p-list .flr span.td {width: 60px; text-align: right; display: inline-block; }
  #buy-of-week .p-list .flr b.price {color: #cc0000; font-size: 1.0em; line-height: 1.0; top: 5px; }
  #buy-of-week .p-list .flr span.big {color: #000; font-size: 2.0em; margin-bottom: -0.25em; display: block; }
  
  #buy-of-week .p-list form { width: auto; height: auto; margin-top: -5px; float: none; }
  
  #buy-of-week .btn-red {width: auto; padding-right: 10px; padding-left: 10px; position: static; }

  #buy-of-week span.sticker {color: #fff; font-size: 2.1em; font-weight: normal; line-height: 1.25; letter-spacing: -1px; text-align: center; text-transform: lowercase; width: 80px; height: auto; padding: 5px; top: 50px; top: 0; left: 0; background: #447eb3; }
  #buy-of-week span.sticker b {color: #fff; position: static; }

  #buy-of-week span.sticker {-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.35); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.35); box-shadow: 0 1px 5px rgba(0,0,0,0.35); }

  #buy-of-week .countdown {padding: 0 10px; margin: 0; position: absolute; bottom: -0.3em; left: 40px; background: #fff; }


  /* social icons */
  /*
  #buy-of-week div.networks {width: 179px; padding-top: 5px; overflow: hidden; }
  #buy-of-week span.network {height: 25px; margin-right: 5px; float: left; overflow: hidden; }

  #buy-of-week span.facebook {width: 45px; }
  #buy-of-week span.twitter {width: 58px; }
  #buy-of-week span.plusone {width: 32px; }
  */


  /* stats */
  #stats {line-height: 1.35; width: 190px; height: 237px; padding: 10px; background: #e8e8e8; border: 0; overflow: hidden; clear: none; }
  #stats ul, #stats li {padding: 0; margin: 0; }
  #stats li {padding-bottom: 11px; padding-left: 10px; margin-bottom: 10px; background: url('../gfx/line_dashed-light-grey.gif') 0 100% repeat-x; }
  #stats h3 {font-size: 2.0em; font-weight: normal; line-height: 1.0; padding-right: 30px; margin: 0; position: relative; }
  #stats h3:after {content: ''; width: 26px; height: 26px; position: absolute; top: 0; right: 0; display: block; background: url('../gfx/ico.png?1332399742') -100px -50px no-repeat; overflow: hidden; }
  #stats h3.i-2:after {background-position: -126px -50px; }
  #stats h3.i-3:after {background-position: -152px -50px; }

  #stats a {text-decoration: none; }
  #stats a:hover, #stats a:focus {text-decoration: underline; }

  #stats div {display: inline; }


  /* guide */
  #guide {/* height: 18.5em;  */}
  #guide li {height: 16.8em; margin: 0; margin-bottom: 3.5em; }

  #guide h3 {margin-top: 0; margin-bottom: 5px; }
  #guide h3 a {height: 100px; position: relative; background: url('../img/guide/g_homepage.jpg?1341911746'); border: solid 5px #bbbebe; }
  #guide h3 a:hover, #guide h3 a:focus {text-decoration: none; border-color: #447eb3; }

  #guide .g-1  h3 a {background-position: 0 0; }
  #guide .g-2  h3 a {background-position: -180px 0; }
  #guide .g-3  h3 a {background-position: -360px 0; }
  #guide .g-4  h3 a {background-position: -540px 0; }
  #guide .g-5  h3 a {background-position: -720px 0; }
  #guide .g-6  h3 a {background-position: -900px 0; }
  #guide .g-7  h3 a {background-position: -1080px 0; }
  #guide .g-8  h3 a {background-position: -1260px 0; }
  #guide .g-9  h3 a {background-position: -1440px 0; }
  #guide .g-10 h3 a {background-position: -1620px 0; }
  #guide .g-11 h3 a {background-position: -1800px 0; }
  #guide .g-12 h3 a {background-position: -1980px 0; }
  #guide .g-13 h3 a {background-position: -2160px 0; }
  #guide .g-14 h3 a {background-position: -2340px 0; }
  #guide .g-15 h3 a {background-position: -2520px 0; }
  #guide .g-16 h3 a {background-position: -2700px 0; }
  #guide .g-17 h3 a {background-position: -2880px 0; }
  #guide .g-18 h3 a {background-position: -3060px 0; }
  #guide .g-19 h3 a {background-position: -3240px 0; }

  #guide .sticker {font-size: 1.0em; font-weight: normal; font-style: normal; top: 30px; left: -5px; }

  #guide a {color: #000; text-decoration: none; display: block; }
  #guide a:hover, #guide a:focus {text-decoration: underline; }

  #guide li ul {height: 7.9em; }
  #guide li li {height: auto; margin-bottom: 0; padding-left: 10px; background: url('../gfx/ico_bull.gif?1308318368') -6000px 4px no-repeat; }

  #guide p.m-0 {padding-top: 7px; background: url('../gfx/line_dashed-light-grey.gif') 0 0 repeat-x; }

  /* 4 items in list */
  #guide li {height: 15.3em; margin-bottom: 3.5em; }
  #guide li ul {height: 6.4em; }


  #stores {margin: 0 20px; }


  /* top products */
  #top-products {/* height: 16.5em; */ }
  #top-products li {height: 16.5em; margin: 0; margin-bottom: 10px; border: 0; }
  #top-products a.i-box { float: left; text-align: center; text-decoration: none; width: 100%; height: 135px; position: relative; }

  #top-products .sticker {font-size: 1.4em; text-align: left; height: auto; }


  /* stores */
  #stores { margin-right: 0; margin-bottom: 0; overflow: hidden; }
  #stores li {padding-left: 0; margin-bottom: 2px; }
  #stores address {min-height: 7.0em; background: url('../gfx/line_dashed-light-grey.gif') 0 100% repeat-x; }
  #stores address.m-0 {min-height: 5.0em; }
  #stores address .ico {color: #000; font-weight: bold; padding-left: 15px; position: relative; }
  #stores address .ico:after {content: ''; width: 10px; height: 10px; position: absolute; top: 2px; left: 0; background: url('../gfx/ico.png?1332399742') 0 -89px no-repeat; }

  .hp img.mr-20 {margin-top: -3px; border: solid 3px #bbbebe; }



  /* msie 8,9
  ------------------------------------------- */

  /* social icons */
  /*
  .ie #buy-of-week span.facebook {width: 47px; }
  .ie #buy-of-week span.twitter {width: 52px; }
  .ie #buy-of-week span.plusone {width: 32px; }
  */



} /* end: @media screen */



/* opera
------------------------------------------- */
@media screen and (-o-min-device-pixel-ratio: 1/1), projection and (-o-min-device-pixel-ratio: 1/1) {

  #buy-of-week h2.red {top: -4px; }
  #buy-of-week .p-list .flr b.price {line-height: 1.5; }
  #buy-of-week .p-list .flr span.big {margin-bottom: -0.75em; }

  /*
  #buy-of-week span.twitter {width: 59px; }
  */

  .hp .ms-btn-prev, .hp .ms-btn-next {width: 42px; height: 42px; top: 69px; border: 0; box-shadow: 0 0 -4px 4px #fff; }
  .hp .ms-btn-prev {left: -21px; }
  .hp .ms-btn-next {right: -21px; }

}



/* webkit
------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio: 0), projection and (-webkit-min-device-pixel-ratio: 0) {

  #buy-of-week h2.red {top: -4px; }
  #buy-of-week .p-list .flr b.price {line-height: 1.5; }
  #buy-of-week .p-list .flr span.big {margin-bottom: -0.5em; }

  /*
  #buy-of-week span.twitter {width: 59px; }
  */

  .hp .ms-btn-prev, .hp .ms-btn-next {-webkit-background-clip: padding-box; background-clip: content-box; }

}