/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
   Custom CSS written by Ashley Berg on behalf of
   Johnson Health Tech NA 2009 - 2010
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
@import "lib/util.css";
@import "lib/product_page.css";

/* thickbox styles */
@import "lib/thickbox.css";
@import "lib/nyroModal.full.css";

/* navbar styles */
@import "lib/navbar.css";


/*
@import "../../../../../Sites/jht-media/livestrong/css/lib/navbar.css";
*/

/* webkit rules go here */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #topNavYellow ul li a.selected { /* color: #000; font-size: 200%; font-weight: bold; background-image: url(../images/topNav_arrow.png); background-repeat: no-repeat; background-position: bottom center; margin-bottom: 50px;*/ }
}

body { background-color: rgb(120, 115, 110); }
body.overlay { background-color: #fff; }

iframe#nyroModalIframe { height: 98%; }

/* page */
#page { margin: 0 auto; width: 960px; background-image: url(../images/comb_grad_bg.png); background-repeat: repeat-x; background-color: #000; background-position: bottom; position: relative; top: 0px; left: 0px; z-index: 0; }


/* header */
#header { width: 960px; height: 60px; background-image: url(../images/hf_grad.png); background-repeat: repeat-x; border-bottom: 1px solid #fc0; }
a#headerLogo { float: left; }
#logo { margin: 20px 0px 0px 20px; }
#headerNav { float: right; width: 390px; height: 60px; color: #999; margin: 10px 20px 0px 0px; text-align: right; }
.phone-numbers { color: #fc0; margin: 0 0 6px 0; font-size: 12px; }

/* top nav bar */
#navbar { position: relative; top: 0px; left: 0px; z-index: 2; }
#topNavGrey { height: 24px; background-image: url(../images/hf_grad.png); background-repeat: repeat-x; line-height: 24px; padding: 0px; }
#topNavGrey a { text-decoration: none; /*margin-right: 10px; padding-right: 20px;*/ }
#topNavGrey a.selected { background-image: url(../images/trans_grad_tb.png); background-repeat: repeat-x; background-position: top; background-color: #fc0; color: #000; font-weight: bold; }

#topNavYellow { width: 960px; height: 40px; background-image: url(../images/trans_grad_bt.png); background-repeat: repeat-x; background-position: bottom; background-color: #fc0; }
#topNavYellow ul { list-style-type: none; padding-top: 6px; }
#topNavYellow ul li { display: inline; padding: 0px 50px 0px 0px; }
#topNavYellow ul li a { font-size: 120%; color: #000; font-weight: bold; }
#topNavYellow ul li a.selected { color: #000; font-size: 160%; font-weight: bold; background-image: url(../images/topNav_arrow.png); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 16px; }

/* content */

  /* rows */
    
    /* homepage */
    #banner { float: left; width: 640px; height: 330px; }
    #banner div { float: left; margin: 0; padding: 0; }

    /**** mem day promo customization ****/
    .promo-1 { position: relative; width: 640px; height: 284px; }
    .promo-2 .a { float: left; width: 258px; height: 46px; position: relative; margin: 0; padding: 0; }
    .promo-2 .b { float: left; width: 112px; height: 46px; position: relative; margin: 0; padding: 0; }
    .promo-2 .c { float: left; width: 126px; height: 46px; position: relative; margin: 0; padding: 0; }
    .promo-2 .d { float: left; width: 144px; height: 46px; position: relative; margin: 0; padding: 0; }

    div.catLinks { float: right; width: 320px; height: 110px; }
    #homepageBottom { overflow: hidden; padding-top: 15px; }
    #homepageBottom div { float: left; text-align: center; width: 300px; margin: 5px 0px 0px 15px; }

    /* content blocks */
    #content { width: 920px; margin: 5px 20px 0px 20px; background-color: #fff; overflow: hidden; position: relative; top: 0px; left: 0px; z-index: 1; }
    #contentOverlay { margin: 20px; background-color: #fff; overflow: hidden; position: relative; top: 0px; left: 0px; z-index: 1; }
    #contentShop { width: 880px; margin: -1px 20px 0px 20px; padding: 20px; background-color: #fff; overflow: hidden; position: relative; top: 0px; left: 0px; z-index: 1; }
    #contentSupport { width: 880px; margin: -1px 20px 0px 20px; padding: 20px; background-color: #fff; overflow: hidden; position: relative; top: 0px; left: 0px; z-index: 1; }
    #contentHomepage { width: 960px; margin: 0px; padding: 0px; }
    /* remove weird 20px margin below navbar in Firefox only */
    @-moz-document url-prefix() {
        #contentHomepage { width: 960px; margin: 0px; padding: 0px; margin-top: -20px; }
    }
    
    #prodCallout1 { margin-left: 13px; }
    #prodCallout1, #signUp, #foundation { float: left; margin-top: 20px; }
    div img a { cursor: pointer; }

  /* product pages */
  div#addToCart h1 { margin-bottom: 0px; }
  a.prodVideo { display: block; background-image: url(../images/video.png); background-repeat: no-repeat; width: 150px; padding-left: 26px; height: 20px; line-height: 20px; color: #0453A4; margin: 10px 0px 0px 0px; }
  a#freeShippingLink:hover { text-decoration: none; }
  div#promo-banner-category { z-index: 2; position: absolute; top: 46px; /* top: 42px; */ left: 600px; /*display: none;*/ }
  div#promo-banner-category img { width: 320px; height: 105px; }
  div#promo-banner-product { z-index: 2; position: absolute; top: 46px; /* top: 42px; */ left: 600px; /*display: none;*/ }
  div#promo-banner-product img { width: 320px; height: 105px; }
  div#promo-banner-cart { z-index: 2; position: absolute; top: 46px; /* top: 42px; */ left: 600px; display: none; }
  div#promo-banner-cart img { width: 320px; height: 105px; }
  div#image a { display: none; }
  div#image a:first-child { display: block; }


  /* category pages */
  #category { border: 0px solid blue; margin: 4px; }
  div#category.treadBg { background-image: url(../images/lifestyle_treadmills_sm.jpg); background-repeat: no-repeat; background-position: 0px 0px; }
  div#category.ellipBg { background-image: url(../images/lifestyle_ellipticals_sm.jpg); background-repeat: no-repeat; background-position: 0px 0px; }
  div#category.bikeBg { background-image: url(../images/lifestyle_cycle_sm.jpg); background-repeat: no-repeat; background-position: 0px 0px; }
  
  #text { background-image: url(../images/dot.png); background-repeat: repeat-x; background-position: 40px 47px; padding: 0px 20px; float: right; width: 640px; }
  #textOverlay { padding: 0px 20px; }
  #text div#info { margin-top: 10px; width: 440px; float: left; }
  #text h1 { line-height: 48px; font-size: 200%; /*border-bottom: 5px dotted #ccc;*/ }
  #catProdBoxes { padding-top: 16px; }
  #catProdBoxes ul { list-style-type: none; width: 458px; float: left; margin: 0px -4px 0px 0px; }
  #catProdBoxes ul li { float: left; margin: -1px 4px 0px 0px; }
  #catProdBoxes #compare { float: right; margin: 0px; }
  .yellowBg { background-image: url(../images/yellow_grad_bg2.png); background-repeat: repeat-x; background-color: #fc0; color: #333; padding: 5px; margin: 0px; text-align: center; }

  /* new styles for category page update */
  #textCategory { background-image: url(../images/dot.png); background-repeat: repeat-x; background-position: 40px 47px; padding: 0px 10px; margin-left: 50px; min-height: 470px; }
  #textCategory h1 { line-height: 48px; font-size: 200%; color: #666; }
  div.videoBox { width: 148px; background-image: url(../images/box_grad_grey.png); background-color: #45403B; background-repeat: repeat-x; padding: 10px; margin: 5px 0px 8px 0px; text-align: center; cursor: pointer; }
  div.videoBox a { display: block; line-height: 12px; color: #fff; font-size: 90%; font-weight: bold; }
  div.videoBox a:hover { text-decoration: none; }
  div.catProdBox { float: left; background-color: #f0f0f0; width: 660px; margin: 0px 0px 10px -4px; padding: 10px 5px 5px 5px; }
  div.catProdImg { border: 0px solid green; float: left; width: 140px; }
  div.catProdDetails { border: 0px solid red; float: left; width: 360px; color: #666; }
  div.catProdDetails ul { margin: 10px 0px 10px 20px; }
  div.catProdDetails h3, div.catProdDetails a { display: inline; text-decoration: underline; }
  div.catProdDetails div.BVratings { font-size: 90%; height: 20px; line-height: 20px; margin: 10px; }
  div.catProdDetails div.BVratings img { margin-right: 20px;  float: left; }
  div.catProdDetails div.BVratings p { margin: 0px 0px 0px 0px; }
  div.catProdDetails div.BVratings a { font-size: 90%; font-weight: bold; text-decoration: none; line-height: 20px; height: 20px; margin: 0px 0px 0px 0px; }
  div.catProdPrice { border: 0px solid blue; float: left; width: 150px; }
  div.catProdPrice form input[type='submit'] { background-image: url("../images/cart_button_sm.jpg"); width: 102px; height: 24px; background-repeat: no-repeat; text-align: center; color: #fff; border: 0px; margin-left: 30px; font-weight: bold; cursor: pointer; font-size: 100%; }
  div.catProdPrice a.catProdCompare { background-image: url("../images/compare_sm.jpg"); display: block; width: 102px; height: 24px; background-repeat: no-repeat; text-align: center; color: #333; margin: 10px 0px 0px 30px; padding-top: 2px; font-weight: bold; font-size: 100%; }
  div.catProdPrice a.catProdCompare:hover { text-decoration: none; }
  div#LSlogo { background-image: url('../images/hf_grad.png'); background-repeat: repeat-x; height: 60px; width: 440px; padding: 20px; margin-left: 100px; }

  /* support pages */
  #support { margin: 4px; }
  #support div#supportBoxes { width: 683px; margin: 19px 0px 0px 0px; padding: 0px; float: right; /*border: 1px solid red;*/ }
  #support div#supportBoxes h4 { background-image: url(../images/yellow_grad_bg2.png); background-repeat: repeat-x; background-color: #fc0; /*border-bottom: 5px dotted #fff;*/ border-bottom: 1px solid #fff; color: #333; padding: 5px; margin: 0px; text-align: center; }
  #support div#supportBoxes p { padding: 10px; margin: 0px; }
  #support div#supportBoxes select { margin: 0px 0px 10px 20px; display: block; }
  #support div#supportBoxes div.box225 { float: right; width: 225px; margin-bottom: 4px; height: 180px; /*margin-right: 4px;*/ }
  #support div#supportBoxes div.box454 { float: left; width: 454px; margin-bottom: 4px; height: 280px; }
  #support div#supportBoxes div.box683 { float: right; width: 683px; margin-bottom: 4px; height: 240px; }
  #support div#supportBoxes div.box225a { float: left; width: 225px; margin-bottom: 4px; height: 380px; /*margin-right: 4px;*/ }
  #support div#supportBoxes div.box341 { float: left; width: 332px; margin-bottom: 4px; height: 80px; padding:4px; }
    /* news and press page */
    div#pressReleaseHeader { border-bottom: 2px solid #000; font-weight: bold; }
    div p.date { float: left; width: 120px; }
    div p.title { float: left; width: 400px; }
    div p.pressPdf { float: left; width: 40px; }
    div p.pressDoc { float: left; width: 40px; }
  #support div.tabs { margin: 0px 0px 40px -20px;  }
  #support div.tabs ul { list-style-type: none; margin-top: 20px; }
  #support div.tabs ul li { padding: 10px 0px; display: inline; }
  #support div.tabs ul li a { background-color: #f0f0f0; color: #333; padding: 10px; margin: 0px; text-align: center; font-size: 120%; border: 0px; }
  #support div.tabs ul li a:hover, #support div.tabs ul li a.activeSlide { background-image: url(../images/yellow_grad_bg2.png); background-repeat: repeat-x; background-color: #fc0; text-decoration: none; }
  #support div.questions { margin-bottom: 40px; border-bottom: 1px solid #ccc; }
  #support div.questions a, #support div.issues a { display: block; margin-bottom: 10px; }
  #support div.answers, #support div.solutions { margin-top: 40px; }
  #support div.solution { margin-bottom: 40px; }
  #support p.issue { border-top: 1px solid #ccc; padding-top: 10px; }
  div#troubleshooting a, div#faqs a { color: #666; }

  /* shop & account pages */

  table#cartTable { height: 120px; border: 1px solid blue; position: absolute; top: 30%; }
  table.ordertable { width: 440px; }
  table#orderConfirm th, table#orderConfirm td { border: 0px; }
  table#orderConfirm td { border: 0px; }

  #subMenu { background-color: #ccc; float: right; width: 160px; margin: 10px 0px; }
  #subMenu h4 { background-image: url(../images/yellow_grad_bg2.png); background-repeat: repeat-x; background-color: #fc0; /*border-bottom: 5px dotted #fff;*/ border-bottom: 1px solid #fff; color: #333; padding: 5px; margin: 0px; text-align: center; }
  #subMenu ul { margin: 10px; list-style-type: none; }
  #subMenu ul li { padding: 0px 0px 10px 10px; }
  #subMenu ul li a { color: #fff; padding: 5px; }
  #subMenu ul li a:hover { text-decoration: none; color: #fff; }
  #subMenu ul li a.selected { color: #000; font-weight: bold; /*background-color: #f0f0f0; border: 1px solid #fff;*/ background-image: url(../images/grayHoriz_arrow.png); background-repeat: no-repeat; background-position: center left; margin-left: -31px; padding-left: 30px; height: 50px; }
  #subMenu ul li a.completed { color: #f0f0f0; }
  
  div#profile { margin: 0px; list-style-type: none; }
  div.addressBlock { float: left; width: 210px; border: 1px solid #f0f0f0; }
  div.addressBlock h5 { /*background-image: url(../images/yellow_grad_bg2.png); background-repeat: repeat-x;*/ background-color: #f0f0f0; /*border-bottom: 5px dotted #fff;*/ border-bottom: 1px solid #fff; color: #333; padding: 5px; margin: 0px; text-align: left; }
  div.addressBlock p { padding: 10px; }
    
    /* myEmma signup */
    #emmaSignUp { display: none; }

/* Livestrong message */
p#lsMessage { color: #999; margin: 0px 0px 0px 30px; font-size: 80%; padding: 0px; line-height: 20px;  }

/* footer */
#footer { width: 960px; height: 60px; background-image: url(../images/hf_grad.png); background-repeat: repeat-x; background-color: #000; }
#footer #baseline { padding-top: 29px; }
#footer #baseline p { text-align: right; padding: 5px 10px 0px 0px;  border-top: 2px solid #fc0; font-size: 90%; color: #666; background-color: transparent; }
#bottomText { color: #c8c8c8; padding-right: 10px; margin: 0px; text-align: right; font-size: 90%; background-color: rgb(120, 115, 110); }