/* Created: CU for HaySubs magazine, bundle and renewal detail pages */

/* ORDER OF STYLING IS WRITTEN AS:
 * Generic styling across three pages,
 * Magazine detail specific styling (within #magazineDetail),
 * Bundle detail specific styling (within #bundleDetail),
 * Renewal detail specific styling (within #renewalDetail)
 */

/* --------------------------------------------------------------------- */
/* generic styling used across magazine, bundle and renewal detail pages */
/* --------------------------------------------------------------------- */

/* NOTE:
 * Any changes to these elements will be reflected across all 3 page types
 * unless specified (ie. over two pages) 
 */

@media screen {

/* main image styling */
#magImage {
	float:right;	
	width: 218px;
}
 
	#magImage img {
		border: 1px solid #e1e0ea;	
		margin-bottom: 10px;
	}

/* styling for magazine pricing/renewal subscription information*/	
#productInfo {
	overflow: hidden;
	margin: 20px 0 24px 0;
	border-top: 1px solid #e1e0ea;
	border-bottom: 1px solid #e1e0ea;
	border-left: 1px solid #e1e0ea;
	background-color: #f5f5f5;
	padding: 10px;
}

	#productInfo dt {
		font-size: 1.3em;
		display: inline;
		font-weight: 700;
	}
	
	#productInfo dd {
		font-size: 1.3em;
		display: inline;
		padding-right: 10px;
	}
		
/* styling for order area table */
#orderForm {
	border-top: 1px solid #e1e0ea;
	background: url(/_images/ordertableBg.gif) #eff4f6 top left repeat-y;
	padding-top: 13px;
	margin-bottom: 30px;
}

/* styling for table area within form */
table#priceTable {
	margin: 0 auto 7px auto;
	width: 640px;
	border-collapse:collapse;
}
	
	/* styling for thead area */
	table#priceTable thead {
		background-color: #e3e8e9;	
	}
	
	table#priceTable th {
		font-size: 1.1em;
		font-weight: 700;
		padding: 3px 4px 3px 10px;		
	}
	
	/* styling for tbody area */
	table#priceTable tbody {
		background-color: #fdfefe;
	}
	
		table#priceTable tbody tr.odd {
			background-color: #fcfdfd;
		}
		
		table#priceTable tbody td {
			border-bottom: 1px solid #eff4f6;
			font-size: 1.2em;
			vertical-align: middle;
			padding: 3px 9px;
		}
			
			table#priceTable tbody td.radioButton {
				padding-left: 15px;
			}
	
			/* form styling for table dropdown area */
			table#priceTable tbody td select {
				font-size: 0.9em;
			}
		
				table#priceTable tbody td select option {
					font-size: 1em;
				}
	
	/* styling for magazine and bundle pages
	 * styling for renewals is further down in the renewals
	 * section
	 */
	#orderForm .orderButton {
		overflow: hidden;
		background: url(/_images/orderAreaButtonBg.gif) #ffffff no-repeat top left;
		padding-right: 20px;
	}
	
		#addToBasketButton {
			background: url(/_images/buttons/addToBasketButton.gif) transparent no-repeat 0 0;
			height: 33px;
			width: 137px;	
			float: right;
		}
			
		#maincol #orderForm .orderButton input.largeButton:hover,
		#maincol #orderForm .orderButton input.hoverLarge {
			background-position: 0 -33px;
		}
		
/* -------------------------------------- */
/* styling used for magazine detail pages */
/* -------------------------------------- */
	
#magazineDetail h1#magDetailTitle {
	margin-bottom: 0;
}

/* styling for magazine sample area */
#magImage p {
	border: 1px solid #e1e0ea;
	padding: 10px 10px 10px 55px; 
	background: url(/_images/iconSampleMag.gif) #f5f5f5 no-repeat 5px 2px;
}
	
	#magImage p a.magSample {
		font-weight: 700;
		color: #180f5e;
	}
	
		#magImage p a.magSample:link,
		#magImage p a.magSample:visited {
			text-decoration: none;
		}
		
		#magImage p a.magSample:hover,
		#magImage p a.magSample:active {
			text-decoration: underline;
		}
	

/* styling for magazine description */
#magDesc {
	padding: 0 10px;
	overflow: hidden;
	margin-bottom: 15px;
}

	#magDesc h2 {	
		font-size: 1.3em;
		font-weight: 700;
		margin-bottom: 10px;
	}	

		#magDesc h2.notAvailable {	
			font-size: 1.5em;
		}	
	
	#magDesc ul {
		margin-bottom: 15px;
	}
	
		#magDesc ul li {
			font-size: 1.2em;
			list-style-type: disc;
			margin-left: 15px;
			margin-bottom: 10px;
			line-height: 1.4em;
		}	

		
