/* $Id: master.css 79 2009-07-09 17:50:23Z DragKng $ */

@charset "utf-8";

/*
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
*/


/* -ZERO OUT EVERYTHING - * ---------------------------------------------------------------- */
/* -this css sets all padding, margins, defaults to 0 - * ---------------------------------- */
/* tables still need 'cellspacing="0"' 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, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: base-line;
	background: transparent;
}
html {
	height: 100%;
}
body {
	 height: 100%;
}
blockquote, q {
	quotes: none;
}


/* this is the behaviour for form fields when they are selected */
:focus {
	outline: 0px solid #000}

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

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

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

/* ----------- ZERO OUT LISTS - set your default list styles here ---------------- */
ol, ul { /* this is the default style - change at will - */
	
	
	padding-left: 10px;
	margin-bottom: 10px /* space after */
}





/* sets the base font to approx 10pt */
body { 
	background-color: #FFF; 
	color: #000; 
	font-size: 62.5%;
	font-family: Arial, sans-serif; 
	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 {
color: #003399;
	font-size: 2.0em;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	margin: 0px;
	margin-bottom: 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}
h2 {
	color: #000;
	font-size: 1.1em;
	padding-bottom: 6px;
	text-align: left;
	
}
h3 {
	color: #000; /* COLOUR CHANGE */
	font-size: 1.0em;
	text-align: left;
	margin: 0.5em 0 /* default margins for h tags: in this order: top/bottom, right/left */
}
h4 {
	color: #000;
	font-size: 0.8em; 
	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;
	line-height: 140%
}
.large { /* larger text */
	font-size: 1.4em;
	margin-top: 20px;
	display: block
}
.indent { /* use to indent text in a pragraph */
	margin-left: 2em
}


.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 'cellspacing="0"' in the markup - CSS2 does not yet have proper table support */



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

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

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

#left_column {
	/*width: 260px;*/
	width: 200px;
	display:inline;
	float:left;
	/*margin-right:20px;*/
	margin-right: 10px;
	margin-left:0;
	font-size: 1.2em; /* STANDARDIZE */
	line-height: 160% /* STANDARDIZE */;
	background-color: #e8f0ff;
	height: 620px;
}

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

.leftnav {
	width: 155px;
	overflow: hidden;
	margin-bottom: 10px;
	padding: 10px;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	margin-left: 12px;
	height: 450px;
}


/* RELATED NAV STYLES --------------------------------------------- */


.related_box ul { margin: 0; padding: 0}

.related_box {
		/*width: 260px;*/
	width: 230px;
	float:left;
	/*margin-right:20px;*/
	margin-right: 20px;
	margin-bottom: 10px;
	padding-left:10px;
	padding-top:10px;
	padding-right:2px;
	background-color: #e8f0ff;
	height: 350px;
	
	
	
}
.rel ul { 
		margin: 0; 
		padding: 0;

		}

.rel li{

	list-style: none;
	list-style-image: url(../multimedia/arrow_relatedmenu.gif);
	font-size: 11px;
	background-repeat: no-repeat;
	margin-left: 0px;
	margin-top: 2px;
	margin: 0; 
	padding: 0;
	padding-top: 0;
	
}

.rel a {

	text-decoration: underline;
	font-weight: normal;
	color: #666666;
	margin-bottom: 2px;
	width: 190px;
	padding-right: 40px;
	padding-left: 0px;
	vertical-align: text-top;


}




.stdbullet ul { margin: 0;padding: 0}

.stdbullet li{
	list-style:square url("../multimedia/std_bullet.jpg");
	margin: 0px; 
	padding: 0px;
	
}


.oeacommon_header {
	color: #003399;
	font-size: 20px;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	display: block;
	line-height: 22px;
	margin: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}

.oeamain_header {
	color: #003399;
	font-size: 25px;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	display: block;
	line-height: 22px;
	margin: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}
.left_alignimg {
	padding: 0px;
	
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 5px;
	margin-left: 0px;
}

.director_alignimg {
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 5px;
	margin-left: 0px;
}

.right_alignimg {
	padding: 0px;
	float: right;
	margin-top: 0px;
	margin-left: 15px;
	margin-bottom: 5px;
	margin-left: 0px;

}
.leftnav .header {
	width: 100%;
	height: 100%;
	border-bottom: 1px solid #000; /* ncs may 29/09 - added top border call */
	border-top: 1px solid #000;
	float: left;
	position: relative;
	background: #4a1910 url(../images/arc_left.gif) no-repeat; /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
	display: block;
	font-size: 18em; /* ncs jun2/09 added font-sizing - for backwards compatibility */
	font-size: 1.1em /* ncs jun2/09 added font-sizing - for backwards compatibility */;
	font-family: "Times New Roman", Times, serif;
	color: #003399;
	font-weight: normal;
}
.leftnav .header img, .downarrow {
	position: absolute;
	left: 235px;
	top: 7px
}
.leftnav a {
	color: #000000;
	font-weight: normal;
	display: block;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom-width: 1px;
	border-bottom-style: none;
	border-bottom-color: #c6d1da;
	background-image: url(../images/arrow_formenu.gif);
	background-repeat: no-repeat;
	line-height: 14px;
	margin: 0px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #c6d1da;
}

/* -- Standard Expert,Confidential colour of Header bar for Menu titles -- */



 .expert {
	color: #4E4E4E; /* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 16px;
	margin-left: 20px;
	margin-top: 20px;
	height: 150px;
	width: 165px;
} 
 .expertheader  {
	color: #333333;
	font-size: 20px;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
	display: block;
	line-height: 22px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

/* 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;
	background-image: url(../images/triangle_right.gif);
	background-repeat: no-repeat;
	background-position: 12px 13px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 24px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666;
	background-color: #E8F0FF;
}

.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*/
	font-size: .9em;
	padding: 8px 4px 8px 36px;
	background-image: url(../images/triangle_right.gif);
	background-repeat: no-repeat;
	background-position: 23px 13px;
	background-color: #E8F0FF;
}

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

#current { background-color: #fff}

/* ------------ END LEFT NAV ------------------------ */



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


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

#arc {
	width: 100%;
	height: 92px;
	float: left;
	background: #dff0f7 url(../images/header_arc.gif) no-repeat}

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

#searchBox { /* search box */
	width: 100px;
	padding: 2px;
	background-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-left: 60%;
}
#submit { /* submit (go) button */
	border: 0;
	color: #fff;
}
#submit:hover { /* submit (go) button hover state */
	border: 1px solid #fff
}

