@charset "utf-8";
/* CSS Document */

/*
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, ol, ul, 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: baseline;
	background: transparent;
}*/
body {
	line-height: 1;
}



/* 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 - */
	list-style: none; /* no bullets */
	margin-left: 20px; /* indented from side */
	margin-bottom: 20px; /* space after */
}

/*li a { zoom: 1 }  fix for IE list bug - which wil sometimes interpret a new li as a line break */

/* BASELINE ** ADDITION ** REMOVES Margins from LISTS - nested lists have no top/bottom margins - remove to use default margins*/ 
/*ul ul, ul ol, ul dir, ul menu, ul dl, ol ul, ol ol, ol dir, ol menu, ol dl, dir ul, dir ol, dir dir, dir menu, dir dl, menu ul, menu ol, menu dir, menu menu, menu dl, dl ul, dl ol, dl dir, dl menu, dl dl {
	margin-top: 0;
	margin-bottom: 0;
}*/
/* --------------------------------------------------------------- */ 



/* sets the base font to approx 10pt */
body { 
	background-color: #FFF; 
	color: #000; 
	font: 11pt Verdana, Helvetica, Arial, sans-serif; 
	text-align: left; 
	line-height: 1.3em;
}

 

/* default sizing for standard elements -------------------------- */   /* SET text attributes here */
/*a:link:after,
a:visited:after,
a:hover:after,
a:active:after {
 content: " <" attr(href) "> ";
 color: grey;
 font-style: italic;
 font-weight: normal;
}*/
/* */
 /*a[href^="/"]:after {
 content: " <http://www.ontario.ca/YOURMINISTRY"attr(href)"> ";*/ /* for PRINTING.. this adds a print version of the URL after the link text */
/*}*/

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

.termsi {
	font-size: 1.0em;
	color: black;
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
}

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

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

h1 {
	color: #000000; /* COLOUR CHANGE */ /* replace h tags colour with your own */
	font-size: 1.4em;
	margin: 0.5em 0 1em 0; /* default margins for h tags: in this order: top, right, bottom, left */ 
}
h2 {
	color: #000000;/* COLOUR CHANGE */
	font-size: 1.2em;
	padding-bottom: 6px; /* no margins for h2 these are used for menu items - TO OVERRIDE THIS STYLE, add a new class  */
}
h3 {
	color: #000000; /* COLOUR CHANGE */
	font-size: 1.1em;
	margin: 0.5em 0; /* default margins for h tags: in this order: top/bottom, right/left */
}
h4 {
	color: #000000; /* COLOUR CHANGE */
	font-size: 1.1em;
}

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



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

/* positioning */
.right { /* aligns - floats right */
	float: right;
	margin-left: 20px;
	text-align: right;
}
.left { /* aligns - floats left */
	float: left;
	margin-right: 20px;
}
.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: 0.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;
}

.submit { /* styles the submit / GO button -- */
	background-color: /*#aa3d12;*/ #00ada7; /* 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: 100%; margin: 1em 0; }
hr.thick { height: 3px; color: #666; background-color: #666; } /* thicker separator line - change colour if desired for greater emphasis */
/* --------------------------------------------------------------- */ 


/* PAGE LAYOUT STYLES --------------------------------------------- */

#wrapper { /* wraps the whole page and centers it */
	width: 980px;
	margin: 13px auto 0 auto;
	text-align: left;
}

#header { /* holds the header area Ontario logo, div>arc, div>search, div>navbar (main menu/navigation), #banner */
	width: 980px;
	position: relative;
}

#right_column { /* content area */
	width: 710px;
	font-size: 1.3em;
	line-height: 160%;
}

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

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

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

#textlinks {
	position: absolute;
	right: 0px;
	top: 5px;
	text-align: right;
}

#textlinks a {
	padding: 0 1em 0 0.75em;
	border-right: 1px solid #999;
	text-decoration: underline; 
}

#arc, #navbar, #banner, a#skipNav:link, a#skipNav:visited, a#skipNav:hover {
	display: none;
}

