/*@import url(reset.css);*/

/* should these things be in a stylesheet used by all styles?*/

blockquote {
/* border: 1px solid green; */
 margin: 0;
 background: url(../images/left_quote.gif) left top no-repeat;
 float: right;
 padding-left: 85px;
 width: 200px;
 padding-top: 20px;
 margin-top: 10px;
}

blockquote p {
/* border: 1px solid red; */
 padding-right: 85px;
 background: url(../images/right_quote.gif) right bottom no-repeat;
 padding-bottom: 20px;
 font-style: italic;
}

blockquote * {
 margin: 0;
}

/**************************************************************/

div#primary {
 background: url(../images/front_page/stain.jpg) 29px 155px no-repeat;
/* background-color: yellow; */
 width: 400px;
 float: left;
 margin: 0;
 padding: 0;
}

div#primary ul#funders {
	margin: 5px 0 0 0;
	padding: 0;
	list-style: none;
	width: 405px;
	overflow: hidden;
}

div#primary ul#funders li{
	margin: 0 5px 0 0;
	padding: 0;
	float: left;
}

div#secondary {
 background-color: #ebebeb;
 width: 168px;
 float: right;
 margin: 0;
 padding: 5px;
 margin-right: 5px;
 display: inline; /*fixes IE double margin bug. Yippee! (http://www.positioniseverything.net/explorer/doubled-margin.html)*/
}

div#primary * {
	margin: 0;
	padding: 0;
}

div#secondary * {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

div#secondary p.highlight {
	margin-top: 0;
	text-align: center;
}

div#secondary p.highlight a strong {
	font-size: 120%;
}

div#secondary p.highlight a {
	color: black;
	display: block;
	text-decoration: none;
}

div#secondary p.highlight a:hover {
	background-color: white;
}

div#secondary ul#national_info {
	margin: 0 0 5px 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

div#secondary ul#national_info li {
}

div#secondary ul#national_info li a {
	width: 168px; /*178 -10*/
	display: block;
}

div#secondary ul#national_info li a:hover {
	background-color: white;
}

div#partnership {
	float:right;
	font-size:smaller;
	color:#f6c;
}

div#partnership img {
	vertical-align:text-top;
}

/**************************************************************/

html {
 padding: 0px;
 margin: 0px;
 height: 101%
}

body {
 border: 0px;
 margin: 0px;
 padding: 0px;
 height: 100%;
}

img {
	border: 0;
}

h2 img, h3 img, h4 img, h5 img, h6 img { /* are these used?? */ /* yes? - to float logos on info zone pages */
/*	margin: 0 20px 5px 5px; */ /*DID THIS DO ANYTHING??? */
	float: right;
}

#breadcrumbs {
	display: none;
}

img#header {
	margin-top: 1.8em;
}

/****************************** skip-links *****************************/

#skip-links {
/*	background-color: white;
	background-color: yellow;*/
	background-image: url(../images/front_page/coffee_stain_top.gif);
	background-position: left bottom; /* ADD A BACKGROUND IMAGE WHICH IS THE TOP OF THE COFFEE STAIN */
	background-repeat: no-repeat;
	background-color: white;
	color: black;
/*	position: absolute;
	top: 0; 
	left: 50%;*/
	z-index: 20;
	width: 100%;
	width: 385px;
	width: 770px;
	margin: 0;
/*	padding: 5px 0;*/
/*	border-bottom: 1px solid blue; */
/*	background-image: url(../images/underline1.gif);
	background-repeat: no-repeat;
	background-position: bottom left;*/
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -385px;
	line-height: 1.8em;
}

#skip-links * {
	padding: 0;
	margin: 0;
}

#skip-links a {
/*	background-color: black;
	color: white; */
	margin: 0 0 0 5px;;
/*	color: pink;*/
/*	padding: 5px 0 5px 10px;*/
	color: black;
}

/************************** style-switcher ****************************/
#style-switcher {
/*	background-color: pink;*/
	color: black;
	z-index: 30;
	position: absolute;
	top: 0;
	left: 50%;
	width: 770px;
	width: 385px;
/*	margin-left: -385px;*/
	overflow: visible;
/*	border: 2px solid red;*/
/*	text-align: right;*/
	margin: 0;
	padding: 0;
/*	color: pink;*/
	display: none;
}

#style-switcher p {
/*	float: right;*/
/*	float: left;*/
	line-height: 1.8em;
	margin: 0;
	padding: 0;
	background-color:#CCFFCC;
	position: absolute;
	right: 0;
	top: 0; 
