/*****************************************************************************************************
Image View Handling Explanation 

Images previews are displayed in 6 places:
	
	1) When an ad is proofed
	2) On the confirmation page when an ad is purchased
	3) On the Home page under Saved Ads, Current Ads and Future Ads
	4) When the user clicks on View Details from the home page
	5) Document previews on the package selection page
	6) Document previews on the document selection page
	
To be consistent, each of these was created with a 'div' class container and an 'img' class so that
the images would be constrained to a maximum size in all browsers (hopefully).  The divs and img classes
are as follows:

	1) Ad proofing
	
		<div class="proof">
			<img class="proofImage" src="/File?command=docum...
		</div>
		
	2) Confirmation
	
		<div class="confirm">
			<img class="confirmImage" src="/File?command=docum...
		</div>
		
	3) On the Home page under Saved Ads, Current Ads and Future Ads
	
		<div class="homePreview">
			<img class="homePreviewImage" src="/home/viewThumbnai...
		</div>
		
	4) When the user clicks on View Details from the home page
	
		<div class="detailsPreview">
			<img class="detailsPreviewImage" src="/home/viewThumbnail...
		</div>
		
	5) Package selection page (packagesForm.jsp)

		<div class="packagePreview">
			<img class="packagePreviewImage" id="thumb${status.cou...
		</div>

	6) Document selection page (documentsForm.jsp)

		<div class="documentPreview">
			<img class="documentPreviewImage" id="thumb${status.cou...
		</div>
		
	7) Publication preview on Scheduling Page (schedulePrintForm.jsp)

		<div class="documentPreview">
			<img class="documentPreviewImage" id="thumb${status.cou...
		</div>

END Image View Handling Explanation 
****************************************************************************************************/

/****************************************************************************************************/
/* The classes mentioned above are listed below, additional classes are listed for each situation 	*/
/* in the area beyond this commented section 														*/
/****************************************************************************************************/
div.proof {			/* Situation 1 - Ad Proof */
	background-color: #E2E6EA;
	float: left;
	text-align: center;
	width: 704px;
	min-width: 704px;
	min-heigt: 400px;	
}

