/*
	Style sheet BLOX
	Created by GRIFFE
	http://www.griffe.be	
*/


/* GENERAL
----------------------------------------------------------------------------------------------------*/

html, body {
	margin:0;
	padding:0;
	height:100%;
	font-family:'Trebuchet MS','Helvetica Neue',Arial,Sans-Serif;
	font-size:12px;
	font-size: 100%;
	color:#333;
	}

#container {
	width:100%;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height */
	min-height:100%; /* real browsers */
	background:url(../imgs/blox_bg_header.gif);
	background-repeat:repeat-x;
	position:relative; /* IMPORTANT pour garder footer an bas de page */
	}
		
#content {
	margin:0 auto;
	padding:0 0 22px 0; /* padding bottom de la hauteur du footer */
	width:920px;
	}
	
ul {
	list-style:none;
	}

	
p, img, a img {
	margin:0;
	padding:0;
	border: none;
  }			

a {
	color:#888;
	text-decoration:none;
	}
	
a:hover {
	text-decoration:none;
	}
	
a:hover, a:focus, a:active, a:visited { 
	outline: none;
  }
  
.puce {
	margin:0 7px 2px 0;
	}
	
p.waiting {
	text-align:center;
	margin:50px 0 0 0;
	}	  
  	

/* TITRES - STYLES
----------------------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	padding:0;
	margin:0;
	}

h2 {
	font-size:20px;
	font-weight:normal;	
	}
	
h3 {
	font-size:16px;
	font-weight:normal;
	color:#000;	
	}
	
h4 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:10px;
	}
	
h5 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:7px;
	}
	
h6 {
	font-size:18px;
	font-weight:bold;
	padding:7px 0;
	margin:0 0 20px 0;
	border-bottom:1px;
	border-bottom-color:#ccc;
	border-bottom-style:solid;
	border-top:1px;
	border-top-color:#ccc;
	border-top-style:solid;	
	}		
	
.newstitle {
	font-size:16px;
	font-weight:bold;
	color:#666666;
	}
	
.newsdate {
	color:#01b416;
	font-weight:bold;		
	}
	
.newstext {
	margin:10px 0 0 0;
	}
	
.small {
	font-size:10px;
	}
	
#coord {
	margin:0 auto 0 auto;
	font-size:10px;
	text-align:center;
	}						

/* COULEURS
----------------------------------------------------------------------------------------------------*/
	
.green {
	color:#83bc39;
	}
	
.gray {
	color:#868990;
	}
	
.blue {
	color:#3c9bdd;
	}
	
.darkblue {
	color:#314b88;
	}			
	
.yellow {
	color:#ffc423;
	}
	
.pink {
	color:#db007a;
	}
	
.black {
	color:#364042;
	}
	
.purple {
	color:#856db2;
	}


/* COULEURS BORDERS POINTS FORTS
----------------------------------*/
	
.products_right_col03_green {
	border:solid 1px #83bc39;
	}
	
.products_right_col03_gray {
	border:solid 1px #868990;
	}
	
.products_right_col03_blue {
	border:solid 1px #3c9bdd;
	}
	
.products_right_col03_darkblue {
	border:solid 1px #314b88;
	}
	
.products_right_col03_yellow {
	border:solid 1px #ffc423;
	}
	
.products_right_col03_pink {
	border:solid 1px #db007a;
	}
	
.products_right_col03_black {
	border:solid 1px #364042;
	}
	
.products_right_col03_purple {
	border:solid 1px #856db2;
	}			
	

/* LINKS
----------------------------------------------------------------------------------------------------*/

a.link {
	font-weight:normal;
	color:#333;
	}
	
a.link:hover {
	color:#ffc423;
	}


a.link_classic {
	font-weight:bold;
	}
	
a.link_classic:hover {
	color:#ffc423;
	}
	
a.link_white {
	color:#FFFFFF;
	}
	
a.link_white:hover {
	color:#ffc423;
	}	
	
a .backtotop {
	width:900px;
	height:20px;
	padding-right:20px;
	color:#666666;
	background:#ececec;
	text-align:right;
	font-size:11px;
	}
	
a .backtotop:hover {
	background:#ccc;
	color:#FFFFFF;
	}		
	
	
/* HEADER
----------------------------------------------------------------------------------------------------*/