/*	right: 150px;*/
/*	border: 2px solid yellow;*/
	display: inline;
/*	overflow: auto;*/
/*	width: 100%;*/
/*float: right;*/
}

#style-switcher span {
	margin: 0 5px 0 0;
	padding: 0;
/*	border: 2px solid pink;*/
	display: block;
	float: right;
	line-height: 1.8em;
}

#style-switcher ul {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 1.8em;
/*	float: right;*/
	position: absolute;
	top: 1.8em;
	right: 0;
	overflow: visible;
	display: block;
/*	overflow: hidden;*/
/*	border: 2px solid blue;*/
/*	display: inline;*/
}

#style-switcher ul li {
	float: left;
	border: 2px solid #f3c;
/*	display: inline;*/
	margin: 0;
	padding: 0;
}

#style-switcher ul li a {
	margin: 0;
	padding: 0;
	color: black;
/*	border: 1px solid red;*/
}

#style-switcher ul li a:hover {
/*	border: 1px solid blue;*/
}

#style-switcher ul li a img {
	margin: 0;
	padding: 0;
}

/******************* language *******************/
#language {
	position: absolute;
	top: 0;
	left: 50%;
	background: red;
	color: white;
	z-index: 100;
	margin: 0;
	padding: 0;
	height: 1.8em;
	line-height: 1.8em;
}

#language a {
	color: white;
}

/******************* (OLD)language *******************/

/*#language {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
}
#language img {
	border: 0;
}

*/
/**********************************************************************/
body {
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	font-size: 83%;
	position: relative;
	background-color: #fff;
	background-image: url(../images/background_stars2.jpg);
	background-position: top center;
	background-repeat: repeat-y;
}

div {
}

img {
	margin: 0;
	padding: 0;
/*	vertical-align: bottom; */ /*this was messing up floats in Opera. Why was it here anyway? */
                               /* removing it knocked the nav down a few pixels????? - WHY??  */
}

#container img {
	/*padding-top: 1.2em;*/  /* leaves space for "you are here:..." - also need to add an equal margin-top to "content" as this is absolutely positioned */
}

/******************* container *******************/
#container {
	width: 770px;
	border: 0;
	position: relative;
	margin: 0 auto;
}

/******************* navigation *******************/
#navigation {
	margin: 0;
	padding: 0;
	border-right: 5px solid black;
	padding-bottom: 20px;
	background-image: url(../images/boundary_halftone_bottom.gif);
	background-repeat: repeat-x;
	background-position: bottom right;
	float: left;
}

#navigation {
	width: 160px;
	background-color: #fff;
	overflow: hidden;
}

#navigation p {
	background-color: #845d94;
	background-color: #fff;
	color: #fff;
	padding-left: 5px;
	overflow: hidden;
}

#navigation ul {
	color: #fff;
	list-style: none;
	padding: 0;
	margin: 0;
	padding-bottom: 20px;
	background-repeat: repeat-x;
	background-position: bottom left;
}

#navigation ul.home {

}

#navigation ul.about {
	background-color: #ec008c;
/*	background-image: url("../images/cloud_on_pink.gif"); */
}

#navigation ul.info {
	background-color: #f26521;
}

#navigation ul.news {
	background-color: #4cb031;
}

#navigation ul.rights {
	background-color: #00a1ef;
}

#navigation ul.contact {
	background-color: #172b74;
}

#navigation ul.help {
	background-color: #1bbbb4;
}

#navigation ul li {
	margin-left: 0;
	padding-left: 5px;
}

#navigation ul a {
	color: #fff;
	padding-right: 5px;
}

#navigation ul a:hover {
	background-color: #fff;
	color: #000;
	text-decoration: none;
}

#navigation p {
	margin: 0;
	padding: 0;
	height: 60px;
	width: 160px;
	background-position: top left;
	background-repeat: no-repeat;
	overflow: hidden;
	background-color: red;
}

#navigation h2.no_link {
/*	text-indent : -999em;*/
}

#navigation p a {
	display: block;
	text-indent : -999em;
	color: red;
/*	text-indent: -1000px; */
/*	background-color: pink;*/
	position: relative;
	width: 160px;
	background-position: top left;
	background-repeat: no-repeat;
	height: 60px;
} 

#navigation p.home,
#navigation p.about,
#navigation p.info,
#navigation p.news,
#navigation p.rights,
#navigation p.contact,
#navigation p.help {
	text-indent : -999em;
}

