@import url(typo.css);
@import url(skin.css);
@import url(menu1.css);
@import url(menu2.css);

/*===| I. LAYOUT SIZE |====================================================*/

#container, #header {width: 1002px;}
#header {height:359px;}
#left-column {width: 219px;height:754px;}
#right-column {width: 624px;}
#last-column {width: 156px;}


/*	--- Important! ----------------------------------------
	#wrap-footer, #footer and .push must be the same height
	-------------------------------------------------------
*/	#wrap-footer, #footer, .push {height: 99px;}

.push	{clear: both;}

/* --- Important! -------------------------------
	The bottom margin of #wrap-container
	is the negative value of the footer's height 
	-----------------------------------------------
*/	#wrap-container {	margin: 0 auto -99px;}


/* ===| II. LAYOUT's DEFAULT ELEMENTS |=======================================*/

* {margin: 0;}

html, body {height: 100%; width: 100%;}
body {
background: url(../images/charte/bg-x.jpg) top left repeat-x;
}
ul, li{
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;}

p{	padding: 0 5px;}

#wrap-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;}
#container {
    background: url(../images/charte/cont-repeat.jpg) top left repeat-y;
	margin:0 auto;
	text-align: left;}

#left-column{
	float:left;
}
#right-column{
    background: url(../images/charte/right-col-bg.jpg) top left repeat-y;
    color: #000000;
	float:left;
}
#last-column{
	float:left;
}
#calendar{
  background: url(../images/charte/calendar.jpg) top left no-repeat;
  width: 219px;
  height: 253px;
}
#actualite{
    background: url(../images/charte/mdm.jpg) top left no-repeat;
    height: 519px;
    width: 156px;
    float: left;

}
.strong{
  font-weight: bold;
}
.ocol{
  color: #9e010c;
  font-weight: bold;
}


#promo{
    height:80px;
    width: 156px;
    float: left;
}
.index-carusel{
  width: 621px;
  height: 231px;
}
#laffiche-vertical{
  background: url(../images/charte/laffiche.jpg) top left no-repeat;
  height: 231px;
  width: 31px;
  float: left;
}
.block-carusel{
  float: left;
  width: 114px;
  margin: 0 12px;
}
#laffiche-head{
  background: url(../images/charte/diap1head.jpg) top right no-repeat;
  width: 590px;
  height: 13px;
  float:left;
}
.carusel-bg{
  background: url(../images/charte/boxes-bg.jpg) bottom right no-repeat;
  width: 590px;
  height: 218px;
  float: left;
}
#menu-left{
  background: url(../images/charte/menu.jpg) top left no-repeat;
  width: 219px;
  height: 500px;
}


#footer {
    background: url(../images/charte/footer.jpg) top left no-repeat;
	margin: 0 auto;
    width: 1002px;
	padding: 0;}

.copyright{
	padding: 17px 0 0; 
	text-align: center;}
.menuline{
  background: url(../images/charte/linerepeat.jpg) center left repeat-x;
  width: 100%;
  color:#b30022;
  margin: 5px 0;
}
.npop{
  background: url(../images/charte/news-pop.jpg) top left no-repeat;
  height:120px;
  width:300px;
}
.buttonok{
  background: url(../images/charte/ok.jpg) top left;
  width: 30px;
  height: 16px;
}
.buttonoverok{
  background: url(../images/charte/ok-over.jpg) top left;
  width: 30px;
  height: 16px;
}
.subcatbox{
  margin:5px 0 5px 80px;
  background: #ececec;

}
.menusubcolor{
  color:#4c4c4c;
  text-decoration: none;
}
.menusubcolor:hover{
  color:#b30022;
}
.mainspan{
  padding-left:30px;
  padding-right:5px;
  background:#fff;
  color:#b30022;
}
.index-par{
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 15px;
  width: 563px;
  text-align: justify;
  color: #030000;
  line-height: 24px;
}
.index-spar{
  padding-left: 25px;
  color: #9e000b;
}
.idiap{
  text-align: center;
  margin: 30px auto;
}