#searchbar {
	width: 100%;
	float: left;
	padding: 0px;
	margin: 0px;
	position: relative;
	
}
.oea_searchbox {
	position: absolute;
	right: 0px;
	left: 800px;
	top: -5px;
	height: 25px;
	width: 195px;
	margin: 0px;
	display: block;
	padding: 0px;
	background-color: #fff;
}
.oea_textlinks {
	text-align:right;
	height: 25px;
	width: 780px;
	display: block;
	
}

#branding {

	margin: 0px;

	width: 975px;

	background-color: #fff;

	
}

.oea_textlinks a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-weight: normal;
}

/* -- 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}


/* END flash banner or static banner */

/* SPLASH STYLES */
#splash_outer {
	height: 480px;
	* height: 550px;/* style for IE8 only*/
	width: 614px;
	border: 1px solid #084DA8;
	background-image: url(../multimedia/oea_splash_bluebar.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-top: 60px;
	padding-bottom: 0px;
	padding-left: 75px;
	padding-right: 75px;
	margin: auto;
	margin-top: 20px;
	text-align: middle;
}

#bannerlogo {
	width: 614px;
	float: left;
	margin: 0px;
	padding: 0px;
}
#englishversion_col {
	width: 285px;

	* width:304px;/* style for IE8 only*/
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666666;
	text-align: left;
	font-size: 12px;
	float: left;
	margin: 0px;
	padding: 0px;
	padding-right: 20px;
	

}

#frenchversion_col {
	width: 285px;
	* width:304px;/* style for IE8 only*/
	text-align: left;
	font-size: 12px;
	float: left;
	margin: 0px;
	padding: 0px;
	padding-left: 20px;

	
}






.button {
	width: 250px;
	text-align: left;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}


/* -- RIGHT COLUMN / CONTENT --*/
#right_column { /* content area */
	width: 765px;
	float: right;
	margin-right: 20px;
	font-size: 1.3em; /* STANDARDIZE */
	/*line-height: 1.3em;  STANDARDIZE */
	display: inline;
	 overflow: auto; /* Necessary for IE6 */
	;
}
body#onecol div#right_column { /* content area for one column layouts */
	width: 980px;
	float: right;
	margin-right: 20px;
	font-size: 1.3em; /* STANDARDIZE */
	/*line-height: 1.3em;  STANDARDIZE */

}
/* -- 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: 980px;
	padding-top: 20px

}


#footer_print {display:none}
.row { /* a style to contain other elements on the page - gives a dotted border at the bottom of the area */
	width: 765px;
	float: left;
	display: inline;
	margin-right: -3px; /* IE 6 duplicate text fix */
	margin-bottom: 20px;
	border-bottom: 1px dotted #ffffff;
	overflow: hidden
}
body#onecol .row { /* a style to contain other elements on the page - gives a dotted border at the bottom of the area */
	width: 1000px
}
.row p { margin-right: 20px}

