body {
     font: 100.01% Arial, Helvetica, sans-serif; /* this sets the overall font size and family overriding an older Opera bug */
     background: #292929; /* this creates the overall color. The drop shadowed image is placed in the #holder div */
     margin: 0; /* zeroing the margin and padding allows all browsers to start from the same place since defaults are different. */
     padding: 0;
     text-align: center; /* corrects a bug in early IE browsers allowing the overall design to center. */
}

#holder {
	background-image:url('../../images/images_site/background_black_990.jpg');
	margin: 0 auto; /* this centers the overall design */
	padding: 0 10px; /* 20px less than actual width due to padding above */
	text-align: left; /* corrects the above text-align: center; for those browsers that need it */
	position: relative; /* this gives the div positioning so that an absolutely positioned div (AP Div) can be placed within it. Otherwise, the AP Div would be placed relative to the body element (or the last positioned parent element). */
	width: 970px;

	}


/* Needed to hold link to main content in compliance with Section 508, rule o. */
#skipnav {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to its nearest postioned ancestor, or barring that, the body. Also removes it from the flow, so it will not push down the header image. */
	top: 0; /* Places the div at the top of body. */
	left: 0; /* Places the div at the left side of body. */
	margin-left: -1000px; /* Moves the div off the left side of the screen, making it invisible to those using visual browsers but accessible to those using screen readers and other user agents. */
	}

#header {
	font-family: Arial, Helvetica, sans-serif; /* sets the font-family for both the links and the header within this div */
	height: 265px; /* this padding keeps the home and contact links away from the right side of the browser window */
	margin: 0px;
}

#logo {
	width: 970px; /* this is the width of the logo image */
	height: 265px; /* This is the height of the actual logo image from the comp (not sliced in half) */
	position: absolute; /* the top starts at the very top of the parent element */
	left: 10px; /* this starts the logo image 10px from the left of the parent element, creating some visual space */
}


#colonneGauche {
	background-color:#F00;
	width: 225px;
	height: 600px;
	margin: 60px 0px 0px 0px;
	float: left;
	position: absolute;
	display: none;
}


#content {
	margin: 0px 0px 0px 225px;
	border-left: 1px dashed #808080;
	padding: 0px 0px 25px 25px;
	display: inline;
	width: 530px;
	
}


/* The following selectors are styling for the content div's headings, paragraphs and links. If sIFR is used for the headings, make sure any padded added to these selectors is also added to the sIFR replacement calls in the body. */
#content h1, #content h2, #content h3, #content h4 {
	font: normal 1.20em "Gill Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #999999;
	margin: 0px;
	padding: 0px;
}

#content h1 {
	color: #FFFFFF;
	font-size: 2em;
	margin:0px;
}


#content .spectacle {
	margin:0px 0px 35px 0px;
	padding:15px 10px 0px 15px;
	border-top:1px dashed #808080;
	border-right:1px dashed #808080;
	width: 540px;
}

#content .spectacle img {
	margin:0px 10px 0px 0px;
	padding:0px;
	text-align: left;
}


#content .enTeteSpectacle {
	display: block;
	float: left;
	width: 100%;
}


#content h1#TitreTransfert {
	color: #FFFFFF;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	display: block;
	font-size: 1.5em;
}

#content h1#TitreActu {
	color: #FFFFFF;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	display: block;
}

#content h1#TitreTheatre {
	color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	display: block;
	width: 99%;
}

#content h1#TitreDanse {
	color: #FFFFFF;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	display: block;
}

#content h1#TitreMusique {
	color: #FFFFFF;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	display: block;
}

#content h1#TitreOpera {
	color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	display: block;
}

/****** *******/
#content h1.TitreTransfert {
	color: #FFFFFF;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	display: block;
	font-size: 1.5em;
}

#content h1.TitreActu {
	color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	display: block;
}

#content h1.TitreTheatre {
	color: #FFF;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	display: block;
	width: 99%;
}

#content h1.TitreDanse {
	color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	display: block;
}

#content h1.TitreMusique {
	color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	display: block;
}

#content h1.TitreOpera {
	color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	display: block;
}


/****** *******/
#content h4 {
	color: #FFFFFF;
	font-size: 2em;
	margin:0px;
}

#content h5 {
	font: normal 1.0em "Gill Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #7597DD;
}

#content p {
	color: #CCC;
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
}

#content p.EntetetexteConditions {
	color: #999999;
	font-size: 0.8em;
	font-weight:bold;
}

#content p.texteConditions {
	color: #FFFFFF;
	font-size: 0.8em;
}

#content .textResumeAlert {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FF6600;
	font-size: 12px;
	margin: 0;
	font-style: oblique;
  }

