/* fonts */
@font-face {
	font-family: 'Open Sans';
	font-weight: normal;
    font-style: normal;
	src: local('Open Sans'), local('OpenSans'),
	url("fonts/OpenSans-Regular.eot") format("eot"),
	url("fonts/OpenSans-Regular.woff") format("woff"),
	url("fonts/OpenSans-Regular.ttf") format("truetype"),
	url("fonts/OpenSans-Regular.svg#OpenSans-Regular") format("svg");
}
@font-face {
	font-family: 'Open Sans';
    font-weight: normal;
	font-style: italic;
	src: local('Open Sans Italic'), local('OpenSans-Italic'),
    url("fonts/OpenSans-Italic.eot") format("eot"),
	url("fonts/OpenSans-Italic.woff") format("woff"),
	url("fonts/OpenSans-Italic.ttf") format("truetype"),
	url("fonts/OpenSans-Italic.svg#OpenSans-Italic") format("svg");
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 300;
    font-style: normal;
    src: local('Open Sans Light'), local('OpenSans-Light'),
    url("fonts/OpenSans-Light.eot") format("eot"),
    url("fonts/OpenSans-Light.woff") format("woff"),
    url("fonts/OpenSans-Light.ttf") format("truetype"),
    url("fonts/OpenSans-Light.svg#OpenSans-Regular") format("svg");
}
@font-face {
	font-family: 'Open Sans';
	font-weight: 600;
	font-style: normal;
	src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
    url("fonts/OpenSans-Semibold.eot") format("eot"),
	url("fonts/OpenSans-Semibold.woff") format("woff"),
	url("fonts/OpenSans-Semibold.ttf") format("truetype"),
	url("fonts/OpenSans-Semibold.svg#OpenSans-Semibold") format("svg");
}
@font-face {
	font-family: 'Open Sans';
	font-weight: 600;
	font-style: italic;
	src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'),
    url("fonts/OpenSans-SemiboldItalic.eot") format("eot"),
	url("fonts/OpenSans-SemiboldItalic.woff") format("woff"),
	url("fonts/OpenSans-SemiboldItalic.ttf") format("truetype"),
	url("fonts/OpenSans-SemiboldItalic.svg#OpenSans-SemiboldItalic") format("svg");
}
@font-face {
    font-family: 'Open Sans';
    font-weight: bold;
    font-style: normal;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
    url("fonts/OpenSans-Bold.eot") format("eot"),
    url("fonts/OpenSans-Bold.woff") format("woff"),
    url("fonts/OpenSans-Bold.ttf") format("truetype"),
    url("fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg");
}
/* custom reset */
body{
	height: 100%;
	font-family: 'Open Sans';
}
a{
	color:#000;
	text-decoration: none;
}
textarea {
    resize: none;
}

input, textarea {
    font-family: 'Open Sans';
}

/* common */
.wrapper{
	background-color: #FFF;
	background-image: url(../img/bg.png);
	background-repeat: repeat-x;
}
.wrap{
	min-height:100%;
	width: 960px;
	margin: 0 auto;
	font-weight: 400;
	color:#333333;
	font-size: 13px;
  	height: 100%;
}
.wrap-header-top{
	padding-top: 5px;
	background-color: #370078;
	height: 53px;
	margin-bottom: 1px;
}
.wrap-header-top-content{
	width: 960px;
	margin: 0 auto;
}
/* header - title-video-wrap */
.title-video-wrap{
	width: 380px;
}
.title-video-wrap .title-video {
	margin-top: 10px;
	left: 0;
	font-size: 18px;
	font-weight: bold;
	color: #30036d;
	text-decoration: underline;
}
.title-video-wrap .title-video:hover {
    text-decoration: none;
}
.title-video-wrap .open-popin {
	color: #30036d;
	background-image: url(../img/pencil-icon.png);
	background-repeat: no-repeat;
	background-position: right 6px;
	padding-right: 20px;
	min-height: 20px;
}
.title-header{
	width: 460px;
	float: left;
	height: 60px;
}

