body {
	font: 100% "Trebuchet MS", verdana, sans-serif;
	color: #5b5b5b;
	margin: 0px;
	padding: 0px;
}

body,
#videoPlayer,
#videoScollerContainer {
    /*background: #eeeeee;    */
    background: #000;
}

/* Size Change
###################################################*/
#videoScollerContainer,
#facebookConnectMask,
#overlay.default,
#player.default,
#controlSectionInner {
	left:50% !important;
	margin-left: -512px !important; /* size changed*/
}

#controlSectionInner,
#facebookConnectMask,
#overlay.default,
#controlSection #timelineContainer,
#controlSection #timeline{
	width:1024px !important; /* size changed*/
}

#controlSection #shareContainer {
	top:-260px !important;
	left:50% !important;
	margin-left:-512px !important;
}

#overlay.default,
#videoShare {
	height: 576px !important; /* size changed*/
}

#videoScollerContainer {
	width: 1024px !important;
	height: 360px !important;
}

#facebookConnectMask {
	/*height:610px !important;*/ /* video=576, control=26, time=8px*/
	height: 576px !important;
}

section {
    /* video height=576, control=26px, time bar=8px */
	/*height: 610px;*/ /* size changed*/
	height: 576px;
}


/* FULLSCREEN 
###################################################*/
section {
	width: 100%;
}
section:-webkit-full-screen{
	float: none;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0 none;
	background-color: #000000;
}
section:-moz-full-screen{
	float: none;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0 none;
}
section:-ms-full-screen{
	float: none;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0 none;
}
section:-o-full-screen{
	float: none;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0 none;
}
section:full-screen{
	float: none;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0 none;
}

/*Video Player
############################################################*/
#overlay {
    /*position:absolute;top:0px;left:0px;left:50%;margin-left: -512px;width:1024px;height:576px;background:#ccc;z-index:1;   */
    position:absolute;
    top:0px;
    left:0px;
    /*background:transparent;*/
    /*background: url('images/blank.gif');*/
    background:none;
    z-index:1;
}
#player.default{
	position:relative;
	//left:50%;
	//margin-left:-320px;
	min-height: 576px;
}

#controlSection {
    position: absolute;
    bottom: 0px;
    z-index: 9;
    display:none;
}
#controlSection.default {
    position: absolute;
    top: 543px;
    z-index: 9;
    display:none;
}

#controlSection,
#controlSectionInner {
    height: 34px; /* time bar = 8px, control = 26px*/
}
#controlSection {
	width: 100%;
	color:#ccc;
	float:left;
}	
#controlSectionInner {
    background: #1b1b1b;
	float:left;
	position:relative;
}
#controlSection #control, 
#controlSection #handler,
#controlSection #volume,
#controlSection #share,
#controlSection #full, 
#controlSection #playlist,
#controlSection #setting {
	cursor:pointer;
}

#controlSection #control,
#controlSection #time, 
#controlSection #volume, 
#controlSection #full,
#controlSection #setting {
    margin-top:3px;
}
#controlSection #control {
	width:24px;
	height: 20px;
	float:left;
	margin-right:10px;
	margin-left:10px;
}
#controlSection .play {
	background: url('../images/play.png');
}
#controlSection .play:hover {
	background: url('../images/play_hover.png');
}
#controlSection .pause {
	background: url('../images/pause.png');
}
#controlSection .pause:hover {
	background: url('../images/pause_hover.png');
}
#controlSection #handler {
	height:15px;
}
#controlSection #timelineContainer {
	//width:280px;
	height:8px;
	float:left;
	clear:both;
}
#controlSection #status,#controlSection #timeline  {
	height: 8px;
}
#controlSection #timeline {
	background: #474747;
	float:left;
	position:relative;
	top:0px;
}
#controlSection #status {
	position:absolute;
	width: 0px;
	background:#c5161d;
}
#controlSection #handler {
	width:7px;
	background: #00ff00;
	float:left;
	position:absolute;
	left:0px;
	z-index: 9;
	background: url('../images/handler.png');
}

