@charset "utf-8";
/* CSS Document */
/*****
GENERIC
*****/
*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
}
body{
	font: 13px tahoma,verdana,arial,sans-serif;
	word-spacing: 1px;
	color: #000;
	background:#fff;
	margin:0 auto;
	width:980px;
}
a, a:visited{ 
	text-decoration:underline;
	color:#000;
	outline: none;
}
a:hover{
	text-decoration: none;
}
ul{
	list-style: none;
}
img{
	border: 0;
}
hr{
	clear: both;
	display: block;
	visibility: hidden;
	height: 1px;
}
h2, h1#h1contenu, .h2{
	font-size:26px;
	padding-left:15px;
	padding-top:3px;
	height:37px;
	display:block;
}

/*****
CLASSES
*****/
.hidden{
	display:none;
}
.relative{
	position:relative;
}
.margin0{
	margin:0;
}
.normal, .normal:visited{
	text-decoration:none;
}
.center{
	text-align:center;
}
.alignright{
	text-align:right;
}
.gras{
	font-weight:bold;
}
.big{
	font-size:20px;
	font-weight:bold;
	margin-bottom:5px;
}
.bigline{
	line-height:18px;
}
.marginL{
	margin-left:15px;
}
.marginB{
	margin-bottom:15px;
}
.marginT{
	margin-top:15px;
}
.marginTx2{
	margin-top:30px;
}
.marginBx2{
	margin-bottom:30px;
}
.w640{
	width:640px;
}
.font10{
	font-size:10px;
}
.font12{
	font-size:12px;
}
.font14{
	font-size:14px;
}
.font16{
	font-size:16px;
}
.font18{
	font-size:18px;
}
.small{
	font-size:11px;
}
.margint5{
	margin-top:5px;
}
.floatleft{
	float:left;
}
.floatright{
	float:right;
}
.vert, .vert:visited{
	color:#c6d93b;
}
.bleu, .bleu:visited{
	color:#3ac7d9;
}
.blanc, .blanc:visited{
	color:#fff;
}
.noir{
	color:#000;
}
.bgvert{
	background-color:#c6d93b;
}
.bgbleu{
	background-color:#3ac7d9;
}
.bggris{
	background-color:#bbb;
}
.bgnoir{
	background-color:#000;
}
.padding{
	padding:3px;
}
.padding2{
	padding:2px;
}
input.bouton{
	cursor:pointer;
	padding:4px;
	border:none;
}
.h2artiste{
	padding:2px;
	height:auto;
}
.underline{
	text-decoration:underline;
}

/*****
LAYOUT
*****/
div#header{
	height:100px;
	margin-top:20px;
	position:relative;
}

/* logo */
div#header h1{
	display:inline;
	font-weight:normal;
}

div#header a#logo{
	font-size:17px;
	color:#c6d93b;
	text-decoration:none;
	display:block;
	background:url(../im/logo.png) 0 0 no-repeat;
	width:400px;
	padding-top:35px;
	height:45px;
}
/* menu */
div#header ul#nav{
	right:0;
	top:32px;
	height:31px;
	position:absolute;
}
div#header ul#nav li, ul#nav-member li{
	float:left;
	width:130px;
	height:31px;
	margin-right:20px;
	text-align:center;
	font-weight:bold;
}
div#header ul#nav li a, ul#nav-member li a{
	height:25px;
	width:130px;
	display:block;
	padding-top:6px;
}
div#header ul#nav li a:hover{
	background-color:#44eaff;
}
ul#nav-member li a:hover{
	background-color:#c6d93b;
	color:#fff;
}
div#container{
	min-height:500px;
}
/* contenu (avec colonne) */
div#left{
	width:660px;
	float:left;
	margin-right:20px;
}
div#right{
	width:300px;
	float:left;
	padding-top:30px;
}
div#right div.right-bloc{
	margin-top:30px;
}
/* footer */
div#footer{
	height:86px;
	margin-top:40px;
	padding:5px 15px 0 0px;
	position:relative;
}
div#footer a:hover{
	text-decoration:underline;
}
div#footer p#liens{
	font-size:15px;
}
div#footer p#copyright{
	margin-top:30px;
	font-size:11px;
}
div#footer p#copyright span{
	position:absolute;
	right:15px;
}
/* pagination */
.pageNav{
	text-align:right;
	height:30px;
	line-height:26px;
	padding-top:3px;
}

