@charset "utf-8";
@import url("supportCSSFiles/basicRules.css");
/* $Id$ */

/*
TABLE OF CONTENTS

ZERO OUT - Sets most everything to ZERO, so there's a clean slate to start with - set any defaults here (Lists especially)
BODY - sets the base font
POSITIONING - generic tags for positioning
LINKS - default and other link styling
#HEADER - Ontario logo, #arc, #search, #navbar (main menu/navigation), #banner
#right_column - Main content area (Many layouts - see style guide)
#left_column - .left_nav (left hand navigation group), .menu (menu list)  
#FOOTER - #full_footer, Copyright, Site Map, Contact Us, Privacy Notices
*/



div.grid_other {width:45%; float:right;}
.three_cols .grid_other {width:50%;}
.grid_6 .content .photo .photo_top, 
.column .content .photo .photo_top{margin-left:0;border: 0;}
.grid_6 .content .photo .photo_bottom, 
.column .content .photo .photo_bottom{margin-left:0;top:-3px;position:relative;}
.grid_6 .content{margin-left:1em;}
.row *  {margin-right:1em;}
b, em, i, strong, sub, sup {margin-right:0!important;}
.row div {margin-right:0; width: 100% !important; border: 0;}
.row table {zoom:90%!;}
.row table th {text-align:center;}
.newline {clear:left;}
#arc fieldset {text-align:right;}
#arc fieldset legend {display:none;}
.row a {margin:0;}
ul#pageActions li.print a {top:-.5em;position:relative;}
.row.three_cols .column{width:33%!important;}
.nozoom {zoom:100%;}
ul ul, ol ol{margin-bottom:0;}
ol ol {list-style-type:upper-alpha;}
.grid_8 .news_top {width:430px;background-image: url(/images/corner_news_top.gif); background-position: top left;  margin-left:5px; margin-top: 10px}
.grid_4 .news_top {width:210px;background-image: url(/images/corner_photo_top.gif); background-position: top left;  margin-left:5px; margin-top: 10px}
/* -ZERO OUT EVERYTHING - * ---------------------------------------------------------------- */
/* -this css sets all padding, margins, defaults to 0 - * ---------------------------------- */
/* tables still need 'class="cellSpacing0Px"' in the markup */
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
} */
html {
  height: 100%;
}
body {
  height: 100%;
}

td
{
  vertical-align: top;
}

blockquote, q {
  quotes: none;
}

/* this is the behaviour for form fields when they are selected */
input:focus,select:focus,a:focus {
  outline: 1px solid #000}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none
}
del {
  text-decoration: line-through
}

/* tables still need 'class="cellSpacing0Px"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0
}

/* -ZERO OUT EVERYTHING - END * ---------------------------------------------------------------- */

/* ----------- ZERO OUT LISTS - set your default list styles here ---------------- */
/* this is the default style - most lists use no bullets - to add custom bullets see line: chnageme.css - change at will - */
/* ul {
  list-style: none;
} */

/* sets the base font to approx 10pt */
body { 
  background-color: #FFF; 
  color: #000;
  /* text-align: center  */
}
 

/* default sizing for standard elements -------------------------- */   /* SET text attributes here */

p {
  margin: 1em 0 1.5em /* sets default margins for all paragraphs */
}

/* -------- HEADERS --------- */

h1, h2, h3, h4 { font-weight: bold;}   /* must set explicitly, it is zeroed out above */

h1 {
  color: #000; 
  font-size: 1.4em;
  margin: 0.5em 0 1em 0  
}
h2 {
  color: #000;
  font-size: 1.4em;
  padding-bottom: 6px 
}
h3 {
  color: #000; /* COLOUR CHANGE */
  font-size: 1.1em;
  margin: 0.5em 0 /* default margins for h tags: in this order: top/bottom, right/left */
}
h4 {
  color: #000; 
  margin: 0.5em 0 0.7em 0
}

img {
  border: 0
}
/* --------------------------------------------------------------- */ 



/* common/generic styles ------------------------------------------------- */ 

/* positioning */
.right { /* aligns - floats right */
  float: right;
  margin-left: 20px;
  text-align: right;
  margin-right: 0 
}
.left { /* aligns - floats left */
  float: left;
  margin-right: 20px;
  margin-left:0
}
.top { /* removes top margin */
  margin-top: 0
}
.bottom { /* removes bottom margin */
  margin-bottom: 0
}

.center { /* centers */
  text-align: center;
  margin-left: auto;
  margin-right: auto
}
.clear { /* to clear floats */
  clear: both
}

/* other */
.small { /* smaller text */
  font-size: .85em;
}
.large { /* larger text */
  font-size: 1.4em;
  margin-top: 20px;
  display: block
}
.indent { /* use to indent text in a pragraph */
  margin-left: 2em !important;
}


.label {
  display: block;
  width: 5em;
  float: left
}

/* SEARCH BAR - submit (go) button default */

.submit { /* styles the submit / GO button -- */
  background-color: #aa3d12; /* COLOUR CHANGE */
  color: #fff;
  font-weight: bold;
  border: none;
  float: left;
  width: 100%;
  border: 1px solid #000 /* when BGimages are turned off there is no search box visible - adding a border will make it visible - coloud also add a bgcolor instead */
}

