/* LSD CSS. see lsd.js */

#backgroundHolder {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #999;
	z-index: 1;
}
#realbody {
	/*position: absolute;
	top: 0;
	width: 100%;
	overflow: auto;
	max-height: 100%;*/
	z-index: 100;
}
#backgroundCanvas {
	width: 100%;
	height: 100%;
}


#intro,
#screenListDialog {
	text-align:center;
	width: 320px;
	max-width: 98%;
	
	top: 30%;
	left:50%;
	margin-left: -160px;
	
	opacity: 0.9;
	
	z-index: 1010;
}

	#intro .tips {
		font-weight: bold;
		color: #fff;
	}

	#intro .chooseHeader {
		font-size: 1.2em;	
	}
	
	#intro #screenList {
		margin-bottom: 10px;
	}
	
#screenListDialog {
	top: 10%;
	overflow:auto;
}

	#screenListDialog #screenList {
		margin-top: 10px;
		margin-bottom: 10px;
	}

#screenList  {
	margin:0 15px 0; 
	padding: 5px 0px 10px;
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 5%, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 0.7) 100%);
	background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 5%, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 0.7) 100%);
	background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 5%, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 0.7) 100%);
	background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 5%, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 0.7) 100%);
	background-image: linear-gradient(rgba(255, 255, 255, 0.7) 5%, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 0.7) 100%);
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
	#screenList ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	
	#screenList li {
		display:list-item;
		margin:0;
		padding: 2px 5px;
		font-size: 10px;
		font-weight:normal;
		
		background-color: #500;
		border-color: #533;
	/*-webkit-linear-gradient(rgba(255, 255, 255, 0.7) 5%, rgba(85, 0, 0, .95) 90%)
		background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(85,0,0,.05) 85%);
		background-image: -moz-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(85,0,0,.05) 85%);
		background-image: -ms-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(85,0,0,.05) 85%);
		background-image: -o-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(85,0,0,.05) 85%);
		background-image: linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(85,0,0,.05) 85%);
		*/
	}
	
	#screenList li.loading {
		height:34px;
		background: url("blackSpinner.gif") no-repeat scroll center bottom transparent;
	}

.dialogButton {
	display:inline-block;
	background-color: #333;
	color: #fff;
	margin-right: 5px;
	margin-bottom: 8px;
	padding: 5px;
	border: 2px outset #ccc;
	font-weight:bold;
	font-size: 12px;
	
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	cursor:pointer;
	opacity: 1;
}
.dialogButton {
	background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
	background-image: -moz-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
	background-image: -ms-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
	background-image: -o-linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
	background-image: linear-gradient(rgba(255,255,255,0.7) 5%, rgba(255,255,255,0) 70%, rgba(0,0,0,.05) 85%);
}
a.dialogButton,
a.dialogButton:link,
a.dialogButton:hover,
a.dialogButton:visited,
a.dialogButton:active,
#screenList li a,
#screenList li a:link,
#screenList li a:hover,
#screenList li a:visited,
#screenList li a:active {
	font-weight: bold;
	color: #fff;
	text-decoration:none;
}


#backgroundCanvasControls,
.dialogControls {
	opacity: 0.7;
	position: absolute;
	margin:5px;
	padding:0 5px;
	border: inset 2px #fff;
	color: #fff;
	background-color: #000;
	z-index:1000;
	width:150px;
	min-height:20px;
	font-size: 10px;
	text-align:right;
	
}

#backgroundCanvasControls {
	top: 0px;
	right: 0px;
}

#backgroundCanvasControls.maximized {
	width: 187px;
}
#backgroundCanvasControls:hover {
	opacity: .85;
}

/* buttons */
#backgroundCanvasControls .button {
	cursor: pointer;
}
#backgroundCanvasControls .disabled 
{
	opacity: 0.3;
}
#backgroundCanvasControls .ui-state-default,
#backgroundCanvasControls .ui-state-hover.disabled {
	background: #333;
}
#backgroundCanvasControls .ui-state-hover {
	background: url("../_js/jquery-ui/css/vader/images/ui-bg_highlight-soft_60_dddddd_1x100.png") repeat-x scroll 50% 50% #DDDDDD;
}
#backgroundCanvasControls .ui-state-default .ui-icon,
#backgroundCanvasControls .ui-state-hover.disabled .ui-icon {
	background-image: url("../_js/jquery-ui/css/vader/images/ui-icons_aaaaaa_256x240.png")
}
#backgroundCanvasControls .ui-state-hover .ui-icon {
	background-image: url("../_js/jquery-ui/css/vader/images/ui-icons_cd0a0a_256x240.png")
}