/* formulaires */
form.basic{
	margin-top:30px;
}
form.basic fieldset{
	border:none;
	margin-bottom:10px;
}
form.basic fieldset legend{
	width:330px;
	padding:3px 15px 3px 15px;
	margin:10px 0;
}
form.basic fieldset p{
	margin:10px 0;
}
form.basic fieldset p label{
	display:block;
	float:left;
	width:210px;
	margin-right:15px;
	font-size:14px;
}
form.basic fieldset p label.large{
	width:auto;
	float:none;
	margin:0;
}
form.basic fieldset p span{
	display:block;
	margin-left:225px;
/* 	visibility:hidden; */
}
form.basic fieldset p input, form.basic fieldset p select, form.basic fieldset p textarea{
	border:none;
	padding:3px;
	width:250px;
	border:1px solid #000;
	font-weight:bold;
}
form.basic fieldset p input:focus{
	border:1px solid #3ac7d9;
}
form.basic fieldset p input.petit{
	width:70px;
}
form.basic fieldset p select{
	background-color:#fff;
	border:1px solid #000;
}
form.basic fieldset p input.bouton{
	cursor:pointer;
	padding:4px;
	border:none;
	background-color:#000;
	width:auto;
}
form.basic fieldset p div#password-strength{
	width:256px;
	margin-left:225px;
}
form.basic fieldset p div#password-strength span{
	margin-left:0;
	color:#fff;
	font-weight:bold;
	padding:3px;
	margin-top:4px;
}
form.basic fieldset p input#spam{
	margin-right:5px;
	display:block;
	float:left;
}
form.basic fieldset p img#spamimg{
	margin-top:-4px;
}
form.basic fieldset p textarea{
	height:100px;
	width:400px;
	font-family:tahoma,verdana,arial,sans-serif;
	font-size:13px;
}


/*****
PAGE D'ACCUEIL
*****/

/* bouton d'inscription */
div#signinup{
	width:326px;
	height:200px;
	float:left;
}
a#inscription{
	display:block;
	width:297px;
	height:70px;
	background:url(../im/inscription.png) 0 0 no-repeat;
	text-indent:-5000px;
	margin-bottom:20px;
}
a#inscription:hover{
	background-position:0 -70px;
}
div#right a#inscription{
	margin-left:3px;
}
/* formulaire de connexion */
div#signinup form#connexion{
	height:110px;
}
div#signinup form#connexion h6{
	background:url(../im/jemeconnecte.png) 0 0 no-repeat;
	width:295px;
	height:22px;
	text-indent:-5000px;
}
div#signinup form#connexion p label{
	display:-moz-inline-box;
	display:inline-block;
	padding:5px 0 0;
	width:108px;
}
div#signinup form#connexion p input{
	border:#000 1px solid;
}
div#signinup form#connexion p input:focus{
	border:#3ac7d9 1px solid;
}
div#signinup form#connexion p input.bouton:hover{
	background:#3ac7d9;
	border:#3ac7d9 2px solid;
}
/* sliders presentation */
div#presentation{
	float:left;
	height:200px;
	width:654px;
}
div#presentation div#slider1, div#presentation div#slider2{ 
	width:302px;
	height:200px;
	overflow:hidden; 
	float:left;
	position:relative;
	font-size:15px;
}
div#presentation div#slider1 li, div#presentation div#slider2 li{ 
	height:200px;
	overflow:hidden;
	width:302px;	
}
div#presentation div#slider2 li{
	position:absolute;
}

