@charset "utf-8";
/* CSS Document */
/*
--------------------------------------------------------------------------------
[Homepage Style Sheet]
--------------------------------------------------------------------------------
Project:		Canadian Heartland Railway
Version:		1.0
Designer:		Ryan Martinez - Spincaster design (ryan@spincaster.com)
CSS 2.1 standards validated by: W3C  validated on: 22/01/09
last change:	
Assigned to:
Primary use:	Canadian Heartland Railway

[Layout / Table of Contents]
---------------------------------------------------------------------------------
* global reset
* gloabl styles
* html
* body
* main container / #main_container
	1.0 header / #header
		1.1 homepage, icon link /#header h1
		1.2 header tagline/ #header #tagline
		1.3 Primary navigation/ #header #pnav
			1.3.1 subnav menu/ #header #pnav li ul.subnav
	2.0 highlights (dark grey stripe) / #highlights
		2.1 flash place holder / #highlights .flash_placeholder
		2.2 highlighted content box /#highlights #highlightedContent 
	3.0 products and services (white horizontal stripe)/ #productsANDservices
	4.0 content columns
		4.1 content column one (left column) / #ContentColumnOne
			4.1.1 Ez learn login links/ #ContentColumnOne #loginlinks
			4.1.2 Ez learn login box/ #ContentColumnOne #loginSlider 
		4.2 content column two (center column) / #ContentColumnTwo
		4.3 content column three (right column) / #ContentColumnThree 
			4.3.1 news letter sign up box/ #ContentColumnThree #homepageNewsletterSignup
	5.0 footer/ #footer
		5.1 secondary navigation/ #footer #Snav
-------------------------------------------------------------------------------- */

/*---------------------------------------------------------------------------------
	global reset for all browsers
----------------------------------------------------------------------------------*/
* {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	list-style:none;
}

/*---------------------------------------------------------------------------------
	global styles
----------------------------------------------------------------------------------*/
.clearer{
	height:0px; width:0px;
	margin:0px; padding:0px;
	clear:both;
}

/*----------------------------------------------------------------------------------
	HOMEPAGE template for Canadian Heartland Training Railway
----------------------------------------------------------------------------------*/
body{
	font-weight: inherit;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	text-decoration:none;
	background:#d9d6c5 url(../images/backgrounds/homepage_body_background.jpg) repeat-x 0px 0px;
}
#main_container{
	position:relative;
	margin:0px auto; 
	width:975px; 
}
/*----------------------------------------------------------------------------------
1.0	header 
----------------------------------------------------------------------------------*/
#header{
	position:relative;
	width:970px; height:116px;
	background: url(../images/backgrounds/header_background.jpg) no-repeat 0px 0px;
	z-index:200;
}
	/*
	1.1 header - homepage link  
	----------------------------------------------------------------------------------*/
	#header h1{	width:190px; height:88px; }
		#header h1 a{
			display:block;
			width:100%; height:100%;
		}
			#header h1 a span{display:none;}
	/*
	1.2 header - tagline
	----------------------------------------------------------------------------------*/
	#header #tagline{
		position:absolute; top:50px; left:195px;
		font-size:14px;
		color:#A5A092 /*sand*/
	}
	/*
	1.3 header - primary navigation
	----------------------------------------------------------------------------------*/
	#header #pnav{
		position:absolute; top:68px; right: 0px;
		margin:0px; padding:4px 0px 0px 0px;
		/*width:530px; */ height:17px;
		text-align:right;
		z-index:200;
		}
		#header #pnav li{
			float:left;
			position:relative;
			height:17px;
			padding:0px 10px 0px 10px;
			background:url(../images/backgrounds/pnav_dividers_backgroun.gif) no-repeat right 3px;
			z-index: 3;
		}
			#header #pnav li.last{
				padding:0px 0px 0px 10px;
				background:none;
			}
			#header #pnav li a{
				width:100%; height:17px;
				padding:7px 0px 7px 0px;
				text-transform:lowercase;
				text-decoration:none;
				background:url(../images/backgrounds/clear.gif) repeat 0px 0px;
				color:#DAC588;  /*gold yellow*/
				font-size:11px;
				z-index: 3;
			}
				#header #pnav li a:hover{
					color:#ddd;  /*off white*/
				}
			 /*
			1.3.1 header - primary navigation - sub navigation
			----------------------------------------------------------------------------------*/
		 #main_container #header #pnav li:hover ul.subnav{
			 display:block;
			 z-index:200;
		 }
		 #main_container #header #pnav li ul.subnav{
			 display:none;
			 position:absolute; left:-1px; top:17px;
			 padding:0px; margin:0px;
			 width:170px; height:auto;
			 border-right:1px solid #999;
			 border-left:1px solid #999;
			 border-bottom:1px solid #999;
			 background-color:#630912 /*dark red*/;
			 text-align:left;
			 z-index:200;
		 }
		 	#main_container #header #pnav li ul.subnav li{
				width:140px; height:auto;
				margin:0px 5px 0px 5px; padding:0px;
				border-top:1px solid #ce6363; /*highlight red*/
				background:none;
		 	}
			#main_container #header #pnav li ul li.first{border:none;}	
				#main_container #header #pnav li ul.subnav li a{
					display:block;
					height:auto; width:130px;
					padding:5px 10px 5px 10px; margin:0px 0px 0px 0px;
				}
