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

/******************************/
/*  HTML, BODY                */
/******************************/

	/* Force le scroll vertical à être présent */
	html {
		overflow-y: scroll;
		overflow: -moz-scrollbars-vertical;
	}

	/* Mise à 0 pour tous les navigateurs */
	html, body {
		padding: 0px;
		margin: 0px;
		height: 100%; /* Utile pour les sites qui doivent avoir un footer tjs en bas de page */
		background-color: #000000;
	}

	/* Couleur de fond et centrage du site */
	body {
		background-color: #000000;
		text-align: center;
	}

	/* Formatage du caractère par défaut */
	body, table {
		font-size: 14px;
		font-family: Arial, sans-serif;
		color: #FFFFFF;
	}

/******************************/
/*  STRUCTURE                 */
/******************************/

	/* position de l'entier du site */
	#Global {
		position: relative;
		margin: 0 auto; /* centre #global sur la page */
		max-width: 980px;
		-height: 100%; /* IE6: Utile pour les sites qui doivent avoir un footer tjs en bas de page */
		min-height: 100%; /* Utile pour les sites qui doivent avoir un footer tjs en bas de page */
		text-align: left; /* Annule l'alignemnt défini dans body qui centre #global */
	}

	#Contenu {
		max-width: 725px;
		-height: 710px;
		min-height: 710px;
		margin-left: 215px;
		/* Fond qui suit le menu */
				padding-bottom: 35px;
	}

	#Titre {
		max-width: 725px;
		height: 172px;
		background-image: url(design/structure/menu-line.png);
		background-color: #;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	#LogoHeader {
		background: #000;
		margin-bottom: 35px;
	}
	div#Menu {
		background: #000 url(design/structure/tco_fond_menu.jpg) repeat-y 100px;
		position: absolute;
		height: 100%;
		z-index: 100;
	}
	#Menu {
		width: 215px;
		height: 710	px;
	}
	#LangMenu {
		text-align: center;
		top: -110px;
		position: relative;
		width: auto;
		display: inline-block;
		left: 75%;
	}

	#LangMenu a {
		margin: 7px;
		color: #C9C9C9;
		text-decoration: none;
		font-family: 'Sanchez', 'Monaco', 'Lucida Console', 'Courier', 'Courier New';
		font-weight: 700;
	}
	#LangMenu a.lang_active {
		color: #AE0014;
	}

	.DernierElement {
		bottom: 0;
		margin-bottom: 0px;
	}

	#bottom {
		position: absolute;
		width: 100%;
		height: 20px;
		bottom: 0px;
		text-align: center;
	}


