﻿/*----------------------------------------------------- 
CSS for Legal Aid Ontario - External Site (www.legalaid.on.ca)
Coding to govern page layout
Version 3.1 - Tyring to conform more to Ont Gov standards
Assembled by Chris Cowley - Jul 24/08 / Edited on Nov 4/08
Edited by Nadine Lessio - December 15
-----------------------------------------------------*/ 


/* --- PAGE SETUP --- */
body {
	/* W2.0 fader bg - */background: url(../images/headerBack.jpg) repeat-x top left; 
	background: url(../images/bgtile_header.jpg) repeat-x top left;
	/*width: 800px;*/
	font-size: 0.8em;
	font-family: Arial, Tahoma, Veranda;
	color: #000000;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: center;
	}

#page {
	border: 0px
	border: 0px solid #959596;
	/*background-color: #d5eac9;*/
	margin: 0px auto;
	padding: 0px;
	width: 790px;
	text-align: left;
	}

#pagemain {
	border: 0px
	border: 0px solid #959596;
	background: url(/images/bgtile_mainpage.gif) center;
	margin: 0px auto;
	padding: 0px;
	width: 790px;
	text-align: left;
	}


/* --- HEADER SETUP --- */
#header {
	margin: 0 auto 0;
	width: 790px;
	height: 115px;
	color: #ffffff;
	font-size: 10px;
	padding: 0;
	overflow: hidden;
	
	}
	
	#header img {
	float: left;
	}
	
#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: #ccc;
	}
	
#header a, #header a:visited {
	color: #ffffff;
	font-size: 10px;
	text-decoration: none;
	padding: 0px 0px 0px 3px;
	}
	
#header a:hover {
	color: #f7941d;
	text-decoration: bold;
	}


/* -- NAVIGATION BAR - TOP -- */
#navbar_top {
	/*background-image: url(/images/bgtile_navbarupper2.gif);*/
	/* Dark Green background - background: #016b42; */
	/* Dark Blue Background */ background: #01046b; */
	/* width: 790px; */
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	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: #ccc;
	/* background-color:098152 ; */
	padding: 2px 5px 2px 5px;
	text-decoration: none;
	}



/* Switching BG colour of TD in Navbar */
td.off {
	/* background: #016b42; - leave hidden to allow the bg image to show instead */
	background: #01046b;  /* Blue GB */
	/* background: #016b42; - Green B */
}
td.on {
	background: #05479d;  /* Blue GB */
	/* background: #098152; - Green BG */
}



/* -- Centre column and right hand column Elements -- */


#col3_centre ul {
list-style: url(../images/listArrow.gif);
}

#col3_centre h3, #article h3 {
color: #1748a5;
padding: 15px 0 0 0;
margin: 15px 0 5px 0;
border-top: 1px solid #ccc;
}

#col3_right ul {
list-style: none;
margin: 0;
padding: 5px 0 0 0;
}

#col3_right ul ul {
padding: 0 0 0 12px;
margin: 0;
}

/*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;
}


/* -- NAVIGATION BAR - Bottom -- */
#navbar_bot {
	background: #d5eac9;
	width: 790px;
	height: 32px;
	font-size: 10px;
	font-family: Arial, Tahoma, Verdana;
	color: #0052bc;
	font-weight: bold;
	margin: 0px auto 0px;
	padding: 5px 0px 0px 0px;
	border-top: 2px solid #d5eac9;
	overflow: hidden;
	}
#navbar_bot a, #navbar a:visited {
	color: #0052bc;
	font-size: 11px;
	text-decoration: none;
	padding: 0px 0px 0px 3px;
	}
	
#navbar_bot a:hover {
	color: #9d0a0e;
	text-decoration: underline;
	}
	
#navbarright a img {
	border: none;
	margin: 0px;
	padding: 0px;
	}

#navbar_bot ul {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	}
	
#navbar_bot li {
	display: inline;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}
	
#navbar_bot ul li a, #navbar_bot ul li a:visited {
	font-size: 10px;
	font-family: Arial, Tahoma, Verdana;
	color: #0052bc;
	margin: 0px -3px 0px 0px;
	padding: 7px 14px 7px 12px;
	font-weight: bold;
	text-decoration: none;
	/* text-transform: uppercase; */
	}

