@charset "utf-8";

/* -------------------------------------- =imports */
@import url("reset.css");

body {
	background: #84d3db url(../images/bg_color.png) repeat-x top left;
	font-size: 11px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	margin: 0 auto;
	text-align: center;
}
p {	color: #333333;	line-height: 18px; font-size: 13px;}

h1 {color:#000; font-size:18px; font-weight:bold; text-transform: uppercase;}

h2 {color:#005F23;/* dark-green */ font-size:13px; font-weight:700; letter-spacing:1px; text-transform: uppercase; padding:0; margin:0;}
h2 a { color:#606060; text-decoration: none; }


h3  {color:#606060;	font-size:11px;	font-weight:bold; text-transform: uppercase;}
h3 a { color:#606060; text-decoration: none; }


a img {	border: none;}

blockquote p	{
	font-style:italic;
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: 0.05em;
	color:#B06D13; /* rusty-orange */
}

.bgGraphics {background: url(../images/bg_image.png) no-repeat top center; height:100%;}

.newline	{display:block;}

.floatBox	{float:left;}

/*---------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------- my changes start here. moved the repeating background here ----------------------------------------------- */
#mainNavigation  {	margin: 0 auto; padding: 50px 0 0 0; width: 900px; height:40px;background: url(../images/navbar_bg.png) repeat-x bottom left;}

#TopNav {
	list-style:none;
	margin: 0;
	padding: 0;
	float: left;
	width:100%; /*changed from pixel to percent */
	background: url(../images/right_nav_corner.png) no-repeat top right; /*right graphic */
}

#TopNav li {
	margin:0;
	padding:0;
	float: left;
	color:#6b6b6b;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	height: 40px;
}

/* -- not required, class name deleted from html --*/
/*#TopNav li.lastNav {margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;padding-right:19px;border-right:none;background:url(../images/right_nav_corner.png) no-repeat right;}*/

#TopNav li.leftNavCorner {
	background: url(../images/left_nav_corner.png) no-repeat top left;
	padding-left:11px;
}

/* --- i don't think you need this class ---*/
/* #TopNav li.longText a { margin-top:0;padding: 1px 11px 10px 11px;} */

/*--- don't think you need the extra padding styles ---*/
/* #TopNav li.leftNavCorner a {padding: 9px 7px 10px 7px;}*/

#TopNav a {
    text-transform:capitalize;
	text-decoration:none;
	text-align: center;
	float: left;
	color:#6b6b6b;
	display:block;
	padding: 9px 4px 10px 4px; /* i changed the left padding to 4 */
	border-right:1px solid #d3d4ce;
}

#TopNav li.contactUs a {
	border-right: none;
	margin-right: 11px; /* I think i changed the padding/margin values here */
}

/*--------------------------------------- and I think that's it for the navigation bar. give it a whirl ------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

#TopNav a:hover {
	color:#fff;
	background: #002992;
}

/* logo area */
#brandingMastHead{width:900px; height:296px; padding:0; margin: 0 auto; clear:both; background-image: url(../images/flash_bg_900.png); background-position: -6px 0px; }
#brandingSub {width:359px; height:295px; float:left; margin-top:-5px; padding:0;}
#brandingMain  {width:541px; height:289px; background: no-repeat left; float:left;}
#brandingMain .pageTitle {color:#008131; font-size:36px; font-weight: bold; text-align: left; padding:0; margin:40px 0 0 0;}

#brandingMain a#getFlashButton { display: block; position: relative; top: 232px; left: 390px; width: 36px; height: 36px; background-image:url(../images/get_flash_player.png); }
#brandingMain a#getFlashButton:hover { background-image:url(../images/get_flash_player_glow.png);  }
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */

#SectionMastHead  { /* Photo Masthead Area*/
	background:url(../images/inner_head.jpg) no-repeat #63666b;  
	border-bottom: 8px solid #484B50;
	height: 312px;
	height: 144px; 
	margin: auto;
	position: relative;
	text-align: left;
	width: 900px;
	z-index: 500;
}

