/* PW CLF 2.0 TEMPLATE VERSION 1.04 | VERSION 1.04 DU GABARIT NSI 2.0 */
 
/* GENERAL CSS BEGINS | DEBUT DU CSS GENERAL */
h2.nav
{
font-size: 90%;
padding-bottom: 2px;
padding-top: 2px;
font-weight: bolder;
line-height: 1.3em;
}

li.menucontent
{
line-height: 17px;
}

a.menulink
{
font-size: 90%;
font-weight: 700;
margin-left: 0px;
}

/* left menu - menu gauche - option 2 */
#leftmenu2 .menucontent
{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
}

#leftmenu2 .menucontent, #leftmenu2 .menulink
{
background-color: #cccccc;
}

.addspace
{
line-height: 3px;
}

.option1 {
		margin: 0 0 8px;
		padding-left: 8px;
		padding-right: 7px;
		padding-top: 8px;
		border: 1px solid #369;
		}
/* GENERAL CSS ENDS | FIN DU CSS GENERAL */

/************************************************************************************************

	Site Specific Style-sheet for ESP (Your Public Service Pension and Benefits Web site)
	CSS - Date Downloaded:		2008-01-31
	CSS - Date last Modified: 	2008-06-24
	Creator:	Gilles Villeneuve

	To customized the styles to reflect ESP colors, layout and look, the following styles are overwriting 
	the previous styles listed above. Also many styles were added to the original CSS downloaded.
	
************************************************************************************************/

/*
================================================================================================
	To change the background image on the splash page 
================================================================================================
*/
div.msgareaalt {
	background: url(/images/bien-welc-alt.jpg) #666 no-repeat;
}

/*
================================================================================================
	To change OPTION 1 border color 
================================================================================================
*/
.option1 {
		border: 1px solid #999; /*dark grey border color*/
		}
		
/*
================================================================================================
	To change the menu link to be regular size (not bold) 
================================================================================================
*/		
a.menulink
{
font-weight: 500;
}
				
/*
================================================================================================
	To create a different coloured First Left Menu 
================================================================================================
*/
div.left li.menucontent {
	color: #000;	
	background-color: #EEEEDD;
	/*background: url(/images/whitegold150.gif) bottom left repeat; */
}

div.left a.menulink {
	background-color: #EEEEDD;
}

div.left li.menucontent {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #fff;
}


/*
================================================================================================
	To create the other Left Menus 
================================================================================================
*/
ul.leftmenu2 li.menucontent, div.menucontent {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #fff;
	background-color: #99BBDD;
	/*background: url(/images/whiteblue150.gif) bottom left repeat; */
}

ul.leftmenu2 a.menulink, div.menucontent a.menulink
	{
	background-color: #99BBDD;
	}

/*
================================================================================================
	To create a different coloured First Right Menu 
================================================================================================
*/
 div.right li.menucontent 
{
	color: #000;
	background-color: #EEEEDD;
	/*background: url(/images/goldwhite195.gif) bottom left repeat; */
}

div.right a.menulink 
{
	background-color: #EEEEDD;
}
#rightmenu1 .menucontent
{
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #fff;
}

/*
================================================================================================
	To create the other Right Menus 
================================================================================================
*/
#rightmenu2 .menucontent 
{
	color: #000;
	/*background: url(/images/bluewhite195.gif) bottom left repeat;	*/
	background-color: #99BBDD;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #fff;
}

#rightmenu2 .menulink
{
	background-color: #99BBDD;
}
#rightmenu3 .menucontent 
{
	color: #000;
	/*background: url(/images/bluewhite195.gif) bottom left repeat;	*/
	background-color: #99BBDD;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #fff;
}

#rightmenu3 .menulink
{
	background-color: #99BBDD;
}

/*
================================================================================================
	To eliminate the dotted line on the last item menu 
================================================================================================
*/
ul.leftmenu2 li.lastItem,
ul.leftmenu3 li.lastItem,
div.left li.lastItem, 
#rightmenu2 li.lastItem,
#rightmenu3 li.lastItem,
#rightmenu1 li.lastItem
{
    border-bottom: 0;
}

