/* 
Title: 		Master Styles for cad.ca 
Author:		jay.west for the Canadian Association of the Deaf
Contact:	creative@jaywest.com
Updated:	Thursday, June 1, 2006
*/



/* This document should contain all pure and valid css rules. 
All hacks required to compensate for IE bugs are maintained in ie.css */


/* General Rules
------------------------------------------------------------------------- */

* {margin:0; padding:0;} /* by default remove all the padding and margins from every page element */
#browserWarning {display: none;} /* web standards message will be hidden from modern browsers */


/* The default size for "medium" text in all modern browsers is 16px. 
We will reduce the size for the entire document to small using relative keywords:
This takes 16px down to roughly 12px, which is a bit more elegant for a relative base 
IE5/Win has a size decrepency so we will provide hack in order to get it inline.
All navigation items will continue to be specified in pixels for design accuracy.  */

body {
	font-size:small; /* for standards browsers */
	font-family: Tahoma, Verdana, Helvetica, sans-serif;
	color: #333;
}



/* General Classes
------------------------------------------------------------------------- */

#sidebar img {margin: 15px auto; display:block;} /* center sidebar images */

.true {color:#6c0; font-weight:bold; font-size:120%;}
.false {color:#c00; font-weight:bold; font-size:120%;}


/* Microformats
------------------------------------------------------------------------- */

.vcard {margin: 15px 0;}
.vcard .fn {font-weight:bold;}
.vcard .fn,
.vcard .adr,
.vcard .title, 
.vcard .tel {display:block;} /* soft wrap */




/* General Elements
------------------------------------------------------------------------- */
	
p, li {
	line-height: 145%;
	font-size: 95%;
	margin: 0 0 10px 0;
	color: #333;
}
blockquote {
	margin: 5px 20px; 
	font: 120% Georgia, "Times New Roman", Times, serif; 
	color:#ccc; 
	line-height:120%; 
	font-style:italic;
}



/* Links
------------------------------------------------------------------------- */

a.image, a.image:hover {background-color: transparent; border:none;}

#flashContain a {background-color: transparent; border:none;}
#flashContain a:hover {background-color: transparent; border:none;}

a.pdf {background: transparent url("/img/template/iconPDF.gif") center right no-repeat; padding: 2px 18px 2px 1px;}
li a.pdf {background: transparent url("/img/template/iconPDF.gif") center left no-repeat; padding: 2px 1px 2px 22px;}

a.email {background: transparent url("/img/template/iconEmail.gif") center right no-repeat; padding-right:15px;}
a.email:hover {background: #004d84 url("/img/template/iconEmailHover.gif") center right no-repeat; padding-right:15px;}
a.external {background: transparent url("/img/template/iconExternal.gif") center right no-repeat; padding-right:15px;}
a.external:hover {background: #004d84 url("/img/template/iconExternalHover.gif") center right no-repeat;}
a.add, a.edit, a.delete {color:#000; text-decoration:none; font-size:80%;}

a {cursor:hand; color:#004d84; padding: 0 1px;}
a:hover {text-decoration:none; color:#fff; background-color:#004d84; border:none;}
a img {border:none;} /* remove border for all linking graphics */



/* Lists
-------------------------------------------------------------------------------*/

ul, ol {margin-left: 0; padding-left: 0;} /* establish consistent indentation across all browsers */ 
ul, ol {margin: 0 0 10px 0;} /* space above and below */ 
li {margin: 0 0 6px 0;}

ul li {list-style: square outside; margin-left: 16px;}
ol li {margin-left: 30px;}

dl {margin: 0 0 10px 0;}
dt {margin: 15px 0 3px 0; font-weight:bold;}
dd {margin: 0 0 6px 0; font-size:90%; color:#666;}




/* Headings 
--------------------------------------------------------------------------------- */

#header h1 { /* used by the header logo */
	text-indent: -5000px; /* hide the text */
	/*float: left;*/
	width: 232px; /* width of replacement image */
	height: 44px; /* height of replacement image */
	position: absolute;
	top: 76px;
	left: 162px;
	}	
#header h1 a {
	width: 232px; /* width of replacement image */
	height: 44px; /* height of replacement image */
	display: block;
	border:none;
	}
#header h1 a:hover {background:none;}

h2 { /* red */
	font: normal 190% Georgia, "Times New Roman", Times, serif;
	color: #942923;
	margin: 16px 0 6px 0;
	border-bottom: 1px solid #c90;
}

h3 { /* blue */
	font-size: 125%;
	color: #004d84;
	margin: 18px 0 4px 0;
}
h3 a {color: #004d84;}

h4 { /* red */
	font-size: 110%;
	letter-spacing: 0.1em;
	margin: 16px 0 5px 0;
	color: #942923;
	/*text-transform:uppercase;*/
	font-weight:normal;
}
h5 { /* black */ 
	font-size: 95%;
	margin: 15px 0 5px 0;
	color: #000;
}
h6 { /* blue */ 
	font-size: 90%;
	margin: 10px 0 3px 0;
	color: #004d84;
}





/* Forms
--------------------------------------------------------------------------------- */

form {
	width: 100%;
	margin: 20px 0;
	padding: 0;
}
fieldset { 
	float: left; 
	width: 100%; 
	margin: 0; 
	padding: 0 10px 5px 10px; 
	border: 1px solid #ccc; 
	display:block;
}
legend { 
	font-weight: bold; 
	color: #942923; 
	margin: 0; 
	padding: 5px; 
}
label {
	display: block; /* force them to a new line */
	margin: 3px 0 3px 0;
}
input, textarea, file {
	border: 3px double #999; 
	padding: 3px;
	margin: 0 0 5px 0;
	font-size: 90%;
}
textarea {
	font: 85% Verdana, Arial, Helvetica, sans-serif;
	height: 200px;
	width: 100%;
}
input.text,
input.file {
	width: 100%;
}
input.date {
	width: 70px;
}
select {
	width: auto;
	margin: 6px 0;
  	border: 1px solid #999;
	padding: 2px 3px;
}

input:focus,
textarea:focus  {border: 3px double #333; background-color: lightyellow;}

/* checkboxes */
label.checkbox {margin: 0 0 10px 0; width:auto;}
input.checkbox  {border:none; float:left; margin: 0 5px 0 0;}


/* form action buttons */

input.submit,
input.cancel,
table a.add,
table a:hover.add  {
	border: 3px double #999;
	border-top-color: #ccc;
	border-left-color: #ccc;
	padding: 3px 10px;
	margin: 10px 10px 10px 0;
	background-color: #fc0;
	color: #333;
	font-size: 100%;
	cursor: hand;
	text-align:center;
	width: auto;
}
input.cancel {
	background-color: #ccc;
	font-size: 95%;
}
input:active.submit,
input:active.cancel,
table a:active.add  {
	border: 3px double #ccc;
	border-top-color: #999;
	border-left-color: #999;
}

table a.add, table a:hover.add {font-size:90%; margin:0; float:right; padding: 2px 5px;}


/* Tables
--------------------------------------------------------------------------------- */

table {
	border: 1px solid #ccc; 
	margin: 10px 0 20px 0;
	padding:0;
	border-collapse:collapse;
}
th {
	padding: 3px; 
	margin: 0;
	font-weight:bold; 
	font-size: 85%;
	background-color: #eee;
	text-align:left;
}
td {
	padding: 4px;
	margin: 0;
	border-top: 1px solid #eee;
}
caption {
	font-weight: bold; 
	font-size: 110%;
	color: #942923; 
	text-align:left;
	margin: 15px 0 10px 0;
	padding: 0 0 10px 0;
}

.toolbar1, .toolbar2, .toolbar1 table {margin:0; border:none; width:auto;}
.toolbar1 td, .toolbar2 td {padding:0; border:none;}




/* Page Structure
--------------------------------------------------------------------------------- */

body {
	background: #ccc url("/img/template/bgGreyStripe.gif") 50% 0;
}
#pageWrap {
	/*width: 760px;  fix the width */
	width: 100%;
	/*margin: 0 auto;  centre the page */
	overflow: hidden; /* ensure the div stretches to contain its floats */
	/*height: 1%;  holly hack - width or height is required by IE for the above rule to work */
	background: transparent url("/img/template/bgGreyFade.gif") 50% 0 repeat-x;
}
#header {
	width: 784px;
	height: 230px;
	overflow: hidden; /* ensure the div stretches to contain its floats */
	/* height: 1%; holly hack - width or height is required by IE for the above rule to work */
	margin: 0 auto; /* center the within the page */
	background: transparent url("/img/template/bgHeaderEn.jpg") 50% 0 no-repeat;
	position:relative; /* so we can absolute position its children */
}
body.french #header {background: transparent url("/img/template/bgHeaderFr.jpg") 50% 0 no-repeat;}

#contentWrap {
	/*width: 100%;*/
	width: 784px;
	overflow: hidden; /* ensure the div stretches to contain its floats */
	height: 1%; /* holly hack - width or height is required by IE for the above rule to work */
	background: transparent url("/img/template/bgWhite.gif") 50% 0 repeat-y;
	margin: 0 auto; /* center the within the page */
}
#content {
	float: left;
	width: 500px;
	margin: 0 0 0 6px;
}
#contentInner {
	padding: 20px 0 20px 20px;
   }
#sidebar {
	float: right;
	margin: 0 6px 0 0; /* 12 */ 
	width: 260px;
	/*background: transparent url("/img/template/bgSupportCADen.gif") top right no-repeat;*/
	}
body.french	#sidebar {/*background: transparent url("/img/template/bgSupportCADfr.gif") top right no-repeat;*/}

#sidebarInner {
	padding: 10px;
	}	
#bottom {
	clear:both;
	width: 764px; /* 784 minus padding */ 
	text-align: right;
	padding: 0 20px 0 0;
}
#footer {
	clear:both;
	width: 784px;
	margin: 0 auto; /* center the within the page */
	overflow: hidden; /* ensure the div stretches to contain its floats */
	background: #12598c url("/img/template/bgFooter.gif") bottom left no-repeat;
}



