/* #

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;}

.rendering {text-rendering:optimizeLegibility;}

/* #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;}

body{
    background:#000;
    padding:0 40px;
    min-width:700px !important;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-size: 100%;
    word-wrap: break-word;
    position: relative;
}

hr {border-bottom:1px solid #333; border-top:0;}

h1 {
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    text-rendering: optimizeLegibility;
}
.floatleft {float:left;}
.floatright {float:right;}

.linewrap {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.clip.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%;
}

/* #Button */
button {
    cursor:pointer;
    height:30px;
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:400;
    border:0px;
    padding:7px 10px;
    color:#fff;
    text-transform:uppercase;

    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;

    adow:0 -1px 0 rgba(0, 0, 0, 0.08);
    background-repeat:no-repeat;

    transition:0.1s linear background;
    -webkit-transition:0.1s linear background;
    -moz-transition:0.1s linear background;
}

button:hover, button.grey:hover {background-position:0 -15px;}
button:focus {outline: 1px dotted #666;}

button:active {
    -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05);
    color:rgba(0,0,0,.2) !important;
}
button:disabled {opacity:0.2;}
button:disabled:hover {background-position:0px 0px;}
button:disabled:active {
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.0), 0 0px 0px rgba(0, 0, 0, 0.00);
    -moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.2), 0 0px 0px rgba(0, 0, 0, 0.00);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.0), 0 0px 0px rgba(0, 0, 0, 0.00);
}

