﻿/* all menu links */
a {
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

#nav{
	display:block;
	position: absolute;
	list-style:none;
	margin:0;
	width:90px;
	z-index:99;
	top:0px;
	left:15px;
	text-align: left;
	padding: 0;
	font-family: \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, Helvetica, sans-serif;
	font-size: 16px;
}
#nav li a{
	text-decoration:none;
	display:block;
	padding:7px 0px 7px 15px;
	color: #FFF;
	margin:0;
}
#nav li a:hover, #nav li a:focus, #nav li a.current {
	background-image: url(../icon1.png);
	background-repeat: no-repeat;
	background-position: left 10px;
}
#nav li li a, #nav li li a:hover, #nav li li a:focus {
	text-align:left;
	background-image: none;
	width: 103px;
}
#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}
#nav li { 
	display:block;
	list-style:none;
	position:relative;
}

/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{	float:none; }
#nav li li a {
	position:relative;
	float:none;
	padding:7px;
}
#nav li ul {
	position: absolute;
	width: 117px;
	margin-left: -1000em;
}

 /* lists nested under hovered list items */
#nav li:hover ul{	margin-left: 90px; margin-top:-30px;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul {  margin-left: 90px;  }
#nav li li a:focus {left:90px;  margin-left:1000em; width: 103px; }
#nav li:hover a:focus{ margin-left: 0; }


#nav1{
	display:block;
	position: absolute;
	list-style:none;
	margin:0;
	width:90px;
	z-index:99;
	top:0px;
	left:220px;
	text-align: left;
	padding: 0;
	font-family: \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, Arial, Helvetica, sans-serif;
	font-size: 16px;
}
#nav1 li a{
	text-decoration:none;
	display:block;
	padding:7px 0px 7px 15px;
	color: #FFF;
	margin:0;
}
#nav1 li a:hover, #nav1 li a:focus, #nav1 li a.current {
	background-image: url(../icon1.png);
	background-repeat: no-repeat;
	background-position: left 10px;
}
#nav1 li li a, #nav1 li li a:hover, #nav1 li li a:focus {
	text-align:left;
	background-image: none;
	width: 103px;
}
#nav1, #nav1 ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}
#nav1 li { 
	display:block;
	list-style:none;
	position:relative;
}

/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav1 li li{	float:none; }
#nav1 li li a {
	position:relative;
	float:none;
	padding:7px;
}
#nav1 li ul {
	position: absolute;
	width: 117px;
	margin-left: -1000em;
}

 /* lists nested under hovered list items */
#nav1 li:hover ul{	margin-left: 90px; margin-top:-30px;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav1 li a:focus + ul {  margin-left: 90px; }
#nav1 li li a:focus {left:90px;  margin-left:1000em; width: 103px;}
#nav1 li:hover a:focus{ margin-left: 0; }



#nav li.color1 a:hover, #nav li.color1 a:focus, #nav li.color1 a.current {
	color: #b12f7c;
}
#nav li.color1:hover ul  {
	left:0;
	background-color: #43122f;
}
#nav li.color1:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav li.color1:hover ul:after {
	border-color: transparent #43122f transparent transparent;
}
#nav li.color1:hover ul li a:hover, #nav li.color1:hover ul li a:focus {
	left:0;
	background-color: #b12f7c;
	color: #FFF;
}

#nav li.color2 a:hover, #nav li.color2 a:focus, #nav li.color2 a.current {
	color: #00a0ea;
}
#nav li.color2:hover ul  {
	left:0;
	background-color: #005075;
}
#nav li.color2:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav li.color2:hover ul:after {
	border-color: transparent #005075 transparent transparent;
}
#nav li.color2:hover ul li a:hover, #nav li.color2:hover ul li a:focus {
	left:0;
	background-color: #00a0ea;
	color: #FFF;
}

#nav li.color3 a:hover, #nav li.color3 a:focus, #nav li.color3 a.current {
	color: #00a73d;
}
#nav li.color3:hover ul  {
	left:0;
	background-color: #00551e;
}
#nav li.color3:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav li.color3:hover ul:after {
	border-color: transparent #00551e transparent transparent;
}
#nav li.color3:hover ul li a:hover, #nav li.color3:hover ul li a:focus {
	left:0;
	background-color: #00a73d;
	color: #FFF;
}

#nav li.color4 a:hover, #nav li.color4 a:focus, #nav li.color4 a.current {
	color: #9a88c4;
}
#nav li.color4:hover ul  {
	left:0;
	background-color: #4d4463;
}
#nav li.color4:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav li.color4:hover ul:after {
	border-color: transparent #4d4463 transparent transparent;
}
#nav li.color4:hover ul li a:hover, #nav li.color4:hover ul li a:focus {
	left:0;
	background-color: #9a88c4;
	color: #FFF;
}

#nav1 li.color5 a:hover, #nav1 li.color5 a:focus, #nav1 li.color5 a.current {
	color: #b12f7c;
}
#nav1 li.color5:hover ul  {
	left:0;
	background-color: #43122f;
}
#nav1 li.color5:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav1 li.color5:hover ul:after {
	border-color: transparent #43122f transparent transparent;
}
#nav1 li.color5:hover ul li a:hover, #nav1 li.color5:hover ul li a:focus {
	left:0;
	background-color: #b12f7c;
	color: #FFF;
}

#nav1 li.color6 a:hover, #nav1 li.color6 a:focus, #nav1 li.color6 a.current {
	color: #019e97;
}
#nav1 li.color6:hover ul  {
	left:0;
	background-color: #004f4a;
}
#nav1 li.color6:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav1 li.color6:hover ul:after {
	border-color: transparent #004f4a transparent transparent;
}
#nav1 li.color6:hover ul li a:hover, #nav1 li.color6:hover ul li a:focus {
	left:0;
	background-color: #019e97;
	color: #FFF;
}

#nav1 li.color7 a:hover, #nav1 li.color7 a:focus, #nav1 li.color7 a.current {
	color: #8bc578;
}
#nav1 li.color7:hover ul  {
	left:0;
	background-color: #46653c;
}
#nav1 li.color7:hover ul:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 100;
	top: 9px;
	left: -14px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px;
}
#nav1 li.color7:hover ul:after {
	border-color: transparent #46653c transparent transparent;
}
#nav1 li.color7:hover ul li a:hover, #nav1 li.color7:hover ul li a:focus {
	left:0;
	background-color: #8bc578;
	color: #FFF;
}