@charset "UTF-8"; /* BEGIN MVC Story_msthaves_210_HERO_C */ /* Template adjustments START. */ .x3y0, x3y1, x0y2 w3, x3y2 {display: none;} .category-template > div {border-bottom: none;} #Main .storyTemplate1.category-template.l1l2 .hero > div, #Main .utilityTemplate.category-template.l1l2 .x0y0 > div, #Main .comboTemplate1.category-template .x0y0.w3.h2, #Main .utilityTemplate.category-template .x0y0.w2.h2, #Main .utilityTemplate.category-template.l1l2 .x2y1 > div, #Main .storyTemplate1.category-template.l1l2 .x0y2 > div, #Main .storyTemplate1.category-template.l1l2 .x2y2 > div, #Main .utilityTemplate.category-template .x2y0 > div, #Main .utilityTemplate.category-template .x2y1 > div, #Main .storyTemplate1.category-template .hero > div {border-right: none !important;} /* Template adjustments END. */ #Story_msthaves_210_HERO_C {height: 596px; left: 0px; position: relative; top: -108px; width: 604px; z-index: 601;} #Story_msthaves_210_HERO_C .imgFrame {background-image: url(http://static.targetimg1.com/2013/iH/02/15musthaves/0210/images/Story_msthaves_210_HERO_C.png); background-repeat: no-repeat; height: 63px; left: 10px; position: absolute; top: -63px; width: 197px;} /*Text positioning and adjustments. */ #Story_msthaves_210_HERO_C .textContainer {left: 570px; position: absolute; top: 310px; width: 260px; z-index: 602;} #Story_msthaves_210_HERO_C .textContainer h2 {background-color: #ff75a6; color: #000000; font-size: 13px; font-weight: bold; height: 15px; padding: 2px 0; text-align: center; width: 92px;} #Story_msthaves_210_HERO_C .textContainer .main {color: #000000; font-size: 35px; font-weight: bold; letter-spacing: -1px; position: relative;} #Story_msthaves_210_HERO_C .textContainer .gray {color: #999999; font-size: 19px; font-weight: bold; line-height: 22px; position: relative; top: 5px;} #Story_msthaves_210_HERO_C .textContainer span {display:block !important;} /* Image positioning and list adjustments. */ #Story_msthaves_210_HERO_C .imgContainer {height: 617px; margin-left: 10px; margin-top: 86px; position: relative; width: 767px;} #Story_msthaves_210_HERO_C #musthaves {width: 792px; height: 616px;} /* First image call out - this is used for primary image view and the repositioning of the sprite hover state. */ #Story_msthaves_210_HERO_C #musthaves li a { background-image: url(http://static.targetimg1.com/2013/iH/02/15musthaves/0210/images/Story_msthaves_210_HERO_C.jpg);background-repeat: no-repeat; height: 149px; width: 129px; text-indent: -99999px;} /* Second image call out - this is used for the jquery fade-in/fade-out function. This image is a secondary images that is placed on top of the primaray image, hidden, and turned on/off on mouseover state. This has to be attached to a tag for the jquery function to work with sprites. */ #Story_msthaves_210_HERO_C #musthaves li a span { background-image: url(http://static.targetimg1.com/2013/iH/02/15musthaves/0210/images/Story_msthaves_210_HERO_C.jpg); background-repeat: no-repeat; position: absolute; top: 0; left: 0; bottom: 0; right: 0;} /* Start of sprite image swapping. */ /* Sprite area row one. */ /* Instead of repeating this code in every <#Story_msthaves_210_HERO_C #musthaves li a.#>, I pulled it into it's own class state to compress css code length. */ #Story_msthaves_210_HERO_C #musthaves li a.row1 {position:absolute; height: 156px;} /* Sprite box location that will swap out. */ #Story_msthaves_210_HERO_C #musthaves li a.one {background-position: 0 0; height: 616px; width: 280px;} /* Focus is being used for accessability and it's background image repositioning must adjusted seperatily from the regular sprite repositioning setup. This is used for repositioning the background image to change what is viewed in the Sprite box. */ #Story_msthaves_210_HERO_C #musthaves li a.one:focus, #Story_msthaves_210_HERO_C #musthaves li a.one span {background-position: 0 -616px;} #Story_msthaves_210_HERO_C #musthaves li a.two {background-position: -280px 0; left: 280px;} #Story_msthaves_210_HERO_C #musthaves li a.two:focus, #Story_msthaves_210_HERO_C #musthaves li a.two span {background-position: -280px -616px;} #Story_msthaves_210_HERO_C #musthaves li a.three {background-position: -409px 0; left: 409px;} #Story_msthaves_210_HERO_C #musthaves li a.three:focus, #Story_msthaves_210_HERO_C #musthaves li a.three span {background-position: -409px -616px;} #Story_msthaves_210_HERO_C #musthaves li a.four {background-position: -538px 0; left: 538px;} #Story_msthaves_210_HERO_C #musthaves li a.four:focus, #Story_msthaves_210_HERO_C #musthaves li a.four span {background-position: -538px -616px;} #Story_msthaves_210_HERO_C #musthaves li a.five {background-position: -667px 0px; left: 667px; width: 136px;} #Story_msthaves_210_HERO_C #musthaves li a.five:focus, #Story_msthaves_210_HERO_C #musthaves li a.five span {background-position: -667px -616px;} /* Sprite area row two. */ #Story_msthaves_210_HERO_C #musthaves li a.row2 {position:absolute; top: 156px; height: 147px;} #Story_msthaves_210_HERO_C #musthaves li a.six {background-position: -280px -156px; left: 280px;} #Story_msthaves_210_HERO_C #musthaves li a.six:focus, #Story_msthaves_210_HERO_C #musthaves li a.six span {background-position: -280px -772px;} #Story_msthaves_210_HERO_C #musthaves li a.seven {background-position: -409px -156px; left: 409px;} #Story_msthaves_210_HERO_C #musthaves li a.seven:focus, #Story_msthaves_210_HERO_C #musthaves li a.seven span {background-position: -409px -772px;} #Story_msthaves_210_HERO_C #musthaves li a.eight {background-position: -538px -156px; left: 538px;} #Story_msthaves_210_HERO_C #musthaves li a.eight:focus, #Story_msthaves_210_HERO_C #musthaves li a.eight span {background-position: -538px -772px;} #Story_msthaves_210_HERO_C #musthaves li a.nine {background-position: -667px -156px; left: 667px; width: 136px;} #Story_msthaves_210_HERO_C #musthaves li a.nine:focus, #Story_msthaves_210_HERO_C #musthaves li a.nine span {background-position: -667px -772px;} /* Sprite area row three. */ #Story_msthaves_210_HERO_C #musthaves li a.row3 {position:absolute; top: 303px;} #Story_msthaves_210_HERO_C #musthaves li a.ten {background-position: -269px -303px; left: 269px; width: 162px;} #Story_msthaves_210_HERO_C #musthaves li a.ten:focus, #Story_msthaves_210_HERO_C #musthaves li a.ten span {background-position: -269px -919px;} #Story_msthaves_210_HERO_C #musthaves li a.eleven {background-position: -409px -303px; left: 409px; width: 138px;} #Story_msthaves_210_HERO_C #musthaves li a.eleven:focus, #Story_msthaves_210_HERO_C #musthaves li a.eleven span {background-position: -409px -919px;} /* Sprite area row four. */ #Story_msthaves_210_HERO_C #musthaves li a.row4 {position:absolute; top: 452px; height: 164px;} #Story_msthaves_210_HERO_C #musthaves li a.twelve {background-position: -280px -452px; left: 280px;} #Story_msthaves_210_HERO_C #musthaves li a.twelve:focus, #Story_msthaves_210_HERO_C #musthaves li a.twelve span {background-position: -280px -1068px;} #Story_msthaves_210_HERO_C #musthaves li a.thirteen {background-position: -409px -452px; left: 409px;} #Story_msthaves_210_HERO_C #musthaves li a.thirteen:focus, #Story_msthaves_210_HERO_C #musthaves li a.thirteen span {background-position: -409px -1068px;} #Story_msthaves_210_HERO_C #musthaves li a.fourteen {background-position: -538px -452px; left: 538px;} #Story_msthaves_210_HERO_C #musthaves li a.fourteen:focus, #Story_msthaves_210_HERO_C #musthaves li a.fourteen span {background-position: -538px -1068px;} #Story_msthaves_210_HERO_C #musthaves li a.fifteen {background-position: -667px -452px; left: 667px; width: 136px;} #Story_msthaves_210_HERO_C #musthaves li a.fifteen:focus, #Story_msthaves_210_HERO_C #musthaves li a.fifteen span {background-position: -667px -1068px;} /* END MVC Story_msthaves_210_HERO_C */