body {
margin:0;
padding:0;
font-family:verdana, lucida, arial, sans-serif;
font-size:small;
background: #fff url(../images/background8.jpg) repeat-x top left;
text-align:center;
}

/*
You can use this instead of the current class to make the tab change colour when you're in each section but easier the other way.

body#home #home_tab a {
color:#cc6699;
background: url(../images/triangle_pink_small_trans.gif) no-repeat 0 50%;
font-weight:bold;
}*/



a {
color:#cc6699;

}

a:hover {
color:#666;
}

a:active{
background:#FFFF99;
}



/*Layout*/ 

#wrap {
text-align:left;
margin-left:3%;
margin-right:3%;
border: 1px solid #999999;
background:#fff;
font-size:90%;
margin-bottom:2em;
margin-top:2em;
}

#header {
margin:0;
padding:0;
/*float:left; only need this if have a background as have to float this left too otherwise no background colour appears*/
width:100%; /*have to give it a width otherwise stretches too far across the page. Don't add padding or margins as it makes it the wrong width too - add the padding to the elements within the header instead.*/
/*background:url(../../website4/images/pinkhead1.jpg) repeat-y top right;
*/
text-align:right;
min-height:140px;
background: #fff;
}

#header #banner {
margin:1em;
float:right;
background-color:#fff;
}

#header #logo{
margin:0;
float:left;
background-color:#fff;
}


#header #titles {
float:right;
padding:0 0 0 0;
text-align:right;
margin:0;
}

#header img {
padding: 0 1em;
}

#belowheader {
margin:0;
padding:0;
border-top: 4px solid #33CCCC;
}

#sidebar {
float:left;
width:20%;
/*background:#fff url(../images/logo2.gif) no-repeat top left;*/
margin:0;
padding:0;
/*border-right:1px solid #999999;*/
}

#mainbody {
clear:both;
float:right;
width:78%;
/*border-left:1px solid #999999;*/
margin:0;
padding:0;


}

#content {
float:left;
width:73%;
font-size: 95%;
line-height: 1.5em;
color: #000;
padding-left:0;
}

#subnav {
float:right;
width:25%;
}


#footer {
clear:both;
background:#666666;
border-top:#CCCCCC;
}

#footer p {
color:#fff;
font-size: 85%;
margin:0;
padding:1em;
text-align:right;
}



p.skip {
margin:0;
padding:0;
font-size:90%;
}

p.skip a {
float:left;
color:#ccffff;
text-align:left;
margin:0;
padding:0 5px;
display:none;
}

p.skip a:hover {
color:#333;
}

p.skip a:active {
color:#333;
}








/* Header */




#header h1 {
margin:0;
padding:0.5em 20px 0.2em 1em;
font-family:verdana, lucida, arial, sans-serif;
font-size:160%;
color:#66CCCC;
}

#header h2 {
color:#666;
font-size:110%;
font-weight:normal;
padding:0em 20px 0.5em 0;
margin:0;
}





#header ul {
display:inline;
float:left;
list-style:none;
margin:0px;
padding:0 20px 0 0;
text-align:right;
}

#header ul li{
float:left;
font-size:95%;
margin:0 0 0 0;
padding:1em 0px 0.5em 1em;
text-align:right;

}



#header ul li a{
color:#999;
text-decoration:none;
padding-left:10px;
font-weight:bold;
}

#header ul li.current a{
color: #cc6699;
text-decoration:none;
background:url(../images/triangle_pink_small_trans.gif) no-repeat 0% 50%;
}


#header ul li a:hover{
color:#666;
text-decoration:underline;
background:url(../images/triangle_pink_small_trans.gif) no-repeat 0% 50%;
}

#header ul li.current a:active{
color: #cc6699;
text-decoration:none;
background: #FFFF99 url(../images/triangle_pink_small_trans.gif) no-repeat 0% 50%;
}



/*message row */

/*#message {
margin:0;
padding:0;
font-size: 90%;
color:#fff;
text-align:right;
background:#009999;
border-bottom: 4px solid #33CCCC;
}

#message a{
padding:0.5em;
color:#fff;
text-decoration:none;}

#message a:hover{
color:#fff;
text-decoration:underline;
}

#message a:active{
color:#666666;
background-color:#FFF;
}
*/


/*gutters */


#content #gutter {
padding: 0;
margin:0;
}

#sidebar #gutter {
padding: 1em 0 0 0 ;
margin:0;

}

#subnav #gutter {
padding: 1em 2em;
margin:0;
}

#mainbody #gutter {
padding: 0.5em 0 0.5em 0;
margin:0;
}


/* content */

#content a {
font-weight:bold;
text-decoration: none;
}

#content a:hover {
text-decoration: underline;
}

#content h3 {

color:#cc6699;
margin:0 0 1em 0;
padding:1.6em 0 1.7em 0;
font-size:150%;
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
/*background:url(../images/buyat.gif) no-repeat center right;
*/}

#content h4 {
font-size:110%;
color:#009999;
padding:0.5em 0 0.5em 0;
margin:0;
}



