/* ========== opStyles.css ========== */

/* Mac IE 5 seems not to like single quotes in url() phrases, so use double quotes. */

/* Green was #99ff00 */

/* -----Elements----- */

/* -----General classes----- */

.opAlert {font-size:large; color:Red;}
.opBold {font-weight:bold;}
.opBlue {color:blue;}
.opBlueBold {color:blue; font-weight:bold;}
.opBlueBorder {border:1px solid #5377BB;}
.opCenter {margin-left:auto; margin-right:auto;}
.opCenterFixedWidth {width:75%; margin-left:auto; margin-right:auto;}
.opCenteredSlightlySmaller {width:98%; margin-left:1%; margin-right:1%;}
.opFooterBorder {border-top:1px solid #333333;}
.opFooterTable {margin-top:24px;}
.opGreen {color:#a0ff12;}
.opGreenBorder {border:3px solid #a0ff12;}
.opGreenBorderThin {border:2px solid #a0ff12;}
.opGreenRule {height:2px; background-color:#A0FF12;}

/* Used for member, group, and network images that are links */
.opHoverBorder img {border:2px solid #ccc;}
.opHoverBorder img:hover {border-color:#a0ff12;}

.opLarge {font-size:large;}
.opLarger {font-size:larger;}
.opOrange {color:#FF8C00;}
.opOrangeBorder {border-color:#FF8C00;}
.opOrangeBackground {background-color:#FF8C00;}
.opPadded {padding:3px;}
.opRed {color:red;}
.opSlightlyLarger {font-size:13px;}
.opSmall {font-size:small;}
.opSmaller {font-size:smaller;}
.opSmallest {font-size:xx-small;}
.opTextCenter {text-align:center;}
.opTextJustify {text-align:justify;}
.opTextLeft {text-align:left;}
.opTextRight {text-align:right;}
.opUnderline {text-decoration:underline;}

.opSubmit, a.opSubmit, a.opSubmit:link
{ 
	background: transparent; 
	vertical-align: middle; 
	border: 1px solid #999; 
	border-right: 2px solid #999; 
	border-bottom: 2px solid #999; 
	font-family: Trebuchet MS, sans-serif; 
	font-size: 1em; 
	cursor: pointer; 
	color: #000; 
	font-weight: bold; 
	text-decoration: none; 
	padding: 3px 5px 3px 5px; 
	margin: 2px;
}


/* -----Element-specific classes----- */

a.opDark {color:#333333;}
a.opDark:link {color:#333333; text-decoration:none;}
a.opDark:visited {color:#333333; text-decoration:none;}
a.opDark:hover {color:#a0ff12; text-decoration:underline;}

hr.opOrange
{
	/* Apparently some browsers use one of color/background-color, and some use the other, for <hr> */
	border: 0;
	color: #FF8C00;
	background-color: #FF8C00;	
	height: 4px;
}

input[disabled] {background-color:#C0C0C0;}

table.opFormTable {border-spacing:9px;}

table.opBordered td {border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;}
table.opBordered td.opTop {border-top:1px solid #CCCCCC;}
table.opBordered td.opLeft {border-left:1px solid #CCCCCC;}

td.opFormLabel {
	padding:3px; 
	vertical-align:top; 
	background:#E6EFF8 none repeat scroll 0%;
	font-weight:bold;
	text-align:right;
}

td.opBox {border:1px solid Black; font-size:small; padding:3px;}
td.opGreenBox {border:1px solid #A0FF12; font-size:small; padding:3px;}
td.opOrangeBox {border:1px solid #FF8C00; font-size:small; padding:3px;}
td.opFormLabelCell {text-align:right; vertical-align:top;}
td.opFormSectionHeader {font-size:larger; font-weight:bolder;}

/* -----ID-specific components----- */

#imBanner {display:none;} /* Hide the banner, so that it'll stay there, invisibly, still checking IM status and such */

#imBannerRequest {z-index:1;
visibility:hidden;
position:absolute;
top:200px;
left:400px;
width:300px;
height:200px;
background-color:yellow;
border:outset #a0ff12 2px;
}

#opCommunityNewsTable {padding:5px; margin-top:2px;}
#opBecomeAMemberTable {border:1px solid #a0ff12; text-align:center; padding:9px;}

/* All TD elements in the name, email, password box get some padding on the bottom and left */
#opSignup_sectionOneTable td {padding-bottom:9px; padding-left:7px;}

/* On user home page */
#opConnectWithUserTable {border:1px solid #a0ff12; text-align:center; padding:9px;}
#leftNavNotes {padding:70px 5px 0px 15px; font-size:11px;}

/* On pages typically accessed on the footer */
/* External (not-logged-in) */
/* see esp. opExternalHeader.opHtml */
#externalHeaderContainer {height:35px; background-color:#333366;}
#externalHeader  {color:#FFFFFF; float:right; margin-right:50px; font-size:10pt;}
#externalHeader a {color:#FFFFFF;}
#externalHeader a:hover {color:#99ff00;}

#externalPage {margin: 0 auto; width: 900px;}
#externalPage #content {border-bottom:1px solid #a0ff12; border-right:1px solid #a0ff12; border-left:1px solid #a0ff12;}
#externalPage .greenRule {background: #a0ff12; color:white; height:3px;width:850px; margin:0px auto; margin-top:4px;}
#externalPage .blueRule {margin:0px auto; background: #333366; color:white; height:7px;width:850px; margin:0px auto; margin-top:5px;}
#externalPage #logo {padding-left:25px;}
#externalPage #contentContainer {padding-left:25px; padding-right:25px; padding-top:14px;}
#externalPage #title { font-size:20px; color:#333366; font-weight:bold; padding-bottom:6px;}

#faqs .tableBodyBG {background-color:#FFFFFF;}
#faqs .faqsQuestionContainer {padding-top:10px; padding-bottom:10px;}
#faqs .faqsRule {width:100%; background: #cccccc; color:white; height:1px; margin-top:2px; margin-bottom:2px;}
#faqs .faqsQuestion {color:#3399CC; font-weight:bold;}
#faqs .faqsAnswer ul {padding-top:8px; padding-bottom:0px; margin-top:8px; margin-bottom:0px;}
#faqs ul.faqsNav {list-style-type:none; margin:0px; padding-left:10px;}
#faqs li.faqsNav {background-image:url(/fimages/op/images/orangeArrow_2.jpg);background-position: 0px 50%; background-repeat: no-repeat;padding-left: 30px;line-height: 22px;border: 0px solid black;}
#faqs #faqsContentHeader { font-size:20px; color:#333366; font-weight:bold; padding-bottom:6px;}
#faqs .greenRule {background: #a0ff12; color:white; height:3px;width:850px; margin:0px auto; margin-top:4px;}
#faqs .blueRule {margin:0px auto; background: #333366; color:white; height:7px;width:850px; margin:0px auto; margin-top:5px;}
#faqs #faqsContentContainer {padding-left:25px; padding-right:25px; padding-top:14px;}
#faqs #faqsJoinLink { border: 1px solid #a0ff12; margin-right:45px; padding:10px;}
#faqs #faqsJoinLink span {color:#ff9900; font-weight:bold;font-size:18px;}
#faqs #faqsLogo {padding-left:25px;}
#faqs #copyRight {font-size:11px;  color:#666666; font-weight:bold; float:left;}
#faqs #faqsPageContent {border-bottom:1px solid #a0ff12; border-right:1px solid #a0ff12; border-left:1px solid #a0ff12;}
#faqs .faqsJoinLinkCopy {font-size:16px; font-weight:bold; color:#3399cc;}
#faqs a.faqsJoinLinkCopy  {color:#3399cc;}
#faqs a.faqsJoinLinkCopy:hover {color:#99ff00;}
#faqs #faqsJumpNavList {list-style:none; padding-left:0px; margin-left:0px; margin-top:5px; margin-bottom:5px; padding-bottom:0px; padding-top:0px;}
#faqs #faqsJumpNavList li a {color:#3399cc;}
#faqs #faqsJumpNavList li a:hover {color:#99ff00;}

#registration #registrationTable {margin:0px auto; width:780px;}
#registration #formFieldsTable {padding-right:15px;}
#registration #formFieldsTable td {padding:3px;}
#registration a {text-decoration:underline;}
#registration #welcomeHeader {font-size:30px; color:#5377BB;}
#registration #welcomeText {font-size:26px; color:#5377BB;}
#registration #signUpSubhead {border:2px solid #a0ff12; padding-top:10px; padding-bottom:10px; text-align:center; width:776px; font-size:14px;}
#registration #signUpSubhead #subheadBigText {font-size:26px; color:#5377bb;}
#registration #signUpSubhead #subheadSmallText {font-size:13px; color:#5377bb;}
#registration .footerBorder {border-top:1px solid #333333;}
#registration .footerTable {margin-top:24px;}
#registration input.small {width:75px;}
#registration input.regForm {width:200px;}
#registration #privacyBox {background:#e8e9ea; padding:10px; margin-top:75px; font-size:11px; margin-right:50px; margin-left:40px;}
#registration #privacyBox span { font-size:16px; color:#5377bb; font-weight:bold; }
#registration #whySignUpBox {border:2px solid #a0ff12; padding:10px;}
#registration #whySignUpBox .whySignUpBoxBoldBlue {font-size:22px; color:#5377BB;}
#registration .disclaimer {padding-top:8px; padding-bottom:12px; font-size:11px;}
#registration .formStart {padding-top:20px;}
#registration .formNote {color:#777777;}
#registration .reqFields {color:#5377bb;}
#registration .registrationRule {background:#cccccc; width:100%; height:1px; margin-top:10px; margin-bottom:10px;}
#registration .subText {font-size:8pt; font-weight:normal;}

/* ========== from pxStyles.css ============= */

.small {font-size:0.9em; font-weight:normal;}

.submit {
background:transparent none repeat scroll 0%;
border-color:#999999;
border-style:solid;
border-width:1px 2px 2px 1px;
color:#000000;
cursor:pointer;
font-family:Trebuchet MS,sans-serif;
font-size:1em;
font-weight:bold;
margin:0pt 2px 0pt 0pt;
padding:2px 4px;
text-decoration:none;
vertical-align:middle;
}

div.spacer15 {height:15px;}

h1.pathTitle {
border-bottom:1px dotted #000000;
color:#003366;
font-family:Arial;
font-size:1.5em;
font-weight:bold;
}

img.thumbImg {border:1px solid #ACB4B7; margin-left:3px; margin-right:3px;}

td.searchResultCellCenter {text-align:center;}

tr#communitySearchHeader {background:#F2F8F9 none repeat scroll 0%; font-weight:bold;}
tr#communitySearchHeader th {color:black; text-align:left;}

table#communitySearchResults {background:#F0EBE5 none repeat scroll 0%;}

/* ========== styles.css (Greg) ========== */

/*****************/
/* Layout Styles */
/*****************/
body { font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#333; }
body#usersHomeSpace  { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333; }
#bodyContainer { width:870px; margin:auto; }

#bannerUnder { background: #a0ff12; color:white; width: 870px; height:3px; margin-top:3px; margin-bottom:3px; }

/* Left CommunityPhoto & Vertical Nav Column */
#leftColumn { width:170px; vertical-align:top; padding:0px 15px 0px 0px; }
#communityPhoto {text-align:center;}
#feedbackBox {padding-top:15px; text-align:center;}
/* Main Column that houses main content columns */
#contentColumn {width:100%; vertical-align:top; padding: 0px 0px 35px 0px;}

/* Main Content Columns */
#contentColumnLeft {vertical-align:top;}
#groupsIndex #contentColumnRight {width:275px; vertical-align:top; padding-left:15px;}
#postsPage #contentColumnRight {width: 0px; vertical-align:top; padding-left:15px;}
#usersHomeSpace #contentColumnRight {width:275px; vertical-align:top; padding-left:15px;}

/* Site Footer */
/*#footer { font-weight:bold; text-align:center; width:100%; padding-top:10px; border-top:1px solid #ccc; }*/
#footer {padding-top:6px; padding-left:12px; padding-right:12px;}
#footerCopyRight {font-size:11px;  color:#666666; float:left;}
#footerLinks {color:#666666; float:right; font-size:11px;}
#footerLinks a {text-decoration:none; color:#666666;}
#footerLinks a:hover {color:#99ff00; text-decoration:underline;}

div.spacer { height:15px; }
a:active
{ outline: none; text-decoration:none; }
a.none { background:transparent; } 
a:link { color: #6699cc; text-decoration:none; }
a:visited { color: #6699cc; text-decoration:none; }
a:hover {color:#a0ff12; text-decoration:underline;}

/* shadow styles */

div.img-ilus {
/* AJO 9/17/07 Per Mike, we can do without shadows for now.  background: url("/fimages/op/images/shadow.gif") no-repeat bottom right; */
margin: 10px 0px;
padding: 0;
position: relative;
}
  
div.img-ilus img {
background-color: #fff;

margin: 0px 5px 5px 0px;
padding: 0px;
position: relative;
vertical-align: bottom;
}

div.img-ilusProfile {
background: url("/fimages/op/images/shadow.gif") no-repeat bottom right;
margin: 10px 0px 0px;
padding: 0;
position: relative;
}
  
div.img-ilusProfile img {
background-color: #fff;

margin: 0px 5px 5px 0px;
padding: 0px;
position: relative;
vertical-align: bottom;
}

div.img-ilusMem {
/* AJO 9/17/07 Per Mike, we can do without shadows for now.  background: url("/fimages/op/images/shadow.gif") no-repeat bottom right; */
margin: 2px 0px 0px 0px;
padding: 0;
position: relative;

/*width:60px;*/
}
  
div.img-ilusMem img {
background-color: #fff;

margin: 0px;
padding: 0px;
position: relative;
vertical-align: bottom;
}

#searchBox input
{
color: #333366;
background: #fff;
border: 1px solid #333366;

width:75px;
font-size:12px;

}
#searchBox select { color: #333366;
background: #fff;
border: 1px solid #333366;

width:100px;
font-size:12px;
}

/*****************/
/* Button Styles */
/*****************/

/* Sexy Grey Buttons */
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url("/fimages/op/images/buttons/bg_button_a.gif") no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
#joinGroup .button { width:225px; text-align:center; margin-left:8px; }

a.button span {
    background: transparent url("/fimages/op/images/buttons/bg_button_span.gif") no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
	color:#444;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

/************************/
/* Page Specific Styles */
/************************/

/* Group Page Styles */
.tableborder {border:1px solid #ccc;}
td.icon {padding: 8px;}
#groupActivities td {border-bottom:1px solid #999; padding:5px; font-size:10pt}
.alt {background:#F3F3F3}
#communityProfileHeader { margin:0px; padding: 6px 0px 1px; text-align:left; color: #333366; font-size:16pt; }
#adminToolBoxHeader { margin:0px; padding: 6px 0px 1px; text-align:left; color: #333366; font-size:12pt; }
.underlineHR { background: #a0ff12; color:white; height:2px; margin-top:1px; margin-bottom:1px; margin-left:0px; }
#adminHR { background:#a0ff12; color:white; height:2px; margin-top:1px; margin-bottom:1px; margin-left:0px; }


#communityProfileTable { padding: 5px; margin-top:2px;}
#showInfo {font-size:8pt;}

#groupMembers {font-size:11px;}
#groupActivitiesHeading, #groupMembersHeading, .newsHeader {margin:0px;padding: 6px 10px 6px;text-align:left;color: #333366; background: #e6eff8; font-size:11pt; font-weight:bold;}
#groupActivitiesTable, #groupAdminMembersTable, #newsTable {margin-top:2px;}
.groupMembersTable {border:1px solid #ccc; margin-top:2px; padding-bottom:3px;}
.groupMembersTable td, #groupAdminMembersTable, #newsTable td {padding-top:15px;}
.groupMembersTable td.userName {padding-top:0px; padding-bottom:2px}
.groupMembersTable img, #groupAdminMembersTable img {border:2px solid #ccc;}
.groupMembersTable img.hasLinkableImage:hover {border-color:#a0ff12;}
#joinGroup { text-align:center;}

#adminToolBoxTable { padding: 5px; margin-top:2px;}

a.activeTab  {color: #333366; text-decoration:underline; }
#administrators, #communities {display:none;}

.summaryBox {border:1px solid #CCCCCC; padding:5px 0px; margin-bottom:15px; background-color:#E6EFF8;}
.summaryHeader {font-size:12pt; font-weight:bold; padding:0px 4px 10px 4px;}

/* Post Page Styles */
.discussionsHeader { color: #333366; background: #e6eff8; font-size:11pt; font-weight:bold;}
#forumGuidelinesHeading  {margin:0px;padding:6px 8px 6px 8px; }
#forumGuidelinesHeading {padding:6px 10px 6px;}
#forumGuidelinesTable, #discussionsTable { /*border:1px solid #ccc; margin-top:2px; */}
#forumGuidelinesTable td { padding:5px; }
#forumGuidelinesButton { margin-left:20px; margin-top:15px;}
.discussionsSubHeading {font-weight:bold; padding:0px 0px 0px 0px;}
.offset {padding-left:15px;}
#forumGuidelinesExclamationPoint {float:left; padding:5px;}
#discussionsTable td {padding:8px; border-bottom: 1px solid #ccc;}
#discussionsTable .posts, .topics, .author {text-align:center;}
#postsPage #leftColumn {width:130px;}

/* User Home Space */
#userToolBox {padding-top:18px;}
#userToolBoxItems {display:block; padding-left:0px; margin-left:20px;}

#usersProfileHeader { margin:0px;padding: 6px 0px 1px;text-align:left;color: #333366; font-size:16pt; }


.latestActivityHeader, #photoAlbumsHeader, #newFriendsActitityHeader, #newGroupsActivityHeader  {margin:0px;padding: 6px 10px 6px;text-align:left;color: #fff; /*background: #e6eff8;*/ background:#333366; font-size:13px; font-weight:bold;}

.latestActivityTable, #photoAlbumsTable, #newFriendsActitityTable, #newGroupsActivityTable { border:1px solid #ccc; margin-top:2px; background-color:#e6eff8;}

.userImage {background:#fff}
.blogEntry, .discussionEntry {background:#fff; height:110px} /* AJO 10/5/07 Mike wants a fixed height for these */
.userImage {text-align:center;}
.userImage a.textLink:hover {text-decoration:underline; color:#a0ff12;}
.userImage img {border:2px solid #ccc;}
.userImage img:link {border:2px solid #ccc;}
.userImage img:visited {border:2px solid #ccc;}
.userImage img:hover {border-color:#a0ff12;}

.markRead {text-align:right; font-size:9px;}
.markRead a {text-decoration:underline;}
.markRead a:hover {text-decoration:underline; color:#a0ff12;}
.activitySubHead {font-size:12px;}

.activitySubHead a {text-decoration:underline;}
.activitySubHead a:hover {text-decoration:underline; color:#a0ff12;}
.blogEntryTitle, .discussionEntryTitle {font-size:12px;}
.blogEntryTitle a, .discussionEntryTitle a {text-decoration:underline; color:#6699CC;}
.blogEntryTitle a:hover, .discussionEntryTitle a:hover {text-decoration:underline; color:#a0ff12;}
.blogEntryBody {text-align:justify;} /* AJO 10/5/07 Mike wants the display to be justified */

.readMore {text-align:right;}
.activityHSpace {height:16px; padding-top:8px; padding-bottom:8px; min-height:16px;}




#usersProfileTable { border: 0; margin-top:2px; background-color:#fff;}
#userProfileTable td {padding:0px}
#userProfileTable { background:#e6eff8;}
.userProfileName { color:#333366; font-weight:bold; font-size:13px;}

#userProfileImage {padding:10px 20px;}


.userProfileInterests { padding:8px;}
.userProfileInterests span {font-weight:bold; color:#333366;}
.userProfileInterests div {padding:5px;}
.smallText {font-size:7pt;}
#userNotificationsBlock {color:#FF0000; border:3px solid #FF0000; font-weight:bold; padding:4px; margin-bottom:15px; }

.latestActivityTable td, #photoAlbumsTable td, #newFriendsActitityTable td, #newGroupsActivityTable td, #usersProfileTable td { padding:3px; }


#usersFriendsTable td, #usersGroupsTable td, #usersNetworksTable td { padding:6px;}
#usersFriendsTable img, #usersGroupsTable img, #usersNetworksTable img {border:1px solid #999}
#usersFriendsTable, #usersGroupsTable, #usersNetworksTable { border:1px solid #ccc; margin-top:2px; }
.userPhotoAlbum {text-align:center;}
.allAlbums {text-align:right; font-size:9pt;}
#latestBlogEntryTable .latestBlogContent {padding-top:18px;}
#colleagueButtons {text-align:center;}

/*#latestBlogEntryTable a:link, #photoAlbumsTable a:link, #newFriendsActitityTable a:link, #newGroupsActivityTable a:link { color:#13A41B;}
#latestBlogEntryTable a:visited, #photoAlbumsTable a:visited, #newFriendsActitityTable a:visited, #newGroupsActivityTable a:visited { color:#13A41B;}
#latestBlogEntryTable a:hover, #photoAlbumsTable a:hover, #newFriendsActitityTable a:hover, #newGroupsActivityTable a:hover { color:#000000;}*/
.photoAlbumBG {background-color:#FFFFFF;}
#usersProfileTable .profileHeading {font-weight:bold; padding-bottom:10px; padding-top:10px; text-decoration:underline }
#usersProfileTable .profileLabel {font-weight:bold;}

/* Post Thread Page */

#postThreadHeader {margin:0px;padding: 6px 0px 1px;text-align:left;color: #333366; font-size:16pt;}
#postThreadPage .postInfo {float:left; padding: 5px; padding-right:15px;}
#postThreadPage .postInfo img {border:1px solid #999}
#postThreadPage .postBody {padding-top:15px; padding-bottom:10px;}
.postItemTable td {padding:5px;}
#postThreadPage .postItemTable {border:1px solid #ccc;}
#postThreadPage .postItemHeading {background-color:#e6eff8;}

#postReplyHeader { margin:0px;padding: 6px 0px 1px;text-align:left;color: #333366; font-size:16pt; }
#attachmentsHeader {margin:0px;padding: 6px 10px 6px;text-align:left;color: #333366; background: #e6eff8; font-size:11pt; font-weight:bold;}
#postReplyTable, #attachmentsTable { border:1px solid #ccc; margin-top:2px; }
#postReplyTable {background:#F9F9F9}
#postReplyTable td, #attachmentsTable td {padding:8px;}
.attachmentBox { width:300px; }
#postReplyContainer textarea {width:100%; height:200px;}
.requiredItem {color:#FF0000;}

/* ========== tabs.css (Greg) ========== */

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc li {
    float: left;
    margin: 0 1px 0 0;
}

ol#toc a {
    background: #6699cc url(/fimages/op/images/tab.png);
    color: #333366;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}

ol#toc a:hover {
    background-color: #3af;
    background-position: 0 -120px;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

ol#toc li.current a {
    background-color: #48f;
    background-position: 0 -60px;
    color: #000;
    text-decoration:underline;
}

ol#toc li.current span {
    background-position: 100% -60px;
}

ol#toc span {
    background: url(/fimages/op/images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}

div.tabcontent {
    /*border: #ccc solid 2px;*/
    clear: left;
   /* padding: 1em;*/
}

/* ========== hNav.css (Greg) ========== */

/* Horizontal CSS Dropdown */
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#hNavContainer {margin:0; position:relative; width:100%; height:25px; z-index:100; background:#333366; text-align:center; font-weight:normal; font-size:9pt; }

/* Get rid of the margin, padding and bullets in the unordered lists */
#hNav, #hNav ul {padding:0; margin:0; list-style-type: none; }

/* Set up the link size, color and borders */
#hNav a, #hNav a:visited, #hNav a:active {display:block; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:0px; border-top:1px solid #cdcdd9; border-bottom: 1px solid #cdcdd9;}
#hNav a.homeSpace, #hNav a.homeSpace:visited {width:125px;}
#hNav a.forums, #hNav a.forums:visited {width:70px;}
#hNav a.groups, #hNav a.groups:visited {width:105px;}
#hNav a.colleagues, #hNav a.colleagues:visited {width:125px;}
#hNav a.members, #hNav a.members:visited {width:110px;}
#hNav a.bookmarks, #hNav a.bookmarks:visited {width:100px;}
#hNav a.im, #hNav a.im:visited {width:75px;}
#hNav a.help, #hNav a.help:visited {width:80px;}
#hNav a.logout, #hNav a.logout:visited {width:80px;}

/* Set up the sub level borders */
#hNav li ul li a, #hNav li ul li a:visited {/*border-width:0 1px 1px 1px;*/}
#hNav li a.enclose, #hNav li a.enclose:visited {/*border-width:1px;*/}

/* Set up the list items */
#hNav li {float:left; background:#333366;}

/* For Non-IE browsers and IE7 */
#hNav li:hover {position:relative;}
/* Make the hovered list color persist */
#hNav li:hover > a {background:#a0ff12; color:#fff;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#hNav li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#hNav li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; width:95px;}
/* Position the first sub level beneath the top level liinks */
#hNav > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#hNav table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #hNav li a:hover {position:relative; background:#a0ff12; color:#fff;}

/* For accessibility of the top level menu when tabbing */
#hNav li a:active, #hNav li a:focus {background:#a0ff12; color:#fff;}

/* Set up the pointers for the sub level indication */
#hNav li.fly {background:#333366; }
#hNav li.drop {background:#333366; }


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #hNav li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px;}

/* keep the third level+ hidden when you hover on first level link */
#hNav li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#hNav li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#hNav li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#hNav li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#hNav li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#hNav li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#hNav li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#hNav li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#hNav li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

/* ========== vNav.css (Greg) ========== */

#vNavContainer {
width: 170px;
}
#postsPage #vNavContainer { width:130px;}

#vNavContainer ul {
margin: 0;
padding: 5px 0 5px 0;
list-style-type: none;
font-family: verdana, arial, sans-serif;
font-size: 11px;
text-align:left;
margin-top:2px;
border:1px solid #ccc;
}

#vNavContainer li {
margin: 0 0 0 ;
}

#vNavContainer a {
display: block;
width:160px;
padding: 2px 2px 2px 6px;

/*border-bottom: 1px solid #FFE3C6;*/
background: #fff;
text-decoration: none; 
}
#postsPage #vNavContainer a { width:126px;}


#vNavContainer a:link, #vNavContainer a:active, #vNavContainer a:visited {
color: #6699cc;
}

#vNavContainer a:hover {

/*border-bottom: 1px solid #FFE3C6;*/
background: #a0ff12;
color: #ffffff;
}
#vNavContainer .top {/* border-top:1px solid #FFE3C6;*/}
.vNavHeading {color: #333366; background: #e6eff8; font-size:13px; font-weight:bold; text-align:center; padding:3px 1px 3px 1px; margin-top:2px;}