#SectionMastHead  #SiteSection {
    top:110px; 
    left:20px;
    position: relative;
}

/* ---------------------------------------------------------------------------- */

/*---------------------------------------------------------------------------- */
#contentArea  {
	width:900px;
	margin:-10px auto 0 auto;
	padding-top:30px;
	background: url(../images/tab_up.png) no-repeat top right;
	z-index: 100;
}


/* ----------------------------------------------------- */

/* ------Div used for the main yellow background -------*/
#yellowBg  {
	width:900px;
	float:left;
	background: url(../images/content_bg.gif) repeat-y top center;
	/*margin-top: 10px;*/
}

#about { 
	width:559px;
	float:left;
	background: url(../images/md_wht_bg.gif) repeat-y top left;
	text-align:left;
	padding: 0;
	margin: 20px 0 0 40px;
}

#about #paradeInfo	{
	width: 420px;
	margin: 0 auto;
	background-position:center;
	background-repeat:no-repeat;
}

#about .jsEffects1	{
	width: 520px;
	margin-left:30px;
	margin-bottom: 10px;
}

#about .jsEffects2	{
	width: 496px;
	margin:6px 0 10px 30px;
}

#about .jsEffects3	{
	width: 500px;
	margin:6px 0 30px 30px;
}

#picSliderBtnArray	{
	padding-top:10px;
	padding-bottom:10px;
		
	height:110px;
	width: 96%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;

}

.picSliderBtn	{
	width: 98px;
	float:left;
	text-align: center;
}


#about .picSliderBtn a {
	color:#333333; /* gray */
	text-decoration:none;
	font-weight:600;
}
#about .picSliderBtn a:hover {
	color:#333333; /* gray */
	text-decoration: underline;
}
.picSliderBtn	img {
	margin-bottom: 2px;
	border: 1px solid #333333; /* gray */
}
#about .picSliderBtn a:hover img{
	background-color:#F5F1A7 /* pale-yellow */
}
.contentBtmGraphic {
	width: 559px;
	float: left;
	background: url(../images/content_btm_bg.gif) no-repeat bottom left;
	margin: 0;
	padding-bottom: 80px;
}

#about a	{color:#005F23;/* dark-green */}
#about a:link {}
#about a:visited {}
#about a:hover {text-decoration:none;}
#about a:active {}

#about h1 {
	width: 559px;
	padding: 20px 20px 0 30px;
	margin: 0;
	margin-bottom:10px;
}

#about h2 {
	margin-top:10px;
	margin-bottom:16px;
	margin-left:30px;
}

#about p {margin:0; padding: 0 20px 10px 30px;clear:both;}

#about p.intro	{color:#B06D13; /* rusty-orange */ font-weight:600;}

#about p.afterJsEffects {margin:0 0 10px 0;padding-top:10px;font-style:italic;}

#about div.hasPic	{
	width: 100%;
	height: 196px;
	margin-bottom:0;
}

#about div.hasPic p	{
	padding-top: 10px;
}

#about div.hasPic img	{
	float: right;
}

#about p.picPara	{
	text-align:center;
}

p.postBlockquote	{
	font-size:0.9em;
	font-weight:600;
	line-height:1.5em;
	color:#7F0400; /* crimson */
}

#about ul {
	margin-right:10px;
	margin-bottom:10px;
	margin-left: 30px;
}
#about ul li {
	padding-bottom:7px;
}

#about #sliderDiv ul li {
	color:#AF1518; /* parade-red */
	font-weight:600;
}

#about #sliderDiv #spc5 ul {
	width: 200px;
}

.TabbedPanelsContent li {
	margin-left: 24px;
	padding-left: 6px;
	list-style-image:url(../images/checkmark.png);

}
#about ul#skipList	{
	margin-top:16px;
	padding-left:30px;
}
#about ul.subList	{
	margin-bottom:0;
	padding-top: 12px;
}