button.grey {
    color:#fff;
    background:#c2c2c2;
    background-image:linear-gradient(top, #dbdbdb, #c2c2c2);
    background-image:-webkit-linear-gradient(top, #dbdbdb, #c2c2c2);
    background-image:-moz-linear-gradient(top, #dbdbdb, #c2c2c2);
    background-repeat:no-repeat;
}


/* ymGallery */

.sidebar-wrapper .wrapper-share {
    padding:8px 6px 4px 6px;
    width:306px;
    position:relative;
    left:-5px;
    background:#fff;
    border-bottom:1px solid #ccc;
}

.sidebar-wrapper .description .text-envelope.limited.mini {max-height: 110px;}

{
    position:relative;
    width:100%;
    height:100%;
    font-family:Arial, Helvetica, sans-serif;
    background:#000;
}
.main-area {
    background:#212121;
    cursor:pointer;
    width:100%;
    position:absolute;
    overflow:hidden;
    text-align:center;
    top:119px;
    bottom:55px;
}
.main-area .gradient {
    position:absolute;
    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;
    text-align:left;
    padding-left:26px;
    font-size:14px;
    line-height:16px;
    color:#fff;
    left:20px;
    bottom:15px;
}
.main-area .info .title {font-weight:bold;}
.main-area .info .close {
    opacity:.5;
    position:absolute;
    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:hover .close {opacity:1;}

.main-area .showArea {position:absolute; height:100%; top:0;}
.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;}

.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%;}

.ctrlBar {
    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; /* ctrlBar 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;
}


ul li.views { padding:18px 10px;}

ul li.views i {
    background:url(../img/ymGallery-sprite.png) no-repeat;
    height:24px;
    display:inline-block;
    top:50%;
    left:50%;
    background-position:-120px -24px;
    width:30px;
    margin-top:-3px;
}

ul li.views span {font-size:22px; font-weight:bold; line-height:19px;}

/* 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-in 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;}
ul li.theatre-out a i {background-position:-238px 0; width:32px; margin-left:-16px;}

/* Selected + hover */
ul li.selected a, .sectRight 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;
    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; height:35px; width:54px;}

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

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

.gl-head {
    font-weight:bold;
    position:relative;
    height:18px;
    color:#fff;
    display:block;
    padding:20px 10px;
    font-size:18px;
    line-height:18px;
    background:#000;
}
.gl-head .like {position:absolute; right:10px; top:18px;}

/* ymGallery-popup - THEATER */
.box-web-container {
    overflow:visible;
    position:relative;
}



.sidebar-wrapper {background:none; width:300px;}
.sidebar-wrapper,
.sidebar-wrapper .content  {padding:0;}
.sidebar-wrapper hr {left:0; width:100%;}
.sidebar-wrapper .description h1 {color:#fff;}
.sidebar-wrapper .timemod {border-bottom:1px solid #333;}
.sidebar-wrapper .description .more-text {
    color:#999;
    border-top:0;

    background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, .3), transparent);
    background: -moz-linear-gradient(270deg, rgba(255, 255, 255, .3), transparent);
}
.ymgallery-header { width:100%; height:103px;}

.ymG-container {
    padding: 16px 0 0px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #333;
}

.ymG-head {position:relative; margin-bottom:10px;}
.ymG-head .logo {position:absolute; top:4px; left:0; background:url(../img/logo-inv.png) no-repeat; width:147px; height:34px;}
.ymG-head .logo-cookist {position:absolute; top:4px; left:0; background:url(../img/fp-cookist.png) no-repeat; width:97px; height:34px;}
.ymG-head .title {
    display:block;
    padding-left:157px;
    font-size:26px;
    line-height:30px;
    color:#fff;
}

.ymG-head .title h1 {
    padding:8px;
    border-left:1px solid #f7f7f5;
}


.share-wrapper {width:100%; padding-bottom:10px; position:relative;}
.share-wrapper .int {
    display: inline;
    float: left;
    margin: 0 10px 0 0;
    overflow: hidden;
}

.share-wrapper .slider-theater { position:absolute; right:0; top:0; }
.slider-theater .slider-photo {
    padding:2px;
    display:inline-block;
    width:24px;
    height:24px;
    vertical-align:middle;
    float:left;
    background-image: linear-gradient(top,#a1a1a1,#7e7e7e);
    background-image: -webkit-linear-gradient(top,#a1a1a1,#7e7e7e);
    -webkit-transition: .1s linear background;
    -moz-transition: .1s linear background;
}
.slider-photo .prev { display:block; width:24px; height:24px; background:url(../img/slide-theater-prev.png) no-repeat;}
.slider-photo .next { display:block; width:24px; height:24px; background:url(../img/slide-theater-next.png) no-repeat;}


.slider-theater .slider-photo:first-child {margin-right:10px;}
.slider-theater .slider-photo:hover {background-position:0 0; background-image:linear-gradient(top,#7e7e7e,#a1a1a1); background-image:-webkit-linear-gradient(top,#7e7e7e,#a1a1a1); }


.info-theater {width:100%; position:relative;}
.info-theater .info-content {padding-right:320px;}
.info-theater .info-content .basic-info {margin:0 0 10px 0 ; border-bottom: 1px solid #666; padding:10px 0;}
.info-theater .info-content .basic-info .author { float:left;}
.info-content .basic-info .author .avatar { display:block; width:30px; height:30px; margin-right:10px ; overflow:hidden; float:left;}
.info-content .basic-info .author .avatar img { width:100%;}
.info-theater .info-content .basic-info .name-author {float:left; font-size:12px; line-height:16px; color:#fff;}
.info-theater .info-content .basic-info .name-author a {color:#F25A00; font-weight:bold;}
.info-theater .info-content .basic-info .name-author a:hover {color:#F25A00;}
.info-theater .info-content .basic-info .timemod {margin:8px 0 0; border-bottom:0; padding-bottom:0; float:right; font-size: 11px; color: #999; line-height: 14px;}
.info-theater .banner-theater {width:300px; height:250px; position:absolute; top:20px; right:0;}
.info-theater .info-content .text-theater { font-size:16px; line-height:20px; color:#fff;}
.info-theater .info-content .text-theater a {color:#666;}
.info-theater .info-content .text-theater a:hover {color: #F25A00;}



.ymG-head .close {
    opacity:.5;
    position:absolute;
    top:0;
    right:-20px;
    display:block;
    background:url(../img/ymGallery-sprite.png) no-repeat;
    width:22px;
    height:22px;
    background-position:-16px -156px;
}
.ymG-head .close:hover {opacity:1;}