/* 
Nom du site		:
URL du site		:
Description		:
Date			:
Auteur			:
*/

@import url("@reset.css");
/*@import url("@grid.css");*/
/*@import url("@responsive.css");*/
@import url("@table.css");
@import url("@form.css");

/****************************************************
					COULEURS
****************************************************

blanc	 		#fff
brique			#b41
brique foncée	#721
brique claire	#c63
vert tendre		#9a1
gris moyen		#888
gris clair		#ddd

*/

/****************************************************
					FONT-FACE
****************************************************/
@font-face { 
 font-family:'BitterRegular';
 src:url('fonts/Bitter-Regular-webfont.eot');
 src:url('fonts/Bitter-Regular-webfont.eot?#iefix') format('embedded-opentype'),
   url('fonts/Bitter-Regular-webfont.woff') format('woff'),
   url('fonts/Bitter-Regular-webfont.ttf') format('truetype'),
   url('fonts/Bitter-Regular-webfont.svg#BitterRegular') format('svg');
 font-weight:normal;
 font-style:normal;
 font-display: swap;
 }

@font-face { 
 font-family:'BitterBold';
 src:url('fonts/Bitter-Bold-webfont.eot');
 src:url('fonts/Bitter-Bold-webfont.eot?#iefix') format('embedded-opentype'),
   url('fonts/Bitter-Bold-webfont.woff') format('woff'),
   url('fonts/Bitter-Bold-webfont.ttf') format('truetype'),
   url('fonts/Bitter-Bold-webfont.svg#BitterBold') format('svg');
 font-weight:normal;
 font-style:normal;
 font-display: swap;
 }

/****************************************************
					GENERAL
****************************************************/

*, *:before, *:after { 
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
 }

/*	STYLES
----------------------------------------------------*/
body { 
	font-style:normal; font-weight:normal;
	font-size:14px; line-height:1.5em;
	font-family:Arial, Helvetica, sans-serif;
	background:#b41; color:#721;
 }