#navbar_bot ul li a:hover {
	/* background: #DADADA; */
	color: #f7941d;
	margin: 0px -3px 0px 0px;
	padding: 7px 14px 7px 12px;
	text-decoration: none;
	}




/* ------------------------------------------------------- */
/* -- BREADCRUMBS -- */
#breadcrumbs {
	/*background: #e1e1e1;*/
	/* width: 99%; */
	margin: 10px 5px 0px 190px;
	/*padding: 0px 0px 0px 5px;*/
	color: #898989;
	font-size: xx-small;
	/*overflow: hidden;*/
	}
#breadcrumbs a {
	text-decoration: none;
	color: #777777;
	}




/* ------------------------------------------------------- */
/* -- MAIN CONTENT AREA -- */
#content_main {
	background: #ffffff;
	width: 790px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 0px;
	line-height: 17px;
	/* border-bottom: 2px solid #b2d39f; */
	overflow:auto;
	}

#main_left {
	background: #ffffff;
	float: left;
	width: 540;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 10px;
	}
	

#main_right {
	background: #ffffff;
	float: right;
	width: 200px;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 0px 0px;
	}

#content {
	width: 790px;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 5px;
	line-height: 17px;
	}
	
#article {
	
	float: right;
	width: 600px;
	margin: 0px 0px 10px 0px;
	padding: 8px 0 15px 0;
	overflow:hidden;
	}
	
	#article ul {
	list-style: url(../images/listArrow.gif);
	}
	
 #article h1, #col3_centre h1 { /* targeting for standard headers */
color: #01046b;
padding: 0 0 10px 0;
} 

 #article h2, #col3_centre h2 {
color: #1748a5;
padding: 0;
margin:0 0 5px 0;
} 

#content_3col {
	background: #ffffff;
	width: 600px;
	float: right;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow:hidden;
	/*background: green;*/
	}

#col3_centre {
	float: left;
	width: 400px;
	margin: 0px 0px 20px 0px;
	padding: 0;
	/*background: yellow;*/
	}

#col3_right {
	float: right; 
	width: 180px;
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 5px 0px;
	/*border-bottom: 2px solid #69c;*/
	/*background:red;*/
	}

.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;

}





/* ------------------------------------------------------- */
/* --- FRONT PAGE Specific Stuff --- */
#billboard_space {
	width: 790px;
	height: 230px; !important /* IE 6.0 bug */
}

.billboard_greeting {
	color:#05a;
	padding: 10px 0 0 430px;
	line-height: 1.5em;
}

.billboard_message {
	padding: 0 0 0 430px;
	line-height: 1.8em;
}

.billboard_message_fr {
	padding: 0 0 0 430px;
	line-height: 1.5em;
}

.quickLink a:link {
	color: #FFFFFF;
}

.quickLink a:visited {
	color: #FFFFFF;
}

.quickLink a:active {
	color: #FFFFFF;
}

.quickLink a:hover {
	color: #CCCCCC;
}

#frontBar {
border-top: 1px solid #016c42;
border-bottom: 1px solid #016c42;
background: url(../images/frontBarBack.jpg) repeat-y top;

}

.frontDkGreen {
width: 250px;
padding: 10px;
float: left;
background: #016c42;
color: white;
}

.frontLtGreen {
width: 499px;
padding: 10px;
float: left;
background: #adc89d;
}

.frontLtGreen p {
line-height: 1.6em;
}

.frontLtGreen ul {
list-style: url(../images/listArrow2.gif);
}

.floatIn {
float: right;
width: 230px;
padding: 0 0 0 20px;
}

.floatIn ul {
list-style: url(../images/listArrow2.gif);
}

.frontFloat {
width: 253px;
float: left;
margin: 10px 20px 10px 0;
/* line-height: 15px; */
}

.frontFloatEnd {
width: 240px;
float: left;
margin: 10px 0 10px 0;
}