#header {
	height:141px;
	}
	
#logo {
	float:left;
	height:61px;
	width:148px;
	margin:45px 0;	
	}
	
#slogan, #slogan_nl {
	float:left;
	height:15px;
	width:235px;
	margin:70px 0 0 537px;	
	}

#slogan {
	background:url(../imgs/slogan_fr.png);
	}
	
#slogan_nl {
	background:url(../imgs/slogan_nl.png);
	}					

/* MAIN_NAV
----------------------------------------------------------------------------------------------------*/

#main_nav {
	float:left;
	margin:-3px 0 0 0;
	padding:0;
	width:91%;	
	}	

#main_nav li  {
	float:left;
	font-size:12px;
	letter-spacing:0.080em;
	font-weight:bold;			
	}
	
#main_nav li .clicked  {
	color:#ffc423;
	border-bottom:4px;
	border-bottom-color:#ffc423;
	border-bottom-style:solid;	
	}	
	
#main_nav li a  {
	display:block;
	height:14px;
	margin:0 30px 0 0;
	padding:0 0 10px 0;
	color:#FFF;
	}	

#main_nav li a:hover {
	color:#ffc423;
	border-bottom:4px;
	border-bottom-color:#ffc423;
	border-bottom-style:solid;	
	}
	
/*#main_nav li .clicked  {
	color:#ffc423;
	display:block;
	background:url(../imgs/main_on02.gif);
	background-repeat:repeat-x;
	}	
	
#main_nav li a  {
	display:block;
	height:35px;
	color:#FFF;
	margin:-7px 20px 0 0;
	padding:8px 8px 0 8px;
	}	

#main_nav li a:hover {
	color:#ffc423;
	background:url(../imgs/main_on02.gif);
	background-repeat:repeat-x;
	}*/

/* LANGUES
----------------------------------------------------------------------------------------------------*/
#lang {
	float:left;
	margin:-3px 0 0 0;
	}
	
#lang li {
	float:left;
	color:#FFFFFF;
	font-size:12px;
	}
	
#lang li .clicked {
	color:#ffc423;
	}	
	
#lang li a {
	color:#FFFFFF;
	}
	
#lang li a:hover {
	color:#ffc423;
	}


/* MAIN
----------------------------------------------------------------------------------------------------*/
#main {
	width:100%;
	height:100%;
	margin:36px 0 0 0;
	padding:20px 0;
	font-size:12px;
	}
	
#gamme {
	width:918px;
	margin:0;
	padding:0;
	border:solid 1px #CCCCCC;
	}
	
#gamme_text {
	float:left;
	width:283px; /* real width 325px */
	padding:20px;
	font-size:16px;
	}	
	

/* BLOCS HOME PAGE
----------------------------------*/
	
#homeblocs {
	width:100%;
	height:270px; /* hauteur blocs 252 + 5px(espace border) + 4px(border) + espace(9px) = 270px */ 	
	margin:20px 0 0 0;
	padding:0;
	}
	
a #bloc01, a #bloc02, a #bloc03{
	float:left;
	height:57px; /* vraie hauteur 252px moins padding 200 = 52px + espace border(5px) = 57px */
	width:195px;
	padding:200px 10px 0 10px;
	font-size:14px;
	color:#333;
	}
	
a #bloc01 {
	background:url(../imgs/home_bloc_pharma.gif);
	background-repeat:no-repeat;
	margin:0 20px 0 0;	
	}
	
a #bloc02 {
	background:url(../imgs/home_bloc_music.gif);
	background-repeat:no-repeat;
	margin:0 20px 0 0;	
	}
	
a #bloc03 {
	background:url(../imgs/home_bloc_ear.gif);
	background-repeat:no-repeat;
	margin:0 20px 0 0;	
	}
	
a #bloc01:hover, a #bloc02:hover, a #bloc03:hover {
	border-bottom:4px;
	border-bottom-color:#ffc423;
	border-bottom-style:solid;
	color:#333;		
	}			
	
#news {
	float:left;
	height:240px;
	width:183px;
	border:solid 1px #CCCCCC;
	padding:5px 15px;
	font-size:12px;
	line-height:16px;
	}
	
#facebook {
	margin:23px 0 0 0;
	border-top:1px #CCCCCC dotted;
	padding:7px 0 20px 0;
	}
	
