/*===================================================================*/
/*============================= APP STYLE ===========================*/
/*===================================================================*/




/* TODO: FIX SCROLLBAR ALIGN AND BORDER-TOP AND BOTTOM OF THE TICKER */

/*============================= GLOBAL ============================*/

body{
	background: #2d2d2d;
	overflow: hidden;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	color:#888888;
}

*:not(textarea){
	-webkit-user-select:none;
	-moz-user-select:-moz-none;
	-o-user-select:none;
	user-select:none;
	outline:none;
}

textarea{
  -webkit-user-select:text;
	-moz-user-select:text!important;
}

button{
	border:none;
	background:none;
	/* css3 remove appearance */
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	appearance:none;
	/* css3 remove border-radius */
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-o-border-radius:0;
	border-radius:0;
	margin:0;
	padding:0;
	display: block;
	cursor: pointer;
}

/* custom jqueryUI slider */

#status .slider{
	float:left;
	position:relative;
	height:7px;
	background: rgb(49,49,49); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMxMzEzMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(49,49,49,1) 0%, rgba(61,61,61,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(49,49,49,1)), color-stop(100%,rgba(61,61,61,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(49,49,49,1) 0%,rgba(61,61,61,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(49,49,49,1) 0%,rgba(61,61,61,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(49,49,49,1) 0%,rgba(61,61,61,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(49,49,49,1) 0%,rgba(61,61,61,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313131', endColorstr='#3d3d3d',GradientType=0 ); /* IE6-8 */
	cursor:pointer;
}

#status .slider .ui-slider-handle{
	display: none;
}

#status .slider .ui-slider-loaded{
	position:absolute;
	top:0;
	height:6px;
	width:0%;
	background: rgb(73,73,73); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5NDk0OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YTVhNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(73,73,73,1) 0%, rgba(90,90,90,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,73,73,1)), color-stop(100%,rgba(90,90,90,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,73,73,1) 0%,rgba(90,90,90,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,73,73,1) 0%,rgba(90,90,90,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,73,73,1) 0%,rgba(90,90,90,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,73,73,1) 0%,rgba(90,90,90,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#5a5a5a',GradientType=0 ); /* IE6-8 */
	z-index:5;

}

#status .slider .ui-slider-range{
	position:absolute;
	top:0;
	left:0;
	height:6px;
	z-index:10;
  /*
	background: rgb(167,167,167); /* Old browsers
/* IE9 SVG, needs conditional override of 'filter' to 'none'
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3YTdhNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MTcxNzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(167,167,167,1) 0%, rgba(113,113,113,1) 100%); /* FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,167,167,1)), color-stop(100%,rgba(113,113,113,1))); /* Chrome,Safari4+
background: -webkit-linear-gradient(top, rgba(167,167,167,1) 0%,rgba(113,113,113,1) 100%); /* Chrome10+,Safari5.1+
background: -o-linear-gradient(top, rgba(167,167,167,1) 0%,rgba(113,113,113,1) 100%); /* Opera 11.10+
background: -ms-linear-gradient(top, rgba(167,167,167,1) 0%,rgba(113,113,113,1) 100%); /* IE10+
background: linear-gradient(to bottom, rgba(167,167,167,1) 0%,rgba(113,113,113,1) 100%); /* W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7a7a7', endColorstr='#717171',GradientType=0 ); /* IE6-8
*/
	box-shadow:inset 0px -1px 0px rgba(137,137,137,1);
	cursor:pointer;

  background: #0CBAED;
  background-color: #0CBAED;

}



.popin{
	width:100%;
	height:100%;
  background-color: black;
	background: rgba(1,1,1,.8);
	position: absolute;
	left:0;
	top:0;
	z-index: 3000;
	display: none;
}

.popin p{
	color:#0ebaed;
	font-size:;
	text-transform: uppercase;
	margin-top: 4px;
}


#networks{
	width:180px;
	margin:5px auto;
}

#networks a{
	display: block;
	width:35px;
	height:35px;
	float: left;
	margin:5px;
	text-indent: -9999px;
}

#networks a:hover
{
  text-decoration: none;
}

#sfb{background:url('img/share_fb.png') no-repeat;}
#stw{background:url('img/share_twt.png') no-repeat;}
#sgp{background:url('img/share_gplus.png') no-repeat;}
#sin{background:url('img/share_in.png') no-repeat;}


#popshare{
	text-align: center;
}

#popembed p {
	max-width:620px;
	width: 90%;
	margin:2px auto;
}

#popembed textarea#code{
	display: block;
	border:none;
	background: none;
	max-width:620px;
	width: 90%;
	border:3px #898989 solid;
	background: #fff;
	margin:5px auto;
	border-radius: 4px;
	padding:4px;
	text-align: left;
}


