/**
 * Layout
 *
 * Customized page layout styling.
 *
 */

/* ----------------------------------------------------------------------------
	LAYOUT: TWO COLUMNS [DEFAULT]
---------------------------------------------------------------------------- */

#content-body {
	display: inline;
	float: left;
	margin: 26px 0 0 246px;
	padding-bottom: 1px;
	position: relative;
	width: 619px;
}

#content-navigation {
	display: inline;
	float: left;
	margin: 29px 0 0 -848px;
	overflow: hidden;
	padding-bottom: 1px;
	position: relative;
	width: 194px;
}



/* ----------------------------------------------------------------------------
	LAYOUT: HEADER
---------------------------------------------------------------------------- */

#header {
	background: transparent url(../_images/banners/default.gif) no-repeat left top;
	height: 158px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
	/*
	Main graphical heading: Action Plan
	*/
	#header h1 {
		height: 46px;
		left: 0;
		position: absolute;
		top: 112px;
		width: 100%;
	}
		.en #header h1 {
			background-image: url(../_images/headers/maple_leaf_foods_action_plan_en.gif);
		}
		.fr #header h1 {
			background-image: url(../_images/headers/maple_leaf_foods_action_plan_fr.gif);
		}

	/*
	This logo will also be used for the print version.
	*/
	#header .logo {
		left: 19px;
		position: absolute;
		top: 43px;
	}
		#header .logo a,
		#header .logo img {
			display: block;
			text-decoration: none;
		}



/* ----------------------------------------------------------------------------
	LAYOUT: FOOTER
---------------------------------------------------------------------------- */

#footer {
	background: transparent url(../_images/layout/footer_bg_top.gif) no-repeat left top;
	clear: both;
	font-size: 11px;
	padding: 7px 0 0 25px;
}



/* ----------------------------------------------------------------------------
	FEATURE BOX: ACTION PLANS HIGHLIGHTS
---------------------------------------------------------------------------- */

div.feature {
	background: transparent url(../_images/layout/shaded_gray_box_bg_bottom.gif) no-repeat left bottom;
	display: inline;
	float: right;
	font-size: 11px;
	line-height: 14px;
	margin: 0 0 16px 8px;
	padding: 0 15px 19px 12px;
	width: 146px;
}
	div.feature h3 {
		height: 43px;
		margin: 0 -15px 13px -12px;
		width: 173px;
	}
		.en div.feature #hdr-action-plan {
			background-image: url(../_images/headers/action_plan_highlights_en.gif);
		}
		.fr div.feature #hdr-action-plan {
			background-image: url(../_images/headers/action_plan_highlights_fr.gif);
			height: 51px;
		}

/*
Large/wide box.
*/
div.feature-large {
	background-image: url(../_images/layout/shaded_gray_box_large_bg_bottom.gif);
	display: block;
	float: none;
	margin: 16px 20px;
	text-align: center;
	width: 551px;
}
	.en div.feature #hdr-40-steps {
		background-image: url(../_images/headers/40_steps_proprietary_en.gif);
		height: 62px;
		width: 579px;
	}
	.fr div.feature #hdr-40-steps {
		background-image: url(../_images/headers/40_steps_proprietary_fr.gif);
		height: 82px;
		width: 579px;
	}

	.en div.feature #hdr-three-p {
		background-image: url(../_images/headers/three_p_food_safety_en.gif);
		height: 62px;
		width: 579px;
	}
	.fr div.feature #hdr-three-p {
		background-image: url(../_images/headers/three_p_food_safety_fr.gif);
		height: 62px;
		width: 579px;
	}



/* ----------------------------------------------------------------------------
	INTRODUCTORY MESSAGE FROM MICHAEL MCCAIN
---------------------------------------------------------------------------- */

div.intro {
	/*border-bottom: 1px solid #c9c9c9;
	margin-bottom: 16px;
	padding-bottom: 1px;*/
	position: relative;
	width: auto;
	zoom: 1;
}
	div.intro img.photo {
		border: 1px solid #014784;
		display: inline;
		float: left;
		margin: 0 16px 8px 0;
	}



/* ----------------------------------------------------------------------------
	YOUTUBE VIDEO PLACEHOLDER
---------------------------------------------------------------------------- */

div.video-youtube {
	border: 1px solid #000;
	height: 315px;
	margin: 20px 0 16px 0;
	position: relative;
	width: 430px;
}



/* ----------------------------------------------------------------------------
	GRAPHICAL HEADERS THAT APPEAR IN CONTENT BODY (#CONTENT-BODY)
---------------------------------------------------------------------------- */

/*
A message from Michael McCain
*/
.en #hdr-msg-mccain {
	background-image: url(../_images/headers/message_from_michael_mccain_en.gif);
}
.fr #hdr-msg-mccain {
	background-image: url(../_images/headers/message_from_michael_mccain_fr.gif);
}



/* ----------------------------------------------------------------------------
	SIMPLE DATA TABLE LAYOUT
---------------------------------------------------------------------------- */

table.simple {
	border-bottom: 1px solid #c1c1c1;
	margin: 16px 0;
	table-layout: fixed;
	width: 100%;
	zoom: 1;
}
	table.simple tr {
		vertical-align: top;
	}	
		table.simple thead td {
			background-color: #004b7d;	
			color: #fff;
			font-weight: bold;
			padding: 4px 6px;
			text-align: center;
		}
		table.simple tbody td {
			background-color: #fff;
			border: 1px solid #c1c1c1;			
			padding: 4px 6px;
		}	
		
		table.simple tr.shade td {
			background-color: #f9f9f9;
		}	