#navigation p.home {
	background-image: url("../images/text_home.gif");
}

#navigation p.home a {
	background-image: url("../images/text_home.gif");
}

#navigation p.home a:hover {
	background-image: url("../images/text_home_hover.gif");
}

#navigation p.about {
	background-image: url("../images/text_about.gif");
}

#navigation p.info {
	background-image: url("../images/text_info.gif");
}

#navigation p.news {
	background-image: url("../images/text_news.gif");
}

#navigation p.rights {
	background-image: url("../images/text_rights.gif");
}

#navigation p.contact {
	background-image: url("../images/text_contact.gif");
}

#navigation p.help {
	background-image: url("../images/text_help.gif");
}

#body_home #navigation p.home,
#body_home #navigation p.home a,
#body_home #navigation p.home a:hover {
	background-image: url("../images/text_home_selected.gif");
}

#body_about_site #about_site,
#body_about_privacy #about_privacy,
#body_info_money #info_money,
#body_info_health #info_health,
#body_info_relationships #info_relationships,
#body_info_sport #info_sport,
#body_info_housing #info_housing,
#body_info_law #info_law,
#body_info_environment #info_environment,
#body_info_world #info_world,
#body_info_education #info_education,
#body_info_track #info_track,
#body_info_work #info_work,
#body_info_volunteering #info_volunteering,
#body_news_editorial_group #news_editorial_group,
#body_news_special #news_special,
#body_news_awareness #news_awareness,
#body_news_service #news_service,
#body_rights_forum #rights_forum,
#body_rights_byc #rights_byc,
#body_rights_entitlement #rights_entitlement,
#body_rights_dragon #rights_dragon,
#body_rights_promise #rights_promise,
#body_rights_schools #rights_schools,
#body_rights_links #rights_links,
#body_rights_age #rights_age,
#body_rights_uncrc #rights_uncrc,
#body_contact_contact #contact_contact,
#body_contact_complaint #contact_complaint, /* can remove these now */
#body_contact_ask #contact_ask,
#body_contact_info #contact_info,
#body_contact_involved #contact_involved,
#body_contact_link #contact_link,
#body_help_infoshop #help_infoshop,
#body_help_gum #help_gum,
#body_help_sex #help_sex,
#body_help_contraception #help_contraception,
#body_help_hospital #help_hospital,
#body_help_advocacy #help_advocacy,
#body_help_counselling #help_counselling,
#body_help_drug #help_drug,
#body_help_homeless #help_homeless {
	background-color: black;
	color: #fff;
	text-decoration: none;
}

/******************* content *******************/
#content {
	padding-left: 9px;
/*	position: absolute;
	top: 133px;*/
	float: right;
	
	width: 596px; /* 585 + 11 (20-9) */
/*	margin-left: 165px; /* extra 5 for border on navigation div */
	
/*	margin-right: 30px; /* to match border of body tag  - didn't seem to work*/ 
	padding-bottom: 100px;
	background-image: url(../images/boundary_torn_paper_bottom.jpg);
	background-repeat: repeat-x;
	background-position: bottom right;
	background-color: white;
	/*margin-top: 1.2em;*/ /* leaves space for "you are here:..." - also need to add an equal margin-top to "content" as this is absolutely positioned */
}

#content h1 {
/*	background-color: #0071bd; */
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
/*	padding-left: 5px; */
	padding-top: 72px;
	background-image: url(../images/boundary_torn_paper_top.jpg);
	background-repeat: repeat-x;
	background-position: top right;
	border-bottom: 2px dashed #000;
/*	padding-top: 20px;
	background-image: url(../images/boundary_twirls2_top.gif);
	background-repeat: repeat-x;
	background-position: top right;*/
	margin-bottom: 20px;
	font-size: 300%;
	font-family:'Cooper Std Black','Cooper Black',Georgia,Times,'Times New Roman',serif;
}

body.about #content h1 {
	border-bottom: 2px dashed #ef008c;
	color: #ef008c;
}

body.info #content h1 {
	border-bottom: 2px dashed #f76521;
	color: #f76521;
}

body.news #content h1 {
	border-bottom: 2px dashed #4ab231;
	color: #4ab231;
}

body.rights #content h1 {
	border-bottom: 2px dashed #00a2ef;
	color: #00a2ef;
}

body.contact #content h1 {
	border-bottom: 2px dashed #102873;
	color: #102873;
}

