/*****************************************************************************
	Propriété: Aquariofolie.ch
	Auteur :   Bugnon Cédric
	Date:      07.10.2008
	Dernière   MàJ : 07.10.2008
	But:       Feuille de CSS externe du site http://www.crevettes.ch
	******************************************************************************/

/* Style appliqué à toute la partie HTML */
html, body 
{
	margin: 0;
	padding: 0;
	height: 100%;
}

/* Style appliqué à toute la partie BODY */
body 
{
	margin: 0;
	padding: 0;
	font-family: arial, verdana,  helvetica, sans-serif;
	font-size: 9pt;
	background: #B4E2EF url('images/bgall.jpg') repeat-x ;
	text-align : center ;
	color : #fff;
	behavior : url(csshover.htc);
}


/* Style appliqué à tous les conteneurs de la partie BODY */
.conteneur 
{ 
	width:925px;
	background-color: #000; 
	margin-left:auto;
	margin-right:auto;
	text-align : left;
	height:100%; 
	background: url('images/centre253.gif') no-repeat ;
	
}
html>body .conteneur {height : auto; min-height : 100%;}

/* Style appliqué au haut de ma page, avec notamment les catégories */
.haut
{ 
	width:900px;
	height: 152px;
	text-align : left;
	margin-left :25px;
	background: url('images/top.jpg') no-repeat;
} 
html>body .haut
{
	width : 900px; 
}


/* Style appliqué au texte que je désire voir centré sur ma page */
.centre
{ 
	background: #000 ; 
	width:900px;
	text-align : left;
	margin-left :25px;
}
html>body .centre
{
	margin-left :25px;
	width : 900px;
}
 
/* Style appliqué au titre de chaque page, comme introduction à ce qui suit */
.haut_intro {float : right ; margin-top : 90px; text-align : right ; width : 300px ;}

/* Style appliqué au texte que je désire voir à gauche sur ma page */
.gauche 
{
	float : left;
	width : 234px;
	margin-left : 15px;
	margin-top : 20px;
	color : #6A6F78;
	padding-bottom : 100px;
	margin-top : -25px;
}
html>body .gauche
{
	margin-left: 30px;
}

/* Style appliqué au texte que je désire voir à droite sur ma page */
.droite 
{
	float : left;
	width : 690px; 
	margin-left : 105px; 
	margin-top : -120px;
	padding-bottom : 30px;
	background : transparent;
}
html>body .droite 
{
	margin-left : 105px; 
}

/* Style appliqué à mes résultats de recherches */
.resultats 
{
	float : left ; 
	width : 900px ; 
	margin-left : 20px; 
	margin-top : -120px; 
	padding-bottom : 30px;
	background : transparent;
}


/* Style appliqué au bas de ma page, avec notamment le nom du créateur du site et le copyright */
.bas
{ 
	background : #000;
	width:900px;
	text-align : center;
	font-size: 11px;
	margin-left :25px;
}
html>body .bas
{
	width:900px;
}


