@charset "UTF-8";

body {
	overflow: hidden;
}

body.iPhoneView {
	width: 285px; /* 300px - left padding */
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
}

/******************************************************************************/
/* Page Logo (inside or outside of #header, it doesn't matter) */

body.PCView .Bo-page-logo
{
	background-repeat: no-repeat;
	background-position: top center;
	/* further styled per device */
}

body.iPhoneView .Bo-page-logo
{
	/* no logo on iPhoneView */
}

/******************************************************************************/
/* Page Title (inside or outside of #header, it doesn't matter) */

body.PCView .Bo-page-title
{
	vertical-align: bottom;
	overflow: hidden;
	text-align: left;
	text-transform: uppercase;
	margin-bottom: 15px;
}

body.PCView .Bo-page-title span
{
	font-size: 27px;
	font-family: BeoFont, Arial Unicode MS, Sans-Serif;
	color: #eeeeee;
}

body.PCView .Bo-page-title.centered
{
	text-align: center;
}

body.PCView .Bo-page-title.centered span
{
	position: relative;
	left: -15px; /* ad-hoc value */
}

body.iPhoneView .Bo-page-title /* similar style like .welcomeTitle */
{
	background-image: url('../images/iPhone/bgTitleIphone.jpg');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 100% 100%;
	line-height: 49px; /* jpg height */
	text-align: center;
	text-transform: uppercase;
	margin-right: 15px; /* compensation to body left padding */
}

body.iPhoneView .Bo-page-title 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 .Bo-page-title		{ display: block; line-height: 49px; /* jpg height */ }
body.iPhoneView .Bo-page-title span	{ display: inline-block; line-height: normal; vertical-align: middle; }

body.iPhoneView .Bo-page-title
{
	margin-bottom: 18px; /* vertical layout */
}



/******************************************************************************/
/* Page Layout - Columns */

@media all and (min-width: 680px)
{
	/* columns (340px width) are side by side */
	body.PCView .Bo-page-2columns-wrapper {
		width: 680px;
	}
}
@media all and (max-width: 679px)
{
	/* columns (340px width) are up and bellow  */
	body.PCView .Bo-page-2columns-wrapper {
		width: 340px;
	}
}

body.PCView .Bo-page-2columns-wrapper .Bo-page-column {
	float: left;
}

body.PCView .Bo-page-column {
	width: 340px;
}

/* up and down on iPhoneView (and little aside from left) */
body.iPhoneView .Bo-page-column {
	max-width: 275px;
}

body.PCView .Bo-page-column.singleCenteredColumn {
	margin-left: auto;
	margin-right: auto;
}

/* clearfix */
body.PCView .Bo-page-2columns-wrapper:before,
body.PCView .Bo-page-2columns-wrapper:after {
    content: " ";
    display: table;
}
body.PCView .Bo-page-2columns-wrapper:after {
    clear: both;
}
body.PCView .Bo-page-2columns-wrapper {
    *zoom: 1;
}

/******************************************************************************/
/* 2Columns Table */

.Bo-table-2columns {
	/* cellpadding="0" cellspacing="0" border="0" */
	padding: 0px; 
	border-spacing: 0px;
	border-collapse: collapse;
}

.Bo-table-2columns {
	width: 100%;
	margin-bottom: 15px; /* vertical layout */
}

body.PCView .Bo-table-2columns td {
	text-align: left;
}

body.iPhoneView .Bo-table-2columns td {
	color: #FFFFFF;
	/*width: 160px;*/ /* old design */
	width: auto;
}

/******************************************************************************/
/* Page Section (title) */

body.PCView .Bo-page-section-title {
	color: #FFFFFF;
	font-family: /*BeoFont Bold,*/Arial Unicode MS,Sans-Serif;
	font-size: 16px;
	text-transform: uppercase;	
	margin-bottom: 15px; /* vertical layout */
}

body.iPhoneView .Bo-page-section-title {
	font-size: 13px;
	font-family: /*BeoFont Bold,*/Arial Unicode MS,Sans-Serif;
	margin-bottom: 15px; /* vertical layout */
}

/******************************************************************************/
/* Special Vertical modifier */

