.top_menu {
display: table;
table-layout: fixed;
position: relative;
margin: 20px auto 27px auto;
text-align: center;
width: 100%;
}

.top_menu > li > a, .top_menu > li > p {
color: #fff;
font: 16px Arial;
text-shadow: 1px 0px #0d70a0;
line-height: 65px;
}

.top_menu > li{
display: table-cell;
background: #1196d6 url('tmenu_bg.gif') repeat-x left bottom;
border-left: 1px solid #0580ba;
border-right: 1px solid #49b0e2;

-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.top_menu > li:last-child a, .top_menu > li:last-child p {
border-right: none;
}
.top_menu > li:first-child a, .top_menu > li:first-child p {
border-left: none;
}
.top_menu > li:hover {
background-color: #5fcafd;
background-image: url("topmenuh_bg.gif");
background-position: left bottom;
background-repeat:  repeat-x;
}
.top_menu > li:hover > a, .top_menu > li:hover p {
color: #2b2b2b;
text-shadow: none
}

.top_menu > li ul {
position: absolute;
}
.top_menu > li > ul {
position: absolute;
left: -3px;
top: 67px;

}
.top_menu > li > ul ul {
position: absolute;
display: block;
left: 95%;
top: 20%;
}
.top_menu > li ul li {
  background: #f1f0f0 url('submenu_b_bg.gif') no-repeat center bottom;
  border-left: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  cursor: pointer;
  padding: 5px 7px 5px 15px;
  min-width: 207px;
  text-align: left;
}
.top_menu > li ul li:first-child {
  border-top-width: 1px;
}
.top_menu > li ul li:last-child {
  border-bottom-width: 1px;
}
.top_menu > li ul li a, .top_menu > li ul li p {
  padding: 6px 15px;
}
.top_menu > li ul li:hover, .top_menu > li ul li.current {
background-color: #e3e3e3;
}


/*-----------------------------------------*/



.left_menu > ul > li {
float: left;
clear:both;
margin-bottom: 5px;
position:relative;
padding:0;
list-style:none;
width: 270px;


}
.left_menu > ul > li > a, .left_menu > ul > li > p {
display:block;
position:relative;
z-index: 90;
min-width: 227px;
padding: 14px 7px 14px 36px;
border: 1px solid #dad8d9;
background-color: #f0eeef;
background-image: url("left_menu_pointer.png"), url("lmenu_bg.gif");
background-position: 12px 15px , left bottom;
background-repeat:  no-repeat, repeat-x;
font: 17px Arial;
color: #110f10;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;


}
.left_menu > ul > li.current > a, .left_menu > ul > li.current > p, .left_menu > ul > li:hover > a, .left_menu > ul > li:hover > p {
border-color: #1899d7;
background-color: #1899d7;
background-image: url("left_menu_pointer.png"), url("lmenu_currentbg.gif");
background-position: 12px 15px, left bottom;
background-repeat:  no-repeat, repeat-x;
color: #fff;
}


.menu {
 margin-left: 10px;
 display: block;
}
li.current > .menu {
 display: block;
}

.menu li {
  background: #f1f0f0 url('submenu_b_bg.gif') no-repeat center bottom;
  border-left: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  cursor: pointer;
  padding: 10px 10px 10px 32px;
  width: 207px;
}
.menu li a, .menu li p {
	color: #1d1e19;
	font: 14px Arial;
	text-decoration: none;
}
.menu li:hover a {
	text-decoration: underline;
	color: #1297da
}
.menu li:hover, .menu li.current {
 background: #e3e3e3 url('submenu_b_bg.gif') no-repeat center bottom;
}
.menu > li:first-child {
}
.menu > li:first-child:hover {
}
.menu > li li:first-child {
 border-top: 1px solid #dfdfdf;

}
.menu li:last-child {
	background-image: none;
	border-bottom: 1px solid #dfdfdf;
}

.menu ul li {
box-shadow: 2px 1px 3px 0px #e9e9e9;
-moz-box-shadow: 2px 1px 3px 0px #e9e9e9;
-webkit-box-shadow: 2px 1px 3px 0px #e9e9e9;

}
.menu ul li:last-child {
box-shadow: 2px 2px 3px 0px #e9e9e9;
-moz-box-shadow: 2px 2px 3px 0px #e9e9e9;
-webkit-box-shadow: 2px 2px 3px 0px #e9e9e9;

}

.menu, .menu ul {
  list-style: none;
  padding: 0;
}

.menu ul {
  margin: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
  outline: 0;
}

.submenu, .submenu ul {
  position: absolute;
  left: 225px;
  top: 20%;
/*	white-space:nowrap;*/
	min-width: 203px;
  z-index: 999;
  max-height: 0;
  /* The transition-delay prevents the menu to disappear before the transition is run backward
   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
  -webkit-transition: max-height 1ms linear 1s;
     -moz-transition: max-height 1ms linear 1s;
  /* A .submenu should be only revealed when hovering the .menu */
  pointer-events: none;

}

li:hover > ul {
  pointer-events: auto;
  z-index: 999;
  max-height: 2000px;
  -webkit-transition: none;
     -moz-transition: none;

}

/* Progressive Anim
 * ==================================================================
 * This is a lot of redundant code but the result is worth it
 * This should be edited for menus with more or much less than 8 items
 */

 /* forward */
.menu li:hover .submenu li:nth-child(1) {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

.menu  li:hover .submenu li:nth-child(2) {
  -webkit-transition-delay: 66ms;
     -moz-transition-delay: 66ms;
      -ms-transition-delay: 66ms;
       -o-transition-delay: 66ms;
          transition-delay: 66ms;
}

.menu  li:hover .submenu li:nth-child(3) {
  -webkit-transition-delay: 133ms;
     -moz-transition-delay: 133ms;
      -ms-transition-delay: 133ms;
       -o-transition-delay: 133ms;
          transition-delay: 133ms;
}

.menu  li:hover .submenu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
     -moz-transition-delay: 200ms;
      -ms-transition-delay: 200ms;
       -o-transition-delay: 200ms;
          transition-delay: 200ms;
}

.menu  li:hover .submenu li:nth-child(5) {
  -webkit-transition-delay: 266ms;
     -moz-transition-delay: 266ms;
      -ms-transition-delay: 266ms;
       -o-transition-delay: 266ms;
          transition-delay: 266ms;
}

.menu  li:hover .submenu li:nth-child(6) {
  -webkit-transition-delay: 333ms;
     -moz-transition-delay: 333ms;
      -ms-transition-delay: 333ms;
       -o-transition-delay: 333ms;
          transition-delay: 333ms;
}

.menu  li:hover .submenu li:nth-child(7) {
  -webkit-transition-delay: 400ms;
     -moz-transition-delay: 400ms;
      -ms-transition-delay: 400ms;
       -o-transition-delay: 400ms;
          transition-delay: 400ms;
}

.menu  li:hover .submenu li:nth-child(8) {
  -webkit-transition-delay: 466ms;
     -moz-transition-delay: 466ms;
      -ms-transition-delay: 466ms;
       -o-transition-delay: 466ms;
          transition-delay: 466ms;
}

/* backward */
.submenu li:nth-child(1) {
  -webkit-transition-delay: 466ms;
     -moz-transition-delay: 466ms;
      -ms-transition-delay: 466ms;
       -o-transition-delay: 466ms;
          transition-delay: 466ms;
}

.submenu li:nth-child(2) {
  -webkit-transition-delay: 400ms;
     -moz-transition-delay: 400ms;
      -ms-transition-delay: 400ms;
       -o-transition-delay: 400ms;
          transition-delay: 400ms;
}

.submenu li:nth-child(3) {
  -webkit-transition-delay: 333ms;
     -moz-transition-delay: 333ms;
      -ms-transition-delay: 333ms;
       -o-transition-delay: 333ms;
          transition-delay: 333ms;
}

.submenu li:nth-child(4) {
  -webkit-transition-delay: 266ms;
     -moz-transition-delay: 266ms;
      -ms-transition-delay: 266ms;
       -o-transition-delay: 266ms;
          transition-delay: 266ms;
}

.submenu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
     -moz-transition-delay: 200ms;
      -ms-transition-delay: 200ms;
       -o-transition-delay: 200ms;
          transition-delay: 200ms;
}

