*{
	font-size:11px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color:#000;
	margin:0;
	padding:0;
	list-style:none
}

BODY
{
    BACKGROUND-COLOR: #4A4C94;
}

A:link	{	
	text-decoration:	none;
	color:	#3333cc;
	}	
		
A:visited	{	
	text-decoration:	none;
	color:	#333399;
	}	
		
A:active	{	
	text-decoration:	none;
	color:	#333399;
	}	
		
A:hover	{	
	text-decoration:	underline;
	color:	#3333cc;
	}

div:after{/* For Gecko Browsers which like to completely break float elements out of the parent's layout */
	content: ".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}

img{
	border:0
}


/* BEGIN: Tables ================== */
table{
	background:#fc0;
	margin:0 0 16px
}

th{
	background:#333;
	color:#fff;
	padding:3px 6px
}

td{
	padding:3px 6px
}

.even{
	background:#ffc;
}
/* END: Tables ================== */

.clearfloats {clear:both;}

p { margin:10px 0 5px 0; }

#top { height:177px; margin:0; background:url(/images/bg-top.gif) repeat-x; }
#nav { margin:0 auto; width:763px; height:75px; }
#header { margin:0 auto; width:763px; height:102px; /*background:url(images/bg-header.gif) no-repeat;*/ }
#logo { margin:32px 0 0 0; }
#mid { margin:0; background:url(/images/bg-mid.gif) repeat-x; }
#main { margin:0 auto; width:763px; background:url(/images/bg-main.gif) repeat-y; }

#left-container { float:left; width:175px; background:#E8E7E7; }
#res-center { margin: 3px 25px 0 20px; }
#res-center p { color:#393CAA; font-size:11px; }
form { margin:5px 10px 10px 10px; font-size:10px; color:#1A1C72; }
INPUT, TEXTAREA, SELECT, OPTION { font-family: Georgia, "MS Serif", "New York", serif; padding: 2px; color: #000080; background-color: #FFF; border: inset 1px #708090; }
.btn { margin:10px 14px 3px 3px; }

#center-container { float:left; width:300px; background:#FFF; }
#center-content { margin:0 15px 5px 15px; width:340px; }
#center-content h1 a { font-size:20px; color:#393CAA; }
#center-content h3 { border-bottom:1px #000 dotted; padding-bottom:5px; margin:10px 0; }
#center-content h4 { color:#000; margin:20px 0 5px 0; }
#center-content h5 { float:left; width:150px; margin:5px 0 0 0; padding:10px 10px 10px 0; font-size:12px; font-weight:bold; border-top:1px dotted #000; border-top:1px dotted #000; color:#393CAA; }
#center-content h5.right { float:right; width:150px; margin:5px 0 0 0; padding:10px 10px 10px 0; font-size:12px; font-weight:bold; border-top:1px dotted #000; border-top:1px dotted #000; color:#393CAA; }

#right-container { float:right; width:214px; background:url(/images/bg-right-shadow.gif) repeat-y; }
#right-sub { margin:5px 40px 3px 25px; }
#right-sub h3 { margin:0; padding:0; font-size:12px; color:#000; }
#right-sub h2 { margin:0; padding:0; font-size:18px; color:#2F3193; }

#bottom { margin:0; padding:0; background:url(/images/bg-btm.gif) repeat-x; }
#footer { margin:0 auto; width:763px; height:103px; background:url(/images/bg-footer.gif) no-repeat; }
#civ-logo { float:left; margin:30px 0 0 30px; width:111px; height:44px; }
#footer-int { margin:0 auto; width:763px; height:103px; background:url(/images/bg-footer2.gif) no-repeat; }
#footer-nav { float:left; height: 50px; color:#fff; margin:39px 0 0 32px; width:590px; font-size:9px; }
#footer-nav p {  }
#footer-nav a { color:#fff; }

#mid-container { float:left; width:588px; background:#FFF; }
#mid-content { margin:0 15px 15px 15px; width:550px; }
#crumb { font-size:10px; border-bottom:1px #000 dotted; margin:15px 0 5px 0; padding-bottom:5px; }
#crumb a { font-size:10px; }
#author { font-size:11px; color:#393CAA; margin-top:5px; }
#source { font-size:11px; font-style:italic; color:#393CAA; margin-top:5px; }
#mid-content h1 { font-size:24px; line-height:27px; color:#393CAA; }
#mid-content h3 { font-size:14px; line-height:27px; color:#393CAA; }
#mid-content p { font-size:12px; font-weight:normal; line-height:21px; color:#000; }
#mid-content-btm { padding-top:15px; margin:20px 0; border-top:1px #000 dotted; }
#left-side { float:left; width:200px; }
#right-side { float:right; width:100px; }
.item { padding-top:10px; width:550px; border-top:1px #000 dotted; }
	
/* BEGIN: CSS Menu ================== */
#cssMenu{
	height:54px;
	width: 763px;
	margin:13px 0 0 0;
	float:left;
}

.home {
	background:url(/images/nav/home.gif);
	width:71px;
	}
.about {
	background:url(/images/nav/about.gif);
	width:100px;
	}
.news {
	background:url(/images/nav/news.gif);
	width:109px;
	}
.join {
	background:url(/images/nav/join.gif);
	width:84px;
	}
.resource {
	background:url(/images/nav/resource.gif);
	width:123px;
	}

.menulist, .menulist ul{
	margin:0 0 0 0;
	padding:0;
	list-style:none;
}

#cssMenu li a span { position: absolute; left: -999em; }

.menulist a.double, .menulist a.double:visited{
	height:34px;
}
.menulist a.triple, .menulist a.triple:visited{
	height:52px;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul{
	visibility:hidden;
	position:absolute;
	top:54px;
	width:150px;
	/*z-index: 20000; /* added this to conteract the fact it was getting hidden by the main content */

}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul{
	top:1px;
	left:150px;
}

/*
All menu items (<li> tags). 'float:left' lines them up horizontally, and they are
positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li{
	float:left;
	position:relative;
	margin-right: 0; /*used to be -1px (wj)*/
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li{
	float:none;
	margin-right:0;
	margin-bottom:-1px;
}

.menulist ul>li:last-child{
	margin-bottom:1px
}

/* Links inside the menu */
.menulist a, .menulist a:visited{
	display:block;
	height:54px;
	text-decoration:none;
}
.menulist ul li a, .menulist ul li a:visited{
	background:#A7050B;
	border:1px solid #fff;
	display:block;
	padding:5px 5px 0 10px;
	color:#fff;
	height:18px;
	text-decoration:none;
}
.menulist ul li a:hover{
	background:#DA151C;
	color:#fff;
	}

/* Lit  items:'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus, .menulist  a.highlighted{
	background-position:bottom;
	text-decoration:none;

}
.menulist ul li a.highlighted{
	background:#4A4C94;
	color:#fff;
}
/*
If you want per-item background images in your menu items, here's how to do it.
1) Assign a unique ID tag to each link in your menu, like so:<a id="xyz" href="#">
2) Copy and paste these next lines for each link you want to have an image:
.menulist a#xyz{
background-image:url(out.gif)
}
.menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus{
background-image:url(over.gif)
}
*/

/* Only style submenu indicators within submenus. */
.menulist a .subind{
	display: none
}
.menulist ul a .subind{
	display: block;
	float:right
}