div#presentation div#slider1 li p, div#presentation div#slider2 li p{
	padding:0 5px 0 5px;
}
div#presentation a#prevbtn{
	display:block;
	float:left;
	width:24px;
	height:200px;
	background:url(../im/flechegauche.png) 0 0 no-repeat;
	text-indent:-5000px;
}
div#presentation a#nextbtn{
	display:block;
	float:left;
	width:24px;
	height:200px;
	background:url(../im/flechedroite.png) 0 0 no-repeat;
	text-indent:-5000px;
}
div#presentation a#nextbtn.active:hover, div#presentation a#prevbtn.active:hover{
	background-position:-24px 0;
}
/* contenu du slider2 */
div#presentation div#slider2 a.photoslider{
	display:block;
	float:left;
	width:77px;
	height:77px;
	margin:61px 27px 0 0;
}
div#presentation div#slider2 a#photoslider2{
	margin-right:0;
}
div#presentation div#slider2 a#logo-beta{
	display:block;
	float:left;
	width:280px;
	height:50px;
	background:url(../im/logo-beta.png) 0 0 no-repeat;
	margin:75px auto 0 auto;
	text-indent:-5000px;
}
a#twitter{
	display:block;
	float:left;
	width:77px;
	height:77px;
	background:url(../im/twitter-77.png) 0 0 no-repeat;
	margin:61px 27px 0 0;
	text-indent:-5000px;
}
a#facebook{
	display:block;
	float:left;
	width:77px;
	height:77px;
	background:url(../im/facebook-77.png) 0 0 no-repeat;
	margin:61px 27px 0 0;
	text-indent:-5000px;
}
div#presentation div#slider2 a#rss{
	display:block;
	float:left;
	width:77px;
	height:77px;
	background:url(../im/rss-77.png) 0 0 no-repeat;
	text-indent:-5000px;
	margin-top:61px;
}
/* dernieres photos */
div#lastphotos{
	margin-top:40px;
}
div#lastphotos li{
	width:150px;
	height:150px;
	overflow:hidden;
	float:left;
	margin:25px 16px 0 0;
	position:relative;
}
div#lastphotos li span{
	position:absolute;
	display:block;
	width:150px;
	height:20px;
	text-align:center;
	bottom:-20px;
	font-size:12px;
	line-height:18px;
}
div#lastphotos a.voirplus{
	float:right;
	display:block;
	width:140px;
	padding:4px 0px 4px 10px;
	font-size:14px;
}
/* photo de la semaine */
div#topweek{
	width:630px;
	float:left;
	margin:40px 40px 0 0;
	position:relative;
}
div#topweek h2{
	margin-bottom:25px;
}
div#topweek div{
	float:left;
	width:225px;
	height:270px;
	margin-left:25px;
	position:relative;
}
div#topweek p#tophoto{
	overflow:hidden;
	width:380px;
	height:270px;
	float:left;
}
div#topweek span.titre{
	position:absolute;
	width:380px;
	padding:4px 0;
	bottom:-30px;
	height:22px;
	left:0px;
}
div#topweek div p.membre{
	font-size:14px;
	height:95px;
}
div#topweek div p.album{
	padding:3px;
	font-size:14px;
}
div#topweek div a.avatar{
	position:absolute;
	right:0;
	top:0;
}
div#topweek dl{
	position:absolute;
	bottom:0;
}
div#topweek dt{
	display:block;
	float:left;
	width:120px;
	font-weight:bold;
}
div#topweek dd{
	float:left;
}
/* membres et artistes */
div#mbart{
	float:left;
	margin-top:40px;
	width:310px;
	height:342px;
	overflow:hidden;
}
div#mbart h2{
	width:145px;
	float:left;
	padding-left:0px;
	margin-bottom:25px;
	cursor:default;
}
div#mbart h2#art{
	float:right;
	cursor:pointer;
}
div#mbart div{
	width:310px;
	height:270px;
	position:relative;
	clear:both;
}
div#mbart ul#mbloc{
	height:270px;
	width:310px;
}
div#mbart ul#mbloc li{
	position:relative;
	height:83px;
	margin-bottom:10px;
	clear:both;
}
div#mbart ul#mbloc li img.gravatar{
	margin-right:5px;
}
div#mbart ul#mbloc li a.rss-icon{
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25px;
	height:25px;
	background:url(../im/rss-icon.png) 0 0 no-repeat;
	text-indent:-5000px;
}
div#mbart div#artbloc{
	position:absolute;
	top:0;
	margin-left:320px;
	height:270px;
	width:310px;
}


/*****
PAGES LISTING
*****/