img.proofImage {	/* Situation 1 - Ad Proof */
	xxmax-height: 280px;
	max-width: 660px; 
	xxheight: expression(this.height >= this.width && this.height > 280? "280px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 660 ? "660px" : true);   
	
	background: #227799;
	margin: 10px;
	padding: 1px;
}

div.confirm {		/* Situation 2 - Ad Confirmation */
	background-color: #E2E6EA;
	float: left;
	text-align: left;
	width: 290px;
}

img.confirmImage {	/* Situation 2 - Ad Confirmation */
	xxmax-height: 280px;
	max-width: 280px; 
	xxheight: expression(this.height >= this.width && this.height > 280? "280px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 280 ? "280px" : true);   
	background: #227799;
	margin: 0px 0px 10px 10px;
	padding: 1px;
}

div.homePreview {			/* Situation 3 - Home Page Previews */
	float: left;
	vertical-align:middle;
	margin: 0px 10px 4px 0px;
	width: 120px;
	height: 120px;
}

.homePreviewImage {	/* Situation 3 - Home Page Previews */
	border:1px solid #777777;
	max-height: 120px;
	max-width: 120px; 
	
	height: expression(this.height >= this.width && this.height > 120? "120px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 120 ? "120px" : true);   

}

div.imagesPreview {	/* Situation 4 - Detail Page Previews */
	float: left;
	xxwidth: 330px;
	width: 430px;
	padding: 0px 10px 0px 5px;
	xxborder-left: 1px groove #227799;
}

.detailsPreviewImage {	/* Situation 4 - Detail Page Previews */
	xxmax-height: 378px;
	max-width: 424px; 
	float: none;
	clear: left; /* Thin images will fall onto the previous line without this */
	text-align: center;
	
	xxheight: expression(this.height >= this.width && this.height > 378? "378px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 424 ? "424px" : true);  
	border:1px solid #777777;
	margin-top: 4px;
}

div.packagePreview {			/* Situation 5 - Package Selection */
	float: left;
	text-align: center;
	width: 334px;
}

img.packagePreviewImage {		/* Situation 5 - Package Selection */
	max-height: 324px;
	max-width: 324px; 
	
	height: expression(this.height >= this.width && this.height > 324? "324px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 324 ? "324px" : true);  

	padding: 1px;
}

div.documentPreview {			/* Situation 6 - Document Selection */
	float: left;
	text-align: center;
	width: 334px;
}

.documentPreviewImage {		/* Situation 6 - Document Selection */
	max-height: 324px;
	max-width: 324px; 
	height: expression(this.height >= this.width && this.height > 324? "324px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 324 ? "324px" : true);    
	padding: 1px;
}

div.publicationPreview {		/* Situation 7 - Publication Preview on Schedule Page */
	float: left;
	margin-left: 6px;
	width: 108px;
}

div.publicationDescription {
	float: left;
	margin-left: 6px;
	display: none;
}

img.publicationPreviewImage {	/* Situation 7 - Publication Preview on Schedule Page */
	border:1px solid #777777;
	max-height: 108px;
	max-width: 108px; 
	height: expression(this.height >= this.width && this.height > 108? "108px" : true);  /* Andy & Col's new way! */
	width: expression(this.height < this.width && this.width > 108 ? "108px" : true);    
}
/****************************************************************************************************/
/* END - Preview Situations                                     		                          	*/
/****************************************************************************************************/
/********************************************************************************/
/* Ad Proof - Situation 1 does not use any additional classes for the display	*/
/********************************************************************************/
/********************************/
/* Confirmation - Situation 2	*/
/********************************/
div.confirmData {
	background-color: #E2E6EA;
	float: left;
	width:380px;
	margin: 0px 0px 12px 12px;;
}

div.confirmData h2 {
	margin: 0px 0px 2px 0px;
}

div.confirmData h2 {
	background: #E2E6EA;
}

div.confirmData dl {
	float: left;
	width: 300px;
	color: #000000;
	line-height: 14px;
}

div.confirmData dl dd {
	text-align: left;
	margin-bottom: 1px;
}
div.confirmData dl dt {
	width: 130px;
	margin-bottom: 1px;
}

div.confirmJob dl dt {
	width: 90px;
	margin-bottom: 1px;
}

div.confirmDataContainer {
	float:left;
	text-align:left;
	width:392px;
}

div.confirmData td{
	padding-bottom: 3px;
}
/************************************/
/* END Confirmation - Situation 2	*/
/************************************/

/****************************/
/* Home Page - Situation 3	*/
/****************************/
div.orderDataContainer {		/* Home Page Previews - Each order (can be made up of mulitple ads) */
	background-color: #E2E6EA;
	float: left;
	width: 382px;
	border:1px solid #777777;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	margin: 10px 0px 0px 10px;
}

div.adDataContainer { 			/* Home Page Previews - Indiviual listing in the container (there could be many) */
	float: left;
	width: 374px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	margin: 4px;
}

div.adInfoContainer {
	float: left;
	text-align: left;
	width: 236px;
}

ul.adLinks {
	float: left;
	text-align: left;
	margin: 0px 0px 8px 12px;
	padding: 0px;
	width: 120px;
}

ul.adLinks li.viewDetails{
}

ul.adLinks li.modifyAd{
}

ul.adLinks li.rescheduleAd{
}

ul.adLinks li.cancelAd{
}

ul.adLinks li.deleteAd{
}


div.finalInfo {
	clear: left;
	margin-left: 4px;
	margin-bottom: 4px;
	padding-bottom: 4px;
	height: auto;
}

div.finalInfo .finalDate{
	float: left;
	text-align: left;
	width: 120px;
}

hr.adContainerRule {
	margin: 2px 0px 4px 0px;
	width: 374px;
	color: #cccccc;
}

span.adTitle {
	color: #000000;
	font-weight: bold;
	font-size: 11px;
}
div.adNum {
	color: #227799;
	font-weight: bold;
	font-size: 11px;
	padding-bottom: 4px;
}

div.copiedFrom {
	color: red;
	font-weight: bold;
	font-size: 9px;
	padding-bottom: 4px;
}

.insertionListDetails{
	text-align: left;
	line-height: 14px;
}

dl.insertionList dt {
	width: 120px;
	margin-bottom: 2px;
}

dl.insertionList dd {
	text-align: left;
	margin-bottom: 2px;
}

.homeData li a {
	padding: 0px;
	line-height: 12px;
}
/************************************/
/* END Home Page - Situation 3		*/
/************************************/	
	
/********************************************************/
/* View Details (from home page preview - Situation 4	*/
/********************************************************/

div.viewAdDataContainer{ 		/* Indiviual listing in the container (there could be many) */
	float: left;
	width: 792px;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	xxmargin: 12px 0px 12px 12px;
}

div.viewAdInfoContainer {		/* This is for the Ad View Details page */
	float: left;
	text-align: left;
	width: 330px;
	padding: 0 5px 0 10px;
}

div.detailsData {
	float: left;
	clear: left;
	width: 330px;
}

div.detailsData h2.accountInfo, div.transactionsData h2 {
	margin-top: 12px !important;
}

div.detailsData h2.accountInfoCanceled {
	margin-top: 12px;
	color: darkRed;
}

div.transactionsData {
	float: left;
	clear: left;
	width: 330px;
}

div.transactionsData dl {
	color: #000000;
}

div.transactionsData dl dd {
	text-align: left;
	width: 276; /* az - fixed wrapping lines in the view details window */
}

div.transactionsData dl dt {
	background: none repeat scroll 0%;
	width: 100px;
}

div.transactionsData dl dd.amount,div.transactionsData dl dt.amount {
	padding-bottom: 6px;
}

div.detailsScheduleDetails {
	float: left;
	clear: left;
	line-height: 14px;
	xxwidth: 378px;
	xxheight: 76px;
}

div.detailsData h2,div.imagesPreview h2,div.transactionsData h2 {
	background: none repeat scroll 0%;
	margin: 0px 0px 2px 0px;
}

div.detailsPreview h2 {
	text-align:left;
	float: left;
	clear: left;
	background: none repeat scroll 0%;
	margin: 0px 0px 4px 0px;
}

div.detailsData h2.myadsDetailsData {
	font-size: 10pt;
}

div.detailsData dl {
	float: left;
	color: #000000;
	line-height: 14px;
	width: 320px;
}

div.detailsData dl dd {
	text-align: left;
	width: 276; /* az - fixed wrapping lines in the view details window */
}

div.detailsData dl dt {
	width: 100px;
}

div.detailsData dl dt.statusChange {
	margin-top: 3px;
}

div.detailsLinks {
	float: left;
	clear: left;
	xxxwidth: 300px;
	text-align: center;
	margin-bottom: 12px;
}

ul.filesList {
	color: #FFFFFF;
	font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 4px 0px 12px 0px;
	text-align: center;
	width: 430px;
}

ul.filesList ul li {
	padding: 3px 3px;
	list-style: none;
	display: inline;
	border-left: 1px solid;
}

span.indented{
	margin-left: 140px;
}

span.nonindented{

}
/************************************************************/
/* END View Details (from home page preview - Situation 4	*/
/************************************************************/

/************************************/
/* Package Selection - Situation 5	*/
/************************************/
div.packageContainer {		/* package Selection Previews */
	background-color: #E2E6EA;
	float: left;
	width: 334px;
	border:1px solid #777777;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	margin: 10px 0px 0px 10px;
}

label.packageLabel{
	width: 100%;
	margin: 4px 0px 0px 0px;
	margin-bottom: 2px;
	line-height: 14px;
	text-align: center;
}

label.packageDesc {
	padding: 5px;
	margin-bottom: 2px;
	line-height: 14px;
	text-align: left;
}

div.packageLinkContainer{
	width: 100%;
	height: 18px;
	text-align: center;
}
	
a.packagePreviewLink {
	clear: left;
	padding: 4px 0px 4px 0px;
}

div.packageContainer:hover{
	border-color: #2DA0CD;
	background-color: #FFFFCC;
}

div.packageContainer.selected{
	background-color: #CCCCCC;
	border: 1px solid;
	border-color: #9B233C ! important;	
}

p.packageDesc{
	padding: 6px;
	text-align: center;
}

/****************************************/
/* END Package Selection - Situation 5	*/
/**************S*************************/

/************************************/
/* Document Selection - Situation 6	*/
/************************************/
div.documentContainer {		/* document Selection Previews */
	float: left;
	width: 334px;
	border:1px solid #777777;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	margin: 10px 0px 0px 10px;
}

label.documentLabel{
	width: 100%;
	margin: 4px 0px 0px 0px;
	margin-bottom: 2px;
	line-height: 14px;
	text-align: center;
	overflow: hidden;
}

div.documentLinkContainer{
	width: 100%;
	height: 18px;
	text-align: center;
}
	
a.documentPreviewLink {
	clear: left;
	padding: 4px 0px 4px 0px;
}

.adPreviewLink {
	clear: left;
	margin: 0px 0px 8px 0px;
}

div.documentContainer:hover{
	border-color: #000000; /*#2DA0CD*/
	background-color: #FFFFCC;
}

div.documentContainer.selected{
	background-color: #E2E6EA; /*#CCCCCC */
	border: 1px solid;
	border-color: #2DA0CD !important;	/*#9B233C */
}

img.multiProofImage {
	max-width:100%;
	max-height:250px;
}
	
/****************************************/
/* END Document Selection - Situation 6	*/
/**************S*************************/