/******************************/
/*  CONTENU                 */
/******************************/
	#ContenuPage, #ContenuPageNoAnim {
		float: left;
		width: 470px;
		text-align: justify;
			}

	#ContenuPageFond, #ContenuPageFondNoAnim {
		width: 100%;
		/*background-image: url(design/structure/transparent.png) !important;  
		background-color: transparent !important;         
		background-image: none;                          
		background-color: #000000;                        
		filter:alpha(opacity=50);                           */
		background: rgba(0,0,0,0.7)
	}

	#ContenuPageTexte, #ContenuPageTexteNoAnim {
		position: relative;
		padding: 10px;
		width: 450px;
	}

	#SousMenuInactif {
		display: none;
	}


	/******************************/
	/*  Remise à 0                */
	/******************************/
	form, img, ul, li, h1, h2, h3, h4, p, table {
		padding: 0px;
		margin: 0px;
		border: 0px;
	}

	/* Alignement des listes à l'intérieur de la div */
	ul, li {
		margin-left: 1em;
	}

	/* Annule les définitions de float */
	.spacer {
		clear: both;
	}

	/******************************/
	/*  Titre et paragraphes       */
	/******************************/

	h1 {
		font-family: 'Sanchez', 'Monaco', 'Lucida Console', 'Courier', 'Courier New';
		font-size: 18px;
		text-transform: uppercase;
		font-weight: normal;
		color: #;
		margin-bottom: 15px;
		text-align: left;
	}

	h1#Title {
		font-family: 'Sanchez', 'Monaco', 'Lucida Console', 'Courier', 'Courier New';
		color: #FFF;
		font-size: 36px;
		text-transform: none;
		padding-top: 35px;
		display: inline-block;
		}

	#FirstPart, #SecondPart {
		position:relative;
		display: block;
		}

	#FirstPart {
	}

	#SecondPart {
		margin-top: 15px;
		margin-left: 50px;
	}

	h2 {
		font-family: "Sanchez", Monaco, "Lucida Console", Courier, "Courier New";
		font-size: 16px;
		text-transform: uppercase;
		font-weight: normal;
		margin-bottom: 15px;
		color: #;
	}

	h3 {
		font-size: 15px;
		color: #;
	}

	h4 {

	}

	h5 {

	}

	.TitreEspace {
		margin-top: 50px;
	}

	.SousTitre {
		font-size: 15px;
		color: #;
	}

	.Chapeau {
		font-family: "Sanchez", Monaco, "Lucida Console", Courier, "Courier New";
		color: #;
		font-size: 16px;
	}

	.Bienvenue {
		font-family: "Sanchez", Monaco, "Lucida Console", Courier, "Courier New";
		color: #;
		font-size: 32px;
	}

	p {
		margin-bottom: 16px;
	}

	/******************************/
	/*  Liens                 */
	/******************************/

	a, a:visited, a:active  {
		color: #;
		text-decoration: underline;
		cursor: pointer;
	}

	a:hover, a:focus {
		text-decoration: none;
		cursor: pointer;
	}

	/******************************/
	/*  SousMenu                 */
	/******************************/
	#SousMenuActif, #SousMenuActifNoAnim {
		float: right;
		width: 180px;
		border: dashed 3px #;
		font-family: Monaco, "Lucida Console", Courier, "Courier New";
		color: #;
		text-transform: uppercase;
		font-size: 17px;
		text-align: left;
		padding: 10px;
	}

	#Presse, #PresseNoAnim {
		float: right;
		width: 180px;
		border: dashed 3px #;
		font-family: Monaco, "Lucida Console", Courier, "Courier New";
		color: #;
		text-transform: uppercase;
		font-size: 17px;
		text-align: left;
		padding: 10px;
	}
	#Presse, #PresseNoAnim #ContenuPageFond h1 {
		word-wrap: break-word;
	}
	.Spectacles {
	}

	#SousMenu, #SousMenu li  {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	#SousMenu li {
		margin-bottom: 10px;
	}

	#SousMenu a, #SousMenu a:visited, #SousMenu a:active  {
		text-decoration: none;
	}

	#SousMenu a:hover, #SousMenu a:focus  {
		text-decoration: none;
		color: #CCCCCC;
	}

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

	/******************************/
	/*  Formulaires               */
	/******************************/

	input, select, textarea {
		background: #000000;
		border: dashed 1px #;
		width: 100%;
		border-collapse: collapse;
		color: #;
		padding: 3px;
		font-family: Arial, sans-serif;
		font-size: 14px;
	}

	.btnEnvoyer {
		width: 100px;
	}

	.tabFormulaire td {
		padding-bottom: 10px;
	}

	.tabFormulaire {
		width: 400px;
	}

	.FormLargeurLablel {
		width: 70px;
		text-align: right;
		vertical-align: top;
		padding-right: 7px;
	}

	/******************************/
	/*  Messages d'erreurs        */
	/******************************/
	.MessageErreur, .MessageOk, .MessageConfirm {
		padding: 5px;
		margin: 5px;
		font-weight: bold;
		font-size: 16px;
		border-style: dashed;
		border-width: 1px;
	}

	.MessageErreur a, .MessageOk a, .MessageConfirm a {
		color: #FFFFFF;
	}

	.MessageErreur {
		background-color: #EBCCCC;
		border-color: #9D0000;
		color: #9D0000;
	}

	.MessageOk {
		background-color: #CFE1CC;
		border-color: #0E6600;
		color: #0E6600;
	}

	.MessageConfirm {
		background-color: #CCCCEF;
		border-color: #0000FF;
		color: #0000FF;
	}

	.FieldError {
		background-color: #FFFF99;
		border: #990000 dotted 1px;;
	}

