/*----------------------------------------------------------------------------
Customise Style Sheet

Name: 				JJ Ario Lite
Date: 				2007-06-30
Description: 		A dark Web 2.0 two-column template.
Author: 			JoomlaJunkie
URL: 				http://www.joomlajunkie.com

Stylesheet Index:
	$1 - Top Tools Menu
	$2 - Top Menu / Suckerfish menu

NOTE: Always make a backup of your stylesheets before editing!
NB!! Use the search function to find a section, eg: search for $2 for Sidebar menu
----------------------------------------------------------------------------*/

/* Common CSS
----------------------------------------------------------------------------*/

/* $1 - Top Tools Menu
----------------------------------------------------------------------------*/

ul#mainlevel-top, ul#text-size {
	float:right;
	width:auto;
	display:inline;
	margin:0;
	padding:0;
}

ul#mainlevel-top li {
	background: none;
	width:11px;	height:19px;
	margin-right:25px;
	padding:0;
	float:left;
	display:inline;
	overflow:hidden;
	position:relative;
}

ul#mainlevel-top a {
	display:block;
	position:absolute;
	text-indent: 7998px;
	top:0;left:0;
	width:11px;	height:19px;
	overflow:hidden;
	cursor:pointer;
}

/* $2 - Top Suckerfish Menu
----------------------------------------------------------------------------*/

ul#mainmenu-nav {
	bottom: 0;
	margin: 0;
	border: 0 none;
	padding: 0;
	list-style: none;
	display:inline;
	height: 36px;
	z-index: 100;
	float: left;
	margin: 11px 0 0 17px;
}

ul#mainmenu-nav li {
	margin: 0;
	border: 0 none;
	padding: 0 1px 0 0;
	float: left;
	/*For Gecko*/
	display: inline;
	list-style: none;
	position: relative;
	text-indent: 0px;
}

ul#mainmenu-nav li ul {
	border: 1px solid #000;
	border-bottom:0;
	z-index: 100;
}

ul#mainmenu-nav li ul {
	margin: 0;
	padding: 0;
	width: 200px;
	list-style: none;
	display: none;
	position: absolute;
	top: 36px;
	left: -1px;
}

ul#mainmenu-nav ul:after

/*From IE 7 lack of compliance*/ {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#mainmenu-nav ul li {
	position: relative;
	top: 0;
	padding: 0;
	bottom: 0;
	z-index: 100;
	width: 200px;
	float: left;
	border-bottom: 1px solid #111;

	/*For IE 7 lack of compliance*/
	display: block !important;
	display: inline;
	/*For IE*/
}

ul#mainmenu-nav ul li {
	background: transparent url(../images/nav-ul-transp.png);
}

ul#mainmenu-nav ul li:hover {
	background: transparent url(../images/nav-ul-transp-hover.png);
}

/* $1 - Top level menu items in their normal state
----------------------------------------------------------------------------*/

ul#mainmenu-nav a {
	padding: 0 16px;
	margin: 0;
	float: none !important;
	/*For Opera*/
	float: left;
	/*For IE*/
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	font-family:Arial;

	/*For IE*/
	line-height: 29px;
	height: 36px;
}

ul#mainmenu-nav ul a {
	height: auto !important;
	height: 1%;
	color: #ccc;
}

ul#mainmenu-nav a.haschild {
	background: transparent url(../images/has-child.gif) no-repeat 50% 23px;
}

/* Active */
#mainmenu-nav #active_menu-nav {
	color: #fff;
	margin: 0;
}

#mainmenu-nav #active_menu-nav:hover {

}

#mainmenu-nav #active_menu-nav.haschild:hover {
/*see color style sheet*/
}
ul#mainmenu-nav li:hover a.haschild,
ul#mainmenu-nav li.iehover a.haschild {
/*see color style sheet*/
}

#mainmenu-nav li a#active_menu-nav.hassubchild {

}

#mainmenu-nav li a#active_menu-nav.haschild {
}

/* $1 - Top level menu items in their hover state
----------------------------------------------------------------------------*/

ul#mainmenu-nav a:hover,
ul#mainmenu-nav li:hover a,
ul#mainmenu-nav li.iehover a {
	color: #fff;
	background: transparent url(../images/nav-hover.gif) no-repeat 50% 31px;
}

ul#mainmenu-nav a.haschild:hover {
	background: #9ccd0d url(../images/nav-hover-child.gif) no-repeat 50% 23px;
	color: #fff;
}

/* $1 - Normal state on all levels with NO Child Elements
----------------------------------------------------------------------------*/

/* 2nd Menu Normal State*/

ul#mainmenu-nav li:hover li a,
ul#mainmenu-nav li.iehover li a,
/* 3rd Menu Normal State*/
ul#mainmenu-nav li:hover li:hover li a,
ul#mainmenu-nav li.iehover li.iehover li a,
/* 4th Menu Normal State*/
ul#mainmenu-nav li:hover li:hover li:hover li a,
ul#mainmenu-nav li.iehover li.iehover li.iehover li a {
	float: none;
	padding: 0 20px 0 10px;
	color: #ccc;
	display: block;
	border: none;
	margin: 0;
	line-height: 28px;
	font-weight: normal;
	cursor:pointer;
	font-family: Trebuchet MS;
	font-size: 1.1em;
	letter-spacing:0.06em;
	background-image:none;
}

