/*----------------------------------------------------------- 
CSS for LEGAL AID ONTARIO - Externa Site (www.legalaid.on.ca)
Version 4.0 - Governing page layout and text behaviour
            - CLeaning up previous version(s)   
Assembled by Chris Cowley - Sept 25/09
-------------------------------------------------------------*/ 


/* PAGE LAYOUT - Main divs for page layout */
body {
	background: url(/images/bgtile_header.jpg) repeat-x top left;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: center;
}

#page {
	border: 0px solid #959596;
	/*background-color: #d5eac9;*/
	margin: 0px auto;
	padding: 0px;
	width: 790px;
	text-align: left;
	/* line-height: 17px; (looks a little better without it) */
	}


#pagemain { /* Background for main oae only */
	border: 0px solid #959596;
	background: url(/images/bgtile_mainpage.gif) center;
	margin: 0px auto;
	padding: 0px;
	width: 790px;
	text-align: left;
	}

/* --- HEADER SETUP: Logo & top persistent menu options --- */
#header {
	margin: 0 auto 0;
	width: 790px;
	height: 115px;
	color: #ffffff;
	font-size: 10px;
	padding: 0;
	overflow: hidden;
	}
	
	#header ul {color: #ffffff;	float: right; list-style: none; width: 500px;}
	#header ul li {float: right; padding: 0 0 0 5px; margin: 0 0 0 5px; border-left: 1px solid white;}
	#header ul li.end, #footer ul li.end {border: none;}
	#header ul a, #header ul a:visited {text-decoration: underline;}
	#header ul a:hover {color: #fff;}
	#header a, #header a:visited {color: #ffffff; font-size: 10px; text-decoration: none; padding: 0px 0px 0px 3px;}
	#header a:hover {color: #f7941d;}