#content p {
padding:0 0 0.5em 0;
margin:0;

}



#content p.trail {
margin: 0.5em 0 0.5em 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
color:#999;
}

#content p.trail a{
color:#999;
}

#content p.trail a:hover{
color:#666666;
}

#content div.blue {
border: #ccc 1px solid;
background:#EEF9F9;
padding:1em;
margin:1em 0 1em 0;
height:1%;
}


#content div.large {
border: #ccc 1px solid;
background:#EEF9F9;
padding:1em;
margin:1em 0 1em 0;
line-height:2em}




#content div.large h4 {
font-size:130%;
color:#000;
}

#content div.large p {
font-size:120%;
}




#content div.large ol {
font-size:120%;
}


#content div.largeintro {
border: #ccc 1px solid;
background:#EEF9F9;
padding:0.5em;
margin:1em 0 1em 0;
line-height:1.5em}


#content div.largeintro p {
font-size:100%;
}




#content span.yellow {
background-color:#FFFF66;
}


/*#content lists--------------------------------------------------------
*/

#content ul {
list-style:none;
margin:0.5em 0 0.5em 0;
}

#content ul li {
line-height:2em;
color:#666666;
}

#content ul li a {
text-decoration:none;
color:#cc6699;
padding: 0 0 0 15px;
margin:0;
background: url(../images/arr_pink1.gif) no-repeat 0 50%;
font-weight:bold;
}

#content ul li a:hover {
text-decoration:underline;
color:#666;
padding: 0 0 0 15px;
margin:0;
background: url(../images/arr_grey1.gif) no-repeat 0 50%;
}

#content ul li a:active {
text-decoration:underline;
color:#666;
padding: 0 0 0 15px;
margin:0;
background: #FFFF99 url(../images/arr1.gif) no-repeat 0 50%;
}


#content ul ul {
padding: 0 0 0 15px;
margin: 0;
}

#content ul ul a {
color:#cc6699;
font-weight:normal;
background:none;
text-decoration:none;
background: url(../images/arr_pink1.gif) no-repeat 0 50%;

}

#content ul ul a:hover{
color:#009999;
background: url(../images/arr1.gif) no-repeat 0 50%;
text-decoration:underline;
}

#content ul ul ul a {
color:#666666;
font-weight:normal;
background: none;
text-decoration:none;
background: url(../images/arr_grey1.gif) no-repeat 0 50%;

}

#content ul ul ul a:hover {
color:#009999;
background: url(../images/arr1.gif) no-repeat 0 50%;
text-decoration:underline;

}




#content p.intro {
font-size:100%;
}


#content p.intro a{
text-decoration:none;
color:#cc6699;
font-weight:bold;
}


#content p.intro a:hover{
color:#666;
text-decoration:underline;
}

#content img {
border:1px solid #ccc;
padding:3px;
margin:20px 0;
background-color:#fff;
}

#content img.left {
float:left;
margin-right: 10px;
margin-bottom: 10px;
}

#content img.right {
float:right;
margin-left: 10px;
margin-bottom: 10px;
}

#content img.logo {
border:none;
margin: 5px;
}




#content p.back {
margin: 0.5em 0 0.5em 0 ;
}

#content p.back a{
color:#999;
padding: 0 0 0 20px;
background:url(../images/back_arr_grey1.gif) no-repeat 0 50%;
}

#content  p.back a:hover {
color:#cc6699;
padding: 0 0 0 20px;
background:url(../images/back_arr_pink1.gif) no-repeat 0 50%;
}

#content  p.back a:active {
padding: 0 0 0 20px;
background: #ffff99 url(../images/back_arr_pink1.gif) no-repeat 0 50%;
}


#content p.clock {
background:url(../images/clock.jpg) no-repeat 0 0;
padding-left:40px;
color:#999;
font-weight:bold;
}

/*#content div.imagecaption {
float:left;
width:502px;
margin: 0 1em 1em 1em;
display:inline;
padding:10px;
background: #fff;
border-color: #ccc #999 #999 #ccc;
border-width:1px 2px 1px 2px;
border-style: solid;
text-align:left;
font-size:90%;
line-height:2em;
color:#666;
}

#content div.imagecaption a{
color: #009999;
font-size:140%;
}

#content div.imagecaption img {
border-color: #ccc #000 #000 #ccc;
border-width: 1px;
border-style:solid;
float:left;
margin-right:1em;
}*/

/* sidebars */

#sidebar #nav{
margin-top:30px;
padding-right:14px;
}


#sidebar .box {
margin: 10px 0 10px 15px;
padding: 0 0 0.5em 0em;
font-size: 95%;
background:#fff;
border:#CCCCCC 1px solid;
}


#sidebar .box h3 {
margin: 0;
padding: 0.25em 1em;
font-size: 100%;
color:#000;
border-bottom:#cccccc 1px solid;
background:#EEF9F9;
}



#sidebar .box p, .box ul {
margin: 0;
padding: 0 0 0 5px;
}