.Bo-no-space-bellow {
	margin-bottom: 0px !important; /* vertical layout */
	min-height: 0px !important; /* vertical layout */
}

.Bo-no-space-bellow .Bo-radio-label ,
.Bo-no-space-bellow .Bo-checkbox-label {
	padding-bottom: 0px !important; /* vertical layout */
}

.Bo-no-space-bellow input {
	margin-bottom: 0px !important; /* vertical layout */
}

.Bo-quart-space-bellow {
	/* note some elements use margin of 15px some 20px (on iPhoneView or PCView) this solution is an approximation of half */
	margin-bottom: 4px !important; /* vertical layout */
}

/******************************************************************************/
/* Input Section - it has two subchilds of the following width ..             */
/*   - on PCView:      1st 170px  and  2nd 144px                              */
/*   - on iPhoneView:  1st 145px  and  2nd 125px (if not forced to be two lined by: Bo-iphone-multiline) */

body.PCView .Bo-form .Bo-input-section {
	min-height: 20px; /* if there is not clear both inside this element, this is need to get height>0 */
	margin-bottom: 12px; /* vertical layout */
}

body.iPhoneView .Bo-form .Bo-input-section {
	min-height: 36px;
}

body.iPhoneView .Bo-form .Bo-input-section input ,
body.iPhoneView .Bo-form .Bo-input-section .Bo-datetime-wrapper ,
body.iPhoneView .Bo-form .Bo-input-section .Bo-dropdown-wrapper {
	margin-bottom: 18px; /* vertical layout */
}

body.iPhoneView .Bo-form .Bo-input-section.Bo-iphone-multiline {
	min-height: 54px; /* 36 + 18 */ /* if there is not clear both inside this element, this is need to get height>0 */
}

/* in case there is no label on the left, craate space for it */
body.PCView .Bo-form .Bo-input-section > .Bo-datetime-wrapper:first-child ,
body.PCView .Bo-form .Bo-input-section > .Bo-dropdown-wrapper:first-child {
	margin-left: 170px;
}

/* clearfix */
body .Bo-form .Bo-input-section:before,
body .Bo-form .Bo-input-section:after {
    content: " ";
    display: table;
}
body .Bo-form .Bo-input-section:after {
    clear: both;
}
body .Bo-form .Bo-input-section {
    *zoom: 1;
}

/******************************************************************************/
/* Predefined fontsized for autoFontzize (just on PC view)                    */

/* normal font-size is 12px */
body.PCView .Bo-form .Bo-input-section input.smallerFont {
	font-size: 11px;
}

body.PCView .Bo-form .Bo-input-section input.littleFont {
	font-size: 10px;
}
/******************************************************************************/
/* Input Sections Grouping - sections are little closer when grouped          */

/* inputs in a group are more close to each other */
body.PCView .Bo-form .Bo-inputs-group .Bo-input-section {
	margin-bottom: 5px; /* vertical layout */
}
/* at the group end, there should be some space as after normal input */
body.PCView .Bo-form .Bo-inputs-group {
	margin-bottom: 12px; /* vertical layout */ /* 5 + 7, inner marging of last input 5px in group is overlayed */
}
/* inputs in a group are more close to each other */
body.iPhoneView .Bo-form .Bo-inputs-group .Bo-input-section input ,
body.iPhoneView .Bo-form .Bo-inputs-group .Bo-input-section .Bo-datetime-wrapper ,
body.iPhoneView .Bo-form .Bo-inputs-group .Bo-input-section .Bo-dropdown-wrapper {
	margin-bottom: 5px; /* vertical layout */
}
/* at the group end, there should be some space as after normal input */
body.iPhoneView .Bo-form .Bo-inputs-group {
	margin-bottom: 20px; /* vertical layout */ /* 5 + 15, inner marging of last input 5px in group is overlayed */
}

/* clearfix */
.Bo-inputs-group:before,
.Bo-inputs-group:after {
    content: " ";
    display: table;
}
.Bo-inputs-group:after {
    clear: both;
}
.Bo-inputs-group {
    *zoom: 1;
}

/******************************************************************************/
/* Modal like icons usabe within 1. header and 2. column */