hr { height: 1px; color: #bfbfbf; background-color: #bfbfbf; border: none; float: left; clear: both; width: 96%; margin: 1em 0}
hr.thick { height: 3px; color: #666; background-color: #666} /* thicker separator line - change colour if desired for greater emphasis */
/* --------------------------------------------------------------- */ 



/* tables still need 'class="cellSpacing0Px"' in the markup - CSS2 does not yet have proper table support */


/* ---- LINKS ---------------------------------------------------- */

/* default link style */

a {
  text-decoration: none;
  color: #0e6789;
  background-color: transparent
}
a:visited {
  color: #666
}

/* #language a,  a:link,  a:visited,  a:active {
  text-decoration: none;
  font-weight: bold;
  color: #0e6789;
  background-color: transparent
} */
/* a:hover {
  text-decoration: underline;
  color: #000
} */
/* default link style */

/* --- SITE HOLDER(wrapper) ---- */

#wrapper {
  margin-left:auto;
  margin-right:auto;
  text-align: left;
  width:1000px;
  margin-top: 10px
}

#wrapper > #left_column
{
	float: left;
}

#wrapper > #right_column
{
	float: right;
	width: calc(100% - 280px);
}

/* LEFT NAV STYLES --------------------------------------------- */

/* #left_column {
  /* width: 260px;*
  width: 250px;
  display:inline;
  float:left;
  /*margin-right:20px;*
  margin-right: 30px;
  margin-left:0;
  font-size: 1.2em; /* STANDARDIZE *
  /* line-height: 160% * /* STANDARDIZE *
}*/

#left_column
{
	display: block;
	margin-right:30px;
	width: 250px;
}

#left_column ul { margin: 0; padding: 0}

.leftnav {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px
}

/* -- First colour of Header bar for Menu titles -- */

.leftnav .header {
  border-bottom: 1px solid #fff; /* ncs may 29/09 - added top border call */  
  position: relative;
}
.leftnav .header a { 
  color: #333;
  font-weight: bold;
  display: block;
  padding: 4px 5px 6px /* ncs jun2/09 moved all padding to this selector for backwards compatibility */
}
.leftnav .header img, .downarrow {
  position: relative;
  left: 235px;
  top: 7px
}
/* -- Second colour of Header bar for Menu titles -- */
.leftnav .mycolour .header {
  background: #1d2d43 url(/images/arc_left_mycolour.gif) top left no-repeat /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
  /* may 29 - removed bottom border call */
}
.leftnav .mycolour .header a { 
  color:#fff; /* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */ 
  font-weight: 700
} 

/* -- Standard MY GOVERNMENT colour of Header bar for Menu titles -- */

.leftnav .mygovt .header {
  background-color: #4a1910; /* STANDARD COLOUR - DO NOT EDIT */
  background-image: url(/images/arc_left_red.gif);
  background-repeat: no-repeat
}

.leftnav .mygovt .header a { 
  color: #fff; /* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */ 
  font-weight: 700
} 

.leftnav h2 { /* ncs jun2/09 removed font-size, moved to to .leftnav .header for backwards compatibility - set padding/margin to 0 for chrome */ padding: 0 20px 0 0; margin:0}

/* EXPANDING MENU STYLES --------------------------------------------- */

.menu {
  width: 100%;
  float: left
}

.menu li {
  display: inline 
}

.menu a, .menu a:link, .menu a:visited, .menu a:active {  
  /* color: #000;  */
  /* font-weight: bold; */
  display: block;
  padding: 0.8rem;
  border-bottom: 1px dotted #666; 
  /* background: #f7f7ef url(/images/triangle_right.gif) no-repeat 12px 13px */
  background: #f7f7ef;
}

.menu li li a, .menu li li a, .menu li li a:link, .menu li li a:visited, .menu li li a:active {/* sub menu styling - positions the arrow graphic in a bit more - EDIT ncs jun2/09 added pseudo selectors for specificity*/
  padding-left: 3.5em;
  background-color: #FFF;
}

/* MENU - Current item colour - USE to DESIGNATE THE CURRENT PAGE - add this id to the appropriate li in the menu */

#current { background-color: #fff}


.menu ul li
{
	/* background:#f7f7ef url(/images/triangle_right.gif) no-repeat 23px 13px !important; */
	background: #f7f7ef !important;
}
/* ------------ END LEFT NAV ------------------------ */



/* ------------ HEADER - ONTARIO LOGO / BANNER FLASH / SEARCH / NAV -------------------- */
#header { 
  /*width: 980px;*/
  width: 100%;
  position: relative;
  margin-bottom : 10px}

/* HEADER LAYOUT STYLES --------------------------------------------- */

#arc {
  width: 100%;
  height: 65px;
  float: left;
}

#arc form { /* search form */
  float: right;
  margin-top: 20px;
  padding-right: 20px;
}

#searchBox { /* search box */
  width: 300px;
  background-color: #fff;}
  
#searchBox:hover {
  border: 1px solid #fff
}
#submit { /* submit (go) button */
  border: 0;
  color: #fff
}
#submit:hover { /* submit (go) button hover state */
  border: 1px solid #fff
}
/* -- top nav -- */

#textlinks a.last, #navbar p a.last { border: none; padding-right: 0}

#textlinks {
  position: absolute;
  right: 0;
  top: 5px;
  text-align: right;
  margin-right: 0 /* added jun2/09 */
}

#textlinks a {
  padding: 0 1em 0 .75em;
  border-right: 1px solid #999
}

