html {overflow-y: scroll;}

body {
	width: 807px;
	background-color: #6AB268;
	font-family: "Trebuchet MS";
	margin: 5px auto 0 auto;
	color: white;
}

a img {
	border: none;
}

.clear {
	clear: both;
}


.cacher {
	display: none;
	overflow: hidden;
	height: 1px;
	margin-top: -1px;
	position: absolute;
}

/** HEADER
***********************************************************************/
#header {

}
	#header #slogan {
		background: url('img/design/slogan.gif') no-repeat;
		width: 582px;
		height: 40px;
		margin: 0 0 0 20px;
	}
	
	#header #chansons_titre, 
	#header #moi_bea_titre, 
	#header #histoires_titre, 
	#header #menu_titre,
	#header #ou_trouver_bea_titre,
	#header #liens_titre,
	#header #voyage_bea_titre,
	#header #boutique_titre
	{
		float: left;
		width: 356px;
		height: 202px;
	}
	#header #menu_titre                     { background: url('img/design/menu_titre.gif') no-repeat; }
	#header #chansons_titre             { background: url('img/design/chansons_titre.gif') no-repeat; }
	#header #moi_bea_titre               { background: url('img/design/moi_bea_titre.gif') no-repeat; }
	#header #histoires_titre           { background: url('img/design/histoires_titre.gif') no-repeat; }
	#header #ou_trouver_bea_titre { background: url('img/design/ou_trouver_bea_titre.gif') no-repeat; }
	#header #liens_titre                   { background: url('img/design/liens_titre.gif') no-repeat; }
	#header #voyage_bea_titre         { background: url('img/design/voyage_bea_titre.gif') no-repeat; }
	#header #boutique_titre             { background: url('img/design/boutique_titre.gif') no-repeat; }
	
	#header #chansons   a  { display: block; float: left; width: 146px; height: 202px; }
	#header #moi_bea     a  { display: block; float: left; width: 146px; height: 202px; }
	#header #histoires a  { display: block; float: left; width: 159px; height: 202px; }
	
	#header #menu_menu      #chansons    a  { background: url('img/design/menu_chansons.gif') no-repeat; }
	#header #menu_menu      #moi_bea      a  { background: url('img/design/menu_moi_bea.gif') no-repeat; }
	#header #menu_menu      #histoires  a  { background: url('img/design/menu_histoires.gif') no-repeat; }
	
	#header #chansons_menu  #chansons    a  { background: url('img/design/chansons_chansons.gif') no-repeat; }
	#header #chansons_menu  #moi_bea      a  { background: url('img/design/chansons_moi_bea.gif') no-repeat; }
	#header #chansons_menu  #histoires  a  { background: url('img/design/chansons_histoires.gif') no-repeat;}
	
	#header #moi_bea_menu   #chansons    a  { background: url('img/design/moi_bea_chansons.gif') no-repeat; }
	#header #moi_bea_menu   #moi_bea      a  { background: url('img/design/moi_bea_moi_bea.gif') no-repeat; }
	#header #moi_bea_menu   #histoires  a  { background: url('img/design/moi_bea_histoires.gif') no-repeat; }
	
	#header #histoires_menu #chansons    a  { background: url('img/design/histoires_chansons.gif') no-repeat; }
	#header #histoires_menu #moi_bea      a  { background: url('img/design/histoires_moi_bea.gif') no-repeat; }
	#header #histoires_menu #histoires  a  { background: url('img/design/histoires_histoires.gif') no-repeat; }

	#header #identif {
		font-size: 0.8em;
		height: 24px;
		padding: 0 0 0 5px;
		color: #004854;
		font-weight: bold;
	}
	#header #identif a {
		color: #004854;
		font-weight: bold;
		text-decoration: none;
	}
	#header #identif a:hover {
		text-decoration: underline;
	}

