/******************************************************************************/
/* common */

body {
	overflow: hidden;
}

/* ul are without indents, indent is done on anchor elements on PC */
#nav.settings ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

/* all anchors are raw texts in ablock prepared for further styling */
#nav.settings a {
	text-decoration: none;
}

#nav.settings.deviceInIntegratedState li.menuDisabled4IntegratedDevice {
    display: none;
}

/******************************************************************************/
/* big screen */

/* space on the left side of the menu page */
body.PCView > * {
	margin-left: 10px;
 }

/* vertical centering of the menu labels */
body.PCView #nav.settings a			{ display: block; line-height: 28px; }
body.PCView #nav.settings a span	{ display: inline-block; line-height: normal; vertical-align: middle; }

/* font & color of the menu labels  */
body.PCView #nav.settings a span {
	color: #FFFFFF;
	font-family: Arial Unicode MS,Sans-Serif;
	font-size: 11px;
}

/* disabled menu label */
body.PCView #nav.settings a.disabled { cursor: not-allowed; }
body.PCView #nav.settings a.disabled span {
	color: #555555;
    text-shadow: 0px 0px 4px #555555;
}

/* B&O image */
body.PCView #header .navLogo {
	background-image: url('../images/logoBO.jpg');
	background-repeat: no-repeat;
	background-position: 16px 0px; /* width of circled dot (+? it's padding right) */
	height: 57px; /* jpg height */
}

body.PCView #header .menuTitle {
	display: none;
}

/* menu levels indent, note: (16+4) stands for circledDot16x16+padding */
body.PCView #nav.settings ul { padding-left: 0px; }
body.PCView #nav.settings > ul > li > a { padding-left: 0px; }
body.PCView #nav.settings > ul > li > ul > li > a { padding-left: 24px; }
body.PCView #nav.settings > ul > li > ul > li > ul > li > a { padding-left: 48px; }
body.PCView #nav.settings > ul > li > a > span { width: 212px; } /* 240 - 0px - (16+4) - 8(reserve) */
body.PCView #nav.settings > ul > li > ul > li > a > span { width: 188px; }  /* 240 - 24px - (16+4) - 8(reserve) */
body.PCView #nav.settings > ul > li > ul > li > ul > li > a > span { width: 160px; }  /* 240 - 48px - (16+4) - 8(reserve) */

/* any line */
body.PCView #nav.settings li > a {
	border-color: transparent;
	border-style: solid;
	border-width: 1px;
}

/* any line - adding space holder for cicled dot on selected line */
body.PCView #nav.settings li > a:before {
	content: url('../images/transparent16x16.png');
	padding-right: 4px;
}	

/* selected line - highlighted */
body.PCView #nav.settings li.selected > a {
	background-image: url( '../images/bgLinks.jpg' );
	background-size: 100% 100%;
	background-repeat: no-repeat;
	
	/*background: radial-gradient(ellipse at top, rgb(90, 101, 106) 10%, rgb(14, 18, 19) 70%, rgb(0, 0, 0) 100%);
	background-repeat: no-repeat;
	border-image-source: radial-gradient(ellipse at 50% 45%, #eeffff 50%, #000000 95%);
	border-image-slice: 1;
	border-image-width: 1px 0px 1px 0px;
	border-image-outset: 0;
	border-image-repeat: round;	*/	
}

/* selected line - adding circled dot */
body.PCView #nav.settings li.selected > a:before {
	content: url('../images/circledDot16x16.png');
	padding-right: 4px;
	position: relative;
	top: 4px;
	left: -0px;
}

/* menu items showing/hiding - visible state */
body.PCView #nav.settings ul > li {
   	transition: max-height 2s;
	max-height: 384px;
	overflow: hidden;
}

/* menu items showing/hiding - hidden state (top is always visible, it cannot be hidden) */
body.PCView #nav.settings ul ul:not(.opened) > li {
	max-height: 0px;
    transition: max-height 0.5s;
}

/******************************************************************************/
/* small screen */

body.iPhoneView {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

body.iPhoneView #header .menuTitle {
	background-image: url('../images/iPhone/bgTitleIphone.jpg');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 100% 100%;
	min-height: 49px; /* jpg height */
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 12px; /* vertical layout */
}

/* font & collor */
body.iPhoneView #header .menuTitle span {
	color: #FFFFFF;
	font-family: /*BeoFont Bold,Arial Unicode MS,*/Sans-Serif;
	font-size: 14px;
	font-weight: bold;
	max-width: 232px; /* left+right padding: back arrow must not overlay the title */
}

/* vertical centering of the menu title */
body.iPhoneView #header .menuTitle		{ display: block; line-height: 49px; /* jpg height */ }
body.iPhoneView #header .menuTitle span	{ display: inline-block; line-height: normal; vertical-align: middle; }

body.iPhoneView #header .navLogo {
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	/* furher styled per device */
}

body.iPhoneView #header {
}

/* links styling, every menu item have line at the bottom */
body.iPhoneView #nav.settings a {
	background-image: url( '../images/iPhone/line.png' );
	background-size: 100% 1px;
	background-position: bottom;
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-right: 24px; /* to not cross the '>' symbol on right side */
}

/* font & color of the menu labels  */
body.iPhoneView #nav.settings a span {
    color: #AAAAAA;
    font-family: BeoFont,Arial Unicode MS,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
}

/* vertical centering of the menu labels */
body.iPhoneView #nav.settings a			{ display: block; line-height: 40px; }
body.iPhoneView #nav.settings a span	{ display: inline-block; line-height: normal; vertical-align: middle; }

/* disabled menu label */
body.iPhoneView #nav.settings a.disabled { cursor: not-allowed; }
body.iPhoneView #nav.settings a.disabled span {
	color: #333333;
    text-shadow: 0px 0px 4px #333333;
}

/* menu levels indent (no indent for all levels) */
body.iPhoneView #nav.settings ul { padding-left: 0px; }

/* hide all not opened li */
body.iPhoneView #nav.settings ul:not(.opened) > li {
	max-height: 0px;
	overflow: hidden;
}

/* hide all links of li (menu nodes) that stay opened but they are not as deep as the selected level */
body.iPhoneView #nav.settings ul:not(.selected) > li > a {
	max-height: 0px;
	overflow: hidden;
}

/* li elements of currently selected level have arrow on right  */
body.iPhoneView #nav.settings ul.selected > li {
	background-image: url( '../images/iPhone/arrowIphone.png' );
	background-position: 96% center;
	background-repeat: no-repeat;
}

/******************************************************************************/
/* debug */

body.debug #nav.settings a span:after {
	content: " [menuitem]";
}

/*body.debug #nav.settings a:after {
	content: " [" attr(href) "]";
}*/

body.iPhoneView.debug #header .menuTitle span:before {
	content: "[MENU TITLE]";
}