a#skipNav:link, a#skipNav:visited, a#skipNav:hover { color: #FFF; border: none}
a#skipNav:active, a#skipNav:focus { color: #17397d; border-right: 1px solid #999}


#navbar { /* the main nav bar */
  width: 100%;
  float: left;
  border-bottom: 20px solid #FFF;
  background-color: #1d2d43  /* COLOUR CHANGE - replace Background colour with your colour that matches the graphic */
}

#home #navbar { /* the main nav bar */
  border-bottom: 8px solid #FFF
}

#navbar p
{
  font-weight: bold;
  text-align: center;
  padding: 7px 0;
  margin: 0;
  overflow: hidden
}

#navbar p a { /* links in navbar */
  color: #FFF; /* COLOUR CHANGE - MAKE SURE CONTRAST IS VERY HIGH */
  padding: 0 10px 0 8px
  /*border-right: 2px solid #FFFFFF; ncs removed border call to leave only in changeme - for older layouts (so they can remove it) */
}
/* -- END topnav --*/

#banner { /* holds flash banner or static banner */
  width: 980px;
  height: 185px;
  overflow: hidden; /* Necessary for IE6 */
  clear: left;
  margin-bottom: 10px;
  border-bottom: 4px solid #2f2f2f
}
/* END flash banner or static banner */

/* SPLASH STYLES */
#container, #splash_page #container {
  width: 800px;
  text-align: center;
  margin: 0 auto
}
#splash { 
  margin-top: 50px;
  float: left;
  padding-bottom: 80px;
  text-align: left;
  background: url(/images/header_arc.gif) no-repeat bottom left;
  border: 1px solid #8d2f0e;
  border-bottom: 2em solid #8d2f0e
}

#splash .two_cols { 
  background: url(/images/splash_line.gif) no-repeat top center; 
  float: left;
  width: 800px;
  text-align: center;
  padding-top: 3em
}

.button { 
  margin: 20px auto; 
  width: 210px
}

#splash .two_cols .column .button { margin: 20px auto; width: 210px}
#splash .two_cols .column .arrow  { vertical-align: middle}

#splash h2 a { font-weight: bold; color: #000; text-transform: uppercase;/* COLOUR CHANGE - match if you like */} 

/* -- RIGHT COLUMN / CONTENT --*/
/*#right_column { /* content area *
  width: 700px;
  float: right;
  margin-right: 20px;
  font-size: 1.3em; /* STANDARDIZE *
  line-height: 1.0em; /* STANDARDIZE *
  display: inline;
  overflow: hidden
}*/

#right_column
{
	width: 100%;
	display: block;
}

body#onecol div#right_column { /* content area for one column layouts */
  width: 980px;
  float: right;
  margin-right: 20px;
  overflow: hidden
}
/* -- AD BANNER --*/
#ad_banner{/*padding-bottom:1em;*/
clear:both;border:1px solid #ccc;background-color:#30F;margin-bottom:20px;width:698px;overflow:hidden;height:87px}
#ad_banner div{margin:-1px 0 0 -4px}

#footer {
  clear: both;
  width: 100%;
  padding-top: 20px
}

/*.row {
  width: 720px;
  float: left;
  display: inline;
  margin-right:  20px;
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
  overflow: hidden;
}*/

.row
{
	width: 100%;
	margin-bottom: 20px;
	border-bottom: 1px dotted #ccc;
}

/*
.row p img {
  float: left; 
}
*/

.row th, .row td
{
  border-style: solid;
  border-width: 1px;
  padding: 5px;
  margin: 0;
}

.row table
{
  width: 680px;
}

#meta-table th, #meta-table td {border-style: none; border-width: 0px;}

.row caption
{
  padding:5px 0;
}

.row ol { 
  clear: both;
}

.row ul { 
  clear: both;
}

.row ol li {
  margin-left:  2em;
  margin-right: 2em;
  padding: 5px 5px 5px;
  }

.row ul li {
  margin-left:  2em;
  margin-right: 2em;
  padding: 5px 5px 5px;
  }

.row h3 {  padding-left:.5em;color: #660000; clear: both;}
.row h4 {  padding-left:.5em; color: #660000; clear: both;}
.row h5 {  padding-left:.5em; clear: both;}
.row h6 {  padding-left:.5em;}
.row SUP { position: relative; top: -0.5em; font-size: 80%; }
.row SUB { position: relative; bottom: -0.5em; font-size: 80%; }

.row p { 
  clear: both;  
  margin-right: 20px;
  margin-left:  0.5em;
}

body#onecol .row { /* a style to contain other elements on the page - gives a dotted border at the bottom of the area */
  width: 1000px
}

/* #right_column a, a:link, a:visited, a:active {
  text-decoration: none;
  font-weight: bold;
  color: #006600;
  background-color: transparent;
} */

/* #right_column a:hover {
  text-decoration: underline;
  color: #660000;
} */

.two_cols {
  background: url(/images/two_cols.gif) repeat-y; background-position: -5px 0
}
.three_cols {
  background-image: url(/images/three_cols.gif);
  background-repeat:repeat-y;
  background-position: -4px -50px
}


.two_cols .column
{
	/* when a .column is placed inside a two_cols row you get 2 equal columns of 340px that fill the right_column */
	width: 45%;
}

.three_cols .column, .box .column, .two_thirds .other { /* when a .column is placed inside a three_cols row you get 3 equal columns of 220px that fill the right_column */
  width: 220px}

.two_thirds .column { /* use in combination with a photo, or to create a layout that splits the screen into 2 sections one twice as big as the second */
  width: 460px}


/* updated nav style nov 4 */
#nav ul {
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 0;
  margin: 0;
  overflow: hidden}
