@charset "utf-8";
/* CSS Document */

body {
	margin:20px 0;
	background: #000000 url(images/communes/logo02.gif) no-repeat;
}

#main {
	width:910px;
	margin:0 auto;
	}
	
p {
	color:#A1A9AA;
	}
	
a {
	color:#f3f7e5;
	text-decoration:none;
	
	}
a:link {
	text-decoration: none;
	color:#CCC;
	}
/*////////////////////class/////////////////////*/	
.bleu{
	color: #ABECF5;
	}
	
.blanc {
	color:#ffffff;
	}
	
.mail a{
	color:#ABECF5;
	}
	
.mail a:hover {
	color:#d9bf73;
	}
	
/*/////////////////////////////////////////////////*/


/*////////////////////images/////////////////////*/

img{
	border:none
	}
	
p img{border:none}
	
/*////////////////////////////////////////////////////////////*/


/*/////////////////// Header //////////////////////////*/

#header {
	width:785px;
	height: 5em;
	margin:0 0 0 100px;
	padding:25px 25px 25px 0;
	background:url(images/communes/header_notes02.jpg) right no-repeat;

}


/*/////////////////////////////fin header /////////////////////////////////*/



/*//////////////////////////colonne centrale sous header //////////////*/

#centre {
	float:left;
	width:600px;
	padding:0 15px 15px 15px;
	
	}
	
#centre h1 {
	color:#a8eaf2;
	text-align:center;
	}
#centre h2,h3,h4 {
	color:#a8eaf2;
	text-align:center;
	}

/*//////////////////////////fin colonne centrale sous header //////////////*/


/*//////////////////////////grande colonne centrale sous header //////////////*/

#grandcentre {
	float:left;
	width:800px;
	padding:0 15px 15px 15px;
	
	}
	
#grandcentre h1 {
	color:#a8eaf2;
	text-align:center;
	}
#grandcentre h2,h3,h4 {
	color:#a8eaf2;
	text-align:center;
	}

/*//////////////////////////fin colonne centrale sous header //////////////*/

/*//////////////////////////// grande colonne de gauche //////////////////////////*/

#grandecolonnegauche {
	float: left;
	width:600px;
	/*border:1px solid white;*/
	margin:0 auto;
	padding:0 10px 0 0px;
	color:#A1A9AA;
	}
#grandecolonnegauche table{
	color:#A1A9AA;
	}
	
#grandecolonnegauche p:first-letter{
	padding-left:50px;
	font-size:2em;
	font-weight:bolder;
	}
	
#grandecolonnegauche a:hover {
	text-decoration: none;
	color: #ff7e00;
	}
	
/*/////////////////////////////////////////////////////////////////////*/


/*//////////////////////////////*/
/*cadre*/
/*/////////////////////////////*/


.cadre
{

  display: block;
  float: left;  
  text-align: left;
  /*margin: 30px;*/
  margin-bottom: 40px;
  padding: 0;	
}

.haut_1
{
background:url(images/cadre/hg.gif) bottom left no-repeat ;
padding-left: 50px ;
}

.haut_2
{
background:url(images/cadre/hd.gif) bottom right no-repeat ;
padding-right: 50px ;
}

.haut
{
background : url(images/cadre/h.gif) bottom center repeat-x ;
width : 100% ;
padding-top : 50px ;
/* On met un padding-top ou un padding-bottom dans la balise "la plus imbriquée", celle qui est le plus à l'intérieur comme ça les autres div qui contiennent celle-ci seront redimmensionnées automatiquement et on vera les cadres
Notez que dans une version antérieur de ce tutorial j'utilisait l'attribut height mais je me suis rendu compte que ça créait des problèmes, notament sous Internet Explorer, je sais pas pourquoi :-S  */
}



.milieu_1
{
background : url(images/cadre/g.gif) left repeat-y ;
padding-left:35px;
height : 100% ; /* Pour que toute la place disponible soit utilisée, et qu'ainsi tout le fond soit visible */
}

.milieu_2
{
background : url(images/cadre/d.gif) right repeat-y ;
padding-right: 20px ;
height : 100% ; /* Pour que tout le fond soit visible */
}

.milieu
{
background-color:#000000;
width : 95% ;
height : 100% ; /* Pour voir le fond */

}

.milieufg
{
background : url(images/cadre/g_fondu.gif) top left no-repeat ;
padding-left: 40px ;

}

.milieufd {

background : url(images/cadre/d_fondu.gif) top right no-repeat ;
padding-right: 0px ;

}





.bas_1
{
background : url(images/cadre/bg.gif) top left no-repeat ;
padding-left: 50px ;
}