.wrap-header{
	background-color: #e2dbfd;
}
.header{
	position: relative;
	width: 960px;
	margin: 0 auto;
	height: 60px;
}
.header .title-video-wrap, 
.header h1, 
.header .profil-wrap{
	position: relative;
	float: left;
	height: 60px;
}
.header h1{
	display: inline-block;
	height: 60px;
	width: 250px;
}
.header h1 a img, 
.header h1 a span{
	float: left;
}
.header h1 a{
	padding-top: 8px;
}
.header h1 a span{
 	font-size: 20px;
 	text-align: center;
 	padding: 0px 0 0 6px;
 	font-weight: 300;
}
/* header - profil-wrap */
.header .profil-wrap{
    float: right;
	width: 250px;
}
.header .profil-wrap a{
	width: 160px;
	display: block;
	text-align: right;
	position: absolute;
	right: 0;
	font-size: 13px;
	color: #30036d;
	padding-right: 18px;
}
.header .profil-wrap a:hover{
	color: #FF00FC;
}
.header .profil-wrap a.all-hashcut{
	top: 2px;
	background: url(../img/arrow-top.png) right 2px no-repeat;
}
.header .profil-wrap a.my-profil{
	top: 42px;
	background: url(../img/arrow-bot.png) right 4px no-repeat;
}
.header .profil-wrap a.new-hashcut{
	top: 22px;
	background: url(../img/pencil-icon.png) right 0px no-repeat;
}
/* content */
.content{
	width: 960px;
	min-height: 750px;
}
/* popin */
.popin{
	padding-top: 12px;
	position: absolute;
	top: 0;
	z-index: 10;
}
.pointer{
	position: absolute;
	top: 0;
}
.popin-content{
	padding: 8px;
	border: 1px solid #867a97;
	background: url(../img/bg-jaune.png);
}
.popin-content input[type=text],
.popin-content input[type=password], 
.popin-content textarea{
	padding: 0 4px;
	font-size: 12px;
	border: 1px solid #867a97;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}
.popin-content input[type=text],
.popin-content input[type=password] {
    line-height: 20px;
    height: 20px;
}
/* popin - user */

.popin {
    display: none;
}

.user.popin{
	top: 48px;
	right: 0;
}
.user.popin img.pointer{
	right: 36px;
}
.button {
	margin-top: 2px;
	display: block;
	font-size: 12px;
	border: none;
	padding: 0;
	width: 150px;
	background-color: #30036D;
	color: #FFF;
	text-align: center;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
  	cursor: pointer;
  	height: 22px;
  	line-height: 22px;
}

.button:hover{
	background-color: #FF00FC
}
.user.login h2, 
.user.signup h2 {
	color: #de2500;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
}

.user.info h2 {
    color: #7628df;
    font-size: 18px;
    font-weight: 600;margin-bottom: 2px;
}

.user label{
	width: 84px;
	font-size: 12px;
	display: inline-block;
	line-height: 10px;
}
.user p {
	display: block;
	line-height: 18px;
	margin-bottom: 8px;
	overflow: hidden;
}
.user input[type=text],
.user input[type=password] {
	position: relative;
	width: 110px;
	padding: 0 5px;
	height: 18px;
	display: inline-block;
}
.user .button {
    float: right;
}
/* popin - user - info */
.user.info {
	text-align: right;
}
.user h3{
	color: #30036d;
	font-size: 14px;
	margin-bottom: 10px;
}
.user .nb-hashcut{
	color: #de2500;
	font-size: 14px;
	text-decoration: underline;
	display: block;
	margin-bottom: 12px;
}
.user .nb-hashcut:hover{
	text-decoration: none;
}
.user.popin.info .popin-content a.change-account:hover{
	background-color: #FF00FC;
}
/* popin - user - signup */
.signup-button{
	background-color: #de2500;
}
.user .popin-content{
	min-width: 205px;
}
/* footer */
.footer{
	border-top: 1px solid black;
	width: 100%;
	padding-top: 8px;
}
.footer .links-left{
	float: left;
}
.footer .links-left li{
	margin-bottom: 4px;
}
.footer .links-left li a{
	border-bottom: 1px solid #cccccc;
}
.footer .links-left li a:hover{
	border-bottom: none;
}
.footer .links-right{
	float: right;
}
.footer .links-right li{
	line-height: 40px;
	float: right;
	margin-left: 8px;
}
.footer .links-right li img {
    vertical-align: middle;
}
/* video-item */
.hashcut-video-wrap{
	padding-left: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}
.video-item{
	width: 300px;
	float: left;
	margin-right: 20px;
}

.video-item h3{
	font-size: 12px;
}
.video-item h3 strong{
	font-weight: 600;
}
.video-item h3 span{
	color: #de2500;
}
.video-item .screenshot{
	display: inline-block;
	margin-bottom: 8px;
}
.video-item h3 a{
	border-bottom: 1px solid #bababa;
	display: inline-block;
    line-height: 12px;
}
.video-item h3 a:hover{
	border-bottom: none;
}
.pagination{
	text-align: center;
}
.pagination a{
	font-size: 14px;
	color: #7628df;
	text-decoration: underline;
}
.pagination a:hover{
	text-decoration: none;
}
.pagination a.active{
	color: #de2500;
	text-decoration: none;
}

/* content */
.left-content, 
.right-content{
	float: left;
}
.left-content h2,
.right-content h2{
	padding: 6px 0;
	margin: 8px 0 14px;
	border-bottom: 1px solid #333333;
	color: #30036d;
	font-size: 18px;
	font-weight: 600;
	clear: both;
}
/* left-content */
.left-content{
	width: 630px;
	margin-right: 20px;
}
/* right-content */
.right-content{
	width: 310px;
}
/* list-video */
.list-video {
	overflow: hidden;
	overflow-y: auto;
	height: 680px;
}
.item-video {
	margin-bottom: 1px;
	padding: 5px 10px 5px 10px;
	clear: both;
	width: auto;
	min-height: 62px;
	display: block;
	position: relative;
}
.item-video .thumbnail{
	float: left;
	margin-right: 4px;
	max-width: 80px;
	max-height: 60px;
	box-shadow: 2px 2px 2px #333333;
}
.item-video .video-info{
    margin-left: 88px;
}
.item-video .title-video{
	font-size: 13px;
	font-weight: 600;
	color: #30036d;
	margin-bottom: 1px;
}
.item-video .description{
	font-size: 11px;
	margin-bottom: 1px;
}
.item-video .time-length{
	font-size: 12px;
	font-weight: 600;
}
.item-video .time-length span{
	color: #de2500;
}
.item-video .media-count-wrap {
    width: 30px;
	text-align: center;
	position: absolute;
  	top: 45px;
  	left: 75px;
	height: 15px;
	display: none;
}
.item-video .media-count{
	color: #FFF;
	font-size: 10px;
	line-height: 15px;
	background-color: #ff00fc;
	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
  	padding: 0 3px;
  	border: 1px solid #DE2500;
}
.item-video .subtitle{
	margin-bottom: 2px;
	color: #de2500;
	font-size: 11px;
}
.item-video .duration{
	color: #7628df;
	font-size: 12px;
	font-weight: 600;
}
/* frise */
.frise{
	height: 22px;
	position: relative;
	border: 1px solid #333333;
}

.mashup-frise {
    cursor: pointer;
}

.frise-overflow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
.bloc-pvw .frise {
   margin: 7px 5px 2px;
}

.aucun-segment{
	font-weight: 600;
	font-style: italic;
	text-align: center;
	line-height: 20px;
	width: 100%;
	z-index:0;
	background: #CCCCCC;
}
.frise-segment{
	position: absolute;
	height: 100%;
}
.mashup-frise .frise-segment {
	-moz-box-shadow: inset 1px 1px 1px #333333;
  	-webkit-box-shadow: inset 1px 1px 1px #333333;
  	box-shadow: inset 1px 1px 1px #333333;
}
.frise-segment.active, .mashup-frise .frise-segment.active {
    background-image: url(../img/pinstripe-purple.png);
    background-repeat: repeat;
}
.frise-indication{
	height: 100%;
	line-height: 22px;
	display: inline-block;
	position: absolute;
	color: #FFF;
	top:0;
	left: 0px;
	font-size: 10px;
	width: 30px;
	text-align: center;
	background: url(../img/bg-indication.png) 15px 0 no-repeat;
	margin-left: -15px;
	text-shadow: 1px 1px 1px #000000;
}
.frise-position {
    width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
    z-index: 3; background: #FF00FC;
}
/* col-middle - bloc-segmentation - popin.segmentation */

.pointer-padder {
    left: 5px;
    position: absolute;
    right: 5px;
    top: 0;
}

.pointer-padder .pointer {
    top: 0; margin-left: -10px;
}

.segment-info {
    padding-top: 12px;
    overflow: hidden;
    position: relative;
}

/* popin - frise-description */

.annotation-title {
	color: #de2500;
	font-size: 14px;
	font-weight: bold;
}
.annotation-time {
    color: #7628DF;
}
.mashup-description table{
	font-size: 12px;
}
.mashup-description th{
	text-align: left;
	font-weight: 600;
	display: block;
	min-width: 75px;
}
.mashup-description td{
	line-height: 15px;
	padding-left: 2px;
}
.mashup-description th, 
.mashup-description td, 
.mashup-description h2{
	padding-bottom: 8px;
}
.mashup-description .tools{
	float: right;
}

.video {
	background: #333333;
	position: relative;
}
.video-wait  {
    display: none;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(120, 120, 140, .6);
    background-image: url(../img/reel.gif);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
}
.widget {
    position: relative; 
}

.segment-tooltip-wrapper {
    position: absolute; height: 0; width: 0;
    top: 0; z-index: 7; display: none; left: 50%;
}

.segment-tooltip {
	padding: 4px; border: 1px solid #867a97; background: url(../img/bg-jaune.png);
    width: 130px; position: absolute; bottom: 14px; left: -70px;
    font-size: 12px; font-weight: 600; text-align: center; color: #DE2500;
}

.segment-tooltip-tip {
    position: absolute; top: -15px; left: -10px; background: url(../img/inv-triangle.png);
    width: 20px; height: 13px;
}

/* Styles from Metadataplayer */

/* Slider Widget */

.Ldt-Slider-Container {
    background: #969696;
    background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%);
    background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
    border-top: 1px solid #969696;
    height: 4px;
    position: relative; z-index: 5;
}

