/*****************************************************************************
	Propriété: Communauté suisse des crevettophiles
	Auteur :   Bugnon Cédric
	Date:      05.05.2008
	Dernière   MàJ : 14.05.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 : #000
}


/* 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_search.jpg') no-repeat;
} 
html>body .haut
{
	width : 900px; 
}


/* Style appliqué au texte que je désire voir centré sur ma page */
.centre
{ 
	background: #FFFFFF ; 
	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
}
html>body .gauche
{
	margin-left : 30px;
}

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

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


/* Style appliqué au bas de ma page, avec notamment le nom du créateur du site et le copyright */
.bas
{ 
	background : #B4E2EF;
	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 : 0 20px 0 20px ; padding : 10px 0 0 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 : orange  ; margin-top : 0; padding : 0 }
/* Pour la partie qui n'est pas en haut, soit qui n'est pas orange */
.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');
	width:900px;
	height : 31px;
	color:#fff; font-weight:bold; font-size:13px; overflow:hidden; background-color:#333}


/* 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.box2  a
{
	font-family: arial, verdana,  helvetica, sans-serif;
	font-size: 10pt;
	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 orange au survol de la souris */
li.box2  a:hover
{
	background :  url('images/menu_orange.gif'); 
	text-decoration: none;
}

/* Cette partie la rend ma catégorie orange si celle si est active (si l'on est sur la page en question) */
li.box_on2 a
{
	font-family: arial, verdana,  helvetica, sans-serif;
	font-size: 10pt;
	float : left ;
	padding-top : 5px ;
	height : 28px;
	display : block;
	width : 100px;
	text-align : center;
	margin-top : -5px;
	background :  url('images/menu_orange.gif'); 
}
  
/* Ne rien faire si box et sur "on" */
li.box_on2  a:hover { text-decoration: none;}

 
/*** 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 : #000; 
	font-style : italic;  
	height : 50px ;
	text-transform : uppercase; margin-left:20px; margin-right:30px; margin-top:60px; margin-bottom:0
}



h7
{
	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
}

h9
{
	font-size : 12px ;
	color : #fff;
	text-indent : 30px ; 
	height : 20px ; 
	padding-top : 10px ; 
	margin : 0;
}

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

h5 
{
	font-size : 11px ;
	color : orange; 
	margin : 10px 0 0 20px ; 
	font-weight : normal ; 
	text-decoration : underline
}

h6 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	margin-bottom:10px;
	color: #3f3f3f;
	margin-top: 15px;
	font-weight: bold;
	font-size: 18px;
}

.postbody h6.first {
	/* The first post on the page uses this */
	font-size: 1.5em;
}

.postbody h6 {
	/* Postbody requires a different h3 format - so change it here */
	font-size: 1.5em;
	padding: 2px 0 0 0;
	margin: 0 0 0.3em 0 !important;
	text-transform: none;
	border: none;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	line-height: 125%;
}
/***** 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 : #727576; text-decoration : none}
a:hover  {color : #006699; text-decoration : none}

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

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

a.class4  {color : #FFF; text-decoration : none; font-weight : bold}
a:hover.class4  {color : #FFF; 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
}