/*body {
  margin: 0;
  padding: 0;
  /* set the font-size to 100% for IE using conditional comments */
  /*font-size: 16px;
  line-height: 1.25;
  text-align: center;
}*/

#mainHTMLcontainer {
  position: relative;
  width: 960px;
  height: 630px;
  margin: 0 auto;
  text-align: left;
  font-family: ;}

#stories-container {
  position: absolute;
  right: 80px;
  top: 0;
  width: 208px;
  z-index:5;
}

#stories-container .innerText {
  opacity: 1;
}

#box-container{
  position: absolute;
  right: 70px;
  top: 0;
  width: 224px;
  z-index:100;
  border: 0px solid red;
}

a:focus{
outline: none;
}

.boxy{
  background-color:transparent;
  background-image:url(../images/blank.gif);
  width:344px;
  height:77px;
  position:relative;
  left:0;
  z-index:200;
  border: 0px solid green;
}

#stories-container div {
  position: relative;
  z-index: 50;
  /* total width is 208 */
  width: 206px;
  padding: 0 4px 0 0;
  /* total height is 81 */
  height: 77px;
  color: #000;
  line-height: 17px;
  display: inline-block;
  text-decoration: none;
}

.story {
	 border-top: none;
	 opacity: 0;
	 visibility: hidden; /* for IE8 and below that don't support opacity */
}

#stories-container .boxHref {
	opacity: 0;
	visibility: hidden;
}



#stories-container div:last-child {
  /* the last story needs a total height of 82 to account for the 1px bottom border. 
  we might need to do this in jquery for IE compatibility */
  height: 81px;
  border-bottom: 1px solid #000;
}

.story-title {
  font-family: ;  
  font-size: 19px;
  line-height: 19px;
  font-weight: 300;
  letter-spacing: 0px;
  font-style: normal;
  color: #000;
  display: inline-block;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  height: auto !important;
  width: 220px;
  border: 0px solid green;
}

.story-tagline {
  font-family: ;  
  font-size: 13px;
  line-height: 15px;
  font-weight: 300;
  letter-spacing: 0px;
  font-style: normal;
  color: #333333;
  display: inline-block;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 220px;
  float: none;
  border: 0px solid red;
}

#rollovers-container {
  position: absolute;
  right: 120px;
  top: 0;
  width: 224px;
  overflow: visible;
  z-index:6;
  border: 0px solid blue;
}

#rollovers-container .innerText {
  opacity: 0;
  visibility: hidden;
}

#rollovers-container div {
  position: relative;
  right: -50px;
  /* total width is 286 */
  width: 270px;
  padding: 0 8px 0 55px;
  height: 68px;
  background-color: #cb0816;
  color: #fff;
  line-height: 1;
  display: block;
  text-decoration: none;
  border: 0px solid red;
  margin: 3px 0 7px;
}

#rollovers-container div:last-child {
  /* the last rollover needs a total height of 83 to account for the 1px bottom border of the last story.
  we might need to do this in jquery for IE compatibility */
  /*height: 83px;*/
}
/*.rollover-title {
  position: relative;
  display: inline-block;
  font-family: "futura-pt",Helvetica,Microsoft JhengHei;
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .5px;
  border: 0px solid green;
}


/*.rollover-tagline {
  position: relative;
  display: inline-block;
  font-family: "futura-pt",Helvetica,Microsoft JhengHei;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: .5px;
  font-weight: 400;
  font-style: normal;
  margin-top: 2px;
  border: 0px solid red;
}*/


.rollover-tagline {
	font-size:13px;
}

#story-asset0 .story-cta-link	{
	display: none;	
}
#story-asset0 .story-cta-link1	{
	display: none;	
}
#story-asset0 .story-cta-link2	{
	display: none;	
}


#story-assets-mask {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 424px;
  height: 308px;
  overflow: hidden;
}
#story-assets-container {  
  position: relative;
}
.story-asset-container {
  position: relative;
  width: 740px;
  height: 630px;
}
a.story-cta-link, a.story-cta-link1, a.story-cta-link2, a.story-cta-link3, a.story-cta-link4 {
  font-family: ;  
  font-size: 21px;
  line-height: 21px;
  font-weight: 400;
  font-style: normal;
  border: 0px solid red;
  width: auto; 
  padding: 8px 12px 8px 12px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  z-index: 10;
}
a.story-cta-link:hover,
a.story-cta-link.hover
 {
  background-color: #f64f37
}

#.ctaBottom {
  display: none;
}

#date-container {
  position: absolute;
  left: 2px;
  top: 122px;
  width: 208px;
  font-family: ;  
  font-weight: 500;
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  color: #000;
}
#today {
  font-weight: bold;
}
#top-nav-container {
  position: relative;
  left: 2px;
  top: 5px;
}
.top-nav {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
}
.top-nav:first-child {
  display: block;
}
.top-nav-title {
  text-transform: uppercase;
  font-family: ;  
  font-size: 19px;
  font-weight: 400;
  font-style: normal;
}
.top-nav ul {
  list-style: none;
  margin-left: 0;
  margin-top: 0;
  padding: 0;
}

.top-nav li {
  margin: 3px 0 3px 0;
  opacity: 0;

}

.top-nav a {
  color: #000;
  text-transform: uppercase;
  font-family: ;  
  font-size: 12px;
  font-weight: 400;
  margin: 4px 0 4px 0;
  border: 0px solid red;
   text-decoration: none;
  font-style: normal;
}

.top-nav a:hover {
  color: #666;
}

.top-nav-arrow {
  position: relative;
  left: 4px;
}

#tout-container {
  position: absolute;
  left: 802px;
  top: 0px;
  float: left;
  width: 160px;
  height: 120px;
  z-index: 10;
  padding: 1px 0 0 0;
  background: #fff;
  border: 0px solid green;
}

#tout-container .toutTop {
  position: absolute;
  left: 5px;
  top: 0px;
  z-index: 11;
}

#tout-container .toutBottom {
  position: absolute;
  left:5px;
  top: 0px;
  z-index: 10;
}




/* Specifically for April ludlow free-shipping tout/disclaimer  */

#ludlowTout  {
  position: absolute;
  left:30px;
  top: 30px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  display:none;
}

#ludlowDisclaimer  {
  position: absolute;
  left: 15px;
  top: 15px;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  display:none;
}



/*新增項目*/
.little_pic {
	width:77px;
	z-index:80;
	position:absolute;
	top:0;
	right:17px;
}
.little_pic img {
	padding:3px 0 4px 0;
	background-color: #FFF;	
}

#box-container, #stories-container, #rollovers-container, .little_pic {
	margin-top:5px;
}

.rollover-title, .story-title {
	font-size: 16px;
	font-weight: bold;
}












/* iphone specific styles  */
@media only screen and (max-device-width: 480px) {
	.story-asset-container {  float: left; }
	.story-cta a:hover {  background-color: #000; }
}

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  .story-asset-container {  float: left; }
  .story-cta a:hover {  background-color: #000; }
}

/* ipad specific styles for portrait  */
 @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:portrait)  {
	.story-asset-container {  float: left; }
	.story-cta a:hover {  background-color: #000; }
}
/* ipad specific styles for landscape  */
 @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	.story-asset-container {  float: left; }
	.story-cta a:hover {  background-color: #000; }
}