#content p#acheter {
	color: #CCCCCC;
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
}

#content .link {
	font: 1.25em Arial, Helvetica, sans-serif;
}
#content a:link, #content a:visited {
	color: #CBED00;
	text-decoration: underline;
}
#content a:hover, #content a:active, #content a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}

/* the below styles the button area next to the icon */

#content .lienPhoto{
	margin:10px 0px 10px 0px !important;
	padding:0px !important;
	display: block;
	border-bottom: 1px solid #444444;
	border-left: 1px solid #444444;
	border-right: 1px solid #222222;
	border-top: 1px solid #222222;
	background-color: #849B00;
}

#content .lienPhoto ul,li{
	list-style:none;
	margin: 0px;
	padding: 0px;
}
#content .lienPhoto li a:link, #content .lienPhoto li a:visited {
	display:block;
	font-weight:bold;
	color:#CBED00 !important;
	text-decoration: none !important;
	font-size: 0.8em;
	background: url(../../images/images_site/photosdescene_voir_photo.gif) no-repeat left center;
	text-indent:45px;
	text-transform:uppercase;
	line-height:18px;
	height: 18px;
}

.photoBouton {
	margin: 0px;
	padding: 0px;
	width: 100%;
	float: right;
	height: 30px;
}

/* Bouton normal */
a.galerie {
	background: transparent url('../../images/images_site/Bouton_voir_photo_right.gif') no-repeat scroll top right;
	display: block;
	float: right;
	height: 30px;
	padding-right: 35px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	text-decoration: none !important;
	color: #CBED00 !important;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin: 0px 0px 0px 0px;
	text-transform:uppercase;
}

a.galerie span {
	background: transparent url('../../images/images_site/Bouton_voir_photo_left.gif') no-repeat;
	display: block;
	line-height: 30px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 0px 20px 0px 20px;
	margin:0px 0px 10px 0px;
} 

a.galerie:hover span{
    text-decoration:underline;
}

/* Les Couleurs des Titres d'Info H2 par rubrique*/
#content h2#actualite {
	color: #FFA200;
	font-size: 1.35em;
}

#content h2.actualite {
	color: #FFA200;
	font-size: 1.35em;
}

#content h2#theatre {
	color: #FF4000;
	font-size: 1.35em;
	display: block;
	float: left;
	width: 100%;
}

#content h2.theatre {
	color: #FF4000;
	font-size: 1.35em;
	display: block;
	float: left;
	width: 100%;
}

#content h2#danse {
	color: #FF66CC;
	font-size: 1.35em;
}

#content h2.danse {
	color: #FF66CC;
	font-size: 1.35em;
	float: left;
	display: block;
	width: 100%;
}

#content h2#musique {
	color: #3399CC;
	font-size: 1.35em;
}

#content h2.musique {
	color: #3399CC;
	font-size: 1.35em;
}

#content h2#opera {
	color: #36CCCC;
	font-size: 1.35em;
}

#content h2.opera {
	color: #36CCCC;
	font-size: 1.35em;
}

#content h2#acheter {
	color: #9F9F35;
	font-size: 1.35em;
}

#content h2.acheter {
	color: #9F9F35;
	font-size: 1.35em;
}

/* Les Couleurs des Titres d'Info H5 par rubrique*/
#content h5#actualite {
	color: #FFA200;
}

#content h5.actualite {
	color: #FFA200;
}

#content h5#theatre {
	color: #FF4000;
}

#content h5.theatre {
	color: #FF4000;
}


#content h5#danse {
	color: #FF66CC;
}

#content h5.danse {
	color: #FF66CC;
}

#content h5#musique {
	color: #3399CC;
}

#content h5.musique {
	color: #3399CC;
}


#content h5#opera {
	color: #36CCCC;
}

#content h5.opera {
	color: #36CCCC;
}



/*Div photographe*/
#content #photographe{
	padding: 0px;
	margin: 10px 0px 10px 0px;
	/*border-bottom:1px dashed #808080;*/
	/*border-left:1px dashed #808080;*/
}

#content #photographe h1{
	padding: 0px;
	margin: 0px;
	font-size: 0.9em;
	font-weight: normal;
	color: #666666;
}
#content #photographe h2{
	font-size: 0.7em;
	padding: 0px;
	margin: 0px;
	font-style: italic;
	color: #666666;
	font-weight: bold;
}

.photographe{
	font-size: 1.1em;
	padding: 0px;
	margin: 0px;
	font-style: italic;
	color: #FFFFFF;
	font-weight: bold;
}


/*UN SPETACLE*/
.vignSpectacle{
	margin: 0px 10px 0px 0px;
	width: 72px;
}


/* The following selectors control the sidebar/navigational area */