#bottom img {margin: 5px; vertical-align:middle;}




/* Header 
--------------------------------------------------------------------------------- */






/* Navigation
--------------------------------------------------------------------------------- */

/* Generic Horizontal Pipe Nav */
/* This can be used globally and restyled as needed within the cascade. */
/* Tested in - Win/IE5 Win/IE5.5 Win/IE6 Win/NN4 Win/NN6 Win/NN7 Win/Moz Mac/Safari Mac/IE5 Mac/Moz */

.navHorizPipe li {
	margin: 0;
	display: inline; /* make the list horizontal */
	list-style: none;
	float: left;
	border-left: 1px solid #fff;
}
.navHorizPipe li a  {
	padding: 0 6px 1px 6px;
	text-decoration: none;
	font-weight: normal;
	border:none;
}
.navHorizPipe li a {display: block;}
.navHorizPipe li:first-child {border-left:0;} /* hide first pipe (Mozilla, Netscape, Safari) */

* html .navHorizPipe { height: 1%; } /* Win/IE browsers only */
* html .navHorizPipe li {margin: 0 1px 0 -1px;} /* Win/IE browsers only LI's are shifted to the left using a negative margin value to hide the first pipe.*/

.navHorizPipe li a:hover {color:#000; text-decoration:none;}



/* Utility Navigation */

#navUtility {
	overflow: hidden; /* ensure the div stretches to contain its floats */
	/*height: 1%;  holly hack - width or height is required by IE for the above rule to work */
	width: 43%;
	/*float:right;*/
	position: absolute;
	top: 20px;
	right: 26px;
}
body.french #navUtility {width: 55%;}


