/**
 * **********************************************************************
 * 
 * common_header.css
 * 
 * Consoler
 * 
 * Common Style
 * 
 * @since 2016. 02. 01.
 * @author hotsourcesoft.com
 * 
 * Copyright (c) 2016 Consoler All rights reserved.
 * 
 * **********************************************************************
 */
.UIHeader {
	top:0;
	width:100%;
	
	text-align:center;
	
	border-bottom:1px solid #000000;
	box-shadow:0px 1px 3px #777777;
}



/**
 * **********************************************************************
 * 
 * Top : First-line
 * 
 * **********************************************************************
 */

	.UIHeader .ui_header_top {
		position:relative;
		
		width:1024px;
		min-width:640px;
		max-width:1024px;
		height:100px;
	}
		.UIHeader .ui_header_top .logo {
			position:absolute;
			left:0px;
			top:0px;
			
			width:240px;
			height:100px;
			
			background-repeat:no-repeat;
		    background-position:center; 
		    background-size:contain;
		    
			background-image:url("/images/logo/consoler_logo.png");
		}
		
		
		.UIHeader .ui_header_top .top_banner_container {
			width:728px;
			height:90px;
			float:right;
		}
		.UIHeader .ui_header_top .top_banner {
			width:728px;
			height:90px;
			margin-top:5px;
			text-align:center;
			font-size:0.8em;
		}
		
		
		


/**
 * **********************************************************************
 * 
 * Navigation : Second-line
 * 
 * **********************************************************************
 */
		
	.UIHeader .ui_header_navigation_background {
		width:100%;
		text-align:center;
		
		background: #56a7d3; /* Old browsers */
		background: -moz-linear-gradient(top, #56a7d3 0%, #b4e0ed 3%, #52a2d3 6%, #294c84 95%, #15366d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56a7d3), color-stop(3%,#b4e0ed), color-stop(6%,#52a2d3), color-stop(95%,#294c84), color-stop(100%,#15366d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #56a7d3 0%,#b4e0ed 3%,#52a2d3 6%,#294c84 95%,#15366d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #56a7d3 0%,#b4e0ed 3%,#52a2d3 6%,#294c84 95%,#15366d 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #56a7d3 0%,#b4e0ed 3%,#52a2d3 6%,#294c84 95%,#15366d 100%); /* IE10+ */
		background: linear-gradient(to bottom, #56a7d3 0%,#b4e0ed 3%,#52a2d3 6%,#294c84 95%,#15366d 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56a7d3', endColorstr='#15366d',GradientType=0 ); /* IE6-9 */
	}
	.UIHeader .ui_header_navigation {
		position:relative;
		width:100%;
		min-width:640px;
		max-width:1024px;
		padding-top:10px;
		padding-bottom:12px;
		text-align:center;
	}
		.UIHeader .ui_header_navigation .navigation_item,
		.UIHeader .ui_header_navigation .navigation_item a {
			
			display:inline-block;
			
			padding-left:8px;
			padding-right:8px;
			
			color:#FFFFFF;
			color:rgba(255, 255, 255, 1.0);
			
			font-size:14px;
			font-weight:bold;
			
			text-shadow:0px 1px 7px #111111;
			
			text-decoration:none;
		}


/**
 * User
 */
.UserBoxContainer {
	position:absolute;
	top:8px;
	display:inline-block;
	width:28px;
	height:28px;
	
	color:#FFFFFF;
	color:rgba(255, 255, 255, 1.0);
}
.UserIcon {
	width:100%;
	height:100%;
	
	background-image:url("/images/user/user_icon.png");
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	
	cursor:pointer;
}

.UserBox {
	position:absolute;
	z-index:999;
	min-width:150px;
	right:0px;
	top:30px;
	
	border-radius:7px;
	border:2px solid #503787;
	box-sizing:border-box;
	box-shadow:0px 2px 5px #778899;
	box-shadow:0px 2px 5px rgba(0,0,0, 0.5);
	
	background:#FFFFFF;
	background:rgba(255, 255, 255, 0.95);
	
	display:none;
}
	.UserBox .Context {
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		padding:10px;
		padding-left:15px;
		padding-right:15px;
		
		font-size:10pt;
		font-weight:bold;
		color:#FFFFFF;
		text-shadow:0px 1px 3px #100030;
		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcc8b5+0,f77e80+10,553c8c+100 */
		background: #fcc8b5; /* Old browsers */
		background: -moz-linear-gradient(top, #fcc8b5 0%, #f77e80 10%, #553c8c 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #fcc8b5 0%,#f77e80 10%,#553c8c 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #fcc8b5 0%,#f77e80 10%,#553c8c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc8b5', endColorstr='#553c8c',GradientType=0 ); /* IE6-9 */
	}
	.UserBox .Item {
		width:100%;
		padding:5px;
		font-size:10pt;
		border-top:1px solid #4c2c7c;
		box-sizing:border-box;
	}
	.UserBox .Item a {
		width:95%;
		width:calc(100% - 16px);
		text-decoration:none;
	}
		.UserBox .Item .Link {
			width:100%;
			padding-top:3px;
			padding-bottom:3px;
			
			color:#115599;
			
			text-shadow:none;
		}