/* REFONTE DE SITE
--------------------------------------------
** Design: Mathieu Vo-Quang
** Intégration et CSS: Mehdi Bouhalassa
--------------------------------------------------------*/

@font-face { 
	font-family: 'clarendo'; 
	src: url('../fonts/clarendo.eot'); 
	src: local('Clarendo'), url('../fonts/clarendo.ttf') format('truetype'); 
}

#player {z-index:1;}

#container {width:900px;margin:auto;}

body {
	background-color: #000;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	position: relative;
	background-position:top center; 
	background-repeat:no-repeat;
	background-attachment: fixed;

} 
 
img {border:0px;}

* {
	outline: none;
}
.cappitalize {
	text-transform: capitalize;
}
.clear { 
	clear: both !important;
}
#page { 
	width: 723px;
	/*min-height: 1000px;*/
	/*margin:auto;*/
	
}
.hidden {
	display:none;
}
.fLeft {
	float: left !important;
}
.fRight {
	float: right !important;
}

#banner {height:60px;width:723px;margin-top:15px;margin-bottom:15px;}
#logo {height:103px;width:723px;}

.padding15 {padding:15px;}

.clearFloat {clear:both;}

.bannerWrap {width:auto !important;}


/* MAIN MENU
-------------------------*/
#menu {height:45px;background-image:url(../images/mainnav-bg.png);border-top:1px #fff dotted;border-bottom:1px #fff dotted;}

#menu ul {
	font-family:clarendo, arial, sans-serif;
	list-style-type: none;
	margin: 0;
	padding: 15px;
	display: block;
	clear: both;
	height: 50px;
	text-transform:uppercase;
	color:#fff;
}
	#menu li {
		float: left;
		letter-spacing:-0.5px;
		border-right:1px #fff solid;
		margin-right: 5px;
		padding-right:5px;
	} 
	
	#menu li a {color:#fff;text-decoration:none;}
	#menu li a:hover, #menu li .here {color:#ff9900;text-decoration:none;}
	
	
/* MAIN CONTENT
-------------------------*/

.video-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	clear: both;
}
	.video-list li {
		display: block;
		float:left;
		height: 60px;
		padding: 10px;
		width: 300px;
		background-color:#fafafa;
		margin-right:10px;
		margin-bottom:10px;
	}
		.video-list li img {
			float: left;
			margin: 0 10px 20px 0;
		}
		.video-list li a img {
			border: 0;
		}
#player {
	margin: 5px 0;
}
.fb_share_link { 
	padding:2px 0 0 20px;
	height:16px;
	background:url(http://static.ak.fbcdn.net/rsrc.php/zTPL2/m1/hash/4273uaqa.gif) no-repeat top left;
}

.gallery {
	list-style-type: none;
	clear: both;
}

.gallery li {
	float: left;
	margin: 0 2px;
}
.gallery li img {
	border: 0;
	width: 40px;
}


/* SYLVAIN */
.title {
	margin:0px;
	padding:15px;
	border-bottom:1px #fff dotted;
	background-image:url(../images/title-bg.png);
	color:#fff;
	font-size:23px;
	font-family:clarendo;
	text-transform:uppercase;
}

#page h3 {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#fff;padding:0; margin:1em 0 0.5em 0;}

#page p {font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:1.4em;color:#fff;font-weight:normal;margin-bottom:1em;}

#page a {color:#fd9903;}

/* FONDS DES BOITES DE CONTENU */
#biographie, #nouvelles, #musique, #spectacles, #extras, #extras-photos, #medias, #contact, #opendisc {background-image:url(../images/page-bg.png);padding-bottom:40px;}

/* NOUVELLES*/
#nouvelles-box {
	width:563px;
	padding:15px;
	background-image:url(../images/title-bg.png);
	border-top:1px #fff dotted;
	border-bottom:1px #fff dotted;
	margin-left:-14px !important;
	margin-bottom:30px;
}
#nouvelles-box > h3 {margin-top:0;}

.img-right {float:right;margin:0 0 15px 15px;}

/* BIO */
#bio-box {
	width:595px;
	padding:15px;
	background-image:url(../images/title-bg.png);
	border-top:1px #fff dotted;
	border-bottom:1px #fff dotted;
	margin-left:-14px;
	margin-bottom:30px;
}

/* MUSIQUE */
#mycarousel-box {
	background-image:url(../images/title-bg.png);
	border-bottom:1px #fff dotted;
	padding:0px;
	margin-left:-14px !important;
	width:722px;
}

#musique h2 {font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;color:#fff;}

.audioPlayer {float:right;clear:right;height:17px;}
#mus-listing {float:left;border-bottom:1px #fff dotted;padding-bottom:30px;margin-bottom:30px;margin-left:23px;}

#mus-listing ul {
	margin:0px;
	padding:0px;
	list-style:none;
}
#mus-listing li {float:left;display:block;clear:left;width:400px;margin-bottom:5px;}
#mus-listing li {font-size:12px;line-height:1.4em;color:#fff;font-weight:bold;text-decoration:none;}
#mus-listing li a {font-weight: normal;text-decoration:none;}
#mus-listing li a:hover {text-decoration:underline;}
.facebook-share {float:right;font-size:11px;margin-top:23px;}
.fb-comments {margin-left:220px;}


