@charset "utf-8";
/* $Id$ */

body {
  background-color: #FFF;
  color: #000;
  font-size: 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: 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 {/* added focus style */
  text-decoration: underline;
  color: #7f4038 /* COLOUR CHANGE */
}
.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: #696767 url(../images/header_arc.gif) no-repeat
}

#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
}
.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}


.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)  
.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 */
#explore, #contacts, #resources { display: none}

div.grid_other {width:45%;}