/* --- UPPER NAVBAR: Main menu options --- */
#navbar_top {
	background: #01046b; /* Dark blue background */
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
		/* border-top: 4px solid #016b42; */
		/*overflow: hidden;*/
	}
	#navbar_top table {width: 790px;}
	#navbar_top a, #navbar a:visited {color: #ffffff; text-decoration: none; padding: 0px 5px 0px 5px;}
	#navbar_top a:hover {color: #fff; padding: 2px 5px 2px 5px;	text-decoration: none;}
	
	/* Switching BG colour of TD in Navbar */
	td.off {background: #01046b;}
	td.on {background: #05479d;}
	

/* --- LEFT HAND NAVIGATION BAR: Sub-page menus --- */
#leftnav {
	float: left;
	width: 170px;
	font-size: 11px;
	margin: 0px 0px 2px 3px;
	padding: 0;
	}

#left-nav {
	color:#016b42; 
	text-decoration: none; 
	background: #a9cbf8;
	margin: 0;
	}

	#left-nav img {display: inline; border: 1px solid black;}
	#left-nav a	{color:#0d4b96; text-decoration: none; border-top: 1px solid #cdeafc; border-bottom: 1px solid #5492df;} 
	#left-nav a:hover {color:white; background:#3d78c6;
		/*text-decoration:underline; */}
	#left-nav a.active:hover {text-decoration:none; color:white; background:#7dbc8b;} 

	.top-level a, 
	.second-level a, 
	.third-level a,	 
	.fourth-level a	{display:block; margin:0; padding:5px 0 5px 0;}

	.top-level a	{padding-left:5px;} 
	.second-level a	{padding-left:15px; background:#ABCDF8;} 
	.third-level a	{padding-left:20px; background:#e7e7e7;} 
	.fourth-level a	{padding-left:25px; background:#e1e1e1;} 
	.top-level a	{color:#000; background:#a9cbf8;} 
	
	.top-level a#site-home	{font-size:1.1em; font-weight:bold; background:#3d78c6; color:white; border-top: none;} 

	.second-level a, 
	.third-level a, a.open
	.fourth-level a, a.open	{color:#000; background:#e2eaf2;}

	a.active	{color:#000; background:#d5eac9; font-weight:bold;} 
	a.active2	{color:#000; background:#d5eac9;}
	a.active3	{color:#000; background:#d5eac9;} 
	a.active4	{color:#000; background:#d5eac9;} 



/* --- BREADCRUMBS --- */
#breadcrumbs {
	margin: 10px 5px 0px 190px;
	color: #898989;
	font-size: xx-small;
	/*overflow: hidden;*/
	}
	#breadcrumbs a {text-decoration: none;color: #777777;}
	

/* --- ARTICLE space: Full span of page content area --- */
#article {
	float: right;
	width: 600px;
	margin: 0px 0px 10px 0px;
	padding: 8px 0 15px 0;
	overflow:hidden;
	line-height:1.4em;
	}

	
/* --- 3 Column setup: Content area is split into Left Nav - Main area - Right Sidebar --- */
#content_3col {
	background: #ffffff;
	width: 600px;
	float: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow:hidden;
	}

#col3_centre {
	float: left;
	width: 400px;
	margin: 0px 0px 20px 0px;
	padding: 0;
	line-height:1.4em;
	}

#col3_right {
	float: right; 
	width: 180px;
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 5px 0px;
	}
	
	/* internal div for right hand column - gives the rounded top */
	.roundTop h3, #roundTop2 h3 {
	color: white;
	background: #5c88c5;
	padding: 0 5px 5px 5px;
	margin:0 0 5px 0;
	border: none;
	}

	.roundTop {
	background: url(../images/rightColTop.jpg) no-repeat top left;
	padding: 3px 0 0px 0;
	}

	#roundTop2 {
	background: url(../images/largeBlueCol.jpg) no-repeat top left;
	width: 190px;
	margin-right: 10px;
	float: left;
	padding: 5px 0 0 0;
	}
	
	
#footer {
	background: #013372;
	width: 790px;
	font-size: 0.8em;
	text-align: left;
	padding-top:5px;
	margin-top:20px;
	margin-left:10px;
	margin-right:10px;
	clear: both; /* this should work in both ie and FF, works on everything else. */ 
}
	#footer p {color:#ffffff;}
	#footer ul {list-style: none;}
	#footer ul li {float: left; padding-right: 5px; margin: 5px 5px 0 0; border-right: 1px solid #0076a3;}
	#footer a {color: #ffffff; text-decoration:none;}
	#footer a:hover {color: #cd7d1f;}

	.bigfoot {font-size:1.1em; border-bottom:1px solid #e7e7e7; font-weight:bold; padding-bottom:3px; line-height:18px;}


/* ---------------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------------- */
/* DROP DOWN MENU */

/* MAIN/Default page - Single drop down menu - Javascriptarray */
#sddm {	margin: 0; padding: 0; z-index: 30}
#sddm li {margin: 0; padding: 0; list-style: none; float: left; /* font: bold 11px arial */}
#sddm li a {display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 180px; background: #3d78c6; color: #FFF; /* text-align: center; */ text-decoration: none}
#sddm li a:hover {background: #49A3FF}
#sddm div {position: absolute; visibility: hidden; margin: 0; padding: 0; width: 280px; background: #EAEBD8; border: 1px solid #5970B2}
#sddm div a {position: relative; display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		/* white-space: nowrap; removing allow the menu options to wrap */
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		/* font: 11px arial */}

#sddm div a:hover {background: #49A3FF; color: #FFF}


/* Info for Lawyers / Single drop down menu - Javascriptarray */
#infodm {	margin: 0; padding: 0; z-index: 30}
#infodm li {margin: 0; padding: 0; list-style: none; float: left; /* font: bold 11px arial */}
#infodm li a {display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 280px; background: #74a6cc; color: #FFF; /* text-align: center; */ text-decoration: none}
#infodm li a:hover {background: #49A3FF}
#infodm div {position: absolute; visibility: hidden; margin: 0; padding: 0; width: 380px; background: #EAEBD8; border: 1px solid #5970B2}
#infodm div a {position: relative; display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		/* white-space: nowrap; removing allow the menu options to wrap */
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		/* font: 11px arial */}

