Code:

 

/*
*******************************************
The Revora Network Bar - Revora Front Page Style
*******************************************

File: rnb_frontpage.css
Author: Dark Lord of the Sith (DLotS)
Description: This file controls the looks of the networ bar, will be used for the grey-blue-ish Revora

frontpage

NOTES:
- Rule of thumb: Avoid margins. Do not use them, or they will create
inconsistencies in

the dropdown positioning. You have been warned.

- Important classes:

rnb__section:

the main buttons you'll see (Revora, CNC, BFME, ...)

rnb__sectioncontainer: the extra div wrapped

around each section button
use this for some extra CSS trickery



rnb__dropdown: the divs which contain the links and category buttons


used for all levels

rnb__button: a normal link button

rnb__category:

a category button (a link which expands to another submenu)


you should mark those specially, so people know that they should hover


over it to see more links (for example by using a small arrow as background image)

// - - - - - - - - -

- - - */




/* ************************************

MAIN BAR DIV

************************************

*/

/* ******* Main Bar Div Styles ******* */
#rnb__body {
/* now set in bar_functions.js
position:

absolute;
*/
top: 0px;
left: 0px;
width: 100%;
height: 32px;

background: url("images/barbg.png") top left

repeat-x;
z-index: 99;
}


/* ******* Dropdown Div Styles ******* */
#rnb__dropdowns {
/* let's clear that

float of the sections */
clear: left;
min-height: 22px;
text-align: left;
z-index: 99;
}



/*

************************************

SECTIONS

************************************ */


/*

******* Default Section Styles ******* */
/*
if you only want to override certain settings (which you

probably want),
remember to list the specific classes aswell, as the default classname will be replaced

with those
*/
#rnb__body a.rnb__section {
padding: 5px 12px 0 12px; /* 1px 10px 1px 10px */
display: block;
height: 22px; /* 20px */
line-height: 22px; /* 20px */

color: #4d7abe;
background: url("images/barbg.png")

top left repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
}

#rnb__body a.rnb__section:link, #rnb__body

a.rnb__section:visited {
color: #000;
}

#rnb__body a.rnb__section:hover {
cursor: pointer;
color: #000;
background: url("images/barbg_over.png") top left repeat-x;
text-decoration: none;
}

/* The div containing

the section anchor tag, for extra flexibility */
#rnb__body .rnb__sectioncontainer {
float: left;
padding-

right: 2px;
background: url("images/bg_notch.png") center right no-repeat;
}

/* images contained by the

sections */
#rnb__body a.rnb__section img {
float: left;
padding-right: 4px;
border: none;
}


/* *******

Specific Section Styles ******* */

/* you might want some specific settings for the leftmost item

(Revora) */
#rnb__body #rnb__section__revora {
padding-left: 12px;
}

/* or for the rightmost item (Help) */
#rnb__body #rnb__sectioncontainer__help {
float: right !important;
}
#rnb__body #rnb__section__help

img {
padding-right: 0;
}




/* ************************************

CATEGORIES

************************************ */



#rnb__dropdowns .rnb__dropdown {
min-width: 160px;

background-color:

#eee;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #eee;
border-

top: none;

z-index: 100;
}



/* ******* Specific Section Styles ******* */

/* Spotlight */
#rnb__dropdowns

.rnb__spotlight {
min-width: 150px;

z-index: 100;
}




/* ************************************

BUTTONS /

LINKS

************************************ */


/* RNB Button */
#rnb__dropdowns .rnb__button, #rnb__dropdowns

.rnb__category { /* default style for normal buttons and category buttons */
display: block;
padding: 4px

10px;

color: #000;
background-color:#89C6E7;
text-decoration: none;
font-family: Verdana, Arial, Helvetica,

sans-serif;
font-size: 11px;
font-weight: bold;
border-top: 1px solid #eee;
}

#rnb__dropdowns

.rnb__button:hover, #rnb__dropdowns .rnb__category:hover {
cursor: pointer;background-color:#279CC9;
text-

decoration: none; border: 1px solid #15546C;
}

/* Category Buttons (should be marked as that, so people

know that this button will expand) */
#rnb__dropdowns .rnb__category {
padding-right: 15px !important;

background: url("images/arrow-right.png") center right no-repeat;
background-color:#89C6E7
}


/* *******

Specific Section Styles ******* */

/* Spotlight */
#rnb__dropdowns .rnb__button__spotlight {
display:

block;
height: 142px;
width: 150px;
padding: 3px;

background-color: #bdd1e6;
}
#rnb__dropdowns

.rnb__button__spotlight:hover {
background-color: #ddd;
}

#rnb__dropdowns .rnb__button__spotlight img {
border: none;
}


/* ************************************

OTHER STUFF

************************************ */


/* Additional Images (the small ones indicating it's a

forum/released/new) */
#rnb__dropdowns .rnb__addimg {
padding-left: 5px;
border: none;
}

Code:

 

RPGs | Other | Other2
-1
-2
-3>3-1
>3-2
>3-3>3-3-1
>3-3-2