/* ---------------------------------------------------- */
/*  notes                                               */
/*  main css for whitetreefund website                  */
/* ---------------------------------------------------- */
/*                                                      */
/* #e6dbe6 very light                                   */
/* #ccb8cc light purple - main background               */
/* #996699 dark purple h4 etc                           */
/* #663366 darker purple                                */
/*                                                      */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/*  body                                                */
/* ---------------------------------------------------- */
body {
	background-color:#ccc;
	text-align:center;
	font-family: verdana, arial, sans-serif;
	font-size: 100%;
	color: #000;
	behaviour:url(../css/csshover.htc);
}


/* ---------------------------------------------------- */
/*  global settings                                     */
/* ---------------------------------------------------- */
* {margin:0; padding:0; border:0}

a:link {color: #000;text-decoration:underline;}
a:visited {color: #996699;text-decoration:underline;}
a:hover {color:red;text-decoration:none;}
a:active {color: #000;text-decoration:underline;}


/* Change cursor for links that open in new window */

/*
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"],   :visited[target="_new"] {
   cursor:  crosshair;
} 
:link[rel="external"] {
   cursor:  crosshair;
} 
*/








/* headings */
h4, h2 {
	font-size:1.2em; 
	color:#fff;
}
h5, h3{
	font-size:1em; 
	color:#000;
	margin-top:0.5em; 
}
h6{
	font-size:1em; 
	color:#666;
	margin-top:0.3em; 
}


p {
	margin:0 1px 0.75em 0; 
}	



/* ---------------------------------------------------- */
/* forms                                                */
/* ---------------------------------------------------- */

form {
	margin:0 0 0.75em 0;
}

form select {
	background-color: #e6dbe6;
	font-size:0.8em;
	margin:0 5px 0 0;
}





/* ---------------------------------------------------- */
/* NON-FLOAT DIVS                                       */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/*  wrap_all (everything including header and footer)   */
/*  forces whole content to centre of browser window    */
/* ---------------------------------------------------- */
div#wrap_all {
	width:800px; 
	margin-top:0px;
	text-align:left;
	margin-left:auto;   /* auto centre */
	margin-right:auto;  /* auto centre */
} 

/* ---------------------------------------------------- */
/*  header                                              */
/* ---------------------------------------------------- */
div#header {
	width:800px; 
	height:45px; 
/* background image (tree) set in additional css        */
/* so we can have different versions of ted's painting  */
}

/* following resolves issue with ie6 where img does not fill div */
/* ...leaving what looks like a small "gap" between the header and rest of page */
div#header img {
	display:block;
}


/* ---------------------------------------------------- */
/* footer                                               */
/* ---------------------------------------------------- */
div#footer {
	width:800px;
	padding: 20px 0 5px 0;
	background-image:url(../images/layout/wrap_cols_1_background.gif);
	background-repeat: repeat-y;
}



/* ---------------------------------------------------- */
/* FLOATED DIVS                                         */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/*  wrap_cols_1 (everything between header and footer)  */
/*  wrap_cols_2 (everything between header and footer)  */
/* ---------------------------------------------------- */

/* outer one - use for left hand column fill */
div#wrap_cols_1 {
	float:left; 
	width:800px; 
	margin-top: 0px;    /* gap between header and rest of page */
	background-image:url(../images/layout/wrap_cols_1_background.gif);
	background-repeat: repeat-y;
}

/* inner one - use for right hand column fill */
div#wrap_cols_2 {
	float:left; 
	width:800px;
/* background image (tree) set in additional css        */
/* so we can have different versions of ted's painting  */
}


/* ---------------------------------------------------- */
/* column_1 (use on left hand side for nav links ul)    */
/* ---------------------------------------------------- */
div#column_1 {
	float:left; 
	width:150px; 
	overflow:hidden;
	background-image:url(../images/layout/column_1_background_default.gif);
	background-repeat: no-repeat;
}


/* ---------------------------------------------------- */
/* content (use for main content)                       */
/* ---------------------------------------------------- */
div#content {
	float:left; 
	width:363px;     
} 

/* ---------------------------------------------------- */
/* column_2 (use for right hand content)                */
/* ---------------------------------------------------- */
div#column_2 {
	position:relative;  /* so we can position divs relative to column_2 */
	float:left; 
	width:287px;
}





