.menuwrapper { position: absolute; width: 980px; bottom: 0px; left: 30px; z-index: 80; }

a {
 color: #fff;
}

/* 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: url(http://botaneproperties.co.za/uploads/images/black50.png) top center repeat;
display: block;
margin: auto;
font-family: Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
}

/* 1st level list is floating for horizontal menu */
#menu li {
 text-transform: uppercase;
 float: left;
 position: relative;
 list-style: none;
 margin: 0;
 padding: 0 10px 5px 10px;
 /* 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;
}
/* links and sectionheaders style */
#menu li a, #menu li span.sectionheader {
 display: block;
 color: #fff;
 line-height: 35px;
 padding: 0 10px;
 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: 20px;
}

/* hover or current style */
#menu li:hover, #menu li.current {
 background: #444;
}
/* 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: 30px;
 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.two_col:hover .submenu {
 width: 370px;
}
#menu li.three_col:hover .submenu {
 width: 545px;
}1
/* 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: #444;
 border-radius: 0 6px 6px 6px;
 padding: 10px 0;
 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;
}
/* 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: 240px;
 top: -9999em;
 left: -9999em;
}
#menu .submenu li.flyout:hover ul {
 position: absolute;
 left: 230px;
 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 10px;
 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;
}
/* 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;
 width: 100%;
}
/* link color of sublevels */
#menu li ul li a:hover,
#menu li ul li a.current {
 color: #339933;
}
#menu .submenu li ul {
 position: static;
 display: block;
 box-shadow: none;
 border-radius: 0 0 6px 6px;
behavior: url(tmp/configs/PIE.htc);
}
#menu .submenu li ul li {
 float: none;
}
/* width of mega dropdown columns, should fit inside #menu li.two_col:hover .submenu width  */
#menu .two_col .submenu ul li, #menu .three_col .submenu ul li {
 width: 157px;
}
/* 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 */


#menubutton:hover  { 
  background: #ff9900;
}

#menubutton  {position: relative; text-align: left; padding: 10px; margin: 5px 0 10px 0;  height: 22px;   font-size: 1.6em; background: #333; color: #FFF; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;-moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; behavior: url(tmp/configs/PIE.htc);
}

#activeparent  {position: relative; text-align: left; padding: 10px; margin: 5px 0 10px 0;  height: 22px;   font-size: 1.6em; background: #ff9900; color: #FFF; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;-moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; behavior: url(tmp/configs/PIE.htc);
}


#menubutton span,
#activeparent span {position: relative; text-align: left; margin: 0; padding:0;
}

#content #menubutton span h3 {font-size: 1em; color: #FFF;}