/** BODY
***********************************************************************/
#body {
	clear: both;
	background-color: #E9393D;
	margin: 0px 0px 0px 21px;
	padding: 10px 0px;
}
	
	#body #fond {
		background: url('img/design/backbody.jpg') repeat-y;
		margin: 10px 0 10px 0;
	}
	
	#body #gauche, #centre, #droite {
		float: left;
		width: 32%;
		text-align: center;
		padding: 0 0.5%;
	}
	
	#body h2, h3 {
		margin-top: 0;
	}
	
	#body .album, #body .trouver_bea {
		clear: both;
		margin: 10px 20px;
		font-size: 0.9em;
	}
	
	/** CHANSONS
	***********************************************************************/
	#body .album .chanson {
		clear: both;
		margin: 2px;
	}
	
	#body .album .listechanson {
		text-align: left;
		border: 1px solid #e9393d;
	}
	
		#body .album .listechanson a.urltitre {
			float: left;
		}
		#body .album .listechanson a.urlnote {
			float: right;
		}

	
	/** OU TROUVER BEA
	***********************************************************************/
	#body h2.titre_categ_trouver_bea {
		font-size: 1em;
	}

	#body .trouver_bea {
		text-align: left;
		padding: 0 0 10px 0;
		border-bottom: 1px dashed white;
	}
		#body .trouver_bea h3 {
			text-align: left;
			margin: 0;
		}
	
	/** LIENS
	***********************************************************************/
	#body h2.titre_categ_lien {
		font-size: 1em;
	}

	#body .lien {
		text-align: left;
		padding: 5px 0 5px 0;
		margin: 0 20px 10px 20px;
		font-size: 0.9em;
		border-bottom: 1px dashed white;
	}
		#body .lien h3 {
			text-align: left;
			margin: 0;
		}
	
	
	
	#body a {
		text-decoration: underline;
		color: white;
	}
	#body a:hover {
		text-decoration: none;
	}
	
	
	div.bodynormal {
		font-size: 0.8em;
		padding: 0 30px 30px 30px;
	}
		div.bodynormal h1{
			margin-top: 0;
		}
	
	
	#presentation_bea {
		float: left;
		font-size: 0.8em;
		padding: 0 0 0 30px;
		text-align: justify;
		width: 45%;
	}
	
	#presentation_bea #photo_bea {
		background: url('img/design/bea_photo.gif') no-repeat;
		float: left;
		margin: 3px 0 0 0;
		padding: 0 20px 0 0;
		height: 122px;
		width: 116px;
	}
	#presentation_bea_droite {
		float: right;
		font-size: 0.8em;
		padding: 0 0 0 30px;
		width: 45%;
	}
	#voyage_bea {
		float: left;
		font-size: 0.8em;
		padding: 0 0 0 30px;
		text-align: justify;
		width: 35%;
	}
	#voyage_bea_droite {
		float: left;
		font-size: 0.8em;
		padding: 0 0 0 30px;
		width: 55%;
	}
	
	/** TARIFS & PANIER & BOUTIQUE
	***********************************************************************/
	#boutique .article {
		clear: both;
		border-top: 1px dotted white;
		margin: 20px 0 0 0;
		width: 99%;
	}
		#boutique .article h3 {
			margin: 0;
			font-size: 1.2em;
		}
		#boutique .article p {
			margin: 0 0 0 20px;
		}
		#boutique .article .info {
			float: right;
		}
		#boutique #total_panier {
			text-align: right;
			margin: 25px 0 0 0;
		}
		#boutique p {
			clear: both;
		}
	
	
	/** CHANSON
	***********************************************************************/
	#body #menu {
		float: left;
		width: 220px;
	}
		#body #menu .categ {
			margin: 0 15px 20px 15px;
		}
		#body #menu h3 {
			border-bottom: 2px solid white;
			text-align: right;
			margin: 0;
			padding: 0;
		}
			#body #menu h3.histoire {
				text-align: left;
				color: #003e47;
			}
		#body #menu h4 {
			margin: 0;
			padding: 0;
			cursor: pointer;
		}
		#body #menu ul {
			border-top: 1px dotted white;
			list-style-type: none;
			margin: 0 0 10px 0;
			padding: 0;
			font-size: 0.75em;
		}
		#body #menu li {
			clear: both;
			border-bottom: 1px dotted white;
			text-align: right;
			height: 18px;
		}
			#body #menu li a {
				text-decoration: none;
			}
				#body #menu li a.urltitre {
					float: left;
				}
				#body #menu li a.urlnote {
					float: right;
				}
	
	#body #contenu {
		margin: 0 0 0 30%;
		width: 68%;
	}
	html>body #body #contenu {
		margin: 0 0 0 230px;
		width: auto;
	}
		#body #titre_chanson a {
			text-decoration: none;
		}
		#body #contenu h1 {
			font-size: 1.5em;
			font-variant: small-caps;
			display: inline;
			padding: 0 10px 0 0;
			margin: 0;
		}
		#body #contenu #option {
			float: right;
			margin: 10px 0 0 0;
			padding: 0 10px 0 0;
			font-weight: bold;
			text-align: right;
			/*width: 300px;*/
		}
			#body #contenu #option a {
				font-size: 0.8em;
				font-weight: none;
			}
			#body #contenu #option #player {
				text-align: right;
				font-size: 0.8em;
			}
			#body #contenu #option #image {
			}
	
		#body #contenu #paroles {
			font-size: 0.9em;
			margin: 10px 30px 0 0;
			font-family: verdana;
		}
			
	/** CGV
	***********************************************************************/
	#body #cgv {
		text-align: justify;
	}
		#body #cgv h1{
			text-align: center;
		}
		#body #cgv h2 {
			margin: 0;
			font-variant: small-caps;
		}
		#body #cgv p {
			margin: 5px 0 20px 0;
		}
	
	/** MENUBAR - MON COMPTE
	***********************************************/
	#body #menubar {
		clear: both;
		margin: 0 0 10px 0;
		color: white;
	}
	#body #menubar a {
		float: left;
		display: block;
		text-decoration: none;
		padding: 1px 14px 1px 14px;
	}
		#body #menubar a:hover {
			background-color: #f29b36;
		}
	#body #menubar ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		background: url("img/design/menubar_back.gif") repeat-x bottom;
		height: 22px;	
	}
	#body #menubar li {
		float: left;
		padding: 0;
		margin: 0 3px 0 0;
		border: 1px solid white;
		border-bottom: none;
		height: 20px;
	}
		#body #menubar li.selected {
			font-weight: bold;
			border-bottom: 1px solid #E9393D;
		}
		#body #menubar li.selected a {
			color: white;
			background-color: transparent;
		}
		
	/**  ITEM ECOUTE
	*******************************************************/
	#body div.item_ecoute {
		clear: both;
		width: 99%;
	}
		#body div.item_ecoute h3 {
			float: left;
			margin: 0;
		}
		#body div.item_ecoute .player {
			float: right;
		}
	
	/**  TABLEAU
	*******************************************************/
	#body table {
		clear: both;
		width: 100%;
		border-collapse: collapse;
		margin: 5px 0 5px 0;
	}
	#body table td {
		height: 100%;
	}
	#body table a:hover {
		text-decoration: none;
	}
	#body thead {
		font-weight: bold;
		background-color: #f29b36;
	}
	#body table td {
		vertical-align: top;
	}
	
