div.composer_keyboard {

	background: linear-gradient(-80deg, #000, #333, #000, #666, #333 70%);
	border: 2px solid #333;
	border-radius: 0 0 5px 5px;
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
	margin-top: 9px;

}

ul.piano strong {

	left: 11px;
	top: 134px;
	position: absolute;
	opacity: 0.3;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

div.composer_keyboard ul.piano {

	display: block;
	width: 2500px;
	height: 154px;
	border-top: 2px solid #222;
	position: relative;
	left: -420px;

}

div.composer_keyboard ul.piano li {

	list-style: none;
	float: left;
	display: inline;
	background: #aaa;
	width: 35px;
	position: relative;
	cursor: pointer;

}

ul.piano li div.anchor {

	display:b lock;
	height: 150px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(-35deg, #f5f5f5, #fff);
	box-shadow: inset 0 1px 0px #fff,inset 0 -1px 0px #fff, inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7);

}

ul.piano li div.active {

	background: linear-gradient(0deg, #F3F315, #fff);

}

ul.piano li span {

	position: absolute;
  	top: 0px;
  	left: -12px;
	width: 18px;
	height: 76px;
	background: #000;
	border-width: 0px 2px 5px;
	border-style: solid;
	border-color: #000 #222 #111 #666;
	border-radius:0 0 2px 2px;

}

#postcomposer .controls {

	margin-top: 10px;
	margin-right: 15px;
	margin-left: 15px;

}

#postcomposer .controls .left-controls {

	float: left;

}

#postcomposer .controls .left-controls button img {

	position: relative;
	top: 4px;
	margin-right: 5px;

}

#postcomposer .controls .left-controls button#control_record.recording {

	background-color: red;

}

#postcomposer .controls .left-controls button#control_record.recording_disabled {

	opacity: 0.3;

}

#postcomposer .controls .right-controls {

	float: right;

}

#postcomposer .controls .right-controls .slider {

	float: left;
	margin-right: 20px;
	width: 160px;
	margin-top: 8px;

}

#postcomposer .controls .right-controls .slider div {

	float: right;
	width: 106px;

}

#postcomposer .recording_offset {

	float: right;
	width: 91px;

}

#postcomposer .recording_playback_time {

	float: left;
	font-size: 38px;
	margin-left: 10px;

}

#postcomposer .controls .right-controls .slider strong, #postcomposer .recordings_slider_offset strong {

	font-size: 10px;
	position: relative;
	top: -4px;

}

#postcomposer .recordings_slider_offset strong {

	top: 0px;
	left: 8px;

}

#postcomposer .recordings_slider_offset {

	float: right;
	margin-top: 45px;

}

#postcomposer .recording_type {

	float: right;
	margin-top: 36px;
	margin-left: 12px;

}

#postcomposer .controls .right-controls .slider #slider-release-amount, #postcomposer .controls .right-controls .slider #slider-attack-amount, #postcomposer .controls .right-controls .slider #slider-volume-amount, #postcomposer .recordings_slider_offset .slider_offset_amount {

	position: relative;
	top: -20px;
	left: 98px;
	font-size: 10px;

}

#postcomposer .recordings_slider_offset .slider_offset_amount {

	top: -1px;
	left: 58px;

}


#postcomposer .keys_counter {

	font-size: 10px;
	margin-left: 10px;

}

#postcomposer .recordings {

	margin-top: 10px;
	margin-left: 15px;
	margin-right: 15px;
	background-color: yellow;
	clear: both;

}

#postcomposer .recordings button {

	margin-right: 6px;

}

#postcomposer .recordings .recording_one, #postcomposer .recordings .recording_two {

	width: 45%;
	border: 2px solid #E6E6E6;
	border-radius: 5px;
	height: 100px;
	font-size: 10px;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 10px;

}

#postcomposer .recordings .recording_one {

	float: left;

}

#postcomposer .recordings .recording_two {

	float: right;

}

#postcomposer .recordings button img {

	position: relative;
	top: 4px;
	margin-right: 2px;

}

#postcomposer .delete_recording {

	float: right;
	cursor: pointer;

}

#postcomposer .recordings .looping {

	background-color: #FBEEC9;

}

#postcomposer .stop_recording_play {

	opacity: 0.5;

}

#postcomposer .recording-controls {

	float: left;

}

#postcomposer .recordings_slider_offset {

	width: 180px;

}

#postcomposer .misc_controls {

	margin-top: 10px;

}

.postcomposer-player {

	text-align: center;

}

.postcomposer-player img {

	cursor: pointer;

}

/* jQuery UI CSS */

.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    box-shadow: 0 0 3px #CCCCCC inset;
    height: 10px;
    position: relative;
}

.ui-slider-horizontal .ui-slider-handle {
    background-color: #F6F6F6;
    border: 1px solid #AAAAAA;
    border-radius: 2px;
    height: 16px;
    margin-left: -5px;
    position: absolute;
    top: -4px;
    width: 10px;
    z-index: 2;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}