/* -- Form buttons and styles -- */
a.button {
    background: url(../images/bg_button_a.gif) transparent no-repeat scroll top right;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 5px; /* sliding doors padding */
    text-decoration: none;
	color: yellow;
	margin-top: 10px;
	border-bottom: none;
	text-decoration: none;
}

a.button span {
    background: transparent url('../images/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 5px;
	color: #f3ef9f;
	text-decoration: none;
	border-bottom: none;
} 



a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
	border-bottom: none;
	text-decoration: none;
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 5px; /* push text down 1px */
	border-bottom: none;
	text-decoration: none;
}

a.button a:visted {
color: #f3ef9f;
	text-decoration: none;
	border-bottom: none;
	text-decoration: none;
}

/* -- Yellow button -- */
a.buttonY {
    background: url(../images/bg_buttonY_a.gif) transparent no-repeat scroll top right;
    display: block;	
	width: 170px;
    font: normal 15px arial, sans-serif;
	height: 40px;
    margin-right: 5px;
    padding-right: 20px; /* sliding doors padding */
	color: yellow;
	margin: 10px 0 0 25px;
	border-bottom: none;
	text-decoration: none;
	text-align: center;
	}
	
a.buttonY span {
background: transparent url(../images/bg_buttonY_span.gif) no-repeat;
    display: block;
	line-height: 20px;
    padding: 8px 0 12px 20px;
	color: black;
	border-bottom: none;
	text-decoration: none;
} 

a.buttonY:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
	border-bottom: none;
	text-decoration: none;
	
}

a.buttonY:active span {
    background-position: bottom left;
   /* padding: 6px 0 0 20px; /* push text down 1px */ /* this is acting weird in ie6.0 for some reason...*/
	
}

a.buttonY a:visted {
color: #f3ef9f;
	border-bottom: none;
	text-decoration: none;
}


.texta {
background: #fff;
border: 1px solid ccc;
font-size: 10px;
margin: 3px 0 3px 0;

}
/* ----- END FRONT PAGE SPECIFIC -- */




/* ------------------------------------------------------- */
/* -- GETTING LEGAL HELP SECTION -- */
#gettingboxone {
width:390px;
float:left;
padding: 0px 0px 0px 10px;
}

#gettingbox1a {
width:190px;
float:left;
background: url(../images/bgtile_gettingbox1.gif);
}

#gettingbox1b {
width:190px;
float:right;
background: url(../images/bgtile_gettingbox1.gif);
}

#gettingboxtwo {
width:190px;
float:right;
background: url(../images/bgtile_gettingbox1.gif);
}


#gettingboxbottom {
width:390px;
padding: 0px 0px 0px 10px;
text-align:left;
}

#gettingboxbottoma {
width:190px;
float:left;
background: url(../images/bgtile_gettingbox1.gif);
}

#gettingboxbottomb {
width:190px;
float:right;
background: url(../images/bgtile_gettingbox1.gif);
}



#questionbox {
background: url(../images/bgtile_questionbox.gif);

}

#questionbox p, #questionbox h4 {
margin-left:25px;
}


#questionbox a {
text-decoration:none;
}

#questionbox a:hover {
text-decoration:none;
color:#00a650;
}




/* -- End Getting Legal Help -- */




/* ------------------------------------------------------- */
/* -- NEWSROOM SECTION --*/
#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: url(../images/rightColTop.jpg) no-repeat top left; */
	background: #fffe97;
	}
#newsroomright_yellow h4, #newsroomright_yellow p {
	padding: 5px 5px 5px 5px;
	}

/* - End newsroom - */




/* ------------------------------------------------------- */
/* -- Dashboards - split page -- */

.dashboard_left {
	float: left;
	width: 200;
	border-top: 1px solid #d6d6d6;
}

.dashboard_right {
	float: right;
	width: 400;
	border-top: 1px solid #d6d6d6;
}

/* -- End dashboard -- */



/* ------------------------------------------------------- */
/* -- Background Switcher (Forms Library) -- */

#switcherbg {
background-color:#ffffff;
}
#switcherbg:hover {
background-color:#deefef;

} 

/* -- END Backgroung Switcher -- */