.row { /* a style to contain other elements on the page - gives a dotted border at the bottom of the area */
	width: 100%;
	float: none;
}

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

/* 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: 0.9em;
}
/* SPLASH STYLES ---------- */

#splash {
	width: 710px;
	float: left;
	margin: 2em 135px 0 135px;
	padding-bottom: 80px;
	font-size: 1.3em;
	text-align: left;
	border: 1px solid #00ada7; /* 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: 2em solid #000000; /* COLOUR CHANGE this is a colour that matches the MAIN NAVIGATION BAR  */
}

#splash .two_cols { 
	background: url('../images/splash_line.gif') no-repeat top center;  /* this line matches the outline of the border above - Graphic in file: Splash_Master.psd */
	float: left;
	width: 100%;
	text-align: center;
	/*padding-top: 3em;*/
	padding-top: 1em;
}

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

#splash h2 a { font-size: 90%; font-weight: bold; color: #000000; text-decoration: none; /* COLOUR CHANGE - match if you like */}

/* generic LAYOUT styles --------------------------------------------- */




.two_cols .column { /* when a .column is placed inside a two_cols row you get 2 equal columns of 354px that fill the right_column */
	width: 354px;
	float: left;
	position: relative;
}

.three_cols .column, .box .column { /* when a .column is placed inside a three_cols row you get 3 equal columns of 236px that fill the right_column */
	width: 236px; 
	float: left;
	position: relative;
}

.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: 430px;
	float: left;
	position: relative;
}

.two_thirds .other { /* used to hold content other than text */
	width: 236px; 
	float: left;
	position: relative;
}

.content {
	padding: 10px 13px;
	float: left;
}	

.column li a { font-weight: bold; }
.column ul   { margin: 0; padding: 0; }

#right_column p a, #right_column a p  { text-decoration: underline; }

#right_column ul li {
	list-style-type:disc;
	color:#000000;
	margin-left: 10px;
	padding-left: 5px;
	line-height: 200%;
}

#right_column .content .large p a { text-decoration:none; }

.promo { margin-bottom: 10px; float: left; }

.row .header { /* a full length header that spans all columns -USE: wrap .header in a .row */
	width: 100%;
	height: 100%;
	position: relative;
	border-top: 3px solid #666;
	border-bottom: 1px solid #999;
}


.two_cols .column .header { /* 2 seperate headers - USE: class="row two_cols" nest .content div inside, then nest .header div inside that */
	width: 350px;
	height: 100%;
	border-top: 3px solid #666;
	border-bottom: 1px solid #999;
	float: none;
	position: relative;
	margin: 0 2px;
}

.three_cols .column .header { /* 2 seperate headers - USE: class="row three_cols" nest .content div inside, then nest .header div inside that */
	width: 230px;
	height: 2.5em;
	border-top: 3px solid #666;
	border-bottom: 1px solid #999;
	float: none;
	position: relative;
	margin: 0 3px;
}

.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;
	height: 2.5em;
	border-top: 3px solid #666;
	border-bottom: 1px solid #999;
	float: none;
	position: relative;
	margin: 0;
}

.two_thirds .other .header {
	width: 236px; 
	height: 2.5em;
	border-top: 3px solid #666;
	border-bottom: 1px solid #999;
	float: none;
	position: relative;
	margin: 0 0 0 3px;
	
}

.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: 156px; 
	padding: 0.8em 5px 0 20px;
} 

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

.line_separator {
	overflow: hidden;
	width: 349px;
	height: 1px;
	border-bottom: 1px dotted #666;
	padding-top: 10px;
	padding-bottom: 10px;
}

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

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

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

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

.nobr	{ white-space: nowrap; }

/* PHOTO STYLES --------------------------------------------- */