#buttonHelp { display:none; }


/* controls */

#backgroundCanvasControls .controlPanel,
#backgroundCanvasControls .aboutBox,
#backgroundCanvasControls .clipThumbs,
#backgroundCanvasControls .section {
	clear:both;
	/*border-top: solid 1px #ccc;*/
	padding-top: 10px;
}

#backgroundCanvasControls .controlPanel,
#backgroundCanvasControls .aboutBox
{
	display:none;
}
#backgroundCanvasControls .controlPanel {
	text-align: center;
}
.clear, 
#backgroundCanvasControls .aboutBox {
	clear:both;
}
.dialogControls h1 {
	float:left;
	font-size: 12px;
	margin-right: 10px;
}
.dialogControls h1 a,
.dialogControls h1 a:hover,
.dialogControls h1 a:visited,
.dialogControls h1 a:active {
	color: #fff;
	text-decoration: none;
}
.dialogControls h2 {
	margin-top: 0;
}
.dialogControls h4 {
/*	text-align:left;*/
}

/* clip slider */
#backgroundCanvasControls .clipThumbs .next,
#backgroundCanvasControls .clipThumbs .previous {
	float: left;
	margin: -29px 5px 0;
}
#backgroundCanvasControls .clipThumbs .next {
	float:right;
}

/*clip thumbnails */
#backgroundCanvasControls .clipThumbs ul {
	padding: 0px;
	margin: 0px;
	height: 184px;
	width: 184px;
	float:left;
}
#backgroundCanvasControls .clipThumbs li.clipThumb {
	position: relative; 
	list-style: none;
}
body #backgroundCanvasControls div .clipThumb {
	margin: 5px; 
	padding: 2px; 
	cursor: pointer; 
	float: left;
	overflow: hidden;
	text-shadow: 1px 2px 2px #000;
	background-color: #000;
}
#backgroundCanvasControls .clipThumb,
#backgroundCanvasControls .layerControl.current,
#backgroundCanvasControls .sharedControls {
	border: 1px solid #333;
	background-color: #500;
	border-radius: 5px;	
	-moz-border-radius: 5px;
}
#backgroundCanvasControls .clipThumb:hover {
	border: 1px solid #666;
	background-color: #000;
}
#backgroundCanvasControls .layerControl:hover {
	border: 1px solid #333;
	background-color: #500;
}
#backgroundCanvasControls .clipThumb,
#backgroundCanvasControls .clipThumb img {
	width: 45px;
	height: 45px;
}

#backgroundCanvasControls .sharedControls {
	clear: both;
	z-index: 30;
	border-top: none;
	padding-top:10px;
	margin-bottom: 5px;
	
	border-top-right-radius: 0px;	
	-moz-border-top-right-radius: 0px;
	border-top-left-radius: 0px;	
	-moz-border-top-left-radius: 0px;	
}


/* layer thumb buttons */
#backgroundCanvasControls .layerControl .clipThumb {
	z-index: 5;
}
#backgroundCanvasControls .layerControl .clipThumb .button {
	z-index: 10; 
	width: 45px; 
	position: absolute; 
	height: 10px; 
	margin: -12px -2px;
	padding: 2px;
	border: none;
	opacity: 0.5;
}
#backgroundCanvasControls.sharedOpen .layerControl.current .clipThumb .ui-icon {
	background-position: 0 -16px; /*change to ui-icon-triangle-1-n */
}
#backgroundCanvasControls .layerControl .clipThumb .button.ui-state-hover {
	opacity: .88;
}

#backgroundCanvasControls .layerControl .clipThumb .button .ui-icon {
	margin: -2px auto;
}