#nav ul li {
  margin-left: 0;
  padding: 10px 0 8px;
  border-left: 2px solid #fff;
  list-style: none;
  display: inline;
  }
#nav a { color: #fff}
/* FOOTER STYLES ------------ */

#full_footer { /* changed from orginal to make the footer span the whole bottom area */
  border-top: 1px solid #7f7f7f;
  padding-bottom: 1em;
  width: 100%}

#footer p { 
  font-weight: bold;
  text-transform: uppercase;
  color: #666;
  margin-top: 0.7em;/* margin added */
  float: left;
}
/* new footer styles for standardized footer layout */
#footer a, #footer a:link, #footer a:visited, #footer a:active { color: #666; text-decoration: underline}
/* --- list of links footer - new nov2009 ---- */
#footer ul.right { width: 500px; margin-top: 0.7em; margin-right:-10px}
#footer ul.left { width: 480px; margin-left: -10px}

#footer ul {
  font-weight: bold;
  text-transform: uppercase;
  color: #666;
    margin-left: 0;
  padding-left: 0;
  display: inline;
  margin: 0 0 1.0em
  } 

#footer ul li {
  margin-left: 0;
  margin-top: 0.7em;
  padding: 0 10px;
  border-left: 1px solid #000;
  list-style: none;
  display: inline;
  }
#footer ul li.noborder { border: 0 none}
#footer ul.left li { float: left}
#footer p.last-mod { text-transform: none; clear: right; float: right; text-align: right; width: 500px; margin: 0 10px 0 0}
/* --- list of links footer - new nov2009 ---- */
/* --- TITLE BARS --- */

.row .header { /* a full length header that spans all columns -USE: wrap .header in a .row */
  width: 700px;
  float : left;
  clear : both; 
  margin : 0 0 0.5em 0; 
  border-top: 3px solid #666;
  border-bottom: 1px solid #999;
  background-color: #e0e0b7; /* COLOUR CHANGE the background colour to your site's colour scheme */
  background-image: url(/images/arc_right_main.gif);
  background-repeat: no-repeat; 
  margin-right: 20px;
}


/* ---- V1.2 code for early adopters --- */
.two_thirds .column .header { /* use in combination with a photo, or to create a layout that splits the screen into 2 sections one twice as big as the second */
  width: 460px}
.two_cols .column .header { /* 2 seperate headers - USE: class="row two_cols" nest .content div inside, then nest .header div inside that */
  width: 340px}
.three_cols .column .header, .two_thirds .other .header { /* 3 seperate headers - USE: class="row three_cols" nest .content div inside, then nest .header div inside that */
  width: 220px}
.two_cols .split_lrg .content {
  padding: 0 0 0 2px}
.two_cols .split_lrg .content img {
  float: left}

.two_cols .split_lrg h3, .two_cols .split_lrg .content ul, .two_cols .split_lrg .content p {
  float: left;
  width: 160px; 
  padding: .8em 0 0 10px
} 

.row .splt_lrg .header { margin-bottom: 0}

.two_cols .split_lrg .content p { padding-top: .5em} /* overwrites prev statement to set the spacing back to default at the top */

.column, .two_cols .column, three_cols .column, .two_thirds .column, .box, .two_thirds .other
{
	position: relative;
	float:left;
	overflow: hidden;
	margin-left: 1rem;
	margin-right: 1rem;
}
/* ---- END V1.2 code for early adopters --- */
/* ------ HEADERS MORE ------ */
.header h1 {
  color: #333;
  margin: 5px 10px 0 10px;
  padding: 0 0 5px 0;
  font-size: 1.2em;
  float: left
}

.header h2 {
  color: #333;
  margin: 5px 10px 0 10px;
  padding: 0 0 5px 0;
  font-size: 1.1em;
  float: left
}
/* added more2 style */
.more, .more2 { /* style for the more> links - more2 added nov2009 */
  /*right: 26px; removed by karren*/
  float: right;
  /*position: relative; removed by karren*/
  /*top: 5px; removed by karren*/
  margin: 0.5em 0.5em 0 0;
  /*<!--padding: 0 0 0 30px;-->*/
  font-weight: bold;
  text-transform: uppercase	
}
.more img { /* positions the chevron/arrow after the MORE link */
  vertical-align : middle;
}
/* added more2 style - this is a newly positioned link allowing for nicely structured html */