/******************************/
/*  PAGES                    */
/******************************/
/******************************/
/*  INTRO                    */
/******************************/
	#FlashLess #Frame2 {
		position: relative;
		overflow: hidden;
		color: #A7C7E6;
		font-family: "Sanchez", Monaco, "Lucida Console", Courier, "Courier New";
		font-size: 20px;
	}

	#FlashLess #Frame2 #Line2 {
		margin-left: 48px;
		margin-bottom: 20px;
	}

	#FlashLess #Frame2 #Line3 {
		margin-left: 48px;
		font-size: 26px;
	}

	#FlashLess #Frame2 #Line4 {
		margin-left: 85px;
		font-size: 26px;
		margin-bottom: 20px;
	}

	#FlashLess #Frame2 #Line6 {
		margin-left: 48px;
	}
	#FlashLess #Frame2 * {
		position: relative;
		display: block;
		left: -1000px;
	}


	/******************************/
	/*  Agenda                    */
	/******************************/

	.Evenement {
		cursor: pointer;
		text-decoration: none;
		text-align: left; /* JN */
	}

	.Agenda {
		border-collapse: collapse;
	}

	.Agenda a, .Agenda a:visited, .Agenda a:hover, .Agenda a:focus, .Agenda a:active {
		text-decoration: none;
	}


	.Agenda td {
		width: 100%;
		padding: 5px;
		padding-right: 15px;
		vertical-align: top;
	}

	.Agenda .VBorder {
		border-right: dashed 2px #;
		border-left: dashed 2px #;
	}

	.Agenda .BBorder {
		border-bottom: dashed 2px #;
	}

	.Agenda .Noir {
		color: #;
	}

	.Agenda .Bleu {
		color: #;
	}

	.Agenda .Mauve {
		color: #;
	}

	.Agenda .Jaune {
		color: #;
	}

	.Agenda .Azur {
		color: #;
	}

	.Agenda .Orange {
		color: #;
	}

	.Agenda .Saumon {
		color: #;
	}

	.Agenda .Vert {
		color: #;
	}

	.Agenda .Rouge {
		color: #;
	}

	.Agenda .Blanc {
		color: #;
	}

	.Evenement .Titre {
		text-transform: uppercase;
		/*font-size: 16px;/* /* JN */
		/*font-weight: bold;*/ /* JN */
		width:35%;
		margin:0; /* JN */
	}

	.Evenement .Horaire {
		text-transform: uppercase;
		/*font-size: 16px;/* /* JN */
		/*font-weight: bold;*/ /* JN */
		width:10%;
		margin:0; /* JN */
	}

	.Evenement .Lieu {
		width:25%;
		text-decoration: underline;
		padding-right: 0;
	}

	.Evenement .Date {
		font-size: 10px;
		text-transform: uppercase;
		width: 23%;
		color: #;
		margin:0; /* JN */
	}

	.Evenement .Date .Court {
		text-transform: none;
		font-size: 14px;
		color: #FFFFFF;
	}

	.Evenement .Infos {
		margin-bottom: 0px;
		width:25%;
		margin:0; /* JN */
	}

	#DetailsAgenda {
		color: #FFFFFF;
		float: right;
		width: 180px;
		border: dashed 3px #990000;
		text-align: left;
		padding: 10px;
		font-size: 15px;
	}

	#navigation-agenda {
		width:100%;
		text-decoration:underline;
	}

	.Agenda .Precedentes {
		text-align: left;
		height: 15px;
		width:32%; /* JN */
	}

	.Agenda .Aujourdhui {
		text-align: center;
		height: 15px;
		width:32%; /* JN */
	}

	.Agenda  .Suivantes {
		text-align: right;
		height: 15px;
		width:32%; /* JN */
	}

	/******************************/
	/*  Spectacles               */
	/******************************/
	.tabSpectacles {
		width: 100%;
	}

	.tabSpectacles td {
		padding-bottom: 3px;
		vertical-align: top;
		}

	.tabSpectacles .Label {
		width: 90px;
		font-weight: bold;
		padding-right: 5px;
	}

	/******************************/
	/*  En préparation           */
	/******************************/

	.NoPreparation {
		font-size: 24px;
		color: #;
		font-size: bold;
		margin: 30px;
	}

	/******************************/
	/*  Contact                   */
	/******************************/

	.Liens td {
		padding-bottom: 5px;
	}

	.Liens img {
		width: 75px;
	}

	.Liens .Lien a, .Liens  .Lien a:visited, .Liens .Lien a:active {
		color: #FFFFFF;
		padding: 3px;
		text-decoration: none;
		background: none;
		border: dashed 1px #;
		margin-left: 7px;
	}

	.Liens  .Lien a:hover, .Liens .Lien a:focus {
		color: #000000;
		background: #;
		text-decoration: none;
	}

	/******************************/
	/*  Photos                    */
	/******************************/

	.TabAlbums {
		width: 100%;
	}

	.TabAlbums td {
		padding: 10px;
	}

	.TabAlbums td.Titre {
		padding: 0px;
	}

	.TabAlbums td.Image {
		width: 50px;
	}


	.TabAlbums img {
		border: #FFFFFF solid 2px;
	}

	.GalerieHover {
		background-color: #;
		text-decoration: none;
		color: #FFFFFF;
		cursor: pointer;
	}

	.GaleriePhoto .Navigation, .GaleriePhoto .Images {
		width: 100%;
		text-align: center;
	}

	.GaleriePhoto img {
		border: #FFFFFF solid 2px;
	}

	.GaleriePhoto .Titre {
		font-weight: bold;
	}

	.GaleriePhoto .Navigation td {
		width: 33%;
		padding-bottom: 5px;
	}

	.GaleriePhoto .Images td {
		padding: 5px;
	}

	.TabGaleries {
		width: 100%;
		text-align: left;
	}

	.TabGaleries td.Image {
		width: 65px;
	}

	/*  Coupures de Presse  */

	#PresseNoAnim a, #Presse a, #PresseNoAnim a:visited, #Presse a:visited, #Presse a:focus, #PresseNoAnim a:focus {
		color: #FFFFFF;
		text-transform: none;
		font-size: 14px;
		font-family: Arial, sans-serif;
	}

	#PresseNoAnim img, #Presse img {
		width: 40px;
		border: none;
		margin-right: 7px;
		clear: both;
	}

	.CoupuresPresse td {
		padding-bottom: 10px;
	}


	/******************************/
	/*  EDITIONS                    */
	/******************************/

	.EditionsAlbums {
		width: 100%;
	}

	.EditionsAlbums td {
		padding: 10px;
	}

	.EditionsAlbums td.Image {
		width: 200px;
	}

	.EditionsAlbums td.Image img {
		max-width: 100%;
	}