/* layer controls */
#backgroundCanvasControls .layerControl {
	border: none;
	float: left;
	width: 32%;
	padding: 1px;
	border-bottom: 1px solid #333;
	
	border-radius: 5px 5px 0 0 ;	
	-moz-border-radius: 5px 5px 0 0 ;	
}
#backgroundCanvasControls .layerControl.current,
#backgroundCanvasControls .layerControl:hover{
	padding: 0px 0 1px 0;
	border-bottom-color: #500; /* make transparent and overlap */!
	background-color: #500;
	z-index: 40;
	
	border-bottom-right-radius: 0px;	
	-moz-border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;	
	-moz-border-bottom-left-radius: 0px;	
}

#backgroundCanvasControls .layerSliders .slider {
	margin:15px auto 5px;
}

#backgroundCanvasControls .layerSliders input.slider {
	-webkit-appearance: slider-vertical;
    width: 20px;
    height: 100px;
}

.fd-slider-vertical {
    height: 100px;
}

/*
#backgroundCanvasControls .layerSliders input.slider::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}​
*/
/****************** User list *******************/


#userList {
	bottom: 0px;
	right: 0px;
	z-index:900;
	
	max-height:90px;
	overflow: auto;
}

/*'OFFLINE'*/
#userList .status_0 {
	color: #333;
	text-decoration: line-through;
}
/*'WAITING'*/
#userList .status_1 {
	color: #666;
	font-style: italic;
}
/*'PLAYING'*/
#userList .status_2 {

}
/*'MASTER'*/
#userList .status_3 {
	font-weight: bold;
}

#userList .self {
	color: #fff;
	text-shadow: 0 0 7px #fc0, 0 0 7px #fc0, 0 0 7px #fc0;
}

#userList ul {margin: 0; padding: 4px 0; }
#userList ul li 
{margin: 2px; position: relative; padding: 1px;  list-style: none;}


/* SHARE OVERLAYS */

#shareOverlay {
	z-index:1100;
	position:absolute;
	/*top:auto;
	bottom: auto;
	right: auto;
	left: auto;
	*/
	margin:2% 15%;
	min-width: 300px;
	min-height: 310px;
	padding: 20px;
	text-align: center;
	
	
	width: 60%;
	height: 85%;
	
	opacity: 1.0;
	
	background-color: rgba(0, 0, 0, 0.7);
}

	#shareOverlay h1 {
		float: none;
		font-size: 28px;
		margin: 0 0 20px 0;
		padding: 0;
	}
	
	#shareOverlay h2 {
		font-size: 26px;
		margin-top: 10px;
	}
	
	#shareOverlay .shareButtons {
		position: absolute;
		right: 8px;
		top: 28px;
	}
	
	
	#shareOverlay img {
		height: 80%;
		max-width: 100%;
		clear:both;
	}

/* hide close button for now 
#buttonStop {
	display: none;
}
*/

#shareLogo {
	z-index:990;
	position:absolute;
	
	width:auto;
	left:5px;
	
	font-size:20px;
	text-shadow: 0px 0px 5px #000; /*2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000, -2px 0px 2px #000; */
}

	#shareLogo.top {
		top: 5px;
	}
	
	#shareLogo.bottom {
		bottom:5px;
	}
	
	#shareLogo a,
	#shareLogo a:link,
	#shareLogo a:hover,
	#shareLogo a:visited,
	#shareLogo a:active {
		font-weight: bold;
		color: #fff;
		text-decoration:none;
		
		
		font-size:28px;
	} 


/****************** Sliding Panel *******************/

#backgroundCanvasControls .slidingPanel 
{	
	width: 19000px;
}

#backgroundCanvasControls .panelHolder 
{
	width: 185px;	
	overflow: hidden;
}


/* jQuery UI */


#backgroundCanvasControls ul.icons {margin: 0; padding: 4px 0; float:right;}
#backgroundCanvasControls ul.icons li {margin: 2px; position: relative; padding: 1px; cursor: pointer; float: left;  list-style: none;}
#backgroundCanvasControls ul.icons span.ui-icon {float: left;}




/*** mobile screens ***/

/* keep clips selector in the screen */
@media all and (max-height: 460px) {
  #backgroundCanvasControls .sharedControls {
  	position: absolute;
  	top:0;
  }
}