/*
================================================================================================
	To create a Box around the h1 headers 
================================================================================================
*/
.boxTitle 
{
		
		margin: 0 0 0 0px;
		padding-left: 8px;
		padding-right: 7px;
		padding-top: 2px;
		border-top: 1px solid #666;
		border-left: 1px solid #666;
		border-right: 1px solid #666;		
		color: #000; 
		background-color: #DDDDBB; /*beige color*/
}
.outlineBox 
{
		margin: 0 0 8px;
		padding-left: 5px;
		padding-right: 4px;
		padding-top: 8px;
		border-left: 1px solid #666;
		border-right: 1px solid #666;
		border-bottom: 1px solid #666; 
}
.boxTitle h1.box {
		
		background-color: #DDDDBB; /*beige color*/
		margin: 0;
		padding: 0px;
		font-size: 140%;
		color: #112244;		
}
.outlineBox h2{
	font-size: 130%;
}
/*
================================================================================================
	To add space to floating objects
================================================================================================
*/
.clear {
		width: 100%;
		clear:both;
}

/*
================================================================================================
	To center a box 50% of the width
================================================================================================
*/
.centeredBox50 {
		width: 45%;
		text-align: center;
		margin: 0 auto;
}

/*
================================================================================================
	To create a box with boxes in it (like formula)
================================================================================================
*/
/* this class is used to center a box */
.formulaBox {
		width: 98%;
		text-align:center; 
		background-color: #CCDDEE;
		padding: 1px;
		margin: 0;
		border: 2px solid #369;
		margin-bottom: 1em;
}
/* these classes are used to create boxes inside the main formulaBox 
They have different size (width) so use the ones you need up to the width of the formulaBox which is 98% */
.informula30
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		width: 30%;
		float: left;
}
.informula05
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		text-align: center;
		width: 5%;
		float: left;
}
.informula24
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		text-align: left;
		width: 24%;
		float: left;
}

.informula22
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		text-align: left;
		width: 22%;
		float: left;
}

.informula37
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		text-align: left;
		width: 37%;
		float: left;		
}
.informula55
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		text-align: left;
		width: 55%;
		float: left;
}
.informula08
{
		color: #000;
		background-color: #CCDDEE;
		font-weight: bold;
		font-size: 85%;
		margin: 0 3px 0 0;
		padding: 0;
		text-align: left;
		width: 8%;
		float: left;
}


/*
=====================================================================================================
	To create a two column layout with a dotted line below
=====================================================================================================
*/
div.two-cols {
	margin:  0;
	padding: 0;
	width: 98%;
	overflow: hidden;
}

div.two-cols-dotted {
	margin:  0;
	padding: 0;
	width: 98%;
	overflow: hidden;
	border-bottom: 1px dotted #ccc;
}

/* Common styles for left and right columns */
div.two-colsB {
	width: 70%;
	padding: 0.5em 0 0.5em 0;
	margin: 0;
	float: left;
}

/* Styles specific to the left column for terms */
div.two-colsA {
	width: 27%;
	padding: 0.5em 1em 0.5em 0;
	float: left;
}

div.two-colsA ul, div.two-colsB ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 1.5em;	
}

/*
=====================================================================================================
	To modify the wrapContainer to be able to insert it inside the countour line object of the page
=====================================================================================================
*/
div.center div.wrapContainer {
	width: 95%;
	float: none;
}

/*
=====================================================================================================
	To modify the wrapContainer to be able to insert it inside the countour line object of the page
=====================================================================================================
*/
div.center div.wrapContainer2 {
	width: 100%;
	float: none;

}
/*
================================================================================================
	To create a h2 with a background line colour that covers the full space width of the column
================================================================================================
*/
div.center h2.beigeBG {
		color: #112244;
		font-size: 125%;
		background-color: #eec;
		margin: 0;
		padding-left: 2px;
}

img.middle{
	vertical-align:middle;
}

/*
================================================================================================
	To increase the spacing of a block element and in a OL or UL list
================================================================================================
*/
spacing {
	margin-bottom: 1em;
}

ul.spacing li,
ol.spacing li {
	padding-bottom: 1em;
}

/*
================================================================================================
	To make title description links (e.g. for life events)
================================================================================================
*/
p.descLink a:link, p.descLink a:visited{
  	font-weight: bold; 
	display: block;
	padding-bottom: 4px;
}
p.descLink a.descLinkIn{
  	font-weight: normal; 
	display: inline;
	padding-bottom: 0px;
}
p.descLink a:hover {
	text-decoration: underline;
}
p.deslink2{
	margin-top:-18px;
}
/*
================================================================================================
	The following is used to create the hot button on the right menus
================================================================================================
*/
div.profile {
	padding: 5px 5px 5px 5px;
	margin-left: 75px;
	margin-right: 75px;	
}

