/* main header */

#main_header
{
	box-shadow: 0px 2px 2px #bbb;
	min-width: 335px !important;
}

/* Top Menu */

div.top_menu
{
	position:relative;
	min-width:290px;
	max-height:46px;
	overflow:hidden;
	border-bottom:1px solid #6c6c6c;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

div.top_menu ul
{
	list-style:none;
	width:calc(100%-100px);
	height:46px;
	margin:0;
	padding:0;
}

div.top_menu ul li
{
	float:left;
}

div.top_menu ul li.logo,
div.top_menu ul li.logo:hover
{
	width:70px;
	text-align:center;
	cursor:default;
	border-right:1px solid #6c6c6c;
}

div.top_menu ul li.logo img
{
	margin-top:0px;
}

div.top_menu ul li.mod_tab
{
	display:inline;
	height:46px;
	text-align:center;
	border-right:1px solid #6c6c6c;
	cursor:pointer;
	overflow:hidden;
	box-sizing:border-box;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6d6d6+0,b7b7b7+100 */
	background: #d6d6d6; /* Old browsers */
	background: -moz-linear-gradient(top, #d6d6d6 0%, #b7b7b7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#b7b7b7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #d6d6d6 0%,#b7b7b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#b7b7b7',GradientType=0 ); /* IE6-9 */
}

div.top_menu ul li.mod_tab a
{
	display:block;
}

div.top_menu ul li.mod_tab span
{
	text-shadow:1px 1px 4px #333;
	font-size:14px;
	font-weight:bold;
	line-height:45px;
	color:#fff;
	text-decoration:none;
}

div.top_menu ul li.mod_tab:hover,
#userinfo:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b9bce+0,4ba4e3+100 */
	background: #4b9bce; /* Old browsers */
	background: -moz-linear-gradient(top, #4b9bce 0%, #4ba4e3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4b9bce 0%,#4ba4e3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4b9bce 0%,#4ba4e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b9bce', endColorstr='#4ba4e3',GradientType=0 ); /* IE6-9 */
}

div.top_menu ul li.logo,
div.top_menu ul li.logo:hover
{
	width:70px;
	text-align:center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6d6d6+0,b7b7b7+100 */
	background: #d6d6d6; /* Old browsers */
	background: -moz-linear-gradient(top, #d6d6d6 0%, #b7b7b7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#b7b7b7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #d6d6d6 0%,#b7b7b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#b7b7b7',GradientType=0 ); /* IE6-9 */
}

div.top_menu ul li.mod_tab.current
{
	position:relative;
	color:#fff;
	font-weight:bold;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b9acd+0,469adb+44,3e87d2+100 */
	background: #4b9acd; /* Old browsers */
	background: -moz-linear-gradient(top,  #4b9acd 0%, #469adb 44%, #3e87d2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #4b9acd 0%,#469adb 44%,#3e87d2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #4b9acd 0%,#469adb 44%,#3e87d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b9acd', endColorstr='#3e87d2',GradientType=0 ); /* IE6-9 */
}

div.top_menu ul li.mod_tab.current:after
{
	position:absolute;
	bottom:-2px;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	color:#fff;
	font-family: FontAwesome;
	font-size:12px;
	content:"\f077";
}

div.top_menu_rd ul li.mod_tab
{
	height:23px !important;
	display:inline !important;
	line-height:21px !important;
	border-bottom:1px solid #6C6C6C;
}
div.top_menu_rd ul li.mod_tab.current:after
{
	display:none;
}
div.top_menu_rd ul li.mod_tab span
{
	font-size:12px;
	line-height:21px !important;
}

/* system messages button / globalsearch button /  userinfo / logout */

#sysmsgsbtn
{
	position:absolute;
	top:0px;
	right:150px;
	width:50px;
	height:46px;
	text-align:center;
	border-left: 1px solid #6c6c6c;
	border-right: 1px solid #6c6c6c;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6d6d6+0,b7b7b7+100 */
	background: #d6d6d6; /* Old browsers */
	background: -moz-linear-gradient(top, #d6d6d6 0%, #b7b7b7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#b7b7b7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #d6d6d6 0%,#b7b7b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#b7b7b7',GradientType=0 ); /* IE6-9 */
}

#sysmsgsbtn:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b9bce+0,4ba4e3+100 */
	background: #4b9bce; /* Old browsers */
	background: -moz-linear-gradient(top, #4b9bce 0%, #4ba4e3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4b9bce 0%,#4ba4e3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4b9bce 0%,#4ba4e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b9bce', endColorstr='#4ba4e3',GradientType=0 ); /* IE6-9 */
}

#sysmsgsbtn a
{
	display:block;
	width:100%;
	height:46px;
}

#sysmsgsbtn a span
{
	font-size:24px;
	line-height:42px;
}

#sysmsgsbtn:hover a span,
#sysmsgsbtn:hover.has_messages a span
{
	color:#fff;
}

#sysmsgsbtn.has_messages a span
{
	color:#408cd4;
}

#sysmsgsbtn sup
{
	position:absolute;
	top:1px;
	right:3px;
	color:#ff0000;
	font-size:10px;
	font-weight:bold;
}

#sysmsgsbtn:hover sup
{
	color:#fff;
	cursor:pointer;
}

#gsbtn
{
	position:absolute;
	top:0px;
	right:100px;
	width:50px;
	height:46px;
	text-align:center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6d6d6+0,b7b7b7+100 */
	background: #d6d6d6; /* Old browsers */
	background: -moz-linear-gradient(top, #d6d6d6 0%, #b7b7b7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#b7b7b7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #d6d6d6 0%,#b7b7b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#b7b7b7',GradientType=0 ); /* IE6-9 */
}

#gsbtn:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b9bce+0,4ba4e3+100 */
	background: #4b9bce; /* Old browsers */
	background: -moz-linear-gradient(top, #4b9bce 0%, #4ba4e3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4b9bce 0%,#4ba4e3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4b9bce 0%,#4ba4e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b9bce', endColorstr='#4ba4e3',GradientType=0 ); /* IE6-9 */
}

#gsbtn a
{
	display:block;
	width:100%;
	height:46px;
}

#gsbtn a span
{
	font-size:24px;
	line-height:42px;
}

#gsbtn:hover a span
{
	color:#fff;
}

#userinfo,
#logout
{
	position:absolute;
	right:0px;
	color:#fff;
	width:100px;
	height:22px;
	font-size:12px;
	line-height:20px;
	overflow:hidden;
	text-align:center;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
}

#logout
{
	cursor:pointer;
}

#userinfo
{
	top:0px;
	height:23px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b9acd+0,469adb+44,3e87d2+100 */
	background: #4b9acd; /* Old browsers */
	background: -moz-linear-gradient(top,  #4b9acd 0%, #469adb 44%, #3e87d2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #4b9acd 0%,#469adb 44%,#3e87d2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #4b9acd 0%,#469adb 44%,#3e87d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b9acd', endColorstr='#3e87d2',GradientType=0 ); /* IE6-9 */
}

#userinfo:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
	background: #499bea; /* Old browsers */
	background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
}

#userinfo i:before
{
	position:absolute;
	top:4px;
	left:10px;
}

#userinfo span
{
	margin-left:8px;
}

#logout
{
	top:24px;
	text-align:left;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9b9b9b+1,707070+100 */
	background: #9b9b9b; /* Old browsers */
	background: -moz-linear-gradient(top, #9b9b9b 1%, #707070 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #9b9b9b 1%,#707070 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #9b9b9b 1%,#707070 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b9b9b', endColorstr='#707070',GradientType=0 ); /* IE6-9 */
}

#logout span
{
	color:#fff;
	margin-left:30px;
}

#logout:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,cc0000+100;Red+Flat */
	background: #cc0000; /* Old browsers */
	background: -moz-linear-gradient(top, #cc0000 0%, #cc0000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #cc0000 0%,#cc0000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #cc0000 0%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */
}

#logout i:before
{
	position:absolute;
	top:4px;
	left:10px;
}

#logout span
{
	margin-right:-16px;
}

/* hbmenu */

.hbmenubtn
{
	display:none;
	position:absolute;
	top:0px;
	right:30px;
	font-size:24px;
	padding:8px 15px 8px 15px;
}

#hbmenu
{
	position:absolute;
	top:33px;
	left:30px;
	width:70%;
	list-style:none;
}

#hbmenu li
{
	float:left;
	min-width:120px !important;
	height:45px;
	text-align:center;
	border:1px solid #6c6c6c;
	background: #bbb;
	cursor:pointer;
}

#hbmenu li a
{
	display:block;
	transition: all 0.2s linear;
}

#hbmenu li span
{
	text-shadow:1px 1px 4px #333;
	font-size:14px;
	font-weight:bold;
	line-height:46px;
	color:#fff;
	text-decoration:none;
	transition: all 0.2s linear;
}

#hbmenu li:hover, ul.popup_menu li:hover,
.hbmenubtn:hover
{
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4b9bce+0,4ba4e3+100 */
	background: #4b9bce; /* Old browsers */
	background: -moz-linear-gradient(top, #4b9bce 0%, #4ba4e3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4b9bce 0%,#4ba4e3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4b9bce 0%,#4ba4e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b9bce', endColorstr='#4ba4e3',GradientType=0 ); /* IE6-9 */
}

#hbmenu li.logout
{
	position:relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9b9b9b+1,707070+100 */
	background: #9b9b9b; /* Old browsers */
	background: -moz-linear-gradient(top, #9b9b9b 1%, #707070 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #9b9b9b 1%,#707070 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #9b9b9b 1%,#707070 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b9b9b', endColorstr='#707070',GradientType=0 ); /* IE6-9 */
}

#hbmenu li.logout:hover
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,cc0000+100;Red+Flat */
	background: #cc0000; /* Old browsers */
	background: -moz-linear-gradient(top, #cc0000 0%, #cc0000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #cc0000 0%,#cc0000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #cc0000 0%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */
}

#hbmenu li.logout img
{
	top:33%;
	width:7px;
	height:8px;
}

#hbmenu
{
	display:none;
}

/* media queries */

@media screen and (max-width: 1050px) {
	#userinfo,
	#logout
	{
		width:30px !important;
	}
	#userinfo span,
	#logout span
	{
		display:none;
	}
	#sysmsgsbtn
	{
		right:80px;
	}
	#gsbtn
	{
		right:30px;
	}
}

@media screen and (max-width: 680px) {
	body{
		margin-top:55px;
	}
	#main_header{
		position:fixed;
		top:0;
		z-index:99999;
		width:100%;
		margin:0;
		padding:0;
	}
	div.top_menu ul li.logo
	{
		display:inline;
	}
	div.top_menu ul li.mod_tab,
	div.top_menu_rd ul li.mod_tab
	{
		display:none !important;
	}
	div.top_menu ul li.current,
	div.top_menu_rd ul li.current
	{
		display:inline !important;
		height:46px !important;
		line-height:42px !important;
		min-width:120px;
		width:120px;
	}
	div.top_menu ul li.current:after,
	div.top_menu_rd ul li.current:after
	{
		display:inline !important;
		top:19px;
	}
	div.top_menu ul li.current span
	div.top_menu_rd ul li.current span
	{
		font-size:16px;
		font-weight:bold;
	}
	#sysmsgsbtn
	{
		right:130px;
		border:0;
		background: transparent;
	}
	#gsbtn
	{
		right:80px;
		background: transparent;
	}
	.hbmenubtn
	{
		display:inline;
	}
	#hbmenu
	{
		display:inline !important;
		position:fixed;
	}
	#vendor
	{
		position:static !important;
		margin-top:20px;
	}
}

@media screen and (max-width: 400px) {
	#sysmsgsbtn
	{
		width:32px;
		right:112px;
		background: transparent;
	}
	#sysmsgsbtn sup
	{
		top:5px;
	}
	#gsbtn
	{
		width:32px;
		right:80px;
		background: transparent;
	}
	#sysmsgsbtn a span,
	#gsbtn a span
	{
		font-size:16px;
	}
}