/* 
    Created on : 30.07.2018, 15:08:13
    Author     : ml
*/

body, table { font: 15px/30px Arial, use-lang-def; letter-spacing: 2px; color: #eee; background-color: #020202; position: static; padding: 0; margin: 0; }

h3 { color: #3f3; font-size: 15px; font-weight: normal; }
table { position: absolute; width: 100%; height: 100%; }
table td { vertical-align: middle; text-align: center; padding-bottom: 10%; }
#wrapper { font-size: 50px; line-height: 50px; }
#wrapper i { font-style: normal; margin-right: 45px; }
#wrapper span { font-size: 12px; position: absolute; margin-left: -40px; }
.entry { display: inline-block; width: 130px; }
table td input { width: 210px; }
a.foreground { position: fixed; z-index: 333; color: #333; text-decoration: none; text-align: center; bottom: 0; left: 0; right: 0; font-size: 12px; }
input { background: transparent; font: inherit; height: 30px; color: #0f0; border: 1px solid #030; border-spacing: 0px; text-align: center;}
table td input[type="submit"] { width: 215px; line-height: 20px; background: #0f0; color: #000; opacity: 0.6; transition: all 0.2s ease-out 0s; cursor: pointer; }
table td input[type="submit"]:hover { opacity: 1; }


/*** Alarm Stylesheet *********************************************************/


	.status-init {}

	.status-alarm-on {}

	.status-wake-up {}


	.status-init .i-on,
	.status-alarm-on .a-on,
	.status-wake-up .w-on
			{ display: block; }
	.status-init .i-off,
	.status-alarm-on .a-off,
	.status-wake-up .w-off
			{ display: none; }
/******************************************************************************/

	input { border-radius: 2px; }

	#container {
		clear: both;
		margin: 10% auto;
		width: 30%;
		min-width: 260px;
		text-align: center;
		position: relative;
	}
	section {
		display: inline-block;
	}
	section, .numbers input {
		width: 33%;
	}
	section input {
		width: 2em;
	}
	.numbers input {
		height: auto;
		border: 0;
	}
	.numbers, .numbers input {
		font-size: 2em;
		vertical-align: middle;
	}
	.rest-alarm {
		font-size: 3em;
		white-space: nowrap;
	}
	.current-time, .current-alarm, .closer {

	}
	.current-time {
		float: left;
		color: #0f0;
	}
	.status-init .current-time {
		float: none;
	}
	.current-alarm {
		float: right;
	}
	.current-alarm {
		color: #f00;
	}
	.closer {
		text-align: center;
		color: #ddd;
	}
	.closer span, .music-selector input {
		cursor: pointer;
	}
	p {
		clear: both;
		font-size: 1em;
	}
	.music-name {
		color: #999;
		text-overflow: ellipsis;
		width: 100%;
		overflow: hidden;
	}
	.music-selector, .music-name, .alarm-on, .alarm-off, .alarm-defer {
		margin: 1em 0 1em;
	}
	.music-selector select {
		/*width: 50%;*/
	}
	.music-selector input, .music-selector input:focus,
	.music-selector input::-moz-focus-inner {

		border: 0;
		outline: none;
	}
	#music_play_stop {
		border: 0;
	}

	.alarm-off {
		height: 5em;
		overflow: hidden;
		position: relative;
	}
	.alarm-off input {
		position: absolute;
		width: 5em;
		height: 2em;
		margin-left: -2.5em;
		margin-top: -1em;
		left: 50%;
		top: 50%;

	}

/*** Select Tag ***************************************************************/

select {
	
}

.music-selector-select {
	position: relative;
	display: inline-block;
	width: 50%;
}
.music-selector-select select, .select-before, .select-before span {
	width: 90%;
}
select {
	position: relative;
}
select, .select-before {
	/*height: 2em;*/
}
.select-before, .select-before span {
	height: 22px;
}
.select-before {
	padding: 2px 5px 2px;
	position: absolute;
	background-color: transparent;
	background-image: url("/alarm/select.png");
	background-repeat: no-repeat;
	background-position: center right;
	overflow: hidden;
	text-align: left;
	display: -moz-inline-stack;
	display: inline-block;
}
.select-before span {
/*	color: #333;*/
	display: -moz-inline-stack;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
.select-before.fcsd { border-color: #888; }


/*** END Select Tag ***********************************************************/