div.profile a:link.profileButton, div.profile a:visited.profileButton {	
    display: block;
	margin: 10px;	
	padding: 8px 0px 8px 0px;	
	font: bold 9pt Arial, Helvetica, sans-serif;
	text-align: center;
    color: #112244;
	text-decoration: none;
	background-color: #DDDDBB;
	border: 1px solid #112244;
}

div.profile a:hover.profileButton {
	background-color: #cc9;
	text-decoration: underline;
}
/*
================================================================================================
	used for the Print and Enlarge Text functions
================================================================================================
*/
div.alignTopRight a:link.prntenlrglink,
div.alignTopRight a:visited.prntenlrglink {
	color: #006; /*navy blue color*/
	text-decoration: none;
	font-size: 85%;
}
div.alignTopRight a:hover.prntenlrglink {
	color: #006; /*navy blue color*/
	text-decoration: underline;
	font-size: 85%;	
}

/*
================================================================================================
	Fix to use for IE when using <em>, to use until earing from Web Planning
================================================================================================
*/
.italicFix {
  width: 100%; 
  overflow: hidden;
}


/*
================================================================================================
	The following class is espacially used for this site Top of Page.    
================================================================================================
*/
.topofpage {
  width: 100%;
  padding: 0 0 5px 0;
  text-align: right;
  color: #039; 
}

.topofpage a {
  float: right;
  text-align: center;
  padding-bottom: 2px;
}

/*
===============================================================================================
	To change the Proactive Disclosure background color 
===============================================================================================
*/
div.prodis {
	background-color: #112244;  /*dark blue color*/
}

/*
================================================================================================
	The following class is used for formula ===============================================================================================
*/
div.formula {
	font-weight: bold;
	font-size: 85%;
	color:  #000;
	background-color: #CCDDEE;
	padding: 5px 2px 5px 2px;
	border: 2px solid #369;
	margin-bottom: 1em;
	display: block;
	text-align:center;
	}
/************************************************************************************************

	Following are Customized CSS Classes that come from the last version of the 
	PWGSC Template (institution.css)
	
	Date of the addition:	2008-06-25
	Date modified:			2008-06-25
	
************************************************************************************************/


/* ---------------------------------------------------
CUSTOM CSS BASED ON CHANGE REQUESTS 
 ---------------------------------------------------- */

/* ---------- START HORIZONTAL LIST
Provides horizontal list navigation for 
documents, publications, reports or results 
that span more than one page. 
------------------------------------- */
ul.doc-navigation {
	border: 1px solid #369;
	margin: 0.2em 0;
	padding: 1px;
	line-height: 1.7;
	text-align: center;
}
	
ul.doc-navigation li {
	display: inline;
}
	
ul.doc-navigation li a {
	padding: 0 0.4em;
	font-weight: bold;
	
}

ul.doc-navigation li.liletter {
	padding: 0 0.4em;
	font-weight: bold;
	color: #000;
}

ul.doc-navigation-note {
	border: 1px solid #000;
	margin: 0.2em 0;
	padding: 1px;
	text-align: left;
}
ul.doc-navigation-note li {
	display: inline;
}


/* ---------- START HORIZONTAL LIST
Provides horizontal list navigation for 
documents, publications, reports or results 
that span more than one page. 
------------------------------------- */
div.doc-align-left {
	border: 1px solid #369;
	padding: 2px;
	background-color:#CCDDEE;
}

div.doc-align-center {
	border: 1px solid #369;
	margin: 0.2em 0;
	padding: 3px;
	text-align: center;
	background-color:#CCDDEE;
	margin-left: 10em;
}
div.doc-align-center2 {
	border: 1px solid #369;
	text-align: center;
	background-color:#CCDDEE;
	margin-left: 14.5em;
}
.par-backcolor-gray{
	padding:2px;
	background-color: #BBCCDD;
	margin-top:0px;
}

div.doc-green-box {
	border: 1px solid #369;
	background-color:#CCDDEE;
}

