/*
font-size reference:
0.70em = 10px
0.75em = 11px
0.80em = 12px
0.85em = 13px
0.90em = 14px
0.95em = 15px
1.00em = 16px

*/



html { min-width: 600px; }

#pad {height:20px;}
/*----------------------- main menu -------------------------------------*/
#menu {padding:0; margin:0; list-style:none; width:700px; height:146px; float:left;}

#menu li {position:relative; float:left; margin:0 5px 0 0;}
#menu li.last {margin:0;}
#menu li a {display:block; height:146px; width:61px; line-height:20px; padding:0; float:left; color:#fff; text-decoration:none; font-family: "Franklin Gothic Heavy", sans-serif; font-weight:bolder; font-size:12px; text-align:center; cursor:pointer;}
#menu li a b {position:relative; top:28px; font-weight:normal;}

#menu li#about a {background:url(nav/red-off.png);}
#menu li#staff a {background:url(nav/purple-off.png);}
#menu li#volunteer a {background:url(nav/green-off.png);}
#menu li#events a {background:url(nav/orange-off.png);}
#menu li#partner a {background:url(nav/lilac-off.png);}
#menu li#services a {background:url(nav/bluish-off.png);}
#menu li#youth a {background:url(nav/brown-off.png);}
#menu li#future a {background:url(nav/teal-off.png);}
#menu li#contact a {background:url(nav/blue-off.png);}

#menu li#about a:hover {background:url(nav/red-on.png);}
#menu li#staff a:hover {background:url(nav/purple-on.png);}
#menu li#volunteer a:hover {background:url(nav/green-on.png);}
#menu li#events a:hover {background:url(nav/orange-on.png);}
#menu li#partner a:hover {background:url(nav/lilac-on.png);}
#menu li#services a:hover {background:url(nav/bluish-on.png);}
#menu li#youth a:hover {background:url(nav/brown-on.png);}
#menu li#future a:hover {background:url(nav/teal-on.png);}
#menu li#contact a:hover {background:url(nav/blue-on.png);}

.first #menu li#about a {background:url(nav/red-on.png);}
.staff #menu li#staff a {background:url(nav/purple-on.png);}
.volunteer #menu li#volunteer a {background:url(nav/green-on.png);}
.events #menu li#events a {background:url(nav/orange-on.png);}
.partner #menu li#partner a {background:url(nav/lilac-on.png);}
.services #menu li#services a {background:url(nav/bluish-on.png);}
.youth #menu li#youth a {background:url(nav/brown-on.png);}
.future #menu li#future a {background:url(nav/teal-on.png);}
.last #menu li#contact a {background:url(nav/blue-on.png);}

/* this is for IE6 png transparency fix - note the image path is from the .html file not the .css file */
* html #menu li#about a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/red-off.png', sizingMethod='scale');}
* html #menu li#staff a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/purple-off.png', sizingMethod='scale');}
* html #menu li#volunteer a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/yellow-off.png', sizingMethod='scale');}
* html #menu li#events a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/green-off.png', sizingMethod='scale');}
* html #menu li#partner a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/blue-off.png', sizingMethod='scale');}
* html #menu li#services a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/indigo-off.png', sizingMethod='scale');}
* html #menu li#youth a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/blue-off.png', sizingMethod='scale');}
* html #menu li#future a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/indigo-off.png', sizingMethod='scale');}
* html #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/violet-off.png', sizingMethod='scale');}

* html #menu li#about a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/red-on.png', sizingMethod='scale');}
* html #menu li#staff a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/orange-on.png', sizingMethod='scale');}
* html #menu li#volunteer a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/yellow-on.png', sizingMethod='scale');}
* html #menu li#events a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/green-on.png', sizingMethod='scale');}
* html #menu li#partner a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/blue-on.png', sizingMethod='scale');}
* html #menu li#services a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/indigo-on.png', sizingMethod='scale');}
* html #menu li#youth a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/blue-on.png', sizingMethod='scale');}
* html #menu li#future a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/indigo-on.png', sizingMethod='scale');}
* html #menu li#contact a:hover {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/violet-on.png', sizingMethod='scale');}

* html .about #menu li#about a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/red-on.png', sizingMethod='scale');}
* html .staff #menu li#staff a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/orange-on.png', sizingMethod='scale');}
* html .volunteer #menu li#volunteer a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/yellow-on.png', sizingMethod='scale');}
* html .events #menu li#events a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/green-on.png', sizingMethod='scale');}
* html .partner #menu li#partner a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/blue-on.png', sizingMethod='scale');}
* html .services #menu li#services a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/indigo-on.png', sizingMethod='scale');}
* html .youth #menu li#youth a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/blue-on.png', sizingMethod='scale');}
* html .future #menu li#future a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/indigo-on.png', sizingMethod='scale');}
* html .last #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='staff_eleven/violet-on.png', sizingMethod='scale');}