/*	titres	*/
h1, h2, h3, h4, h5, h6 { line-height:normal; margin-bottom:1em; font-weight:normal; font-family:'BitterBold'; color:#b41; clear:both; }
h1 { font-size:1.6em; text-transform:uppercase; border-top:3px solid #ddd; padding-top:0.75em; }
	h1 span { color:#9a1; }
	h1 span.right { float:right; }
h2 { font-size:1.4em; text-transform:uppercase; border-top:3px solid #ddd; padding-top:0.5em; }
h3 { font-size:1.1em; clear:both; }
h4, h5, h6 { font-size:1em; }

/*	paragraphes	*/
p { margin-bottom:1.5em; }
strong { font-weight:bold; }
em { font-style:italic; }

/*	listes	*/
ol, ul { margin-bottom:1.5em; list-style-position:inside; _height:1%/* IE6 */; }
ol { list-style-type:decimal }
ul ul, ol ol { margin-bottom:0; margin-left:20px; }
dl { margin:0; margin-bottom:1.5em; padding:0; }
	dt { margin-bottom:0.5em; font-weight:normal; font-family:'BitterBold'; color:#b41;font-size:1.1em; }
	dd { margin:0 0 2em 0; }
		dd a { text-decoration:underline; }

/*	liens	*/
a { color:#b41; }
a:hover, a:active { color:#9a1; }
a:focus { outline:none; }
a[rel=external] { padding-right:14px; background:url(../images/external.png) right center no-repeat; }
a.button { text-decoration:none; display:block; text-align:center; padding:5px; color:#fff; background:#9a1;
-webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; text-shadow:0 2px 2px rgba(0,0,0,0.5);
-webkit-transition:background 0.3s ease;
-moz-transition:background 0.3s ease;
-o-transition:background 0.3s ease;
transition:background 0.3s ease;
 }
a.button:hover { background-color:#200; }
a.underlined { text-decoration:underline; }

/*	divers	*/
acronym { cursor:help; border-bottom:1px dotted; }
abbr[title] { color:#b41; border-bottom:none; }
code { display:block; margin-bottom:1.5em; padding:20px; font:0.75em/*12px/16px*/ "Courier New", Courier, monospace; border:1px dotted; }
blockquote { _display:inline/* IE6 */; margin-bottom:1.5em; padding-left:20px; font-style:italic; text-align:justify; }
	blockquote p { margin:0; }
hr { 
	margin:2em 0; _margin-top:0/* IE6 */; border:0; height:3px;
	background-color:#ddd; color:#ddd;
 }
strong.bigstrong { font-size:150%; }

img { max-width:100%; }

/****************************************************
					MISE EN PAGE
****************************************************/

.wrapper { margin:0 auto; width:84em; }

.top { position:relative; margin:0 auto; width:84em; height:3.5em; }
	.logo { position:absolute; top:0; left:0; width:28em; height:9.5em; background:url(../images/logo-bg.png); }
.motto { height:6em; background-color:#fff; overflow:auto; }
.content { clear:both; background:#fff; overflow:auto; }
	.side { background-color:#b41; overflow:auto; padding-bottom:2em; }
	.main { overflow:hidden; padding-bottom:7em; }
	.content .wrapper { background:url(../images/footer-bg.png) bottom right no-repeat; overflow:auto; }
footer { padding:60px 0; overflow:auto; }

/*	grille	*/
.g1-4 { float:left; margin:0 2em; width:17em; }
.g1-3 { float:right; margin:0 2em; width:24em; }
.g1-2 { float:right; margin:0 2em; width:38em; }
.g2-3 { float:right; margin:0 2em; width:52em; }

.col_2 { float:left; width:49%; margin-left:2%; }
.col_4 { float:left; width:23.5%; margin-left:2%; }
.col_1tiers { float:left; width:32%; margin-left:2%; }
.col_2tiers { float:left; width:66%; margin-left:2%; }
.first { clear:both; margin-left:0; }
.scroll { max-height: 300px; overflow-y: scroll; }


/*	TOP + MOTTO
----------------------------------------------------*/
#connect_form {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: -320px;
	right: 15px;
	width: 270px;
	height: auto;
	max-width: 100%;
	border: 1px solid #b41;
	z-index: 9;
	transition: all 0.5s;
}
#connect_form form {
	margin-bottom: 0;
	padding: 15px;
}
#connect_form p#close_connect_form {
	text-align: right;
	font-size: 2rem;
	margin: 0;
}

.top ul { margin:0 2em 0 0; padding:0; list-style:none; line-height:3.5em; }
.top ul li { float:right; padding-left:2em; color:#fff; text-transform:uppercase; font-size:0.75em; letter-spacing:0.1em; }
	.top ul li.compte { color:#fff; background:#721; padding:0 2em; margin-left:2em; }
.top ul a { color:#fff; }
.top a.basketlink { padding-left:18px; background:url(../images/ico_12x12_cart.png) 0 0 no-repeat; }
.top a.favlink { padding-left:18px; background:url(../images/ico_12x12_fav.png) 0 0 no-repeat; }
.top a.userlink { padding-left:18px; background:url(../images/ico_12x12_user.png) 0 0 no-repeat; font-weight:bold; text-decoration:underline; }
	.top ul li.logout { padding-top:1.2em; line-height:3em; }
	.top ul li.logout a { display:inline-block; width:20px; height:20px; background:url(../images/ico_logout.png); }
.motto h2 { margin:0; padding:1.2em 0 0; border:none; font-weight:normal; font-size:1.6em; text-transform:uppercase; }
	.motto h2 span { color:#9a1; }
.top span { display:inline; }


/*	CONTENT
----------------------------------------------------*/
/*	SIDE	*/
.side h3 { color:#fff; margin:0 0 0.2em; text-transform:uppercase; font-weight:normal; font-family:'BitterRegular'; }
.side ul { margin:0 2em 1.5em; list-style:none; font-family:'BitterRegular'; font-size:1.1em; color:#fff; text-transform:uppercase; }
.side ul li { }
.side ul li a { color:#fff; display:block; padding:0.2em 0; border-bottom:1px solid #c63;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
transition:all 0.2s ease;
 }
.side fieldset p { margin:0; font-size:0.75em; color:#fff; text-align:right; }
.side a { color:#fff; }
	.side ul a:hover { padding-left:0.2em; border-bottom-color:#fff; }

.pub_SF { text-align:center; padding:50px 0 25px; }

p.recherche-avancee { text-align:right; color:#fff; font-size:0.75em; padding:0 2.6666667em; margin:0; }

/*	MAIN	*/
.col_2 { float:left; width:49%; margin-left:2%; }
.col_4 { float:left; width:23.5%; margin-left:2%; }
.col_1tiers { float:left; width:32%; margin-left:2%; }
.col_2tiers { float:left; width:66%; margin-left:2%; }
.first { clear:both; margin-left:0; }

.annonce { background:#b41; margin-bottom:1em; }
.annonce img { float:left; margin-bottom:10px; }
.annonce p { padding:15px; margin:0; color:#fff; }
.annonce a { color:#fff; }

.main p a, .main ul a { text-decoration:underline; }

.pub { margin-bottom:2em; text-align:center; }
.pub_336-280 { display:block; }
.pub_300-250 { display:none; text-align:center; }

.adblock-header { width:728px; height:90px; margin-bottom:2em; display:block; border:none; }
.adblock-side { width:336px; height:280px; display:block; border:none; }

/*
.pub_728-90 { margin-bottom:2em; display:block; }
.pub_468-60 { margin-bottom:2em; display:none; }
*/

/* home */
img.illus { margin:0 auto 1em; display:block; }

#sound_lists {
	overflow: auto;
	padding: 0;
	margin: 0 0 30px;
}
#sound_lists ul {
	padding:0;
	margin: 0;
	background-color: white;
	list-style: none;
	font-style:normal; font-weight:normal;
	font-size:14px; line-height:1.5em;
	font-family:Arial, Helvetica, sans-serif;
	color: #b41;
}
#sound_lists h4 { margin: 15px 0 5px;}

/* pages cd */
.cd-item { margin:0 0 1em 0; border:1px solid #eaeaea; padding:2em; background:whitesmoke; }
.cd-item img { float:left; margin:0 20px 10px 0; border:5px solid #fff;
-webkit-box-shadow:0 0 20px #aaa;
-moz-box-shadow:0 0 20px #aaa;
box-shadow:0 0 20px #aaa;
/* IE , direction en degrés */ filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=1); zoom:1;
 }
.cd-item h3 { float:left; display:inline-block; }
.scrollbox { width:100%; height:250px; border:1px solid #ddd; font-size:0.9em; overflow:auto; }



a.player_open, a.player2_open { 
	display:block; min-height:20px; line-height:20px; padding-left:20px;
	background-color:transparent;
	background-image:url(../images/play.png);
	background-position: 0 3px;
	background-repeat: no-repeat;
	-webkit-transition:background 0.5s ease;
	-moz-transition:background 0.5s ease;
	-o-transition:background 0.5s ease;
	transition:background 0.5s ease;
 }
a.playing { 
	display:block; min-height:20px; line-height:20px; padding-left:20px;
	background-color:#ddd;
	background-image:url(../images/play.png);
	background-position: 0 3px;
	background-repeat: no-repeat;
	-webkit-transition:background 0.5s ease;
	-moz-transition:background 0.5s ease;
	-o-transition:background 0.5s ease;
	transition:background 0.5s ease;
 }
 
 a.ajout_favori { float:right; display:inline-block; width:14px; height:14px; background:url(../images/ico_favori.png) 0 0 no-repeat; margin-left:6px; }
 a.ajout_favori_OK { background-image:url(../images/ico_favori_ok.png); }

/*	faq	*/
dl.faq { margin:0; margin-bottom:2em; padding:0; border-bottom:1px solid #ddd; overflow:auto; }
	dl.faq dt { margin-bottom:0.5em; padding-top:0.7em; font-weight:normal; font-family:'BitterBold'; color:#b41;font-size:1.1em; border-top:1px solid #ddd; font-family:Arial, Helvetica, sans-serif; cursor:pointer; }
	dl.faq dd { margin:0 0 1.5em 0; }

/*	mon compte	*/
ul.actions { list-style:none; font-size:1.25em; }
ul.actions li { padding:0 0 0.4em; }
ul.actions li a { display:block; padding:0.4em; background:#eee; text-decoration:none; }
	ul.actions li a:hover { color:#fff; background:#9a1; }

ul.navactions { list-style:none; font-size:1em; margin:0 0 1em; padding:0; overflow:auto; }
ul.navactions li { padding-right:0.4em; margin:0 0 0.4em; float:left; border-bottom:3px solid #9a1; }
	ul.navactions li:last-child { padding-right:0; }
ul.navactions li a { display:inline-block; padding:0.4em; background:#eee; text-decoration:none; }
ul.navactions li a.selected { background:#9a1; color:white; }
	ul.navactions li a:hover { color:#fff; background:#b41; }

.encart { padding:7em 2em 0.5em; background:#9a1 url(../images/encart-fd.png) center 2em no-repeat; color:#fff; border-radius:3px; margin-bottom:2em; text-align:center; }

/* module video	*/
.video-wrapper { width:728px; max-width:100%; overflow:auto; padding-bottom:20px; }
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

/*	module quoi de neuf ? */
ul.quoideneuf { list-style:none; }
ul.quoideneuf li { overflow:auto; margin-bottom:1em; }
ul.quoideneuf li:nth-child(n+2) { padding-top:1em; border-top:1px solid #ddd; }
ul.quoideneuf img { float:left; margin: 0 2% 2% 0; }

/*	FOOTER
----------------------------------------------------*/
footer ul { color:#fa8; }
footer ul { list-style:none; padding-bottom:1em; }
footer h3 { border-bottom:1px solid #c63; padding-top:0; border-top:none; color:#fff; margin-bottom:0.5em; font-size:1.25em; }
footer h3 a, footer h4 { color: white; }
footer a { color:#fa8; transition:color 0.2s ease-out; }
	footer a:hover { color:#fff; }

/*	player	*/

#player { display:none; position:fixed; bottom:0; width:100%; height:120px; background:#200; line-height:3.5em; }
	#player .wrapper { padding:20px 2em; overflow:auto; }
		p.player_desc { display:inline-block; float:left; color:#fff; line-height:30px; margin:0; padding:0 1em; vertical-align:top; }
		#waveform { clear:both; width:100%; height:auto; margin:0; padding:0; position:relative; }
		#player .close { display:inline-block; width:30px; height:30px; float:right; }
		a.player_close { display:block; width:30px; height:30px; background:url(../images/player_close.png); }
		#playme { display:inline-block; float:left; border:none; padding:5px 10px; border-radius:2px; background-color:#9a1; color:#fff; cursor:pointer; }

#player2 {display:none; position:fixed; bottom:0; width:100%; height:70px; background:#200; line-height:3.5em;}
	#player2 .wrapper {padding:20px 2em; overflow:auto;}
		#player2 .player {float:left;}
		p.player_desc {display:inline-block; float:left; color:#fff; line-height:30px; margin:0; padding:0 1em; vertical-align:top;}
		#player2 .close { display:inline-block; width:30px; height:30px; float:right;}
		a.player2_close {display:block; width:30px; height:30px; background:url(../images/player_close.png);}

/*	progress bar	*/

progress { 
position: absolute; 
top: 50%; 
border:0;
z-index: 1; 
transform: translateY(-50%);
width: 100%;
height: 4px;
background-color:#fff;
color:#9a1;
}
progress::-moz-progress-bar {
background-color:#9a1;
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
background-color:#9a1;
}


/*	back to top	*/

#toTop { display:none; position:fixed; right:1em; bottom:0; margin-left:0px; width:50px; height:50px; overflow:hidden; text-indent:-999px; background:url(../images/totop.png) no-repeat left top; background-color:none; text-decoration:none; }
#toTopHover { display:block; float:left; width:50px; height:50px; background:url(../images/totop.png) no-repeat left -50px; overflow:hidden; opacity:0; -moz-opacity:0; filter:alpha(opacity=0); background-color:none; }
#toTop:active, #toTop:focus { outline:none; }


/*	CLASSES UTILES
----------------------------------------------------*/

.justify { text-align:justify; }
.center { text-align:center; }
.right { text-align:right; }
.message, p.alert { padding:20px 10px; color:#670; border:1px solid #9a1; border-width:3px 0; background:#dea; font-style:italic; }
.uppercase { text-transform:uppercase; }
.hidden { display:none; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.clear { clear:both; }
p.small { font-size:0.6875em/*11px/16px*/; }
.widthauto { width:auto; }
.rounded { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

/****************************************************
					RESPONSIVE DESIGN
****************************************************/

@media only screen and (min-width:924px) and (max-width:1175px) { 
	
	.wrapper { width:66em; overflow:hidden; }
	.top { width:66em; }
	.motto { overflow:hidden; }
	.content { overflow:hidden; }
	footer { overflow:hidden; }
	/*	grille	*/
	.g2-3 { width:34em; }
	.motto h2 { font-size:1.3em; }
	.adblock-header { width:468px; height:60px; }
	/*
	.pub_728-90 { display:none; }
	.pub_468-60 { display:block; }
	.pub_336-280 { display:block; }
	.pub_300-250 { display:none; }
	*/
	.col_2 { float:none; width:100%; margin-left:0; }
	#player .wrapper { padding:20px 0; }
	#player .close { float:left; }
	table.liste input.payment_btn { background-image:none; padding-left:0; }
 }/*/mediaquery*/

@media only screen and (min-width:784px) and (max-width:923px) { 
	
	.wrapper { width:56em; }
	.top { width:56em; }
	/*	grille	*/
	.g2-3 { width:24em; }
	.motto h2 { font-size:1.3em; }
	.adblock-header { display:none; }
	/*
	.pub_728-90 { display:none; }
	.pub_468-60 { display:none; }
	.pub_336-280 { display:block; }
	.pub_300-250 { display:none; }
	*/
	.col_2 { float:none; width:100%; margin-left:0; }
	#player .wrapper { padding:20px 0; }
	#player .close { float:left; }
	table.liste input.payment_btn { background-image:none; padding-left:0; }

 }/*/mediaquery*/

@media only screen and (min-width:320px) and (max-width:783px) { 
	
	body { font-size:12.5px; }
	.wrapper { width:28em; }
	.top { width:28em; height:13em; }
		.top ul { text-align:center; }
		.top ul li { float:right; display:inline-block; }
		.logo { background:none; top:3.5em; }
	.motto { display:none; }
	/*	grille	*/
	.g2-3 { width:24em; }
	/*	grille	*/
	.g1-3 { float:left; }
	.g2-3 { float:left; }

	.adblock-header { display:none; }
	.adblock-side { width:300px; height:250px; display:block; }
	/*
	.pub_728-90 { display:none; }
	.pub_468-60 { display:none; }
	.pub_336-280 { display:none; }
	.pub_300-250 { display:block; }
	*/
	.col_2 { float:none; width:100%; margin-left:0; }
	.col_4 { float:left; width:48%; margin:0 1%; }
	footer ul { text-align:center; }
	#player .wrapper { padding:20px 0; }
	#player .close { float:left; }
	p.player_desc { display:none; }

	table.tarifs { border-width:0 2px; font-size:0.8125em; }
	table.tarifs th { border-left:1px solid #fff; padding:8px; font-size:1.125em; }
	table.tarifs td.price { border-left:1px solid #fff; padding:4% 2%; font-size:2em; }
	table.liste td.nom { line-height:10px; }
	table.liste input.payment_btn { background-image:none; padding-left:0; }

 }/*/mediaquery*/

/*
* qTip2 - Pretty powerful tooltips - v2.1.1
* http://qtip2.com
*
* Copyright (c) 2013 Craig Michael Thompson
* Released under the MIT, GPL licenses
* http://jquery.org/license
*
* Date:Wed Oct 9 2013 10:40 UTC+0000
* Plugins:None
* Styles:None
*/

.qtip{ position:absolute; left:-28000px; top:-28000px; display:none; max-width:280px; min-width:50px; font-size:10.5px; line-height:12px; direction:ltr; box-shadow:none; padding:0; }
.qtip-content{ position:relative; padding:5px 9px; overflow:hidden; text-align:left; word-wrap:break-word; }
.qtip-titlebar{ position:relative; padding:5px 35px 5px 10px; overflow:hidden; border-width:0 0 1px; font-weight:bold; }
.qtip-titlebar + .qtip-content{ border-top-width:0 !important; }

/* Default close button class */
.qtip-close{ position:absolute; right:-9px; top:-9px; cursor:pointer; outline:medium none; border-width:1px; border-style:solid; border-color:transparent; }
.qtip-titlebar .qtip-close{ right:4px; top:50%; margin-top:-9px; }
* html .qtip-titlebar .qtip-close{ top:16px; } /* IE fix */
.qtip-titlebar .ui-icon,
.qtip-icon .ui-icon{ display:block; text-indent:-1000em; direction:ltr; }
.qtip-icon, .qtip-icon .ui-icon{ -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; text-decoration:none; }
.qtip-icon .ui-icon{ width:18px; height:14px; line-height:14px; text-align:center; text-indent:0; font:normal bold 10px/13px Tahoma,sans-serif; color:inherit; background:transparent none no-repeat -100em -100em; }

/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
.qtip-focus{ }

/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
.qtip-hover{ }

/* Default tooltip style */
.qtip-default{ border:none; padding:10px; background-color:#721; color:#fff; border-radius:2px; }
.qtip-default .qtip-titlebar{ background-color:#FFEF93; }
.qtip-default .qtip-icon{ border-color:#CCC; background:#F1F1F1; color:#777; }
.qtip-default .qtip-titlebar .qtip-close{ border-color:#AAA; color:#111; }


/*
* Stylesheet for Ambiance - Notification Plugin for jQuery
* Version 1.0.1
*
* Copyright (c) 2012 Richard Hsu
* Documentation:http://www.github.com/richardhsu/jquery.ambiance
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/

/* Notification area will be top right but feel free to modify it below. */
#ambiance-notification { display:block; position:fixed; top:50%; left:50%; z-index:9999; }

/* Built in custom styling for the notifications. */
.ambiance-title { font-weight:bold; }
.ambiance { float:left; clear:both; border:3px solid transparent; width:350px; }
.ambiance:hover { border:3px solid #fff; }
.ambiance-default, .ambiance-success, .ambiance-error { border-radius:3px; padding:25px 15px; margin-left:-200px; margin-top:-100px; font-size:1.25em; font-style:italic; opacity:0.9; }
.ambiance-default { background:#9a1; color:#fff; }
.ambiance-success { }
.ambiance-error { }

/* Close button attributes -- based off Twitter Bootstrap alert close item. */
.ambiance-close { display:block; position:relative; top:2px; right:0px; color:#FFFFFF; float:right; font-size:18px; font-weight:bold; filter:alpha(opacity=20); text-decoration:none; position:relative; line-height:14px; margin-left:5px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
.ambiance-close:hover { color:#bbb; cursor:pointer; }