.jqueryslidemenu{
font: bold 11px Verdana;
xbackground: #414141;
xwidth: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
line-height:normal;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
xbackground: #414141; /*background of tabs (default state)*/
padding: 8px 11px;
xborder-right: 1px solid #ffffff;
color: #000000;
text-decoration: none;
cursor: pointer;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #000000;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
border-top: 1px solid gray;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
line-height:normal;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 11px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
background-color: #ffffff; 
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 11px;
right: 8px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}



/****************** mobile *********************** mobile *************************************/
@media only screen and (min-width: 320px) and (max-width: 480px) {

	.jqueryslidemenu {
		clear:both;
		list-style: none;
		*zoom: 1;
		display:none;
		left:0;
	}
	.jqueryslidemenu:before,
	.jqueryslidemenu:after {
		content: " "; 
		display: table; 
	}
	.jqueryslidemenu:after {
		clear: both;
	}
	.jqueryslidemenu ul {
		list-style: none;
		padding-left:10px;
		width: 9em;
		left:0;
	}
	.jqueryslidemenu ul li  {
		clear:both;
		float:left;
		width:225px;
		display: block;
		position: relative;
		
	}
	.jqueryslidemenu ul li a {
		width:225px;
		color:white;
		background-color:#ca0000;     /* change as needed */
		border-top:2px solid #414141;  /* change as needed */
		background-image:none;
		padding-left:10px;
		text-align:left;
		
	}
	.jqueryslidemenu ul li ul li  {
		width: 200px; /*width of sub menus*/
		display: block;
		padding-left:10px;
		z-index:9999;
		position:relative;
		
	}
	/* Sub level menu links style */
	.jqueryslidemenu ul li ul li a{
		font: normal 12px arial;
		padding: 5px;
		margin: 0;	
		height:20px;
		border-top-width: 0;
		border-bottom: 1px solid #414141;   /* change as needed */
		background-color: #000;
		background-image: none;
		text-align: left;
	}
	.jqueryslidemenu ul li ul li ul li  {
		width: 200px; /*width of sub menus*/
		display: block;
		padding-left:30px;
		z-index:9999;
		position:relative;
	}
	.jqueryslidemenu > li {
		float: left;
		/*border-top: 1px solid black;*/
	}
	.jqueryslidemenu ul li .parent {
		background-image: url("../images/down.png");
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}
	.jqueryslidemenu > li > a {
		display: block;
	}
	.jqueryslidemenu li  ul {
		position: absolute;
		left: -9999px;
	}
	.jqueryslidemenu > li.hover > ul {
		left: 0;
	}
	.jqueryslidemenu li li.hover ul {
		left: 100%;
		top: 0;
	}
    .active {
        display: block;
    }
    .jqueryslidemenu > li {
        float: none;
    }
    .jqueryslidemenu > li > .parent {
        background-position: 95% 50%;
    }
    .jqueryslidemenu ul {
        display: block;
        width: 100%;
    }
   .jqueryslidemenu > li.hover > ul , .jqueryslidemenu li li.hover ul {
        position: static;
    }

}



/****************** tablet *********************** tablet *************************************/
@media only screen and (min-width: 481px) and (max-width: 768px) {

	.jqueryslidemenu{
		font: bold 12px Verdana;
		xbackground: #414141;
		xwidth: 100%;
		float: left;
		left:50%;
		position:relative;
	}

	.jqueryslidemenu ul{
		position:relative;
		left:-50%;
		list-style:none;
		margin:0;
		padding:0;
	}
	.jqueryslidemenu  ul li {  /* look is relatively same as desktop - width of each listing is smaller - can change width if needed */
		width: 9%;
		padding: .5%;
		margin: 0;
		position:relative;
		float:left;
		display: table;
	}
	.jqueryslidemenu ul li a {
		margin: 0;
		padding: 0 0 0 0;
		line-height: 1.1em;
		text-align: center;
		height: 2.8em;
		display: table-cell;
		vertical-align: middle;
	}
	.jqueryslidemenu ul li a:hover{        	
		color: white;
	}
	/*1st sub level menu*/
	.jqueryslidemenu ul li ul{
		position: absolute;
		left: 130px;
		top:55px;
		display: block;
		visibility: hidden;
		border-top: 1px solid gray;
	}

	.jqueryslidemenu  ul li ul li {
		/*float: none;*/
		width: 200px;
		padding: 0;
		margin: 0;
	}
	.jqueryslidemenu ul li ul li ul li  {
		width: 200px; /*width of sub menus*/
		display: list-item;
		position:relative;
		/*left:375px;  helps on android!!*/
		/*float:right;*/
		/*padding-left:30px;*/
		
	}
}