.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
}
.content {
word-wrap: break-word
 overflow: auto; /* Necessary for IE6 */
}

.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: 340px}

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

/* 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;
	font-size: .9em

}
#footer p.right { margin-right: 0}
#footer a { color: #666}

/* --- TITLE BARS --- */

.row .header { /* a full length header that spans all columns -USE: wrap .header in a .row */
	width: 700px;
	height: 100%;
	position: relative;
	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  {
	display:inline;
	float:left;
	overflow: hidden;
	margin-left:0;
	margin-right:19px
}
/* ---- 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: none
}

.header h2 {
	color: #333;
	margin: 5px 10px 0 10px;
	padding: 0 0 5px 0;
	font-size: 1.1em;
	float: none
}

.more { /* style for the more> links pulls the more out 30px from the right side of the block */
	right: 26px;
	float: right;
	position: relative;
	top: 5px;
	padding: 0 0 0 30px;
	font-size: .8em;
	font-weight: bold;
	text-transform: uppercase
}

.more img { /* positions the chevron/arrow after the MORE link */
	position: absolute;
	top: 5px;
	right: -15px
}

.more a { color:#000; line-height: 1.9em}

/* 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 ) ----*/


/* Page Actions Styles */
.pageActions {margin: 0px 0px 0px 0px !important; padding: 0; float: right; }
.pageActions {list-style-image: none; list-style-position: outside; list-style-type: none;}
.pageActions li {list-style-image: none; float: left; font-weight: bold; list-style-type: none;}
.pageActions .print a{background: url('../multimedia/print_ic.gif') no-repeat 2px 2px !important; font-size: 0.8em; font-family: arial; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 20px; !important; line-height: 200%;list-style-type: none;list-style-image: none;}
.pageActions .print a {list-style-image: none;text-decoration: none;list-style-type: none;}



/* --- 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; line-height: 1px; font-size: .1em; 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;
	color:#000;
	margin-left: 20px;
	padding-left: 5px;
	line-height: 120%
}
#right_column ul li {
	color: #566d1b /* text color for lists in content area */
	
}
}
.gobutton {
	
	float: left; margin: 157px;
	margin-top: -21px;
	
	
}
.column li a, .content li a { font-size: 90%}
.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:340px}
#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:0px dotted #ccc;overflow:show;margin-left:0;padding-right:9px;margin-right:1px}
.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:535px}
/* 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:265px/* half of right_column WITH NAV */}
#wrapper .grid_5,.grid_5 .header {width:220px}
#wrapper .grid_4,.grid_4 .header {width:210px}/* one third of right_column WITH NAV */
.grid_4 {
	PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: right; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 1px; BORDER-RIGHT: #ccc 0px dotted; WIDTH: 220px;
}
#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;
	font-size:0;
	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
}


.menubar{
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
	background-color: #003399;
	width: 980px;
	height: 25px;
	float: left;
	
}



.languagebutton {
	width: 150px;
	text-align: left;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 40px;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 16px;
	float: left;
}
.languagebutton_go {
	width: 40px;
	text-align: left;
	display: block;
	margin: 0px;
	padding: 0px;
	height: 40px;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 16px;
	float: left;
}
.languagebutton a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 16px;
	float: left;
	color: #000;
}

.languagebutton a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 16px;
	color: #000;
}

.oea_breadcrum{
	width:640px;
	display: block;
	margin-top: 10px;
	margin-bottom: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	float: left;
	text-align: left;
	
}
	

.breadcrum a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
}
.normalview .grid_9{ /*CSS to return page to default setting (with no additional CSS rules added)*/
}

.largeview .grid_9{ /*CSS for "large font" setting*/
font-size: 1.1em;
}

.largerview .grid_9{ /*CSS for "large font" setting*/
font-size: 1.2em;
}


.sizer { /*CSS for "large font" setting*/
width: 50px;

float: right;
margin-top: 10px;
}

.printer { 
width: 55px;
float: left;

margin-top: 10px;
margin-right: 5px;
}

.newsletter_home{
	width: 220px;
	display: block;
	margin: 0px;
	text-align: left;
	padding: 0px;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	background-color: #ffffff;

}