.submenu li:nth-child(6) {
  -webkit-transition-delay: 133ms;
     -moz-transition-delay: 133ms;
      -ms-transition-delay: 133ms;
       -o-transition-delay: 133ms;
          transition-delay: 133ms;
}

.submenu li:nth-child(7) {
  -webkit-transition-delay: 66ms;
     -moz-transition-delay: 66ms;
      -ms-transition-delay: 66ms;
       -o-transition-delay: 66ms;
          transition-delay: 66ms;
}

.submenu li:nth-child(8) {
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
      -ms-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
}

/* Default
 ================================================================= */
.submenu li {
  opacity: 0;

  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
          transition: opacity .4s,         transform .6s, max-height .6s;


}

.menu  li:hover>ul>li, .menu  li:focus>ul>li {
  opacity: 1;

  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;


}

.top_menu > li ul {
	max-height: 0;
}
.top_menu > li li {
opacity: 0;
 max-height: 0;
  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
          transition: opacity .4s,         transform .6s, max-height .6s;


}

.top_menu  li:hover>ul, .menu  li:focus>ul {
	max-height: 2000px;
}
.top_menu  li:hover>ul>li, .menu  li:focus>ul>li {
  opacity: 1;
 max-height: 2000px;
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;


}

/* Helix
 ================================================================= */