/* ---------- Double-spaced List
--------------------------- */
ul.double-space,
ol.double-space {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Apply a space after a list item */
ul.double-space li,
ol.double-space li {
	padding-bottom: 1em;
}

/* Include a space at the top of the list */
ul.double-space ul,
ol.double-space ol,
ul.double-space ol,
ol.double-space ul {
	padding-top: 1em;
}


/* Remove the extra spacing after the list */
ul.single-space,
ol.single-space {
	margin-bottom: 0;
}

/* Remove the extra space after the list item. */
ul.single-space li,
ol.single-space li {
	padding-bottom: 0;
}

/* ---------- Display DL as 2 Column 
----------------------------------- */
dl.two-column {
	margin:  0;
	padding: 0;
	width: 98%;
}

/* Common styles for left and right columns */
dl.two-column dt, dl.two-column dd {
	width: 70%;
	padding: 0.5em 0 1em 0;
	margin: 0;
	float: left;
	border-top: 1px dotted #ccc;
}

/* Styles specific to the left column for terms */
dl.two-column dt {
	width: 27%;
	font-weight: bold;
	padding-right: 2%;
}

dl.two-column span{
	font-weight: normal;
}
/* Styles for left and right columns for STEPS (narrow and no dotted line) */
dl.steps {
	margin:  0;
	padding: 0;
	width: 98%;
}

dl.steps dt, dl.steps dd {
	width: 76%;
	padding: 0 0 0.5em 0;
	margin: 0;
	float: left;
}

/* Styles specific to the left column for STEP terms */
dl.steps dt {
	width: 20%;
	font-weight: bold;
	padding-right: 3%;
}

dl.basic dt {
	font-weight: bold;
	margin-bottom: 1em;
}

dl.basic dd {
	margin-bottom: 1em;
}

/* ----- BASIC TABLE FORMAT 
-------------------------- */
table.basic {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}
	
table.basic caption {
	font-weight: bold;
	padding: 10px;
}
	
table.basic td, table.basic th {
	padding: 5px;
	border: 1px solid #369;
	vertical-align: top;
}

table.basic th {
	background: #bbccdd;
	color: #000;
	text-align: center;
	vertical-align: middle;
}

/* A header with a row scope can use a different alignment. */
table.basic th.row {
	text-align: left;
	vertical-align: top;
}

/* ---------- MORE TABLE FORMATTING 
------------------------ */

/* Cell Highlight */
tr.highlight, td.highlight {
	background: #eee;
}

/* Secondary Header for Basic Table */
/* A secondary headers looks different to emphasize a different level of hierarchy */
table.basic th.secondary {
	background: #fff;
	color: #369;
}

/* Void Table Cell */
table tr td.void, table tr th.void {
	background: none;
	border-width: 0;
}


/* ------------- ALTERNATE FORMAT 
FORMATS LINKS TO ALTERNATE FORMATS 
SUCH AS PDF, LWP, DOC, ETC... 
------------------------------------- */
.alternate-format {
	text-align:right;
	border-bottom: 1px solid #369;
	border-left: 1px solid #369;
	padding: 2px 0 10px 10px;
	margin: 0 0 10px 10px;
	float: right;
	font-size: 90%;
	font-weight: bold;
}
/* ---------------- DOC INFO 
USED FOR PUBLICATIONS ISBN-TYPE INFO 
AT THE BEGINNING OF A WEB PAGE 
--------------------------- */
div.doc-info {
	font-size: 90%;
	border: 1px solid #369;
	padding: 8px 8px 0 8px ;
	margin-bottom: 1.4em;
}

div.doc-info p {
	margin: 0 0 1em 0;
}

/* ---------------- NOTICE 
Provides a CALLOUT design feature 
--------------------------------- */
/* FULL WIDTH CALLOUT */
div.notice, div.notice-left, div.notice-right {
	background: #CCDDEE /* not web smart #D0E1ED */;
	padding: 2px 20px;
	margin-bottom: 1em;
}
/* CALLOUT Left float */
div.notice-left {
	width: 35%;
	float: left;
	margin-right: 1em;
}
/* CALLOUT Right float */
div.notice-right {
	width: 35%;
	float: right;
	margin-left: 1em;
}
/* sets callout font size color */
div.notice h2, div.notice-left h2, div.notice-right h2,
div.notice h3, div.notice-left h3, div.notice-right h3,
div.notice h4, div.notice-left h4, div.notice-right h4,
div.notice h5, div.notice-left h5, div.notice-right h5,
div.notice h6, div.notice-left h6, div.notice-right h6 {
	font-size: 1em; /* 10pt; absolute fonts sizes are not permitted, use either em or % */
	color: #000;
	border-bottom: 1px solid #369;
	margin-top: 1em;
}

div.notice p, div.notice-left p, div.notice-right p {
	font-size: 1em; /* 10pt; absolute fonts sizes are not permitted, use either em or % */
	color: #000;
	margin-top: 1em;
}

/* ------------- CRITICAL MESSAGES
can be used for critical-type notices, 
announcements or error messages 
more than once on a page
------------------------------------ */
div.critical {
	padding: 2px 5px;
	margin-bottom: 1em;
	border: 3px solid #D00;
	text-align: center;
	font-weight: bold;
}

div.critical h2, 
div.critical h3,
div.critical h4,
div.critical h5,
div.critical h6, 
div.critical p {
	/* font-size: 10pt; */
	color: #D00;
	/* border-bottom: 1px solid #D00; */
	/* margin-top: 0.5em; */
	/* padding-bottom: 0.5em; */
}
/* ------------------------ 
REO specific error handling included to 
synchronize with PWGSC critical class, 
uses id=, can only be used once on a page 
------------------------- */
#actionErrors,
#actionMessages {
	font-weight: bold;
	color: #D00;
	padding: 2px 5px;
	border: 3px solid #D00;
	margin-bottom: 1em;
	display: block;
	text-align:center;
	}
	