#controlSection #handler,
#controlSection #handler.ui-draggable {
    top:-3px !important; /* include the jquery draggable style*/
}

/* Volume button
######################################################*/
#controlSection #volume {
	width: 97px; /* vol button=24px, space=5px, vol control=68px */
	height: 20px;
	float:left;
	position:relative;
	margin-right: 15px;
}
#controlSection #volButton {
	width:24px;
	height:100%;
	float:left;
}
#controlSection .volOn {
	background: url('../images/volOn.png');
}
#controlSection .volOn:hover {
	background: url('../images/volOn_hover.png');
}
#controlSection .volOff {
	background: url('../images/volOff.png');
}
#controlSection .volOff:hover {
	background: url('../images/volOff_hover.png');
}
#controlSection #volControlContainer {
	position:relative;
	top:8px;
	left:29px;
	width: 68px;
	height: 5px;
	z-index: 9;
	background: #c5161d;
}
#controlSection #volControl {
	width: 68px;
	height: 5px;
	position:relative;
	left: 0px;
	top: 0px;
}
#controlSection #volStatus {
	position:absolute;
	left: 0px;
	width: 4px;
	height: 11px;
	background: url('../images/volLevel.png')repeat-y;
}
#controlSection #volStatus,
#controlSection #volStatus.ui-draggable {
    top:-2px !important; /* include jquery draggable style*/
}
#controlSection #full {
	width:24px;
	height: 20px;
	float:right;
	margin-right: 10px;
}
#controlSection .fullOn {
	background: url('../images/full.png');
}
#controlSection .fullOn:hover {
	background: url('../images/full_hover.png');
}
#controlSection .fullOff {
	background: url('../images/minimize.png');
}
#controlSection .fullOff:hover {
	background: url('../images/minimize_hover.png');
}
#controlSection #time {
	width:80px;
	/*height: 20px;*/
	float:left;
	font-size: 0.7em;
	margin-top:9px;
	margin-left:10px;
	color:#999;
	line-height:10px;
}
#controlSection #time .currentTime {
    color: #fff;   
}

/* Setting Button
######################################################*/
#controlSection #setting {
    float:right;
	position:relative;
	margin-right:10px;
	margin-left:10px;
	/*background: url('../images/setting.png');*/
}
#controlSection #settingButton{
    width:24px;
	height: 20px;
    background: url('../images/setting.png');
}
#controlSection #settingContainer {
	width: 90px;
	height: 115px;
	position:absolute;
	top:-130px;
	left:-35px;
	z-index: 9;
	background: #1b1b1b;
	cursor: default;
	color: #757575;
	display:none;
}
#controlSection #settingContainer div {
    padding: 3px 0px;
    text-align:center;   
    cursor: pointer;
}

#controlSection #settingContainer .selectedQuality {
    background-color: #601212;
}


/* Share button
######################################################*/
#controlSection #share {
	width:40px;
	height: 20px;
	float:left;
	position:relative;
	margin-top:5px;
	margin-right: 15px;
	color: #b1682a;
	font-size: 0.8em;
}
#controlSection #shareContainer {
	width: 405px;
	height: 172px;
	position:absolute;
	z-index: 9;
	background: url('../images/shareBg.png') no-repeat;
	display:none;
	cursor: default;
	color: #dcdcdc;
}
#controlSection #shareContainer .shareTitle {
	margin-top:10px;
	font-size: 1.5em;
	text-align: center;
}
#controlSection #shareContainer .shareSubtitle {
	font-size: 1.2em;
	text-align: center;
}
#controlSection #shareContainer .shareIcon{
	width: 360px;
	text-align: center;
	clear:both;
	position:relative;
	left:50%;
	top:15px;
	margin-left: -180px;
}
#controlSection #shareContainer .shareIcon img {
	padding: 0px 2px;
}
#controlSection #shareContainer .addthis_toolbox a{ 
	padding: 3px;
}
#controlSection #shareContainer .shareClose{
	font-size: 1.3em;
	text-align: center;
	margin-top: 15px;
	color: #b1682a;
	cursor: pointer;
}

