.menuwrapper { position: relative; width: 980px; top: 0; left: 0; margin: 0px 30px 0px 30px; z-index: 80;
border: 0px #CCC solid;
-webkit-box-shadow: 0px 1px 5px 0px #CCC;
-moz-box-shadow: 0px 1px 5px 0px #CCC; 
box-shadow: 0px 1px 5px 0px #CCC;
}

/* you might not need this if you use reset */
ul, li {
 margin: 0;
 padding: 0;
}
/* border of thumbnail */
#menu a img {
 border: 1px solid #aaa;
}
/* style of 1st level ul */
ul#menu {
 position: relative;
  background: #0c4fa0;
background: linear-gradient(top, #1689ca 0%,#0c4fa0 100%);
background: -moz-linear-gradient(top, #1689ca 0%, #0c4fa0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1689ca), color-stop(100%,#0c4fa0));
background: -webkit-linear-gradient(top, #1689ca 0%,#0c4fa0 100%);
background: -o-linear-gradient(top, #1689ca 0%,#0c4fa0 100%);
background: -ms-linear-gradient(top, #1689ca 0%,#0c4fa0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1689ca , endColorstr=#0c4fa0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1689ca, endColorstr=#0c4fa0";
 display: block;
 margin: auto;
}
/* 1st level list is floating for horizontal menu */
#menu li {
 text-transform: uppercase;
 float: left;
 list-style: none;
 margin: 0;
 padding: 5px 50px 5px 50px;
 /* transition effect for background */
 transition: background .2s ease-in-out;
 -webkit-transition: background .2s ease-in-out;
 -moz-transition: background .2s ease-in-out;
 -o-transition: background .2s ease-in-out;
}
#sidebar ul#menu {
 position: relative;
 background: #0a3b76;
 display: block;
 margin: auto;
}
#sidebar #menu li {
 width: 100%;
 max-width: 240px;
}

#menu li li {
 border: 0;
 padding: 10px 5px 10px 5px;
}
/* links and sectionheaders style */
#menu li a, #menu li span.sectionheader {
 display: block;
 color: #fff;
 line-height: 35px;
 padding: 0px 5px 0 5px;
 text-decoration: none;
}
/* 1st level links style */
#menu li a.menuitem,
#menu li span.menuitem.sectionheader {
 /* text-transform: uppercase; */
 text-shadow: 1px 1px 0 #aaa;
 color: #EEE;
 font-weight: normal;
 margin-top: 10px;
}

#menu li a.menuitem h3 {
  font-size: 18px;
  margin: 0 0 5px 0;
  padding: 0;
  color: #FFF;
}

#menu .submenu h3 {
  font-size: 16px;
  margin: 0 0 5px 0;
  padding: 0;
  color: #FFF;
}

/* hover or current style */
#menu li:hover {
 background: #1689ca;
}
#menu li.current {
   background:#0c4fa0;

}

/* description is wrapped in info span */
#menu span.info {
 display: block;
 line-height: 1;
 display: block;
 font-size: 11px;
 padding-bottom: 10px;
 text-transform: none;
 text-shadow: none;
 color: #FFF;
 font-weight: normal;
}

/* 2nd level */
#menu .submenu {
 position: absolute;
 z-index: 100;
 width: auto;
 top: -9999em; /* hide first */
 left: -9999em;
 opacity: 0; /* set opactiy to 0 for transtion effect */
 width: 240px; /* flyout will depend on this, if you change it dont forget about #menu .submenu li.flyout ul */
 /* animate dropdown */
 transition: width .4s ease-in-out;
 -webkit-transition: width .4s ease-in-out;
 -moz-transition: width .4s ease-in-out;
 -o-transition: width .4s ease-in-out;
 border-radius: 0 0 6px 6px;
 transition: opacity .4s ease-in-out;
 -webkit-transition: opacity .4s ease-in-out;
 -moz-transition: opacity .4s ease-in-out;
 -o-transition: opacity .4s ease-in-out;
behavior: url(tmp/configs/PIE.htc);
}


/* position wrapping div on hover */
#menu li:hover .submenu {
 top: 63px;
 opacity: .95;
 left: 0;
}
/* if parent has class right, position it to right */
#menu li:hover.right .submenu {
 left: auto;
 right: 0;
}
/* width of mega dropdown, you can add more classes like this, depending on your site structure */
#menu li.sub_col:hover .submenu {
 width: 980px;
}
#menu li.two_col:hover .submenu {
 width: 480px;
}
#menu li.three_col:hover .submenu {
 width: 720px;
}
/* reset transition animations */
#menu li li {
 transition: none;
 -webkit-transition: none;
 -moz-transition: none;
 -o-transition: none;
}
/* style of 2nd level unordered list */
#menu .submenu ul {
 background: #1689ca;
 padding: 10px;
 box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.3);
  behavior: url(tmp/configs/PIE.htc);
}

