body { background-color: #000; color: #fff; margin: 10px;
	  font-family: Verdana, Geneva, Arial, sans-serif;
	  font-size: small;
	  line-height: 180%
	  height:100%;
	  max-height:100%
	  }
	  
	  
.clear {clear: left}




h3 {color: #e8eae8; letter-spacing: 0.3em; word-spacing: 0.5em; text-align: center}

#en-tete 
	{
	background-color: #000;
	background:url(http://www.brocnrollmusic.com/images/fond/annonces_top.jpg);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	visibility: visible;
	position: relative;
	height: 112px
	}
/*=======AJOUTER ANNONCE, NOMBRE etc... =======================================*/

#menu1 {color: #000;
		font-size: x-small;
		background-color: #ccc;
		background:url(http://www.brocnrollmusic.com/images/cellpic2.gif);
		background-repeat:repeat;
		float:left;
		left: 40px;
		margin: 3px;
		position: relative;
		width: 180px;
		text-align: center}
		
/*============TABLE CONTACT, DATE etc... =================================  */
		
#menu2 {color: #000;
		font-size: x-small;
		background-color: #ccc;
		background:url(http://www.brocnrollmusic.com/images/cellpic.gif);
		background-repeat:repeat;
		float:left;
		margin: 3px;
		position: relative;
		width: 80px;
		text-align: center}
		
#menu3 {color: #000;
		font-size: x-small;
		background-color: #ccc;
		background:url(http://www.brocnrollmusic.com/images/cellpic.gif);
		background-repeat:repeat;
		float:left;
		margin: 3px;
		position: relative;
		width: 270px;
		text-align: center}
		

#menu4 {color: #000;
		font-size: x-small;
		background-color: #ccc;
		background:url(http://www.brocnrollmusic.com/images/cellpic.gif);
		background-repeat:repeat;
		float:left;
		margin: 3px;
		position: relative;
		width: 120px;
		text-align: center}
		
		
		
/* =============CONTENU ANNONCE poste par visiteur ==============  */

#table3 { visibility: visible; }
#table3 table {	font-size: 9px;	font-family: Verdana, Geneva, Arial, sans-serif;background-color: transparent; }
#table3 td { background-color: #F5FAF5;padding: 0px 4px 0px 4px;border-width: 2px 2px 2px 2px;border-style: solid;border-color: #ffffff #C5CCC5 #C5CCC5 #ffffff; }
#table3 th { padding: 0px 4px 0px 4px;border-width: 2px 2px 2px 2px;border-style: solid;border-color: #ffffff #C5CCC5 #C5CCC5 #ffffff;background-color: #d5ddd5;text-align: left; }


/*================ESSAI2 contenu annonce ======================== */

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {
		margin:0;
		}
		
	#xsnazzy h1 {
		font-size:2.5em;
		color:#fff;}
		
	#xsnazzy h2 {
		font-size:2em;
		color:#000;
		border:0;}
		
	#xsnazzy p {
		padding-bottom:0.5em;
		margin: 5px;}
		
	#xsnazzy h2 {
		padding-top:0.5em;}
		
	#xsnazzy {
		background: transparent;
		margin-top: 2px;
		margin-bottom: 2px;
		margin-right: 12px;
		width:180px;
		height:auto;
		float:left;
		text-align: center;
		
		
		
	}

.xtop, .xbottom {
	display:block;
	background:transparent;
	font-size:1px;}
	
.xb1, .xb2, .xb3, .xb4 {
	display:block;
	overflow:hidden;}
	
.xb1, .xb2, .xb3 {
	height:1px;}