/*----------------------------------------------------------------------------------
2.0	Hightlights
----------------------------------------------------------------------------------*/
#highlights{
	position:relative;
	width:975px; height:221px;
	border-top:1px solid #a7a193; /*dark sand */
	background: url(../images/backgrounds/homepage_highlights_background.jpg) no-repeat 0px 3px;
	z-index:0;
}
	/*
	2.1 highlights - flash placeholder
	----------------------------------------------------------------------------------*/
	#highlights img.flash_placeholder{
		position:relative;
		float:right;
		margin:7px 0px 0px 0px;
	}
	/*
	2.2 highlights - highlighted Content
	----------------------------------------------------------------------------------*/
	#highlights #highlightedContent {
		margin:9px 0px 0px 6px; padding:20px 20px 0px 20px;
		width:339px; height:183px;
		overflow:auto;
	}
		#highlights #highlightedContent h2{font-size:18px; color:#ffffff; font-weight:bold; margin-bottom:7px;}
		#highlights #highlightedContent p{font-size:10px; color:#ffffff;margin-bottom:7px;}
			#highlights #highlightedContent p strong{font-size:12px; color:#661115; /*dark red*/ font-weight:bold; margin-bottom:7px;}
			#highlights #highlightedContent p a {text-decoration:none; font-size:10px; color:#661115; /*dark red*/}
			#highlights #highlightedContent p a:hover{ color:#FFF; }
			#highlights #highlightedContent a.edit_link {	
				float: right;
				text-decoration:none;
				font-size:12px;
				color:#661115;/*dark red*/
				border-top: 1px solid #661115;
				border-bottom: 1px solid #661115;
			}
			#highlights #highlightedContent a.edit_link:hover{
				color: #666;
				border-top: 1px solid #666;
				border-bottom: 1px solid #666;
			}
   
   #highlights #highlightedContent a.clientLOGIN{
		display:block;float:right;
		width:70px; height:18px;
		background:url(../images/buttons/clientLogin.jpg) no-repeat 0px 0px;
		border:1px solid #c0bdb4; /*lightgrey*/
	}
		#highlights #highlightedContent a.clientLOGIN span{ display:none; }
		#highlights #highlightedContent a.clientLOGIN:hover{ border:1px solid #ddd; /*white*/ }
 
/*----------------------------------------------------------------------------------
3.0	Products and Services
----------------------------------------------------------------------------------*/
#productsANDservices{
	 width:975px; height:136px;
 }
	 #productsANDservices li{
		 float:left;
		 width:222px; height:108px;
		 padding:5px;
		 margin:7px 0px 0px 10px!important;
		 margin:7px 0px 0px 10px;
		 background: url(../images/buttons/productsANDservices_BG_A.jpg) no-repeat 0px 0px;
		 border:1px solid #bbb;
		 overflow:hidden;
	 }
			#productsANDservices li.first{
				 margin-left:7px !important;
				 margin-left:3px;
			}
			#productsANDservices li.alternate{
				background: url(../images/buttons/productsANDservices_BG_B.jpg) no-repeat 0px 0px;
				width:225px;
				padding:5px 2px 5px 5px;
			}
			 #productsANDservices li:hover{
				 border:1px solid #999;
			 }
				#productsANDservices li h2,
				#productsANDservices li h3,
				#productsANDservices li h4,
				#productsANDservices li h5,
				#productsANDservices li h6 {
					font-size:10px;
					color:#888;
					font-weight:bold; 
					margin:0px 0px 2px 0px;
				}
				#productsANDservices li strong a{
					text-decoration:none;
					display:block;
					margin:0px 0px 6px 0px;
					font-size:14px; font-weight:bold; color:#666; 
				}
					#productsANDservices li strong a:hover{ color:#888; }
				#productsANDservices li img{
					float:left;
					padding:4px; margin:0px 9px 5px 7px;
					border:1px solid #999;
				}
				#productsANDservices li p{
					margin:0px 0px 0px 0px; font-size:10px; color:#888;
				}
				#productsANDservices li a {
					text-decoration:underline; font-size:10px; color:#a54e57; /*red */
				}
				#productsANDservices li a:hover { color:red; }