i.Bo-modal-icon {
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	margin-top: 16px;
	margin-bottom: 8px;
}

body.PCView #header i.Bo-modal-icon {
	margin-top: 0px; /* disable top margin on PC, there is too much space below logo */
}

body.PCView .Bo-page-column i.Bo-modal-icon {
	max-width: 320px; /* icon <i> centering on PCView column */
}

/* icons : */

i.Bo-modal-icon.ok {
	background-image: url('../images/ok.jpg');
	height: 29px; /* jpg height */
}

/******************************************************************************/
/* Input Section - missing/invalid value marks */

.Bo-form .Bo-input-section.missingValue ,
.Bo-form .Bo-input-section.invalidValue {
	overflow: visible;
	display: inline-block;
}

.Bo-form .Bo-input-section.missingValue:after ,
.Bo-form .Bo-input-section.invalidValue:after {
	display: inline-block;
	width: 12px;
	margin-right: -12px;
	text-align: right;
	position: relative;
	line-height: 1px; /* will be centered by: top */
}

.Bo-form .Bo-input-section.missingValue:after { content: url('../images/requiredField.png'); }
.Bo-form .Bo-input-section.invalidValue:after { content: url('../images/requiredFieldError.png'); }

/* .. vert-pos correction */

/* on iPhoneView - single lined label+editbox */
body.iPhoneView .Bo-form .Bo-input-section.missingValue:after ,
body.iPhoneView .Bo-form .Bo-input-section.invalidValue:after {
	top: 10px; /* 36px input, 8px asterisk => (36/2)-8 */
}

/* on iPhoneView - multi lined label+editbox */
body.iPhoneView .Bo-form .Bo-input-section.Bo-iphone-multiline.missingValue:after ,
body.iPhoneView .Bo-form .Bo-input-section.Bo-iphone-multiline.invalidValue:after {
	top: 28px; /* 18px label, 36px input, 8px asterisk => 18+(36/2)-8 */
}

/* on PCView - (always) single lined label+editbox */
body.PCView .Bo-form .Bo-input-section.missingValue:after ,
body.PCView .Bo-form .Bo-input-section.invalidValue:after {
	top: 2px; /* 20px label, 8px asterisk => (20/2)-8 */
}

/* on iPhoneView - single lined, but when editbox is on left side */
body.iPhoneView .Bo-form .Bo-input-section.Bo-input-left.missingValue:after ,
body.iPhoneView .Bo-form .Bo-input-section.Bo-input-left.invalidValue:after {
	left: -145px; /* 270 - 125 */
}

/* on PCView - single lined, but when editbox is on left side */
body.PCView .Bo-form .Bo-input-section.Bo-input-left.missingValue:after ,
body.PCView .Bo-form .Bo-input-section.Bo-input-left.invalidValue:after {
	left: -170px; /* 314 - 144 */
}

/******************************************************************************/
/* Input Label */

.Bo-input-label {
    word-wrap: break-word;
    overflow-wrap: break-word;	
}

body.PCView .Bo-input-label:not(.Bo-text) {
	width: 162px; /* 170px - padding */
	float: left;
	padding-right: 8px;
}

body.iPhoneView .Bo-input-label:not(.Bo-text) {
	width: 145px;
	float: left;
	line-height: 36px;
	display: block;
}

body.iPhoneView .Bo-iphone-multiline .Bo-input-label:not(.Bo-text) {
	width: 270px;
	float: left;
	line-height: 18px;
}

/******************************************************************************/
/* setup of cursors for buttons */

.Bo-form input[type=button] ,
.Bo-form input[type=submit] {
	cursor: pointer;
}

.Bo-form input[type=button]:disabled ,
.Bo-form input[type=submit]:disabled {
	cursor: not-allowed;
}

/******************************************************************************/
/* Bo-button-wide and Bo-button-wide menuLikeButton */

body.PCView .Bo-form input.Bo-button-wide {
	background-position: center;	
	background-image: url("../images/bgButtonBig.png");
	background-repeat: no-repeat;
	background-size: 314px 20px; /* png size */
	width: 314px; /* png width */
	height: 20px; /* png height */
	border: 0 solid #000000;
	color: #4C4C4C;
	font-size: 11px;
	text-transform: uppercase;
}