/* -------main body ----*/
#main {
		border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-top: 1px solid #666;
	clear: both;
	padding-top: 3em;
	padding:0px;
	min-height:600px;
	background: #FFFFFF;
	
}



#header {
height: 137px;
width: 700px;
background: #FFFFFF url(../images/FSN.png) center left no-repeat;
padding: 10px 0px 30px 10px;
float:left;
clear: both;	
}

#content
{
  padding: 0px 20px 40px 20px;
   
    }
    
    
#footer{
height: 50px;
width: 743px;
background: #FFFFFF;
text-align: center;
font-size: 10px;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
	border-right: 1px solid #666;
}

#partnerLogo
{ 
   background-image:url('../images/partnerLogos.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}

body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers  */ 
     font-size: 0.95em;
    font-weight: normal;
    color: #07275c; 
    font-family: Arial, Helvetica, sans-serif;
	voice-family: "\"}\"";
	voice-family: inherit;
	
	
}  
.clearhack { display: inline; } /*Clears Box Model Hack in IE5*/

body {
	background: #EDEBE3;
	color: #333;
	padding: 1em 20px 3em 20px;
	margin: 0;
	width:745px;
}

a { color: #06C; }
a:hover { color: #333; }
a:active { color: #000; }

p { line-height: 140%;
     }

h1,h2 {
	font-family: trebuchet ms;
	font-weight: bold;
	color: #990033;
}

h1 {
	font-size: 180%;
	margin: 0;
}

h1 a { text-decoration: none; color: #333; }
h1 a:hover { border-bottom: 1px dotted #666; color: #000; }

h2 {
	font-size: 140%;
	padding-bottom: 2px;
	border-bottom: 1px solid #CCC;
	margin: 0;
	
}
ol
{
   
    font-size: 85%;
    }

    
    
p.note {
	background: #EEE;
	padding: 4px;
	font-family: tahoma;
	font-size: 85%;
	line-height: 130%;
	margin-top: 0;
}



/*----------------------  boxes  ----------------------------*/

.aboutBox
{ background-color: #cc0000; 
   background-image:url('../images/aboutUs.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
   	.staffBox
{ background-color: #330099; 
   background-image:url('../images/staffStructure.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
   	.volBox
{ background-color: #339900; 
   background-image:url('../images/volunteering.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
     margin:0px;
    padding:0px;
	}
	.campBox
{ background-color: #ff6600; 
   background-image:url('../images/campaigns.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
.partBox
{ background-color: #990066; 
   background-image:url('../images/partnerships.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
   	
   	.servicesBox
{ background-color: #003333; 
   background-image:url('../images/services.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
.youthBox
{ background-color: #996633; 
   background-image:url('../images/youth.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
   	.futureBox
{ background-color: #99c699; 
   background-image:url('../images/futureStrategy.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
   	.contactBox
{ background-color: #0000ff; 
   background-image:url('../images/contactUs.jpg');
   background-repeat:no-repeat;
    width:100%;
    height:92px;
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px;
   	}
   	
/* ---------text boxes ------------*/
#aboutText
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #cc0000; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
   	#aboutTextS
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.00em;
    font-weight: normal;
    color: #cc0000; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
    #volText
{
    float:Left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #339900; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
     #volTextR
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #339900; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }	

#partText
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #990066; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
   	#partTextS
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 0px 0px 0px;
    background-color: Transparent;
    font-size: 1.00em;
    font-weight: normal;
    color: #990066; 
    font-family: Arial, Helvetica, sans-serif;
    width:200px;
    
    }
    
   #servicesText
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #003333; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
   	#servicesTextS
{
    float:right;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 10px 20px;
    background-color: Transparent;
    font-size: 1.00em;
    font-weight: normal;
    color: #003333; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
    
    #futureText
{
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #99c699; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
   	#futureTextS
{
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.00em;
    font-weight: normal;
    color: #99c699; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }
    
        #youthText
{
    float:left;
    top: auto;
    clear: both;
    margin:0px;
    padding:0px 10px 0px 20px;
    background-color: Transparent;
    font-size: 1.50em;
    font-weight: bold;
    color: #996633; 
    font-family: Arial, Helvetica, sans-serif;
    width:250px;
    
    }

/* ---------tabs code ------------*/

a{
color: #000099;
text-decoration: underline;
}
a:hover{
color: #FF0000;
}
p{
margin: 0;
padding: 0px;
text-align: justify;
}
#wrapper
{
  
width: 100%;
}
#whitePad
{
min-height: 300px;
    }

.box{
background: transparent;
}
.boxholder{
clear: both;
padding: 0px;

}
.tab{
float: left;
height: 40px;
width: 170px;
margin: 0 1px 0 0;
text-align: center;
/*background: #8DC70A url(images/greentab.jpg) no-repeat;*/
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: normal;
padding: 9px 0 0 0;
}