/* SPECTACLES */
.horline {border-bottom:1px #fff dotted;height:1px;margin-top:10px;margin-bottom:10px;}
#spectacles .date {font-size:14px;font-weight:bold;color:#fff;}
#spectacles .infos {font-size:11px;color:#fff;}
.unSpectacle {border-bottom:1px #fff dotted;padding:10px;background-image:url(../images/title-bg.png);width:445px;}
#spectacle p {padding:15px;}

/* EXTRAS */
.title ul {
	margin:0px;
	padding:0px;
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	list-style:none;
	padding-top:5px;
}
.title li {float:left;display:inline-block;font-size:16px;}
.title li a {font-size:14px;color:#ff9900;text-decoration:none;}
.title li a:hover {text-decoration:underline;}
#extras h1, #extras-photos h1 {font-size:16px;color:#fff;padding-bottom:20px;}
#extras h2, #extras-photos h2 {font-size:14px;color:#fff;padding:0px;margin:0px;}
#extras h3, #extras-photos h3 {font-size:11px;color:#fff;padding:0px;margin:0px;}

/* EXTRAS PHOTOS */
#album {float:right;width:300px;}

#galbox{width:380px;float:left;}

#extras-photos #album ul {
	margin:0px;
	padding:0px;
	list-style:none;
}
#extras-photos #album li {margin-bottom:20px;}
#extras-photos #album li a {color:#ff9900;font-size:14px;font-weight:bold;text-decoration:none;}
#extras-photos #album li a:hover {text-decoration:underline;}

/* MEDIAS */
#medias input[type="text"] {
	width: 265px;
	font-size: 10px;
	padding: 2px;
	margin: 5px 10px 4px 0px;
	background-color: #FFF;
	color: #888;
	border: solid 1px #333;
}
#medias #formlogin, #medias #login {width:450px;color:#fff;}
#medias #login a {color:#fff;}
#medias #login h1 {font-size:16px;color:#fff;margin:0px;padding:0px;margin-bottom:15px;}
#medias #formlogin a, #medias-sub a {color:#fd9903;text-decoration:none;font-size:12px;font-weight:bold;}
#medias #formlogin a:hover, #medias-sub a:hover {text-decoration:underline;}
#medias-sub {width:170px;color:#fff;}
#formlogin p {margin-top:0px;padding-top:0px;}
.bform {background-color:#fd9903;color:#fff;border:0px;}

/* CONTACT */
#contact h3 {font-size:14px;color:#fff;padding:0px;margin:0px;margin-bottom:5px;text-transform:uppercase;}
#contact a {color:#ff9900;font-size:11px;text-decoration:none;}
#contact a:hover {text-decoration:underline;}
#contact p {margin:0px;padding:0px;margin-bottom:20px;}

/* OPENDISC */

/* FOOTER
-------------------------*/
#footer {
	width: 100%;
	position: fixed;
	left:0;
	bottom: 0px;
	margin: 0px;
	padding: 0px;
	height: 26px;
	background-color:#000;
	background-repeat: repeat-x;
	font-size: 10px;
	z-index: 10000;
	color: #999;
	clear:both;
} 

#footer input[type="text"] {
	float: left;
	height: 14px;
	width: 180px;
	font-size: 10px;
	padding: 0px 4px;
	margin: 5px 10px 4px 0px;
	opacity: 0.8;
	background-color: #000;
	color: #888;
	border: solid 1px #333;
}

#anim-envois {
	float: left;
	margin: 4px 15px 0 0px;
	padding: 0px 0px 0 10px;
	font-size: 14px;
}

.go { 
	float: left;
	font-size: 11px;
	padding: 1px 5px; 
	margin: 4px 0px;
	opacity: 0.75;

}


/* COLORBOX JQUERY PLUGIN
-------------------------*/
#lyrics {
	background-color: #e5e5e5;
	padding: 40px;
}

#lyrics pre {
	font-family: HelveticaNeue-Light, HelveticaNeue, Helvetica, Arial, sans-serif;
	overflow: visible;
	font-size: 11px;
	border: 1px solid pink;
}
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/

#cboxOverlay{background:#fff;}

#colorbox{}
#cboxContent{margin-top:32px;}
#cboxLoadingGraphic{background:url(../medias/img/colorbox/loading.gif) center center no-repeat;}
#cboxLoadingOverlay{background:#000;}
#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; right: 20px; background:url(../medias/img/colorbox/controls.png) 0 0 no-repeat;}
#cboxPrevious{background-position:0px 0px; right:44px;}
#cboxPrevious.hover{background-position:0px -25px;}
#cboxNext{background-position:-25px 0px; right:22px;}
#cboxNext.hover{background-position:-25px -25px;}
#cboxClose{background-position:-50px 0px; right:0;}
#cboxClose.hover{background-position:-50px -25px;}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}