/*	========================================================================
	1-3 LEVELS VERTICAL ACCORDION MENU WITH OPTIONAL IMAGES

	CONTENT
	0.	GENERAL STRUCTURE - Change if neccassary
	1.	BASIC MENU STRUCTURE - Don't change!
	2.	COMMON STYLES - For SPAN (define the height of lists) DIV AND A
	3.	GROUPS STYLES - First Menu Level
	4.	ALL STYLES BELLOW GROUPS- From Category to Sub-Sub-Category
	======================================================================== */

/*	===================================================== 
	===================================================== 
0.	GENERAL STRUCTURE - Change if neccassary
	===================================================== 
	===================================================== */

/*	The ID for jQuery					|--> DON'T CHANGE
********************************************************* */
#sxMenuAccordion {}

/*	The Menu BG and Menu Headers		|--> CAN BE CHANGED
********************************************************* */
.sxMenuBG {
	clear: both;
	line-height: 100%;
	padding: 0;
	margin: 1px 0 25px 0;
}

.sxMenuBG h1 {
	line-height: 100%;
	padding: 8px 0;
	margin: 0;
	font-size: 15px;
}

/*	===================================================== 
	===================================================== 
1.	BASIC STRUCTURE - Don't CHANGE these styles 
	===================================================== 
	===================================================== */

/*	General Menu styles					|--> DON'T CHANGE
********************************************************* */
.sxMenuBG ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.sxMenuBG div {
	cursor: pointer;
}

.sxMenuBG a, 
.sxMenuBG div, 
.sxMenuBG span {line-height: 100%;}

/*	Basic style for all li/a/img		|--> DON'T CHANGE
********************************************************* */
.sxMenuBG li {vertical-align: top !important;}
.sxMenuBG ul li a {display:block;}
.sxMenuBG ul li img {vertical-align: middle;}

/*********************************************************************************************
					START DESIGNING THE MENU FROM THESE LINES AND BELLOW
**********************************************************************************************/

/*	=====================================================
	=====================================================
2.	Common Styles for SPAN, A, and DIV 
	=====================================================
	===================================================== */

/* ==================================================
	A. Define Minimum height of Lists when no images are used: span within div's and a's 
	|--> Change ONLY Padding
===================================================== */
.sxMenuBG ul li span {
	display: inline-block;
	cursor: pointer;
	padding: 6px 0;
	*height: 100%;
	*vertical-align: middle;
}
.sxMenuBG ul li ul li span {padding: 4px 0;}
.sxMenuBG ul li ul li ul li span {padding: 2px 0;}

/* ==================================================
	B. Common Font Styles for All clickable Menu Levels: As and DIVs
	|-> Define ONLY FONT STYLES: Colors, Weight and Size
===================================================== */
.sxMenuBG a,
.sxMenuBG div {font-weight: bold; color: #06d;}
.sxMenuBG a:hover,
.sxMenuBG div:hover,
.sxMenuBG div.open {color: #c00;}

.sxMenuBG li > a,
.sxMenuBG li > div {font-size: 9.5pt;}
.sxMenuBG li li > a,
.sxMenuBG li li > div {font-size: 8pt;}
.sxMenuBG li li li > a,
.sxMenuBG li li li > div {font-size: 7.5pt;}
.sxMenuBG li li li li > a {}

/* ==================================================
	C.	Common Backgrounds for all clickable Menu Levels: As and DIVs
		You can than change these values for every level
===================================================== */
/*
	Levels that not contain sublevels (Links A)
***************************************************** */
.sxMenuBG li a {
	background: url('../imgPG/sx_dotArR1.png') 2px center no-repeat;
	padding: 0 0 0 15px;
	border-bottom: 0;
}
.sxMenuBG ul > li > a:hover {
	background: url('../imgPG/sx_dotArR4.png') 2px center no-repeat;
}

/*==
	MENU WITH IMAGES - change the above styles for A
	Replace left padding and left background image with right ones
=====================================================*/
.sxMenuBG li a.imgMenu {
	background: url('../imgPG/sx_dotArR1.png') 98% center no-repeat;
	padding: 0 15px 0 0;
}
.sxMenuBG li a.imgMenu:hover {
	background: #fff url('../imgPG/sx_dotArR4.png') 98% center no-repeat;
}

/*
	Levels that contain sublevels (Tags DIV)
***************************************************** */
.sxMenuBG div {
	clear: both;
	background: url('../imgPG/sx_dotArUD1.png') 2px center no-repeat;
	padding: 0 0 0 20px;
	border-bottom: 1px solid #fff;
}

.sxMenuBG div:hover {
	background: url('../imgPG/sx_dotArD4.png') 2px center no-repeat;
}
.sxMenuBG div.open {
	background: url('../imgPG/sx_dotArU4.png') 2px center no-repeat;
	border-bottom: 1px solid #000;
}

/*==	
	MENU WITH IMAGES - change the above DIV styles (2D)
	Remove left padding (if any) and left background image
=====================================================*/
.sxMenuBG div.imgMenu {
	background: none;
	padding: 0;
}

.sxMenuBG div.imgMenu:hover,
.sxMenuBG div.imgMenu.open {
	background: #fff;
	padding: 0;
}

/* ==================================================
	D.	Left Margins for all List Levels
	|-> You can than change these values for every level
===================================================== */

/*	Group Level
***************************************************** */
.sxMenuBG > ul {}

/*	All List levels bellow Groups 
***************************************************** */
.sxMenuBG ul ul {
	margin-left: 18px;
}

/*	===================================================== 
	===================================================== 
3.	GROUPS STYLES - First Menu Level
	===================================================== 
	===================================================== */

/*	The First Menu Level - Groups
	You can also change Common styles for includeing As and DIVs that are defined in 2C.
	background: #eee url('../imgPG/gradHWT.png') left top repeat-y;
***************************************************** */
.sxMenuBG > ul > li {
	padding: 1px 0;
}
.sxMenuBG > ul > li:hover {}

/*	===================================================== 
	===================================================== 
4.	ALL STYLES BELLOW GROUPS- From Category to Sub-Sub-Category
	=====================================================
	The same as Grou Styles, in this version
	===================================================== */

/*	Define styles for ALL li and li:hover 
	You can also change Common styles for includeing As and DIVs that are defined in 2C.
	background: #eee url('../imgPG/gradHWT.png') left top repeat-y;
***************************************************** */
.sxMenuBG li li {
	padding: 1px 0;
}
.sxMenuBG li li:hover {
}



/* 
	END
*/