.ensavoir{
  color: #9e000b;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
}
.ensavoir:hover{
  color: #000000;
  text-decoration: none;
}
.colorb{
  color: #9f0009;
  font-weight: bold;
}

/* ------- SPECTACLES STYLE START --------- */
.resprodetailbox{
  width: 180px;
  height: 290px;
  float: left;
  border: 1px solid #9e000b;
  margin-top: 20px;
  margin-left:13px;
}
.resphotoproduit{
  height:100px;
  margin-top: 5px;
}
/* ------- SPECTACLES STYLE START --------- */
/* ------- SPECTACLES STYLE START --------- */
.detailimg{
  background: url(../images/charte/details.jpg) top left no-repeat;
  width: 70px;
  height: 20px;
}
.detailimg:hover{
  background: url(../images/charte/details-over.jpg) top left no-repeat;
    width: 70px;
  height: 20px;
}
.photoproduit{
  height:100px;
  margin-top: 5px;
  margin-left: 5px;
  width: 100px;
  float:left;
}
.bloc-produit{
  float: left;
  padding-left: 10px;
  width: 170px;
}
.prodetailbox{
  width: 580px;
  height: 180px;
  float: left;
  border: 1px solid #9e000b;
  margin-top: 20px;
}
.specdetail2{
  margin: 5px auto;
  color: #9e000b;
}
.detindhr{
   width:400px;
   float:left;
   padding-left:200px;
   margin-top:10px;
}
.detimgphoto{
   float:left;
   width:180px;
   height:160px;
   padding:0 10px;
}
.divdemande{
  float:left;
  padding-top:40px;
  padding-left:30px;
  padding-right:50px;
  width:54px;
}
.nereg{
   text-align:center;
   margin-top:200px;
}
.box-mail{
  color: #000000;
  text-decoration: none;
}
.box-mail:hover{
  color: #000000;
  text-decoration: underline;
}

.resuform{
  padding-left:80px;
  padding-top: 10px;
}

.pbtitle2{
  color: #000000;
  font-weight: bold;
  text-align:left;
  float: left;
  padding-top: 5px;
}
.pbtitle{
  color: #000000;
  font-weight: bold;
  text-align:left;
  float: left;
  padding-top: 5px;
  width:400px;
}
.spectail{
  clear: both;
  color: #000000;
  padding: 5px 0;

}
.spechead{
  float: left;
  color: #b30022;
  width: 60px;
}
.specdetail{
width: 45px;
height:20px;
text-align: center;

}
.color{
  color: #9f0009;
  font-weight: bold;
  text-align: center;
  width: 200px;
  border-bottom: 1px dotted #cdcdcd;
}

.spdetail{
  text-decoration: none;
}
.spdetail:hover{
  text-decoration: underline;
}
.reservas{
  margin-left:10px;
  margin-bottom:20px;
  border:1px solid #eaeaea;
  padding:17px 60px;
  width:60px;
  cursor: pointer;
  text-align: center;
  float: left;

}
.reservas-a{
  margin-left:50px;
  margin-bottom:20px;
  border:1px solid #9f0009;
  padding:20px 30px;
  width:100px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  color: #9f0009;

}
.ticketnet{
  background: url(../images/charte/altigone.jpg) top left no-repeat;
  width: 200px;
  height: 47px;
}




.evid{
  color:#9f0009;
  font-weight:bold;

}

.spechead2{
  clear: both;
  color: #b30022;
}
.spectail2{
  float: left;
  color: #000000;
  padding-left:10px;
  height: 45px;
}
.spectail3{
  color: #000000;
  padding-left:10px;
}
.partprodetailbox{
  width: 580px;
  padding-bottom: 5px;
  float: left;
  border: 1px solid #9e000b;
  margin-left: 20px;
  margin-top: 20px;
  height: auto;
}
.parbloc-produit{
  float: left;
  padding-left: 10px;
  width: 450px;
}
.parphotoproduit{
  height:100px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  width: 100px;
  float:left;
}