.more a, .more2 a { color:#000}/* added more2 style */

/* coloured box */

.box {
  float: left;
  width: 720px;
  background-color: #f8f6d7;
  border-bottom: 1px solid #666;
  margin: 10px 0 20px 0;
  overflow: hidden
}

.box h3, .box p, .box ul, .box table { margin-left: 20px; margin-right: 20px}
.box table td { border-top: 1px dotted #666}

.box .more { right: 46px; padding-left: 40px}

/* ---- PAGE ACTIONS (email,print,accessibility ) ----*/
#pageActions{margin:0 !important;padding:0;float:right;text-transform:uppercase}
#pageActions a:hover{text-decoration:underline}
ul#pageActions, #pageActions ul {list-style-image:none;list-style-position:outside;list-style-type:none;padding: 2px 0 0}
#right_column  #pageActions li{list-style-type:none;float:left;font-weight:bold}
#pageActions li.email{background:url(/images/icon_email.gif) no-repeat 1px 1px !important;font-size:.8em;margin:0 !important}
#pageActions .email a{margin:0;padding:0 10px}
#pageActions li.print{margin:0 !important}
#pageActions .print a{margin:0;padding:0 5px 0 10px}
#pageActions li.accessibility{background:url(/images/icon_accessible.gif) no-repeat 5px 1px !important;padding:0;margin:0 !important;}
#pageActions .accessibility a{margin:0;padding:0 0 0 26px}
#pageActions li.share{padding:0;margin:0 !important;}
#pageActions .share a{margin:0;padding:0 0 0 18px}
/* --- Photo/Nav Tops and Bottoms (decoration) -- */

img.photo  {  border-top: 1px solid #fff; border-bottom: 1px solid #fff;  width: inherit; float: left}
.column img.photo, .content img.photo { width: 210px; margin-left:5px}
.photocap  { background-repeat: no-repeat; height: 6px; clear: left; margin-left:5px} /* used for the left floated series of images - you can put a caption below - this styles that caption */
#left_column .photocap { margin-left:0}
.photo_top    { width: 210px; background-image: url(/images/corner_photo_top.gif); background-position: top left;  margin-left:5px; margin-top: 10px}
.photo_bottom { width: 210px; background-image: url(/images/corner_photo_bottom.gif); background-position: bottom left; margin-left:5px}
.nav_top      { background-image: url(/images/corner_nav_top.gif); background-position: top left}
.nav_bottom   { background-image: url(/images/corner_nav_bottom.gif); background-position: bottom left}
#left_column .photolink { /*width: 260px;*/ width: 250px}
.photolink       { width: 125px; float: left}
.photolink a     { font-weight: bold}
.photolink .text { float: left; padding: 5px 0 0 5px; color: #FFF /* set colour of link text under photos/ministers photo here */}

.icon_top     { width:125px; background-image: url(/images/corner_icon_top.gif); background-position: top left}
.icon_bottom  { width:125px; background-image: url(/images/corner_icon_bottom.gif); background-position: bottom left}
.icon {   width: 125px;   float: left; padding-bottom: 20px}
.icon .photolink, .icon .photocap { padding-right:0; margin-left:0}

.spacer { float: left; width: 40px}
.half_spacer { float: left; width: 19px}

.mini_spacer { float: left; width: 5px}

/* -- COLOURS --*/
.grey { background-color: #868686}
.mycolour { background-color: #000}
.red { background-color:#F30}

/* --- CONTENT AREA LISTS --- */

#right_column ul li {
  list-style-type:disc; /* can change to custom bullets here - comment out disc style and use line below instead 
  background: #FFFFFF url(/images/triangle_right.gif) no-repeat scroll -2px 7px */
  background: #FFFFFF;
  color:#000;
  margin-left: 20px;
  padding-left: 5px;
}
#right_column ul li {
  color: #566d1b /* text color for lists in content area */
}

.column ul, .content ul   { margin: 0; padding: 0; margin-bottom: 20px; margin-top: 10px}

/* ------ GRID - ------------ */



.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_8plus, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16  {
  display:inline;
  float:left;
  border-right: 1px dotted #ccc;
  overflow: hidden;
  margin-left:0;
  padding-right: 9px;
  margin-right:10px
}

/*.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
  background-color: #CCFFFF;
  border: 1px dotted green;
}*/ /* For planning, testing debugging */
/* widths WIDER THAN THE #right_column NAV GRID BOXES */
#wrapper .grid_16, .grid_16 .header { /* whole page minus 20px (nav extra space) */ width:960px}
#wrapper .grid_15, .grid_15 .header { width:880px}
#wrapper .grid_14, .grid_14 .header { width:820px}
#wrapper .grid_13, .grid_13 .header { width:760px}

/* END widths WIDER THAN THE #right_column NAV GRID BOXES */

#wrapper .grid_12, .grid_12 .header { /* whole right_column */  width:700px}
#wrapper .grid_11, .grid_11 .header { width:640px}
#wrapper .grid_10, .grid_10 .header { width:580px}
#wrapper .grid_9, .grid_9 .header { width:520px}

#wrapper .grid_8plus, .grid_8plus .header {  /* for layouts w no left nav - transitional */ width:500px}
#wrapper .grid_8, .grid_8 .header { /* two thirds of right_column */  width:460px}
#wrapper .grid_7, .grid_7 .header { width:400px}
#wrapper .grid_6, .grid_6 .header { /* half of right_column */  width: 48% !important}
#wrapper .grid_5, .grid_5 .header { width:280px}
#wrapper .grid_4, .grid_4 .header { /* one third of right_column */ width:220px}
#wrapper .grid_3, .grid_3 .header { /* a quarter of right_column */ width:160px}
#wrapper .grid_2, .grid_2 .header { width:100px}
#wrapper .grid_1, .grid_1 .header { width:40px}

/* ------ GRID - ------------ */
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_8plus,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16
{display:inline;float:left;border-right:1px dotted #ccc;overflow:hidden;margin-left:0;padding-right:9px;margin-right:10px}
.grid_6plus,.grid_7plus,.grid_9plus,.grid_10plus,.grid_11plus,.grid_12plus,.grid_13plus,.grid_14plus,.grid_15plus,.grid_16plus
{display:inline;float:left;/*border-right:1px dotted #ccc;*/overflow:hidden;margin-left:0;padding-right:9px;margin-right:10px}

/* *******-- grid_#plus<--- ******* whole page FOR CURRENT 980px width - adapted grid adds 20px to accomodate the first round of templates */
#wrapper .grid_16plus,.grid_16plus .header {width:980px}
#wrapper .grid_16,.grid_16 .header{/* whole page minus 20px (nav extra space) */width:960px}
#wrapper .grid_15plus,.grid_15plus .header {width:900px}
#wrapper .grid_15,.grid_15 .header {width:880px}
#wrapper .grid_14plus,.grid_14plus .header{width:840px}
#wrapper .grid_14,.grid_14 .header {width:820px}
#wrapper .grid_13plus,.grid_13plus .header{width:780px}
#wrapper .grid_13,.grid_13 .header {width:760px}
/* END widths WIDER THAN THE #right_column NAV GRID BOXES */
#wrapper .grid_12plus,.grid_12plus .header{width:720px}
#wrapper .grid_12,.grid_12 .header {width:700px}/* width of whole right_column WITH NAV */
#wrapper .grid_11plus,.grid_11plus .header{width:660px}
#wrapper .grid_11,.grid_11 .header {width:640px}
#wrapper .grid_10plus,.grid_10plus .header {width:600px}
#wrapper .grid_10,.grid_10 .header {width:580px}
#wrapper .grid_9plus,.grid_9plus .header{width:540px}
#wrapper .grid_9,.grid_9 .header {width:520px}
/* for layouts w no left nav - transitional */
#wrapper .grid_8plus,.grid_8plus .header{width:500px}
#wrapper .grid_8,.grid_8 .header {width:460px}/* two thirds of right_column WITH NAV */
#wrapper .grid_7plus,.grid_7plus .header{width:420px}
#wrapper .grid_7,.grid_7 .header {width:400px}
#wrapper .grid_6plus,.grid_6plus .header{width:360px}
#wrapper .grid_6,.grid_6 .header {width:340px/* half of right_column WITH NAV */}
#wrapper .grid_5,.grid_5 .header {width:280px}
#wrapper .grid_4,.grid_4 .header {width:220px}/* one third of right_column WITH NAV */
#wrapper .grid_3,.grid_3 .header {width:160px}/* a quarter of right_column WITH NAV */
#wrapper .grid_2,.grid_2 .header {width:100px}
#wrapper .grid_1,.grid_1 .header {width:40px}
/* -- USEFUL for NESTING grid items -- remove last margin in set */

.nomargin { margin: 0} /* removes all margins */
.noborder { border: 0} /* removes all borders */
.borderboth { padding-left:9px;border-right: 1px dotted #ccc;border-left: 1px dotted #ccc}
/* --------- CLEARING ------------*/
html body div.clear, html body span.clear {
  background:none;
  border:0;
  clear:both;
  display:block;
  float:none;
  margin:0;
  padding:0;
  overflow:hidden;
  visibility:hidden;
  width:0;
  height:0
}
* html .clearfix {
  height:1%
}
.clearfix {
  display:block
}
/* clearfix */
.clearfix:after, .row:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix, .row {display:inline-block} /*Those two .clearfix have to be separate!)*/
.clearfix, .row {display:block}

/* CHANGE-ABLE */

#right_column .content .nobulletlist li {
  margin: 0;
  padding: 0;
  list-style-type: none
}
/* added accessibility styles */
/* --- ACCESSIBILITY ---- ncs EDITED nov4/09 (updated due to bug) use to hide h1s or h2s you don't want visible to the sighted but read by screen readers*/
h1.accessible,
h2.accessible
{
	display: none;
}

/* ---- TAB MENU ------------------------------------------------------------------------------------ */
#tabs_menu, #tab_menu_services {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#tabs {list-style-type:none;
margin:0;
padding:0}

#tab_menu {
 margin-bottom: 10px}
#tabs li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-clip: border-box;
background-origin: padding-box;
background:transparent url(/images/tabbg.gif) no-repeat scroll left bottom;
border-right:2px solid #FFFFFF;
display:block;
float:left;
height:3em;
margin:0;
padding:0;
width:150px;
background-color:#41b2d0;
}
#tabs li a {
color:#FFFFFF;
display:block;
font-weight:bold;
margin-left:10px;
margin-top:3px;
text-decoration:none;
}
#tabs li.active {
background-color:#2f2f2f;
}
#tabs li:hover {
background-color:#2f2f2f;
}
#tabs li.notab, #tabs li.notab_short {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-clip: border-box;
background-origin: padding-box;
background:transparent url(/images/tabbg.gif) no-repeat scroll left bottom;
border-right:0 none;
width:524px;
background-color:#d7ebf0;
}
.blankTab, .notab {
display:none;
}
div.spacerTop {
float:left;
height:15px;
width:100%}
#banner { margin-bottom: 0}
/* ---- END CSS for TAB MENU -----------------------------------*/

