html,body { margin: 0; padding: 0}
ul, li{list-style:none; margin:0px}
img{border:0px}
#bottom {position:relative; width:960px; height:36px; left:0px; color:#fff;}

#bottom .backwardBtn a {background:url(../images/ui_controll.png) top no-repeat; background-position: -101px 0px}
#bottom .forwardBtn a {background:url(../images/ui_controll.png) top no-repeat; background-position: -142px 0px}
#bottom .backwardBtn a, #bottom .forwardBtn a {display: block; width:39px; height:36px; cursor:pointer;}
#bottom .backwardBtn a:hover {background-position: -101px -36px}
#bottom .forwardBtn a:hover {background-position: -142px -36px}
#bottom .backwardBtn a span, #bottom .forwardBtn a span{display:inline-block; margin-top:11px; width:100%; text-align:center; font-size:9pt; color:#333}

/*timeControl*/
#bottom div, #bottom li {margin:0px;}
#bottom #timeControl, #bottom #timeControl div {position: absolute}
#bottom #timeControl {top: -4px;	left: 0px}

#bottom #timeControl .position {width: 1px; height: 11px; background:url(../images/ui_controll.png) no-repeat;}
#bottom #timeControl .progress {top:0px; width: 960px; height: 4px; background: #666;}
#bottom #timeControl .seekBtn  {top:-8px; width: 960px; max-width: 960px; height: 16px; cursor:pointer; z-index: 1100;}
#bottom #timeControl .seekBar  {top:0px; width:1px; max-width: 960px; height: 4px; background: #83bc1e;}

#bottom #volumControl {position: absolute; top: 13px;	left: 732px}
#bottom #volumControl div {position: absolute}
#bottom #volumControl .position {top:3px; width: 1px; height: 11px; background:url(../images/ui_controll.png) no-repeat;}
#bottom #volumControl .progress {top:2px; width: 45px; height: 4px; background: #666; cursor:pointer;}
#bottom #volumControl .seekBtn  {top:-5px; width: 45px; height: 11px; cursor:pointer; /*background: red;*/}
#bottom #volumControl .seekBar  {top:0px; width: 45px; height: 4px; background: #83bc1e;}

#bottom .seekMarker {position: relative; bottom:22px; width:100%}
#bottom .seekMarker .pos{background:url(../images/ui_controll.png) no-repeat; background-position: -650px -36px; width:16px; height:10px;cursor:pointer}
#bottom .seekMarker .text{position: relative; bottom:0px; background:#ffcc00;font-size:8pt; color:#000000;text-align:left; padding:0 6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius: 6px;
	border:1px solid #FFDD11;
}

/*timer*/
#bottom .timer {
	position:absolute;
	top: 12px;
	left: 196px;
	font-family:"굴림",arial, Geneva, sans-serif;
	font-size:13px;
}

/*mediaControl*/
#bottom #mediaControl {	
	position: absolute;
	left:0px; top:0px;
}
#bottom #mediaControl, #bottom #mediaControl div {float:left;}
#bottom #mediaControl a{
	display: block;
	width: 39px;
	height: 36px;
	text-indent: -9999px;
	cursor:pointer;
	margin:0px 1px;
}

#bottom #mediaControl .playBtn	 {position:absolute; left:19px; top:0px;}
#bottom #mediaControl .pauseBtn	 {position:absolute; left:19px; top:0px;}
#bottom #mediaControl .replayBtn {position:absolute; left:60px; top:0px;}
#bottom #mediaControl .backwardBtn	{position:absolute; left:101px; top:0px;}
#bottom #mediaControl .forwardBtn	{position:absolute; left:142px; top:0px;}

#bottom #mediaControl .playBtn a	{background:url(../images/ui_controll.png) top no-repeat; background-position: -19px 0px}
#bottom #mediaControl .pauseBtn a	{background:url(../images/ui_controll.png) top no-repeat;background-position: -183px 0px}
#bottom #mediaControl .replayBtn a	{background:url(../images/ui_controll.png) top no-repeat;background-position: -60px 0px}

#bottom #mediaControl .playBtn a:hover, #bottom #mediaControl .playBtn a:focus {background-position: -19px -36px}
#bottom #mediaControl .pauseBtn a:hover ,#bottom #mediaControl .pauseBtn a:focus {background-position: -183px -36px}
#bottom #mediaControl .replayBtn a:hover {background-position: -60px -36px}

#bottom .scriptBtn	{position:absolute; left:643px; top:0px;}
#bottom .soundOn	{position:absolute; left:686px; top:0px;}
#bottom .soundOff	{position:absolute; left:686px; top:0px;}

