/*-----------------------------------------------
CSS for Legal Aid Ontario - Quick Help Centre Ver 1.1

Coding layout and text formatting

Version 1.1 - Modified version of Virtual Office incorporating
feedback suggestions

Assembled by Chris Cowley / April 24/09
-----------------------------------------------*/


/*-- PAGE LAYOUT --*/

html {
font-family:verdana,arial,helvetica,sans-serif;
}

a, a:active, a:visited {
text-decoration: underline;
color: #1748a5;
}

a:hover {
color: #3660b0;
text-decoration: none;
}


body {
	background: url(../images/headerBack_qhc.jpg) repeat-x top center #fff;
	background-color: #ffffff;
	font-family: Arial, Tahoma, Veranda;
	font-size: 0.8em;
	margin: 0px;
	text-align: center;
}

#page {
	/* border: 2px solid #0052bc; the blue line */
	width: 750px;
	background-color: #ffffff;
	margin: 0px auto 0px auto;
	padding: 0px;
	/* text-align: left; */
	}



/* --- HEADER --- */
#header {
	
	width: 750px;
	height: 110px;
	margin: 0px auto 0px;
	padding: 0:
	overflow: hidden;
	background: none;
}

#header h1, #header h4 {
text-align: right;
padding: 5px 10px 0 0;
color:white;
margin: 0;
}

#header h1 {
font-size: 3em;
}

#header img {
float: left;
border: none;
}

/* --- HEADER --- */
#sampletest_header {
	
	width: 750px;
	height: 110px;
	margin: 0px auto 0px;
	padding: 0:
	overflow: hidden;
	background: none;
}

#sampletest_header h1, #sampletest_header h4 {
text-align: right;
padding: 5px 10px 0 0;
color:white;
margin: 0;
}

#sampletest_header h1 {
font-size: 3em;
}

#sampletest_header img {
float: left;
border: none;
}


/* --- MAIN PAGE --- */

.mainLeft {
float:left;
width:48%;
}

.mainRight {
float:right;
width:48%;
}


.mainbox {
padding: 0px 10px 0px 35px;
background: url(../images/bgtile_mainbox1.gif);
/* border-top: 2px solid #abc89a;
border-bottom: 2px solid #abc89a;
border-right: 2px solid #abc89a; */

}


/* -- Split the page 1/3 - 2/3 -- */
.mainonethird {
float:left;
width:32%;
}

.maintwothirds {
float:right;
width:65%;
}


.mainbox2 {
padding: 0px 10px 0px 35px;
background: url(../images/bgtile_mainbox2.gif);
}










/* --- CONTENT - Split Page --- */
.officeLeft {
float: left;

width: 500px;
margin: 0 20px 10px 0;
}

.officeSmall {
float: right;
width: 220px;
}

.officeSmall p{
background: #f3ef9f;
padding: 5px 10px 5px 10px;
color: #016b42;
}

.officeSmall a, .officeSmall a:visited {
text-decoration: underline;
color:#016b42;
}

.office3Col {
width: 243px;
float: left;
margin-right: 10px;

}

.office3ColEnd {
width: 243px;
float: right;
}

.office3Col h3, .office3ColEnd h3 {
margin:0 0 0 0;
background: url(../images/vofficeH3.jpg) no-repeat left;
padding: 5px 0 5px 5px;
}

.office3Col p{
margin:0 0 0 0;
}



.office3Col a, .office3Col a:visited, .office3ColEnd a, .office3ColEnd a:visited, .mainlongbox a, .mainlongbox a:visited {
color: #016b42;
text-decoration: underline;
}



.mainlongbox {
width: 350px;
float: left;
margin-right: 10px;
}

.mainlongbox2 {
width: 350px;
float: right;
margin-right: 10px;
}

.mainlongbox h3 {
margin:0 0 0 0;
background: url(../images/longboxH3.jpg) no-repeat left;
padding: 5px 0 5px 5px;
}

.mainlongbox2 h3 {
margin:0 0 0 0;
background: url(../images/longboxH3.jpg) no-repeat left;
padding: 5px 0 5px 5px;
}