#sidebar .box ul li {
list-style: none;
}



#sidebar .box ul li a {
line-height:1.5em;
margin: 0 0 0 5px;
padding: 0 0 0 15px;
color:#333;
text-decoration:none;
/*background: url(../images/triangle_small_trans1.gif) no-repeat 0 50%;
*/
}


#sidebar .box ul li.current a{
color:#cc6699;
background: url(../images/triangle_pink_small_trans.gif) no-repeat 0 50%;
font-weight:bold;
}

#sidebar .box ul li a:hover {

color:#cc6699;
background: url(../images/triangle_pink_small_trans.gif) no-repeat 0 50%;
}

#sidebar .box ul li a:active {
text-decoration:underline; 
color:#cc6699;
background: #FFFF99 url(../images/triangle_pink_small_trans.gif) no-repeat 0 50%;
}


#sidebar .boxcontact{

margin-top:5em;
text-align:center;
}

#sidebar .boxcontact p {
padding: 1em;
color:#333333;
}

/*subnav - 3rd column*/



#subnav {
margin: 1.4em 0 0 0;
padding:0;
}


#subnav .box  {
margin: 1em 10px 1em 0;
padding: 0;
font-size: 95%;
color: #999;
background:#EEF9F9;
border: #CCCCCC 1px solid;
}



#subnav .box h5 {
margin: 0;
padding: 0;
font-size: 100%;
color:#009999;
text-align:left;

}



#subnav .box p, #subnav .box ul {
margin: 0;
padding: 0.25em;
font-size: 100%;
line-height:1.5em;
color:#666666;
}

#subnav .box ul li {
list-style: none;
}


#subnav .box ul li a, {
line-height:1.5em;
margin: 0 0 0 0;
padding: 0 0 0 0;
color:#cc6699;
text-decoration:none; 
background:none;
font-weight:bold;
}

#subnav .box ul li a:hover, {
text-decoration:underline; 
color:#cccccc;
}

#subnav .box a {
text-decoration:none;
color: #009999;
}

#subnav .box a:hover {
color: #cc6699;
text-decoration: underline;
}

#subnav img {
border:1px solid #ccc;
padding:3px;
margin:5px;
background-color:#fff;
}

#subnav img.left {
float:left;
margin-right: 10px;
margin-bottom: 10px;
}



/* increase font size box -----------------------------------------*/

#subnav .boxlargefont p{
margin: 10px 10px 1px 0;
padding: 0.2em;
background:#EEF9F9;
font-size:130%;
border: #CCCCCC 1px solid;
text-align:center;
}



#subnav .boxlargefont p a {
color:#333333;
font-weight:bold;
text-decoration:none;
}

#subnav .boxlargefont p a:hover {
color:#cc6699;
text-decoration:underline;
}

/* quote box -----------------------------------------*/

#subnav .boxquote  {
margin: 10px 10px 20px 0;
padding:30px 30px 5px 30px;
font-size: 105%;
color: #666;
background: #fff url(../images/quotesmall.gif) no-repeat top left;
border: #CCCCCC 1px solid;

 }

#subnav .boxquote h3 {
margin: 0;
padding: 0.2em;
font-size: 100%;
color:#999;
border-bottom:#009999 1px solid;
}



#subnav .boxquote p {
margin: 0;
padding: 10px 10px 40px 10px;
background: #fff url(../images/quoteleftsmall.gif) no-repeat bottom right;
font-style:italic;
}

#subnav .boxquote ul {
margin: 0;
padding: 0 0 0 5px;
background: #fff;
}

#subnav .boxquote ul li {
list-style: none;
font-style:italic;
}


#subnav .boxquote ul li a {
line-height:1.5em;
margin: 0 0 0 0;
padding: 0 0 0 0;
color:#666666;
text-decoration:none; 
background:none;
}

#subnav .boxquote ul li a:hover {
text-decoration:underline; 
color:#cc6699;
}

#subnav .boxquote ul li a:active {
color:#cc6699;
}


/* donate box ----------------------------- */

#subnav .boxdonate {

background:url(../images/background3.jpg) repeat-x top left;
border: #CCCCCC 1px solid;
padding: 0;
margin: 10px 10px 1px 0;
}

#subnav .boxdonate p {
text-transform:uppercase;
color:#009999;
font-weight:bold;
padding: 5px 20px ;
margin: 1em;
text-align:center;
}

#subnav .boxdonate p a {
font-size:150%;
color:#009999;
font-weight:bold;
text-decoration:none;
}

#subnav .boxdonate p a:hover {
color:#cc6699;
text-decoration:underline;
}


/*hacks */

/*hack to clear footer problem in IE/Win */

/* hide from IE5/Mac \*/
* html #footer {height:1%;}
/* end hide from IE5/Mac */



div.clear {
clear:both;
border: #ccc 1px solid;
background:#fff;
padding:1em;
margin:1em 0 1em 0;
}

h5 {
font-weight:bold;
font-size:100%;
margin:0.25em 0;
padding:0;
}