﻿#menu, #menu ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	height: 30px;
	background: #ddd;
	border-bottom: 1px solid #fff;
    z-index: 1000;
}
#menu {padding-left:20px; width:100%}/*680px*/
#menu li.first {border-left:1px solid #fff;}
#menu table
{
	border-collapse: collapse;
	width: 0;
	height: 0;
	padding: 0;
	margin: -1px;
}
#menu ul {position:absolute; left:-9999px;}
#menu li {float:left; border-right:1px solid #fff;}
#menu li a
{
	white-space: nowrap;
	background: #ddd;
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	font-family: georgia, serif;
	font-size: 15px;
	text-decoration: none;
	color: #000;
	padding: 0 18px 0 6px;
}
#menu ul li a
{
    width:180px;
}
#menu li a.drop {background:#ddd url(down.gif) no-repeat right center;}
#menu li a:hover {position:relative; color:#069; background-color:#ccc;}
#menu li:hover {position:relative;}
#menu li:hover > a {color:#080;}

#menu :hover ul
{
	left: -1px;
	top: 30px;
	width: 120px;
	background: url(trans.gif);
	padding-top: 1px;
	border-bottom: 0;
}
#menu :hover ul li a
{
	border-left: 1px solid #fff;
	height: 20px;
	line-height: 20px;
	/*width: 120px;*/
	border-bottom: 1px solid #fff;
	font-size: 12px;
}
#menu :hover ul li a.right {background:#ddd url(right.gif) no-repeat 135px center;}

#menu :hover ul ul {left:-9999px; padding-top:0;}
#menu :hover ul li.fly a:hover
{
	padding-left: 161px;
	border-bottom-color: #000;
	background: #ccc url(down.gif) no-repeat right center;
}
#menu :hover ul li.fly:hover > a
{
	padding-left: 160px;
	border-bottom-color: #000;
	background: #ccc url(down.gif) no-repeat right center;
}
#menu :hover ul :hover ul {left:150px; top:21px;}
#menu :hover ul :hover ul ul {left:-9999px;}

#menu :hover ul :hover ul li a:hover
{
	padding-left: 5px;
	border-color: #fff;
	background: #ccc;
}
#menu :hover ul :hover ul li.fly a:hover
{
	padding-left: 161px;
	border-bottom-color: #000;
	background: #ccc url(down.gif) no-repeat right center;
}
#menu :hover ul :hover ul li.fly:hover > a
{
	padding-left: 160px;
	border-bottom-color: #000;
	background: #ccc url(down.gif) no-repeat right center;
}

#menu :hover ul :hover ul :hover ul {left:150px;}
#menu :hover ul :hover ul :hover ul li a:hover
{
	padding-left: 10px;
	border-color: #fff;
	background: #ccc;
}

/* Notification Badge*/

/* Create the blue navigation bar */
.navbar {
    background-color: #3b5998;
    font-size: 22px;
    padding: 5px 10px;
}

/* Define how each icon button should look like */
.button {
    color: white;
    display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
    position: relative; /* All 'absolute'ly positioned elements are relative to this one */
    padding: 2px 5px; /* Add some padding so it looks nice */
}

/* Make the badge float in the top right corner of the button */
.button__badge {
    background-color: #fa3e3e;
    border-radius: 2px;
    color: white;
    padding: 1px 3px;
    font-size: 10px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: 0;
    right: 0;
}

/* Notification Badge*/