.@{prefix}{

	&header{
		background: @color-primary;
	}
	&header, &header-light, &header-dark{
		position: relative;
		height: @header-pc-height;
		.@{prefix}logo{
			float: left;
			height: @header-pc-height;
			line-height: @header-pc-height;
			font-size: @font-size-lg;
			padding:0 @padding-vertical;
			

		}

		.@{prefix}header-dock-left, .@{prefix}header-dock-right{
			position: absolute;
			height: @header-pc-height;
			line-height: @header-pc-height;
			a, button{
				background: none;
				border: 0;
				min-width: @header-pc-height;
				color: lighten(@header-background, 60%);
				display: inline-block;
				float: left;
				height: @header-pc-height;
				line-height: @header-pc-height;
				padding: 0 @padding-horizon;

				&:hover{
					background: darken(@header-background, 5%)
				}
				i{
					font-size: @font-size-lg;
				}
			}
		}

		.@{prefix}header-dock-left{
			left:0;
			top:0;
		}

		.@{prefix}header-dock-right{
			right:0;
			top:0;
		}



		.@{prefix}header-nav{
			float: right;
			height: 100%;
			line-height: @header-pc-height;
			.nav-item{
				text-align: left;
				float:left;
				position: relative;

				.@{prefix}nav-button{
					height: @header-pc-height;
					line-height: @header-pc-height;
					padding-top:0;
					padding-bottom:0;
					//color: #999c9e;
					i{
						font-size: @font-size-lg;
						//color: @font-color-light;
					}

					.pic-icon{
						
					}
				}

				.@{prefix}nav-button-icon{
					position: relative;
					padding-left: @header-pc-height;

					.pic{
						width: 0.6*@header-pc-height;
						height: 0.6*@header-pc-height;
						border-radius: 0.3*@header-pc-height;
						position: absolute;
						left: 15px;
						top: 0.2*@header-pc-height;
					}
				}

				.tag{
					position: absolute;
					right:5px;
					top:5px;
					background: @color-highlight;
					color:#fff;
					padding:2px 5px;
					line-height: 1em;
					border-radius:10px;
				}
			}
		}
	}

	&header{
		.@{prefix}logo{
			 
		}

		.@{prefix}header-nav{
			 
			&>li{
				&>a{
					color:#fff;
				}
				.@{prefix}nav-button{
					 color:#fff;
				}
			}
		}
	}

	&header-light{
		border-bottom:1px @line-color solid;
		background: #fff;
		border-right: 1px @line-color solid;
		.@{prefix}logo{
			 
		}

		.@{prefix}header-dock-left, .@{prefix}header-dock-right{
			 
			a, button{
				 
				color: @font-color;
				 
				&:hover{
					background: none;
					color: @color-primary;
				}
			}
		}

		.@{prefix}header-nav{
			 
			li{
				 
				.@{prefix}nav-button{	
					 color: @font-color;
					 border:0;
					 border-left:1px @line-color solid;
					 background: none;
					 color: #999c9e;
					 &:hover{
					 	color:@color-primary;
					 }
				}
			}
		}

	 
	}

	&header-dark{
		//border-bottom:1px @line-color solid;
		background: #444;
		color:@line-color-light;
		//border-right: 1px @line-color solid;
		.@{prefix}logo{
			 
		}

		.@{prefix}header-dock-left, .@{prefix}header-dock-right{
			 
			a, button{
				 
				color:@line-color-light;
				 
				&:hover{
					background: none;
					color: #fff;
				}
			}
		}

		.@{prefix}header-nav{
			 
			li{
				 
				.@{prefix}nav-button{	
					 color:@line-color-light;
					 border:0;
					 //border-left:1px @line-color solid;
					 background: none;
					 &:hover{
					 	color: #fff;
					 }
				}
			}
		}
	}

	@-webkit-keyframes flash {
		from { color: #fff}
		to { color: @color-highlight}
	}

	@keyframes flash {
		from { color: #fff}
		to { color: @color-highlight}
	}


	&font-flash{
		color: @color-highlight;
		-webkit-animation: flash 0.9s infinite ease;
		animation: flash 0.9s infinite ease;	
	}

	
}