#sidebar {
	float: right; /* the navigation is floated to the left so that it can be any length. If it were an AP Div, it would be "out of the flow" of the document and could flow off the bottom edge of the page */
	width: 180px;
	padding: 0px;
	margin: 60px 0px 0px 0px;
	border-left:1px dashed #808080;
	border-top:1px dashed #808080;
	display: block;
}

#sidebar h2 {
	font: normal 1.1em "Gill Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; /* sets the weight, font-family and size */
	color: #fff; /* text color of the headings */
	background: #FECF80 url("../images/images_site/sidehead_black.jpg") repeat-y; /* This creates the gradient background of the heading */
	padding: 0px; /* this keeps the text away from the inner edges of the box we've created. These values MUST be mirrored in your sIFR replacement calls in the body */
	margin: 0px; /* this controls the outer edge placement which keeps the heading box away from other elements */
}

/* the following selectors create the button look using an unordered list */
ul#nav {
	padding: 0 !important; /* begins with the usual zeroing of padding and margin to create a level playing field */
	margin: 0px 0px 0px 0px;
	list-style: none; /* removes the list marker from the navigation */
}
#nav li {
	padding-left: 0px; /* width of the little icons */
	margin-left: 0px; /* clears the left side evenly all the way down */
	font: .8em/100% Arial, Helvetica, sans-serif;
}


#pub {
	background-color: #000000;
	padding:0px;
	border-bottom:1px dashed #808080;
	border-right:1px dashed #808080;
}

#pub p {
	color:#999999;
	text-align: center;
	font-size: 0.8em;
}

/* the following selectors create the button look using an unordered list */
ul#listeSeancePhoto {
	list-style: none; /* removes the list marker from the navigation */
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
#listeSeancePhoto li {
	color: #CCCCCC;
	font-weight: normal;
	font-family: Verdana;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	text-align: center;
	font-style: normal;
	font-size: 0.7em;
}

#listeSeancePhoto li a:link, #listeSeancePhoto li a:visited {
	color:#ffffff;
	font-weight:bold;
	text-decoration:underline;
}


/* the following selectors create the button look using an unordered list */
ul#listeAcheter {
	list-style: square; /* removes the list marker from the navigation */
	margin: -10px 0px -8px 20px;
	padding: 0px;
}
#listeAcheter li {
	color: #9F9F35;
	font-weight: normal;
	font-size: 12px;
	font-family: Verdana;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}



/* the below styles the button area next to the icon */
#nav li a:link, #nav li a:visited {
	display: block;
	height:30px;
	line-height:30px; /* this is the text color */
	text-decoration:none;
	text-indent:10px;
	border-left: 1px solid #303030;
	border-bottom: 1px solid #303030;
	font-weight:bold;
	text-align: right;
	padding: 0px 15px 0px 0px;

}

/* each list item has a unique ID to place its own icon into the button */
#nav li#actualite a:link, #nav li#actualite a:visited {
	color:#000000;
	background-color:#FFA200;
}

#nav li#theatre a:link, #nav li#theatre a:visited {
	color:#000000;
	background-color:#FF4000;
}
#nav li#musique a:link, #nav li#musique a:visited {
	color:#000000;
	background-color:#3399CC;
}
#nav li#opera a:link, #nav li#opera a:visited {
	color:#000000;
	background-color:#36CCCC;
}

#nav li#danse a:link, #nav li#danse a:visited {
	color:#000000;
	background-color:#FF66CC;
}
#nav li#black a:link, #nav li#black a:visited {
	color:#000000;
	background-color:#000000;
}
#nav li#acheter a:link, #nav li#acheter a:visited {
	color:#9F9F35;
	font-size: 0.8em;
}
#nav li#votre a:link, #nav li#votre a:visited {
	color:#9F9F35;
	font-size: 0.8em;
}

#nav li#seancephoto a:link, #nav li#seancephoto a:visited {
	color:#000000;
	background-color:#000000;
}


/* hide holly hack from IE Mac \*/
* html #nav li a { 
	height: 1%;
	vertical-align: bottom;
} /* Holly Hack to get around a lovely IE issue with list items and a elements set to block */

#nav li a:hover, #nav li a:active, #nav li a:focus {
	
	color: #FFFFFF !important; 
	border-left: 1px solid #303030;
	border-bottom: 1px solid #303030;
	text-decoration:underline;
}

/* the following selectors create the photo/info teaser area below the navigation */
#features {
	margin: 0px 0px 0px 0px; /* this keeps the div away from the UL above (space as you like) and the same distance from the left side as well */
	padding-bottom: 0px; /* this creates a little space before the decorative border */
	border-bottom:1px dashed #808080;
	border-right:1px dashed #808080;
}