.Ldt-Slider {
    border: none; border-radius: 0; padding: 0; height: 100%; background: #B6B8B8;
}

.Ldt-Slider .ui-slider-handle {
    border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff;
}

.Ldt-Slider .ui-slider-range {
    background: #747474;
}

.Ldt-Slider-Time {
    position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
    font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -14px;
    display: none; text-align: center; font-weight: bold;
}

/* Controller Widget */

.Ldt-Ctrl {
  font-size: 10px;
  background:url('../img/player_gradient.png') repeat-x transparent ;
  height: 25px;
  border: 1px solid #969696;
  position: relative;
}

.Ldt-Ctrl-Left {
  float:left; width: 300px;
}

.Ldt-Ctrl-Right {
  float: right;
}

.Ldt-Ctrl-button {
  float: left;
  width: 30px; height: 25px;
  background: url('../img/player-sprites.png');
  cursor: pointer;
}

.Ldt-Ctrl-spacer {
    float: left; width: 1px; height: 25px; background: #969696;
}

.Ldt-Ctrl-Play {
  margin: 0 15px;
}

.Ldt-Ctrl-Play-PlayState {
  background-position: 0 0;
}

.Ldt-Ctrl-Play-PlayState:hover {
  background-position: 0 -25px;
}

.Ldt-Ctrl-Play-PlayState:active {
  background-position: 0 -50px;
}

