@charset "utf-8";
/* CSS Document */


/* containers */

#con_hero {
	position: relative;
	width: 953px;
	height: 413px;
	background-image: url('/Canada-English/Images/hero_container.png');
	background-repeat: no-repeat;
	margin-top: 8px;
	z-index: 0;
}

#con_image {
	position: absolute;
	border: #dadada;
	border-width: thin;
	width: 935px;
	height: 395px;
	left: 9px;
	top: 9px;
}

	
#con_accordion {
	position:absolute;
	left: 20px;
	bottom: 75px;
	width: 295px;
	height: 320px;	
	vertical-align: bottom;
	z-index:3;
}

/* code to help fix box method issues */
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}


/* accordion styling */

#accordion {
	position: relative;
	bottom: 0px;
	width: 295px;
	margin: 50px auto;
}

#accordion .ui-accordion-content {
	max-height: 300px;
	width: 100%;
	background-color: #fff;
	color: #777;
	font-size: 12px;
	line-height: 16pt;
	margin: 0px 0px 5px 0px;
	opacity: 0.95;
    filter: alpha(opacity=95); /* For IE8 and earlier */
}

#accordion .ui-accordion-content > * {
	margin: 0;
	padding: 5px 20px 20px 20px;
}

#accordion .ui-accordion-content a {
	color: #008cd1;
}

.cta {
	margin: 0px 0px 40px 0px;
}

.cta a {
	background-image:url('/Canada-English/Images/cta_arrow.png');
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 17px;
}	
	
#accordion .ui-accordion-header {
	display: block;
	border: none;
	outline-color: transparent;
	cursor:pointer;
	color: #fff;
	line-height: 40px;
	font-size: 12px;
	width: 100%;
	background-color: #008cd1;
	background-image: url(/Canada-English/Images/white_corner.png);
	background-position: 282px 5px;
	background-repeat: no-repeat;
	margin: 0px 0px 5px 0px;
	opacity: 0.95;
    filter: alpha(opacity=95); /* For IE8 and earlier */
}

#accordion .ui-accordion-header-selected {
	display: block;
	border: none;
	outline-color: transparent;
	margin: 0px;
	cursor: pointer;
	color: #555;
	font-size: 18px;
	line-height: 24px;
	padding-top: 20px;
	width: 100%;
	background-color: #fff;
	opacity: 0.95;
    filter: alpha(opacity=95); /* For IE8 and earlier */
}

#accordion .header {
	padding: 0px 20px 0px 20px;
}


/* stock box */

#stock {
	position: absolute;
	display: block;
	color: #fff;
	font-size: 15px;
	width: 295px;
	height: 75px;
	background-color: #000; 
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
	bottom: 0;
    right: 0;
}

#stock_box {
	padding: 15px 20px 15px 20px;
}

#stock_tsx {
	display: inline;
	margin: 0px;
}


#stock_imo {
	display: inline;
	margin: 0px;
	color: #77c2ec;
}

#stock_price {
	display: inline;
	font-size: 20px;
	color: #77c2ec;
	padding-left: 5px;
}
	
/* stock_change and stock_change_down should be identical. The only difference is the background image and colour. ensure these values are the same */
#stock_change {
	position: relative;
	left: 42px;
	display: inline;
	font-size: 20px;
	color: #b4d405;
	background-image:url('/Canada-English/Images/stock_arrow.png');
	background-repeat:no-repeat;
	background-position: left;
	padding-left: 20px;
}

#stock_change_down {
	position: relative;
	left: 42px;
	display: inline;
	font-size: 20px;
	color: ##f6f6f6;
	background-image:url('/Canada-English/Images/stock_arrow_down.png');
	background-repeat:no-repeat;
	background-position: left;
	padding-left: 20px;
}


/* bottom links, left and right on stock box area */
#stock_left_link {
	position: absolute;
	display: block;
	bottom: 15px;
	left: 20px;
	font-size: 12px;
}

#stock_left_link a {
	color: #fff;
	background-image:url('/Canada-English/Images/stock_cta_arrow.png');
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 17px;
}

#stock_right_link {
	position: absolute;
	display: block;
	bottom: 15px;
	right: 20px;
	text-align:right;
	font-size: 12px;
}

#stock_right_link a {
	color: #fff;
	background-image:url('/Canada-English/Images/stock_cta_arrow.png');
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 17px;
}	



/* Crossfade image styling */

#crossfade1 {
	position: absolute;
	width: 935px;
	height: 395px;
	margin: 0;
	top: 0;
	left: 0;
	background:url('');
    background-repeat: no-repeat; 
  	background-attachment:fixed;
	z-index: -2;
}

#crossfade2 {
	position: absolute;
	width: 935px;
	height: 395px;
	margin: 0;
	top: 0;
	left: 0;
	background:url('');
    background-repeat: no-repeat; 
  	background-attachment:fixed;
	z-index: -1;	
}