/* $Id$  This was originallay changeme.css*/

@charset "utf-8";

body {
  background-color: #FFF;
  color: #000;
  font: 62.5%;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  text-align: center;
  line-height: 1.3em
}

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: 40px; /* indented from side */
  margin-bottom: 20px /* space after */
}

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

/* HEADERS ----------------------------------------------------------------------------------------------------------------------------- */
h1 {
  color: #000 /* 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: #036/* COLOUR CHANGE */
  }

 h2.brown {
 color: #FFF /* COLOUR CHANGE */
 }



h3 {
  color: #000 /* COLOUR CHANGE */
  /* default margins = margin: 0.5em 0; for h tags: in this order: top/bottom, right/left */
}
h4 {
  color: #036 /* COLOUR CHANGE */
}
.faq_page h2{
	font-size:16px;
	line-height:18px;
	margin: 1em 0 1.2em 0;
}

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

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

.smalltext {
  font-size: 0.9em;
  margin-top: 20px;
  display: block;
}
.smalltext_faq {
	font-size:1em;
}


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: #333 /* COLOUR CHANGE */
}
a:hover, a:focus {/* added focus style */
  text-decoration: underline;
  color: #036 /* COLOUR CHANGE */
}

.row a,.row a:link,.row a:visited,.row a:active { color: #036 } /* top links - ontario.ca - language */
a#skipNav:active, a#skipNav:focus { color: #000} /* Colour for skipnav link when tabbed / clicked - is white to hide it ohterwise */

a h4 { color: #036} /* 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:#036}
.more a:hover, .more2 a:hover {color:#036}
.more a:visited, .more2 a:visited {color:#036}

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

#arc {
  background: #cccccc url(../images/header_arc.gif) no-repeat
}

#navbar { /* the main nav bar */
  background:#8d2f0e
}

#navbar-left { /* the left side nav bar */
  background:#036
}

#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: #036; /* 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: #036 /* 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: #000 /* 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 #4A4C40
}
#searchBox:focus, #searchBox:hover { background-color: #e3edc3; border: 2px solid #ea4444; margin: -1px}
/* ------------ END SPLASH PAGE ------------*/


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

/* ---- LEFT SIDE NAV --------------------------------------------------------------------------------------------------------------- */
.leftnav .header {
  background: #e7e6e6 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: #e7e6e6;
  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, .menu a:link, .menu a:visited, .menu a:active {
  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: #f6f6f6 url(../images/triangle_right.gif) no-repeat 12px 13px
}
.menu li li a {/* sub menu styling - positions the arrow graphic in a bit more */
  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}

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


/* ---- CONTENT Headers  ------------------------------------------------------------------------------------------------------------ */
.row .header { /* attributes for all header bars */
  border-top-color: #036;
  border-bottom-color: #999999;
  background-color: #e7e6e6; /* 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: #000 /* color for all row headers */
}


.row .header-brown { /* attributes for all header bars */
  border-top-color: #8d2f0e;
  border-bottom-color: #8d2f0e;
  background-color: #8d2f0e;
	padding:1px;
   /* COLOUR CHANGE the background colour to your site's colour scheme padding
  color: #000 /* color for all row headers */
}



.header h1, .row .header h2 { color: #000}
/* 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:#999999}
.mycolour { background-color: #036} /* 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:#036 }

.box { /* v2.1 class */
  background-color: #036;
  border-bottom: 1px solid #666
}
.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)
.grid2 - 100px
(.grid_2plus - 120px)
.grid3 - 160px (1/4 right_column)
(.grid_3plus 180px)
.grid4 - 220px (1/3 right_column)
.grid5 - 280px
.grid6 - 340px (1/2 right_column)
.grid7 - 400px
.grid8 - 460px (2/3 right_column)
.grid9 - 520px
.grid10 - 580px (3/4 right_column)
.grid11 - 640px
.grid12 - 700px (whole right_column)

.grid13 - 760px
.grid14 - 820px
.grid15 - 880px
.grid16 - 960px



/* --- 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{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 */
.show{display : block}
.hide{display : none}

/* --- Additional MTO specific code ---*/

/* ============================= */
/* = Highlighting and Callouts = */
/* ============================= */

.highlight, div.highlight-box.highlight-4, p.highlight-box.highlight-4 {
background:#feffdb!important;
}

/* override .callout from global_nlf1 and providing future-support */
div.callout, p.callout,div.highlight-box,p.highlight-box {
padding:.5em;
background:#e0e0e0; /* sage - same as .callout */
border:1px solid #002747;
/* CSS3 */
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 3px 3px 3px #ddd;
-moz-box-shadow: 3px 3px 3px #ddd;
box-shadow: 3px 3px 3px #ddd;
}

div.highlight-box.highlight {
background-color:#feffdb;
border-color:#000;
}

div.highlight-box.highlight-1,
p.highlight-box.highlight-1 {
background-color:#F3F5EF; /* aqua-ish */
border-color:#92ADB2;
}

div.highlight-box.highlight-nr,
p.highlight-box.highlight-nr {
background-color:#EDF8FA;
border-color:#7B8D8D;
}

div.highlight-box.highlight-2,
p.highlight-box.highlight-2 {
background-color:#CCC5F3; /* purple-ish */
border-color:#8F8BB1;
}

div.highlight-box.highlight-3,
p.highlight-box.highlight-3 {
background-color:#c4d7ed; /* light-blue */
border-color:#8D9AAC;

}

div.highlight-box.highlight-4,
p.highlight-box.highlight-4 { /* light-yellow */
border-color:#C1C1A2;
}

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

.indentmore {
margin-left:2em;
}

ul.NoBullet {
list-style-type: none;
}

/* ISSN and pdf style from Bill's accessibility css*/