body.help #content h1 {
	border-bottom: 2px dashed #18bab5;
	color: #18bab5;
}

#content p {
}

.playschemes {
		font-family:'Cooper Std Black','Cooper Black',Georgia,Times,'Times New Roman',serif;
		font-size:150%;
/**		font-style:oblique; **/
}

hr {
	margin-right:10px;
	margin-left:-2px;
}

#content h2 {
	clear: both; /* added so I can float some content right */
/*	color: #f39; */
	color: #f6c;
	margin: 0;
/*	padding: 100px 0 0 5px; */
	padding: 100px 0 0 0;
/*	background-color: #f6c; */
	background-image: url(../images/boundary_torn_paper2.jpg);
	background-repeat: repeat-x;
	background-position: top right;
	text-transform: capitalize;
}

#content h2.alt {
	color: #6c0;
	margin: 0;
	padding: 100px 0 0 5px;
	background-position: top left;
}

#content h1, #content h1.alt,
#content h2, #content h2.alt,
#content h3, #content h3.alt,
#content h4, #content h4.alt {
	margin-left: -9px;
	padding-left: 5px;
	clear: right; /* may need to move this - to clear images on info xone pages */
}

/* =================================================================================================== */
/* would prefer to replace this with a margin-right on content but it doesn't seem to work - try again */
#content p,
#content ul,
#content div,
#content form {
	margin-right: 9px;
}

#content div#primary,
#content div#primary p,
#content div#primary ul,
#content div#primary div,
#content div#secondary p,
#content div#secondary ul,
#content div#secondary div {
	margin-right: 0;
}

/* =================================================================================================== */

#content div#primary .wrapper {
	margin: 0;
	padding: 0;
	width: 400px;
	overflow: auto;
	background-image: url(../images/front_page/box1_and_2.gif);
	background-position: left bottom;
	margin-bottom: 7px;
	margin-top: 7px;
	clear: both;
}

#content div#primary .wrapper,
#content div#primary .wrapper2 {
	font-weight: bold;
}

#content div#primary .wrapper a,
#content div#primary .wrapper2 a {
	display: block;
	color: black;
	text-decoration: none;
}

#content div#primary .wrapper a img,
#content div#primary .wrapper2 a img {
	text-decoration: none;
}

#content div#primary .wrapper a:hover,
#content div#primary .wrapper2 a:hover {
	background-color: black;
	color: white;
}

#content div#primary .wrapper2 {
	margin: 0;
	padding: 0;
	width: 400px;
	overflow: auto;
	background-image: url(../images/front_page/box3_and_4.gif);
	background-position: left bottom;
	margin-bottom: 7px;
}

#content div#primary div#box1 span,
#content div#primary div#box2 span,
#content div#primary div#box3 span,
#content div#primary div#box4 span {
	font-weight: normal;
	display: block;
	margin-top: 0;
	padding-bottom: 7px;
}

#content div#primary div#box1 a:hover {
	background-color: #ec008c;
}

#content div#primary div#box2 a:hover {
	background-color: #00a1ef;
}

#content div#primary div#box3 a:hover {
	background-color: #f26521;
}

#content div#primary div#box4 a:hover {
	background-color: #4cb031;
}

#content div#primary #box1,
#content div#primary #box3 {
	display: inline; /*fixes IE double margin bug */
	width: 180px; /* 196 -8 -8*/
	float:left;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

#content div#primary #box2,
#content div#primary #box4 {
	display: inline; /*fixes IE double margin bug */
	width: 180px; /* 196 -8 -8*/
	float:right;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

#content div#primary #box1 {
	border-top: 1px solid #ec008c;
}

#content div#primary #box2 {
	border-top: 1px solid #00a1ef;
}

#content div#primary #box3 {
	border-top: 1px solid #f26521;
}

#content div#primary #box4 {
	border-top: 1px solid #4cb031;
}

#content div#primary .box5 {
	margin: 0;
	padding: 0;
}

#content div#primary .box5 a {
	text-decoration: none;
	position: relative;
	margin: 0;
	padding: 0;
	display: block;
}

#content div#primary .box5 span {
	position: absolute;
	top: 2px;
	margin: 0;
	padding: 0;
	line-height: 1.2em;
}

#content div#primary .box5 a span {
	background-color: yellow;
	color: black;
	font-size: 130%;
	font-weight: bold;
}

#content div#primary .box5 a:hover span {
	background-color: #FFC0CB;
}