#facebook a {
	background:url(../imgs/fb_logo_off.png) no-repeat center left;
	display:block;
	text-align:right;
	}
	
#facebook a:hover {
	background:url(../imgs/fb_logo_on.png) no-repeat center left;
	display:block;
	text-align:right;
	}	
	
	
	

	
/* PRODUITS
----------------------------------------------------------------------------------------------------*/

#blocprod01, #blocprod02, #blocprod03, #blocprod04,#blocprod05, #blocprod06, #blocprod07, #blocprod08 {
	float:left;
	width:213px;
	height:70px; /* real height 250px */
	border:solid 1px #CCCCCC;
	padding:180px 0 0 0;
	text-align:center;
	font-size:11px;
	line-height:16px;
	}	

a #blocprod01:hover, a #blocprod02:hover, a #blocprod03:hover, a #blocprod04:hover, a #blocprod05:hover, a #blocprod06:hover, a #blocprod07:hover, a #blocprod08:hover {
	border-bottom:4px;
	border-bottom-color:#ffc423;
	border-bottom-style:solid;
	}
	
#blockborder {
	height:255px; /* empêcher les blocs du haut de descendre au rollover > 4px en + et 1 px pr la border */
	}
	
#blockborder02 {
	height:275px; /* empêcher les blocs du bas de descendre au rollover > 4px en + et 1 px pr la border + 20px pr margin haut */
	}		

#blocprod01, #blocprod02, #blocprod03 {
	margin-right:20px;
	}
	
#blocprod05, #blocprod06, #blocprod07 {
	margin-right:20px;
	margin-top:20px;
	}
	
#blocprod08 {
	margin-top:20px;
	}


/* VISUS SMALL
----------------------------------*/

#blocprod01 {
	background:url(../imgs/prod_small_sleep_green.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}
		
#blocprod02 {
	background:url(../imgs/prod_small_sleep_yellow.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}
	
#blocprod03 {
	background:url(../imgs/prod_small_disco.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}
	
#blocprod04 {
	background:url(../imgs/prod_small_music.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}					
	
#blocprod05 {
	background:url(../imgs/prod_small_study.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}
	
#blocprod06 {
	background:url(../imgs/prod_small_swim_junior.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}
	
#blocprod07 {
	background:url(../imgs/prod_small_swim_both.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}
	
#blocprod08{
	background:url(../imgs/prod_small_plane_both.jpg);
	background-repeat:no-repeat;
	background-position:top;
	}			
	
/* PRODUITS - DESCRIPTIONS
----------------------------------------------------------------------------------------------------*/

.products {
	width:920px;;
	border:solid 1px #CCCCCC;
	font-size:11px;
	line-height:18px;
	margin-bottom:20px;
	
	}
	
.products_left, .products_right {
	float:left;
	}
	
.products_left {
	width:230px;
	padding:80px 0 0 0; /* descendre image plus bas que le titre */
	}
	
.products_right {
	padding:20px; 
	width:650px; /* width normale 690px */
	}
		
.products_left_visu {
	width:230px; /*width normale 230px > 230+690=920px */
	padding:10px 0 0 0;
	text-align:right;
	}
	
.products_left_content {
	width:200px; /*width normale 230px  */
	padding:10px 10px 20px 20px;
	margin:0;
	}
	
.products_right_col01, .products_right_col02  {
	float:left;
	margin-top:20px;
	}			
.products_right_col01, .products_right_col02 {
	width:200px;
	margin-right:20px;
	}
	
.products_right_col03_green, .products_right_col03_gray, .products_right_col03_blue, .products_right_col03_darkblue, .products_right_col03_yellow, .products_right_col03_pink, .products_right_col03_black, .products_right_col03_purple {
	float:left;
	margin-top:20px;
	width:188px;
	padding:10px;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
	 -khtml-border-radius: 10px;
    border-radius:10px;
/*	behavior: url(border-radius.htc);*/
	background-color:#FFFFFF; /* IE bug */
	}
	
.products_right_col03_black_full {
	float:left;
	margin-top:20px;
	width:188px;
	padding:10px;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
	 -khtml-border-radius: 10px;
    border-radius:10px;
	background-color:#364042;
	color:#FFF;
	}
	