/* ------- SPECTACLES STYLE END --------- */
.detphoto{
  width: 624px;
  float:left;
  margin-top: 20px;
  border-bottom: 2px dotted #cbcbcb;
  text-align: center;
}
.dettitle{
  font-weight: bold;
  margin-top: 20px;
  padding: 5px;
  border-top: 2px dotted #cbcbcb;
  border-bottom: 2px dotted #cbcbcb;
}
.detdate{
  width:270px;
  float: left;
  padding: 10px 0;
  border-bottom: 2px dotted #cbcbcb ;
}
.detleft{
  width: 290px;
  padding-left: 20px;
  border-right: 2px dotted #cbcbcb;
  float: left;

}
.detright{
  width: 290px;
  padding-left: 20px;
  float: left;
}
.detadminimput{
  width: 100px;
  float: left;
}
.detadminimputhead{
  padding: 0 0px;
  float: left;
  color: #9f0009;
  width: 100px;
}
.detadminimputhead1{
  padding: 0 0px;
  float: left;
  color: #9f0009;
  width: 70px;
}
.detadminimputhead2{
  padding: 0 0px;
  float: left;
  color: #9f0009;
  width: 150px;
}
.dataadminrow{
  width:300px;
  float:left;
  padding: 5px 0;
  border-bottom: 2px dotted #cdcdcd;
}


.detdescriptif{
  margin-left: 20px;
  margin-right: 20px;
  padding: 20px 0;
}


/* ------- DETAILS STYLE START --------- */
.photoproduitdetail{
  float: left;
    width: 380px;
}
.bloc-produitdetail{
  width: 260px;
  float: right;
}
.detailline{
  width: 120px;
  color: #b30022;
  float:left;

}
.maindetail{
  width: 240px;
  padding: 10px 0;
  color: #000000;
  font-weight: bold;
  clear: both;
  border-bottom: 1px solid #ececec ;

}

/* ------- DETAILS STYLE END --------- */
.resspectail{
  width:170px;
  clear: both;

}
.resatitle{
  text-align: center;
  font-weight: bold;
  padding: 10px 0;
}
.restabcol1{
  width: 120px;
  float: left;
}
.resrowhead{
  width: 120px;
  float: left ;
  height: 25px;
}
.restabcol2{
  width: 50px;
  float: left;
    height: 25px;
}
.resrow2{
  width: 50px;
  float: left;
    height: 25px;

}
.restabcol3{
  width: 120px;
  float: left;
    height: 25px;
}
.resrow3{
  width:110px;
  float:left;
    height: 25px;
}



/* ------- FOOTER MENU STYLE START --------- */
.fmenu{
  padding-top: 40px;
  float: left;
  padding-left: 90px;
}
.ftmenu1{
    width: 51px;
    height: 19px;
}
.ftmenu1:hover{
    background: url(../images/charte/fm-accueil.jpg) center center no-repeat;
    width: 51px;
    height: 19px;
}
.ftmenu2{
    width: 90px;
    height: 19px;
}
.ftmenu2:hover{
    background: url(../images/charte/fm-devenir.jpg) center center no-repeat;
    width: 90px;
    height: 19px;
}
.ftmenu3{
    width: 70px;
    height: 16px;
}
.ftmenu3:hover{
    background: url(../images/charte/fm-reservations.jpg) center center no-repeat;
    width: 70px;
    height: 16px;
}
.ftmenu4{
    width: 56px;
    height: 16px;
}
.ftmenu4:hover{
    background: url(../images/charte/fm-theatre.jpg) center center no-repeat;
    width: 56px;
    height: 16px;
}
.ftmenu5{
    width: 77px;
    height: 16px;
}
.ftmenu5:hover{
    background: url(../images/charte/fm-infos.jpg) center center no-repeat;
    width: 77px;
    height: 16px;
}
.ftmenu6{
    width: 45px;
    height: 16px;
}
.ftmenu6:hover{
    background: url(../images/charte/fm-contact.jpg) center center no-repeat;
    width: 45px;
    height: 16px;
}
.ftmenu7{
    width: 90px;
    height: 16px;
}
.ftmenu7:hover{
    background: url(../images/charte/fm-mentions.jpg) center center no-repeat;
    width: 90px;
    height: 16px;
}


