/* common */
#sizeControl {
	position:relative;
	font-size:14px;
}

#keyControl {
	border: 2px solid gray;
	display: none;
	height: 28px;
	line-height: 28px;
	margin-bottom: 6px;
}

#inputKey {
	width: 36px;
	height: 15px;
	border: 1px solid gray;
}

.PageBody   {
	border:2px solid gray; 
	padding-right:15px;
	position:relative;
	z-index:500;
	top: 0px;
	background:gray;
}

.PageBody .BoxTop {
	padding:2px;
	clear:left; 
	margin:3px 10px;

}

.PageBody .BoxTop .LftColm {
	font-weight:bold; 
	float:left;
}

.PageBody .BoxTop .RgtColm {
	float:right;
	min-height:20px;
}

.PageBody .BoxMiddle {
	border:1px solid gray;
	margin:0px 10px;
	padding:0 0 30px 5px; 
	position:relative;
}

.PageBody .BoxMiddle .ZoomColm {
	background:url("/js/VertSlide.png") repeat-y scroll right top transparent;
	float:left;
	height:100%;
	position:relative;
	width:72px;
	z-index: 10;
}

.PageBody .BoxMiddle .ZoomColm .ZoomLabel {
	height:100%;
}

.PageBody .BoxMiddle .ZoomColm .ZoomLabel .MaxTele {
	left:0;
	position:absolute;
	top:0;
	width:30px;
}

.PageBody .BoxMiddle .ZoomColm .ZoomLabel .Label {
	left:0;
	position:absolute;
	top:40%;
	width:30px;
}

.PageBody .BoxMiddle .ZoomColm .ZoomLabel .MinTele {
	bottom:0;
	left:0;
	position:absolute;
	width:30px;
}

.PageBody .BoxMiddle .ZoomColm .ZoomLine {
	border-left:25px solid transparent;
	height:0;
	position:absolute;
	right:7px;
	top:0;
}

.PageBody .BoxMiddle .ZoomColm .ZoomBar {
	background-image:url("/js/SlideIcon.png");
	height:20px;
	position:absolute;
	right:-5px;
	top:-9px;
	width:20px;
}

.PageBody .BoxMiddle .Content {
	float:left;
	height:100%;
	position:relative;
	text-align:left;
}

.PageBody .BoxMiddle .VertColm {
	background:url("/js/VertSlide.png") repeat-y scroll left top transparent;
	float:left;
	height:100%;
	position:relative;
	width:7px;
}

.PageBody .BoxMiddle .VertColm .VertBar {
	background-image:url("/js/SlideIcon.png");
	height:20px;
	left:-7px;
	position:absolute;
	top:-9px;
	width:20px;
}

.PageBody .BoxMiddle .VideoColm {
	height: 100%; 
	overflow: hidden;
}

.PageBody .BoxMiddle .VideoColm .Video {
	left: 0px;
	position: absolute;
	top: 0px;
}

.PageBody .BoxMiddle .HorizColm {
	background: url("/js/HorizSlide.png") repeat-x scroll left top transparent;
	height: 7px; 
	top: 10px;
	position: relative;
}

.PageBody .BoxMiddle .HorizColm .HorizBar {
	background-image:url("/js/SlideIcon.png");
	left:-9px;
	height:20px;
	position:absolute; 
	top:-7px;
	width:20px; 
}

.PageBody .CompassStatus {
	border:1px solid gray;
	font-weight:bold;
	line-height:18px;
	height:18px;
	overflow: hidden;
	position:relative;
	text-align:center;
	width:64px;
	left: -72px;
}

.PageBody .BoxBot {
	margin:5px 10px 10px;
}

.PageBody .BoxBot .InfoState {
	border: 1px solid gray;
	padding:2px;
	text-align:left;
	width:165px;
}

.PageBody .BoxBot .InfoState  #colorState{
	border: 1px solid white;
	height: 16px;
	width: 16px;
	float: left;
}

.PageBody .BoxBot .ColorState {
	background-color:green;
	padding-left:18px; 
}

.PageBody .BoxBot .TextState {
	float: right;
	width: 135px;
}

.PageBody .BoxBot .Preset {
	margin-left: 20px;
}


.PageBody .BoxBot .SnapButton {}



/* resize control */

.S240x180 .PageBody   {
	width:300px; 
	padding:0px;
}

.S240x180 .BoxTop .LftColm {
	float:none;
}

.S240x180 .BoxTop .RgtColm {
	float:left;
}

.S240x180 .PageBody .BoxTop,
.S240x180 .PageBody .BoxMiddle,
.S240x180 .PageBody  .BoxBot {
	margin: 10px;
}

.S240x180 .BoxMiddle {
	height:180px;
	padding:0 0 20px;
}