/* Don't show to IE Mac \*/
* html #features {height: 1%;}
/* Close the show only to IE PC Holly Hack (Place no comments inside the hack or it will close) */

#features h2 {
	margin-left: 0; /*this overrides the left margin if an h2 element is within the features div -- features is already over 20px from the left margin and we don't want space within that div. We want the h2 element to go all the way across */
}

#features p {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif; /* font size/line height and font-family */
	margin: 20px 2px 10px 8px; /* this created extra space between each paragraph element (with floated image) */
	color:#FFFFFF;
}

/* the next two selectors simply create the black bottom of the page */
#bottom {
	background: #292929; /* this created the black color that runs all the way across the page background */
}
#pagebott {
	width: 970px; /* must equal the same width as your overall #holder div to match exactly -- remember to count padding and/or borders for each as well */
	background-image:url(../../images/images_site/background_black_bas_2009.jpg);
	background-repeat:no-repeat;
	margin: 0 auto;
	padding: 0 10px;
	border-top: 1px dashed #808080;
	height: 50px;
}
#pagebott p {
	margin: 0;
	text-align: center; /* center aligns the text */
	font-size: 0.65em; /* choose a font size slightly smaller than your main page for best results */
	color: #999999; /* choose a color without as much contrast as your main page so that this doesn't jump out */
	padding: 10px 0px 0px 0px; /* creates a small amount of space */
	letter-spacing: 0.06em; /* if this causes problems in any browsers, simply remove it */
}
/* creates the link and hover styling for the pagebott area */
#pagebott a:link, #pagebott a:visited {
	color: #CCCCCC;
	text-decoration: underline;
}
#pagebott a:hover, #pagebott a:active, #pagebott a:focus {
	color: #CCCCCC;
	text-decoration: none;
}




/* these float styles can be used to float images with text next to them */
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.brclear { /* Use a break with this class to clear float containers on both sides */
	clear:both;
	height:0;
	margin:0;
	line-height: 0;
	padding: 0;
} 
.clearrt { /* Use a break with this class to clear float containers only on the right */ 
clear:right; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
} 


/*///////////////////////////////LES MENTIONS LEGALES///////////////////////////*/
#mention {
	margin: 40px auto 0 50px;
	width: 350px;
	font: 100.01% Verdana, Arial, Helvetica, sans-serif;
	background-color:#292929;
	color: #FFFFFF;
	text-align: left;
	padding: 5px;
}

#mention p.leTitre{
	font-size: 120%;
	line-height:110%;
	color: #99CC33;
	font-weight: normal;
}

#mentionTexte{
	margin: 0 0 0 0;
	padding: 0;
	font-size: 80%;
	line-height:110%;
	color: #CCCCCC;
	width: 350px;
}

#mentionTexte p.TitreMentions{
	margin: 30px 0 0 0;
	padding: 0;
	font-size: 120%;
	line-height:110%;
	color: #FF9900;
	font-weight: bold;
}

#mentionTexte p.sousTitreMentions{
	margin: 20px 0 0 0;
	padding: 0;
	font-size: 80%;
	line-height:110%;
	color: #BF8952;
}

#mention .link { /* creates the larger Learn More link at the bottom of the page */
	font: 1.25em "Gill Sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#mention a:link, #content a:visited {
	text-decoration: underline;
}
#mention a:hover, #content a:active, #content a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}





/*///////////////////////////////LE TEXTE///////////////////////////*/

.sousTitreUneInfo{
	font-size: 0.7em;
	font-style: italic;
}
.LieuDateUneInfo {
	font-size: 0.7em;
	font-weight: normal;
}


/*Pour chaque rubrique la couleur*/

.sousTitreUneInfo#actualite{
	color: #FFC159;
}

.sousTitreUneInfo#theatre{
	color: #FF784A;
}

.sousTitreUneInfo#danse{
	color: #FFC1EB;
}

.sousTitreUneInfo#musique{
	color: #6BB6DA;
}

.sousTitreUneInfo#opera{
	color: #8AE1E1;
}

/*LA FICHE*/

.lestitredesousrubrique {
	color: #999;
	font-weight: bold;
	text-transform:uppercase;
	border-bottom:1px solid #666;
}


.lesnoms {
	color: #FFFFFF;
	font-weight: bold;
}

.textResume {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #CCCCCC;
	font-size: 12px;
	margin: 0;
	font-style: oblique;
  }



.Style12 {color: #FF66CC; font-weight: bold; font-size: 1em; }
.Style15 {color: #FF6633; font-size: 0.8em; font-weight: bold; }
.Style25 {
	font-size: 0.7em;
	font-style: italic;
}

.texteAlerteCompagnie {
	color: #FFA200;
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
}