/* ------- FOOTER MENU STYLE END  --------- */



.searchstyle{
  border: 1px solid #000000;
  margin-left: 20px;
}
 .searchbtn{
  background: url(../images/charte/btn-ok.jpg) top left no-repeat;
  width: 21px;
  height: 21px;
  border: 1px solid #99172e;
  cursor: pointer;
}
 .searchbtn:hover{
  background: url(../images/charte/btn-ok-over.jpg) top left no-repeat;
  width: 21px;
  height: 21px;
  border: 1px solid #99172e;
  cursor: pointer;
}
/*	--- Important! -----------------------------------
	If you want space between paragraphs or headers, 
	use padding instead of margin.
	-------------------------------------------------*/

/* ===| III. CONTENT ELEMENTS |===============================================*/

img {border: 0;}

/*	--- Important! ----------------------------------
	Use class "left" or "right" on the html elements 
	you want to float (on the thumbs, for example)
*/	.left{float: left;} .right{float: right;}
a:focus {
   outline: none;
} 
.thumb{
	display: block;
	margin:1px 5px;}
	
.thumb img{
	border-style:solid;
	border-width: 5px;
	border-color: inherit;
	padding: 5px;
	margin: 0}

.paragraph{
	clear: both;
	display: table;}

.separator{
	width: 100%;
	height: 0px;
	clear: both;
	padding:0;
	margin:15px 0;
	border-top: 1px solid;
	border-bottom: 1px solid;
	line-height: 0px;}


/* ===| IV. NAVIGATION |===============================================*/
#menu2 ul li{display: inline;}
/* ---| THE END |------------------------- */



/*.............. CALENDAR ...........*/
.calendbig{
  float: right;
  margin-top: 30px;
}

.calendar{
    float: right;
    width: 185px;
}
.calendarHeader td{
	background-position: top;
	background-repeat: repeat-x;
	color: #000000;
	font-weight: bold;
}
.arrow1:link, .arrow1:visited{
	display: block;
	margin: 0px;
	padding: 0px;
	height: 17px;
	background: url(../images/charte/calend_arrow1.jpg) top right;
	background-repeat: no-repeat;
	cursor: pointer;
	text-decoration: none;
}
.arrow1:hover, .arrow1:active{
	background: url(../images/charte/calend_arrow1-over.jpg) top right;
	background-repeat: no-repeat;
	cursor: pointer;
	text-decoration: none;
}
.arrow2:link, .arrow2:visited{
	display: block;
	margin: 0px;
	padding: 0px;
	height: 17px;
	background-image: url(../images/charte/calend_arrow2.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	cursor: pointer;
	text-decoration: none;
}
.arrow2:hover, .arrow2:active{
	background-image: url(../images/charte/calend_arrow2-over.jpg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	cursor: pointer;
	text-decoration: none;
}
.calendarDays td{
	padding: 1px;
	text-align: center !important;
	color: #000000;
    width: 20px;
    font-weight: bold;
}
.calendarcell0{
	width: 10px !important;
	height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-align: center !important;
	background-position: top left;
	background-repeat: repeat-x;
}
.calendarcell1 {
    width: 20px;
	text-align: center;
	color: #000000;
	vertical-align: middle;
}
.calendarcell2, .calendarcell2:visited{
	margin: 0px;
	height: 20px;
    width: 20px;
	padding: 3px 3px 0 3px;
	text-align: center;
	vertical-align: bottom;
	display: block !important;
	color: #ffffff!important;
	font-weight: bold !important;
    background: #99172e;
}
.calendarcell2:hover, .calendarcell2:active{
	color: #000000 !important;
	font-weight: bold !important;
	cursor: pointer;
}
#divCalendarTxt{
	margin-left: 10px;
	display: block;
	color: #cccccc;
}

/* referencement */
.ref
{
    clear:both;
    margin:0 auto;
    text-align: center;

    width:1002px;
    margin-top:25px;
}