#infodm div a:hover {background: #49A3FF; color: #FFF}



/* ---------------------------------------------------------------------------------------------------------- */




/* ---------------------------------------------------------------------------------------------------------- */
/* LAYOUT / BEHAVIOURS FOR SPECIFIC PAGES */

/* NEWSROOM: en/news/default.asp */
	#newsroomleft {float: left;width: 290;background: url(/images/newsroom_bgtile.gif);}
		#newsroomleft p {padding: 5px 5px 0px 65px;}

	#newsroomright {float: right;width: 290;background: url(/images/newsroom_bgtile.gif);}
		#newsroomright p {padding: 5px 5px 0px 65px;}
	
	#newsroomright_yellow {float: right; width: 180; line-height:15px; background: #fffe97;
		/* background: url(../images/rightColTop.jpg) no-repeat top left; */}
	#newsroomright_yellow h4, #newsroomright_yellow p {padding: 5px 5px 5px 5px;}


/* DASHBOARDS: en/news/dashboards.asp - split page -- */
	.dashboard_left {float: left; width: 200; border-top: 1px solid #d6d6d6;}
	.dashboard_right {float: right; width: 400;	border-top: 1px solid #d6d6d6;}


/* NEWS ARCHIVES/HOT BYTES/MEDIA ENQUIRIES - Layout for list of postings */
	#postinglist_left {float:left; width: 80px; border-top: 1px solid #e7e7e7;}
	#postinglist_right {float:right; width:515px; padding-top:5px;}

/* SIDEBAR BOX - Grey background */
	#sidebargrey {float:right; width:180px; background:#e7e7e7; padding:5px; margin-left:5px;}

/* SIDEBAR BOX - White background */
	#sidebarwhite {float:right; width:180px; background:#ffffff; padding:5px; margin-left:5px;}

/* SIDEBAR BOX - Yellow background */
	#sidebaryellow {float:right; width:180px; background:#fffe97; padding:5px; margin-left:5px;}



/* GETTING LEGAL HELP TWISTIE QUESTIONS */
	#twistiequestion {
	background:#ffffcc;
	padding:5px;
	margin-left:20px;
	}

	#twistiequestion p { background:#ffffcc; 
	}


/* FORMS LIBRARY - en/info/form.asp - Background Switcher */
	#switcherbg {background-color:#ffffff;}
	#switcherbg:hover {background-color:#deefef;} 
	
/* ---------------------------------------------------------------------------------------------------------- */






/* ---------------------------------------------------------------------------------------------------------- */
/* TEXT & CONTENT BEHAVIOUR */

html,body	{padding:0; font-size:75%;}

html,body,
p,ul,ol,li, 
td,th,dl,dt, 
blockquote,
h1,h2,h3,h4,h5	{font-family:verdana,arial,helvetica,sans-serif;}

table,tr,td,th {font-size:1em;}

body,p,li,dd,dt,th,td,
blockquote, pre, code, xmp,
#left-nav,
#related-links	{font-size:1em;}

p	{margin:0; padding:0 0 .75em 0;}
.first	{padding:0 0 .5em 0;}
ul.first	{margin:0; padding:0 0 .5em 1.25em;}
ul	{margin:0; padding:.5em 0 .5em 1.5em;}
/* ol	{padding:.5em .5em .5em 2.2em;} */
ul ul, ul ol, ol ol, ol ul {padding-bottom:0;}
dl	{}
li	{margin:0; padding-bottom:.5em; line-height:1.25em;}
dt	{margin:0; padding:0; font-weight:bold; line-height:1.25em;}
dd	{margin:0; padding:0em 0em .25em 3em; line-height:1.25em;}

ul.no-bullets	{padding:0 0 1em 0; list-style-type:none;}
ul.anchor-links	{padding:0 0 1em 35px;}