#about div#contacts	{
	margin-top: 30px;
	padding-left: 20px;
}

#about div.contact 	{
	height:80px;
}
#about div.contact .jobtitleTx {
	display:block;
}
#about div.contact .nameTx {
	display:block;
	margin-bottom: 6px;
}
#about div.contact .headshot {
	float:right;
	border:1px solid #000000; /*black*/
}

#about div#embeddedFLVPlayer {
	margin: 10px auto 20px auto;	
	border: 2px solid #006426;
	width: 425px;
	height: 344px;
}

/***** the extra div for the top rounded corners graphic ******/
.contentTopGraphic {width: 559px; float: left; background: url(../images/content_wht_bg.gif) no-repeat top left; margin:0; padding: 0;}

#featuredSolution {
	width:245px;
	height:auto;
	float:right;
	margin: -45px 10px 0px 30px;
	padding: 0;
	text-align:left;
}

#featuredSolution .ribbon {
	float:left;
	position: absolute;
	margin: 0 0 0 -50px;
	padding: 0;
	z-index: 1000;
}

#featuredSolution .volunteer { float: left; clear: both; width: 175px; height: 120px; margin: 0 0 0 40px; padding: 0; background: url(../images/volunteer.png) no-repeat left;}
#featuredSolution .volunteer a {float: left; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; color:#000; text-decoration: none; padding:0; margin: 65px 0 0 15px;}
#featuredSolution .volunteer a:hover {color: #990000; text-decoration: underline;}

#featuredSolution .camera { float: left; clear: both; width: 170px; height: 110px; margin: 0 0 0 45px; padding: 0; background: url(../images/camera_blue.png) no-repeat left;}
#featuredSolution .camera a {float: left; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-style: italic; font-size: 11px; color:#000; text-decoration: none; padding:0; margin: 50px 0 0 20px;}

#featuredSolution .camera a:hover {color: #990000; text-decoration: underline;}

#featuredSolution .paradeMap { float: left; clear: both; width: 157px; height: 105px; margin: 0 0 0 50px; padding: 0; background: url(../images/parade_map.gif) no-repeat left;}
#featuredSolution .paradeMap a {float: left; font-family:Arial, Helvetica, sans-serif; font-weight: bold; text-align:center; font-size: 18px; color:#000; text-decoration: none; padding:0; margin: 30px 0 0 40px;}

#featuredSolution .paradeMap a:hover {color: #990000; text-decoration: underline;}

#featuredSolution .mediaKit {clear: both; padding:10px 0 0 60px; margin: 0;}
.mediaKit a {text-decoration: none; color:#000; font-size:18px; font-weight: bold;}
.mediaKit a:hover {text-decoration: underline; color:#990000;}

.btmGraphic {background: url(../images/btm_bg_2ndcol.png) no-repeat bottom left; padding:0; margin:0;}
.topGraphic {background: url(../images/top_bg_2ndcol.png) no-repeat top left; padding:0; margin:0;}


/* typography styles for individual page #featuredSolution areas */
#featuredSolution p {
	width:218px;
	font-size:11px;
	padding: 0 0 20px 20px;
	margin:0;
	text-align:left;
}

#featuredSolution h1 {	padding: 20px 0 10px 20px;	margin: 20px 0 0 0; font-size: 18px; color:#008131; }


/* ----------------------------------------------------- */ 

/* ----------------------------------------------------- */
#Footer {
	background: url(../images/footer_bg.png) no-repeat bottom left; 
	margin: 0px auto 20px auto;
	padding:0;
	width:900px;
	position: relative; 
	font-size: 10px;
	clear:both;
	height: 50px;
}

#Footer a { color:#017d8f; }
#Footer #Copyright {
	clear:both;
    float: left;
	padding: 0 20px 0 0;
}

#Footer ul {
    float:left; 
    padding:0px;
    margin: 20px 5px 0 10px;
    text-align: right;
    list-style: none;
}

#Footer ul li {
    float: left;
    display: inline;
    margin: 0 .25em;
}