#ISSN { margin-left: 1em; font-size: 80%; }


#pdf { padding: 0px 5px; }
#pdf a { color: #176178; font-weight: bold; }
#pdf a:hover { color: #A22930; }



/* CSS for ORSAR 2007 */



.tableStyle1 {
	background-color:#DDE5E9;
	margin:12px 0;
	padding:10px;
}
.tableStyle1 table {
	background-color:#DDE5E9;
	margin:0;
	padding:0;
	width:100%;
}
.tableStyle1 caption {
	font-weight:bold;
	text-align:left;
	background-color:#DDE5E9;
	border-bottom:1px solid #292828;
	padding:0 0 4px;
	margin:0 0 6px;
}
.tableStyle1 td, .tableStyle1 th {
	padding:2px 10px 4px 0;
	border-bottom:1px solid #292828;
	font-size:11px;
}
tfoot td {
	font-weight:bold;
}
.tableStyle1 th {
	vertical-align:bottom;
}


.tableSource {
	font-size:10px;
	line-height:14px;
}

.city1 {
	font-weight:bold;
	color:#6f3a2b;
}
.cityTotal {
	border-bottom:2px solid #292828;
	font-weight:bold;
}


.intro-text {
	font-size:14px;
	font-weight:bold;
	color:#000000;
	line-height:20px;
}
.figure-caption {
	background-color:#CED1CB;
	padding:7px;
	font-weight:bold;
}

/* toc */
.tocBox {
	padding:10px;
	margin:0 0 10px;
	background-color:#EDF8FA;
}
.tocBox p, .tocBox li, .tocBox ol {
	margin:0;
	padding:0;
}
.tocBox ol {
	list-style-type:lower-alpha;
	margin-left:35px;
	margin-top:5px;
}
.tocBox li a {
	font-weight:normal;
}

/* Glossary */
.annual-report-glossary dt {
	font-weight:bold;
	margin:15px 0 0 0;
	padding:0;
}
.annual-report-glossary dd {
	margin:5px 0 15px 0;
	padding:0;
}
.annual-report-glossary dd ul, .annual-report-glossary dd ol {
	margin:0 25px;
	padding:0;
}

/* ============================== */
/* = MTO SUSTAINABILITY SECTION = */
/* ============================== */

div.sustainability-content ul li ul {
  margin:5px 0px;
}

div.sustainability-content .goal-title {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

div.sustainability-content .goal-subtitle {
  /*color: #669933;*/
  font-size: 15px;
  font-weight: bold;
}

div.sustainability-content .green-highlight {
  /*color: #669933;*/
  font-weight: bold;
}

div.sustainability-content .looking-inward-title {
  /*color: #55a0d4;*/
  font-weight: bold;
  font-size: 16px;
}

div.sustainability-content .looking-inward-subtitle {
  /*color: #55a0d4;*/
  font-weight: bold;
}

div.sustainability-content .looking-outward-title {
  font-weight: bold;
  /*color: #f7a018;*/
  font-size: 16px;
}

div.sustainability-content .looking-outward-subtitle {
  /*color: #f7a018;*/
  font-weight: bold;
}

div.sustainability-content .photo-caption {
  font-weight: bold;
}

div.sustainability-content h4 {
  color: #000;
}

div.sustainability-content sup a {
  color: #000 !important;
  text-decoration: none;
}

div.sustainability-content div.footnotes {
  font-size: 0.8em;
  border-top: 1px solid #bfbfbf;
}

div.sustainability-content div.footnotes sup {
  font-weight: bold;
}

div.sustainability-content div.footnotes sup a {
  color: #000;
  text-decoration: none;
}

div.sustainability-content div.footnotes p {
  padding-bottom: 0px;
}

div.sustainability-facts-container {
  margin-left: 20px;
  float: left;
  width: 180px;
}

div.sustainability-facts {
  float: left;
  font-size: 0.8em;
  border-top: 3px dotted #669933;
  border-bottom: 3px dotted #669933;
  padding-bottom: 10px;
}

div.sustainability-facts-images {
  float: left;
  padding-top: 10px;
}

div.sustainability-facts h4 {
  color: #000;
}

#photo-credits td {
  vertical-align: top;
  padding-bottom: 20px;
}

div.sustainability-content p {
  padding-bottom: 10px;
}

div.top-of-page-resources {
  display: none;
}


/* ============================== */
/* =       MTO FAQ SECTION      = */
/* ============================== */

.faq-questions h3 {
	margin-top: 2em;
}
.faq-answers h3 {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid #000;
}
.faq-answers > ol > li {
	margin-top: 2em;
}
.faq-questions > ol > li {
	list-style-position: inside;
	text-indent: -2.25em;
	margin-top: 0.75em;
}
.faq-questions > ol, .faq-answers > ol {
	list-style-type:none;
    counter-reset:elementcounter;
}
.faq-answers > ol {
	margin:0px;
}
.faq-questions > ol > li:before, .faq-answers > ol > li:before {
	content: "Q" counter(elementcounter) ": ";
    counter-increment:elementcounter;
}

/* ============================== */
/* =   BACK TO TOP SECTION      = */
/* ============================== */

.back-to-top:link,
.back-to-top:visited,
.back-to-top:active {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color:#999;
    font-size: 12px;
    padding: 1em;
    display: none;
}

.back-to-top:hover {
    background-color:#CCC;
	transition: all 0.3s ease-in-out 0s;
}

/* ============================== */
/* = HOMEPAGE SPOTLIGHT SLIDER  = */
/* ============================== */

#slider_spotlight {
  position: relative;
  overflow: hidden;
  margin: 20px 0;
  display:block;
}
#slider_spotlight ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
#slider_spotlight ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 450px;
  height: 400px;
}