#menu .submenu ul li {
 display: block;
 float: left;
 width: 100%;
 width: 230px;
}
#menu .submenu ul li:hover {
 background: #0c4fa0;
}
/* if 2nd level item has no children or has class flyout */
#menu .submenu ul li.flyout,
#menu .submenu ul li.flyout li {
 float: none;
}
#menu .submenu ul li.no-sub {
 float: left;
}
/* position 3rd level flyout */
#menu .submenu li.flyout ul {
 position: absolute;
 width: 192px;
 top: -9999em;
 left: -9999em;
}
#menu .submenu li.flyout:hover ul {
 position: absolute;
 left: 160px;
 top: 0;
}
/* style of second level links */
#menu li ul li a.menuitem,
#menu li ul li span.menuitem.sectionheader,
#menu li ul li a, #menu li ul li span.sectionheader {
 display: block;
 padding: 0 5px 0px 5px;
 line-height: 24px;
 text-shadow: none;
 transition: color .4s ease-in-out;
 -webkit-transition: color .4s ease-in-out;
 -moz-transition: color .4s ease-in-out;
 -o-transition: color .4s ease-in-out;
}

#menu .sectionheader span.info {
font-size: 14px;
}


/* uppercase for mega dropdown parent items */
#menu li ul li a,
#menu li ul li.sectionheader span {
 text-transform: uppercase;
 display: block;
}
/* remove uppercase if it's not mega dropdown */
#menu li ul li.no-sub a,
#menu li ul li.flyout a,
#menu li ul li.no-sub span.sectionheader,
#menu li ul li.flyout span.sectionheader {
 text-transform: none;
 max-width: 240px;
}
/* link color of sublevels */

#menu li ul li a:link {color: #333;}
#menu li ul li a:hover,
#menu li ul li a.current {
 color: #999;
}
#menu .submenu li ul {
 position: static;
 display: inline;
 box-shadow: none;
 border-radius: 0 0 4px 4px;
behavior: url(tmp/configs/PIE.htc);
}
#menu .submenu li ul li {
 float: none;
}

#menu .sub_col .two_col {width: 480px;}
#menu .sub_col .two_col a {color: #fff;}
#menu .sub_col .three_col {width: 720px;}
#menu .sub_col .four_col {width: 960px; background: #333;}
#menu .sub_col .three_col li, #menu .sub_col .four_col li {
 float: left;
 width: 230px;
 padding: 5px;
}
#menu .sub_col .two_col li {
 float: left;
 width: 230px;
 padding: 5px;
}

/* width of mega dropdown columns, should fit inside #menu li.two_col:hover .submenu width  */
#menu .two_col .submenu ul li img, #menu .three_col .submenu ul li img, #menu .sub_col .submenu ul li img {
  width:218px;
}
/* 
clearfix - clearing floats */
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html .clearfix { zoom: 1;}/* IE6 */
*:first-child+html .clearfix { zoom: 1;}/* IE7 */

#menuitem {
        display: inline;
	float: left;
	width: auto;
        height: auto;
        padding: 8px 8px 20px 8px;
	margin: 0 4px 5px 4px;
        border: 1px #CCC solid;
background: #E2E2E2; 
background: linear-gradient(top, #E2E2E2 0%,#FFFFFF 100%);
background: -moz-linear-gradient(top, #E2E2E2 0%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E2E2E2), color-stop(100%,#FFFFFF));
background: -webkit-linear-gradient(top, #E2E2E2 0%,#FFFFFF 100%);
background: -o-linear-gradient(top, #E2E2E2 0%,#FFFFF 100%);
background: -ms-linear-gradient(top, #E2E2E2 0%,#FFFFFF 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2 , endColorstr=#FFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2, endColorstr=#FFFFFF";
   -webkit-box-shadow: 0px 1px 5px 0px #CCC;
   -moz-box-shadow: 0px 1px 5px 0px #CCC; 
   box-shadow: 0px 1px 5px 0px #CCC;
   behavior: url(tmp/configs/PIE.htc); 
}

#menuitem:hover {
        background: #E2E2E2;
}

#menuitem img {
        width: 217px;
        border: 1px #CCC solid;
}
#menuitem span, #menuitem a span {padding-bottom: 5px; text-align: left; width: 100%;}
div#menuitem h5 {text-align: center; width: 88px; margin: 3px 0; font-size: 10px;}


#menu-icon #menuitem {
        display: inline;
	float: left;
	width: auto;
        height: auto;
        padding: 2px;
	margin: 0 2px 5px 0px;
        border: 0px #EEE solid;
}

#menu-icon #menuitem img {
        display: inline;
	float: left;
	width: auto;
}

#menu-icon #menuitem:hover {
        background: none;
        border: 0px;
}