#navUtility ul {float:left; margin: 2px 0 0 0;} /* opposing float with the search */
#navUtility li {border-color:#ccc;}
#navUtility a {color:#666; font-size: 10px;}
#navUtility a:hover {color:#000; text-decoration:none; background-color:#ccc;}

/* on-states */ 
body#about #navAbout a,
body#contact #navContact a,
body#media #navMedia a {font-weight: bold; color:#000;}



/* Search */ 

.navSearch {float:right; width:auto; margin:4px 0;} /* opposing float with the utility list */
.navSearch * {vertical-align: middle; margin: 0 1px;}

.navSearch input.txtKeywords {
	font: 10px Tahama, Verdana, Helvetica, sans-serif;
	color: #666;
	width:80px;
	margin:0;
	padding: 1px 5px;
	border: 1px solid #ccc;
	float: left;
}
.navSearch input.txtKeywords.fieldFocus {background-color:#ffc; color:#000;}

.navSearch input.bttnSearch {
	width:18px; 
	height:18px; 
	margin: 0 3px;
  	border:none;
	text-indent: -5000px; /* hide the text */
	background: transparent url("/img/template/bttnSearch.gif") top left no-repeat;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
	float: left;
}





/* Footer Navigation */
#footer * {font-size: 10px; color:#fff;}
#footer p {float: left; margin: 2px 0 0 20px;}
#navFooter {float:right; padding: 3px 15px 2px 0;}
#navFooter li {border-color:#6392b3;}
#navFooter a:hover {text-decoration:none;}




/* Top Nav - using the sliding doors technique
--------------------------------------------------------------------------------- */

#navPrimary {
	list-style-type: none;	/*turns off display of bullet*/
	height: 55px; /* overall height of the nav object */
	width: 784px; /* overall width of the nav object */
	/*float:left;*/
	padding:0;
	margin:0;
	position: absolute;
	top: 175px;
	left:0;
}
#navPrimary li {
	position:relative;
	float:left; /*fix Mozilla bug not showing bg images on page load */
	list-style-type: none;	/*turns off display of bullet*/
	margin: 0;
}
#navPrimary li a {
	float: left;
	padding: 55px 0 0 0; /* padding-top set to overall height of the nav object */
	overflow: hidden;
	height: 0px !important; 
	height /**/:55px; /* overall height of the nav object - for IE5/Win only */
	width: 784px; /* overall width of the nav object */
	border:none; /* remove global link border */	
	/* background-position: 0 0; */ 
	background-repeat: no-repeat;
}
#navPrimary li a:hover {background:none;}