.products_right_col03_gray_full {
	float:left;
	margin-top:20px;
	width:188px;
	padding:10px;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
	 -khtml-border-radius: 10px;
    border-radius:10px;
	background-color:#868990;
	color:#FFF;
	}
	
.products_right_col03_black_full:hover, .products_right_col03_gray_full:hover {
	color:#ffc423;
	}
	
p.pointfort_green, p.pointfort_gray, p.pointfort_blue, p.pointfort_darkblue, p.pointfort_yellow, p.pointfort_pink, p.pointfort_black, p.pointfort_purple  {
	padding:0 0 0 11px;
	margin-bottom:10px;
	}

p.pointfort_green {	
	background:url(../imgs/puce_v_green.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}
	
p.pointfort_gray {	
	background:url(../imgs/puce_v_gray.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}			

p.pointfort_blue {	
	background:url(../imgs/puce_v_blue.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}
	
p.pointfort_darkblue {	
	background:url(../imgs/puce_v_darkblue.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}			
	
p.pointfort_yellow {	
	background:url(../imgs/puce_v_yellow.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}
	
p.pointfort_pink {	
	background:url(../imgs/puce_v_pink.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}
	
p.pointfort_black {	
	background:url(../imgs/puce_v_black.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}
	
p.pointfort_purple {	
	background:url(../imgs/puce_v_purple.gif);
	background-repeat:no-repeat;
	background-position:top left;
	}

/* FAQ
----------------------------------------------------------------------------------------------------*/

#faq01, #faq02{
	float:left;
	width:450px;
	margin-bottom:30px;
	}

#faq01 {
	margin-right:20px;
	}	


/* CONSEILS
----------------------------------------------------------------------------------------------------*/

#blocadvice {
	margin-bottom:30px;
	}

#blocadvice01, #blocadvice02, #blocadvice03, #blocadvice04 {
	float:left;
	width:215px; /* real width 215px */
	padding:0;
	margin:0;
	font-size:12px;
	}	

#blocadvice01, #blocadvice02, #blocadvice03 {
	margin-right:20px;
	}
	
img.advice {
	margin-bottom:30px;
	}

/* OREILLE
----------------------------------------------------------------------------------------------------*/

#bloc_ear_text {
	float:left;
	width:330px;
	font-size:12px;
	line-height:28px;	
	}
	
#bloc_ear_visu {
	float:left;
	width:590px;
	}	
		

/* SELL
----------------------------------------------------------------------------------------------------*/

.sell {
	width:920px;
	font-size:12px;
	margin-bottom:20px;
	}

#sell_left, #sell_right {
	float:left;
	}
	
#sell_left {
	width:615px; /* real width 655px */
	padding:20px;
	}	
	
#sell_right {
	width:245px; /*real width 265px */
	padding:10px;
	margin:0;
	text-align:center;
	}
	
#pharma {
	margin:170px 0 0 0;
	}	
	
/* TABLEAU POINTS DE VENTE
----------------------------------------------------------------------------------------------------*/

#sellcodes	{
	font-size:12px;
	width:600px;
	text-align:center;
	border-collapse:collapse;
	margin:30px 0 30px 0;
	}

#sellcodes th {	
	font-size:13px;
	font-weight:normal;
	padding:8px;
	border-bottom:1px solid #ececec;
	color:#db007a;
	}
	
#sellcodes td {
	padding:5px;
	border-bottom:1px solid #fff;
	border-top:1px solid transparent;
	}
	
#sellcodes td.nom {
	text-align:left;	
	}	

#sellcodes tr:hover td {
	background:#ececec;
	color:#333;
	}


/* TABLEAUX PRODUITS
----------------------------------------------------------------------------------------------------*/

#tit_table {
	margin:30px 0 0 0;
	font-weight:bold;
	text-transform:uppercase;
	}
	
#border_table {
	margin:10px 0 10px 0;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
/*	behavior:url(border-radius.htc);*/
	background-color:#FFFFFF; /* IE bug */
	text-align:center;
	}

#border_table.tabgreen {
	border:solid 1px #83bc39;
	}
	
#border_table.tabgray {
	border:solid 1px #868990;
	}
	
#border_table.tabyellow {
	border:solid 1px #ffc423;
	}
	