/******************************/
/*  MENU                    */
/******************************/

	ul#Menu {
		width: 115px;
		margin-left: 50px;
	}

	ul#Menu li {
		list-style: none;
		text-decoration: none;
		margin: 0;
		padding: 0;
		position: relative;
	}

	ul#Menu a li {
		font-family: "Sanchez", Monaco, "Lucida Console", Courier, "Courier New";
		text-decoration: none;
		line-height: 100%;
		font-size: 18px;
		padding: 7px;
		padding-left: 12px;
		padding-right: 12px;
		border: dashed #FFF 3px;
		margin-bottom: 20px;
		background: #FFF;
	}

	ul#Menu a, ul#Menu a:visited, ul#Menu a:active {
		text-decoration: none;
		color: #000;
	}

	ul#Menu a:hover li, ul#Menu a:focus li, ul#Menu a li.Active {
		background: #000;
		color: #FFF;
		border: dashed #BFBD00 3px;
	}

	/*  Menu 1  */
	ul#Menu a li#p1, ul#Menu a:visited li#p1, ul#Menu a:active li#p1 {
		background: #A7C7E6;
		width: 92px;
		margin-left: 5px;
	}

	ul#Menu a:hover li#p1, ul#Menu a:focus li#p1, ul#Menu a li#p1.Active {
		background: #000;
	}

	/*  Menu 2  */
	ul#Menu a li#p2, ul#Menu a:visited li#p2, ul#Menu a:active li#p2 {
		background: #2C5352;
		color: #FFF;
		width: 106px;
	}

	ul#Menu a:hover li#p2, ul#Menu a:focus li#p2, ul#Menu a li#p2.Active {
		background: #000;
	}

	/*  Menu 3  */
	ul#Menu a li#p3, ul#Menu a:visited li#p3, ul#Menu a:active li#p3 {
		background: #DD7A04;
		width: 86px;
		margin-left: 10px;
	}

	ul#Menu a:hover li#p3, ul#Menu a:focus li#p3, ul#Menu a li#p3.Active {
		background: #000;
	}

	/*  Menu 4  */
	ul#Menu a li#p4, ul#Menu a:visited li#p4, ul#Menu a:active li#p4 {
		background: #FED300;
		width: 83px;
	}

	ul#Menu a:hover li#p4, ul#Menu a:focus li#p4, ul#Menu a li#p4.Active {
		background: #000;
	}

	/*  Menu 5  */
	ul#Menu a li#p5, ul#Menu a:visited li#p5, ul#Menu a:active li#p5 {
		background: #BFBD00;
		width: 80px;
		margin-left: 10px;
	}

	ul#Menu a:hover li#p5, ul#Menu a:focus li#p5, ul#Menu a li#p5.Active {
		background: #000;
	}

	/*  Menu 6  */
	ul#Menu a li#p6, ul#Menu a:visited li#p6, ul#Menu a:active li#p6 {
		background: #DB001B;
		width: 80px;
		margin-left: 5px;
	}

	ul#Menu a:hover li#p6, ul#Menu a:focus li#p6, ul#Menu a li#p6.Active {
		background: #000;
	}

	/*  Menu 7  */
	ul#Menu a li#p7, ul#Menu a:visited li#p7, ul#Menu a:active li#p7 {
		background: #F8BA87;
		width: 108px;
	}

	ul#Menu a:hover li#p7, ul#Menu a:focus li#p7, ul#Menu a li#p7.Active {
		background: #000;
	}
	#fvContenuOverlay, #fvFondOverlay {
		display: none;
	}


	/* Responsive Navigation styles begin here */