/* $2 - Hover state on all levels with NO Child Elements
----------------------------------------------------------------------------*/
/* 2nd Menu Hover Persistence */
ul#mainmenu-nav li:hover li a:hover,
ul#mainmenu-nav li:hover li:hover a,
ul#mainmenu-nav li.iehover li a:hover,
ul#mainmenu-nav li.iehover li.iehover a,
/* 3rd Menu Hover Persistence */
ul#mainmenu-nav li:hover li:hover li a:hover,
ul#mainmenu-nav li:hover li:hover li:hover a,
ul#mainmenu-nav li.iehover li.iehover li a:hover,
ul#mainmenu-nav li.iehover li.iehover li.iehover a,
/* 4th Menu Hover Persistence */
ul#mainmenu-nav li:hover li:hover li:hover li a:hover,
ul#mainmenu-nav li:hover li:hover li:hover li:hover a,
ul#mainmenu-nav li.iehover li.iehover li.iehover li a:hover,
ul#mainmenu-nav li.iehover li.iehover li.iehover li.iehover a {
	color: #fff;
	margin: 0;
}

/* $3 - Normal state on all levels with Child Elements
----------------------------------------------------------------------------*/
/* 2nd Menu Normal State - With Child Elements */
ul#mainmenu-nav li:hover li a.hassubchild,
ul#mainmenu-nav li.iehover li a.hassubchild,
/* 3rd Menu Normal State - With Child Elements */
ul#mainmenu-nav li:hover li:hover li a.hassubchild,
ul#mainmenu-nav li.iehover li.iehover li a.hassubchild,
/* 4th Menu Normal State - With Child Elements */
ul#mainmenu-nav li:hover li:hover li:hover li a.hassubchild,
ul#mainmenu-nav li.iehover li.iehover li.iehover li a.hassubchild {
	float: none;
	padding: 0 20px 0 10px;
	background: url(../images/hassubchild.gif) no-repeat 97% 10px;
	color: #ccc;
	border-right: none;
	margin: 0;
}

/* $4 - Hover state on all levels with Child Elements
----------------------------------------------------------------------------*/
/* 2nd Menu Hover Persistence - With Child Elements */
ul#mainmenu-nav li:hover li a.hassubchild:hover,
ul#mainmenu-nav li:hover li:hover a.hassubchild,
ul#mainmenu-nav li.iehover li a.hassubchild:hover,
ul#mainmenu-nav li.iehover li.iehover a.hassubchild,
/* 3rd Menu Hover Persistence - With Child Elements */
ul#mainmenu-nav li:hover li:hover li a.hassubchild:hover,
ul#mainmenu-nav li:hover li:hover li:hover a.hassubchild,
ul#mainmenu-nav li.iehover li.iehover li a.hassubchild:hover,
ul#mainmenu-nav li.iehover li.iehover li.iehover a.hassubchild {
	color: #fff;
}

/* $4 - Active state on all levels with Child Elements
----------------------------------------------------------------------------*/

#mainmenu-nav ul #active_menu-nav {
	font-weight: normal;
	background-color: #111 !important;
}

/* $4 - Active state on all levels with Child Elements
----------------------------------------------------------------------------*/
ul#mainmenu-nav ul ul,
ul#mainmenu-nav ul ul ul {
	display: none;
	position: absolute;
	top: 5px;
	left: 200px;
	margin: 0;
}

ul#mainmenu-nav ul {
	font-size: 10px;
}

ul#mainmenu-nav ul ul li {
	width: 200px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#mainmenu-nav li:hover ul ul,
ul#mainmenu-nav li:hover ul ul ul,
ul#mainmenu-nav li.iehover ul ul,
ul#mainmenu-nav li.iehover ul ul ul {
	display: none;
}

ul#mainmenu-nav li:hover ul,
ul#mainmenu-nav ul li:hover ul,
ul#mainmenu-nav ul ul li:hover ul,
ul#mainmenu-nav li.iehover ul,
ul#mainmenu-nav ul li.iehover ul,
ul#mainmenu-nav ul ul li.iehover ul {
	display: block;
}

ul#mainmenu-nav li ul a {
	border-left: 10px solid green;
}

/* $3 - Side menu
----------------------------------------------------------------------------*/

ul.menu {
	margin:-9px -10px 0 -10px;
}

ul.menu li {
	background: transparent url(../images/sidenav-sep.png) bottom repeat-x;
	padding:0 0 1px 0;
	width: 190px;
}

ul.menu li a {
    display: block;
    padding-left: 25px;
    text-decoration: none;
    font:normal 1.1em/29px Arial;
    color:#333;
	text-decoration:none;
	background: url(../images/mbg.gif) 9px 10px no-repeat;
}

ul.menu li a:hover {
	display: block;
	color:#333;
	text-decoration:none;
	background-color:#FDFEF1;
}