/* make all ul bullets into arrows */
ul.arrows {
list-style: url(/images/listArrow.gif);
}


/* Text groups/tags */
.note	{color:#666; font-size:.85em;}
.caption	{font-weight:bold;}
.caption,.copyright	{font-size:.9em; color:#666; letter-spacing:.05em; padding:0;}
.byline	{float:right; font-size:.75em; font-weight:normal; font-style:italic; color:#999;}
.confidential	{font-weight:bold; color:#a00;}
.newspost {text-decoration: none; font-size: 0.8em;	line-height: 15px; padding: 2px 3px 2px 5px;}
	.newspost a {text-decoration: none ;}

.kicker	{font-size:.8em; color:#666; padding:0 0 5px 0; font-weight:bold;}
.sub-title	{padding:.5em 0 .5em 0; color:#666; font-weight:bold; font-style: italic;} /* fix with targeting */

.translatetag {background-color: #07a6d1; border: 10px solid #07a6d1;}


/* Universal link behaviour */
a, a:active, a:visited {text-decoration: underline; color: #1748a5;}
a:hover {text-decoration:none;color: #3660b0;}


/* Header treatments  */
h1,h2,h3,h4,h5,h6,
.sub-title,.sub-head	{margin:0; padding:0;}


.sub-head	{color:#666; padding:.3em 0 .5em 0;}


h1	{font-size:1.9em; font-weight:normal; color:#000; line-height:1.1em;}
h2	{font-size:1.5em; font-weight:normal; line-height:1.2em;}
#content-main h2	{margin-top:.5em;}
.frontfloat h2, .frontFloatEnd h2 {padding: 0 0 10px 0;}

h2.small	{font-size:1.2em; font-weight:bold;}

h3	{font-size:1.1em; margin: 0; color:#05a; border-top: 1px solid #ccc;}
h4	{font-size:1.1em; margin: 0;}

h5,h6	{font-size:1em; color:#666;}

/* Bar colours: usually used in right sidebars */
.bar-green-dark	{background:#7a3; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-green-med-dark	{background:#9c3; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-green-med-light	{background:#bd6; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-med-dark	{background:#47b; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-dark	{background:#05a; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-med	{background:#5c88c5; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold; border-bottom: 1px solid #69c;}
.bar-blue-med-light	{background:#9be; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-med-round	{background:#5c88c5; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-dark	{background:#666; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-med-dark	{background:#999; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-med-light	{background:#ccc; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-light	{background:#ddd; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-red-dark	{background:#9d0a0e; color:#ffffff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-orange-dark	{background:#F90; color:#ffffff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-center-blue {background:#69c; color:#fff; padding:.3em .5em; margin: 0px 10% 0px 10%; font-size:1em; font-weight:bold; text-align:center;}



/* Colours */
.primary-blue-dark	{color:#000668;}
.primary-blue-med	{color:#0853a4;}
.primary-blue-light	{color:#5c88c5;}

.blue-dark	{color:#05a;}
.blue-med-dark	{color:#47b;}
.blue-med	{color:#69c;}
.blue-med-light	{color:#9be;}
.blue-light	{color:#cef;}

.black	{color:#000;}
.white	{color:#ffffff;}
.gray-dark	{color:#666;}
.gray-med-dark	{color:#999;}
.gray-med	{color:#aaa;}
.gray-med-light	{color:#ccc;}
.gray-light	{color:#ddd;}
.gray-lightest	{color:#eee;}

.green-dark	{color:#00673d;}
.green-med-dark	{color:#9c3;}
.green-med-light	{color:#bd6;}
.green-light	{color:#dfb;}

.yellow-med	{color:#fe2;}
.yellow-light	{color:#ffa;}

.orange-dark	{color:#c60;}
.orange-med	{color:#f90;}

.red-dark	{color:#a00;}
.red-med	{color:#c33;}

.pink-med	{color:#f76;}
.pink-light	{color:#fcc;}

.violet-dark	{color:#936;}
.violet-med-dark	{color:#969;}
.violet-med-light	{color:#b7b;}
.violet-light	{color:#ede;}

.white {color:#ffffff;}

.alert-stop	{color:#c00;}
.alert-go	{color:#0f0;}
.alert-caution	{color:#ff0;}



	/* - Behaviours for H1, H2 and H3 headers - */
	#article h1, #col3_centre h1 {color: #01046b; padding: 0 0 10px 0;} 
	#article h2, #col3_centre h2 {color: #1748a5; padding: 0; margin:0 0 5px 0;} 
	#article h3, #col3_centre h3 {color: #1748a5; padding: 15px 0 0 0; margin: 15px 0 5px 0; border-top: 1px solid #ccc;}

	/* Behaviours for Lists - */
	#article ul {list-style: url(../images/listArrow.gif);}
	#col3_centre ul {list-style: url(../images/listArrow.gif);}

	#col3_right ul {list-style: none; margin: 0; padding: 5px 0 0 0;}
	#col3_right ul ul {padding: 0 0 0 12px; margin: 0;}
	

/* ---------------------------------------------------------------------------------------------------------- */






/* ---------------------------------------------------------------------------------------------------------- */
/* SPECIFIC BEHAVIOURS */

/* -- Expanding Text/Twisties -- */
.short { display:inline; }
.long { display:none; /* background-color: #ffffff; */ }


/* -- Post-It-Note Mouseover text -- */
a.infobox{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ffffcc;
    color:#000;
    text-decoration:none;}

	a.infobox:hover{z-index:25; background-color:#ff0}
	a.infobox span{display: none}
	a.infobox:hover span{ /*the span will display just on :hover state*/
    float:right;
	display:block;
    position:relative;
    top:1em; left:1em; width:15em;
	padding:2px;
   /*  border:1px solid #ffff00; */
	z-index:25;
    background-color:#ffffcc; color:#000;
    text-decoration: none;}

/* -- Acronyms -- */
	/* Original bold & red version acronym { cursor: help;  font-weight: bold; border-bottom: 1px solid red } */
acronym { cursor: help;  border-bottom: 1px solid green }


/* -- Arrow: for sart of text -- */
.arrowDiv {background: url(../images/icon_bluearrow.gif) 0 12px no-repeat; padding: 10px 0  10px 20px;}
.arrowDiv2 {background: url(../images/icon_bluearrow.gif) 0 12px no-repeat; padding: 10px 10px  10px 20px; float: left; width: 270px;}

/* This is for the Arrow divs, background image */
.inlineArrow {background: url(../images/icon_greenarrow.gif) no-repeat 0 2px; padding: 0 0 0 13px; margin: 5px 0 0 0;}
.inlineArrow_down {background: url(../images/icon_goldarrow.gif) no-repeat 0 2px; padding: 0 0 0 13px; margin: 5px 0 0 0;}


/* little inline icons - Work in some occassions */
.pdf, .word, .qt, .flash, .print, .b3, .excel, .f3, .qn {
padding: 6px 0 0 20px; /*common padding for everything*/
}
	.pdf {background:url(../images/icon_pdf.gif) no-repeat 0 2px;}
	.word {background:url(../images/icon_word.gif) no-repeat left;}
	.qt {background:url(../images/icon_quicktime.gif) no-repeat left;}
	.flash {background:url(../images/icon_flash.gif) no-repeat left;}
	.print {background:url(../images/icon_printer.gif) no-repeat left;}
	.b3 {background:url(../../images/icon_b3.gif) no-repeat left;}
	.excel {background: url(../images/icon_excel.gif) no-repeat left;}
	.f3 {background: url(../images/icon_f3.gif) no-repeat left;}
	.qn {background: url(../images/icon_qnewsletter.gif) no-repeat left;}



/* -- Clearing the Float to keep the bottom menu down -- */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* .clearfix {display: inline-block;} */

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */








/* ---------------------------------------------------------------------------------------------------------- */