.newsletter{
	width: 220px;
	display: block;
	margin: 0px;
	margin-top: 10px;
	padding: 10px;
	padding-left: 20px;
	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	background-color: #EFEFEF;

}
.questions{

	
	margin-top: 30px;
	padding: 0px;	
	text-align: left;


}


	/* NAV - top horizontal nav */
	#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	
}
	#nav {
	font: bold 13px "Arial Narrow", Arial, Helvetica, sans-serif;
	padding: 0px;
	height: 25px;
	margin: 0px;
}
	#nav li {
	position:relative;
	float: left;
	width: 10em;
	display:block;
	margin: 0;
	padding:0;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999999;
	border-bottom-color: #FFF;
}
	#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
	text-decoration:none;
	cursor:pointer;
	color:#FFFFFF;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;

}
	#nav a:hover {
	color:#FFFFFF;
	background-color: #000;
}
	
	
#nav li ul {
	background: #000;
	font-size:14px;
	margin-top:0px;
	position: absolute;
	font-weight:normal;
	left: -999em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
	#nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}
	
	#nav li li {
	background:none;
	float:none;

	color: #FFFFFF;
}
	#nav li li.last {border-bottom:none}
	#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {
	color:#FFF;
	width:152px;
	font-size: 11px;
	font-weight:normal;
	border-top: 1px solid #fff;
	padding: 6px;


}
	#nav li li a:hover {
	color:#fff;
	
	background-color: #003299;
}
	
	

	/* hide from IE mac \*/
	#nav li {width:auto}
	/* end hiding from IE5 mac */
	
	

	/* hide from IE mac \*/
	#nav li {width:auto}
	/* end hiding from IE5 mac */
	
	/* SECONDARY NAVIGATION - vertical navigation */
	
.relatedlinks {
	
	color: #003399;
	font-size: 20px;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	line-height: 22px;
	
	
}

.inthissection {
	
	width: 150px;
	margin-left: 25px;
	margin-bottom: 5px;
	margin-top: 5px;
	color: #003399;
	font-size: 20px;
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	
	
	
}
	
/* SECONDARY NAVIGATION - vertical navigation */

	#nav-secondary li {
	list-style: none;
	padding:3px;
	border-top: 1px dotted #666;
	margin-left: 25px;
	margin-right: 20px;
	background-image: url(arrow_left.gif);
	background-repeat: no-repeat;
	background-position: -3px 10px;
	}
	
#nav-secondary {margin-top: 20px;
min-height:300px;
height:auto !important;
display:block;
height: 300px; 

 }
	
#nav-secondary a {

	color: #000000;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding-left: 4px;
	
}
	#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {
	text-decoration:none;
	cursor:pointer;
	color: #000000;
} 
	#nav-secondary a:link {color:#000000; } 
	#nav-secondary a:visited {color:#000000} 
	#nav-secondary a:hover {color: #FF0000;	text-decoration: underline;
} 
	#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
	#nav-secondary li {}
	
	

#director {
	width:310px;
	* width:320px;/* style for IE8 only*/
	float: left;
	padding: 10px;
	margin: 0px;
	height: 250px;
		
}



#homenews {
	width:170px;
	* width:180px;/* style for IE8 only*/
	float: left;
	padding: 10px;
	margin: 0px;
	height: 200px;
}



#homebanners {
	width:225px;
	* width:215px;/* style for IE8 only*/
	float: left;
	margin: 0px;
	padding-left: 15px;
	text-align:right;
	border-right-width: 0px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #a1a1a1;
	height: 200px;
}

.logoleft {
    padding: 15px;
	float: left;

	
}
.logoright {
	padding: 15px;
	float: right;
	
}

form p { clear:both; padding-top:1em; margin:0; padding:6px 0 0 0; }
p.property label {
	display:block;
	width:200px;
	text-align:right;
	float: left;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 0px;
}
p.property select { width:205px; }
p.property input.text { width:200px; }
#sreg_chhint_inpt { width:300px; }
#sreg_buttons {
	width:100px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	height: 25px;
	margin-top: 20px;
	color: #000000;
}






/* CHANGE ME */


body { 
	background-color: #FFF; 
	color: #000; 
	font-family: Arial, Helvetica, sans-serif; 
	 
	
}

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: #0000cc;
	text-decoration: underline; 
}
a:visited { 
	color: #0000cc;
	text-decoration: underline;
}
a:hover {
	text-decoration: underline;
	color: #FF0000 /* COLOUR CHANGE */
}
a h4 { color: #0082c0 } /* COLOUR CHANGE */
a:hover h4 { text-decoration:underline }
a#skipNav:active, a#skipNav:focus { color: #000 } /* Colour for skipnav link when tabbed / clicked - is white to hide it ohterwise */
.more a, .more a:link, .more a:visited, .more a:active { color:#000 }
/* NAVIGATION STYLE - will eventually change to accomodate full grid system  */

/* 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:#003399 /* COLOUR CHANGE - replace Background colour with your colour that matches the graphic */ 
}
#navbar p a { /* links in navbar */
	color: #FFF; /* COLOUR CHANGE - MAKE SURE CONTRAST IS VERY HIGH */
	padding: 0 10px 0 8px	
}

