/*
The background parameter is set to #555 just for display, to have some contrast for the bar's border.
It can be removed.
*/
body {
	background: #333; 
	color: #fff;
	font-size: 13px;
	font-family: Arial, Helvetica, Sans-Serif;
}

a {
  	color: #fff;
	text-decoration: none;
}

a:hover {
  	color: #c80000;
	text-decoration: none;
}

/*
Like the <div class="label"> in the HTML, this is just for display purpose. It can be removed.
*/
.label {
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	margin: 5px;
}

/*
Full width bar background
*/
#membership-bar-header-bg {
	background: #000;
	border-bottom: 1px solid #555;
	height: 40px;
	text-align: center;
}

/*
The header width is flexible.
As for now it is set like the SE Member's width, 950 pixels, but it can be resized to match the one of the website it is placed into or made as wide as the whole page (setting "width: 100%;" or removing the parameter)
The alignement is centered. To change it to the default left alignment, the margin "auto" and the compatibility <center></center> tag in the html must be removed.
*/
#membership-bar-header {
	position: relative;
	width: 950px;
	height: 40px;
	margin: 0 auto;
}

/*
This and the next class are for the SE Logo.
It is always aligned with the left side of the header div, with a 15 pixels left margin.
*/
#se-logo {
	position: absolute;
	top: 11px;
	left: 15px;
	width: 300px;
	text-align: left;
	font-size: 0;
}

/*
This and the following classes control the user area (when logged in) and the "Login" and "Register" buttons.
This area is always aligned with the right side of the header div, with a 15 pixels right margin.
The z-index parameter should assure that the dropdown-menu is always on top of the other content in the page.
*/
#user-area {
	z-index: 10000;
	position: absolute;
	top: 8px;
	right: 15px;
	height: 40px;
	width: 450px;
	cursor: pointer;
}

#user-area .login,
#user-area .register {
	float: right;
	margin-top: 5px;
}

#user-area .login {
	background: url("../images/membership_bar/menu_div.png") no-repeat right top;
	padding-right: 8px;
	margin-right: 8px;
}

/*
When the dropdown-box is shown the user avatar has a 5 pixels white glow.
This works just in non-IE browsers.
*/
#user-area .user-pieces.open .avatar {
	box-shadow: 0 0 5px #ffffff;
}

/*
This is the clickable area for showing the dropdown-menu.
When clicked the script set in "scripts/user_top.js" (jquery has to be enabled) adds an "open" class to the corresponding div and an inline style "display: block" to the dropdown-box div (see HTML for reference).
*/
#user-area .user-pieces {
  cursor: pointer;
  position: absolute;
  right: -15px;
}

#user-area .dropdown {
  background: url("../images/membership_bar/main_buttons.png") no-repeat scroll -30px 2px transparent;
  float: right;
  height: 20px;
  width: 20px;
}

/*
These classes controls the arrow display status when the dropdown menu is open or closed.
The arrow image is a sprite, hence only the background position is changed.
*/
#user-area .user-pieces:hover .dropdown {
	background: url("../images/membership_bar/main_buttons.png") no-repeat -30px -23px;
}

#user-area .user-pieces.open .dropdown {
	background: url("../images/membership_bar/main_buttons.png") no-repeat -30px -23px;
}

#user-area .avatar {
	float: right;
	font-size: 12px;
	height: 23px;
	line-height: 23px;
	margin-right: 10px;
	text-align: right;
}

/*
The Member's user avatar image has a default with and height of 200 pixels.
This assure the correct resize of the image.
*/
#user-area .avatar img {
	height: 24px;
	width: 24px;
}

#user-area .mail {
	float: right;
	font-size: 12px;
	height: 23px;
	line-height: 23px;
	margin-right: 10px;
	text-align: right;
}

#user-area .unconfirmed {
	float: right;
	font-size: 12px;
	height: 23px;
	line-height: 23px;
	margin-right: 10px;
  margin-left: -5px;
	text-align: right;
  color: #999;
}

/*
This and the following classes are for the dropdown menu.
The default display parameter is set to "none" to hide the menu till the user clicks on the "user-pieces" area, then it is overridden by the "display: block" set inline by the script (see HTML for reference).
*/
#user-area .dropdown-box {
	display: none;
	background: url("../images/membership_bar/dropmenu_bg.png") repeat-x scroll right top transparent;
	font-size: 12px;
	padding: 11px 2px 2px;
	position: absolute;
	right: -14px;
	text-align: center;
	top: 31px;
	width: 150px;
}

/*
 * SRP - Specify link styles to avoid picking up defaults from main website style.
 */ 
#user-area a {
	color: #fff;
	font-size: 13px;
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight: normal;
}
#user-area a:hover {
	color: #c80000;
	text-decoration: none;
}

#user-area .dropdown-box .links a,
#user-area .dropdown-box .log-out a {
	display: block;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
}

#user-area .dropdown-box .log-out a {
	background: none repeat scroll 0 0 #151515;
	margin-top: 2px;
}

#user-area .dropdown-box .links a:hover {
	color: #fff;
	background: #222;
}