/* Mes différents types de paragraphe que je peux appliquer juste en mentionnant le nom dans la page HTML */
/* ICI celui par défaut */
p {
	margin-top: 0;
	margin-right: 20px;
	margin-bottom: 0;
	margin-left: 20px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
/* Pour la partie edito (intro) de ma page */
.para_edito {text-transform : uppercase ; font-weight : bold}
/* Pour la partie haute du site (catégorie) */
.para_haut {color : blue  ; margin-top : 0; padding : 0 }
/* Pour la partie qui n'est pas en haut, soit qui n'est pas blue */
.notop {margin : 0 20px 0 20px ; padding : 0}
/* Dans le cas où je désire mon texte sans marge */
.para_nomargin {margin : 0 ; paddig : 0; float : none} 

/*Texte du tableau centré*/
.texttableau { text-align:center}



/* Deux types d'espacements différents, avec une couleur de fond autre  */
.spacer {clear : both ; height : 13px; }
.spacer2 {clear : both ; height : 0px; background-color : #000 }

/* Style identique et le plus simple pour mes balises de début et de fin */
ul, li
{
	margin :0;
	padding : 0 ; 
	list-style : none ;
}


/* Ce bloc crée mon menu, simplement et sans animation */
#menu 
{
	background :  #333 url('images/menu_fd2.gif') no-repeat;
	width:900px;
	height : 118px;
	color:#fff; font-weight:bold; font-size:13px; overflow:hidden; background-color:#000}

	
/* Ce bloc crée l'architecture de mon menu, en dessous des catégories */
#menu li
{
	float : left ;
	padding-top : 5px ;
	height : 31px;
	width : 100px;
	text-align : center;
	margin-left : 0;
	background :  url('images/menu_separateur.gif') no-repeat 98px 2px; 
}
  

/* Ce bloc applique au texte de mes catégories le style qui doit être appliqué */
li.box  a
{
	float : left ;
	padding-top : 5px ;
	height : 28px;
	display : block;
	width : 100px;
	text-align : center;
	margin-top : -5px;
}
  
/* C'est cette instruction qui fait que mes catégories deviennent blue au survol de la souris */
li.box  a:hover
{
	background :  url('images/menu_orange.gif'); 
	height : 25px;
}


/* Ce bloc applique au texte de mes catégories le style qui doit être appliqué */
li.box3  a
{
	float : left;
	padding-top : 5px ;
	height : 28px;
	width : 100px;
	text-align : center;
	margin-top : -5px;
	margin-bottom : -28px;
}
  
/* C'est cette instruction qui fait que mes catégories deviennent blue au survol de la souris */
li.box3  a:hover
{
	display: inline;
	height : 28px;
	float : left;
	padding-top : 5px ;
	width : 100px;
	text-align : center;
	margin-top : -5px;
	margin-bottom : -28px;
}

/* Cette partie la rend ma catégorie blue si celle si est active (si l'on est sur la page en question) */
li.box_on  a
{
	float : left ;
	padding-top : 5px ;
	height : 25px;
	display : block;
	width : 100px;
	text-align : center;
	margin-top : -5px;
	background :  url('images/menu_orange.gif'); 
}



span.prout span{display: none;}

span.prout:hover span
{
	display: inline;
	height : 28px;
}


span.prout3
{
	float : left ;
	padding-top : 5px ;
	height : 28px;
	width : 100px;
	text-align : center;
	background :  #000 url('images/menu_fd3.gif') no-repeat; 
}
  
/* C'est cette instruction qui fait que mes catégories deviennent blue au survol de la souris */
span.prout3  a:hover
{
	background :  url('images/menu_orange3.gif'); 
	height : 25px;
}

span.prout2
{
	float : left ;
	padding-top : 5px ;
	height : 28px;
	width : 100px;
	text-align : center;
	background :  #000 url('images/menu_fd3.gif') no-repeat; 
}
  
/* C'est cette instruction qui fait que mes catégories deviennent blue au survol de la souris */
span.prout2  a:hover
{
	background :  url('images/menu_orange2.gif'); 
	height : 25px;
}

span.prout1
{
	float : left ;
	padding-top : 5px ;
	height : 28px;
	width : 100px;
	text-align : center;
	background :  #000 url('images/menu_fd3.gif') no-repeat; 
}
  
/* C'est cette instruction qui fait que mes catégories deviennent blue au survol de la souris */
span.prout1  a:hover
{
	background :  url('images/menu_orange1.gif'); 
	height : 25px;
}
  
/* Ne rien faire si box et sur "on" */
li.box_on  a:hover
{

}
 
/*** Les balises H renvoie à différent niveau de style de texte, le premier étant le plus gros, le dernier le plus petit ***/
h1 
{
	font-size : 24px ;  
	padding : 0 ; 
	color : dodgerblue; 
	font-style : italic;  
	background :  url('images/h1.gif') repeat-x left bottom ; 
	height : 50px ;
	text-transform : uppercase; margin-left:20px; margin-right:30px; margin-top:60px; margin-bottom:0
}



h2
{
	font-size : 12px ;
	color : #fff;
	text-indent : 30px ; 
	height : 20px ; 
	padding-top : 10px ; 
	margin : 0;
	background :  #fff url('images/h2.gif') no-repeat; 
	height : 35px
}

h3 
{
	font-size : 12px ;
	color : #fff;
	text-indent : 30px ; 
	height : 20px ; 
	padding-top : 2px; 
	background :  #ccc url('images/h3.gif') no-repeat 6px 5px ; 
	height : 20px; margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

h4 
{
	font-size : 12px ;
	color : dodgerblue; 
	margin : 10px 0 0 20px ; 
	font-weight : normal
}

h5 
{
	font-size : 11px ;
	color : dodgerblue; 
	margin : 10px 0 0 20px ; 
	font-weight : normal ; 
	text-decoration : underline
}
/***** Fin des baliste H *****/


/* Style appliqué pour mon petit bloc de recherche en haut à gauche */
.haut_gauche {height : 45px ;   background :  url('images/box_mail2.gif') no-repeat ;}

/* Toutes mes balises a, qui permettent la création d'hyperliens de différentes classes (Suivant si dans menu ou dans le texte.) */
a {color : #fff; text-decoration : none}
a:hover  {color : #fff; text-decoration : none}

a.class1 
{
	color : #000;  
	font-weight : bold; 
	text-decoration : underline ; 
	padding-bottom : 20px; display :  block
}
a:hover.class1  {color : #000; text-decoration : underline}

a.class3  {color : dodgerblue; text-decoration : none}
a:hover.class3  {color : dodgerblue; text-decoration : underline}

a.class4  {color : #fff; text-decoration : none; font-weight : bold}
a:hover.class4  {color : #fff; text-decoration : underline}

a.class5  {color : dodgerblue; text-decoration : none}

a.class7  {color : white; text-decoration : none}
a:hover.class7  {color : white; text-decoration : underline}


/* Permet l'alignement de ma partie recherche (image de la loupe, zone de texte, image de fond, et gère la transparence de fond */
input {margin : O; padding : 0 ;  margin-top : 0}
.imagegauche {float : left}
.imagegauche2 {float : left; margin-left : 6px; margin-top : 12px}

.recherche
{
	float : left ; 
	background-color : transparent ; 
	size: absolute; padding : 12px 0 0 0
}

div.hr
{
	height: 13px;
	margin : 0   ;
	padding : 0;   
	width : 100px;
	background : url('images/point.gif') repeat-x; 
}


/* Style pour la division en section sur ma page. (Au plus simple.) */
div.hr hr 
{
	display: none;  padding :0; 
}


form {margin-left : 0 ; margin-top : 20px}

/* Emplacement du bouton envoyer sur la page contact */
.para_form_envoyer {margin-top : 20px}