/* fonts */
@font-face {
	font-family: 'OpenSans';
	font-weight: normal;
    font-style: normal;
	src: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: 'OpenSans';
    font-weight: normal;
	font-style: italic;
	src: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: 'OpenSans';
    font-weight: 300;
    font-style: normal;
    src: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: 'OpenSans';
	font-weight: 600;
	font-style: normal;
	src: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: 'OpenSans';
	font-weight: 600;
	font-style: italic;
	src: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: 'OpenSans';
    font-weight: bold;
    font-style: normal;
    src: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%;
	background: url(../img/bg.png) repeat-x 0 0;
}
a{
	color:#000;
	text-decoration: none;
}
textarea {
    resize: none;
}
/* common */
.wrap{
	min-height:100%;
	background-color: #FFF;
	width: 960px;
	margin: 0 auto;
	font-family: 'OpenSans';
	font-weight: 400;
	color:#333333;
	font-size: 13px;
  	height: 100%;
}
.wrap-header{
	padding-top: 5px;
	background-color: #370078;
	height: 53px;
	margin-bottom: 1px;
}
/* header */
.title-header{
	width: 460px;
	float: left;
	height: 60px;
}
.header{
	position: relative;
	background-color: #e2dbfd;
	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{
	width: 250px;
}
.header .profil-wrap a{
	width: 160px;
	display: block;
	text-align: right;
	position: absolute;
	right: 0;
	font-size: 14px;
	color: #30036d;
	padding-right: 18px;
}
.header .profil-wrap a:hover{
	color: #FF00FC;
}
.header .profil-wrap a.all-hashcut{
	top: 12px;
	background: url(../img/arrow-top.png) right 2px no-repeat;
}
.header .profil-wrap a.my-profil{
	top: 32px;
	background: url(../img/arrow-bot.png) right 4px no-repeat;
}
/* content */
.content{
	width: 960px;
	min-height: 750px;
	background: url(../img/bg-degrade.png) 0 0 repeat-x;
}
/* 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-family: 'OpenSans';
	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;
}