/* ---------------------------------------------------- */
/* inner divs                                           */
/* use with margin instead of padding main divs         */
/* ---------------------------------------------------- */

div#content_inner {
	margin: 0 10px 20px 10px;
}
div#column_2_inner_upper {
	height: 392px;
	margin: 0 10px 0px 10px;
}
div#column_2_inner_lower {
	margin: 0;
}



/* ---------------------------------------------------- */
/* clears (use to force footer below other divs)        */
/* ---------------------------------------------------- */
.clearleft  {clear:left;}
.clearright {clear:right;}
.clearboth  {clear:both;}
.clearthis  {clear:both;}




/* ---------------------------------------------------- */
/* background colour for main content                   */
/* ---------------------------------------------------- */
div#header, div#content, div#wrap_cols_1, div#footer {
	background-color:#ccb8cc;
} 


/* ---------------------------------------------------- */
/* CONTENT DIV STYLES                                   */
/* ---------------------------------------------------- */

/* default font size / colour for content div */
div#content {
	font-size:.8em; 
}	


/* banner text below header */
div#banner {
	font-size:1em; 
	line-height: 0.75em;
	color:#fff;
}
div#banner a {
	font-size:0.8em; 
	color:#663366;
}



/* ---------------------------------------------------- */
/* LIST DIV STYLES                                      */
/* ---------------------------------------------------- */
div.list {
	position:relative;
	margin:0 0 1em 0; 
}

div.list ul, ul {
	padding: 0 0 0 1.25em;    /* inside - to set bullet position */
}

div.list ol {
	padding: 0 0 0 1.5em;  /* inside - to set number position */
}

div.list li {
	margin: 0;
	padding: 0;
}

div.list ul li, ul li {
	list-style-type:disc;
	list-style-position:outside;
}
div.list ol li {
	list-style-type:decimal;
}






























/* ---------------------------------------------------- */
/* COLUMN_1 DIV STYLES                                  */
/* ---------------------------------------------------- */

/* column_1 panel */
div#column_1 {
	padding-top:30px;
}

div#column_1 p {
	font-size:.8em; 
	padding:0 10px;
	color:#ccb8cc;
}
div#column_1 h4 {
	font-size:0.8em; 
	padding:0 10px;
	color:#fff;
}

div#column_1 ul {
	border:0; 
	margin:12px 1.25em 20px 1em; 
	padding:0; 
	list-style-type:none;
	font-size:12px;
}
div#column_1 li {
	border-bottom:2px dotted #666; 
	margin:0; 
	padding: .3em 0px .3em 25px; 
	text-indent:0.5em;
	background:url(../images/layout/leaf_hover_off.gif) no-repeat center left; 
}

div#column_1 li:first-child {border-top:2px dotted #666;}

div#column_1 li a {
	display:block;
	text-decoration:none; 
	color:#fff;
	text-indent:0px;
}

div#column_1 li:hover {
	background:url(../images/layout/leaf_hover_on.gif) no-repeat center left; 
}

div#column_1 a:hover {
	color: #ccb8cc;
}

/* a hack for IE Win only \*/	
* html div#column_1 ul {border-top:2px dotted #666;}  
/*end of hack */



/* ---------------------------------------------------- */
/* COLUMN_2 DIV STYLES                                  */
/* ---------------------------------------------------- */
/* right column styles */
/* nb "position:absolute" will be relative to column_2 div */


/* default font size / colour for column_2 div */
div#column_2 {
	font-size:.7em; 
}	


div#column_2 h4 {
	color:#996699; 
}



/* boxed class */
div.boxed {
	margin-bottom:1em;
}

div.boxed h4, div.boxed p {
	margin:0px;
	border-left:1px solid #996699;
	padding-left:2px;
}
div.boxed h4 {
	border-left:1em solid #996699;
}






/* ---------------------------------------------------- */
/* FOOTER DIV STYLES                                    */
/* ---------------------------------------------------- */
div#footer {
	font-size:.6em;         
	text-align:left;       
	color:#996699;
}

div#footer img {
	margin: 0 15px 30px 160px;
}

div#footer p {
	margin: 15px;
}




div#footer ul {margin:2px 0;}    /* vertical spacing between the lists */
div#footer li {
	display:inline;          /* the key CSS - makes the lists display horizontally */
	color:white;             /* sets the color of the vertical lines */
	border-left:1px solid;   /* creates the vertical line to the left of each list items */
	color:#999;              /* sets the color of the vertical lines  - links colored below */
	padding:0 5px 0 9px;     /* horiz space between links and vert lines - needed diff l & r values to center */
}


