{
font-family : "'Bree Serif'";
font-style : normal;
font-weight : 400;
src : local('Bree Serif'), local('BreeSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/breeserif/v2/LQ7WLTaITDg4OSRuOZCpsy3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
}
}
#menu {
width : 950px;
margin : 0 auto;
z-index : 9;
}
#menu h3 {
font-size : 14px;
color : #fff;
padding : 5px;
margin : 0;
background : #000;
line-height : 20px;
}
#menu h5 {
font-size : 14px;
color : #fff;
padding : 5px;
margin : 0;
background : #000;
line-height : 20px;
}
#menu ul {
position : absolute;
margin : 0 auto;
list-style : none;
}
#menu ul li {
float : left;
margin : 0 0 0 10px;
font-size : 14px;
font-family : 'Bree Serif', serif;
line-height : 50px;
}
#menu ul li a {
color : #000;
text-decoration : none;
transition : all 0.5s ease-in-out;
}
#menu ul li a:hover {
color : #999;
}
#menu ul li img {
float : left;
width : 16px;
height : 16px;
margin : 14px 5px;
padding : 6px;
background : #999;
border-radius : 25px;
transition : all 0.5s ease-in-out;
}
#menu ul li:hover img {
background : #000;
}
#menu ul ul {
position : absolute;
top : -9999px;
background : #fff;
padding : 0;
margin : 0 0 0 -5px;
box-shadow : 0 10px 20px #888;
}
#menu ul ul:before {
position : absolute;
content : "";
width : 10px;
height : 10px;
top : -5px;
left : 5px;
background : #000;
transform : rotate(45deg);
}
#menu ul li:hover ul {
top : 45px;
}
#menu ul ul li {
float : none;
font-size : 14px;
padding : 5px 10px;
text-align : left;
text-transform : uppercase;
margin : 0;
border-bottom : 1px solid #ddd;
line-height : 20px;
transition : all 0.5s ease-in-out;
}
#menu ul ul a {
color : #333;
text-decoration : none;
}
#menu ul ul li.all {
font-size : 12px;
border-bottom : none;
text-transform : none;
}
#menu ul ul li:hover {
background : #333;
color : #fff;
}