body.iPhoneView .Bo-form input.Bo-button-wide {
	background-position: center;	
	background-image: url("../images/iPhone/bgButtonIphone.png");
	background-repeat: no-repeat;
	background-size: 270px 36px; /* png size */
	width: 270px; /* png width */
	height: 36px; /* png height */
	border: 0 solid #000000;
	color: #000000;
	font-family: BeoFont, Arial Unicode MS, Sans-Serif;
	font-size: 12px;
	text-transform: uppercase;
}

body.PCView .Bo-form input.Bo-button-wide:hover ,
body.PCView .Bo-form input.Bo-button-wide:disabled ,
body.PCView .Bo-form input.Bo-button-wide:disabled:hover {
	background-image: url("../images/bgButtonBigHover.png");
}

body.iPhoneView .Bo-form input.Bo-button-wide:hover ,
body.iPhoneView .Bo-form input.Bo-button-wide:disabled ,
body.iPhoneView .Bo-form input.Bo-button-wide:disabled:hover {
	/* semi transparent layer over button image: */
	box-shadow: inset 0 0 0 18px rgba(0,0,0,.22); /* 18px is background height div 2 */
}

body.PCView .Bo-form input.Bo-button-wide.menuLikeButton {
	color: #FFFFFF;
	font-size: 10px;
	background-image: url("../images/btnAdvancedSettings.jpg");	
}

body.iPhoneView .Bo-form input.Bo-button-wide.menuLikeButton {
	color: #FFFFFF;
	font-size: 10px;
	background-image: url("../images/btnAdvancedSettings.jpg");
	background-size: 270px 23px; /* png height, not width */	
	height: 23px; /* png height */
}

body .Bo-form input.Bo-button-wide.menuLikeButton:hover {
	background-image: url("../images/btnAdvancedSettingsHover.jpg");	
}

/* negative modificator for Bo-button-wide .. */

body.PCView .Bo-form input.Bo-button-wide.negative {
	background-image: url("../images/bgButtonBlack.png"); /* will be stretched to size alredy set */
	color: #CCCCCC !important;
}
body.PCView .Bo-form input.Bo-button-wide.negative:hover ,
body.PCView .Bo-form input.Bo-button-wide.negative:disabled ,
body.PCView .Bo-form input.Bo-button-wide.negative:disabled:hover {
	background-image: url("../images/bgButtonBlackHover.png"); /* will be stretched to size alredy set */
}
body.iPhoneView .Bo-form input.Bo-button-wide.negative {
	background-image: url("../images/bgButtonBlack.png"); /* will be stretched to size alredy set */
	color: #CCCCCC !important;
}
body.iPhoneView .Bo-form input.Bo-button-wide.negative:hover ,
body.iPhoneView .Bo-form input.Bo-button-wide.negative:disabled ,
body.iPhoneView .Bo-form input.Bo-button-wide.negative:disabled:hover {
	/* semi transparent layer over button image (see above) */
}

/******************************************************************************/
/* Bo-button-no and Bo-button-yes buttons */

body.PCView .Bo-form input.Bo-button-no ,
body.PCView .Bo-form input.Bo-button-yes {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 144px 20px; /* background-image png size */
	width: 144px; /* png width */
	height: 20px; /* png height */
	margin-left: 6px; margin-right: 7px; /* 144 + 13 == desired width 157px, 157 is half of 314px size of Bo-button-wide */
	border: 0 solid #000000;
	color: #4C4C4C;
	font-size: 11px;
	text-transform: uppercase;
	float: left;
}

body.iPhoneView .Bo-form input.Bo-button-no ,
body.iPhoneView .Bo-form input.Bo-button-yes {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 125px 36px; /* resized! png size */
	width: 125px; /* resized! png width */
	height: 36px; /* resized! png height */
	margin-left: 5px; margin-right: 5px; /* 125 + 10 == desired width 135px, 135 is half of 270px size of Bo-button-wide */
	border: 0 solid #000000;
	color: #000000;
	font-family: BeoFont, Arial Unicode MS, Sans-Serif;
	font-size: 12px;
	text-transform: uppercase;
	float: left;
}

