/*

HOW TO CREATE A CSS3 DROPDOWN MENU [TUTORIAL]

"How to create a CSS3 Dropdown Menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com
http://vladimirkudinov.com

*/

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* Menu */
.menu {	
	height: 50px;
	width: 880px;

/*
	background: #ffffff;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
*/
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 25px;
	border-left: 0px solid #005b91;
	/*border: 1px solid #005b91;*/
	
}

/* Links */

.menu li a {
	display: block;
	padding: 0 13px;
	margin: 4px 0;
	line-height: 16px;
	text-decoration: none;
	
	/*border-left: 1px solid #b2b2b1; 		*/	
	/*border-right: 1px solid #b2b2b1;		*/

	/*font-family: 나눔고딕, 돋움, 굴림, Verdana, Helvetica, Arial, sans-serif;*/
	font-weight: 600;
	letter-spacing:0;
	font-size: 16px;

	color: #333333; /*  큰메뉴 색깔  */
	/*text-shadow: 1px 1px 1px rgba(0,0,0,.6); */

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #00b2ec; }	/* 상위메뉴롤오버 */

/* Sub Menu */

.menu ul {
	position: absolute;
	top: 30px;		/* 하위메뉴 출발위치 */
	left: 0;

	opacity:0;
	
	background: #005bd8; /* 서브배경색 */

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
/*
	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
 */
}

/*.menu li:hover > ul { opacity: .80; }  서브배경투명도 */

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;
	border-left: none;

	
/*	
	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
 */
}

/*
.menu li:hover > ul li {
	height: 34px;
	overflow: visible;
	padding: 0 21;
}
 */
.menu ul li:hover > a { color:#f5e70d;}   /* 하위메뉴롤오버 */

.menu ul li a {
	width: 120px;		/* 하위메뉴배경크기 세로 크기는 자바스크립트에서 수정 */
	padding: 5px 0 5px 0;
	margin: 0;
	line-height: 20px;


	

	border: none;
	/*border-bottom: 1px solid #cccccc;*/
	
	/*font-family: 나눔고딕, 돋움, 굴림, Verdana, Helvetica, Arial, sans-serif;*/
	/*font-weight: normal; */
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0,0,0,.1);

	text-align:center;
}

.menu ul li:first-child 	{padding:9px 0 0 0; background:url('../img/main/main_top_menu_top.jpg') no-repeat center 0px;}
.menu ul li 				{border-bottom: 1px solid #5290e5;}
.menu ul li:last-child 		{border-bottom: 0px solid #5290e5;}

/* 하위메뉴출발위치 좌우 */
.menu > li:nth-child(1) ul	{left: -15px;}
.menu > li:nth-child(2) ul	{left: -15px; }
.menu > li:nth-child(3) ul	{left: -15px;}
.menu > li:nth-child(4) ul	{left: -15px;}
.menu > li:nth-child(5) ul	{left: -15px;}
.menu > li:nth-child(6) ul	{left: -10px;}

/* 하위메뉴배경크기 */

.menu > li:nth-child(2) ul li a {width: 210px;}
.menu > li:nth-child(3) ul li a {width: 250px;}



/* Icons */

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }