html {
	height: 100%;
	font-size: 15px;
    display: block;
    font-family: 'Segoe UI', 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 100%;
    background: #D4D4D4;
}
a {
	text-decoration: none;
}
a.inline { color: #F78F1E; }
a.inline:hover, a.inline:active, a.inline:visited { color: #4AAA42; }

a li {
	list-style: none;
}
			
.container { width: 100%; overflow: hidden; }
.containerLogin { width: 100%; overflow: hidden; height: 100%; }

.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.slideout-panel {
  position: relative;
  z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

.mainLogin { 
    padding: 0px 0px 0px 0px;
    height: 100%;
    background: D4D4D4; 
    color: #ffffff;
}

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

.loginHeader {
	position: relative;
	height: 46px;
	border-bottom: 2px solid #000000;
    margin-left: 84px;
}

.loginForm {
    border-left: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
    margin: 0px;
    padding: 20px 20px 20px 20px;
}

.loginRj45 { 
    background: url("images/rj45v.png") no-repeat center;
    height: 33px; 
    width: 11px;
    margin: -20px 0px 0px -26px;
}

.loginFormLine {
	margin: 10px 0px 0px 0px; 
	min-height: 32px;
}

.loginErrors {
    min-height: 20px; line-height: 20px;
    color: #cc423f;
}

.loginFormTxt, .loginFormTxtError { 
    width: 248px;
	height: 30px;
	line-height: 30px;
	font-size: 1em;
	padding: 0px 5px 0px 5px;
	float: left;
    border: 1px solid #aaaaaa;
}

.loginFormTxtError { border: 1px solid #cc423f; }

.loginFormChb {
    color: #000000;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

#btn_login { 
    margin: 0px 10px 0px 0px;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	float: left;
	color: #ffffff;
	cursor: pointer;
    padding: 0px 10px 0px 35px;
	background: #7cc576 url(images/buttonIcons_30x30.png) no-repeat 0% -390px; 
	border: 1px solid #37a82d;
}

[role="navigation"], [role="navigationInactive"], [role="navigationTouchLayout"] {
	background-color: #333333;
    margin-left: 0px;
	position: fixed;
    left:0; top:0;
	overflow: auto; 
	max-height: 100%;
	min-height: 100%;
    width: 270px;
	padding: 0;
    transition: .2s all ease;		
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
    z-index: 1;
}
[role="navigationInactive"] { 
    left: -50px;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    -moz-opacity:0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
}
[role="navigationTouchLayout"] { width: 35%; overflow-x: hidden; }

[role="subNavigation"], [role="subNavigationActive"], [role="subNavigationTouchLayout"] {
    position: fixed;
    left: 270px;
    top: 0;
    z-index: 9;
    overflow: auto;
    max-height: 100%;
    min-height: 100%;
    padding: 0;
    width: 230px;
    transition: .2s all ease;
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    background-color: #003DA5;
}
[role="subNavigationActive"] { left: 40px; }
[role="subNavigationTouchLayout"] { left: 35%; }

[role="main"], [role="mainTouchLayout"] {
	background-color: #D4D4D4;
    color: #000000;
    margin-left: 0;
	position: fixed /*!important*/;
	overflow: auto; 
	max-height: 100%;
	min-height: 100%;
    width: 100%;
	padding: 0;
    transition: .2s all ease;		
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
    z-index: 10;
    left: 0px;
}
[role="mainTouchLayout"] { width: 65%; left: 35%; }

#contentContainer, #popupContentContainer, #popupVideoContentContainer, #popupPlaylistDetailContainer {
    font-size: 1em;
	height: 100%;
    margin: 49px 1px 0px 1px;
}
#contentContainer {
    background-color: #D4D4D4;
}

.active-nav [role="navigation"] {
    left:0px;
}

.active-nav [role="subNavigation"], .active-nav [role="subNavigationActive"] {
    display: block;
}

.active-nav [role="main"]{
	margin-left: 270px;
    overflow-y: hidden;
}
.active-nav [role="mainTouchLayout"]{
	margin-left: 0px;
    overflow-y: hidden;
}

.headerContainer { 
    position: fixed;
    width: 100%;
    background-color: #FFFFFF;
    z-index: 20;
}

.headerUnderline {
    height: 3px;
    background: #D4D4D4;
    width: 100%;
    z-index: 20;
}
#popupVideoHeaderContainer { display: block; }

#header{
	position: relative;
	height: 46px;
	background-color: #FFFFFF; /*#333645*/
	border-bottom: 2px solid #000000;
    margin-left: 140px;
}
#header.nologo { margin-left: 0px; }

#popupHeader {
    position: relative;
    height: 46px;
    background-color: #FFFFFF; /*#333645*/
    border-bottom: 2px solid #000000;
    color: #333333;
    line-height: 46px;
}

#menu_button, #headerBack_button {
	position: absolute;
	top:0;
	left: 0px;
	background: url(images/menuIcons_header_b.png) no-repeat 0px 0px;
	height: 46px;
	width: 46px;
	margin: 0px 0px 0px 2px;
	z-index: 1;
	cursor: pointer;
}
#menu_button.close { background: url(images/menuIcons_header_b.png) no-repeat 0px -46px; }

#headerBack_button { background: url(images/menuIcons_header_b.png) no-repeat 0px -92px; display: none; }

#closepopup_button, #closepopup_LandscapeButton {
	position: absolute;
	top:0;
	right: 0px;
	background: url(images/popupHeaderCloseItem_b.png) no-repeat 0px 0px;
	height: 46px;
	width: 46px;
	margin: 0px 2px 0px 2px;
	z-index: 101;
	cursor: pointer;
}
#closepopup_LandscapeButton { background: url(images/popupCloseItem.png) no-repeat 0px 0px; display: none; position: fixed; }
			
.header_logo {
	position: absolute;
	top:2px;
	left: -85px;
	background: url(images/logo_b.png) no-repeat left bottom;
	height: 46px;
	width: 235px;
	margin: 0px 0px 0px 0px;
    cursor: pointer;
}
.header_title {
	position: absolute;
	top:0px;
	left: 60px;
	height: 46px;
	width: 80%;
	margin: 0px 0px 0px 0px;
    line-height: 46px;
    font-size: 1.2em;
    color: #333333;
    display: none;
    white-space: nowrap;
    overflow: hidden;
}

#header_title {
	height: 46px;
    line-height: 46px;
	width: 235px;
	margin: 0px 0px 0px 0px;
    overflow: hidden;
    margin: 0px 0px 0px 20px;
    color: #333333;
    font-size: 1.2em;
    text-align: left;
}

.menuHeaderContainer { 
    position: fixed;
    width: 100%;
    background-color: #333333;
    z-index: 2;
}

.menuFooterContainer { 
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #333333;
    z-index: 2;
}

#btn_menuSearch {
    position: relative;
    float: left;
    width: 48px;
    height: 48px;
    background: #003DA5 url(images/search_menu.png) no-repeat center;
    cursor: pointer;
}

.btnSpotifySearch { 
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    margin: 5px;
    background: #333333 url(images/search_menu.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
}list-title

.menuSearchTxt { 
    margin: 5px 5px 5px 5px;
	padding: 0px 5px 0px 5px;
	height: 38px;
	line-height: 38px;
	width: 202px;
	border:0px;
	float: left;
	font-size: 1.2em;
}