/* ------------------- HEADING SIZES -------------
CSS Over-ride Testing June 12, 2008 DT
Reduced Heading sizes, H1 and H2 were too similar
--------------------------------------------------*/
h1 {
	font-size: 140%;
}

h2 {
	font-size: 125%;
	color: #112244;
}

h3 {
	font-size: 110%;
	color: #000;
}

h4 {
	font-size: 100%;
	color: #000;
}
h5 {
	font-size: 90%;
	color: #000;
}
h6 {
	font-size: 80%;
	color: #000;
}


/*-------------------------------------------
END CSS Overiride Testing
-----------------------------------------*/ 
div.left #leftmenu2 .menucontent 
{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	background-color: #666666;
	/*background: url(/images/whiteblue150.gif) bottom left repeat; */
}
/*v1.1 institution.css */

.contacusinten {
	margin-left:40px;
}

/* ----------------
Francais
------------------- */
div #tab .tabnav li a{
	color:#fff;
}
ul.tabnav{
	margin:0;
	padding:1px;
	list-style-type: none;
	color: #fff;
    height: 60px;

}
.tabnav li {
	float:left;
	width: 98px;
	margin-right:2px;
}
.tabnav li a:link, .tabnav li a:visited {
	display:block;
	color: #FFFFFF;
	text-decoration: none;
	background:#FFFFFF url(../images/btnrnd2.gif) repeat-x top left;
	height:45px;
	padding:3px 1px;
	font-weight:normal;
	text-align:center;
	font: bold 9pt Arial, Helvetica, sans-serif;
}
.tabnav li a:hover, .tabnav li a:active {/*background:#fff;*/
	border-bottom:none;
	color:#000000;
	background:#FFFFFF url(../images/btnrndmo2.gif) repeat-x top left;
}

/*Anglais*/
div #tab .tabnav2 li a{
	color:#fff;
}
ul.tabnav2{
	margin:0;
	padding:1px;
	list-style-type: none;
	color: #fff;
    height: 40px;
}
.tabnav2 li {
	float:left;
	width: 98px;
	margin-right:2px;
}
.tabnav2 li a:link, .tabnav2 li a:visited {
	display:block;
	color: #FFFFFF;
	text-decoration: none;
	background:#FFFFFF url(../images/btnrnd.gif) repeat-x top left;
	height:35px;
	font-weight:normal;
	padding:3px 1px;
	text-align:center;
	font: bold 9pt Arial, Helvetica, sans-serif;
}
.tabnav2 li a:hover, .tabnav2 li a:active {/*background:#fff;*/
	border-bottom:none;
	color:#000000;
	background:#FFFFFF url(../images/btnrndmo.gif) repeat-x top left;
}
/* ----------------
END TABS 
------------------- */
.red-dark {
	color: #BB0000;
	background-color: transparent;
}

.indexaz ul li {
	list-style-type: none;
	font-weight: bold;
}

.indexaz ul li ul li {
	list-style-type: disc;
	font-weight: normal;
}

.tabrtrliasonbackground{
	background-color:#CCDDEE;
	text-align:left;
}