.closepop{
	position: absolute;
	display: block;
	width:16px;
	height:16px;
	right:7px;
	top:6px;
	background:url('img/close_pop.png') no-repeat;
	cursor: pointer;
  z-index:9999;
}

#popembed p
{
  margin-top: 4px;
}
#popembed textarea
{
  height: 20px;
}

.playlist .popin p
,.thumbslist .popin p

{
	padding-top:40px;
}

.playlist #popembed.popin p
,.thumbslist #popembed.popin p
{
  padding-top:5px;
}

.playlist #popembed.popin textarea
,.thumbslist #popembed.popin textarea
{
  height: 100px;
}



#player{
	border:1px solid #52514e;
}


#main{
	display: table;
	width:100%;
}

#thumb{
	display: none;
	width:0;
}


/* if .thumbs is called */

.thumbs #thumb
/*,.thumbslist #thumb*/

{
	display: table-cell;
	width:0;
}


#thumb img{
	border: 2px #fff solid;
	white-space: nowrap;
  max-width: 115px;
  max-height: 65px;
}

/* */


#wrapper{
	display: table-cell;
	width: 100%;
	vertical-align:middle;
}

#wrapper #title p {
	height: 12px;
	max-height: 12px;
	overflow: hidden;
}

/* control */

#control{
	width:100%;
	height:37px;
	border-bottom:1px solid #52514e;
	display: table;
	background:#080808;
}

#control > div{
	display: table-cell;
	vertical-align: middle;
	white-space:nowrap;
	margin-left:0;
}
#control #play{
	width:40px;
	height:100%;
}

#control button{
	width:100%;
	height:100%;
	//border-right:1px solid #52514e;
}




#control #play {
	border-right:1px solid #52514e;
	width: 40px;
}

#control #play button.paused{
	background: url('img/btn_paused.png') no-repeat;
}


#control #play button.playing{
	background: url('img/btn_playing.png') no-repeat;
}

#control #time{
	border-right:1px solid #52514e;
	padding-left:10px;
	padding-right:10px;
}
#control #time p {
	color:#888888;
	font-size: 13px;
}

#control #time p span{
	color:#0cbaed;
}

/* share */
#control #share{
	border-right:1px solid #52514e;
	width:105px;
}

#control #share button{
	background: url('img/btn_share.png') no-repeat left;
	padding-left:45px;
	padding-right:20px;
	color:#888888;
	font-size: 13px;
	width:100%;
	height: 100%;
}


/* embed */

#control #embed{
	border-right:1px solid #52514e;
	width:105px;
	z-index: 100;
}

#control #embed button{
	background: url('img/btn_embed.png') no-repeat left;
	padding-left:45px;
	padding-right:20px;
	color:#888888;
	font-size: 13px;
	width:100%;
	height: 100%;
}


#control button
,#control #embed button
,#control #share button
{
  height: 37px;
}

/* volume btn*/

#control #volume{
	width:43px;
	position: relative;
	overflow: hidden;
	z-index:0;
  height: 37px;
}

#control #volume button{
	background: url('img/btn_volume.png') no-repeat scroll right top transparent;
	width:100%;
	height: 37px;

}

#control #volume.muted button{
  /*background: url('img/btn_volume.png') no-repeat scroll right bottom transparent;*/
  background-position: right bottom;
}

#volume .slider{
	width:100px;
	top:13px;
	position:absolute;
	right:43px;
	background: #444444;
	height: 11px;
	box-shadow:inset 0px -1px 0px #535353;
	cursor:pointer;
	display:none;
}

#volume .slider .ui-slider-handle{
	display: block;
	background: #fffeff;
	border-radius: 2px;
	width:5px;
	height:17px;
	position: absolute;
	top:-3px;
	left:-2px;
}

#volume .slider .ui-slider-range{
	position:absolute;
	top:0;
	left:0;
	height:11px;
	z-index:10;
	background:#0ebaec;
	cursor:pointer;
}

/* status */
#status{
	height:7px;
	width:100%;
}

#status .slider{
	width:100%;
}

#title
{
	height:19px;
	padding-top:6px;
	padding-left:5px;
	border-bottom:1px solid #52514e;
	background: #080808;
}

#title p{
	font-size: 12px;
	color:#fff;
}

#control button:hover{
}


/* playlist */

#playlist{
	/*height:125px;*/
  height:81px;
	background: #2d2d2d;
	width: 100%;
	display: none;
}

#playlist ul li img{
	display: none;
}

#playlist ul li{
	background:#444;
	color:#fff;
	font-size: 12px;
	height:20px;
	padding-top:5px;
	padding-left:5px;
	cursor: pointer;
}

#playlist ul li.selected{
	background: #35BAEB;
}