/*----------------------------------------------------------------------------------
4.0	Content Columns
----------------------------------------------------------------------------------*/
.ContentColumn {
	float:left;
	padding:10px;
	width:303px;
	color:#6D6D6D; /*grey*/
}
.ContentColumn h3 { font-size:13px; font-weight:bold; color:#661115; /*dark red*/ display:block; margin:0px 0px 5px 0px; }
.ContentColumn p { font-size:11px; margin:0px 0px 10px 0px; }

	/*
	4.1	Content Columns - Column One (left column)
	----------------------------------------------------------------------------------*/
#ContentColumnOne{ background:url(../images/backgrounds/homepage_ContentColumnOne_BG.jpg) no-repeat top right; }
		/*
		4.1.1	Content Columns - Column One (left column) - EZ learn login controls ( business or client )
		----------------------------------------------------------------------------------*/
	#ContentColumnOne #loginlinks{
		margin:0px 0px 4px 0px;
		background:url(../images/backgrounds/homepage_ContentColumnOne_loginLinksUL_BG.jpg) no-repeat 90px 0px;
		height:17px;
	}
		#ContentColumnOne #loginlinks li{
			width:auto;
			float:left;
		}
		#ContentColumnOne #loginlinks li a{
			padding:0px 20px 0px 20px;
			background: url(../images/backgrounds/homepage_ContentColumnOne_loginLinksLi_client.jpg) no-repeat 0px 1px;
			color:#666;
			font-size:11px;
			font-weight:bold;
		}
		 #ContentColumnOne #loginlinks li#bloginLink a{ 
		 	padding:0px 20px 0px 0px;
			background:url(../images/backgrounds/homepage_ContentColumnOne_loginLinksLi_business.jpg) no-repeat 85px 1px;
		 }
		#ContentColumnOne #loginlinks li.inactive a{color:#999; }
		#ContentColumnOne #loginlinks li a:hover{color:#333;}
		/*
		4.1.2	Content Columns - Column One (left column) - login form viewport
		----------------------------------------------------------------------------------*/
	#ContentColumnOne #loginSlider{
		position:relative;
		width:283px; height:95px;
		padding:10px;
		overflow:hidden;
		background:url(../images/backgrounds/homepage_leftColumn_loginbox.jpg) no-repeat 0px 0px;	
	}
	#ContentColumnOne #loginSlider .loginbox{ position:relative;}
	#ContentColumnOne #loginSlider #businessLogin {display:none;}
	#ContentColumnOne #loginSlider .loginbox ul li{
		float:left;
		width:135px;height:50px;
		margin:0px 0px 0px 0px;
		font-size:10px;
	}

	#ContentColumnOne #loginSlider .loginbox ul li.rightLoginBox{
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 10px;
	}
	#ContentColumnOne #loginSlider .loginbox label{	font-size:11px;}
	#ContentColumnOne #loginSlider .loginbox input{
	    clear:both;
		height:16px; width:123px;
		margin:3px 0px 5px 0px;
		padding:0px 5px 0px 5px; 
		border:1px solid #b5b5ab;
		background:url(../images/backgrounds/My-EZlearnLogin-input-BG.jpg) top left repeat-y;
		font-size:11px;
		color:#8a8a8a;
	}
	#ContentColumnOne #loginSlider .loginbox #submitClient, #ContentColumnOne #loginSlider .loginbox #submitBusiness{
		float:right;
		margin:0px 1px 0px 0px;
		width:55px; height:19px;
		font-size:11px;
		cursor:pointer;
		background:url(../images/backgrounds/My-EZlearnLogin-submit-BG.jpg) 0px 0px repeat-x;
		border:1px solid #abaa96;
		color:#5e5e5c;
	}
		#ContentColumnOne #loginSlider .loginbox .forgotLinks  a{
				margin:0px 0px 0px 0px; padding:0px;
				height:auto;
				width:auto;
				font-size:10px;
				color:#777; /*grey*/		
		}
		#ContentColumnOne #loginSlider .loginbox .forgotLinks a:hover{ text-decoration:underline; color:#661016; /*maroon*/	}
	/*
	4.2	Content Columns - Column two (center column)
	----------------------------------------------------------------------------------*/
