/* Created: CU for HaySubs home pages */

/* NOTE:
 * Styling in this file is split into three areas:
 * Welcome Area
 * Hot Offers
 * Magazine area
 */

/* NOTE: styling for the hot offers area is done with absolute positioning
 * for the pagination area and next/previous buttons.
 * By default, the buttons will be hidden, and activated if javascript
 * is enabled (via javascript).
 */

@media screen {
	
/* ----------------------- */
/* --- generic styling --- */
/* ----------------------- */

#homeContent h2 {
	color:#180f5e;
	font-weight: 700;
	margin-bottom: 11px;
}
	
/* -------------------- */
/* welcome area styling */
/* -------------------- */
#welcomeArea {
	overflow: hidden;
	background: url(/_images/home/welcomeBg.gif) #f1f1f1 no-repeat top left;
	padding: 15px;
	margin: 9px 0 23px 0;
}

	#welcomeArea h2 {
		font-size: 2em;
		font-weight: 400;
	}
/* ------------------ */
/* hot offers styling */
/* ------------------ */
#hotOffers {/* top rounded corner styling */
	overflow: hidden;
	background: url(/_images/home/hotOffersTopBorder.gif) no-repeat top left;
	width: 632px;
	position: relative;
}

	#hotOffers .bottomGraphic { /* bottom rounded corner styling */
		background: url(/_images/home/hotOffersBottomBorder.gif) no-repeat bottom left;
		overflow: hidden;
		display: block;
		padding: 12px 10px;
	}
	
	#hotOffers .hide{
		display: none;
	}
	
/* styling for hot offers title and pagination area */
#hotOffers .titleNav {
	float: left;
	padding-bottom: 5px;
	background: url(/_images/home/hotOffersGradient.gif) no-repeat left bottom;
	
	/* positioning for hot offers navigation */
	position: absolute;
	top: 12px;
	left: 18px;
	z-index: 10;
}
	
	#hotOffers .titleNav h3 {
		text-indent: -5000px;
		height: 21px;
		width: 122px;
		background: url(/_images/home/hotOffersTitle.gif) no-repeat top left;
		float: left;
		margin-right: 25px;
	}
		
	#hotOffers .titleNav ul {
		float: left;
	}
	
		#hotOffers .titleNav ul li {
			float: left;
			margin-right: 4px;
		}
	
		#hotOffers .titleNav ul li a {
			font-size: 1.3em;
			font-weight: 700;
			display: block;
			padding: 2px 5px;
			text-decoration: none;
		}
			
			#hotOffers .titleNav ul li a:link, 
			#hotOffers .titleNav ul li a:visited {
				color: #686868;
				border: 1px solid #c3c3c3;
				background-color: #e3e3e3;
			}
			
			#hotOffers .titleNav ul li a:hover,
			#hotOffers .titleNav ul li.selected a:link,
			#hotOffers .titleNav ul li.selected a:visited {
				color: #43424e;
				border: 1px solid #d8d8d8;
				background-color: #918fa9;
			}


/* styling for the navigation buttons */
.hotOfferContent {
	background:#fff; /*otherwise ie6 goes nuts with the font - http://icant.co.uk/sandbox/msieopacityissue/ */
}	

#prev {
	display: block; 
	height: 160px; 
	width: 23px; 
	background: url(/_images/hotOffersArrows.gif) no-repeat 0 0;
	text-indent: -5000px;
	
	/* positioning of previous button */
	position: absolute;
	left: 12px;
	top: 51px;
	z-index: 11;
}		

#prev:hover {
	background-position: 0 -160px;
}

#next {
	display: block; 
	height: 200px; 
	width: 25px; 
	background: url(/_images/hotOffersArrows.gif) no-repeat -23px 0;
	text-indent: -5000px;
	
	/* positioning of next button */
	position: absolute;
	right: 10px;
	top: 11px;
	z-index: 12;
}	