/* ----------------------------------------------------------------------------
	PHOTO GALLERY THUMBNAIL LIST
---------------------------------------------------------------------------- */

ul.gallery {
	margin: 0 0 16px -16px;
}
	ul.gallery li {
		background: #f2f2f2;
		display: inline;
		float: left;
		margin: 0 0 0 16px;
		padding: 14px 12px 1px 12px;
		width: 258px;
	}
		ul.gallery div.clearfix {
			margin-bottom: 19px;
		}
		
		ul.gallery li img.thumb {
			display: block;
			margin-bottom: 7px;
		}
		
		ul.gallery li span.caption {
			color: #004684;
			display: block;
			font-weight: bold;
			margin-bottom: 7px;
		}



/* ----------------------------------------------------------------------------
	OVERLAY / POPUP PROPERTIES
---------------------------------------------------------------------------- */

/*
Creates an overlay effect that covers the entire browser window.
*/
#overlay {
	background-color: #7fa5be;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
	filter: alpha(opacity=60);
	-moz-opacity: .60;
	opacity: .60;
}

/*
Disable scrollbars of page content.
*/
html.overlay {
	overflow: hidden;
}
body.overlay {
	overflow: hidden;
	overflow-y: hidden;
}

/*
Popup box.
*/
div.popup {
	background: transparent url(../_images/layout/popup_mapleleaf_middle.gif) repeat-y left top;
	color: #000 !important;
	display: block;
	left: 50%;
	margin-left: -252px;
	position: absolute;
	top: 150px;
	width: 504px;
	z-index: 1100;
}
	div.popup #WelcomeChooser {
		background: transparent url(../_images/layout/popup_mapleleaf_bottom.gif) no-repeat left bottom;
		position: relative;
		width: 100%;
	}
		div.popup #WelcomeChooser h1 {
			background-image: url(../_images/layout/popup_mapleleaf_top.gif);	
			height: 173px;
			margin: 0;
			padding: 0;
			width: 504px;
		}
		div.popup #WelcomeChooser h1.shneiders {
			background-image: url(../_images/layout/popup_schneiders_top.gif);
		}
		
		div.popup #WelcomeChooser table {
			margin-left: 2px;
			width: auto;
			margin-right: 2px;
		}			
			div.popup #WelcomeChooser table img {
				display: block;
			}



/* ----------------------------------------------------------------------------
	POPUP: PHOTO GALLERY
---------------------------------------------------------------------------- */

#PhotoGallery {
	background: #fff;
	border: 1px solid #000;
	margin-left: -222px;
	padding: 14px 17px 1px 17px;
	width: 444px;
}
	/*
	Graphical banner
	*/
	#PhotoGallery #PhotoGallery_Banner {
		height: 26px;
		margin: 0;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-indent: -5000px;
	}
			/*
			Close button within the graphical header region.
			*/
			#PhotoGallery #PhotoGallery_Banner a.hdr-graphic {				
				height: 12px;
				position: absolute;
				right: 0;
				top: 0;				
			}
				.en #PhotoGallery_Banner a.hdr-graphic {
					background-image: url(../_images/buttons/close_en.gif);
					width: 72px;					
				}
				.fr #PhotoGallery_Banner a.hdr-graphic {
					background-image: url(../_images/buttons/close_fr.gif);
					width: 82px;
				}

	/*
	Current/selected image.
	*/
	#PhotoGallery #PhotoGallery_Image {
		position: relative;
	}
		#PhotoGallery #PhotoGallery_Image img {
			margin: 0;
			display: block;
		}

	/*
	Next and previous links.
	*/
	#PhotoGallery #PhotoGallery_Prev {		
		display: none !important;
	}
	#PhotoGallery #PhotoGallery_Next {
		display: none !important;
	}

	/*
	Caption/description of the current photo.
	*/
	#PhotoGallery #PhotoGallery_Description {
		margin: 16px 0;
	}
		#PhotoGallery #PhotoGallery_Description .caption {
			color: #004684;
			display: block;
			font-weight: bold;
			margin-bottom: 7px;
		}	


			
/* ----------------------------------------------------------------------------
	CORE FUNCTIONS: NAVIGATION SKIPPER, PRINT-FRIENDLY LINKS, IMAGE LAYOUT,
	GRAPHICAL HEADERS, FLOATED ELEMENTS LAYOUT FIXER (CLEARFIX)
---------------------------------------------------------------------------- */

/*
Skip over navigation
*/
#skipper { display: none; }

/*
Print-friendly links
*/
.pf { display: none; }

.tcenter {
	display: block;
	text-align: center;
}

/*
Float images on the left or right-hand
side of the content area.
*/
img.float-left {
	display: inline;
	float: left;
	margin: 5px 6px 5px 0;
}
img.float-right {
	display: inline;
	float: right;
	margin: 5px 0 5px 11px;
}

/*
Graphical headers
*/
.hdr-graphic {
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
	text-decoration: none;
	text-indent: -5000px;
}

/*
Clear floats so content beneath will flow
normally. This class must be attached to any
parent that has a floated child.
*/
.clearfix:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    line-height: 0;
    visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
	display: block;
}
/* End hide from IE Mac */