/*
/ --------------------------------------
/	ppwh.org.uk
/   Frame Digital
/ --------------------------------------
/
/	-	MAIN NAVIGATION FOR SITE
/   -   SUB NAVIGATION FOR PAGES   
*/


/*----------------------------*/
/*   MAIN NAVIGATION FOR SITE
/*----------------------------*/
#content #masthead div.navigation
{ 
    position: relative;
    list-style: none; 
    float :left; 
    width: 950px; 
    margin: 0px; 
    top: 87px;
    z-index: 1000; 
    background: #fff;         
}

#content #masthead div.navigation ul { margin:0; }
#content #masthead div.navigation ul li { float:left; position: relative; padding: 0px; background-image: none; margin:0; }
#content #masthead div.navigation ul li a { background-image: url(/themes/default/images/nav/main.gif); background-repeat: no-repeat; height: 39px; display: block; text-indent: -2000px; }

li a.home { background-position: 0px 0px; width: 123px;  }
li a.about-the-hospice { background-position: -123px 0px; width: 176px; }
li a.join-the-team { background-position: -299px 0px; width: 152px; }
li a.fundraising { background-position: -451px 0px; width: 176px; }
li a.healthcare { background-position: -627px 0px; width: 220px; }
li a.donate { background-position: -853px 0px; width: 103px; }

li a.selected-home,
li a:hover.home { background-position: 0px -39px; }

li a.selected-about-the-hospice,
li a:hover.about-the-hospice { background-position: -123px -39px; width: 176px; }

li a.selected-join-the-team,
li a:hover.join-the-team { background-position: -299px -39px; width: 152px; }

li a.selected-fundraising,
li a:hover.fundraising { background-position: -451px -39px; width: 176px; }

li a.selected-healthcare,
li a:hover.healthcare { background-position: -627px -39px; width: 220px; }

li a.selected-donate,
li a:hover.donate { background-position: -853px -39px; width: 103px; }

/*----------------------------
*
*   SUB NAVIGATION FOR PAGES e.g. /about-the-hospice/contact-us.html
*   If you add a new section that has different colours, you MUST
*   create a colour-name.css file and relate it to the relevant template
*   This will keep css nice clean and simple (instead of #left ul.whereweare li.green, which is messy IMHO)
*
----------------------------*/

#left div.navigation ul { border-bottom:  solid 1px #dcdcdc; margin-top: 41px; width: 220px; margin:0; }
#left div.navigation ul li 
{ 
    min-height: 34px;
    height: auto !important;
    height: 34px;
    
    padding: 0px; 
    background-position: top left;
    margin:0;
    width: 220px;  
    margin: 0px; padding: 0px;  
}

#left div.navigation ul li a 
{ 
    border-top: solid 1px #dcdcdc; 
    font-size: 0.95em;     
    text-decoration: none; 
    display: block;     
    width: 197px; 
    padding-left: 23px;
    padding-top:8px;
    padding-bottom: 6px;
    min-height: 19px;
    height: auto !important;
    height: 19px;
    
    background-repeat: no-repeat;   
    background-position: 10px 15px; 
         
	font-family: Arial, sans-serif;
	
	color: #333333;
}

#left div.navigation ul li a:hover,
#left div.navigation ul li a.selected  {  background-repeat: no-repeat; font-weight: bold; }
#left div.navigation li .sub-navigation ul { border: 0px; }
#left div.navigation li .sub-navigation ul li a
{
    margin-left: 13px;
    width: 184px;
    min-height: 17px;
    height: auto !important;
    height: 17px;
    padding-bottom: 6px;
}