.spotifySearchTxt { 
    margin: 5px 5px 5px 5px;
	padding: 0px 5px 0px 5px;
	height: 30px;
	line-height: 30px;
	width: 70%;
	border:0px;
	float: left;
	font-size: 1.2em;
}

.menuNavButton, .menuNavButton_active {
    position: relative;
    height: 40px;
    margin: 2px 7px 2px 7px;
    width: 40px;
    float: left;
    cursor: pointer;
}
.menuNavButton_active { margin: 0px 5px 0px 5px; border: 1px solid #ffffff; padding: 1px 1px 1px 1px; }
#menuNavHome { background: #1BA1E2 url(images/menuNav_icons.png) no-repeat 0px 0px; }
#menuNavAudio { background: #647687 url(images/menuNav_icons.png) no-repeat 0px -200px; }
#menuNavRooms { background: #E51400 url(images/menuNav_icons.png) no-repeat 0% -40px; }
#menuNavEnergy { background: #60A917 url(images/menuNav_icons.png) no-repeat 0% -80px; }
#menuNavWeather { background: #F4DF1E url(images/menuNav_icons.png) no-repeat 0% -120px; }
#menuNavSettings { background: #6A00FF url(images/menuNav_icons.png) no-repeat 0% -160px; }

#menuContentContainer { 
    height: 100%;
    width: 100%;
    font-size: 1em;
	height: 100%;
    margin: 50px 1px 50px 1px;
}

#menuGroupList, #audioMenuZonesContainer { 
    margin: 0px 0px 0px 0px;
	padding: 0;
    font-size: 1em;
}

li.menuItem, li.menuItem_active {
	height: 40px;
    line-height: 40px;
	margin: 0px 0px 0px 0px;
	color: #999999;
    text-align:center;
    list-style: none;
	cursor: pointer;
}

li.menuItem_active { 
    color: #FFFFFF;
	text-shadow: #000000 1px 2px 2px;
}

[role="contentFormButton"], [role="contentFormButtonLeft"], [role="contentFormButtonRight"], [role="listItemButton"], [role="moodslistItemButton"] {
	margin: 0px 10px 0px 0px;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	padding: 0px 10px 0px 10px;
	float: left;
	color: #ffffff;
	cursor: pointer;
    background: #444444;
	border: 1px solid #000000;
}

[role="contentFormButtonRight"] { float: right; margin: 0px 0px 0px 10px; }
[role="listItemButton"] { float: right; margin: 10px 10px 0px 0px; }

.iconTextButton_start { 
    padding: 0px 10px 0px 35px;
	background: #7cc576 url(images/buttonIcons_30x30.png) no-repeat 0% 0px; 
	border: 1px solid #37a82d; 
}
.iconButton_start { 
    padding: 0px 0px 0px 30px;
	background: #7cc576 url(images/buttonIcons_30x30.png) no-repeat 0% 0px; 
	border: 1px solid #37a82d; 
}