#border_table.tabpink {
	border:solid 1px #db007a;
	}
	
#border_table.tabblack {
	border:solid 1px #364042;
	}

#tableau  {
	font-size:12px;
	margin:0;
	width:100%;
	text-align:left;
	border-collapse:collapse;
	color:#666;
	}
	
#tableau th {
	padding:8px;
	font-weight:bold;
	font-size:13px;
	}
	
#tableau td {
	padding:8px;
	border-top:1px dotted #ccc;
	}

#tableau tfoot {
	font-size:9px;
	}
	
#tableau tbody tr:hover td {
	background:#ececec;
	}
	
#tableau tfoot.tabgreen {
	border-top:#83bc39 solid 1px;
	}
	
#tableau thead.tabgreen {
	border-bottom:#83bc39 solid 1px;
	}
	
#tableau tfoot.tabgray {
	border-top:#868990 solid 1px;
	}
	
#tableau thead.tabgray {
	border-bottom:#868990 solid 1px;
	}
	
#tableau tfoot.tabyellow {
	border-top:#ffc423 solid 1px;
	}
	
#tableau thead.tabyellow {
	border-bottom:#ffc423 solid 1px;
	}
	
#tableau tfoot.tabpink {
	border-top:#db007a solid 1px;
	}
	
#tableau thead.tabpink {
	border-bottom:#db007a solid 1px;
	}

#tableau tfoot.tabblack {
	border-top:#364042 solid 1px;
	}
	
#tableau thead.tabblack {
	border-bottom:#364042 solid 1px;
	}	
													
/* DIVERS
----------------------------------------------------------------------------------------------------*/

.aligncenter{
	text-align:center;
	}
	
.lefty {
	float:left;
	padding:10px 10px 10px 0;
}

.username {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	font-style:italic;
}	

	
/* TABLEAU CONTACT
----------------------------------------------------------------------------------------------------*/

.tableaucontact {
	font-size:12px;
	}

/* SPLASH
----------------------------------------------------------------------------------------------------*/

#containerindex {
	position:absolute; 
	left:50%;  
	top:50%; 
	width:905px; 
	height:445px; 
	margin-top:-222px; /* moitié de la hauteur */ 
	margin-left:-452px; /* moitié de la largeur */
	}	
		
#blocsplash01, #blocsplash02, #blocsplash03, #blocsplash04, #blocsplash05, #blocsplash06, #blocsplash07, #blocsplash08 {
	float:left;
	width:215px;
	height:215px;
	}
	

#blocsplash01, #blocsplash02, #blocsplash03 {
	margin:0 15px 0 0;	
	}
	
#blocsplash05, #blocsplash06, #blocsplash07 {
	margin:15px 15px 0 0;	
	}
	
#blocsplash08 {
	margin:15px 0 0 0;	
	}
	
#blocsplash01, #blocsplash07 {
	padding:80px 0 0 0;
	height:135px;
	text-align:center;
	background:url(../imgs/blox_bg_footer.gif);
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
	behavior: url(border-radius.htc);
	background-color:#FFFFFF; /* IE bug */	
	}		
	
/*#indexslogan {
	text-align:center;
	height:25px;
	margin:30px 0 0 0;
	}*/
	
#indexslogan {
	text-align:center;
	margin:10px 0 0 0;
	font-size:12px;
	}								

/* JAVASCRIPT - PETER'S TRICK ;)
----------------------------------------------------------------------------------------------------*/

#title{
	text-indent:-9999;	
	margin:0;
	padding:0;
	display:none;
	}
  
#indexslogan h2 {
    font-size:20px;
    }												

/* FOOTER
----------------------------------------------------------------------------------------------------*/

#footer {
	position:absolute; /* IMPORTANT pour garder footer en bas de page */
	bottom:0; /* IMPORTANT pour garder footer en bas de page */
	width:100%;	/* IMPORTANT pour garder footer en bas de page */
	height:17px; /* IMPORTANT pour garder footer en bas de page */
	font-size:9px;
	color:#FFFFFF;
	padding:5px 0 0 0;	
	text-align:center;
	background:url(../imgs/blox_bg_footer.gif);
	}


/* CLEAR
----------------------------------------------------------------------------------------------------*/

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width:0;
	height:0;
	}