/* this section is for mega menus, NOTE: use our nav div to set width and positioning; normally, we'll do the menus as an include */


ul#menu {
margin: 0;
padding: 0em 0em;
}


ul#menu li {
display: inline;
margin: 0em;
position: relative;
}

/* @group css rollovers */

/* use this section for rollover images, adding nav1, nav2, etc., as h2 class */

ul#menu h2.nav1 {
float: left;
display: block;
width: 226px;
height: 60px;
background: url(../bmd-images/nav/bmd_01.jpg) no-repeat 0 0;
}

ul#menu h2.nav1:hover {
background-position: 0 -60px;
}

ul#menu h2.nav1 span {
display: none;
}

ul#menu h2.nav2 {
float: left;
display: block;
width: 89px;
height: 60px;
background: url(../bmd-images/nav/bmd_02.jpg) no-repeat 0 0;
}

ul#menu h2.nav2:hover {
background-position: 0 -60px;
}

ul#menu h2.nav2 span {
display: none;
}

ul#menu h2.nav3 {
float: left;
display: block;
width: 94px;
height: 60px;
background: url(../bmd-images/nav/bmd_03.jpg) no-repeat 0 0;
}

ul#menu h2.nav3:hover {
background-position: 0 -60px;
}

ul#menu h2.nav3 span {
display: none;
}

ul#menu h2.nav4 {
float: left;
display: block;
width: 111px;
height: 60px;
background: url(../bmd-images/nav/bmd_04.jpg) no-repeat 0 0;
}

ul#menu h2.nav4:hover {
background-position: 0 -60px;
}

ul#menu h2.nav4 span {
display: none;
}

ul#menu h2.nav5 {
float: left;
display: block;
width: 135px;
height: 60px;
background: url(../bmd-images/nav/bmd_05.jpg) no-repeat 0 0;
}

ul#menu h2.nav5:hover {
background-position: 0 -60px;
}

ul#menu h2.nav5 span {
display: none;
}

ul#menu h2.nav6 {
float: left;
display: block;
width: 156px;
height: 60px;
background: url(../bmd-images/nav/bmd_06.jpg) no-repeat 0 0;
}

ul#menu h2.nav6:hover {
background-position: 0 -60px;
}

ul#menu h2.nav6 span {
display: none;
}

ul#menu h2.nav7 {
float: left;
display: block;
width: 62px;
height: 60px;
background: url(../bmd-images/nav/bmd_07.jpg) no-repeat 0 0;
}

ul#menu h2.nav7:hover {
background-position: 0 -60px;
}

ul#menu h2.nav7 span {
display: none;
}

ul#menu h2.nav8 {
float: left;
display: block;
width: 87px;
height: 60px;
background: url(../bmd-images/nav/bmd_08.jpg) no-repeat 0 0;
}

ul#menu h2.nav8:hover {
background-position: 0 -60px;
}

ul#menu h2.nav8 span {
display: none;
}

/* @end */

/* styles for dropdown items */

/* @group mega menu */

ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}

ul#menu li a {
color: blue;
text-decoration: none;
padding: 0 0.4em;
}

ul#menu li a:hover {
text-decoration: underline;
}

/* orig script uses an arrow to indicate dropdowns, using
background: transparent url(arrow.gif) center right no-repeat; */


ul#menu div {
display: none;
z-index: 5000;
}

ul#menu li.hovering div {
display: block;
}

/* @group mega general set-up */

ul#menu li#services, ul#menu li#portfolio, ul#menu li#web, ul#menu li#graphic, ul#menu li#marketing, ul#menu li#contact  {
	float: left;
	padding: 0px;
	margin: 0;
}

ul#menu li#services div#servtab, ul#menu li#portfolio div#foliotab, ul#menu li#web div#webtab, ul#menu li#graphic div#graphictab, ul#menu li#marketing div#mktgtab, ul#menu li#contact div#contacttab {
position: absolute;
top: 45px;
left: 2px;
padding: 5px;
background: #ddeeff;
border: 1px solid #003355;
color: black;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0px 4px 8px #333;
-webkit-box-shadow: 0px 4px 8px #333;
box-shadow: 0px 4px 8px #333;
}

ul#menu li#services div a, ul#menu li#portfolio div a, ul#menu li#web div a, ul#menu li#graphic div a, ul#menu li#marketing div a, ul#menu li#contact div a {
color: #003355;
padding: 4px 0px 4px 10px;
background-image: none;
text-decoration: underline;
display: block;
height: 24px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

ul#menu li#services div a:hover, ul#menu li#portfolio div a:hover, ul#menu li#web div a:hover, ul#menu li#graphic div a:hover, ul#menu li#marketing div a:hover, ul#menu li#contact div a:hover {
color: #ffffff;
padding: 4px 0px 4px 10px;
background-image: none;
text-decoration: underline;
background-color: #3377aa;
}

/* @end */

/* @group Services */

ul#menu li#services div#servtab {
width: 330px;
}

ul#menu li#services div#servtab .col1 {
	width: 160px;
	height: 210px;
	padding-left: 10px;
	float: left;
	border-right: 1px dotted #66aaee;
}

ul#menu li#services div#servtab .col2 {
	width: 140px;
	height: 210px;
	padding-left: 10px;
	float: left;
}

ul#menu li#services div a {
width: 140px;
}



/* @end */

/* @group Portfolio */

ul#menu li#portfolio div#foliotab {
width: 180px;
}

ul#menu li#portfolio div a {
width: 170px;
}

/* @end */

/* @group Web */

ul#menu li#web div#webtab {
width: 480px;
}

ul#menu li#web div#webtab .col1 {
	width: 230px;
	height: 190px;
	padding-left: 10px;
	float: left;
	border-right: 1px dotted #66aaee;
}

ul#menu li#web div#webtab .col2 {
	width: 220px;
	height: 190px;
	padding-left: 10px;
	float: left;
}

ul#menu li#web div a {
width: 210px;
}

/* @end */

/* @group Graphics */

ul#menu li#graphic div#graphictab {
width: 190px;
}

ul#menu li#graphic div a {
width: 180px;
}

/* @end */

/* @group Marketing */

ul#menu li#marketing div#mktgtab {
width: 200px;
}

ul#menu li#marketing div a {
width: 190px;
}



/* @end */

/* @group Contact */

ul#menu li#contact div#contacttab {
width: 140px;
left: -70px;
}

ul#menu li#contact div a {
width: 130px;
}

/* @end */

ul#menu li div a.more {
color: red;
font-weight: bold;
}

ul#menu div h3 {
color: #99ccff;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}



/* @end */


/* end of mega menus styles */