/* #

Youmedia
Ciaopeople srl
version: 2.0

 */

* {margin:0px; padding:0px; outline:none; }
*:focus {outline:none}
button::-moz-focus-inner {border: 0;}
img {border: 0px none;}
::selection, ::-moz-selection {background:#fe843d !important; color:#fff; adow:none;}

ul li {list-style-type:none;}


/* #IE6 */
* html .clearfix{height: 1%; overflow: visible;}
/* #IE7 */
*+html .clearfix{min-height: 1%;}
.clearfix:after{clear: both; content: "."; display: block; height:0; visibility:hidden; font-size:0;}



i.views-16 {
	background-position: 0 0;
	width: 16px;
	height: 16px;
	margin-top: -3px;
	margin-right:6px;
}

i {
	background-image: url(../img/icon/icon-sprite.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	zoom: 1;
	vertical-align: middle;
}





/* Gallery embed 638 */

.main-area {
	cursor:pointer;
	width:100%;
	position:absolute;
	top:106px;
	bottom:55px;
	overflow:hidden;
	background:#000;
}
.main-area .gradient {
	position:absolute;
	z-index:10;
	bottom:0;
	left:0;
	height:150px;
	width:100%;

    background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8));
    background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8));
    background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8));
}

.main-area .info {
	position:absolute;
	z-index:21;
	padding-left:26px;
	font-size:14px;
	line-height:16px;
	color:#fff;
	left:20px;
	bottom:20px;
}
.main-area .info .title {font-weight:bold;}
.main-area .info .close {
	opacity:.5;
	position:absolute;
	z-index:22;
	top:0;
	left:0;
	display:block;
	background:url(../img/ymGallery-sprite.png) no-repeat;
	width:16px;
	height:16px;
	background-position:0 -156px;
}
.main-area .info .title a, .main-area .info .description a {
	color: #ffffff;
	text-decoration: underline;
}

.main-area .info:hover .close {opacity:1;}

