#logo-mini {
    float: left;
    background: url(../images/logo-mini.png);
    width: 121px; height: 21px;
    margin-top: 7px;
    margin-left: 30px;
    cursor: pointer;
}

#header {
	position: fixed;
    width: 100%;
    height: 34px;
    text-align:center;  
	background: rgba(255,255,255, 0.9);
	background:#fff;
    z-index: 102000;
    min-width: 1000px;

    top: 0;
    
    .space {
        width: 30px;
        height: 34px;
    }
    .sep {
    	width: 1px;
    	background: #000;
    	height: 13px;
    	margin: 10px 14px 0 15px;
    }
    .rm {
        list-style:none;
        margin-left: 7%;
        float: left;
        
        li {
			display:inline;
            color: #fff;
            float: left;
            margin: 0 14px;
            
            a, span {
                font-size:10px;
                text-transform:uppercase;
                color:#000;
                padding:0px 13px 0px 13px;
                text-decoration:none;
                line-height: 36px;
                
                &.ico {
                	padding-right: 25px;
                }
                &.shuffle {
                	width: 18px;
                	height: 13px;
                	background: url(../images/ui/menu/shuffle.png) no-repeat left center;
                }
                &.shuffle:hover {
                	background: url(../images/ui/menu/shuffle.png) no-repeat -26px center;
                }
            }
            a:Hover {
                color: #D00;
            }
            img {
                float: left;
            }
            .active {
                color: #000;
                border: 1px solid #000;
                padding: 0 12px 0 12px;
            }
        }
    }
    
    .ico-fm {
    	background: url(../images/ui/menu/radio.gif) no-repeat right center;
    }
    .ico-play {
    	background: url(../images/ui/menu/ico-play.png) no-repeat left center;
    	cursor: pointer;
    	padding-right: 0px !important;
    }
    .ico-pause {
    	background: url(../images/ui/menu/ico-pause.png) no-repeat left center;
    	cursor: pointer;
    	padding-right: 0px !important;
    }
}

#header .rm {
    margin-left: 0px;
    margin-right: 30px;
    float: right;
    li {
    	margin: 0;
    }
}
#filter {
	float: left;
	margin-left: 30px;
    height: 34px;
    text-align:center;
    z-index: 101;
    
    ul.articles {
        list-style:none;
        float: left;
        margin: 6px 0 0 30px;

        
        li {
            display: inline;
            color: #000;
            float: left;
			margin: 0 17px 0 0px;
			
            a {
                float: left;
                width: 22px; height: 22px;
                text-decoration: none;
                padding: 0;
                
                .tooltip {
                	position: absolute;
                	background: #fff;
                	width: 90px;
                	margin: 28px 0 0 -34px;
                	padding-top: 4px;
                	padding-bottom: 4px;
                	font-family: CirceRegular;
                	font-size: 8px;
                	letter-spacing: 1px;
                	text-transform: uppercase;
                	display: none;
                	-moz-border-radius-topleft: 0px;
                	-moz-border-radius-topright: 0px;
                	-moz-border-radius-bottomright: 4px;
                	-moz-border-radius-bottomleft: 4px;
                	-webkit-border-radius: 0px 0px 4px 4px;
                	border-radius: 0px 0px 4px 4px;
                }
            }
            a:hover, .active:hover {
            	.tooltip {
            		display: block;
            		color: #000;
            	}
            }
            .active {
            	.tooltip {
            		color: #f00 !important;
            	}
            }
        }
    }
    
    .article {
		display: none;
    }
    .blogs {
    	width: 400px;
    	height: 22px;
    	padding-left: 228px;
    	margin: 7px 0 0 7%;
    	display: none;
    }
    
    .select {
    	float: left;
    	width: 200px;
    	height: 20px;
    	line-height: 20px;
		font-size: 10px;
		text-transform: uppercase;
    	border: 1px solid #f00;
    	
    	.arrow {
    		float:right;
    		width: 20px;
    		height: 20px;
    		background: url(../images/ui/menu/arrow-down.png) no-repeat center center;
    		border-left: 1px solid #f00;
    	}
    	.select-list {
    		width: 200px;
    		background: rgba(255,255,255, 0.9);
    		position: absolute;
    		z-index: 100;
    		margin-left: -1px;
    		display: none;
    		border: 1px solid #f00;
    		
    		ul {
    			list-style: none;
    		}
    		li a {
    			height: 20px;
    			color: #000;
    			line-height: 20px;
    			width: 100px;
    			text-decoration: none;
    		}
    		li:hover {
    			background: #eee;
    			color: #fff;
    		}
    	}
    }
    .select:Hover {
    	cursor: pointer;
    }
    
}

#filter {
	.ico-art 		{background: url('../images/ui/icons/icons.png') 0px 0px;}
	.ico-cinema 	{background: url('../images/ui/icons/icons.png') -22px 0px;}
	.ico-music 		{background: url('../images/ui/icons/icons.png') -44px 0px;}
	.ico-theatre 	{background: url('../images/ui/icons/icons.png') -66px 0px;}
	.ico-literature {background: url('../images/ui/icons/icons.png') -88px 0px;}
	.ico-sex		{background: url('../images/ui/icons/icons.png') -110px 0px;}
	.ico-kids 		{background: url('../images/ui/icons/icons.png') -132px 0px;}
	.ico-education 	{background: url('../images/ui/icons/icons.png') -154px 0px;}
	.ico-society 	{background: url('../images/ui/icons/icons.png') -176px 0px;}
	.ico-media 		{background: url('../images/ui/icons/icons.png') -198px 0px;}
	.ico-technology {background: url('../images/ui/icons/icons.png') -220px 0px;}
	.ico-science 	{background: url('../images/ui/icons/icons.png') -242px 0px;}
	.ico-sport 		{background: url('../images/ui/icons/icons.png') -264px 0px;}
	.ico-fashion 	{background: url('../images/ui/icons/icons.png') -286px 0px;}
	.ico-television {background: url('../images/ui/icons/icons.png') -308px 0px;}
	.ico-guide 		{background: url('../images/ui/icons/icons.png') -330px 0px;}
	
	.active {
		&.ico-art 		{background: url('../images/ui/icons/icons.png') 0px -22px;}
		&.ico-cinema 	{background: url('../images/ui/icons/icons.png') -22px -22px;}
		&.ico-music 	{background: url('../images/ui/icons/icons.png') -44px -22px;}
		&.ico-theatre 	{background: url('../images/ui/icons/icons.png') -66px -22px;}
		&.ico-literature{background: url('../images/ui/icons/icons.png') -88px -22px;}
		&.ico-sex		{background: url('../images/ui/icons/icons.png') -110px -22px;}
		&.ico-kids 		{background: url('../images/ui/icons/icons.png') -132px -22px;}
		&.ico-education {background: url('../images/ui/icons/icons.png') -154px -22px;}
		&.ico-society 	{background: url('../images/ui/icons/icons.png') -176px -22px;}
		&.ico-media 	{background: url('../images/ui/icons/icons.png') -198px -22px;}
		&.ico-technology{background: url('../images/ui/icons/icons.png') -220px -22px;}
		&.ico-science 	{background: url('../images/ui/icons/icons.png') -242px -22px;}
		&.ico-sport 	{background: url('../images/ui/icons/icons.png') -264px -22px;}
		&.ico-fashion 	{background: url('../images/ui/icons/icons.png') -286px -22px;}
		&.ico-television{background: url('../images/ui/icons/icons.png') -308px -22px;}
		&.ico-guide 	{background: url('../images/ui/icons/icons.png') -330px -22px;}
	}
}