/* 
***********************************
The Revora Network Bar - Project Phantom Style
***********************************

File: nwbar.css (Based on rnb_default.css)
Author: Starkku (Based on original RNB stylesheet by Dark Lord of the Sith.)
Description: This file controls the looks of the networ bar, will act as the network-wide default
   
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: 22px;
background: #000000;
background: linear-gradient(rgba(128,128,128) 0%, rgba(0,0,0) 75%);
box-sizing: content-box;
border-bottom: 1px solid #008800;
z-index: 99;
}


/* *******  Dropdown Div Styles  ******* */
#rnb__dropdowns {
/* let's clear that float of the sections */
clear: left;
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: 0 12px 0 12px; /* 1px 10px 1px 10px */
display: block;
height: 22px; /* 20px */
line-height: 22px; /* 20px */
color: #AAAAAA;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #000000;
background: linear-gradient(rgba(128,128,128) 0%, rgba(0,0,0) 75%);
border-left: 1px solid rgba(255,255,255, 0.33);
border-right: 1px solid rgba(0,0,0, 0.33);
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: #AAAAAA;
}

#rnb__body a.rnb__section:hover {
cursor: pointer;
color: #88FF88;
background: #006600;
background: linear-gradient(rgba(0,225,0) 0%, rgba(0,64,0) 75%);
text-decoration: none;
}

/* The div containing the section anchor tag, for extra flexibility */
#rnb__body .rnb__sectioncontainer {
float: left;
border-bottom: 1px solid #008800;
border-right: 1px solid #008800;
}

/* 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: #AAAAAA;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px;
border: 1px solid #000;
border-top: none;
margin-top: 1px;
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;
background-color: #252525;
color: #AAAAAA;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px;
font-weight: bold;
border-top: 1px solid #000;
}

/* Category Buttons (should be marked as that, so people know that this button will expand) */
#rnb__dropdowns .rnb__category {
position: relative;
padding-right: 20px !important;
}

#rnb__dropdowns .rnb__category::after {
content: '';
position: absolute;
right: 5px;
top: 9px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 4px 0 4px 5px;
border-color: transparent transparent transparent #00AA00;
}

#rnb__dropdowns .rnb__category:hover::after {
border-width: 0 0 0 0;
}

#rnb__dropdowns .rnb__button:hover, #rnb__dropdowns .rnb__category:hover {
cursor: pointer;
background: #006600;
color: #88FF88;
text-decoration: none;
}


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

/* Spotlight */
#rnb__dropdowns .rnb__button__spotlight {
display: block;
height: 140px;
width: 150px;
padding: 3px;
background-color: #252525;
}
#rnb__dropdowns .rnb__button__spotlight:hover {
background-color: #006600;
}

#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;
}