.meta-table {width:95%;display:none;}
.meta-table tr {vertical-align:top;}
.meta-table th {text-align:left;width:20%;}
.lang-fr .meta-table th {text-align:left;width:30%;}
.meta-table td {width:80%;}

body {
  background-color: #FFF;
  color: #000;
  /* text-align: center; */
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

ul { /* this is the default style - change at will - SUGGEST A STYLE */
  margin-left: 20px; /* indented from side */
  margin-bottom: 20px /* space after */
}

ol { /* this is the default style - change at will - SUGGEST A STYLE */
  margin-left: 20px; /* indented from side */
  margin-bottom: 20px /* space after */
}

a {
  color: #000 /* default value=   */
}
a:visited { /* default value=   */
  color: #666
}

/* HEADERS ----------------------------------------------------------------------------------------------------------------------------- */
h1 {
  color: #433830 /* COLOUR CHANGE */ /* replace H tags colour with your own */
  /* default margins = margin: 0.5em 0 1em 0; for h tags: in this order: top, right, bottom, left */
}
h2 {
  color: #433830/* COLOUR CHANGE */
}
h3 {
  color: #433830 /* COLOUR CHANGE */
  /* default margins = margin: 0.5em 0; for h tags: in this order: top/bottom, right/left */
}
h4 {
  color: #433830 /* COLOUR CHANGE */
}

/* LAYOUT - generic use =------------------------------------------------------------------------------------------------------------------------ */

.large { /* larger text - this is arbitrarily large - I made it for TCU */
  font-size: 1.4em;
  margin-top: 20px;
  display: block
}

hr { color: #bfbfbf; background-color: #bfbfbf}
hr.thick { height: 3px; color: #666; background-color: #666} /* thicker separator line - change colour if desired for greater emphasis */
/* comment out and suggest ways to use this class */

/* LINKS ------------------------ default link style */

a, a:link,  a:visited,  a:active {
  color: #433830 /* COLOUR CHANGE */
}
/* a:hover, a:focus {
  text-decoration: underline;
  color: #7f4038
} */
.row a,.row a:link,.row a:visited { color: #433830 } /* top links - ontario.ca - language */
.row a:hover{ color: #7f4038 }
.row a:active{ color: #433830 }

a#skipNav:active, a#skipNav:focus { color: #000} /* Colour for skipnav link when tabbed / clicked - is white to hide it ohterwise */

a h4 { color: #433830} /* COLOUR CHANGE */
a:hover h4 { text-decoration:underline}

/*.more a, .more a:link, .more a:visited, .more a:active { color:#000}*/
/* added more2 style */
.more a, .more2 a, .more a:active, .more2 a:active, .more a:link, .more2 a:link, .more a:visited, .more2 a:visited  { color:#433830}
.more a:hover, .more2 a:hover {color:#7f4038}
.more a:visited, .more2 a:visited {color:#433830}

/* IMAGE PATHS + THEME / COLOUR CHANGES -- change to match your site structure --------------------------------------------------------------------- */

#arc {
  background: none;
  background-color: #B1C79F;
}

#navbar { /* the main nav bar */
  background-color:#5B534D
}
#navbar p a { /* links in navbar */
  color: #fff; /* COLOUR CHANGE - MAKE SURE CONTRAST IS VERY HIGH */
  padding: 0 10px 0 8px; /* default */
  border-right: 2px solid #fff /* COLOUR CHANGE (the bars in between)  - MAKE SURE CONTRAST IS VERY HIGH */

}/* changed nav to display lines between elements with css */


/*.nav_top      { background-image: url(../images/corner_nav_top.gif)}
.nav_bottom   { background-image: url(../images/corner_nav_bottom.gif)}*/
.main_top     { background-image: url(../images/corner_main_top.gif)}
.photo_top    { background-image: url(../images/corner_photo_top.gif)}
.photo_bottom { background-image: url(../images/corner_photo_bottom.gif)}
.icon_top     { background-image: url(../images/corner_icon_top.gif)}
.icon_bottom  { background-image: url(../images/corner_icon_bottom.gif)}
.photo_long { background-image: url(../images/corner_photo_long.gif)}

/* ------------ SPLASH PAGE ------------*/

#splash {
  background-image: url(../images/header_arc.gif); /* re-uses HEADER ARC image no need to change */
  border-color: #5b534d; /* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */
  border-bottom-color: #5b534d /* COLOUR CHANGE this is a colour that matches the MAIN NAVIGATION BAR  */
}

#splash .two_cols {
  background-image: url(../images/splash_line.gif)  /* this line matches the outline of the border above - Graphic in file: Splash_Master.psd */
}

#splash h2 a { color: #433830 /* COLOUR CHANGE language links - match if you like */}

.two_cols { background-image: url(../images/two_cols.gif)} /* PATH CHANGE */
.three_cols { background-image: url(../images/three_cols.gif)} /* PATH CHANGE */

#wrapper #splash .button a{background-color:#FFF}
#splash_page #footer { width: 1050px}

#searchBox { /* search box */
  background-color: #fff; /* COLOUR CHANGE */
  border: 1px solid #1d2d44
}
#searchBox:focus, #searchBox:hover { background-color: #fff; border: 2px solid #7f4038; margin: -1px}
/* ------------ END SPLASH PAGE ------------*/


#submit { /* submit button */
  background-color: #1d2d44;
  width: 28px;
  height: 28px;
  border: 0;
  color: #fff; /* COLOUR CHANGE */
  vertical-align:top
}
#submit:hover, #submit:focus { border: 1px solid #fff; margin: -1px}
#banner { /* holds flash banner or static banner */
  border-bottom: 4px solid #5b534d;
  overflow:hidden;
  height:185px/* COLOUR CHANGE - this is the colour stripe under the flash banner */
}

/* ---- LEFT SIDE NAV --------------------------------------------------------------------------------------------------------------- */
.leftnav .header {
  background: #333 url(../images/arc_left.gif) no-repeat; /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
}

.leftnav .header a { color: #fff   /* Link in Navigational Header */}
/* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
.leftnav .mycolour .header {
  border-color: #ffffff;
  background-color: #5b534d;
  background-image: url(../images/arc_left.gif)
}
/* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */
/*.leftnav .mycolour .header a {  color:#fff}  */
.menu a {
  padding: 8px 4px 10px 24px; /* this creates the size of the menu item box - last value is the distance of the text from the side */
  border-bottom: 1px dotted #666;
  /* background: #f7f7ef url(../images/triangle_right.gif) no-repeat 12px 13px */
  background: #f7f7ef;
}

/* sub menu styling - positions the arrow graphic in a bit more */
/* .menu li li a {
  background-image: url(../images/triangle_right.gif)
} */
/* MENU - Current item colour - USE to DESIGNATE THE CURRENT PAGE - add this id to the appropriate li in the menu */
#current { background-color: #fff}


.menu a:link,.menu a:visited,.menu a:active {
	background-color : #F4F4F4
}
/*color: #000 optional COLOUR CHANGE.menu a:hover {
}*/


/* ---- CONTENT Headers  ------------------------------------------------------------------------------------------------------------ */
.row .header { /* attributes for all header bars */
  border-top-color: #cde9b4;
  border-bottom-color: #5c544e;
  background-color: #b1c79f; /* COLOUR CHANGE the background colour to your site's colour scheme */
  background-image: url(../images/arc_right_main.gif); /* CHANGE PATH to match your site structure */
  color: #433830 /* color for all row headers */
}
.header h1, .row .header h2 { color: #433830}
/* EXTRA CLASS FOR MULTIPLE COLOURED HEADER BARS - uncomment to use
#right_column .mycolour .header {
  border-top: 3px solid #3888ac;
  border-bottom: 1px solid #0d73a1;
  background: #0d73a1 url(../images/arc_right_main.gif) no-repeat
}

.mycolour .header h2 { color:#FFF;!important}


-  USE: If you want to have multiple colours of title bars - you may need this class - if the colours contrast a lot the MORE link will also change - use this class to change it
- */

/*.mycoloured .header .more a, .mycoloured .header .more a:link, .mycoloured .header .more a:active, .mycoloured .header h2 { color:#fff}
.mycoloured .header {
  border-top-color: #3888ac;
  border-bottom-color: #0d73a1;
  background: #0d73a1 url(../images/arc_right_main.gif) no-repeat;
} */

.grey { background-color:#868686}
.mycolour { background-color: #5b534d} /* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */

.leftnav .mycolour .header a {  color:#fff }

.box { /* v2.1 class */
  background-color: #f8f6d7;
  border-bottom: 1px solid #666
}
#left_column .box { 
  width : 100%;
}

.box table td { border-top: 1px dotted #666}

.photolink .text {
  color: #fff /* set colour of link text under photos here */}
#right_column ul li {
  color: #000 /* text colour for lists in content area */}
.date  { color: #000 /* CHANGE COLOUR OF NEWS DATES here */}


/* ------ GRID - GRID BOX SIZES (reference) ------------ */
    
/*
- when nesting grid elements inside each other (as opposed to stacking them inline) use .nomargin to remove the margin of the last nested column in a set
REASON: each grid element is given a right-margin automatically.  If you nest two or more grid pieces inside another the redundant margin breaks the layout

- use the class "showmethegrid" on the wrapper and it will show the image that makes up the grid. 
- count the # of pink columns under the area you wish to use for layout 
- give your div a class of "grid_#" where # is the number of pink columns you wish to span.
- each grid size has a PLUS size "grid_#plus" which is the # of pink columns PLUS the white column at the end. Also called the "gutter", and is always 20px wide 

- sizes of the grid pieces are denoted below - to calculate the size of a grid_#plus add 20px to the grid_# below (examples for the first three are shown in parentheses)

.grid1 - 40px 
(.grid_1plus - 60px)  
.grid2h1.accessible,h2.accessible{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.paddingTop{padding :10px 0 0 0}
.paddingTopR{padding: 10px 0 0 10px}


/* --- Add the class .showmethegrid to the wrapper to see the grid ---*/
#wrapper.showmethegrid{background:#fff url(../images/nav_pluscols.gif) repeat-y;background-position:bottom left;padding-right:0}
#right_column.showmethegrid{background:#fff url(../images/gridhelper_rightcolumnonly_12cols.gif) repeat-y;background-position:bottom left;padding-right:0}
/* ------ GRID - ------------ */

#right_column .news ul li { list-style-type: none; margin: 0; padding: 0 5px} /* for list of news items in a column */
#right_column ul.feature { border: 1px solid #999; background-color:#E9E9E9; margin: 1em 20px 0; padding: 10px}
/* --- Close these menus by default - NB: Make sure the H2(header) of the menu has a link in it in case JS is disabled - This should link to a page where this menu defaults to OPEN */

#explore, #contacts, #resources { display: none}

.pointer P {
	padding: 0.8rem;
	padding-left: 0;
	padding-right: 0;
	margin: 0px;
	border-bottom: #999999 1px dotted;
}