@import "mixins.less";

//----------------------------------------
// 재설정
//----------------------------------------

// color
@white     : #fafafa;
@gray      : #444;
@blue      : #04acec;


// gradient
@startColor: @gray;
@endColor  : darken(@gray, 20%);

@blueStart : @blue;
@blueEnd   : darken(@blue, 10%); 


//----------------------------------------
// border-radius
//----------------------------------------
@radius : 6px;


//----------------------------------------
// box-shadow
//----------------------------------------
@string : 0 1px 1px lighten(@gray, 20%), 0 1px 0 lighten(@gray, 11%) inset;
@string1 : 0 1px 0 darken(@gray, 20%), 0 2px 0 lighten(@gray, 11%);


//----------------------------------------
// transition
//----------------------------------------
@transition : all .2s ease-in-out;


body{
	background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF3d3d////riJKgAAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR42mJgBAEGGMmAxAYCgAADAAGGABmnk/7aAAAAAElFTkSuQmCC);
	font: 13px 'trebuchet MS', Arial, Helvetica;
}

h2, p {
	text-align: center;
	color: @startColor;
	text-shadow: 0 1px 0 @white;	
}

a {
	color: #2A679F;
}

/* You don't need the above styles, they are demo-specific ----------- */



#menu {
	padding: 0;
	list-style: none;
	width: 960px;
	margin: 60px auto;
	border: 1px solid darken(@gray, 10%);
	.gradient (@startColor, @endColor);
    .border-radius (@radius);
    .box-shadow (@string);
	zoom:1;

	&:before {
		content: "";
		display: table;
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}

	li {
		float: left;
		border-right: 1px solid darken(@gray, 10%);
		-moz-box-shadow: 1px 0 0 @startColor;
		-webkit-box-shadow: 1px 0 0 @startColor;
		box-shadow: 1px 0 0 @startColor;
		position: relative;

		&:hover {
			> a {
				color: @white;
			}
			> ul {
				opacity: 1;
				visibility: visible;
				margin: 0;
			}
		}

		a {
			float: left;
			padding: 12px 30px;
			color: lighten(@gray, 33%);
			text-transform: uppercase;
			font: bold 12px Arial, Helvetica;
			text-decoration: none;
			text-shadow: 0 1px 0 #000;
		} // #menu li a

		ul { // #menu li ul 
			padding: 0;
			list-style: none;
			margin: 20px 0 0 0;
			_margin: 0; //IE6 only
			opacity: 0;
			visibility: hidden;
			position: absolute;
			top: 38px;
			left: 0;
			z-index: 1;    
			.gradient (@startColor, @endColor);
            .box-shadow (0 -1px rgba(255,255,255,.3));
            .border-radius (3px);
            .transition (@transition);

			li { // #menu li ul li
				float: none;
				display: block;
				border: 0;
				_line-height: 0; //IE6 only
				.box-shadow (@string1);

				&:last-child { // #menu ul li:last-child
					.box-shadow (none);

					> a { // #menu ul li:last-child > a
						.border-radius (0 0 3px 3px);
					}
				} // #menu ul li:last-child

				&:first-child { 
					> a { // #menu ul li:first-child > a
						.border-radius (3px 3px 0 0);

						&:after { // #menu ul li:first-child > a:after
							content: '';
							position: absolute;
							left: 40px;
							top: -6px;
							border-left: 6px solid transparent;
							border-right: 6px solid transparent;
							border-bottom: 6px solid @startColor;
						} // #menu ul li:first-child > a:after
					} // #menu ul li:first-child > a
					a {
						&:hover {
							&:after { // #menu ul li:first-child a:hover:after
								border-bottom-color: @blue; 
							} // #menu ul li:first-child a:hover:after
						}
					}
				}

				a { // #menu ul a
					padding: 10px;
					width: 130px;
					_height: 10px; //IE6 only
					display: block;
					white-space: nowrap;
					float: none;
					text-transform: none;

					&:hover { // #menu ul a:hover
						.gradient (@blueStart, @blueEnd);
					} 
				} // #menu ul a

				ul { // #menu li ul li ul
					top: 0;
					left: 150px;
					margin: 0 0 0 20px;
					_margin: 0; //IE6 only
					.box-shadow (-1px 0 0 rgba(255,255,255,.3));

					li { // #menu li ul li ul li
						&:first-child {
							a {
								&:after { // #menu ul ul li:first-child a:after
									left: -6px;
									top: 50%;
									margin-top: -6px;
									border-left: 0;	
									border-bottom: 6px solid transparent;
									border-top: 6px solid transparent;
									border-right: 6px solid darken(@gray, 4%);
								} // #menu ul ul li:first-child a:after
								&:hover {
									&:after { // #menu ul ul li:first-child a:hover:after
										border-right-color: desaturate(@blue, 20%); 
										border-bottom-color: transparent;
									} // #menu ul ul li:first-child a:hover:after
								}
							}
						}
					} // #menu li ul li ul li
				} // #menu li ul li ul
			} // #menu li ul li
		} // #menu li ul 
	} // #menu li
}

*html #menu li a:hover { /* IE6 only */
	color: @white;
}



/* Mobile */
#menu-trigger {
	display: none;
}

@media screen and (max-width: 600px) {

	/* nav-wrap */
	#menu-wrap {
		position: relative;
		* {
			.box-sizing ();
		}
	}


	/* menu icon */
	#menu-trigger {
		display: block; /* show menu icon */
		height: 40px;
		line-height: 40px;
		cursor: pointer;		
		padding: 0 0 0 35px;
		border: 1px solid darken(@gray, 10%);
		color: @white;
		font-weight: bold;
		background-color: @endColor;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(@startColor, @endColor); 
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(@startColor, @endColor);	
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(@startColor, @endColor);
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(@startColor, @endColor);
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(@startColor, @endColor);
		.border-radius (@radius);
        .box-shadow (@string);
	}
	
	/* main nav */
	#menu {
		margin: 0; 
		padding: 10px;
		position: absolute;
		top: 40px;
		width: 100%;
		z-index: 1;
		background-color: @startColor;
		display: none;
		.box-shadow (none);

		&:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid @startColor;
		}
		li {
			position: static;
			display: block;
			float: none;
			border: 0;
			margin: 5px;
			.box-shadow (none);

			a { // #menu a
				display: block;
				float: none;
				padding: 0;
				color: lighten(@gray, 33%);

				&:hover { // #menu a:hover
					color: @white;
				}
			} // #menu a

			ul { // #menu ul
				position: static;
				visibility: visible;
				opacity: 1;
				margin: 0;
				background: none;
				.box-shadow (none);

				li { // #menu ul li
					margin-left: 20px;
					.box-shadow (none);

					&:first-child {
						a {
							&:after { // #menu ul li:first-child a:after
								border: 0;
							}
						}
					}

					a { // #menu ul a
						padding: 0;
						width: auto;

						&:hover { // #menu ul a:hover
							background: none;
						}

					} // #menu ul a

					ul { // #menu ul ul
						margin: 0 0 0 20px !important;
						.box-shadow (none);

						li:first-child a:after { // #menu ul ul li:first-child a:after
							border: 0;
						} // #menu ul ul li:first-child a:after

					} // #menu ul ul

				} // #menu ul li	
			} // #menu ul
		} // #menu li
	}
}

@media screen and (min-width: 600px) {
	#menu {
		display: block !important;
	}
}	

/* iPad */
.no-transition {
	.transition (none);
	opacity: 1;
	visibility: visible;
	display: none;  		
}

#menu li:hover > .no-transition {
	display: block;
}