.S240x180 .BoxMiddle .Content {
	width:240px;
	margin:0px;
}

.S240x180 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:180px solid gray;
	border-left:15px solid transparent;
}

.S240x180 .BoxMiddle .VideoColm .Video {
	height:180px;
	width:240px;
}
.S240x180 .BoxMiddle .ZoomColm {
	width:28px;
}

.S240x180 .BoxMiddle .ZoomColm .ZoomLabel {
	display:none;
}

.S240x180 .BoxMiddle .VertColm {
	width:10px;
}

.S240x180  .BoxMiddle .HorizColm {
	top:5px
}

.S240x180 .BoxMiddle .CompassStatus {
	left:0px;
	top:10px;
}

.S240x180 .BoxBot .InfoState,
.S240x180  .BoxBot .Preset,
.S240x180  .BoxBot .SnapButton
 {
	margin:0px;
}

/* 320x240 */
.S320x240 .PageBody   {
	width:440px;
	padding:0px;	
}

.S320x240 .BoxMiddle {
	height:240px;
}

.S320x240 .BoxMiddle .Content {
	width:320px;
}

.S320x240 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:240px solid gray;
}

.S320x240 .BoxMiddle .VideoColm .Video {
	height:240px;
	width:320px;
}

.S320x240 .PageBody .BoxBot .InfoState  {
	float: left;
}

.S320x240 .PageBody .BoxBot .Preset {
	float: left;
}

.S320x240 .PageBody .BoxBot .SnapButton {
	float: right;
}


/* 352x240 */
.S352x240 .PageBody   {
	width:460px;
	padding:0px;	
}

.S352x240 .BoxMiddle {
	height:240px;
}

.S352x240 .BoxMiddle .Content {
	width:352px;
}

.S352x240 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:240px solid gray;
}

.S352x240 .BoxMiddle .VideoColm .Video {
	height:240px;
	width:352px;
}

.S352x240 .PageBody .BoxBot .InfoState  {
	float: left;
}

.S352x240 .PageBody .BoxBot .Preset {
	float: left;
}

.S352x240 .PageBody .BoxBot .SnapButton {
	float: right;
}


/* 480x360 */
.S480x360 .PageBody   {
	width:590px; 
}

.S480x360 .BoxMiddle {
	height:360px;
}

.S480x360 .BoxMiddle .Content {
	width:480px;
}

.S480x360 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:360px solid gray;
}

.S480x360 .BoxMiddle .VideoColm .Video {
	height:360px;
	width:480px;
}

.S480x360 .PageBody .BoxBot .InfoState  {
	float: left;
}

.S480x360 .PageBody .BoxBot .Preset {
	float: left;
}

.S480x360 .PageBody .BoxBot .SnapButton {
	float: right;
}


/* 640x480 */
.S640x480 .PageBody   {
	width:746px; 
}

.S640x480 .BoxMiddle {
	height:480px;
}

.S640x480 .BoxMiddle .Content {
	width:640px;
}

.S640x480 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:480px solid gray;
}

.S640x480 .BoxMiddle .VideoColm .Video {
	height:480px;
	width:640px;
}

.S640x480 .PageBody .BoxBot .InfoState  {
	float: left;
}

.S640x480 .PageBody .BoxBot .Preset {
	float: left;
}

.S640x480 .PageBody .BoxBot .SnapButton {
	float: right;
}

/* 720x480 */
.S720x480 .PageBody   {
	width:834px; 
}

.S720x480 .BoxMiddle {
	height:480px;
}

.S720x480 .BoxMiddle .Content {
	width:720px;
}

.S720x480 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:480px solid gray;
}

.S720x480 .BoxMiddle .VideoColm .Video {
	height:480px;
	width:720px;
}

.S720x480 .PageBody .BoxBot .InfoState  {
	float: left;
}

.S720x480 .PageBody .BoxBot .Preset {
	float: left;
}

.S720x480 .PageBody .BoxBot .SnapButton {
	float: right;
}


/* 1280x960 */
.S1280x960 .BoxMiddle {
	height:960px;
}

.S1280x960 .PageBody {
	width:1386px; 
}

.S1280x960 .BoxMiddle .Content {
	width:1280px;
}

.S1280x960 .BoxMiddle .ZoomColm .ZoomLine {
	border-bottom:960px solid gray;
}

.S1280x960 .BoxMiddle .VideoColm .Video {
	height:960px;
	width:1280px;
}

.S1280x960 .PageBody .BoxBot .InfoState {
	float: left;
}

.S1280x960 .PageBody .BoxBot .Preset {
	float: left;
}

.S1280x960 .PageBody .BoxBot .SnapButton {
	float: right;
}