.list-item-wrapper { 
    width: 100%;
    float: left;
}
.list-item-grid-sizer { width: 100%; }
.list-item, .list-item-80, .list-item-40 {
	position: relative;
	padding: 0px 0px 0px 0px;
	color: #000000;
	height: 50px;
    margin: 1px;
	cursor: pointer;
	background-color: #ffffff;
}
.list-item-80 { height: 80px; margin: 1px; }
.list-item-40 { height: 40px; margin: 1px; }
.list-item:hover, .list-item:focus, .list-item-80:hover, .list-item-80:focus, .list-item-40:hover, .list-item-40:focus { background-color: #DDDDDD; }
.list-item:active { background-color: #CCCCCC; }

.list-icon, .list-icon-active, .list-icon-inactive, .list-icon-deviation, .list-icon-0, .list-icon-1, .list-icon-2, .list-icon-3, .list-icon-4, .list-icon-5, .list-icon-6, .list-icon-7, .list-icon-8, .list-icon-9, .list-icon-10 {
	width: 50px;
	height: 50px;
	float: left;
}
			
[role="lightingR"] .list-icon { background: url(images/toggleRLights50x50.png) no-repeat 0px 50px; }
[role="lightingR"] .list-icon-active { background: url(images/toggleRLights50x50.png) no-repeat 0px 0px; }
[role="lightingR"] .list-icon-inactive { background: url(images/toggleRLights50x50.png) no-repeat 0px -50px; }
[role="lightingD"] .list-icon { background: url(images/toggleDLights50x50.png) no-repeat 0px 50px; }
[role="lightingD"] .list-icon-0 { background: url(images/toggleDLights50x50.png) no-repeat 0px 0px; }
[role="lightingD"] .list-icon-1 { background: url(images/toggleDLights50x50.png) no-repeat 0px -50px; }
[role="lightingD"] .list-icon-2 { background: url(images/toggleDLights50x50.png) no-repeat 0px -100px; }
[role="lightingD"] .list-icon-3 { background: url(images/toggleDLights50x50.png) no-repeat 0px -150px; }
[role="lightingD"] .list-icon-4 { background: url(images/toggleDLights50x50.png) no-repeat 0px -200px; }
[role="lightingD"] .list-icon-5 { background: url(images/toggleDLights50x50.png) no-repeat 0px -250px; }
[role="lightingD"] .list-icon-6 { background: url(images/toggleDLights50x50.png) no-repeat 0px -300px; }
[role="lightingD"] .list-icon-7 { background: url(images/toggleDLights50x50.png) no-repeat 0px -350px; }
[role="lightingD"] .list-icon-8 { background: url(images/toggleDLights50x50.png) no-repeat 0px -400px; }
[role="lightingD"] .list-icon-9 { background: url(images/toggleDLights50x50.png) no-repeat 0px -450px; }
[role="lightingD"] .list-icon-10 { background: url(images/toggleDLights50x50.png) no-repeat 0px -500px; }
[role="lightingD"] .list-icon-inactive { background: url(images/toggleDLights50x50.png) no-repeat 0px -550px; }
[role="socket"] .list-icon { background: url(images/toggleRSocket50x50.png) no-repeat 0px 50px; }
[role="socket"] .list-icon-active { background: url(images/toggleRSocket50x50.png) no-repeat 0px 0px; }
[role="socket"] .list-icon-inactive { background: url(images/toggleRSocket50x50.png) no-repeat 0px -50px; }
[role="ventilationR"] .list-icon { background: url(images/toggleRVentilation50x50.png) no-repeat 0px 50px; }
[role="ventilationR"] .list-icon-active { background: url(images/toggleRVentilation50x50.png) no-repeat 0px 0px; }
[role="ventilationR"] .list-icon-inactive { background: url(images/toggleRVentilation50x50.png) no-repeat 0px -50px; }
[role="ventilationD"] .list-icon { background: url(images/toggleRVentilation50x50.png) no-repeat 0px 50px; }
[role="ventilationD"] .list-icon-0, 
[role="ventilationD"] .list-icon-1, 
[role="ventilationD"] .list-icon-2, 
[role="ventilationD"] .list-icon-3, 
[role="ventilationD"] .list-icon-4, 
[role="ventilationD"] .list-icon-5, 
[role="ventilationD"] .list-icon-6, 
[role="ventilationD"] .list-icon-7, 
[role="ventilationD"] .list-icon-8, 
[role="ventilationD"] .list-icon-9, 
[role="ventilationD"] .list-icon-10 { background: url(images/toggleRVentilation50x50.png) no-repeat 0px 0px; }
[role="ventilationD"] .list-icon-inactive { background: url(images/toggleRVentilation50x50.png) no-repeat 0px -50px; }
[role="airConditioningR"] .list-icon { background: url(images/toggleRCooling50x50.png) no-repeat 0px 50px; }
[role="airConditioningR"] .list-icon-active { background: url(images/toggleRCooling50x50.png) no-repeat 0px 0px; }
[role="airConditioningR"] .list-icon-inactive { background: url(images/toggleRCooling50x50.png) no-repeat 0px -50px; }
[role="airConditioningD"] .list-icon { background: url(images/toggleRCooling50x50.png) no-repeat 0px 50px; }
[role="airConditioningD"] .list-icon-0, 
[role="airConditioningD"] .list-icon-1, 
[role="airConditioningD"] .list-icon-2, 
[role="airConditioningD"] .list-icon-3, 
[role="airConditioningD"] .list-icon-4, 
[role="airConditioningD"] .list-icon-5, 
[role="airConditioningD"] .list-icon-6, 
[role="airConditioningD"] .list-icon-7, 
[role="airConditioningD"] .list-icon-8, 
[role="airConditioningD"] .list-icon-9, 
[role="airConditioningD"] .list-icon-10 { background: url(images/toggleRCooling50x50.png) no-repeat 0px 0px; }
[role="airConditioningD"] .list-icon-inactive { background: url(images/toggleRCooling50x50.png) no-repeat 0px -50px; }
[role="screensUp"] .list-icon { background: url(images/toggleScreenUp50x50.png) no-repeat 0px 50px; }
[role="screensUp"] .list-icon-active { background: url(images/toggleScreenUp50x50.png) no-repeat 0px 0px; }
[role="screensUp"] .list-icon-inactive { background: url(images/toggleScreenUp50x50.png) no-repeat 0px -50px; }
[role="screensDown"] .list-icon { background: url(images/toggleScreenDown50x50.png) no-repeat 0px 50px; }
[role="screensDown"] .list-icon-active { background: url(images/toggleScreenDown50x50.png) no-repeat 0px 0px; }
[role="screensDown"] .list-icon-inactive { background: url(images/toggleScreenDown50x50.png) no-repeat 0px -50px; }
[role="lock"] .list-icon { background: url(images/toggleLock50x50.png) no-repeat 0px 50px; }
[role="lock"] .list-icon-active { background: url(images/toggleLock50x50.png) no-repeat 0px 0px; }
[role="lock"] .list-icon-inactive { background: url(images/toggleLock50x50.png) no-repeat 0px -50px; }
[role="video"] .list-icon { background: url(images/listVideoIcon.png) no-repeat center; }
[role="mood"] .list-icon { background: url(images/listMoodIcon.png) no-repeat center; }
[role="deviation"] .list-icon { background: url(images/listDeviationIcon.png) no-repeat center; }
[role="dmx"] .list-icon, [role="led"]:hover .list-icon, [role="led"]:focus .list-icon { background: url(images/listDmxIcon.png) no-repeat 0% 0px; }
[role="dmx"] .list-icon-inactive { background: url(images/listDmxIcon.png) no-repeat 0% 0px; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
[role="dmx"]:hover .list-icon, [role="led"]:focus .list-icon { background-position: 0% -50px; }
[role="audio"] .list-icon { background: url(images/listAudioIcon.png) no-repeat 0px 0px; }
[role="multimedia"] .list-icon { background: url(images/listMultimediaIcon.png) no-repeat center; }
[role="irScenario"] .list-icon { background: url(images/listIrScenarioIcon.png) no-repeat center; }
[role="heating"] .list-icon { background: url(images/listHeatingIcon.png) no-repeat 0px -50px; }
[role="heating"] .list-icon-active { background: url(images/listHeatingIcon.png) no-repeat 0px 0px; }
[role="heating"] .list-icon-inactive { background: url(images/listHeatingIcon.png) no-repeat 0px -50px; }
[role="cooling"] .list-icon { background: url(images/toggleRCooling50x50.png) no-repeat 0px -50px; }
[role="cooling"] .list-icon-active { background: url(images/toggleRCooling50x50.png) no-repeat 0px 0px; }
[role="cooling"] .list-icon-inactive { background: url(images/toggleRCooling50x50.png) no-repeat 0px -50px; }
[role="temperature"] .list-icon { background: url(images/listDeviationIcon.png) no-repeat 0px 0px; }
[role="temperature"] .list-icon-active { background: url(images/listDeviationIcon.png) no-repeat 0px 0px; }
[role="temperature"] .list-icon-inactive { background: url(images/listDeviationIcon.png) no-repeat 0px 0px; }
[role="radioStation"] .list-icon { 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(images/defaultRadioStation_50.png); 
}
[role="playlist"] .list-icon { 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(images/defaultPlaylist_50.png); 
}
[role="album"] .list-icon { 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(images/defaultAlbum_50.png); 
}
[role="search"] .list-icon { 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(images/search_50.png); 
}
[role="input"] .list-icon { background: url(images/lineIn_50.png) no-repeat center; }
[role="script"] .list-icon { background: url(images/listScript.png) no-repeat center; }
	
.list-middle1 {
	color: #000000;
	font-size: 1em;
	position: absolute;
	left: 60px;
	top: 0;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
}
			
.list-top1 {
	color: #000000;
	font-size: 1em;
	position: absolute;
	left: 60px;
	top: 0px;
    height: 30px;
    line-height: 30px;
	vertical-align: middle;
    overflow: hidden;
}
			
.list-bottom1 {
	color: #888888;
	font-size: 0.8em;
	position: absolute;
	left: 60px;
	top: 30px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}

.list-right-info {
	color: #000000;
	font-size: 1.2em;
	position: absolute;
	right: 10px;
	top: 0;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
}

.list-tempInfo {
	color: #000000;
	font-size: 1.2em;
	position: absolute;
	right: 10px;
	top: 0;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
}

.list-tempInfoDeviation, .list-tempInfoCalendar {
	color: #888888;
	font-size: 0.8em;
	position: absolute;
	right: 10px;
	top: 28px;
    height: 20px;
    line-height: 20px;
    padding: 0px 0px 0px 25px;
    background: url(images/listTypeOfTemp.png) no-repeat 0px 0px;
}

.list-tempInfoDeviation { background: url(images/listTypeOfTemp.png) no-repeat 0px -20px; }


.list-dimState { 
    color: #888888;
	font-size: 0.8em;
	position: absolute;
	left: 0px;
	top: 50px;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.list-actionContainer { 
	position: absolute;
	left: 10px;
	top: 50px;
    height: 30px;
    line-height: 30px;
}

.list-sliderContainer { 
	position: absolute;
	left: 60px;
	top: 50px;
    height: 30px;
    line-height: 30px;
    width: 250px;
}

.list-dmxHistoryItem { float: left; height: 16px; width: 32px; margin: 7px 1px 5px 1px; border: 1px solid #333333; cursor: pointer; }

.list-iconDmx { 
    width: 50px;
    height: 50px;
    float: right;
    background: url(images/iconColorPicker.png) no-repeat center;
}

.list-iconIrPower { 
    width: 50px;
    height: 50px;
    float: right;
    background: url(images/iconIrPower.png) no-repeat center;
}

.list-item-preview { 
    position: relative; 
    width: 49%; 
    padding-bottom: 49%; 
    float:left; 
    background-color: #ffffff; 
    margin: 0.5%; 
    color: #333333; 
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.list-item-wrapper .list-item-preview { 
    width: 99%; 
    padding-bottom: 99%; 
}

.list-item-preview2 { 
    position: relative; 
    padding-bottom: 30%; 
    background-color: #ffffff; 
    margin: 1px 1px 1px 1px; 
    color: #333333; 
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transition: .2s all ease;		
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
}

.list-noItems {
    color: #000000;
    padding-top: 20%;
    text-align: center;
}

.list-songIndex {
    width: 30px;
	height: 40px;
    line-height: 40px;
	float: left;
    color: #888888;
    font-size: 1.1em;
    text-align: center;
}

.list-title {
	color: #000000;
	font-size: 0.9em;
	position: absolute;
	left: 35px;
	top: 0px;
    height: 25px;
    line-height: 25px;
	vertical-align: middle;
    overflow: hidden;
}
			
.list-artist {
	color: #888888;
	font-size: 0.8em;
	position: absolute;
	left: 35px;
	top: 25px;
    height: 15px;
    line-height: 12px;
    overflow: hidden;
}

.list-duration {
	color: #888888;
	font-size: 0.8em;
	position: absolute;
	right: 10px;
	top: 0;
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
}

.searchResults_info { 
    color: #000000;
    font-size: 1em;
    padding: 10px 0px 10px 20px;
}

#settingsMenuProfileContainer { margin: 0px 10px 0px 10px; border-bottom: 1px solid #999999; cursor: pointer; }
#settingsMenuAvatar { 
    height: 100px;
    background: url(images/defaultAvatar.png) no-repeat center;
}

#settingsMenuUsername, #settingsMenuFullname { 
    font-size: 1.4em;
    color: #999999;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
#settingsMenuFullname { font-size: 0.8em; }

#settingsMenuListContainer, #audioMenuSourcesContainer { 
    margin: 0px 10px 0px 10px;
	padding: 10px 10px 10px 10px;
    font-size: 1em;
    border-bottom: 1px solid #999999;
}

#settingsMenuListContainer .menuItem, #audioMenuSourcesContainer .menuItem {
	height: 50px;
    line-height: 50px;
	margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 50px;
	color: #999999;
    text-align: left;
    list-style: none;
	cursor: pointer;
    background: url(images/settingMenuIcons.png) no-repeat 0px 0px;
}
#audioMenuSourcesContainer .menuItem { background: url(images/audioMenuIcons.png) no-repeat 0px 0px; }
#settingsMenuListContainer .menuItem[role="settingsMenuPresent"] { background-position: 0px 0px; }
#settingsMenuListContainer .menuItem[role="settingsMenuAbsent"] { background-position: 0px -50px; }
#settingsMenuListContainer .menuItem[role="settingsMenuVacation"] { background-position: 0px -100px; }
#settingsMenuListContainer .menuItem[role="settingsMenuDutch"] { background-position: 0px -150px; }
#settingsMenuListContainer .menuItem[role="settingsMenuFrench"] { background-position: 0px -200px; }
#settingsMenuListContainer .menuItem[role="settingsMenuEnglish"] { background-position: 0px -250px; }
#settingsMenuListContainer .menuItem[role="settingsMenuConfiguration"] { display: none; background: url(images/settingMenuConfig.png) no-repeat 0px center; }
#settingsMenuListContainer .menuItem[role="settingsMenuAbout"] { background-position: 0px -300px; }
#settingsMenuListContainer .menuItem[role="settingsMenuLogout"] { background-position: 0px -350px; }
#audioMenuSourcesContainer .menuItem[role="audioMenuRadioStaions"], #audioMenuSourcesContainer .menuItem[role="audioMenuRadioStaionsTouch"] { background-position: 0px 0px; }
#audioMenuSourcesContainer .menuItem[role="audioMenuPlaylists"], #audioMenuSourcesContainer .menuItem[role="audioMenuPlaylistsTouch"] { background-position: 0px -50px; }
#audioMenuSourcesContainer .menuItem[role="audioMenuSpotify"], #audioMenuSourcesContainer .menuItem[role="audioMenuSpotifyTouch"] { background-position: 0px -100px; }
#audioMenuSourcesContainer .menuItem[role="audioMenuDeezer"], #audioMenuSourcesContainer .menuItem[role="audioMenuDeezerTouch"] { background-position: 0px -150px; }
#audioMenuSourcesContainer .menuItem[role="audioMenuInput"], #audioMenuSourcesContainer .menuItem[role="audioMenuInputTouch"] { background-position: 0px -200px; }

.subMenuHeader { 
    padding: 10px 10px 10px 10px;
    font-size: 0.8em;
    color: #ffffff;
}

.subMenuList { 
    margin: 0px 0px 0px 0px;
	padding: 5px 10px 10px 10px;
    font-size: 1em;
}
li.subMenuItem, li.subMenuItem_nl, li.subMenuItem_fr, li.subMenuItem_en { 
    font-size: 1em;
    height: 50px;
    line-height: 50px;
    padding: 0px 10px 0px 15px;
    cursor: pointer;
    color: #ffffff;
    text-align: left;
    list-style: none;
}
li.subMenuItem_nl, li.subMenuItem_fr, li.subMenuItem_en { padding: 0px 10px 0px 65px; background: url(images/settingMenuIcons.png) no-repeat 15px 0px }
li.subMenuItem_nl { background-position: 15px -150px; }
li.subMenuItem_fr { background-position: 15px -200px; }
li.subMenuItem_en { background-position: 15px -250px; }

li.subMenuInfoHeader { 
    font-size: 0.8em;
    height: 30px;
    line-height: 30px;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    list-style: none;
}
li.subMenuInfoLabel { 
    font-size: 1.2em;
    height: 30px;
    line-height: 30px;
    margin: 0px 0px 25px 0px;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    list-style: none;
}
.subMenuButton_cancel {
	margin: 10px 15px 0px 0px;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	padding: 0px 10px 0px 35px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -210px;
	float: right;
	color: #ffffff;
	cursor: pointer;
    border-color: #ffffff;
	border: 1px solid;
}

.defaultGroupTypeButton, .lightingGroupTypeButton { position: relative; width: 99%; padding-bottom: 49.5%; float:left; background-color: #ffffff; margin: 0.5%; color: #333333; cursor: pointer; }
.defaultGroupTypeButton { width: 49%; padding-bottom: 49%; }
.groupTypeButtonIcon { 
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 85%;
    text-align: center;
    vertical-align: bottom;
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75%;
}
.groupTypeButtonLabel { 
    position: absolute;
    left:0; bottom: 0;
    font-size: 1em;
    width: 100%;
    height: 15%; 
    line-height: 1.5em;
    text-align: center;
    vertical-align: bottom;
}
.groupInfoButtonContainer { 
    position: absolute;
    right:0; top: 0;
    width: 50%;
    height: 50%; 
}
.lightingGroupTypeButton .groupTypeButtonIcon { width: 50%; background-image: url(images/groupLightingIcon_250.png) }
.lightingGroupTypeButton .groupTypeButtonLabel, .LightingGroupTypeButton .groupTypeButtonIcon { width: 50%; }
.groupInfoButtonContainer div { height: 50%; vertical-align: middle; }
.groupInfoConsumptionIcon, .groupInfoOnOffIcon { 
     height: 30%;
     background: url(images/groupConsumptionIcon.png) no-repeat center;
     background-size: 25%;
}
.groupInfoOnOffIcon { background: url(images/groupOnOffIcon.png) no-repeat center; background-size: 25%; }
.groupInfoLabel {
    font-size: 1em;
    height: 15%; 
    line-height: 1.5em;
    text-align: center;
}

/* Audio Album items */
.audioAlbumButton_container { width: 200%; }
.audioAlbumButton { position: relative; width: 19.8%; padding-top: 19.8%; margin: 0.1%; float:left; background-color: #ffffff; color: #333333; cursor: pointer; }
.audioAlbumButton_tablet { position: relative; width: 49.8%; padding-top: 49.8%; margin: 0.1%; float:left; background-color: #ffffff; color: #333333; cursor: pointer; }
.audioAlbumButton_touch { position: relative; width: 33.1%; padding-top: 33.1%; margin: 0.1%; float:left; background-color: #ffffff; color: #333333; cursor: pointer; }
.audioAlbumButtonIcon,.audioAlbumButtonIconDefault { 
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    padding-top: 100%;
    text-align: center;
    vertical-align: top;
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.audioAlbumButtonIconDefault { background-size: 80%; }
.audioAlbumButtonTitle { margin: 5px; font-size: 1em; height: 20px; line-height: 20px; overflow-x: hidden; color: inherit; }
.audioAlbumButtonSubTitle { margin: 5px; font-size: 0.8em; height: 15px; line-height: 15px; overflow-x: hidden; color: inherit; }
.audioAlbumGroupButton { 
    position: relative; 
    width: 98.84%; 
    height: 30px;
    line-height: 30px;
    font-size: 1em;
    background-color: #333333; 
    padding-left: 0.5%;
    padding-right: 0.5%;
    margin: 0.08%; 
    color: #FFFFFF; 
    cursor: pointer;
}

/* Multimedia remote */
#remoteMainContainer { width: 98%; margin-left: auto; margin-right: auto; margin-top: 2%; margin-bottom: 2%; max-width: 350px; }
#remoteMainContainer:after { 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
#remoteControlContainer, #remoteNavigateContainer, #remoteExtraContainer { width: 98%; margin: 2%; height: 100%; float: left; max-width: 350px; }
.remoteControlButton100, .remoteControlButton50, .remoteControlButton33, .remoteControlButton25, .remoteControlButton20 {
    position: relative; 
    width: 99%; 
    height: 60px; 
    float:left; 
    margin: 0.5%;
}
.remoteControlButton50 { width: 49%; }
.remoteControlButton33 { width: 32%; margin: 0.66%; }
.remoteControlButton25 { width: 24%; margin: 0.5%; }
.remoteControlButton20 { width: 19%; margin: 0.5%; }

.remoteControlButtonActive { background-color: #ffffff; color: #333333; cursor: pointer; }
.remoteControlButtonInActive { background-color: #ffffff; color: #333333; filter: alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2; }
.remoteControlButton_back { background: transparent url(images/remoteControlBack.png) no-repeat center; }
.remoteControlButton_exit { background: transparent url(images/remoteControlExit.png) no-repeat center; }
.remoteControlButton_menu_main { background: transparent url(images/remoteControlHome.png) no-repeat center; }
.remoteControlButton_power_toggle { background: transparent url(images/remoteControlPower.png) no-repeat center; }
.remoteControlButton_volume_up, .remoteControlButton_channel_up { background: transparent url(images/remoteControlPlus.png) no-repeat center; }
.remoteControlButton_volume_down, .remoteControlButton_channel_down { background: transparent url(images/remoteControlMinus.png) no-repeat center; }
.remoteControlButton_mute_toggle { background: transparent url(images/remoteControlMute.png) no-repeat center; }
.remoteControlButton_digit_0 { background: transparent url(images/remoteControlDigit0.png) no-repeat center; }
.remoteControlButton_digit_1 { background: transparent url(images/remoteControlDigit1.png) no-repeat center; }
.remoteControlButton_digit_2 { background: transparent url(images/remoteControlDigit2.png) no-repeat center; }
.remoteControlButton_digit_3 { background: transparent url(images/remoteControlDigit3.png) no-repeat center; }
.remoteControlButton_digit_4 { background: transparent url(images/remoteControlDigit4.png) no-repeat center; }
.remoteControlButton_digit_5 { background: transparent url(images/remoteControlDigit5.png) no-repeat center; }
.remoteControlButton_digit_6 { background: transparent url(images/remoteControlDigit6.png) no-repeat center; }
.remoteControlButton_digit_7 { background: transparent url(images/remoteControlDigit7.png) no-repeat center; }
.remoteControlButton_digit_8 { background: transparent url(images/remoteControlDigit8.png) no-repeat center; }
.remoteControlButton_digit_9 { background: transparent url(images/remoteControlDigit9.png) no-repeat center; }
.remoteControlButton_digit_100 { background: transparent url(images/remoteControlNrDigits.png) no-repeat center; }
.remoteControlButton_play { background: transparent url(images/remoteControlPlay.png) no-repeat center; }
.remoteControlButton_pause { background: transparent url(images/remoteControlPause.png) no-repeat center; }
.remoteControlButton_stop { background: transparent url(images/remoteControlStop.png) no-repeat center; }
.remoteControlButton_reverse { background: transparent url(images/remoteControlRewind.png) no-repeat center; }
.remoteControlButton_forward { background: transparent url(images/remoteControlFF.png) no-repeat center; }
.remoteControlButton_record { background: transparent url(images/remoteControlRecord.png) no-repeat center; }
.remoteControlButton_cursor_up { background: transparent url(images/remoteControlUp.png) no-repeat center; }
.remoteControlButton_cursor_left { background: transparent url(images/remoteControlLeft.png) no-repeat center; }
.remoteControlButton_cursor_down { background: transparent url(images/remoteControlDown.png) no-repeat center; }
.remoteControlButton_cursor_right { background: transparent url(images/remoteControlRight.png) no-repeat center; }
.remoteControlButton_cursor_enter { background: transparent url(images/remoteControlOk.png) no-repeat center; }
.remoteControlButton_function_red { background: transparent url(images/remoteControlRed.png) no-repeat center; }
.remoteControlButton_function_green { background: transparent url(images/remoteControlGreen.png) no-repeat center; }
.remoteControlButton_function_yellow { background: transparent url(images/remoteControlYellow.png) no-repeat center; }
.remoteControlButton_function_blue { background: transparent url(images/remoteControlBlue.png) no-repeat center; }
.remoteControlButtonLabel { 
    position: absolute;
    left:0;
    font-size: 1em;
    width: 100%;
    height: 60px; 
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
}

.remoteControlButton_back .remoteControlButtonLabel, .remoteControlButton_exit .remoteControlButtonLabel,
.remoteControlButton_menu_main .remoteControlButtonLabel,
.remoteControlButton_power_toggle .remoteControlButtonLabel,
.remoteControlButton_mute_toggle .remoteControlButtonLabel,
.remoteControlButton_digit_0 .remoteControlButtonLabel, .remoteControlButton_digit_1 .remoteControlButtonLabel, .remoteControlButton_digit_2 .remoteControlButtonLabel, .remoteControlButton_digit_3 .remoteControlButtonLabel,
.remoteControlButton_digit_4 .remoteControlButtonLabel, .remoteControlButton_digit_5 .remoteControlButtonLabel, .remoteControlButton_digit_6 .remoteControlButtonLabel, .remoteControlButton_digit_7 .remoteControlButtonLabel,
.remoteControlButton_digit_8 .remoteControlButtonLabel, .remoteControlButton_digit_9 .remoteControlButtonLabel, .remoteControlButton_digit_100 .remoteControlButtonLabel,
.remoteControlButton_volume_up .remoteControlButtonLabel, .remoteControlButton_channel_up .remoteControlButtonLabel,
.remoteControlButton_volume_down .remoteControlButtonLabel, .remoteControlButton_channel_down .remoteControlButtonLabel,
.remoteControlButton_play .remoteControlButtonLabel, .remoteControlButton_pause .remoteControlButtonLabel, .remoteControlButton_stop .remoteControlButtonLabel,
.remoteControlButton_reverse .remoteControlButtonLabel, .remoteControlButton_forward .remoteControlButtonLabel, .remoteControlButton_record .remoteControlButtonLabel,
.remoteControlButton_cursor_up .remoteControlButtonLabel, .remoteControlButton_cursor_left .remoteControlButtonLabel, .remoteControlButton_cursor_down .remoteControlButtonLabel,
.remoteControlButton_cursor_right .remoteControlButtonLabel, .remoteControlButton_cursor_enter .remoteControlButtonLabel,
.remoteControlButton_function_red .remoteControlButtonLabel, .remoteControlButton_function_green .remoteControlButtonLabel, .remoteControlButton_function_yellow .remoteControlButtonLabel, .remoteControlButton_function_blue .remoteControlButtonLabel { display: none; }

.remoteControlLabel { 
    position: absolute;
    left:0;
    font-size: 1em;
    width: 100%;
    height: 60px; 
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
}

.accessKeypadContainer { 
    width: 240px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 59px;
}

.accessKeypadDot, .accessKeypadDotActive { 
    width: 16px;
    height: 16px;
    margin: 30px 20px 30px 20px;
    border: 2px solid #ffffff;
    float: left;
    border-radius: 50%;
}
.accessKeypadDotActive { background-color: #ffffff }

.accessKeypadButton, .accessKeypadClearButton, .accessKeypadEmptyButton { 
    width: 74px; 
    margin: 2px; 
    float: left; 
    height: 58px; 
    line-height: 58px; 
    background-color: #333333; 
    text-align: center;  
    color: #ffffff;
    border: 1px solid #000000;
    font-size: 1.5em;
    cursor: pointer;
}
.accessKeypadClearButton {
    background: #003DA5 url(images/accessKeypadClear.png) no-repeat center;
    color: #ffffff;
    border: 1px solid #D4D4D4;
}
.accessKeypadButton:active { background-color: #cccccc; color: #000000; }
.accessKeypadClearButton:active { background-color: #cccccc; color: #c31b1b; }
.accessKeypadEmptyButton { border: 0px; width: 76px; height: 60px; background-color: transparent; cursor: default; }
/* Popup styles */
			
[role="bgPopup"], [role="bgPopupHome"], [role="bgPopupAudio"] {  
    display:none;   
    position:fixed;    
    _position:absolute;
    height:100%;    
    width:100%;    
    top:0;    
    left:0;    
    background:#000000;     
    z-index:99;    
}
			
[role="popup"], [role="popupLoading"], [role="popupHome"], [role="popupAudio"] {    
    display:none;    
    position:fixed;    
    _position:absolute;  
    z-index:100;  
    width: 100%;
    margin: 0px 0px 0px 0px;
    text-align: center;
}
[role="popup"] {
    color: #ffffff;
    margin-left: 0;
	position: fixed /*!important*/;
	overflow: auto; 
	max-height: 100%;
	min-height: 100%;
    width: 100%;
	padding: 0;
    transition: .2s all ease;		
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
    left: 0px;
}

[role="bgPopupHome"] { color: #1BA1E2; }
[role="bgPopupAudio"]  { color: #647687; }
[role="popupHome"] .popupAlertBody { color: #ffffff; background-color: #1BA1E2; border-color: #ffffff; }
[role="popupHome"] .popupDdlContainer { color: #1BA1E2; background-color: #1BA1E2; border-color: #ffffff; }
[role="popupAudio"] .popupAlertBody { color: #ffffff; background-color: #647687; border-color: #ffffff; }
[role="popupAudio"] .popupDdlContainer { color: #647687; background-color: #647687; border-color: #ffffff; }

.popupAlertBody { 
    width: 100%; 
    color: inherit; 
    border-color: inherit;
    background-color: inherit;
    padding: 15px 0px 10px 0px;
    background-color: #000000;
    color: #ffffff;
}

[role="popupLoading"] { 
    height: 100px; 
    width: 100px; 
    background: #000000 url(images/loader.gif) no-repeat center; 
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px; 
}

.popupAlertContainer { 
    width: 500px;
    margin: 0px 5px 0px 5px;
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}

.popupAlertTitle { 
    font-size: 1.3em;
    font-weight: 400;
    text-align: left;
    color: inherit;
    margin: 0px 0px 10px 0px;
}

.popupAlertContent { 
    font-size: 1em;
    text-align: left;
    font-weight: 300;
    color: inherit;
}

.popupAlert_buttonLine {
	margin: 5px 10px 5px 5px;
    border-color: inherit;
    color: inherit;
}

[role="popupAlertFormButton"] {
	margin: 10px 0px 0px 5px;
	font-size: 1em;
	height: 30px;
	line-height: 30px;
	padding: 0px 10px 0px 10px;
	float: left;
	color: inherit;
	cursor: pointer;
    border-color: inherit;
	border: 1px solid;
}

.iconTextButton_popupAlertOK { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -180px;
    float: right;
}
			
.iconTextButton_popupAlertCancel { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -210px;
    float: right;
}

.iconTextButton_popupAlertNext { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -90px;
    float: right;
}

.iconTextButton_popupAlertSave { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -150px;
    float: right;
}

.iconTextButton_popupAlertAdd { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -330px;
    float: right;
}

.iconTextButton_popupAlertRegime_0 { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIconsRegime.png) no-repeat 0% 0px;
    float: right;
}

.iconTextButton_popupAlertRegime_1 { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIconsRegime.png) no-repeat 0% -30px;
    float: right;
}

.iconTextButton_popupAlertRegime_2 { 
    padding: 0px 10px 0px 35px;
	background: url(images/buttonIconsRegime.png) no-repeat 0% -60px;
    float: right;
}

.iconTextButton_popupAlertUser { 
    padding: 0px 10px 0px 35px;
    margin: 0px 0px 0px 0px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -540px;
    float: left;
}

.iconTextButton_popupAlertBack { 
    padding: 0px 10px 0px 35px;
    margin: 10px 0px 0px 0px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -60px;
    float: left;
}

.iconTextButton_popupAlertOpen { 
    padding: 0px 10px 0px 35px;
    margin: 10px 0px 0px 0px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -660px;
}

.iconButton_popupAlertNext { 
    padding: 0px 0px 0px 0px;
    width: 30px;
    margin: 10px 0px 0px 5px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% -90px;
    border-color: inherit;
}

.iconButton_popupAlertPlay { 
    padding: 0px 10px 0px 35px;
    margin: 10px 0px 0px 0px;
	background: url(images/buttonIcons_30x30.png) no-repeat 0% 0px;
}

.popupDdlBody { 
    color: inherit; 
    border-color: inherit;
    background-color: inherit;
    padding: 15px 0px 10px 0px;
    overflow: hidden;
}

.popupDdlContainer { 
    max-width: 300px;
    margin: auto;
    color: inherit; 
    background-color: #000000;
    border-color: inherit;
    overflow: hidden;
    position: relative;
}

.popupDdlHeader { 
    padding: 10px 10px 10px 10px;
    font-size: 0.8em;
    color: #ffffff;
}
.popupDdlHeader a { color: #ffffff; }
.popupDdlHeader a:hover { text-decoration: underline; }

.popupDdlFooter { 
    padding: 10px 10px 10px 10px;
    color: #ffffff;
}

.popupDdlList, .popupDdlListForm { 
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px 10px 0px 10px;
    -webkit-overflow-scrolling: touch;
}
.popupDdlListForm { max-height: 400px; }
.popupDdlitem { 
    font-size: 1.2em;
    color: #ffffff;
    padding: 10px 5px 10px 10px;
    cursor: pointer;
}

.popupDdlitem_unselected {
    font-size: 1.2em;
    color: #ffffff;
    padding: 10px 5px 10px 10px;
    cursor: pointer;
    opacity: 0.7;
    -khtml-opacity: 0.7;
    -moz-opacity:0.7;
    filter: alpha(opacity=70);
}

.popupDdlitem_selected {
    font-size: 1.2em;
    color: inherit;
    padding: 5px 5px 5px 25px;
    margin: 10px 0px 10px 0px;
    background-color: #ffffff;
    opacity: 0.7;
    -khtml-opacity: 0.7;
    -moz-opacity:0.7;
    filter: alpha(opacity=70);
    cursor: pointer;
}

			
.popUpCloseIcon {
	position: absolute;
	right: 5px;
	top: -40px;
	height: 40px;
	width: 40px;
	background: url(images/popupCloseItem.png) no-repeat center;
	cursor: pointer;
}

.imgVideoContainer { 
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.popupHeatingSettingColumn {
    width: 50%;
    float: left; 
    color: #FFFFFF;
}

.popupHeatingSettingMinus, .popupHeatingSettingPlus { 
    height: 40px;
    width: 40px;
    margin: 20px 00px 20px 0px;
    margin-left: auto;
    margin-right: auto;
    background: url(images/remoteControlMinus.png) no-repeat center;
    cursor: pointer;
}
.popupHeatingSettingPlus { background: url(images/remoteControlPlus.png) no-repeat center; }

.popupHeatingSettingValue { 
    height: 40px;
    line-height: 40px;
    font-size: 2em;
    margin: 20px 0px 20px 0px;
    text-align: center;
}

.popupHeatingConfirmButton, .popupHeatingStopButton {
    display: table;
	font-size: 1.2em;
	height: 40px;
	line-height: 40px;
	color: #ffffff;
	cursor: pointer;
    padding: 0px 10px 0px 45px;
	background: #7cc576 url(images/buttonIcons_heating.png) no-repeat 0% 0px; 
	border: 1px solid #37a82d;
    margin-left: auto;
    margin-right: auto;
}
.popupHeatingStopButton { 
    background: #d1545a url(images/buttonIcons_heating.png) no-repeat 0% 0px; 
	border: 1px solid #c31b1b;
}

.popupHeatingHeatingButton, .popupHeatingHeatingButton_active, .popupHeatingCoolingButton, .popupHeatingCoolingButton_active { 
    display: table;
	font-size: 1.2em;
	height: 40px;
	line-height: 40px;
	color: #f67f00;
	cursor: pointer;
    padding: 0px 10px 0px 10px;
	border: 1px solid #f67f00;
    margin-left: auto;
    margin-right: auto;
}
.popupHeatingHeatingButton_active { color: #ffffff; background-color: #f99b37; cursor: default; }
.popupHeatingCoolingButton { border: 1px solid #0082bf; color: #0082bf; }
.popupHeatingCoolingButton_active { color: #ffffff; background-color: #22a8e7; border: 1px solid #0082bf; cursor: default; }

/*  Popup audio */
.audioContentContainer { 
    font-size: 1em;
    /*max-width: 600px;*/
	height: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#audioSourceImage { 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    height: 55%; min-height: 150px;
}
.audioSourceTitle, .audioSourceSubTitle {
    width: 100%;
    color: #FFFFFF;
    height: 8%;
    min-height: 25px;
    line-height: 25px;
    font-size: 1em;
    text-align: center;
    margin: 0px 0px 0px 0px;
    float: left;
    overflow: hidden;
}
.audioSourceSubTitle { float: left; font-size: 0.8em; height: 7%; min-height: 20px; line-height: 20px; margin: 0px 0px 0px 0px; }

#btn_audioEq, #btn_audioPlaylist, #btn_audioRadioStations, #btn_audioPlayerLoop, #btn_audioPlayerShuffle, #btn_audioPlayerOptions,
#btn_audioPrev, #btn_audioNext, #btn_audioPlay, #btn_audioStop,
#btn_audioMute, #btn_audioEmptyButton, #btn_audioVolumePlus, #btn_audioVolumeMin {
    height: 100%;
    float: left;
    width: 20%;
    margin-left: 5%;
    margin-right: 25%;
    cursor: pointer;
    padding: 0px;
    border:0;
}
#btn_audioPlaylist { background: url(Images/audioPlayerPlaylist.png) no-repeat center; width: 25%; margin-left: 0; margin-right: 0; }
#btn_audioRadioStations { background: url(Images/audioPlayerRadioStations.png) no-repeat center; width: 25%; margin-left: 0; margin-right: 0; }
#btn_audioPlayerLoop { background: url(Images/audioPlayerLoop.png) no-repeat center; width: 25%; margin-left: 0; margin-right: 0; }
#btn_audioPlayerShuffle { background: url(Images/audioPlayerShuffle.png) no-repeat center; width: 25%; margin-left: 0; margin-right: 0; }
#btn_audioPlayerLoop.active { background-image: url(Images/audioPlayerLoopActive.png); }
#btn_audioPlayerShuffle.active { background-image: url(Images/audioPlayerShuffleActive.png); }
#btn_audioPlayerOptions { background: url(Images/audioPlayerOptions.png) no-repeat center; width: 25%; margin-left: 0; margin-right: 0; }
#btn_audioMute.audioMute { background: url(Images/audioPlayerMute.png) no-repeat center; width: 15%; margin-left: 0%;  margin-right: 5%; }
#btn_audioMute.audioMuteActive { background: url(Images/audioPlayerMuteActive.png) no-repeat center; width: 15%; margin-left: 0%;  margin-right: 5%; }
#btn_audioPrev { width: 15%; background: url(Images/audioPlayerPrev.png) no-repeat center; margin-left: 18%; margin-right: 2%; }
#btn_audioNext { width: 15%; background: url(Images/audioPlayerNext.png) no-repeat center; margin-left: 2%; margin-right: 18%; }
#btn_audioPlay { width: 30%; background: url(Images/audioPlayerPlay.png) no-repeat center; margin-left: 0%;  margin-right: 0%; }
#btn_audioStop { width: 30%; background: url(Images/audioPlayerStop.png) no-repeat center; margin-left: 0%;  margin-right: 0%; }
#btn_audioPrev.inactive, #btn_audioNext.inactive, #btn_audioPlayerLoop.inactive, #btn_audioPlayerShuffle.inactive, #btn_audioPlay.inactive, #btn_audioStop.inactive { cursor: default; opacity: 0.3; -khtml-opacity: 0.3; -moz-opacity:0.3; filter: alpha(opacity=30); }
#btn_audioEmptyButton { margin-left: 0; margin-right: 0; }
#btn_audioVolumePlus { background: url(Images/remoteControlPlus.png) no-repeat center; width: 20%; margin-left: 0%;  margin-right: 0%; }
#btn_audioVolumeMin { background: url(Images/remoteControlMinus.png) no-repeat center; width: 20%; margin-left: 2.5%;  margin-right: 0%; }

.lbl_audioVolume { 
    width: 15%; 
    height: 100%;
    margin-left: 5%;  
    margin-right: 0%;
    color: #ffffff;
    font-size: 0.8em;
    float: left;
}

/* Media Queries */
@media all and (orientation : landscape) {
    #popupVideoHeaderContainer { display: none; }
    #closepopup_LandscapeButton { display: block; }
    #popupVideoContentContainer { height: 100%; margin: 0px 0px 0px 0px;}
}

@media all and (min-width: 500px) {
    .loginFormContainer { 
        width: 400px;
    }
    .loginFormTxt, .loginFormTxtError { width: 348px; }
    .defaultGroupTypeButton, .lightingGroupTypeButton { width: 66%; padding-bottom: 33%; margin: 0.20%; }
    .defaultGroupTypeButton { width: 32.8%; padding-bottom: 33%; margin: 0.20%; }
    .popupDdlContainer { max-width: 300px; }
    .audioAlbumButton_tablet { width: 33.1%; padding-top: 33.1%; margin: 0.10%; }
    /*.audioAlbumButton { width: 32.8%; padding-top: 33%; margin: 0.20%; }
    .audioAlbumGroupButton { width: 98.6%; margin: 0.20%; }*/
    .audioAlbumButton_container { width: 200%; }
}
@media all and (max-width: 979px) {
}
@media all and (min-width: 700px) {
    #settingsMenuListContainer .menuItem[role="settingsMenuConfiguration"] { display: block; }
    .list-item-wrapper {
        width: 50%;
    }
    .list-item-grid-sizer { width: 50%; }
    .list-item-preview2 { padding-bottom: 40%; }
    
    #remoteControlContainer, #remoteNavigateContainer { width: 42%; margin: 4%; }
    #remoteNavigateContainer:after { 
        content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
    #remoteExtraContainer { width: 98%; margin: 1%; float:left; max-width: none; }
    .groupInfoLabel { font-size: 1.2em; }
    .groupTypeButtonLabel { font-size: 1.2em; }
    .audioAlbumButton_tablet { width: 24.8%; padding-top: 24.8%; margin: 0.1%; }
    /*.audioAlbumButton {  width: 19.8%; padding-top: 19.8%; margin: 0.1%; }
    .audioAlbumGroupButton { width: 98.8%; margin: 0.1%; }*/
    .audioAlbumButton_container { width: 120%; }
}
@media all and (min-width: 1024px) {
    #audioMenuSourcesContainer .menuItem[role="audioMenuRadioStaionsTouch"], #audioMenuSourcesContainer .menuItem[role="audioMenuPlaylistsTouch"],
    #audioMenuSourcesContainer .menuItem[role="audioMenuSpotifyTouch"], #audioMenuSourcesContainer .menuItem[role="audioMenuDeezerTouch"],
    #audioMenuSourcesContainer .menuItem[role="audioMenuInputTouch"] { font-size: 1.2em; margin-top: 15px; margin-bottom: 15px; }
    #audioMenuZonesContainer .menuItem[role="Touch"], #audioMenuZonesContainer .menuItem_active[role="Touch"] { font-size: 1.2em; height: 60px; line-height: 60px; }

    .list-item-wrapper {
        width: 33.3%;
    }
    .list-item-grid-sizer { width: 33.3%; }
    #remoteControlContainer, #remoteNavigateContainer, #remoteExtraContainer { width: 29.3%; margin: 2%; }
    #remoteNavigateContainer:after { clear: none; }
    .defaultGroupTypeButton, .lightingGroupTypeButton { width: 49.8%; padding-bottom: 24.8%; margin: 0.10%; }
    .defaultGroupTypeButton { width: 24.8%; padding-bottom: 24.8%; margin: 0.10%; }
    .audioAlbumButton_tablet { width: 19.8%; padding-top: 19.8%; margin: 0.1%; }
    .audioAlbumButton_touch { width: 24.8%; padding-top: 24.8%; margin: 0.1%; }
    /*.audioAlbumButton { width: 16.5%; padding-top: 16.5%; margin: 0.08%; }
    .audioAlbumGroupButton { width: 98.84%; margin: 0.08%; }*/
    .audioAlbumButton_container { width: 100%; }
}

@media all and (min-width: 1280px) {
    .imgVideoContainer { height: auto; width: 1280px; }
    .audioAlbumButton_tablet { width: 16.5%; padding-top: 16.5%; margin: 0.08%; }
    .audioAlbumButton_touch { width: 19.8%; padding-top: 19.8%; margin: 0.1%; }
}

@media all and (min-width: 1500px) {
    .audioAlbumButton_touch { width: 16.5%; padding-top: 16.5%; margin: 0.08%; }
}

@media all and (device-width: 768px) and (device-height: 1024px) {
    html { font-size: 14px; }
}
@media all and (device-width: 1536px) and (device-height: 2048px) {
    html { font-size: 14px; }
}



/* Color Picker */
.farbtastic {
	position: relative;
    margin-left: auto;
    margin-right: auto;
}
.farbtastic * {
	position: absolute;
	cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
	width: 195px;
	height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
	top: 47px;
	left: 47px;
	width: 101px;
	height: 101px;
}
.farbtastic .wheel {
	background: url(images/wheel.png) no-repeat;
	width: 195px;
	height: 195px;
}
.farbtastic .overlay {
	background: url(images/mask.png) no-repeat;
}
.farbtastic .marker {
	width: 17px;
	height: 17px;
	margin: -8px 0 0 -8px;
	overflow: hidden; 
	background: url(images/marker.png) no-repeat;
}