body {
	background-color: #222;
	font-family: sans-serif;
	font-size:11px;
}

.bezel {
	display:inline-block;
	position: absolute;
	width: 552px;
	height: 630px;
	top: 50%;
	left: 50px;
	margin-top: -315px;

	background: transparent url(bezel.png) no-repeat;
}

.bezel.mm38 {

	background: transparent url(bezel_38.png) no-repeat;
}

.display  {
	position: absolute;
	width: 312px;
	height: 390px;
	top: 120px;
	left: 120px;
	overflow: hidden;
}
.display.mm38 {
	width: 272px;
	height: 340px;
	top: 143px;
	left: 139px;
}

.fixed-canvas, .effect-canvas,.effect-canvas canvas, .fixed-canvas canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;

}

.bezel-type {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 20px;
	left: 0px;
	right: 0px,;
}
.bezel38, .bezel42 {
	display: inline-block;
	width: 100px;
	color: white;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
}
.bezel38.on, .bezel42.on {
	color: red;	
}


.top-panel {
	position:absolute;
	top: 0px;
	right: 352px;
	left: 0px;
	height: 50px;
	border-bottom: 1px solid #000;
	background: #050505;
	background-image: url(title.png);
	background-repeat: no-repeat;
	background-position: left middle;
	text-align:center;
}
.bottom-panel {
	position:absolute;
	bottom: 0px;
	right: 312px;
	left: 0px;
	height: 50px;
	border-bottom: 1px solid #000;
	background: #050505;
	text-align: center;
	white-space: nowrap;
}
.action-share {
	position: absolute;
	top:0px;
	right:0px;
	width:50px;
	height: 50px;
	background: transparent url(share.png) no-repeat center center;
	cursor: pointer;
}
.action-load {
	position: absolute;
	top:0px;
	right:50px;
	width:50px;
	height: 50px;
	color:white;
}
.action-share:hover {
	background-image: url(share_active.png);	
}
.idgen {
	height: 40px;
	width: 25em;
	color: white;
	margin-top: 5px;
	color: white;
	font-size: 20px;
	text-align: center;
	background-color: #222;
	border: 1px solid black;
}
.panel {
	z-index: 1;
	position:absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	color:white;
	width: 312px;
	overflow: auto;
	background: #111;
	padding: 30px 20px 20px 20px;
	border-left: 1px solid #000;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}
.screen-title {
	color: white;
	background:black;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 42px;
	font-size: 32px;
	font-weight:bold;
	padding: 2px 2px 2px 2px;
}

.display.mm38 .screen-title {
	height: 38px;
	font-size: 30px;
}

.screen-time {
	float: right;

}
.action {
	width: 153px;
	height: 136px;
}
.action-left {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: transparent url('action_minus_42@2x.png') no-repeat;
}
.action-right {
	position: absolute;
	bottom: 0px;
	right: 0px;
	background: transparent url('action_plus_42@2x.png') no-repeat;
}
.display.mm38 .action {
	width: 132px;
	height: 120px;
}

.display.mm38 .action-left  {
	background-image: url('action_minus_38@2x.png');
}

.display.mm38 .action-right  {
	background-image: url('action_plus_38@2x.png');
}

.screen-time .colon {

}

.panel .label .current {
	float:right;
	font-weight: bold;
}
.panel .label {
	padding: 15px 0px 5px 0px;
}
.panel-header {
	margin-top: 20px;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
	margin: 20px -20px 0px -20px;
	padding: 5px 20px;
	border-top: 1px solid #333;
	background: black;
}
.create-sequence {
	margin: 20px 0px 0px 0px;
}
.panel-content {
	border-top: 1px solid #020202;	
	border-bottom: 1px solid #333;	
	margin: 0px -20px;
	padding: 10px 20px;
	background-color:#050505;
	
}

.screen-capture {
	position: relative;
	display: inline-block;
	width: 312px;
	height: 360px;
	background: transparent url('') no-repeat;
	border:1px solid #444;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
	margin: 20px;
}
.screen-capture-mask {
	position: absolute;
	width: 312px;
	height: 390px;
	top: 0px;
	left: 0px;
	background: transparent url(mask.png) no-repeat;
}
.screen-capture-frame {
	position: absolute;
	width: 312px;
	height: 390px;
	top: 0px;
	left: 0px;
	color: white;
	font-weight: bold;
	margin: 2px 0px 0px 5px;
}

.step {
	line-height: 50px;
	color: white;
	font-weight: bold;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	padding:0px 20px;
	width: 80px;

}
.step.active {
	color: #ee0000;
}