.maindisclaimer {
	width:350px;
	float: right;
	padding: 1em, 1em 1em 1em;
	Margin-right: 10px;
	background: #e6e6e6;
	color: #838383;
}





.fullQuestion {
display: block;
background: url(../images/icon_arrow.gif) no-repeat 15px 15px #e8e8e8;
margin: 0 0 10px 0;
padding: 5px 5px 5px 40px;
}


#content {
	/*width:730px;*/
	/*margin: 0px 10px 0px 10px;*/
	padding: 0px;
	text-align: left;
	line-height: 17px;
	background-color: #ffffff;
	overflow: auto;
}

#content H1, #content H2 {
padding: 10px 0 10px 0;
}



/*---  FOOTER --- */
#footer {
	/* background: url(../images/footer.jpg) repeat-x left top; */
	background: #0750ae;
	width: 750px;
	/* height: 40px; */
	/* position: relative; */
	bottom: 0;
	color: #ffffff;
	margin: 10px auto 0px;
	padding: 0px;
	/*overflow: hidden;*/
	z-index:-24;
	clear: both;	
}

#footer p {
text-align: left;
padding: 10px;
}


	

/* --- BREADCRUMBS ---- */
#breadcrumbs {
	background: #e1e1e1;
	/* text-align: center; */
	color: #626262;
	font-size: xx-small;
	/* border-top: 1px solid #004a80; */
	border-bottom: 1px solid #c0c0c0;
	overflow: hidden;
	
	}
#breadcrumbs a, #breadcrumbs p {
	text-decoration: none;
	color: #000668;
	}
	
#breadcrumbs a:hover {
	text-decoration: none;
	color: #a0410d; /*(dark orange highlight)*/
	font-weight:bold;
	}
#breadcrumbs p {
width: 750px;
margin: 0 auto 0;
padding: 5px 30px 5px 0px;
text-align: right;
}

.voRight {
float: right;
width: 200px;
}





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


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



/*-- TEXT FORMATTING SETUP --*/

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

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:11px;}

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

p	{margin:0; padding:.5em 0 .5em 0; line-height:1.25em;}
.first	{padding:0 0 .5em 0;}
ul.first	{margin:0; padding:0 0 .5em 1.5em;}
ul	{margin:0; padding:.5em 0 .5em 2em;}
ol	{padding:.5em 0em 0.5em 2.5em;}
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;}

.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;}
.note	{color:#666; font-size:.9em;}
.footernote {color:#ffffff; font-size:.8em;}


/* Switching BG colour of TD in Navbar */
td.off {
	/* background: #016b42; - leave hidden to allow the bg image to shwo instead */
}
td.on {
	background: #dddddd;
}


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

.sub-title	{color:#666; padding:0 0 1.5em 0; font-weight:bold;}
.sub-head	{color:#666; padding:.3em 0 .5em 0;}
.kicker	{font-size:.9em; color:#666; padding:0; font-weight:bold;}

h1	{font-size:1.9em; font-weight:normal; color:#000;}

h2	{font-size:1.5em; font-weight:normal;}
#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: #1748a5; border-top: 1px solid #ccc; margin-top:5px; padding-top:5px;}
h4	{font-size:1.1em; margin: 0;}

h5,h6	{font-size:1em; color:#666;}
ul.h4-list	{padding:0 0 1em 35px;}
li h4	{color:#000;}

.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-med	{background:#69c; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-med-light	{background:#9be; color:#000; 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;}


//* ------- colors ------- */
.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;}

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



/* ----- Disclaimer Box ------ */
.disclaimer {
	width:500px;
	text-align:left;
	padding: 1em, 1em 1em 1em;
	background: #e6e6e6;
	color: #838383;

}


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

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



/* ------ 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*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    /* border:1px solid #ffff00; */
    background-color:#ffffcc; color:#000;
    text-decoration: none;}
	
acronym { cursor: help;  font-weight: bold; border-bottom: 1px solid red }