/* =================================================================================================== */

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 5px;
}

/******************* FORMS *******************/
/********************* all *******************/
fieldset p {
 margin-right: 0 !important;
}

legend {
 background-color: white;
 border: 1px solid black;
 padding: 5px;
}

/******************* search ******************/

div#search {
	z-index: 50;
	position: absolute;
/*	top: 119px; */
	top: 133px;
	right: 0;
/*	border: 1px solid black;*/
	background: black;
	color: white;
	margin-top: 1.8em;
	font-weight: bold;
}

div#search form {
/*	border: 1px solid green;*/
	margin: 0;
	padding: 0;
}

div#search form p {
	margin: 0;
	padding: 0;
}

div#search form input {
	margin: 0;
	border: 0;
	color: black;
	background-color: white;
}

div#search form input {
	padding-right: 2px;
	padding-left: 2px;
}

/******************* contact *******************/
body.contact .form_1 {
}

body.contact .form_1 p {
}

body.contact .form_1 fieldset {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid black;
}

body.contact .form_1 legend {
	font-weight: bold;
}

body.contact .form_1 label {
	display: block;
}

body.contact .form_1 .radio label {
	display: inline;
}

body.contact .form_1 input {
	width: 300px;
}

body.contact .form_1 .radio input {
	width: auto;
}

body.contact .form_1 input.submit {
	width:auto;
	border-color: black;
}

body.contact .form_1 textarea {
	width: 300px;
	height: 100px;
}

body.contact .form_1 input,
body.contact .form_1 textarea {
	border: 1px solid black;
}

body.contact .form_1 input:focus,
body.contact .form_1 textarea:focus {
	background-color: #ebebeb;
}

/******************* IMAGES *******************/

/******************* teasers2 *******************/
#teasers2 {
	margin: 0;
  	padding: 0;
  	float: left;
	width: 400px;
}

#teasers2 div {
  	float: left;
	width: 400px;
	margin: 0;
	padding: 0px 0px 10px 0px;
  	display: inline; /* fixes IE/Win double margin bug */
	position:relative;
}

/* ========================================================================================================= */
/* need to undo the above for div.fade as this has other divs inside it and so these would get applied twice */
/* only do this if we have javascript  though (the javascript adds a class of javascript */
/*#teasers2 div#fader.javascript{*/
#teasers2 div.javascript {
	height: 196px;
	background: white; /* shows through during the fade */
}

/*#teasers2 div#fader.javascript div{*/
#teasers2 div.javascript div {
  	float: left;
	width: 400px;
  	margin: 0;
  	padding: 0;
  	display: inline; /* fixes IE/Win double margin bug */
	height: 196px;
	position: absolute;
}

/* ========================================================================================================= */
#teasers2 div a { 
	text-decoration: none;
}

#teasers2 div a span.hack1 { /* should these be H3s? Not necessary */
	width: 280px; /* scrunches the text up - can be removed */
  	margin: 0;
  	padding: 0;
  	font-size: 130%;
	font-weight: bold;
	position: absolute;
	bottom: 1px;
	left: 0px;
	letter-spacing: normal; /* fixes strange text overlapping bug in opera */
}

#teasers2 div a span.hack1 span {
	text-decoration: none;
	background-color: yellow;
	color: black;
	line-height: 1.2em;
	padding: 0;
	margin: 0;
}

#teasers2 div a:hover span.hack1 span {
	background-color: #FFC0CB;
}

#teasers2 div p {
	margin: 0;
  	padding: 0;
}

/******************* headline *******************/

img.headline {
	border: 1px solid;
	border-bottom-color: #666;
	border-left-color: #666;
	border-top-color: #999;
	border-right-color: #999;
	padding: 5px;
	margin: 5px;
/*	float: right; */
	background-color:#eae7ea;
}

img.align_right {
	float: right;
	margin: 0 0 10px 10px;
}

img.align_left {
	float: left;
	margin: 10px 10px 10px 0;
}

/******************* player *********************/
div#player {
	text-align: center;
}

/******************* error *********************/
.error {
	border: 2px solid red;
	padding: 5px;
}

/**************** these mean you've forgotten to change a template default setting **************/
#body_warning *, .body_warning *{
	background: red !important;
	color: #fff !important;
	text-decoration: none !important;
}

/*************** govmetric *********************/
.govmetric {
	font-size: 90%; 
	border-top: 1px solid gray; 
	border-bottom: 1px solid gray; 
	margin: 4px 0 !important;
}