﻿.menuelement, .submenuelement1, .submenuelement2{
    color: #fbc900;
    padding-left:4px;
	box-shadow: 0 1px 0  #c2a8db, 0 2px 0 #3e2356;
}

.submenuelement1 {
    padding-left:8px;
}

.submenuelement2 {
padding-left:16px;
}

#menuleft, #menuleft ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menuleft {
	/*width: 100%;
    min-width:946px;*/
	margin:auto;
	border: 1px solid #613887;
	background-color: #522f71;
	background-image: -webkit-linear-gradient(#522f71, #c2a8db);
    background-image: -moz-linear-gradient(#522f71, #c2a8db);
    background-image: -ms-linear-gradient(#522f71, #c2a8db);
    background-image: -o-linear-gradient(#522f71, #c2a8db);
    background-image: linear-gradient(#522f71, #c2a8db);
	border-radius: 6px 6px 0 0;
	box-shadow: 0 1px 1px #3e2356;
}

#menuleft a {
	float: left;
    width:100%;
	padding-top:8px;
    padding-bottom:8px;
	color: #fbc900;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
    text-align:left;
}

#menuleft a {
	float: none;
	display: block;
	border: 0;
}

#menuleft .menuelement:hover,
#menuleft .submenuelement1:hover,
#menuleft .submenuelement2:hover {
	background-color: #0186ba;
	background-image: -webkit-linear-gradient(#522f71, #c2a8db);
    background-image: -moz-linear-gradient(#522f71, #c2a8db);
    background-image: -ms-linear-gradient(#522f71, #c2a8db);
    background-image: -o-linear-gradient(#522f71, #c2a8db);
    background-image: linear-gradient(#522f71, #c2a8db);
}

#menuleft:first-child > a {
	border-radius: 3px 3px 0 0;
}

.heightAnimShow {
    -webkit-animation: heightAnimateShow 0.5s;
    -moz-animation: heightAnimateShow 0.5s;
    -ms-animation: heightAnimateShow 0.5s;
    -o-animation: heightAnimateShow 0.5s;
    animation: heightAnimateShow 0.5s;
}
@-webkit-keyframes heightAnimateShow {
    from   {
          max-height:0px;
          opacity:0;
    }
    to {
          max-height:200px;
          opacity:1;
    }
}
@-moz-keyframes heightAnimateShow {
    from   {
          max-height:0px;
          opacity:0;
    }
    to {
          max-height:200px;
          opacity:1;
    }
}
@-ms-keyframes heightAnimateShow {
    from   {
          max-height:0px;
          opacity:0;
    }
    to {
          max-height:200px;
          opacity:1;
    }
}
@-o-keyframes heightAnimateShow {
    from   {
          max-height:0px;
          opacity:0;
    }
    to {
          max-height:200px;
          opacity:1;
    }
}
@keyframes heightAnimateShow {
    from   {
          max-height:0px;
          opacity:0;
    }
    to {
          max-height:200px;
          opacity:1;
    }
}

.heightAnimCollapse {
    -webkit-animation: heightAnimateCollapse 0.5s;
    -moz-animation: heightAnimateCollapse 0.5s;
    -ms-animation: heightAnimateCollapse 0.5s;
    -o-animation: heightAnimateCollapse 0.5s;
    animation: heightAnimateCollapse 0.5s;
}
@-webkit-keyframes heightAnimateCollapse{
  from   {
          /*transform: translateY(0);*/
          max-height:200px;
          opacity:1;
    }
    to {
          /*transform: translateY(-100%);*/
          max-height:0px;
          opacity:0;
    }
}
@-moz-keyframes heightAnimateCollapse{
  from   {
          max-height:200px;
          opacity:1;
    }
    to {
          max-height:0px;
          opacity:0;
    }
}
@-ms-keyframes heightAnimateCollapse{
  from   {
          max-height:200px;
          opacity:1;
    }
    to {
          max-height:0px;
          opacity:0;
    }
}
@-o-keyframes heightAnimateCollapse{
  from   {
          max-height:200px;
          opacity:1;
    }
    to {
          max-height:0px;
          opacity:0;
    }
}
@keyframes heightAnimateCollapse{
  from   {
          max-height:200px;
          opacity:1;
    }
    to {
          max-height:0px;
          opacity:0;
    }
}