.Ldt-Ctrl-Play-PauseState {
  background-position: -30px 0;
}

.Ldt-Ctrl-Play-PauseState:hover {
  background-position: -30px -25px;
}

.Ldt-Ctrl-Play-PauseState:active {
  background-position: -30px -50px;
}

.Ldt-Ctrl-InOutBlock {
    display: none;
}

.segment-mode .Ldt-Ctrl-InOutBlock {
    display: block;
}

.Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut {
    margin: 0 2px;
}

.Ldt-Ctrl-SetIn {
    background-position: -60px 0;
}

.Ldt-Ctrl-SetIn:hover {
  background-position: -60px -25px;
}

.Ldt-Ctrl-SetIn:active {
  background-position: -60px -50px;
}

.Ldt-Ctrl-SetOut {
    background-position: -90px 0;
}

.Ldt-Ctrl-SetOut:hover {
  background-position: -90px -25px;
}

.Ldt-Ctrl-SetOut:active {
  background-position: -90px -50px;
}

.Ldt-Ctrl-Time {
  float: left;
  margin: 7px 5px 0;
  font-size: 12px;
  font-family: Arial, Verdana, sans-serif;
}

.Ldt-Ctrl-Time-Elapsed {
  float: left;
  color: #4a4a4a;
}

.Ldt-Ctrl-Time-Separator {
  margin: 0 4px;      
  float: left;
}