.menu li li a {/* sub menu styling - positions the arrow graphic in a bit more */
	background-image: url('../images/triangle_right.gif') 
}


/*.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/oea_splash_bluebar.gif);
	border: 1px solid #003399;
}

#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 */

#searchBox { /* search box */
	background-color: #fff; /* COLOUR CHANGE */
	border: 1px solid #1d2d44
}

#submit { /* submit button */
	background-color: #1d2d44;
	width: 28px;
	height: 28px;
	border: 0;
	color: #fff; /* COLOUR CHANGE */
	vertical-align:top
}
#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 */
}

#flashbanner { /* holds flash banner or static banner muj */
 background-color: #fffff;
 margin: 0px;
 margin-top: -15px;
 margin-bottom: 15px;
 
 padding: 0px;
 overflow: visible; /* Necessary for IE6 */
}

.leftnav .header {
	border-color: #FFF
	background: #333 url('../images/arc_right_main.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: #3598d2;
	background-image: url('../images/arc_right_main.gif'); 
}
/* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */
/*.leftnav .mycolour .header a { 	color:#fff  }  */
.menu a {	 
	padding: 5px 5px 5px 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 a:link,.menu a:visited,.menu a:active { 
	/*color: #333  optional COLOUR CHANGE */
}

.menu a:hover {
	/*color: #000 optional COLOUR CHANGE */
}

/* MENU - Current item colour - USE to DESIGNATE THE CURRENT PAGE - add this id to the appropriate li in the menu */
#current { background-color: #f9ecaa; }

#contacts { display: none; } /* closes the menu by default */
#explore { 	display: none; } /* closes the menu by default - add your own menu items here */

.row .header { /* attributes for all header bars */
	border-top-color: #b1b9c3;
	border-bottom-color: #94add1;
	background-color: #e5e5e5; /* COLOUR CHANGE the background colour to your site's colour scheme */
	background-image: url('../images/arc_right_grey.gif'); /* CHANGE PATH to match your site structure */
	color: #333 /* color for all row headers */;
}



/* EXTRA CLASS FOR MULTIPLE COLOURED HEADER BARS - uncomment to use
-  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: #003399;
	background: #003399 url('../images/arc_right_main.gif') no-repeat; 
} */


.mycolour { background-color: #003399 } /* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */
.mycolour .header {
	border-top: 3px solid #3888ac;
	border-bottom: 1px solid #003399;
	background: #003399 url('../images/arc_right_main_darkteal.gif') no-repeat; 
} 
.mycolour .header h2 { color:#FFF;!important }

.more a, .more a:active,  { color:#003399}
.more a:hover {color:#23d7f7}
.more a:visited {color:#003399}

.box { /* v2.1 class */
	background-color: #f8f6d7;
	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 

.grid1 - 40px
.grid2 - 100px
.grid3 - 160px (1/4 right_column)
.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 EDIT added may3/09 use to hide h1s or h2s you don't want visible to the sighted but read by screen readers*/
h1.accessible,h2.accessible{float:right;margin:-9999px}
.paddingTop{padding :10px 0 0 0}
#wrapper #splash .button a{background-color:#FFF}

/* --- 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 */ 

/*=jump search - requested by FIN
---------------*/
#jumpSearch {
	background: url(/images/jumpRight.gif) 100% 10px no-repeat;
	padding-right: 3px;
	margin-bottom: 1em;
	/*padding-top: 10px;*/
	float: right;
	/*width: 565px;
	w\idth: 562px;*/
	width: 394px;
	w\idth: 391px;
}
#jumpSearch form {
	background: url(/images/jumpMiddle.gif) left top repeat-x
}
#jumpSearch fieldset {
	border: none;
	height: 28px;
	background: url(/images/jumpLeft.gif) left top no-repeat;
	padding-top: 4px
}
#jumpSearch label, #jumpSearch select, #jumpSearch input { vertical-align: middle; }
#jumpSearch label {
	font-weight: bold;
	padding: 0 0 0 7px
}
#jumpSearch select {
	font-size: 1.1em;
	border: 1px solid #63865a
}
#jumpSearch input#jumpGo {
	width: 25px;
	height: 25px;
	border:0
}