/* set the language specific graphics for the hover and off-state */

body.english #navPrimary,
body.english #navPrimary a:hover {background: url("/img/template/navPrimaryEn.gif");}
body.french #navPrimary,
body.french #navPrimary a:hover {background: url("/img/template/navPrimaryFr.gif");}



/* create the hot spots */

body.english #navNews a			{width: 168px;}
body.english #navIssues a		{width: 113px;}
body.english #navProjects a		{width: 180px;}
body.english #navResources a	{width: 167px;}
body.english #navSupport a 		{width: 156px;}

body.french #navNews a			{width: 196px;}
body.french #navIssues a		{width: 146px;}
body.french #navProjects a		{width: 158px;}
body.french #navResources a		{width: 133px;}
body.french #navSupport a 		{width: 151px;}


/* create hovers - vertical offset the background to reveal the hover-state */
 
body.english #navNews a:hover, body.french #navNews a:hover				{background-position:    0px -55px;}
body.english #navIssues a:hover,body.french #navIssues a:hover			{background-position: -168px -55px;}
body.english #navProjects a:hover, body.french #navProjects a:hover		{background-position: -281px -55px;}
body.english #navResources a:hover, body.french #navResources a:hover	{background-position: -461px -55px;}
body.english #navSupport a:hover, body.french #navSupport a:hover		{background-position: -628px -55px;}

body.french #navNews a:hover, body.french #navNews a:hover				{background-position:    0px -55px;}
body.french #navIssues a:hover,body.french #navIssues a:hover			{background-position: -196px -55px;}
body.french #navProjects a:hover, body.french #navProjects a:hover		{background-position: -342px -55px;}
body.french #navResources a:hover, body.french #navResources a:hover	{background-position: -500px -55px;}
body.french #navSupport a:hover, body.french #navSupport a:hover		{background-position: -633px -55px;}


/* create on-state - vertical offset the background to reveal the on-state */
 
body#newsevents #navNews a		{background: url("/img/template/navPrimaryEn.gif")    0px -110px;}
body#issues #navIssues a		{background: url("/img/template/navPrimaryEn.gif") -168px -110px;}
body#projects #navProjects a	{background: url("/img/template/navPrimaryEn.gif") -281px -110px;}
body#resources #navResources a	{background: url("/img/template/navPrimaryEn.gif") -461px -110px;} 
body#support #navSupport a		{background: url("/img/template/navPrimaryEn.gif") -628px -110px;}

body#newsevents.french #navNews a		{background: url("/img/template/navPrimaryFr.gif")    0px -110px;}
body#issues.french #navIssues a			{background: url("/img/template/navPrimaryFr.gif") -196px -110px;}
body#projects.french #navProjects a		{background: url("/img/template/navPrimaryFr.gif") -342px -110px;}
body#resources.french #navResources a	{background: url("/img/template/navPrimaryFr.gif") -500px -110px;} 
body#support.french #navSupport a		{background: url("/img/template/navPrimaryFr.gif") -633px -110px;}





/* Secondary Navigation
--------------------------------------------------------------------------------- */

#navSecondary {
	background: #c90 url("/img/template/bgSidebar.gif") bottom left no-repeat;
	margin: 0 0 15px 0;
}
#navSecondary h3 {
	background: #c90 url("/img/template/bgSidebar.gif") top left no-repeat;
	font: normal 160% Georgia, "Times New Roman", Times, serif;
	color: #fff;
	margin: 0;
	padding: 28px 0 3px 15px;
}
body#home #navSecondary h3 {background: #c90 url("/img/template/bgSidebarHome.gif") top left no-repeat; padding-top: 15px;}