/** HOME PAGE
***********************************************************************/
#home {
	font-size: 0.8em;
	background-color: #e9393d;
	letter-spacing: 1px;
}

	#home #gauche {
		float: left;
		text-align: justify;
		width: 36%;
		padding: 45px 0 5px 25px;
	}
	#home p {
		margin-bottom: 0;
	}
	
	#home #droite {
		float: right;
		width: 480px;
	}
		#home #droite #titre {
			background: url('img/design/hp_titre.gif') no-repeat center;
			width: 420px;
			height: 80px;
			margin: 0 auto 0 auto;
		}
		
		#home #droite #chansons {
			float: left;
			padding: 0 0 0 50px;
		}
		#home #droite #voyage_bea {
			float: left;
			padding: 20px 60px 0 0;
			margin: 0 0 0 15px;
		}
		#home #droite #moi_bea {
			float: left;
			padding: 0 0 0 110px;
			margin: -40px 0 0 0;
		}
	
	
/** FOOTER
***********************************************************************/
#footer {
	clear: both;
}
	#footer #promo {
		padding: 8px 15px;
		float: right;
		text-align: right;
		background-color: #05889b;
		font-weight: bold;
		font-variant: small-caps;
	}
		#footer #promo a {
			color: white;
			text-decoration: none;
		}
		#footer #promo a:hover {
			color: #E9393D;
		}
	
	#footer #nav {
		clear: both;
		padding: 10px;
		text-align: center;
		font-size: 0.9em;
		color: #0E5254;
	}
		#footer #nav a {
			color: #0E5254;
		}
		#footer #nav a:hover {
			text-decoration: none;
		}
		
	#footer img {
		position: relative;
		top: 3px;
	}