.Bo-form input.Bo-button-no {
	background-image: url("../images/bgButtonBlack.png");
	color: #CCCCCC !important;
}

.Bo-form input.Bo-button-yes {
	background-image: url("../images/bgButton.png");
}

.Bo-form input.Bo-button-no:hover ,
.Bo-form input.Bo-button-no:disabled {
	background-image: url("../images/bgButtonBlackHover.png");
}

.Bo-form input.Bo-button-yes:hover ,
.Bo-form input.Bo-button-yes:disabled {
	background-image: url("../images/bgButtonHover.png");
}

/******************************************************************************/
/* Bo Special Check Box & Radio */

.Bo-radio-input ,
.Bo-checkbox-wrapper input[type=checkbox] {
	display: none;
}

/* .Bo-radio-label:before (position absolute) with the drawing needs to be positioned relative to .Bo-input-section's 0 0 */
.Bo-input-section {
	position: relative;
}

/* shared styling and base for drawings */
.Bo-radio-label:before ,
.Bo-checkbox-wrapper {
	background-position: left center;
	background-size: 14px 12px; /* half of the png size */
	background-repeat: no-repeat;
	width: 20px;
	margin-right: 4px;
	height: 18px;
	padding: 0px;
}
.Bo-radio-label:before {
	position: absolute;
	display: inline-block;
	content: " ";
	left: 0px;
}
.Bo-checkbox-wrapper {
	display: block;
	float: left;
}

input[type="radio"]:not(:checked) + .Bo-radio-label:before {
	background-image: url("../images/radiobtnUnchecked.png");
}

input[type="radio"]:checked + .Bo-radio-label:before {
	background-image: url("../images/radiobtnChecked.png");
}

.Bo-checkbox-wrapper:not(.checked) {
	background-image: url("../images/checkboxOff.png");
}

.Bo-checkbox-wrapper.checked {
	background-image: url("../images/checkboxOn.png");
}

.Bo-radio-label ,
.Bo-checkbox-label {
	padding: 3px;
	display: block;
	float: right; /* text will begin at min-width (max-width) from right */
}

body.PCView .Bo-radio-label {
	/* should always fit to right side of the radiobtn, text starts at fixed distance from radiobtn */
	width: 298px; /* max - 12px */
}

body.PCView .Bo-checkbox-label {
	/* should always fit to right side of the checkbox, long/multilined text comes littlebit closer to the checkbox */
	max-width: 310px; /* 340 - 24px for checkbox - 2*3px padding */
	min-width: 298px; /* max - 12px */
}

body.iPhoneView .Bo-radio-label {
	/* should always fit to right side of the radiobtn, text starts at fixed distance from radiobtn */
	width: 233px; /* max - 12px */
}

body.iPhoneView .Bo-checkbox-label {
	/* should always fit to right side of the checkbox, long/multilined text comes littlebit closer to the checkbox */
	max-width: 245px; /* 275 - 24px for checkbox - 2*3px padding */
	min-width: 233px; /* max - 12px */
}

.Bo-radio-input ,
.Bo-checkbox-wrapper {
	cursor: pointer;
}

.Bo-radio-input + label[for].Bo-radio-label ,
.Bo-checkbox-wrapper + label[for].Bo-checkbox-label {
	cursor: pointer;
}

/* disabled... */

.Bo-radio-input:disabled ,
.Bo-checkbox-wrapper.disabled {
	cursor: not-allowed;
}

.Bo-radio-input:disabled + label.Bo-radio-label[for] ,
.Bo-checkbox-wrapper.disabled + label.Bo-checkbox-label[for] {
	cursor: not-allowed;
}

input[type="radio"]:disabled + .Bo-radio-label ,
.Bo-checkbox-wrapper.disabled + .Bo-checkbox-label {
	color: #333333; /* #4C4C4C; */
}

input[type="radio"]:disabled:not(:checked) + .Bo-radio-label:before {
	background-image: url("../images/radiobtnUncheckedDisabled.png");
}

input[type="radio"]:disabled:checked + .Bo-radio-label:before {
	background-image: url("../images/radiobtnCheckedDisabled.png");
}