nav > input,
.nav-button {
  display: none; /* hidden on large screens */
}

/* small screens styles */
@media (orientation: portrait) {
 .nav-inner {
   position: absolute;
   width: 70vw;
   transform: translateX(-120%) translateZ(0);
   transition: transform .2s;
   will-change: transform;
  }
  /* here's goes the slide effect */
  input:checked ~ .nav-inner {
    transform: translateX(0);
  }

  /* Button deco */
  .nav-button {
    display: block;
    position: absolute;
    top: 3rem; right: 3rem;
    z-index: 1;
    height: 3.5rem; width: 3.5rem;
    background-color: transparent;
    background-image: linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    background-size: 3.5rem .9rem;
    padding: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
	#Global {
	}
  #Contenu {
	margin-left: 2%;
	max-width: 96%;
  }
  #Titre {
  	max-width: unset;
  }
  #LangMenu {
  	position: absolute;
  	top: 45px;
	right: 9rem;
	left: unset;
  }
  #ContenuPage {
  	width: 100%;
  }
  body, table {
    font-size: 2rem;
    }
    h1#Title {
     font-size: 3rem;
     }
     ul#Menu a li {
    font-size: 3rem;
    padding: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width: unset !important;
}
ul#Menu {
	width: 100%;
}
div#Menu {
    background-position-x: 53%;
    width: 50%;
}
#LogoHeader img {
	width: 100%;
height: auto;
}

/* Responsive styles begin here */

	body, table {
		font-size: 2.5em;
	}
	#Contenu {
		background-position: center 170px;
		background-size: 100%;
	}

	#ContenuPageTexte, #ContenuPageTexteNoAnim {
		padding: 2%;
		position: relative;
		width: 96%;
}

	.Chapeau, .SousTitre, h1, h2, h3, h4, h5 {
    font-size: inherit;
}
	h1 {
		font-size: 1.2em;
	}

	p {
    margin-bottom: 1.5em;
}

	#ContenuPage, #ContenuPageNoAnim {
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}

	#SousMenuActif, #SousMenuActifNoAnim, #PresseNoAnim, #DetailsAgenda {
		width: 100%;
		float: none;
		font-size: inherit;
	}

	#PresseNoAnim a, #Presse a, #PresseNoAnim a:visited, #Presse a:visited, #Presse a:focus, #PresseNoAnim a:focus  {
		font-size: 2rem;
	}

	#PresseNoAnim td {
		padding: 10px 0;
	}

	#SousMenu li {
    margin-bottom: 20px;
		font-size: 1.5em;
}

	table td {
		font-size: 2rem;
	}

	.Evenement .Date .Court {
		font-size: 2rem;
	}

	.tabFormulaire {
		width: 100%;
	}

	input, select, textarea {
		font-size: 2em;
	}
}