.Ldt-Ctrl-Time-Total {
  float: left;
  color: #b2b2b2; 
}

.Ldt-Ctrl-Sound {
  margin: 0 2px;
}

.Ldt-Ctrl-Sound-Full {
  background-position: -120px 0;
}

.Ldt-Ctrl-Sound-Full:hover {
  background-position: -120px -25px;
}

.Ldt-Ctrl-Sound-Full:active {
  background-position: -120px -50px;
}

.Ldt-Ctrl-Sound-Mute {
  background-position: -150px 0;
}

.Ldt-Ctrl-Sound-Mute:hover {
  background-position: -150px -25px;
}

.Ldt-Ctrl-Sound-Mute:active {
  background-position: -150px -50px;
}

.Ldt-Ctrl-Sound-Half {
  background-position: -180px 0;
}

.Ldt-Ctrl-Sound-Half:hover {
  background-position: -180px -25px;
}

.Ldt-Ctrl-Sound-Half:active {
  background-position: -180px -50px;
}

.Ldt-Ctrl-Volume-Control {
    display: none;
  position: absolute;
  background:url('../img/player_gradient.png') repeat-x transparent ;
  height: 25px;
  width: 100px; top: 25px; right: -1px; z-index: 100;
  padding: 0 2px;
  border: 1px solid #b6b8b8;
}

.Ldt-Ctrl-Volume-Bar { 
    height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
}

.Ldt-Ctrl-Volume-Control .ui-slider-handle {
    width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px;
    cursor: pointer;
}

.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
     background: #F7268E;
}

/* Social Share Widget */

.Ldt-Social {
    float: right; margin-top: 10px;
}

.Ldt-Social a {
   float: left; width: 24px; height: 24px; background: url(../img/socialbuttons.png);
}

.Ldt-Social-Url-Container {
    float: left; width: 24px; height: 24px; position: relative;
}

a.Ldt-Social-Url {
    margin: 0; background-position: -96px 0;
}

a.Ldt-Social-Url:hover {
    background-position: -96px -24px;
}

.Ldt-Social-UrlPop {
    position: absolute; left: 20px; top: -2px; background: url(../img/socialcopy.png);
    padding: 3px 0 0 12px; width: 218px; height: 27px;
    display: none;
}

.Ldt-Social-Input, .Ldt-Social-CopyBtn {
    font-size: 11px; margin: 1px; border: 1px solid #ccc; height: 16px;
    padding: 1px; border-radius: 2px; display: inline-block;
}

.Ldt-Social-Input:hover, .Ldt-Social-CopyBtn.hover {
    border-color: #8080ff;
}

.Ldt-Social-Input {
    width: 150px;
}

.Ldt-Social-CopyBtn {
    font-weight: bold; width: 50px; text-align: center; background: #f0f0ff; line-height: 16px; width: 46px;
}

.Ldt-Social-CopyBtn.hover {
    background: #ffe0a0;
}

.Ldt-Social-CopyBtn.active {
    background: #ff8000;
}

a.Ldt-Social-Twitter {
    background-position: 0 0;
}

a.Ldt-Social-Twitter:hover {
    background-position: 0 -24px;
}

a.Ldt-Social-Fb {
    background-position: -24px 0;
}

a.Ldt-Social-Fb:hover {
    background-position: -24px -24px;
}

a.Ldt-Social-Gplus {
    background-position: -48px 0;
}

a.Ldt-Social-Gplus:hover {
    background-position: -48px -24px;
}

a.Ldt-Social-Mail {
    background-position: -72px 0;
}

a.Ldt-Social-Mail:hover {
    background-position: -72px -24px;
}


.media-segment-list-inner {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/bg-segments.png);
}

.media-segment-section {
    position: absolute; height: 8px; cursor: pointer;
    -moz-box-shadow: inset 1px 1px 1px #808080;
    -webkit-box-shadow: inset 1px 1px 1px #808080;
    box-shadow: inset 1px 1px 1px #808080;
}

.media-segment-popin h3, .media-found-popin h3{
    padding: 0;
    color: #de2500;
    margin-bottom: 4px;
    font-weight: 600;
}

.media-segment-popin p{
    font-size: 12px;
}

.media-segment-popin span{
    color: #7628df;
}