/* Playlist button
######################################################*/
#controlSection #playlist {
	width:20px;
	height: 20px;
	float:left;
	position:relative;
	margin-top:5px;
	margin-right: 20px;
}
#controlSection #playlistButton {
	width: 100%;
	height:100%;
	float:left;
}
#controlSection .playlistOff {
	background: url('../images/playlist.png');
}
#controlSection .playlistOn,
#controlSection .playlistOn:hover,
#controlSection .playlistOff:hover {
	background: url('../images/playlist_hover.png');
}


#videoShare {
	width: 75px;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:437px;
	display:none;
	z-index:2;
}
		
/* Scroller 
############################################################## */
#videoScollerContainer {
	position:relative;
	top:0px;
	z-index: 99;
}

#videoScoller,
#videoScoller2 {
	width: 100%;
	height: 160px;
	position:relative;
	padding-top:5px;
}

#videoScollerContent,
#videoScollerContent2 {
	width: 902px;
	height: 145px;
	margin: 0 auto;		
	float:left;		
	margin-top: 3px;			
}	
#videoScollerContent ul,
#videoScollerContent2 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	margin-left:0px;
	margin-top:5px;
}
#videoScollerContent li,
#videoScollerContent2 li {
	float:left;
	width:160px;
	height:150px;
	text-align: center;
	padding: 0;
	margin: 0 10px;				
}
#videoScollerControlLeft, #videoScollerControlRight,
#videoScollerControlLeft2, #videoScollerControlRight2 {
	width: 60px;
	float: left;
	text-align:center;
	position:relative;
	top:30px;
	//margin-top:-10px;
}
#videoScollerControlLeft a, #videoScollerControlRight a,
#videoScollerControlLeft2 a, #videoScollerControlRight2 a {
	color: #fff;
}
#videoScollerList,
#videoScollerList2 {
	cursor: pointer;
}
#videoScollerList .top,
#videoScollerList2 .top {
	width: 100%;
	height: 94px;
	border: 1px solid #797979;
}
#videoScollerList .top img,
#videoScollerList2 .top img {
	width: 100%;
	height: 94px;
}
#videoScollerList .bottom,
#videoScollerList2 .bottom {
	color: #787878;
	margin-top:25px;
	padding: 2px;
	height: 40px;
	font-size: 0.8em;
	/*font-weight:bold;*/
	overflow: hidden;
	line-height: 13px;
}
#playlistClose{
	position:absolute;
	top:0px;
	right:10px;
	font-size: 1em;
	color: #b1682a;
	cursor: pointer;
}
#videoScollerContainer .playlistSectionTitle {
	text-align:center;
	font-weight:bold;
	color: #ccc;
}

/* Facebook Connect Mask
######################################################### */
#facebookConnectMask {
	position:absolute;
	top:0px;
	background: #111111;
	z-index:99;
	display:none;
}
#fbConnectContainer {
	color:#fff;
	width: 100%;
	background: #525252;
	position:relative;
	top:50%;
	margin-top:-140px;
	text-align:center;
	padding: 20px 0px;
}
#fbConnect{
	padding-top: 10px;
	cursor: pointer;
}
#facebookLogoutButton {
	width:80px;
	height:22px;
	float:right;
	position:relative;
	top:5px;
	right:5px;
	cursor: pointer;
	display:none;
}
			
.preloadImage {
	display:none;
}

.btn {
    border:1px solid #999; 
    background:#ccc; 
    color:#525252; 
    padding:2px 10px; 
    cursor:pointer; 
    -moz-border-radius: 5px; 
    border-radius: 5px;
}

.link {
    cursor: pointer;
    color:#428bca;
}
.link:hover {
    color:#2a6496;
}


#watch-green-band-link {
    position: absolute;
    width: 200px;
    height: 40px;
    top:100px;
    left:800px;
    background-color: #037803;
    cursor: pointer;
    color:#fff;
}
#watch-green-band-link:hover {
color:#d3d0d0;
}