#bottom .soundOn a	{background:url(../images/ui_controll.png) top no-repeat;background-position: -674px 0px; display: block; width: 39px; height: 36px; text-indent: -9999px; cursor:pointer;}
#bottom .soundOff a	{background:url(../images/ui_controll.png) top no-repeat;background-position: -715px 0px; display: block; width: 39px; height: 36px; text-indent: -9999px; cursor:pointer;}
#bottom .soundOn a:hover, #bottom #mediaControl .soundOn a:focus {background-position: -674px -36px}
#bottom .soundOff a:hover, #bottom #mediaControl .soundOff a:focus {background-position: -715px -36px}

#bottom .scriptBtn a	{background: url(../images/ui_controll.png) top no-repeat;background-position: -633px 0px; display: block; width: 39px; height: 36px; text-indent: -9999px; cursor:pointer;}
#bottom .scriptBtn a:hover, #bottom #mediaControl .scriptBtn a.selected{background-position: -633px -36px}
#bottom .scriptBtn a.disabled:hover{background-position: -633px 0px}

/*fullScreen*/
#bottom .fullScreen {position:absolute; left:920px; top:0px; z-index:100}
#bottom .fullScreen a {background: url(../images/ui_controll.png) top no-repeat;background-position: -224px 0px; display: block; width: 39px; height: 36px; text-indent: -9999px; cursor:pointer;}
#bottom .fullScreen a:hover {background-position: -224px -36px}

/*userControl*/
#bottom #userControl {position:absolute; left:0px; top:0px;}
#bottom #userControl, #bottom #userControl div {float:left}

#bottom #userControl a{display: block; text-indent: -9999px; cursor:pointer; margin:0 0px; height: 36px;}

#bottom .markerList .listOpen a		{position:absolute; left:805px; background: url(../images/ui_controll.png) top no-repeat;background-position: -760px 0px; display: block; width:97px; height: 36px; text-indent: -9999px; cursor:pointer;}
#bottom .markerList .listClose a		{position:absolute; left:805px; background: url(../images/ui_controll.png) top no-repeat;background-position: -860px 0px; display: block; width:97px; height: 36px; text-indent: -9999px; cursor:pointer;}
#bottom #userControl .videoLow a		{position:absolute; left:457px; background: url(../images/ui_controll.png) top no-repeat;background-position: -447px 0px; width:55px;}
#bottom #userControl .videoMiddle a		{position:absolute; left:512px; background: url(../images/ui_controll.png) top no-repeat;background-position: -502px 0px; width:64px;}
#bottom #userControl .videoHigh a		{position:absolute; left:576px; background: url(../images/ui_controll.png) top no-repeat;background-position: -566px 0px; width:55px;}

#bottom .markerList .listOpen a:hover, #bottom .markerList .listOpen a:focus, #bottom .markerList .listOpen a.selected {background-position: -760px -36px}
#bottom .markerList .listClose a:hover, #bottom .markerList .listClose a:focus, #bottom .markerList .listClose a.selected {background-position: -860px -36px}
#bottom #userControl .videoLow a:hover, #bottom #userControl .videoLow a:focus, #bottom #userControl .videoLow a.selected {background-position: -447px -36px}
#bottom #userControl .videoMiddle a:hover, #bottom #userControl .videoMiddle a:focus, #bottom #userControl .videoMiddle a.selected {background-position: -502px -36px}
#bottom #userControl .videoHigh a:hover, #bottom #userControl .videoHigh a:focus, #bottom #userControl .videoHigh a.selected {background-position: -566px -36px}

#bottom .vod-speed {
	position: absolute; left:290px;	top:0px;
	text-align: right;
	font-size:10pt;
	width:79px;	height:36px;
	display: block;
	background: url(../images/ui_controll.png) top no-repeat; background-position: -280px -36px;
}
#bottom .vod-speed p{display:inline-block; color:#eee; padding-right:7px; padding-top:11px;}
#bottom .sub-menu {	position:absolute;	left:376px; top:0px; /*outline:1px solid red;*/}
#bottom .sub-menu a {position:absolute; display: block; text-indent: -9999px; cursor:pointer; width:19px; height:36px;}
#bottom .speed-minus a{left:0px; top:0px; background: url(../images/ui_controll.png) top no-repeat; background-position: -366px 0px}
#bottom .speed-plus a{left:48px; top:0px; background: url(../images/ui_controll.png) top no-repeat; background-position: -414px 0px}
#bottom .speed-default a{left:24px; top:0px; background: url(../images/ui_controll.png) top no-repeat; background-position: -390px 0px}

#bottom .speed-minus a:hover	{background-position: -366px -36px}
#bottom .speed-plus a:hover		{background-position: -414px -36px}
#bottom .speed-default a:hover	{background-position: -390px -36px}