/* Container for elements displayed on the LCD at once */
.layout {
	display: none !important;
}
.hidden {
	display: none !important;
}
.screen {
	background: white;
	color: black;
	display: none;
	position:absolute;
	font-family:helvetica;
	padding:0;
	margin:0;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align: left;
}

/* Screen title */
.screen .title {
	font-size:200%;
	height:13.75%;
	line-height:1.65em;
	font-weight:normal;
	padding:0 0.7em;
	left: 0;
	right: 0;
}
.screen .middlebar .title {
	font-size: 240%;
	height: 2.92em;
	line-height: 2.92em;
	color: white;
	text-align: left;
}
.screen .hint {
	font-size:180%;
	bottom: 10%;
	position: absolute;
	left: 0;
	right: 0;
	font-weight:normal;
	text-align: center;
	padding: 0;
	margin: 0;
}
.screen.tribar .hint {
	top: 69%;
}

/* Labels attached to screen buttons */
.screen .label {
	font-size: 190%;
	width: 30%;
	padding: 0;
	background: #000000;
	color: #ffffff;
	display: block;
	text-align: center;
	position: absolute;
}
.screen .label.inactive {
	color: #000000;	
    background: #ffffff;
}
.screen .label.top {
	top: 0;
	bottom: 90%;
}
.screen .label.bottom {
	top: 90%;
	bottom: 0;
	line-height: 130%;
}
.screen .label.active {
	background:#DDDDDD;
	color: #000000;
}
.screen .label.active.top {
	bottom: auto;
	padding-bottom:2%;
}
.screen .label.active.bottom {
	top: auto;
	padding-top:2%;
}

.screen .left {
	left: 2.5%;
}
.screen .middle {
	left: 35%;
}
.screen .right {
	right: 2.5%;
}

/* Caption is displayed near the button label */
.screen .caption {
	font-size: 200%;
	width: 30%;
	padding: 1.25% 0;
	position: absolute;
	text-align: center;
	height: 1.2em;
}
.screen .caption.top, .screen .title.top {
	top: 10%;
}
.screen .caption.bottom {
	bottom: 10%;
}

/* Scrollable selector */
.screen .selector {
	overflow: hidden;
	list-style: none outside none;
	font-size: 200%;
	text-align: center;
	position: relative;
}
.screen .selector > .item {
	display: block;
	height: 1.2em;
	overflow: hidden;
	float: none;
	clear: both;
	padding: 0 0.4em;
}
.screen .selector > .item > span {
	display: inline-block;
	white-space: nowrap;
}
.screen .selector > .item.disabled {
	color: gray;
}
.screen .selector > .item.selected {
	font-size: 100%;
}

.screen .option.selector {
	display: inline-block;
	position: absolute;
	background: white;
	padding: 0;
	outline: 0.05em solid black;
	text-align: left;
}
.screen .selector > .outtop, .screen .selector > .outbottom {
	margin-top: -1000em !important;
	float: left;
	clear: both;	
}

/* Scrollbar of selector */
.screen .selector.scrollable.leftscroll {
	padding-left: 0.75em;
	padding-right: 0;
}
.screen .selector.scrollable.leftscroll > .scrollbar {
	left: 0;
	right: auto;
}
.screen .selector.scrollable.rightscroll {
	padding-left: 0;
	padding-right: 0.4em;
}
.screen .selector.scrollable.rightscroll > .scrollbar {
	right: 0;
	left: auto;
}
.screen .selector.scrollable > .scrollbar {
	top: 0;
	bottom: 0;
	width: .2em;
	background: black;
	margin: .1em .3em;
	position: absolute;
	z-index: 1;
}
.screen .selector.scrollable > .scrollbar > .marker {
	background:black;
	left:0;
	margin:0 0 0 -100%;
	padding:0;
	position:absolute;
	top:0;
	width:300%;
}
.screen .selector > .scrollbar.disabled > .marker {
	background:white;
	top: 0;
	height: 100%;
}


/* Title of menu pages */
.screen .breadcrumb {
	background:#52ACFF none repeat scroll 0 0;
	overflow: hidden;
	border-bottom: 0.2em solid #dddddd;
	text-align: left;
}

/* Blue content area */
.screen .middlebar {
	background:#52ACFF;
	color:black;
	display:block;
	padding:4%;
	text-align:center;
	position: absolute;
	top: 31.25%;
	left: 0;
	right: 0;
	bottom: 31.25%;
}


.screen.tribar .middlebar.short {
	font-size: 200%;
	line-height: 125%;
	right: 66%;
	text-align: left;
}

.screen.tribar .middlebar.small {
	font-size: 80%;
	line-height: 125%;
	right: 66%;
	text-align: left;
}

/* Number editor */
.screen .number.editor {
	display: inline-block;
}
.screen .number.editor .integer {
	display: inline-block;
	text-align: right;
}
.screen .number.editor .dot {
	display: inline-block;
	text-align: center;
}
.screen .number.editor .fraction {
	display: inline-block;
	text-align: left;
}
.screen .selected {
	background: #000000;
	color: #ffff00;
}
/* Plain text area */
.screen .log {
	position: absolute;
	top:12%;
	bottom:12%;
	left:0;
	right:0;
	margin:  0;
	background: #DDDDDD;
	color: #000000;
}
/* Audio level bars */
.channel {
	background: transparent;
	overflow: visible;
}
.levels {
	position: absolute;
}
.levels .mask {
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
	width: 100%;
	height: 100%;
	display: block;
	float: none;
	background: transparent;
}
.levels .marker {
	position: absolute;
	line-height: 50%;
	overflow: visible;
	background: white;
}
.levels .value {
	position: absolute;
	background: white;
	top: -1px;
	bottom:-1px;
	left: -1px;
	right: -1px;
}
.levels.horizontal .marker {
	height: 100%;
	top: 0;
}
.levels.horizontal .value {
}
.levels.vertical .marker {
	width: 100%;
}
.levels.vertical .value {
}