/* ------------------------------------------------------- */
/* --- LEFT HAND NAVIGATION BAR - Sub-page menus --- */
#leftnav {
	
	float: left;
	width: 170px;
	font-size: 11px;
	margin: 0px 0px 2px 3px;
	padding: 0;
	}

	/* -- Left Nav navigation styles --- */ 
#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 {
/*text-decoration:underline; */
color:white; 
background:#3d78c6;
}
 
#left-nav a.active:hover {
text-decoration:none; 
color:white; 
background:#7dbc8b;
} 

.top-level a, 
.second-level a, 
.third-level a	{
	display:block; 
	margin:0; 
	padding:5px 0 5px 0; 
	/* border-top:1px solid #fff; */
	/*border-bottom:1px solid #016b42;*/
} 

.top-level a	{padding-left:5px;} 
.second-level a	{
padding-left:15px;

} 


.third-level a	{padding-left:25px;} 

.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	{color:#000; background:#ffffff;} 

a.active	{color:#000; background:#d5eac9; font-weight:bold;} 
a.active2	{color:#000; background:#d5eac9;} 



#fourth-level	{margin:.5em 0; padding:0; background-color:#fff;} 
#fourth-level table	{width:100%;} 
#fourth-level p	{color:#666; width:80%;} 

#fourth-level .page-tabs .empty	{width:30%;} 
#fourth-level .page-tabs 	{margin-top:.5em;} 

#fourth-level .lists	{background:#fff url(/ui/v8/images/rule-h-gray-dots.gif) left bottom repeat-x;} 
#fourth-level td.col01	{width:22%; vertical-align:top; padding-left:1em;} 
#fourth-level td.col02	{width:78%; vertical-align:top;} 

#fourth-level .text-tabs	{margin:1em 0 0 0; padding:0 0 1em .5em; background:url(/ui/v8/images/rule-h-gray-dots.gif) left bottom repeat-x;} 
#fourth-level .text-tabs li	{display:inline; padding-left:.5em; color:#666;}
#fourth-level .text-tabs li a {padding-right:.5em;} 

#fourth-level .lists li a,
#fourth-level .text-tabs a {text-decoration:none; color:blue;}

#fourth-level .lists a.active,
#fourth-level .text-tabs a.active	{color:#000; font-weight:bold; text-decoration:none; cursor:text;}

#fourth-level .lists li a:hover,
#fourth-level .text-tabs li a:hover {text-decoration:underline; color:#69c;} 

#related-links	{color:#000; background:#fff; margin:16px 0 5px 0;} 
#related-links .title	{padding:0 0 0 12px;} 
#related-links ul, #related-links ol	{margin:.3em 0 1em 1.5em;} 

#popup-masthead {display:none;}
#popup-footer {display:none;}





/* ------------------------------------------------------- */
/* -- FOOTER -- */	
#footer {
	/* background: url(../images/footer.jpg) repeat-x left top #75aaee; (Old blue fader image) */
	background: #e7e7e7;
	width: 790px; 
	bottom: 0px;
	/* color: #ffffff; */
	font-size: .9em; 
	margin: 0px auto 0px;
	padding: 0;
	overflow: hidden;
	clear: both; /*this should work in both ie and FF, works on everything else.*/
	border-top: 3px solid #01046b;
	/* border-top: 3px solid #fff;  (Old white border) */
	}
	
#footer p {padding: 5px 10px 5px 10px;}
#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: #05a;}
#footer a:hover {color: #cd7d1f;}





/* ------------------------------------------------------- */
/* -- 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 */





/* ------------------------------------------------------- */
/* -- other classes -- */

/*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;
}







/* -- Specific to linden award, but can be used elsewhere if desired -- */

#picLeft {
margin: 0 0 10px 0;
clear: left;
}

#picLeft img {
width: 100px;
margin-right: 10px;
float: left;
}


#picLeft .fLeft {
float: left;
width: 270px;
}

/*-- target for the article image (top image). -- */

#article img {
padding-bottom: 5px;
}

/* little inline icons */
.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;
}


/* Contact Page - started to move from inline style to here, but didn't really work too well. */
.contactDiv {
border: 1px solid #88a3b7; background-color:#ffffff; width:270px; margin: 4px; padding: 5px;
}
