/* Horizontal Nav with Graphic main nav. CSS
-------------------------------------------------------- */


div#nav {
   clear: both;
   background: #fff url(../images/nav/nav-bg.gif) top left repeat-x;
   width: 790px;
   height: 70px; 
   margin: 0;
   padding: 0;
   }

div#nav ul#menu {
   margin: 0px;
   height: 45px;
   padding: 0 10px;
   text-align: left;
   }

   div#nav ul#menu li { 
      float: left;
      list-style: none;
      }

      div#nav ul#menu li, 
      ul#menu a { 
         height: 45px; 
         display: block;
         margin: 0;
         padding: 0;
         outline: none; 
         }

      div#nav ul#menu li a { 
         text-indent: -9999px; 
         margin: 0;
         padding: 0;
         text-decoration: none;
         }

      div#nav ul#menu li, 
      ul#menu a {
         height: 45px; 
         margin: 0;
         padding: 0;
         display: block;
         }



#aboutmenu {
   width: 120px;
	background: url(../images/nav/about.gif) top left no-repeat; 
   }

   #aboutmenu a:hover { 
      background: url(../images/nav/about.gif) center left no-repeat; 
      }

         body.about #aboutmenu a {
         background: url(../images/nav/about.gif) bottom left no-repeat; 
         }

#programsmenu {
   width: 129px;
	background: url(../images/nav/programs.gif) top left no-repeat; 
   }

   #programsmenu a:hover { 
      background: url(../images/nav/programs.gif) center left no-repeat; 
      }

         body.programs #programsmenu a {
         background: url(../images/nav/programs.gif) bottom left no-repeat; 
         }
         
         
#getinvolvedmenu {
   width: 135px;
	background: url(../images/nav/getinvolved.gif) top left no-repeat; 
   }

   #getinvolvedmenu a:hover { 
      background: url(../images/nav/getinvolved.gif) center left no-repeat; 
      }

         body.getinvolved #getinvolvedmenu a {
         background: url(../images/nav/getinvolved.gif) bottom left no-repeat; 
         }
         
#eventsmenu {
   width: 111px;
	background: url(../images/nav/events.gif) top left no-repeat; 
   }

   #eventsmenu a:hover { 
      background: url(../images/nav/events.gif) center left no-repeat; 
      }

         body.events #eventsmenu a {
         background: url(../images/nav/events.gif) bottom left no-repeat; 
         }
         
#ourstoriesmenu {
   width: 144px;
	background: url(../images/nav/stories.gif) top left no-repeat; 
   }

   #ourstoriesmenu a:hover { 
      background: url(../images/nav/stories.gif) center left no-repeat; 
      }

         body.ourstories #ourstoriesmenu a {
         background: url(../images/nav/stories.gif) bottom left no-repeat; 
         }
         
         
#donatemenu {
   width: 131px;
	background: url(../images/nav/donate.gif) top left no-repeat; 
   }

   #donatemenu a:hover { 
      background: url(../images/nav/donate.gif) center left no-repeat; 
      }

         body.donate #donatemenu a {
         background: url(../images/nav/donate.gif) bottom left no-repeat; 
         }
         
/* Subnavigation
-------------------------------------------------------- */


#subnav {
   width: 170px;
   margin: 0 0 20px 0; padding: 0;
   }

#subnav ul{
   line-height: normal;
   margin: 0; padding: 0;
   }

   #subnav ul li {
      display: block;
      list-style: none;
      margin: 0; padding: 0;
      text-align: right;
   }
   
      #subnav ul li a {
         background-color: #fff;
         font: normal 1.3em/1em georgia, serif; color: #cc6633;
         text-decoration: none;
         border-bottom: 1px solid #efefef;
         display: block;
         padding: 8px 0;
         display: block;
         margin: 0;
         outline:none;
         width: 170px;
         }
      
      #subnav ul li a:hover {
         text-decoration: none;
         background-color: #fff;
         outline: none;
         color: #cc6633;
         border-bottom: 1px solid #ccc;
         }
         
         #subnav ul li a:visited:hover {
            text-decoration: none;
            }
            
   #subnav ul#sub-about,
   #subnav ul#sub-programs,
   #subnav ul#sub-getinvolved,
   #subnav ul#sub-ourstories,
   #subnav ul#sub-events
      {
      display: none;
      }
      
   
   body.about  #subnav ul#sub-about,
   body.programs #subnav ul#sub-programs,
   body.getinvolved #subnav ul#sub-getinvolved,
   body.ourstories #subnav ul#sub-ourstories,
   body.events #subnav ul#sub-events {
      display: block;
      }         

   a#volunteermenu,
   a#historymenu,
   a#boardmenu,
   a#alumnimenu,
   a#staffmenu,
   a#newsmenu,
   a#susdmenu,
   a#sunnyside-foundation-annual-reportmenu,
   a#mini-grant-applicationmenu,
   a#policymenu,
   a#minigrantsmenu,
   a#technologymenu,
   a#literacymenu,
   a#fundingmenu,
   a#scholarshipsmenu,
   a#volunteermenu,
   a#mentorsmenu,
   a#susdf-art-contestmenu,
   a#teacher-thank-you-lettersmenu
      {
      display: block;
      color: #cc6633;
      background-color: #fff;
      text-decoration: none;
      }
     
   body.history a#historymenu,
   body.board a#boardmenu,
   body.alumni a#alumnimenu,
   body.staff a#staffmenu,
   body.news a#newsmenu,
   body.susd a#susdmenu,
   body.sunnyside-foundation-annual-report a#sunnyside-foundation-annual-reportmenu,
   body.mini-grant-application a#mini-grant-applicationmenu,
   body.policies a#policiesmenu,
   body.funding a#fundingmenu,
   body.minigrants #subnav ul#sub-programs a#minigrantsmenu,
   body.technology #subnav ul#sub-programs a#technologymenu,
   body.literacy #subnav ul#sub-programs a#literacymenu,
   body.scholarships #subnav ul#sub-programs a#scholarshipsmenu,
   body.volunteers #subnav ul#sub-getinvolved a#volunteersmenu,
   body.mentors #subnav ul#sub-getinvolved a#mentorsmenu 
   body.susdf-art-contest #subnav ul#sub-events a#susdf-art-contestmenu,
   body.teacher-thank-you-letters #subnav ul#sub-events a#teacher-thank-you-lettersmenu{
         text-decoration: none;
         background: #fff url(../images/nav/subnav-bg.gif) bottom left repeat-x;
         outline: none;
         color: #cc6633;
         border-bottom: 1px solid #ccc;
         }