.frame  { border: 1px solid #ccc; padding: 8px; }
.inline { vertical-align: middle; }

.photocap  { background-repeat: no-repeat; height: 6px; line-height: 1px; font-size: 0.1em; clear: left; } /* used for the left floated series of images - you can put a caption below - this style that caption */

div.photo  { width: 210px; height: 190px; float: left; margin: 0 13px; } /* this is for the gallery ONLY - note that it will make the div that holds the photo 190px tall! */

img.photo  { border-top: 1px solid #fff; border-bottom: 1px solid #fff; width: 100%; float: left; }

.photolink       { width: 100%; float: left; }
.photolink a     { font-weight: bold; }
.photolink .text {
	float: left;
	padding: 5px 0 0 5px;
	color: #000000; /* set colour of link text under photos here */
}
.row three_cols .column .content .large a {	text-decoration: none;}

#left_column, .nav_top, .nav_bottom, .main_top, .photo_top, .photo_bottom, .icon_top, .icon_bottom, .more img, .more { display: none; }
.noborder	  { border: 0; }
.nomargin     { margin: 0; }

.photo_long { width: 426px; }

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

.icon { 	width: 125px; 	float: none; 	padding: 10px 0;}
.spacer { float: left; width: 40px; }
.half_spacer { float: left; width: 20px; }

/*(NOELLE - note to self) from TCU - is this standard? */.two_thirds .photo { height: 100px; /* specify image height here */ width: 210px; float: left; padding: 12px 20px 20px 20px; /* pulls image down same amount as the paragraph 16px and adds a pad under the image */}

.two_thirds .photo {
	height: 85px; /* specify image height here */
	width: 210px;
	float: left;
	padding: 0; /* puts padding all around the image */
}

/* NEWS STYLES - MAA specific - can be re-used --------------------------------------------- */

.news p { 
	clear: left; 
	float: left; 
	width: 20%; 
	height: 2em; 
	margin: 0; 
	padding: 2px 0 0 0; 
	border-top: 1px dotted #ccc;
}

#right_column .news ul { margin: 0; padding: 0 0 1em 0; }

#right_column .news ul li { 
	display: block;
	list-style-type: none; 
	background: none; 
	margin: 0; 
	padding: 0; 
	border-top: 1px dotted #ccc;
}

/* ------ overide styles ---- */

.nomargin { margin: 0; } /* removes all margins */
.noborder { border: 0; } /* removes all borders */
.content:after {
	clear: both;
}


/* NOELLE - note to self may not need - check */
h2 a.large {
margin-top: 20px;
display:block;
}

/* -------------- START PRINT STYLES --------------- */

/*body { 
	background-color: #FFF; 
	color: #000; 
	font: 11pt Verdana, Helvetica, Arial, sans-serif; 
	text-align: left; 
	line-height: 1.3em;
}

#textlinks, #arc, #navbar, #banner, #tab_menu, #tab_menu_services, #left_column, .left, .pageFind, .more, .spacerTop, .promo, .small, .thick {display: none;} 

#right_column, .box { width: 670px; float: none; }

#right_column p { float: none; border: 0; }

.row { float: none; border: 0; width: 680px; }

a:link:after,
a:visited:after,
a:hover:after,
a:active:after {
 content: " <" attr(href) "> ";
 color: grey;
 font-style: italic;
 font-weight: normal;
}
 a[href^="/"]:after {
 content: " <http://www.ontario.ca/YOURMINISTRY"attr(href)"> ";
}

#right_column .two_cols .column, #right_column .two_cols .column .header {
	width: 315px;
	float: none;
}

#right_column .three_cols .column, #right_column .three_cols .column .header, .three_cols .column { width: 205px; float: none; }

.two_thirds .column, .two_thirds .column .header { width: 400px; float: none;}

.row .header, .box .header { float: none; background-image:none; text-decoration: underline; font-weight: bold; font-size: 13pt; text-align: left;  }

.content { padding: 0.2em; float: none;}

ol, ul, .box ul { margin-left: 0.2em; float: none; }

.two_cols .split_lrg .content img {
 display: none;
}

.two_cols .split_lrg h3, .two_cols .split_lrg .content ul, .two_cols .split_lrg .content p {
	float: none;
	width: 325px; 
	padding: 0.2em;
} 

.spacer, .half_spacer { width: 0.1em; }
.photo_top, .photo_bottom { 
	width: 200px;
	padding: 0;
	margin: 0;
}

.header h2 { padding: 0; margin: 0;}*/