#next:hover {
	background-position: -23px -200px;
}
/* styling for magazine image */			
#hotOffers a img {
	float: right;
	margin-right: 43px;/* apply in jquery */
}
	

/* styling for magazine copy and pricing area */
#hotOffers .magHotOfferInfo {
	overflow:hidden;
	margin-left: 39px;/* apply in jquery */
}

	#hotOffers .magHotOfferInfo h4 {
		font-size: 2em;
		font-weight: 700;
		margin-bottom: 10px;
		padding-top:2em;
	}

		#hotOffers .magHotOfferInfo h4 a {
			text-decoration: underline;
		}

#hotOffers .magHotOfferInfo p {
	margin-bottom: 10px;
}

	#hotOffers .magHotOfferInfo p.titleDesc {
		font-weight: bold;
	}
/* styling for magazine pricing information */
#hotOffers .magHotOfferInfo dl {
	overflow: hidden;
	margin-bottom: 15px;
}
	
	#hotOffers .magHotOfferInfo dt {
		font-weight: 700;
		font-size: 1.8em;
		display: inline;
	}

	#hotOffers .magHotOfferInfo dd.promo {
		font-weight: 700;
		font-size:2.7em;
		display:inline;
		margin-right: 20px;
	}
				
	#hotOffers .magHotOfferInfo dd {
		font-size: 1.2em;
		display: inline;
	}
		
		#hotOffers .magHotOfferInfo dd span {
			font-weight: 700;
		}
	
	
/* --------------------- */
/* magazine area styling */
/* --------------------- */	
#magazines {
	border: 1px solid #e1e0ea;
	/*overflow: hidden;*/
	padding: 15px;
}

	#magazines h2 {
		font-size: 1.8em;
	}

	#magazines div.row {
		overflow: visible;
	}
	
	#magazines div.mag {
		float: left;
		margin: 0 15px 0 0;
		position: relative; /* used for absolute positioning of promo pricing */
		width: 142px;
	}
	
	#magazines div.last {
		margin: 0;	
	}
	
	#magazines div.mag img.magazineImage{
		width:142px; /*fix the width of the mag cover so we can display larger ones on popup*/
	}
		
		
/* styling for magazine price and info */

#magazines div.mag p {
	font-size: 1em;
}

#magazines div.mag p a {
	font-size: 1.4em;
}

#magazines div.mag p span {
	display: block;
	margin-top: 4px;
	font-size: 1.1em;
	color: #666666;
}
			
	#magazines div.mag p span span.price {
		display: block;
		font-weight: 700;
		color: #000000;
		font-size: 1.1em;
	}
			
			
/* ---------------------- */
/* magazine promo styling */
/* ---------------------- */		
#magazines dl.promo {
	background: url(/_images/home/promoBg.gif) #d21f26 repeat-x top left;
	border: 1px solid #b81313;
	color: #fff;
	overflow: hidden;
	width: 125px;
	position: absolute;
	top:130px;
	left: 10px;
}
			
	#magazines dl.promo dt {
		font-weight: 700;
		font-size: 1.7em;
		text-transform: uppercase;
		margin: 5px 0 5px 5px;
		float: left;
	}
				
	#magazines dl.promo dd {
		font-size: 3em;	
		float: right;	
		margin: 8px 5px 5px 0;
	}
	
/* ---------------------- */
/* styling for hover area */
/* ---------------------- */
  /* magazine pop-up */

        .popup {
        	position: absolute;
        	display: none;
        	z-index: 100;
        	border-collapse: collapse;
        }
		.magazineLink{
			text-decoration:none!important;
		}
		
		#magazines .popup dl.promo{
			width: 140px;
			top:150px;
			left:10px;
		}
		
		#magazines .popup dl.promo dt{
			font-size:1.8em;
		}
		
		#magazines .popup dl.promo dd{
			font-size: 3.5em;	
		}

		.magazines span img{
			width:160px; /*to test the image popup width - verena to follow up with the exact width*/
		}
		
		 .magazines div.mag a{
			display:block;
			overflow:visible;
		 }
}