.bas_2
{
background : url(images/cadre/bd.gif) top right no-repeat ;
padding-right: 50px ;
}

.bas
{
background : url(images/cadre/b.gif) top center repeat-x ;
width : 100% ;
padding-top : 50px ;
}
/*bas fondu*/

.bas_1f
{
background : url(images/cadre/bg_fondu_petit.gif) top left no-repeat ;
padding-left: 50px ;
}

.bas_2f
{
background : url(images/cadre/bd_fondu_petit.gif) top right no-repeat ;
padding-right: 50px ;
}

.basf
{
background : url(images/cadre/m_fondu_petit.gif) top center repeat-x ;
width : 100% ;
padding-top : 70px ;
}


/*////////////////////////images et miniatures//////////////*/

/*images et thumbnails*/


.tumbnail img {

	padding:5px 5px 5px 5px;
	border:1px solid white;
	background:#dce3e4;
	max-width:70px;
	max-height:80px;
	vertical-align:bottom;
	
	}

.thumbnail{
	position: relative;
	z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#dce3e4;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
	

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: -100px;
	left: -50px; /*position where enlarged image should offset horizontally */

}

.thumbnail2{
	position: relative;
	/*z-index:1;*/
	border-bottom:1px dotted #999999;
	cursor:help;
}


.thumbnail2 span{ /*CSS for enlarged image*/
	position: absolute;
	background-color:#dce3e4;
	padding: 5px;
	left:0px;
	border: 1px solid gray;
	visibility: hidden;
	color: black;
	text-decoration:none;
	z-index:3;
}


.thumbnail2:hover span{
	visibility: visible;
	cursor:help;
	z-index:3;
	/*left: 50px;*/
	top:20px; 
	width:350px;
}
/*///////////////////////////fin images et miniatures////////////////////*/




/*//////////////////////////mozilla//////////////////*/


#mozilla p {
	color:#F60;
	font-size:0.8em;
	text-align:center;
}
	
#mozilla a {
	color:#F60;
	text-decoration:underline;
}

#mozilla a:hover {
	color:#0FF;
}

/*//////////////////////////////////////////////////*/



/*//////////////////////////colonne droite ///////////////////*/	

#colonnedroite {
	float: right;
	width:200px;
	border:1px solid #303030;
	padding:5px 15px 5px 15px;
	margin:40px 0 0 0;
	
	}

#colonnedroite p {
	padding:0 5px 0 15px;
	}

h3 {
	background:#666666 url(images/communes/bgtitreh3.gif) repeat-x;
	height:25px;
	color:#d9bf73;
	
	
	}
	
	
#colonnedroite td {
	text-align:center;
	width:100px;
	}

.trait {
	background-image:url(images/index/trait_separation02.jpg);
	background-repeat:no-repeat;
	
	
	
	
}

#colonnedroite img {
	padding:5px 5px 5px 5px;
	border:1px solid white;
	background:#dce3e4;
	cursor:pointer;
	}
	


.legende{
	background:#9caaab;
	color:#415253;
	font-size:12px;
	text-align:center;
		}
/*//////////////////////////fin colonne droite //////////////*/


/*///////////////////////////concert index///////////////////*/
#concert2009{
	background-image:url(gifs_animes/concert2010.gif);
	background-repeat:no-repeat;
	height:100px;
	padding:100px 5px 0 0;
	margin:0 10px 0 5px;
}
#concert2009 p{
	margin-top:5px;
	font-size:14px;
	padding:0 0 0 0;
	}
	
/*////////////////////////fin oncert2009///////////////////////////////*/



/*////////////////////////titres groupes///////////////////////*/

#titregroupe{
	background-color:#FF0;
	font-size:xx-large;
	color:#333;
	text-align:center;
	text-transform:uppercase;
	font-weight:bold;
	margin-right:20px;
	
}
#presse{
	padding-left:25px;
	background-color:#666;
	color:#FFF;
	border-bottom:1px solid #FFF;
	padding-right:20px;
	margin-right:0;
}
.journal{
	text-align:right;
	

}
/*///////////////////////////////////////////////////////////*/




/*////////////////////////// Footer ////////////////////////*/

#footer {
	text-align: center;
	font-size: smaller;
	
	text-decoration:none;
	border-top:1px solid #282828;
}

#footer p {
	color:#282828;
	text-decoration:none;
	}

#footer a {
	color:#323232;
	text-decoration:none;
	}

#footer a:hover {
	text-decoration: none;
	color: #d9bf73;
	}
	
/*//////////////////////////////////////////////////////////*/