#navSecondary h3 a {color: #fff;}
#navSecondary h3 a:hover {color: #000;}
#navSecondary ul {margin: 0 10px 15px 15px; padding: 8px 0 10px 15px; border-top: 1px solid #942923;}
#navSecondary li {margin: 0 0 4px 0; font-size:105%;}

#navSecondary li ul {margin: 0 5px 5px 0;font-size:85%; border:none;}

#navSecondary a {color: #000; text-decoration:none;}
#navSecondary a:hover {background-color: #DBB74A;}

#navSecondary .selected a {font-weight:bold; color:#fff;}
#navSecondary .selected a:hover {color:#000;}



/* recordset paging */

#nav_paging {
clear: left;
/*float: right;*/
font-size: 90%;
text-transform: uppercase;
text-align: right;
/*width: 330px;*/ 
} 
#nav_paging a {
text-decoration: none;
} 


/* Home Page  - Banner
--------------------------------------------------------------------------------- */

#banner {
	padding: 6px;
	border: 1px solid #ccc;
}
#features {margin: 0px 0 20px 0;}
#features a {padding: 0;}
#features img {margin: 4px auto; }


/* Home Page  - Deaf Issues
--------------------------------------------------------------------------------- */

#deafissues {
	overflow: hidden; /* ensure the div stretches to contain its floats */
	height: 1%; /* holly hack - width or height is required by IE for the above rule to work */
	background: transparent url(/img/template/bgDeafIssues.gif) left bottom repeat-x;
}
#deafissues h2 { margin: 10px 0 5px 10px;}

#deafissues a {color: #000; text-decoration:none; margin-right:4px;}
#deafissues a:hover {color: #000; background-color:#eedca7;}

#deafissues ul {
	float: left; /* opposing float with spotlight */
	list-style-type: none;	/*turns off display of bullet*/
	width: 99%;
	margin: 5px 0 0 5px;
	padding: 0;
}
#deafissues li {
	float: left; /* required for columns */
	width: 33%; /* restrict the width to make 3 columns */
	list-style-type: none;	/*turns off display of bullet*/
	font-size:85%;
	margin:  0 0 5px 0;
}



/* Home Page  - News
--------------------------------------------------------------------------------- */

#news {
	float:left;
	width: 470px; /* fixed width of list - required */
	padding: 8px 0;
	margin: 10px 0;
}
#news dl {
	float:left;
	margin: 6px 15px 5px 0; /* vertical space between items */
	padding: 0;
	display: inline; /* fixes IE/Win double margin bug */
	position: relative; /* needed for IE */
	width: 470px;  /* fixed width of list - required */
	}
#news dt {
	float: right;
	margin: 0;
	padding: 0;
	width: 324px; /* max width of 470px minus photo (146 = 120 photo + 12 padding + 2 border + 12 left margin) */
	font-size: 110%;
	margin-top: 15px;
}
#news dt a {color: #004d84; text-decoration:none;}
#news dt a:hover {bacground-color: #004d84; color:#fff;}

#news dd {
	margin: 2px 0;
	padding: 0;
	font-size: 85%;
	color: #666;
	margin-left: 146px; /* constrain the text to stay right of the image (full photo width above)  */
}
#news dd.img {
	margin-left: 0; /* counteract the rule above  */
}
#news dd.img img {
	float:left;
	margin: 0 12px 0 0; /* horizontal space between image and text */
	padding: 6px;
	border: 1px solid #ccc;
}
#news a {color: #fff; border:none;}
#news dd.img a {padding:0;}
#news dd.img a:hover img {border-color:#666;}

#news .date {color:#000;}






/* RSS Button 
--------------------------------------------------------------------------------- */

#feed {float:left; margin: 5px 0 0 0;}

#feed a.rss {
	font-family: Tahoma, Verdana, sans-serif;
	background: transparent url(/img/splash/feed-icon-12x12.gif) left center no-repeat;
	padding: 0 2px 0 17px;
	color:#f90;
	}
#feed a.rss:hover {
	background-color:#f90;
	color:#000;
	}


/* News & Events 
--------------------------------------------------------------------------------- */

body#newsevents img.photo {
	float:right; 
	margin: 15px 0 15px 15px; 
	clear:left;
	padding: 6px;
	border: 1px solid #ccc;
}



/* Resources 
--------------------------------------------------------------------------------- */

body#resources.publications img {float:right; margin: -10px 0 15px 15px; clear:left;}
body#resources.publications h3 {clear:right;}

body#resources.links img {float:right; margin: 0 0 15px 15px; clear:left;}
body#resources.merch img {float:right; margin: 0 0 15px 15px; clear:left;}
body#resources.merch h3 {display:block; clear:right;}