.Bo-checkbox-wrapper.disabled {
	background-image: url("../images/checkboxOffDisabled.png");
}

.Bo-checkbox-wrapper.checked.disabled {
	background-image: url("../images/checkboxOnDisabled.png");
}

/******************************************************************************/
/* Bo-devices-list */

.Bo-devices-list {
	list-style-type: none;
	margin-left: 0px;
	padding: 2px 4px;
	border-width: 1px;
	border-color: white;
	border-style: solid;
	clear: both;
}

.Bo-devices-list li {
	padding-bottom: 1px;
	padding-top: 1px;
}

.Bo-devices-list li:not(:last-child) {
	border-bottom-color: #222222;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.Bo-devices-list li.selected {
	background-color: #292929;
}

.Bo-devices-list li.selected ,
.Bo-devices-list li.selected span {
	color: #FFFFFF;
}

.Bo-devices-list li.disabled ,
.Bo-devices-list li.disabled span {
	color: #555555;
}

.Bo-devices-list li.selected.disabled ,
.Bo-devices-list li.selected.disabled span {
	color: #777777;
}

.Bo-devices-list li span.Bo-link-source:before {
	font-family: BeoIcons;
	content: "L";
}

body.iPhoneView .Bo-devices-list {
	width: 260px; /* 270 - border - padding */
}

body.PCView .Bo-devices-list {
	width: 304px; /* 314 - border - padding */
}

/******************************************************************************/
/* caution */

.Bo-caution {
	padding-left: 20px; /* png width */
	min-height: 13px; /* png height */
	background-position: left center;
	background-image: url("../images/warningSmall.png");
	background-size: 20px 13px; /* png size */
	background-repeat: no-repeat;	
}

/******************************************************************************/
/* processing (rotating circle image)*/

.Bo-processing {
	padding-left: 20px; /* gif width */
	min-height: 20px; /* gif height */
	background-position: left center;
	background-image: url("../images/BO_processing.gif");
	background-size: 20px 20px; /* gif size */
	background-repeat: no-repeat;		
}

/******************************************************************************/
/* Text block */

.Bo-text {
	margin-top: 20px; /* vertical layout */
	margin-bottom: 20px; /* vertical layout */
}

body.PCView .Bo-text
{
	text-align: left;
	vertical-align: top;
}

body.iPhoneView .Bo-text
{
	text-align: left;
	vertical-align: top;
	width: 265px; /* 270 - left+right padding */
	padding-left: 5px;
	padding-right: 0px;
}

/* text in a role of label, turn off bottom margin on PCView */
body.PCView .Bo-text.Bo-input-label
{
	margin-bottom: 0px; /* vertical layout */
}

/* text in a role of label, smaller bottom margin on iPhone */
body.iPhoneView .Bo-text.Bo-input-label
{
	margin-bottom: 10px; /* vertical layout (half of .Bo-text) */
}

/* text in a role close to checkbox */
body.PCView .Bo-text.Bo-checkbox-guide
{
	margin-top: 0px; /* vertical layout */
	margin-bottom: 4px; /* vertical layout */
}

/* text in a role close to checkbox */
body.iPhoneView .Bo-text.Bo-checkbox-guide
{
	margin-top: 0px; /* vertical layout */
	margin-bottom: 8px; /* vertical layout */
}

/******************************************************************************/
/* Big OK Image section */

.Bo-ok-image {
	background-image: url("../images/ok.jpg");
	background-repeat: no-repeat;
	background-position: center;
	height: 35px;
	margin-bottom: 15px; /* vertical layout */
}

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

body.debug .Bo-page-title span:after
{
	content: "[Bo-page-title]";
}

body.debug .Bo-table-2columns td:after
{
	content: "[td]";
}

body.debug .Bo-page-section-title:after
{
	content: "[section-title]";	
}

body.debug .Bo-input-label:after
{
	content: "[label]";
}

body.debug .Bo-radio-label:after
{
	content: "[radio-label]";
}

body.debug .Bo-checkbox-label:after
{
	content: "[checkbox-label]";
}

body.debug .Bo-text:after
{
	content: "[text]";
}

body.debug .Bo-devices-list:after
{
	content: "[bluetooth-list]";
}