#ContentColumnTwo{ 
	background:url(../images/backgrounds/homepage_ContentColumnTwo_BG.jpg) no-repeat top left; 
	border-right:1px solid #bebcaf; border-left:1px solid #bebcaf;
}
	/*
	4.3	Content Columns - Column Three (right column)
	----------------------------------------------------------------------------------*/
#ContentColumnThree{ background:url(../images/backgrounds/homepage_ContentColumnThree_BG.jpg) no-repeat top left; }
	#ContentColumnThree ul li{	color:#6D6D6D; /*grey*/ font-size:10px; }
	#ContentColumnThree ul li strong{font-size:9px; font-weight:bold;}
	#ContentColumnThree a#newsletterShow{
		display:none;
		width:245px; height:30px;
		margin:0px 0px 5px 0px;
		padding:15px 0px 0px 55px;
		background:url(../images/buttons/homepage_contentColumnThree_NewsletterSignup_bg.png) no-repeat 0px 0px;
		cursor:pointer;
		color:#661115;
		font-size:10px;
	}
		#ContentColumnThree a#newsletterShow:hover{ color:#333; }
		/*
		4.3.1	Content Columns - Column Three (right column) - newsletter sign up
		----------------------------------------------------------------------------------*/
	#ContentColumnThree #homepageNewsletterSignup{
		height:48px;
		margin:0px 0px 10px 0px;
		padding:5px 0px 0px 10px;
		background:url(../images/backgrounds/homepage_ContentColumnThree_newsletterBG.jpg) no-repeat 0px 0px;
	}
		#ContentColumnThree #homepageNewsletterSignup label{
			font-size:11px;
		}
		#ContentColumnThree #homepageNewsletterSignup input{
			height:16px; width:200px;
			margin:2px 0px 5px 0px;
			padding:0px 5px 0px 5px; 
			border:1px solid #b5b5ab;
			background:url(../images/backgrounds/My-EZlearnLogin-input-BG.jpg) top left repeat-y;
			font-size:11px;
			color:#8a8a8a;
		}
		#ContentColumnThree #homepageNewsletterSignup #submitEmail{
			width:55px; height:19px;
			margin:0px 0px 5px 5px;
			font-size:11px;
			cursor:pointer;
			background:url(../images/backgrounds/My-EZlearnLogin-submit-BG.jpg) 0px 0px repeat-x;
			border:1px solid #abaa96;
			color:#5e5e5c;
		}
/*----------------------------------------------------------------------------------
5.0	footer
----------------------------------------------------------------------------------*/			
#footer{
	margin:10px; padding:5px 0px 0px 0px;
	width:100%;
	border-top:1px solid #bebcaf;
}
	#footer p{
		font-size:11px;
		color:#6D6D6D; /*grey*/
	}
		#footer p a { font-size:11px; color:#661115; /*dark red*/ }
	/*
	5.1	footer - Secondary navigation
	----------------------------------------------------------------------------------*/
	#footer #Snav{
		float:right;
	}
		#footer #Snav li{
			display:inline;
			padding:0px 7px 0px 7px;
			background:url(../images/backgrounds/Snav_dividers_backgroun.gif) no-repeat right 3px;
		}
			#footer #Snav li.last{
				padding:0px 0px 0px 10px;
				background:none;
			}
			#footer #Snav li a{
				width:100%;
				text-transform:lowercase;
				text-decoration:none;
				color:#6D6D6D; /*grey*/
				font-size:11px;
			}
				#footer #Snav li a:hover{
					text-decoration:underline;
					color:#444; /*grey*/
				}
/*---------------------------------------------------------------------------------
	Classes
---------------------------------------------------------------------------------*/
a.edit_link {	
	float: right;
	text-decoration:none;
	font-size:12px;
	color:#661115;/*dark red*/
	border-top: 1px solid #661115;
	border-bottom: 1px solid #661115;
}
a.edit_link:hover{
	color: #666;
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
}