ul#liste-detail li{
	height:150px;
	overflow:hidden;
	margin-bottom:20px;
	position:relative;
	/*background:url(../im/ombre-660.png) 0 155px no-repeat;*/
}
ul#liste-detail li.grand{
	float:none;
	width:660px;
	height:68px;
}
ul#liste-detail li img{
	float:left;
}
ul#liste-detail li div{
	margin-left:160px;
}
ul#liste-detail li h2{
	line-height:18px;
	height:auto;
	padding:4px 4px 4px 0;
}
ul#liste-detail li h4, h3.tagartiste{
	overflow:hidden;
}
h2.tagartiste{
	padding-left:0;
}
ul#liste-detail li h4 a, h2.tagartiste a{
	display:block;
	margin:4px 4px 0 0;
	float:left;
	padding:2px;
}
h3.tagartiste a, p.unephoto a{
	padding:2px 4px;
}
ul#liste-detail li h4 a:hover, h2.tagartiste a:hover{
	background:#44EAFF;
	color:#fff;
}
ul#liste-detail li p.location{
	overflow:hidden;
}
ul#liste-detail li p.location a{
	display:block;
	margin:4px 4px 0 0;
	float:left;
	padding:2px;
}
ul#liste-detail li p.location a:hover, p.unephoto a:hover{
	background:#e6e6e6;
	color:#fff;
}
ul#liste-detail li p.info{
	position:absolute;
	bottom:10px;
}
/* listing version lite (titre+membre) */
ul#liste-lite li{
	float:left;
	width:150px;
	height:210px;
	overflow:hidden;
}
ul#liste-lite li.marginr{
	margin-right:20px;
}
ul#liste-lite li div.img{
	width:150px;
	height:150px;
	overflow:hidden;
	position:relative;
}
ul#liste-lite li div.img h2{
	height:20px;
	width:150px;
	overflow:hidden;
	position:absolute;
	bottom:-23px;
	padding-left:0;
	text-align:center;
}
a.icone-detail{
	display:block;
	float:right;
	background:url(../im/icon-liste-info.png) 0 0 no-repeat;
	text-indent:-5000px;
	height:25px;
	width:25px;
	margin:5px 0 5px 10px;
}
a.icone-rss{
	display:block;
	float:right;
	background:url(../im/rss-icon.png) 0 0 no-repeat;
	text-indent:-5000px;
	height:25px;
	width:25px;
	margin:5px 0 5px 20px;
}
a.icone-detail:hover{
	background-position:0 -25px;
}
a.icone-photo{
	display:block;
	float:right;
	background:url(../im/icon-liste-photo.png) 0 0 no-repeat;
	text-indent:-5000px;
	height:25px;
	width:25px;
	margin:5px 0 5px 10px;
}
a.icone-photo:hover{
	background-position:0 -25px;
}
/* affichage de la colonne de droite */
div#right div.right-bloc div{
	margin-top:5px;
}
h3.tag{
	display:inline;
	margin:0 0;
	line-height:26px;
}
h3.tag a{
	padding:3px;
	padding-right:3px;
}
h3.tag a:hover{
	background-color:#3ac7d9;
}


/* details d'une photo */
div#left div#laphoto{
	width:640px;
	margin:20px 0;
}
div#left img.avatarcomm{
	display:block;
	float:left;
	margin:0 10px 20px 0;
}
div#left dl.commentaire{
	margin-left:106px;
	margin-bottom:20px;
}
div#left div#partage a{
	margin-top:0;
}
/* carousel */
div#right div#autres-photos{
	height:180px;
}
.carousel {
	width: 300px;
	position: relative;
}

.carousel .wrapper {
	width: 300px; /* .carousel width - (.wrapper margin-left + .wrapper margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
}

.carousel .wrapper ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}

.carousel ul li {
	display:block;
	float:left;
	padding:10px 26px 10px 0;
	height: 85px;
	width: 85px;
}

.carousel ul li a img {
  	display:block;
}

.carousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	background: url(../im/arrow.png) no-repeat 0 0;
	text-indent: -5000px;
	position: absolute;
	top: 100px;
	cursor: pointer;
}

.carousel .forward {
	background-position: 0 0;
	right: 0;
}

.carousel .back {
	background-position: 0 -72px;
	left: 0;
}

.carousel .forward:hover {
  	background-position: 0 -36px;
}

.carousel .back:hover {
  	background-position: 0 -108px;
}




/* ajout d'une photo */
div#left div.progressContainer{
	background-color:#f1f1f1; 
	padding:5px; 
	margin-bottom:10px;
}


/* edit photo de concert */
div#left ul#editphoto li{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px dotted #ccc;
}
div#left ul#editphoto li img{
	margin-top:12px;
	margin-right:10px;
}
div#left ul#editphoto li form.basic fieldset p label{
	width:100px;
}
div#left ul#editphoto li p.pdescription{
	min-height:100px;
}


/* page photos du membre */
ul#albums li {
	color:#3ac7d9;
	list-style:square inside;
	margin:5px 0;
}
ul#albums li a:hover{
	text-decoration:underline;
}

div#left p a.normal:hover{
	text-decoration:underline;
}

/* artistes */
ul#suggest{
	position:absolute;
	width:258px;
	margin-left:201px;
	margin-top:-10px;
}
ul#suggest li{
	height:20px;
}
ul#suggest li a{
	display:block;
	padding:2px 4px;
}
ul#suggest li a:hover{
	background-color:#ddf342;
}

/* 404 */
div#error404{
	
}
div#error404 a{
	display:block;
	margin:0 auto;
	width:640px;
	height:480px;
	position:relative;
}
div#error404 a img{
	position:absolute;
}