/* styling for bundle area */
#bundleArea {
	overflow: hidden;
	border: 1px solid #e1e0ea;
	padding: 15px;
	margin-bottom: 18px;
}

	#bundleArea h2 {
		font-weight: 700;
		color: #180f5e;
		margin-bottom: 12px;
		font-size: 1.5em;
	}
	
	/* container for each bundle */
	#bundleArea .bundlePackage {
		float: left;
		margin-bottom: 20px;
		width: 632px;
		border-bottom: 1px solid #E1E0EA;
	}
	
		#bundleArea .last {/* remove margin and border from bundle */
			border:0;
			margin-bottom:0;
		}
		
	/* container for bundle magazine images */
	#bundleArea .bundleMag {
		float: left; 
	}
		
		#bundleArea .bundleMag .row div {
			float: left;
		}
		
			/* styling for image outside of row */
			#bundleArea .bundleMag img.addition {
				margin: 0 244px 15px 244px;
			}

			/* styling of image inside of row */
			#bundleArea .bundleMag .row img.addition {
				float:left;
				margin: 91px 11px;
			}
			
	/* styling for bundle area information */	
	#bundleArea div.bundleInfo {
		float: left;
		width: 100px;
		margin:15px;
	}
	
	#bundleArea div.bundleInfo h3 {
		font-weight: 700;
		font-size: 1.4em;
	}
	
		#maincol div.bundleInfo p.promo {
			font-weight: 700;
			font-size: 1.8em;
		}
		
		div.bundleInfo p {
			margin-bottom: 15px;
			line-height: 1.2em;
		}
		
			div.bundleInfo p span {
				font-weight: 700;
			}


/* styling for related items area */
#relatedItems {
	overflow: hidden;
	border: 1px solid #e1e0ea;
	padding: 15px 15px 0 15px;
}

	#relatedItems h2 {
		font-weight: 700;
		color: #180f5e;
		margin-bottom: 12px;
		font-size: 1.5em;
	}
	
	#relatedItems div.mag {
		float: left;
		margin: 0 15px 0 0;
		width: 142px;
	}
	
	/* remove margin for last div in the row */
	#relatedItems div.last {
		margin: 0;
	}

		#relatedItems div.mag p {
			font-size: 1em;
		}
			
		#relatedItems div.mag p a {
			font-size: 1.2em;
		}
		
		#relatedItems div.mag p span {
			display: block;
			margin-top: 4px;
			color: #666666;
			font-size: 1.1em;
		}
		
			#relatedItems div.mag p span .price{
				display: block;
				color: #000000;
				font-weight: 700;
				font-size: 1.1em;
			}
			
			
/* ------------------------------------ */
/* styling used for bundle detail pages */
/* ------------------------------------ */

/* allow left spacing between images and bundle description
 * works alongside styling for #bundleDesc
 */
#bundleDetail #magImage { 
	margin-left: 10px;
}

/* styling for magazine thumbnail area */
#magThumbs {
	overflow: hidden;
}
	
	#magThumbs a img {
		display:block;
		float: left;
		margin-right:13px;
		height:77px;
		width:62px;
	}
	
		#magThumbs a.last img {/* last image thumbnail in row */
			margin:0;
		}
	
#bundleDesc {
	padding: 0 10px;
}

	#bundleDesc h2 {
		font-size: 1.7em;
		font-weight: 700;
		margin-bottom: 10px;
	}
	
	#bundleDesc h3 {
		font-size: 1.3em;
	}
	
		#bundleDesc h3 a {
			text-decoration: underline;
			font-weight: 700;
			line-height: 1.4em;
		}

	#bundleDesc ul {
		margin-bottom: 10px;
	}
	
		#bundleDesc ul li {
			font-size: 1.2em;
			list-style-type: disc;
			margin-left: 15px;
			margin-bottom: 10px;
		}	

/* ------------------------------------- */
/* styling used for renewal detail pages */
/* ------------------------------------- */			
/* styling for renewal detail page */
#renewalDetail { /* width set as no subcol is displayed on the page */
	width: 666px;
}

	#maincol #renewalDetail h1 {
		margin-top:0; /* overrides styling in style.css to compensate for progress bar */
	}

	#renewalDetail h2 {
		font-size: 1.7em;
		font-weight: 700;
		margin-bottom: 10px;
	}

	#renewalDetail h3 {
		margin-top: 10px;
	}
	
	#renewalDetail p {
		margin-bottom: 5px;
		overflow: hidden;
		padding: 0 10px;
	}

	#priceTable input.readOnly {
		background-color: #ffffff;
		border: 0;
	}
	
		#proceedToDeliveryDetailsButton {
			background: url(/_images/buttons/proceedToDeliveryDetailsButton.gif) transparent no-repeat 0 0;
			height: 33px;
			width: 236px;	
			float: right;
		}
			
		#orderForm .orderButton input.largeButton:hover,
		#orderForm .orderButton input.hoverLarge {
			background-position: 0 -33px;
		}
}