#playlist ul li:nth-child(even){
	background:#777;
}
#playlist ul li.selected:nth-child(even){
	background: #35BAEB;
}


.playlist #playlist{
	display:block;
}

/* mode gallery */
.thumbslist #playlist{
	background:#080808;
	display: block;
	position: relative;
	height:83px !important;
}


.thumbslist #playlist ul {
	display: block;
	position: absolute;
	height:80px;
	left:0;
  /*width: 9999999999px;*/
}

.thumbslist #playlist #leftarrow, .thumbslist #playlist #rightarrow{
	display: block;
	width:40px;
	height:83px;
	position: absolute;
	top:0;
	cursor: pointer;
  z-index: 2888;
}

.thumbslist #playlist #leftarrow{
	left:-1px;
	background: #080808 url('img/gallery-arrow-left.png') no-repeat center;
	border-right:1px solid #484848;
}

.thumbslist #playlist #rightarrow{
	right:-1px;
	background: #080808 url('img/gallery-arrow-right.png') no-repeat center;
	-webkit-box-shadow: 10px 0px 5px -2px rgba(1,1,1,.4);
	border-left:1px solid #484848;
}


.thumbslist #playlist ul li
{
	float:left;
	background:#2d2d2d;
	padding: 2px 4px 0 4px;
	margin:4px 3px 3px 3px;
	height:72px;
	border-top:1px solid #484848;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	cursor: pointer;
}
.thumbslist #playlist ul li,
.thumbslist #playlist ul li:nth-child(even)
{
	float:left;
	background:#2d2d2d;
	padding: 2px 4px 0 4px;
	margin:4px 3px 3px 3px;
	height:72px;
	border-top:1px solid #484848;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	cursor: pointer;
}

.thumbslist #playlist li img{
	display: block;
	margin-bottom: 2px;
	outline:1px solid #000;
	border:2px solid #fff;
	width:86px;
	height:47px;
	box-shadow:0px 2px 0px #484848;
}
.popinOpened .thumbslist #playlist li img
{
  /* for opera*/
  outline:0px solid #000;
}

.thumbslist #playlist .selected img{
	border:2px solid #0da8d6;
}


.thumbslist #playlist li p{
	display: block;
	white-space:nowrap;
	text-overflow: ellipsis;
	width:87px;
	overflow:hidden;
	font-size: 10px;
	padding-left:3px;
}





/* */

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}


.thumbslist #playlist
{
	height:95px;
}


.playlist .jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	/*right: 1px;*/
  right: 3px;
	top: 2px;
	width:7px !important;
	background: #000;
	border-radius:2px;

	box-shadow:inset 0px -1px 0px #494949;

}

.playlist .jScrollPaneDrag {
	position: absolute;
	background: #a5a5a5;
	cursor: pointer;
	overflow: hidden;
	border-radius: 2px;
	width:5px !important;
	left:1px;
}

.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000;}
  .tipsy-inner { padding: 4px 8px 4px 8px; background-color: #2D2D2D; color: white; max-width: 200px; text-align: center; border:1px #898989 solid;}
  /*.tipsy-arrow { position: absolute; background: url('img/tipsy.gif') no-repeat top left; width: 9px; height: 5px; z-index: 102000}*/
  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }



  #player
  {
    display:none;
  }

  #loading
  {
    background: url("../../diaporama/css/img/loading.gif") no-repeat scroll center center black;
    height: 100%;
    position: absolute;
    width: 100%;
}

.jspVerticalBar
{
  width: 16px;
}

.jspContainer .jspDrag
{
  left: 15%;
  width: 80%;
  background-color: #A5A5A5;
  border-radius: 2px 2px 2px 2px;
}

.jspVerticalBar
{
  cursor:pointer;
  background-color:#2D2D2D;
}

.jspTrack {
  background-color:#000000;
   width: 50%;
  left: 25%;
}
.jspVerticalBar .jspArrowUp
,.jspVerticalBar .jspArrowDown
{
  display: block;
  height: 9px;
  overflow: hidden;
  visibility: hidden;
  right: 0;
  text-indent: -2000px;
  top: 0;
  z-index: 1;
}


.lt390 #control #embed
{
  width: 45px;
}
.lt390 #control #embed button
{
  padding: 0px;
  color:black;
  text-indent: -9999px;
}

.lt330 #control #share
{
  width: 45px;
}

.lt330 #control #share button
{
  padding: 0px;
  color:black;
  text-indent: -9999px;
}

.lt270 #time p span
{
  display:none;
}
.lt240 #embed
{
  display:none;
}

.lt190 #share
{
  display:none;
}


.lt140 #volume
{
  display:none;
}
.lt140 #control #time
{
  border-right: 0;
}