.helix {
  -webkit-perspective: 400px;
     -moz-perspective: 400px;
      -ms-perspective: 400px;
       -o-perspective: 400px;
          perspective: 400px;
}

.helix li {
  -webkit-transform: rotateY(90deg);
     -moz-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
       -o-transform: rotateY(90deg);
          transform: rotateY(90deg);
}

/* Wave
 ================================================================= */
.wave li {
  -webkit-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
       -o-transform-origin: 0% 0%;
          transform-origin: 0% 0%;

  -webkit-transform: skewY(-90deg);
     -moz-transform: skewY(-90deg);
      -ms-transform: skewY(-90deg);
       -o-transform: skewY(-90deg);
          transform: skewY(-90deg);
}

/* Fan
 ================================================================= */
.fan li {
  -webkit-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
       -o-transform-origin: 0% 0%;
          transform-origin: 0% 0%;

  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* Papercut
 ================================================================= */
.papercut {
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
       -o-perspective: 600px;
          perspective: 600px;

  -webkit-perspective-origin: 0% 0%;
     -moz-perspective-origin: 0% 0%;
      -ms-perspective-origin: 0% 0%;
       -o-perspective-origin: 0% 0%;
          perspective-origin: 0% 0%;
}

.papercut li {
  -webkit-transform-origin: 0% 0%;
     -moz-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
       -o-transform-origin: 0% 0%;
          transform-origin: 0% 0%;

  -webkit-transform: skewY(30deg);
     -moz-transform: skewY(30deg);
      -ms-transform: skewY(30deg);
       -o-transform: skewY(30deg);
          transform: skewY(30deg);
}

/* Fly
 ================================================================= */
.fly {
  -webkit-perspective: 400px;
     -moz-perspective: 400px;
      -ms-perspective: 400px;
       -o-perspective: 400px;
          perspective: 400px;
}

.fly li {
  -webkit-transform-origin: 50% 50% -50px;
     -moz-transform-origin: 50% 50% -50px;
      -ms-transform-origin: 50% 50% -50px;
       -o-transform-origin: 50% 50% -50px;
          transform-origin: 50% 50% -50px;

  -webkit-transform: rotateX( -180deg );
     -moz-transform: rotateX( -180deg );
      -ms-transform: rotateX( -180deg );
       -o-transform: rotateX( -180deg );
          transform: rotateX( -180deg );
}

/* Blind
 ================================================================= */
.blind li {
  max-height: 0;
}

.menu > li:hover .blind li, .menu > li:focus .blind li {
  /* This should be changed to the normal height of list-items */
  max-height: 30px;
}

/* Venitian
 ================================================================= */
.venitian li {
  -webkit-transform-origin: 50% 0;
     -moz-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
       -o-transform-origin: 50% 0;
          transform-origin: 50% 0;

  -webkit-transform: scale(1,0);
     -moz-transform: scale(1,0);
      -ms-transform: scale(1,0);
       -o-transform: scale(1,0);
          transform: scale(1,0);
}

/* Jaws
 ================================================================= */
.jaws li {
  -webkit-transform-origin: 50% -100px;
     -moz-transform-origin: 50% -100px;
      -ms-transform-origin: 50% -100px;
       -o-transform-origin: 50% -100px;
          transform-origin: 50% -100px;
}

.jaws li:nth-child(odd) {
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

.jaws li:nth-child(even) {
  -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

/* Fence
 ================================================================= */
.fence {
  -webkit-perspective: 600px;
     -moz-perspective: 600px;
      -ms-perspective: 600px;
       -o-perspective: 600px;
          perspective: 600px;
}

.fence li:nth-child(odd) {
  -webkit-transform-origin: 0 50%;
     -moz-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
       -o-transform-origin: 0 50%;
          transform-origin: 0 50%;

  -webkit-transform: rotateY(90deg);
     -moz-transform: rotateY(90deg);
      -ms-transform: rotateY(90deg);
       -o-transform: rotateY(90deg);
          transform: rotateY(90deg);
}

.fence li:nth-child(even) {
  -webkit-transform-origin: 100% 50%;
     -moz-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
       -o-transform-origin: 100% 50%;
          transform-origin: 100% 50%;

  -webkit-transform: rotateY(-90deg);
     -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
       -o-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
}

/* Zipper
 ================================================================= */
.zipper li:nth-child(odd) {
  -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
       -o-transform: translateX(-100%);
          transform: translateX(-100%);


}

.zipper li:nth-child(even) {
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
       -o-transform: translateX(100%);
          transform: translateX(100%);


}