.xb2, .xb3, .xb4 {
	background:#A59CDA;
	border-left:0px solid #A59CDA;
	border-right:0px solid #A59CDA;}
	
.xb1 {
	margin:0 5px;
	background:#A59CDA;}
	
.xb2 {
	margin:0 3px;
	border-width:0 0px;}
	
.xb3 {
	margin:0 2px;}
	
.xb4 {
	height:2px;
	margin:0 1px;}

.xboxcontent {
	display:block;
	background:#A59CDA;
	border:0 solid #ccc;
	border-width:0 0px;
	width:160px;
	
	padding: 10px;
	color: #000;
 	font-family: Arial, helvetica, serif;
 	overflow:visible;
	}
	
.xboxcontent p {
	font-size: xx-small;
	text-align: justify;
	margin-top: -15px;
	}
	
.xboxcontent h4 {
	text-align: center;
	color: #305a7a;
	font-size:0.7em;
	margin-top: 3px;}
	
	
.xboxcontent h3 {
	text-align: center;
	font-size:0.9em;
	color: #000;
	margin-top: 3px;}
	
.xboxcontent h2 {
	text-align: center;
	position: relative;
	top: -15px;}
	
.xboxcontent a {
 	color: #000;
 	font-style: bolder;
 	text-decoration: none;
 }
	
.xboxcontent a:hover {
	text-decoration: none;
	color: #3392ff;
	}
	
.separation {
	width: 160px;
	border-bottom: 1px solid #666;
	margin-top: -10px;
	}







/*===============Mise en page ======================== */
		
.col-gauche
	{
	background:url(http://www.brocnrollmusic.com/images/fond/annonces_gauche.jpg);
	background-repeat: repeat-y 50% 0;
	margin-left:143px;
	width: 33px;
	height:450px;
	position: relative;
	float: left
	}

.col-milieu
	{
	overflow:auto;
	position: relative;
	height:450px;
	padding-left: 36px;
	width: 598px;
	float: left
	}

.col-droite
	{
	
	background:url(http://www.brocnrollmusic.com/images/fond/annonces_droite.jpg);
	background-repeat: repeat;
	width: 33px;
	height: 450px;
	position: relative;
	float: left
	}
	
#pied-de-page 
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color: #6b6c5a;
	text-align: center;
	letter-spacing: 6px;
	height: 16px;
	clear: left
	}
	
/* =============== MENU CATEGORIES =============== */



dl#artist dt {
  display:none;
  }
dl#artist dd {
  
  padding:0; 
  margin:0;
  
  }
a.xmenu, a.xmenu:visited {
  display:block; 
  width:5em; 
  height:3em; 
  background:#000; 
  text-decoration:none;
  font: 0.8em Arial,sans-serif; font-weight: bold;
  position: relative;
  left:70px;
  
  text-align:center; 
  color:#aaa; 
  float:left;
  }
a.xmenu span, a.xmenu:visited span {
  display:block; 
  width:3em; 
  height:0.5em; 
  border-top:0.5em solid #000; 
  border-left:1em solid #000;  
  border-right:1em solid #000; 
  border-bottom:0.5em solid #000; 
  background:#306; 
  overflow:hidden;
  }
* html a.xmenu span, * html a.xmenu:visited span {
  width:5em; 
  height:1.5em; 
  w\idth:3em; 
  he\ight:0.5em; 
  overflow:hidden;
  }
a.xmenu:hover {
  color:#FFF;
  }
a.xmenu:hover span {
  background:#f90; /* couleur bouton */
  }
  
 
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at 
all times.
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.starlightImages {padding-left:10px;}
.aBox img {border:0;}
.bBox {display:none;}

.starLight {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);}
.starLight .holder {position:fixed; width:100%; height:100%; left:0; top:0; z-index:100; text-align:center; display:table-cell; opacity:0;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

.starLight .frame {display:inline-block; margin:50px auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
border-radius:10px 10px 0 0;
}
.starLight .frame .clickLeft {position:absolute; left:15px; top:15px; right:50%; bottom:15px; background:url(trans.gif); z-index:110;}
.starLight .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; left:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:0 10px 10px 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.starLight .frame .clickLeft:hover .previous {opacity:1;}

.starLight .frame .clickRight {position:absolute; right:15px; top:15px; left:50%; bottom:15px; background:url(trans.gif); z-index:110;}
.starLight .frame .clickRight .next {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; right:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:10px 0 0 10px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.starLight .frame .clickRight:hover .next {opacity:1;}

.starLight .frame .caption {position:absolute; margin-top:-150px; left:0; right:0; padding:5px 15px; background:#fff;
border-radius: 0 0 10px 10px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.starLight .frame .caption .shadow {left:15px; right:15px; height:60px; position:absolute; bottom:5px; background:#aaa; box-shadow:0 10px 20px rgba(0,0,0,0.5); z-index:-1; border-radius: 100px/50px; }
.starLight .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;}
.starLight .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;}
.starLight .frame .caption h4 span {float:right; font-size:9px;}
.starLight .large {display:inline-block; position:relative; z-index:100; border:1px solid #888;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.starLight .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200; opacity:0;
-webkit-transition: 1s 1s;
-moz-transition: 1s 1s;
-o-transition: 1s 1s;
transition: 1s 1s;
}
.starLight .frame .close img {border:0;}

#t1:target ~ .starLight,
#t2:target ~ .starLight,
#t3:target ~ .starLight,
#t4:target ~ .starLight,
#t5:target ~ .starLight,
#t6:target ~ .starLight {left:0;}

#t1:target ~ .starLight .h1, 
#t2:target ~ .starLight .h2, 
#t3:target ~ .starLight .h3, 
#t4:target ~ .starLight .h4, 
#t5:target ~ .starLight .h5, 
#t6:target ~ .starLight .h6 
{opacity:1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

#t1:target ~ .starLight .h1 .close,
#t2:target ~ .starLight .h2 .close,
#t3:target ~ .starLight .h3 .close,
#t4:target ~ .starLight .h4 .close,
#t5:target ~ .starLight .h5 .close,
#t6:target ~ .starLight .h6 .close
{opacity:1;}

#t1:target ~ .starLight .h1 .caption,
#t2:target ~ .starLight .h2 .caption,
#t3:target ~ .starLight .h3 .caption,
#t4:target ~ .starLight .h4 .caption,
#t5:target ~ .starLight .h5 .caption,
#t6:target ~ .starLight .h6 .caption
{margin-top:10px;} 

  
  /* ========DIVERS==================*/
  
  #conteneur {
  width: 100%;
  height: 100%;
  margin-left: -80px;
  }