/* removes the left border of the first list item - IDWIMIE */
div#footer li:first-child {border-left:0;}


/* footer link colours */
div#footer ul li a {
	text-decoration:none; 
	color:#999; 
}
div#footer ul li a:hover {
	text-decoration:underline; 
	color:#c00
} 

/* footer fineprint colours */
div#footer ul.fineprint li         {color:#999;} /* text */
div#footer ul.fineprint li a       {color:#999;} /* link */
div#footer ul.fineprint li a:hover {color:#c00;} /* hovered link */

.align_right {
	text-align: right;
}
.align_left {
	text-align: left;
}





/* html validation */
div#validation {
	float:left;
	width:100%; 
	padding: 40px 0 50px 0;
	color: #999;
}
div#validation img {
	float:left;
	height:31px;
	width:88px;
	margin: 0 10px 0 0;
}
div#validation p {
	font-size: 0.6em;
}
div#validation a {
	color: #999;
	text-decoration: none;
}
div#validation a:hover {
	color: #c00;
	text-decoration: underline;
}



/* where am i? */
body.index             li#index,
body.support           li#support,
body.relief_agencies   li#relief_agencies,
body.silver_leaves     li#silver_leaves,
body.sl_submissions    li#silver_leaves,
body.sl_advertising    li#silver_leaves,
body.sl_prices         li#silver_leaves,
body.sl_issue_1        li#silver_leaves,
body.sl_issue_2        li#silver_leaves,
body.sl_issue_3        li#silver_leaves,
body.sl_issue_4        li#silver_leaves,
body.sl_issue_5        li#silver_leaves,
body.sl_issue_6        li#silver_leaves,
body.sl_orders         li#order,
body.bookshop          li#bookshop,
body.about             li#about,
body.contact           li#contact,
body.blog              li#blog,
body.friends           li#friends {
	background:url(../images/layout/leaf_hover_on.gif) no-repeat center left; 
}

body.index             li#index a,
body.support           li#support a,
body.relief_agencies   li#relief_agencies a,
body.silver_leaves     li#silver_leaves a,
body.bookshop          li#bookshop a,
body.about             li#about a,
body.contact           li#contact a,
body.blog              li#blog a,
body.friends           li#friends a {
	color: #ccb8cc;
}




/* ---------------------------------------------------- */
/* UNUSED BELOW HERE                                    */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/* mainimage                                            */
/* ---------------------------------------------------- */
div#content div#mainimage {
	width:200px; 
	float:right; 
	margin:0.25em 0px 4px 8px;
}
div#content div#mainimage img {
	border: 0px solid #ccc;
}
div#content div#mainimage p {
	font-size:.65em;         
	margin:0 0px 10px 0; 
	color:#668080;
	text-align:left;
} 


/* ---------------------------------------------------- */
/* smallimage                                            */
/* ---------------------------------------------------- */
div#content div#smallimage {
	width:150px; 
	float:left; 
	margin:0.25em 0px 4px 0px;
}
div#content div#smallimage img {
	border: 0px solid #666;
	margin:0 0 5px 0px; 

}
div#content div#smallimage p {
	font-size:.65em;         /* caption below img */
	margin:0 0px 10px 0; 
	color:#668080;
	text-align:left;
} 
div#content h1{
/*	font-family:verdana, sans-serif; */
	color:#fff;
	font-size:1em; 
	line-height:1em; 
/*	font-variant:small-caps; */
	margin-top:0.5em; 
	margin-bottom:0.3em; 
	text-align:left;
}

div#content .note {
	border-top: 1px solid #9c0;
	border-left: 10px double #9c0;
	padding-left:8px;
	color:navy;
}

div#content .note h1 {
	margin:0;
	color: #333;
	font-size:.8em;
	font-weight:bold;
}


div#content blockquote {
	width: 120px; 
	float:right; 
	font-size:.8em; 
	border-top:    3px solid #699; 
	margin:  20px 0px 0px 5px; 
	padding:  6px 0px 6px 0px;
}
div#content blockquote p {
	margin:0; 
	font-style:normal;
}
div#content blockquote h1 {
	margin:0;
	font-size:0.8em;
	text-align:right;
	color: #668080;
}