.main-area .showArea {position:absolute; height:100%; top:0; z-index:20;}
.main-area .showArea.left {left:0; width:20%;}
.main-area .showArea.right {right:0; width:80%;}
.main-area .showArea:hover .arr {opacity:1;}
.main-area .showArea:hover .arr {background-color:#000;}
.notlive .showArea {display: none}

.main-area:hover .arr {opacity:1;}
.main-area .arr {
	position:absolute;
	opacity:0;
	height:132px;
	width:58px;
	top:50%;
	margin-top:-66px;
	background:url(../img/ymGallery-sprite.png) no-repeat;
	background-color:rgba(0,0,0,.5);

	transition:.2s ease-out opacity, .2s ease-out background;
	-webkit-transition:.2s ease-out opacity, .2s ease-out background;
	-moz-transition:.2s ease-out opacity, .2s ease-out background;
}
.main-area .arr.left {
	background-position:-58px -24px;
	left:0;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
}
.main-area .arr.right {
	background-position:0 -24px;
	right:0;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}
.main-area .arr:hover {background-color:#000;}
.showArea:active .arr.left, .showArea:active .arr.right {top:50.3%;}

.control-bar {
	position:absolute;
	overflow:hidden;
	bottom:0;
	left:0;
	width:100%;
	height:55px;
	border-top:1px solid #313131;
	background:#131313 url(../img/ymGallery-ctrlBar-wall.jpg) repeat-x top;
}

.sectRight {float:right; position:relative;background: #131313 url(../img/ymGallery-ctrlBar-wall.jpg) repeat-x top;}
.sectLeft {float:left;}

ul li {float:left; color:#fff;}
ul li.dvd {
    border-right:1px solid #313131;
    border-left:1px solid #0f0f0f;
}

ul li.dvd:first-child {border-left:0;}
ul li.dvd:last-child {border-right:0;}

ul li a {
	display:inline-block;
	position:relative;
	height:55px; /* control-bar height */
	width:60px;

	transition:.1s ease-out all;
	-webkit-transition:.1s ease-out all;
	-moz-transition:.1s ease-out all;
}
ul li a i {
	background:url(../img/ymGallery-sprite.png) no-repeat;
	height:24px;
	width:24px;
	display:inline-block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-12px;
	margin-left:-12px;

	transition:.1s ease-out all;
	-webkit-transition:.1s ease-out all;
	-moz-transition:.1s ease-out all;
}
/* i type */
ul li.play a i {background-position:0 0;}
ul li.info a i {background-position:-24px 0;}
ul li.fullscreen a i {background-position:-48px 0;}
ul li.arr-left a i {background-position:-72px 0;}
ul li.arr-right a i {background-position:-96px 0;}
ul li.ymlogo a i {background-position:-120px 0; width:30px;}
ul li.fullscreen-out a i {background-position:-150px 0;}
ul li.theatre-out a i {background-position:-174px 0; width:32px; margin-left:-16px;}
ul li.embed a i {background-position:-206px 0; width:32px; margin-left:-16px;}

/* Selected + hover */
ul li.selected a, ul li:hover a {
    background:rgba(0,0,0,.2);

    box-shadow:inset 0 0 26px 8px rgba(0,0,0,1);
    -webkit-box-shadow:inset 0 0 26px 8px rgba(0,0,0,1);
    -moz-box-shadow:inset 0 0 26px 8px rgba(0,0,0,1);
}
ul li.selected a i, ul li:hover a i {opacity:.5;}
ul li:active a i {opacity:1;}

li.ctrlSect {
    position:relative;
    min-width:80px;
    height:55px;
    text-align:center;
    font-size:28px;
    line-height:31px;
    font-weight:100;
    padding:12px 6px;
}

.thumbBox {
    margin:9px 15px;
    position: absolute;
    top:0;
    left:0;
    height:37px;
    width:1000px;
    overflow:hidden;
}
.thumbBox .thumb {display:block; height:37px; width:56px; float:left; margin-right:7px; overflow:hidden;}
.thumbBox .thumb.selected {border:1px solid #da6d31; width:54px; height:35px;}

.ymGallery .thumbBox .thumb img {width:56px;}
.thumbBox .thumb:hover img {opacity:.75;}

.thumb-overflow {
	width:100px;
	height:55px; /* control-bar height */
	position:absolute;
	z-index:20;
	left:-100px;
	top:0;
	background:url(../img/ymGallery-overflow.png) repeat-y;
}

.header {
	font-weight:bold;
	color:#fff;
	display:block;
	background:#181818;
	height:86px;
}

.clip {
	position: absolute;
	top: -100px;
	left: -100px;
	bottom: -100px;
	right: -100px;
	text-align: center;
}

.keepratio {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.clip-inset {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.clip img {
	display: inline-block;
	vertical-align: middle;
}

.vertical-align {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

/* HEADER GALLERY */
html, body {width: 100%; height: 100%; padding: 0; margin: 0; border: 0; overflow: hidden;}
html { background: transparent;}
body { font-family: Arial,Helvetica,sans-serif; position: absolute;}

.header a { text-decoration: none; color:#fff; }
.ymGallery-header { color:#fff; font-family: "Arial"; border-bottom: 1px solid #303030; }
.ymGallery-title { margin: 0; padding: 10px 0 0 10px; height: 59px; border-bottom: 1px solid #303030; }
.ymGallery-title .clearfix > div { display: inline; float: left; margin: 0; padding: 0; color: #fff; }
.ymGallery-title .clearfix > div a:hover { text-decoration: underline; }
.ymGallery-title .clearfix > div span { display: block; }
.ymGallery-title .clearfix > div.avatar { width: 50px; height: 50px; overflow: hidden; position:absolute; top:10; left:10px; }
.ymGallery-title .clearfix > div.avatar a img { width: 48px; height: 48px; border: 1px solid #111; }
.ymGallery-title .clearfix > div.avatar a:hover img { border: 1px solid #FF6600; }
.ymGallery-title .clearfix > div.info { padding-left:60px; padding-right:140px;}
.ymGallery-title .clearfix > div.info .title { max-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.ymGallery-title .clearfix > div.info .author { color: #999; font-size: 11px; }
.ymGallery-title .clearfix > div.info .author a { color: #FF6600; }
.ymGallery-title .clearfix > div.youmedia {position:absolute; top:10px; right:0; display:inline; float:right;}
.ymGallery-title .clearfix > div.youmedia a {display: block; width: 110px; height: 25px; margin: 0 10px 0 0; background: #181818 url(../img/fanplayer-header.png) top left no-repeat; text-indent: -9999px; }
.ymGallery-actions { background: #0c0c0c; border-top: 1px solid #0c0c0c; border-bottom: 1px solid #0c0c0c; height: 26px; padding: 7px 10px 0 10px; }
.ymGallery-actions .ymGallery-embed-action { display: inline; float: left; padding-right: 10px; }
.ymGallery-actions .ymGallery-embed-action:last-child { border: none; }

.ymGallery-actions .ymGallery-embed-action .views {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    text-transform: uppercase;
}

.ymGallery-actions .ymGallery-embed-action a.button {
    display: block;
    width: 70px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.08);
    font-size: 10px;
    background: #9b9b9b;
    background-image: linear-gradient(top,#a1a1a1,#7e7e7e);
    background-image: -webkit-linear-gradient(top,#a1a1a1,#7e7e7e);
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.ymGallery-actions .ymGallery-embed-action a.button:hover {
    background-image: linear-gradient(top,#fe8840,#fc4b14);
    background-image: -webkit-linear-gradient(top,#fe8840,#fc4b14);
}
.ymGallery-actions .ymGallery-embed-sharer {
    display: inline;
    float: right;
    margin: 0 0 0 10px;
    overflow: hidden;
}


      @media screen and (max-width: 365px) {
		.ymGallery-title .clearfix > div.youmedia {display: none;}
		.ymGallery-title .clearfix > div.info { padding-right:10px;}
      }
	  
      @media screen and (max-width: 470px) {
        .ymGallery-embed-sharer.gplus {display: none;}
        .ymGallery-embed-sharer.twitter {display: none;}
		.ymGallery-title .clearfix > div.info { padding-left:0;}
		  .clearfix > div.avatar {display: none;}
		  .clearfix > div.info {padding-left: 0;}
      }

	  @media screen and (max-width: 600px) {
		  .main-area .info {left:50px; right:50px;}
	  }