/***** 
 * Less css functions 
 * 
 */

.marpad (@width: 0) {
    padding: @width;
    margin: @width; 
}

.wh (@width: 100%) {
    width: @width;
    height: @width;
}

.absolute (@zindex: 10) {
	position:absolute;
	display:block;
	z-index: @zindex;
}

.relative (@zindex: 10) {
	position:relative;
	display:block;
	z-index: @zindex;
}

.fixed (@zindex: 10) {
	position:fixed;
	display:block;
	z-index: @zindex;
}

.fright {
	display:block;
	float:right;
}

.fleft {
	display:block;
	float:left;
}

.border-radius (@radius: 4px) {
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.hand {
	cursor: pointer;
	cursor: hand;
}

.no-hand {
	cursor: default;
}

.sq(@side) {
	width:@side;
	height:@side;
	display:block;
}

.no-outline {
	outline:none;
    border:none;
    -moz-outline:none;
    -webkit-outline:none;
}

.bold {
	font-weight:bold;
}

.capital {
	text-transform: capitalize;
}

.upper {
	text-transform: uppercase;
}

.lower {
	text-transform: lowercase;
}

.black {
	color: #000 !important;
}

.hidden {
	display: none;
}

::selection {
        background-color: @lightRed; /* Safari */
		
	}
::-moz-selection {
	background-color: @lightRed; /* Firefox */
}

.bg-white {
	background-color: white;
	
	::selection {
        background-color: @lightRed; /* Safari */
		color: white;
        }
	::-moz-selection {
        background-color: @lightRed; /* Firefox */
		color: white;
	}
}

.bg-light-gray {
	background-color: @bg-light-grey ;
}

.bg-dark-gray {
	background-color: @bg-dark-grey;
}

.underline {
	text-decoration: underline;
}

.ul {
	.marpad;
	list-style: none;
	list-style-type: none;
	
	li {
		.marpad;
		display:block;
	}
}

.opacity(@val: 0.5) {
	@ie-val: @val * 100;
	opacity:@val;
	-moz-opacity:@val;
	filter: ~"alpha(opacity=@{ie-val})";
}

.pre-wrap {
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

/* ********************************* HTML5 */
section, nav, article, footer, header {
	display:block;
	.marpad;
	position:relative;
}

/* ********************************** CSS par defaut */
html {
    .marpad;
}

body {
    .marpad;
    font-size: 11px;
	font-family: 'Arial';
	color:#FFF;
	background-color: @bg-color;
	
	&.res-w1200 {  /* window is less then 1200px */
	
		#site {
			min-width: 960px;
			overflow: hidden; /* make the degrad has no effect on scroll */
		}
	
		#header {
			width: 960px;
			
			#header-social {
				width: 322px;
				
				div.header-search { 
					width: 290px; right: -310px;
					
					div.input-text { width: 190px; input.text { width: 120px;}}
				}
			}
		}
		
		#home-slider-wrap {
			min-width: 960px;
			
			.center-wrap {
				width: 960px;
			}
			
			div.nav-wrap div.btn-wrap.less span {
				display: none;
			}
		}
		
		#home-cal-wrap {
			#cal-wrap {
				width:915px;
			}
		}
		
		div.promo.affiche {
			ul{
				width: 960px;
				
				li {
					&:first-child { margin-left: 10px;}
					margin-left: 40px;
					&.last {display:none;}
				}
			}
		}
		
		#main {
			width: 960px;
			
			&.cols { 
				margin-top: 75px;
				div.side-fix {
					.absolute(45);
					
					div.side-cont {
						.absolute;
						
						&.end-y {
							h1 {
								display:none !important;
							}
						}
						 &.follow-y {  
							h1 {
								display:none !important;
							}
						}
					}
					
					a.side-action {
						display: inline-block;
					}
					
				}
				
				&.prog, &.prog-list {
					div.side div.form {
						label, a.cat img {
							display:none;
						}
						
						input.text {width: 210px;}
						.sbContainer {
							.sbSelector {width: 215px;}
							.sbToggle {background-position: 210px center;}
							.sbOptions {width: 223px;}
						}
					}
					
					.tag-help{
						padding-right: 10px;
					}
					hr {width: 225px !important;}
				} 
			}
			
			&.prog, &.prog-list,  &.fiche {
				h2:first-child {
					margin-left: 45px !important;
				} 
				
				.sbContainer.input-month {
					margin-left: 40px;
				}
			}
			&.tickets {
				h2 { margin-left: 45px !important;}
				/*div.main-content {min-height: 300px;   }*/ /* élimine hauteur min forcer pour égaler colonne*/
			}
			&.monument {
				#tab-monument, #tab-services, #tab-contact {h2 {margin-left: 45px !important;}}
			}
		}
		
		#footer {
			margin: 0 auto;
			
			div.footer-center-wrap {
				width: 960px;
				/*margin: 0 auto -3px auto;*/
			}
			
			#footer-adresse-title { width: 960px; }
			
			#footer-map {
				.box-shadow(0px, 0px, 0px, @light-grey);
				width: 960px;
				display: block;
				
				img {width: 940px;}
			}
			
			#footer-social {
				position: relative;
				width: 940px;
				
				div.footer-share { width: 280px; display: inline-block;}
				div.footer-twiter {
					margin-left: 0px; 
					display: inline-block; 
					vertical-align: top; 
					width: 660px;
					ul { 
						border-bottom: 1px solid white;
						display: inline-block; 
						margin-left: 30px; 
						vertical-align: top;
						
						li.last {display: block;}
						
					} 
				}
			}
			
			div.bg-dark-gray{
				min-width: 960px;
			}
			
			#copyright {
				width: 960px;
			}
		}
	}
	
	&.en {
		
		#home-slider-wrap div.nav-wrap div.btn-wrap.more {
			vertical-align: middle;
			line-height: 22px;
		}
		
		#main.rent-room {
			h1 {font-size: 25px; padding-bottom: 9px;}
		}
		
		
		div#main.tickets {
			h1 {font-size: 36px;}
			div.side dl.horraire {
				dt {min-width: 110px;}
				dd {min-width: 130px; span{min-width: 130px;}}
			}
		}
		
		dl.horraire {
			dt {width: 300px;}
			dd {min-width: 150px; span{min-width: 150px;} }
		}
		
		#main.monument.cols {
			h1 {font-size: 32px; }
		}
	}
}

p, .p {
	margin: 10px 0;
	padding: 0;
	/*font-size: 12px;*/
}

p:first {
	margin: 0 0 10px 0;
}

a {
	.no-outline;
	color: #fff;
}

a:visited {
	text-decoration:none;
}

a, a:hover, a:visited, a:active { 
    text-decoration:none;
    .no-outline;
}

a:focus {
   .no-outline;
}

*, *:focus {
	.no-outline;
}

a img {
	border:none;
}

ul {
	.ul;
}

hr {
	border-top: 1px solid black; 
	background-color: #1f1e1d;
	height: 1px;
	width: 100%;
	margin-bottom: 30px;
}

h1, h2, h3, h4, h5 {
	font-weight:normal
}

.clear {
	clear:both;
}
/* ********************************** CSS SPRITES */

.spr-graphics {
	background-image: url(/assets/img/sprites/spr-graphics.png);
	background-repeat: no-repeat;
}

.spr-boutons {
	background-image: url(/assets/img/sprites/spr-boutons.gif);
	background-repeat: no-repeat;
}

.spr-boutons-social(@pos) {
	.spr-boutons;
	background-position: -126+@pos*-32px -32px;
}

.spr-form {
	background-image: url(/assets/img/sprites/spr-form-item.png);
	background-repeat: no-repeat;
}

.spr-social-share(@pos) {
	background-image: url(/assets/img/sprites/spr-social-share.png);
	background-repeat: x-repeat;
	background-position: 0px @pos*-46px;
}

/* ********************************* COLORS */

@bg-color: 				#141312;
@bg-light-grey: 		#cdccc6;
@lightRed: 				#e33a2c;
@darkRed: 				#BB2D22;
@textRed: 				#E3382E;
@darkGrey: 				#9A9997;
@bg-dark-grey: 			#282828;
@light-grey: 			#c4c4c4;
@grey: 					#666666;
@footer-social: 		#dadada;
@bg-home-slider-hover:	#E43A2D;
@bg-subnav-hover: 		#e2e2e2;


/* ********************************* FONTS */

@f-TradeGothicLT: 'TradeGothicLTBoldRegular' ;
@Georgia: Georgia, Serif ;
@f-FarnhamdisplayBolditalosf : 'FarnhamDisplayBoldItalOSF';
@f-FarnhamDisplayMediumItalOSF : 'FarnhamDisplayMediumItalOSF';
@Arial: Arial, Helvetica, sans-serif;


/* ********************************** CSS HEADER */

#pub {
	position: relative;
	z-index: 10000;
	width: 350px;
	margin: 0px auto 0px auto;
	padding: 20px 0px 20px 0px;
	width: 728px; height: 90px;
	a {
		img{width: 728px; height: 90px; border: 1px solid @darkGrey; }
	}
}

#header {
	position: relative;
	z-index: 900;
	margin: 0 auto 0px auto;
	padding: 7px 0 0px 0;
	width: 1200px;
	height: 83px;
	overflow: visible;
	
	a { color: white; }
	
	h1, h2 {
		.fleft;
		margin: 5px 10px 0px 0px;
		height: 73px;
		width: 58px;
		.spr-graphics;
		
		span {display: none;}
	}
	
	div.left {
		.fleft;
	}
	
	div.right {
		.fright;
	}
	
	#header-info {
	
		a.title {
			display: inline-block;
			height: 28px;
			width: 170px;
			.spr-graphics;
			background-position: 0px -72px;
			margin-right: 19px;
			span {display: none;}
		}
		
		span.lang {.capital;}
		
		span {
			display: inline-block;
			border-left: 1px solid white;
			padding: 2px 14px;
			margin-top: 7px;
			vertical-align: top;
		}
	}
	 
	#header-menu {
		
		margin-top: 3px;
		
		font-size: 15px;
		.upper;
		font-family : @f-TradeGothicLT;
		overflow: visible;
		
		@padding-side: 10px;
		
		ul.main-nav li {
			display: inline-block;
		 	vertical-align: top;
		 	position:relative;
			overflow: visible;
			
			a {
				background-color: @lightRed;
				display: block;
				vertical-align: middle;
				height: 32px;
				overflow: hidden;
				position: relative;
				
				div { height: 22px; padding: 7px @padding-side 3px @padding-side;  position: relative; }
				
				div.underline {
					position: absolute;
					bottom: 5px;
					left: @padding-side;
					right: @padding-side;
					background-color:white; 
					display: none; 
					height: 2px; 
					.marpad;
				}
				
				&.current div.underline { display: block;  }
				
				div.hover {
					.bg-white; 
					position: absolute; 
					height: 22px; 
					top: -33px; 
					left: 0px; 
					right: 0px; 
					bottom: 33px; 
					padding: 7px @padding-side 3px @padding-side; 
				}
				
				&.border {
					.spr-boutons;
					background-position: -586px -32px;
					
					div.hover {
						.spr-boutons;
						background-position: -586px 0px;
					}
				}
				
				&.bg-white {
					background-color: white;
					color: @lightRed;
					
					div.hover {
						background-color: @lightRed;
						color: white;
						div.underline { background-color: white; }
					}
					 
					div.underline { background-color: @lightRed; }
				}
			}
			
			a.index {
				.spr-boutons;
				padding: 0px;
				background-position: 0px -32px;
				width: 59px;
				height: 32px;
			}
			
			div.sub-nav {
				width: 400%;
				position: absolute;
				top: 32px;
				left: 0px;
				overflow: hidden;
				
				ul {
					.fleft;
					margin-top: -500px;
					background-color: white;
					
					li {
						white-space:nowrap;
						display: block;
						&:first-child {padding-top: 0px; margin-top: 0px;}
					}
				
				a { padding: 5px 10px; display: block; font-size: 14px; color: @lightRed; background-color: transparent; height: auto; 
					&:hover {text-decoration: underline; background-color: @bg-subnav-hover;  }
					}
				}
			}
		 }
	}

	#header-social {
		letter-spacing: 2px;
		line-height: 8px;
		position: relative;
		margin-top: 34px;
		width: 395px;
		overflow: hidden;
		ul {
			float: right;
			li { display: inline-block; width: 32px;}
		}
		
		li.title { 
			vertical-align: top;
			background-color: @darkRed;
			padding: 7px;
			text-align:	right;
			height: 18px;
			font-size: 10px;
			font-family: @f-TradeGothicLT;
			font-weight: 150%;
			line-height: 9px;
			letter-spacing: 1px;
			.upper;
			width: 42px;
			
			.pre-wrap;
		}
		
		a {
			.marpad;
			display: block;
			width: 32px;
			height: 32px; 
		
			&.facebook {.spr-boutons-social(0);}
			
			&.twiter {.spr-boutons-social(1);}
			
			&.flickr {.spr-boutons-social(2);}
			
			&.youtube {.spr-boutons-social(3);}
			
			&.rss {.spr-boutons-social(4);}
			
			&.email {.spr-boutons-social(5);}
			
			&.search {.spr-boutons; background-position: -60px -64px; position: relative; z-index: 80;}
		}
		
		div.header-search {
			position: absolute;
			z-index: 40;
			top: 0px;
			right: -395px;
			height: 32px;
			width: 363px;
			
			input.submit {
				background-color: @lightRed;
				width: 100px;
				.upper;
				border: none;
				color: white;
				font-size: 14px;
				font-family: @f-TradeGothicLT ;
				height: 32px;
				vertical-align: top;
				.hand;
				&:hover {
					background-color:@darkRed;
				}
			}
			
			div.input-text {
				display: inline-block;
				width: 263px;
				background-position: 0px -33px;
				font-family: 'Times New Roman';
				font-size: 12px;
				.spr-form;
				border-radius: 0px 0px 0px 2px;
				position: relative;
				height: 32px;
				&.focus{ 
					background-position: 0px 0px;
				} 
				
				label {
					margin: 12px 5px 7px 5px;
					margin-top: 13px\9;/* target ie8 only */
					text-decoration: italic;
					color: black;
					letter-spacing: 0px;
					font-style: italic;
					display: inline-block;
					/*height: 15px;*/
				}
				
				&.error {
					label { color: @lightRed;}
				}
				
				input.text {
					width: 185px;
					background-color: transparent;
					font-family: 'Times New Roman';
					font-size: 12px;
					
					vertical-align: top;
					padding-top: 5px; 
					padding-top: 9px\9; /* target ie8 only */
					height: 24px;
				}
			}
		}
	}


}

div.img-download {display: inline-block; vertical-align: middle; width: 45px; height: 43px; .spr-graphics; background-position: -100px -100px ;}
div.img-download-small {display: inline-block; vertical-align: middle; width: 25px; height: 25px; .spr-graphics; background-position: -149px -108px ;}
div.img-share {display: inline-block; vertical-align: middle; width: 18px; height: 21px; background-image: url('/assets/img/share.png'); margin-right: 10px;}
div.img-f-btn {display: inline-block; width: 32px; height: 32px; .spr-boutons-social(0); }
.img-blank {
	padding-right: 16px;
	background-image: url(/assets/img/link-browser.png);
	background-repeat: no-repeat;
	background-position: right 3px;
}

.img-billeterie(@x) {
	.spr-graphics; 
	background-position: @x -145px;
	width: 74px;
	height: 72px;
	float: left;
	margin-right: 10px;
}

div.img-mouse {.img-billeterie(0px); width: 71px;}
div.img-guichet {.img-billeterie(-71px); }
div.img-big-phone {.img-billeterie(-144px);}
div.img-no-extra {
	.spr-graphics;
	background-position: 0px -100px;
	width: 33px;
	height: 32px;
	margin-top: 12px;
	display: inline-block;
}

.btn-footer {
	display: inline-block;
	.spr-form;
	background-position: -264px 1px;
	height: 35px;
	width: 101px;
	color: white;
	font-size: 15px;
	font-family: @f-TradeGothicLT;
	.upper;
	
	
	&:hover {
		background-position: -264px -33px;
	}
}

a.btn-footer {
	margin: 0px auto;
	line-height: 35px;
	vertical-align: middle;
	text-align: center;
}
/* ********************************** CSS MAIN */

@main-width: 1200px;
@main-nav-width: 246px;
@main-nav-pad: 5px;
@main-content-pad: 10px;

#main {
	position:relative;
	z-index: 800;
	width: @main-width;
	margin: 50px auto 0 auto;
	
	background-color: @bg-color;
	
	/* main-content with no colone inside */
	div.main-content {
		padding: 10px;
		position: relative;
		 
		div.slidder { 
			img {width: 100%; height: 464px;} 
		}
		
		strong { color: @lightRed; font-weight: normal;}
	}
	
	h1 {
			.marpad;
			padding: 5px 10px;
			border-bottom: 1px solid #e85e53;
			.upper;
			font-family: @f-TradeGothicLT;
			font-size: 30px;
			height: 34px;
			font-weight: normal;
			
				&::selection {
					background-color: white; /* Safari */
					color: @lightRed;
				}
				&::-moz-selection {
					background-color: white; /* Firefox */
					color: @lightRed;
				}
			
		}
	
	/* wrapper for colone inside main-content */
	&.cols {
		background-color: transparent;
		color: #333333;
		margin-bottom: 30px;
		
		
		 
		div.side {
			vertical-align: top;
			display: inline-block;
			width: @main-nav-width;
			background-color: @lightRed;
			color: white;
			.marpad;
			a {color: white; &:hover {text-decoration: underline;}}
			ul.nav{
				font-size: 14px;
				.upper;
				font-family: @f-TradeGothicLT;
				
				li {
					border-bottom: 1px solid #e85e53;
					&.current { 
						background-color: white; 
						a {color: @lightRed;}
					}
					&:last-child{border-bottom: 0px;}
					
					a {
						padding: 10px 10px;
						display: block;
					}
					
					ul.sub-nav { 
						margin-top: -5px;
						display: none;
						margin-left: 15px; 
						.capital;
						font-size: 12px;
						font-weight: bold;
						font-family: 'Arial';
						padding-bottom: 5px;
						a {padding: 3px 10px;}
						li {border-bottom: 0px;}
					}
				}
			}
			
			form, div.form {
				margin-top: 0px;
				padding-top: 5px;
				
				::selection {
					background-color: @lightRed; /* Safari */
					color: white;
				}
				::-moz-selection {
					background-color: @lightRed; /* Firefox */
					color: white;
				}
				
				label {.upper; 
					display: block; 
					font-family: @f-TradeGothicLT; 
					font-size: 16px; 
					font-weight: normal; 
					color: @lightRed;
					margin: 10px 10px 0px 10px;
				}
				
				hr { 
					height: 1px; 
					border: 0px;
					background-color: #e5e5e5;
					width: 235px;
					margin: 5px 0px 0px 10px;
				}
				 
				input.text{
					color: @lightRed;
					font-size: 11px; 
					font-family: @Georgia;
					margin: 10px 10px 5px 10px; 
					display: inline-block;
					
					.spr-form;
					height: 30px;
					width: 220px;
					padding: 0px 8px;
					padding-top: 9px\9; /* target ie8 only */
					background-position: -365px -35px;
					
					&::-webkit-input-placeholder {
					    color: @lightRed;
					}
					&::-moz-placeholder {
					    color: @lightRed;
					}
				}
				
				div.cats {
					margin-left: 10px;
					margin-right: -3px;
					margin-bottom: 10px;
					margin-top: 10px;
				}
				
				a.cat {
					width:55px;
					/*height: 55px;*/
					padding: 10px !important;
					margin: 0px 2px 2px 0px;
					display: inline-block !important;
					color: @lightRed;
					text-align:center;
					font-size: 11px;
					.capital;
					input {
						display:none;
					}
					
					img {
						.sq(45px);
						margin: 0 auto;
					}
					
					&.off img.on {
						display: none;
					}
					
					&.on {
						background-color: @lightRed;
						color: #fff !important;
						.border-radius();
						
						img.off {
							display: none;
						}
					}
					
					&:hover {
						text-decoration:none;
					}
				}
			}
			
			.tag-help {
				color: @lightRed;
				text-transform: none;
				font-family: @Arial;
				font-size: 12px;
				background-image: url('/assets/img/arrow-red-up2.gif');
				background-repeat: no-repeat;
				background-position: 15px 3px;
				padding-left: 30px;
			}
			
			h5 {font-family: @f-TradeGothicLT; font-size: 24px; .marpad; padding: 10px 10px 0px 10px; .upper;}
			
			span.phone {
				/*&:hover {text-decoration: none; span {text-decoration: underline;}}*/
				font-size: 18px; font-weight: bold; display: block;
				div.img-phone {vertical-align: middle; margin: 10px; width: 34px; height: 34px; .spr-graphics; display:inline-block; background-position: -33px -100px;}
			} 
			a.email { 
				padding-top: 10px;
				&:hover {text-decoration: none; span {text-decoration: underline;}}
				span { padding-top: 10px;}
				font-size: 12px; font-weight: normal; display: block;
				div.img-email {vertical-align: top; margin: -2px 10px 10px 10px; width: 34px; height: 34px; .spr-graphics; display:inline-block; float:left; background-position: -67px -100px;}
			}	
		}
		
		div.side-fix {
			display: inline-block;
			position:relative;
			width: @main-nav-width;
			
			a.side-action {
				vertical-align: top;
				.sq(39px);
				display: none;
				background-color: white;
				.opacity(.7);
				&:hover {.opacity(1);}
			}
			
			a.side-close {
				.spr-boutons;
				background-position: -435px -39px;
				
			}
			
			a.side-open {
				.spr-boutons;
				background-position: -396px -39px;
			}
		}
		
		div.side-cont {
			.absolute;
			
			&.follow-y {
				
			}
			
			&.end-y {
				
			}
		}
		
		/* main-content with colone inside */
		div.main-content {
			vertical-align: top;
			display: inline-block;
			width: @main-width - @main-nav-width - @main-content-pad*2;
			background-color: white;
			padding: @main-content-pad;
			font-family: @Georgia;
			font-size: 18px;
			color: #333333;
			
			div.row-title {
				width: 934px;
				div.title{
					background-color: white;
					display: inline-block;
					padding-right: 10px;
					text-align: right;
					width: 355px;
					min-height: 60px;
					h2 {
						.marpad; 
						margin-top: 2px;
						font-size: 30px;
						color: @lightRed;
						font-family: @f-TradeGothicLT;
						font-weight: normal;
						.upper;
						line-height: 31px;
					}
					
					margin-bottom: 20px;
					
					p {
						text-align: right;
						margin: 3px 0px 0px 0px;
						font-size: 18px;
						font-family: @Georgia;  
						
						span {
							color: @lightRed;
							font-family: 'times new roman';
							font-weight: bold;
						} 
					}
				}
			}
			
			div.slidder ul {height: 464px; overflow: hidden; .marpad;}

			div.visite {
				text-align: left; 
				display: inline-block;
				color: white;
				font-size: 12px; 
				width: 569px;
				.upper;
				line-height: 11px;
				font-family: @f-TradeGothicLT;
				vertical-align: top;
				position: relative;
				background-color: @lightRed;
				
				span {display: inline-block; background-color: @darkRed; height: 35px; padding: 25px 25px 0px 25px; }
				div.slider-nav{display: inline-block; margin-left: 10px;}
				a {
					color: white;
					display: inline-block; 
					font-size: 18px; 
					margin: 0 10px;
					
					&.activeSlide {border-bottom: 1px solid #f19d96;padding-bottom: 3px; margin-bottom: -4px;}
				}
			}
			
			h3 {
				/*.capital;*/
				.clear;
				font-weight: bold;
				color: @lightRed;
				font-family: 'Arial';
				font-size: 12px;
				width: 355px; 
				.fleft; 
				text-align: right;
				
					
				::selection {
					background-color: @lightRed; /* Safari */
					color: white;
				}
				::-moz-selection {
					background-color: @lightRed; /* Firefox */
					color: white;
				}
				
			}
			
			.content-right{text-align: justify;
				.fright; 
				width: 520px;
				margin-right: 40px;}
			
			div.summary {
				.content-right;
				margin-bottom: 5px;
				
					
				::selection {
					background-color: @lightRed; /* Safari */
					color: white;
				}
				::-moz-selection {
					background-color: @lightRed; /* Firefox */
					color: white;
				}
				
				p { float: none; width: auto; .marpad; font-size: 28px;}
				&.summary {
					font-family: @Georgia;
					font-size: 30px;
					color: @lightRed;
					text-align: left;
				}
			}
			
			p { 	.content-right;	}
			
			img.big {width: 934px;height:514px;}
			
			img.inline {
				margin: 15px 0px 0px 20px;
				
				&.fright {
					margin-right: 40px;
				}
			}
			
			h3 {
				&.download { margin-top: 10px;}
				&.sources {width: 425px;}
			}
			
			div.inline {
				.fright;
			}
			
			ul.inline {
				.fright;
				margin-top: 7px;
				
				
				
				&.download {
					width: 560px;
					
					li {
						display: inline-block; 
						width: 33%;
						vertical-align: top;
						
					}
					
					a{
						font-size: 14px;
						color: #333333;
						
						display: block;
						span {text-decoration: underline; width: 145px; float: left; display: block; vertical-align: middle;}
						div.img-download {margin-right: 15px; float: left;}
					}
				}
				&.sources  {
					text-align: left;
					width: 480px;
					a {
						.img-blank;
					}
				}
			}
		
			a {color: @lightRed;}
			a.buy {color: white;}
		}
	}
	
	&.marge-ss {
		margin-top: 437px;
	}

}

/*  ********************************** CSS FOOTER */
#footer {
	position: relative;
	z-index: 50;
	
	div.footer-center-wrap {
		width: 1200px;
		margin: 0 auto -4px auto;  /* pour corriger firefox */
		position: relative;
	}

	#footer-adresse-title {
		display:inline-block;
		position: relative;
		width: 900px;
		margin: 0px auto -1px auto;	
		height: 100%;
		z-index: 90;
		overflow: visible;
	 
		div.icon-adresse {
			position: absolute;
			left: 11px;
			height: 69px;
			width: 37px;
			.spr-graphics;
			background-position: -147px 0px;
		}
	
		div.bg-white {
			padding: 11px 11px 5px 48px;
			margin-top: 20px;
			overflow: auto;
			color: @textRed;
			
			h4 { font-size: 11px; .marpad; font-family: @Arial; font-weight: bold;}
		
			p, a { font-size: 18px; font-weight: bold; .marpad; color: @textRed; }
			
			div.fleft {
				margin-left: 10px;
			}
		}
	}
	
	#footer-map {
		display: inline-block;
		width: 900px;
		position: relative;
		.bg-white;
		height: 600px;
		.box-shadow(5px, 0px, 3px, @light-grey);
		z-index: 80;
		
		
		img { width: 880px; height: 580px; margin: 10px; .hand;}
		iframe {width: 100%; height: 100%; }
		div.map-hover {
			position: absolute;
			top: 50px;
			left: 60px;
			width: 280px;
			height: 410px;
			font-size: 11px;
			font-family: 'Arial';
			
			
			div.content { border-bottom: 1px solid #7d7c7c; padding-top: 20px;}
			a {color: white; &:hover{text-decoration: underline;}}
			&.wrap {
				width: 270px;
				height: 390px;
				padding: 10px;
				div.accordion {height: 420px;}
			}
			
			&.bg {
				background-color: #1f1e1d;
				.opacity(.9);
			}
			
			div.accordion {
				height: 410px; overflow: hidden; 
			}
			
			h5 {
				font-size: 14px; 
				font-weight: normal;
				.upper; 
				.hand;
				font-family:@f-TradeGothicLT;
				border-bottom: 1px solid #7d7c7c;
				.marpad; 
				padding-bottom: 8px;
				margin-top: 15px;
				background-image: url("/assets/img/arrow-white-right.gif");
				background-repeat: no-repeat;
				background-position: 245px 6px;
				
				&:first-child {
					margin: 0px;
				}
			}
			div.fleft , div.fright{ width: 120px; margin-bottom: 20px;}
			div.fleft {margin-right: 5px; }
			div.fright {margin-left: 5px;}
			h6 {font-size: 11px; .marpad; margin-bottom: 10px;}
		}
	}
	
	#footer-social {
		display: inline-block;
		width: 280px;
		position: absolute;
		right: 0px;
		top: 0px;
		bottom: 0px;

		vertical-align: top;
		padding: 10px;
		background-color: @footer-social;
		
		div.footer-share {
			border-bottom: 1px solid @light-grey;
			font-family: @f-TradeGothicLT;
			font-size: 14px;
			padding-bottom: 10px;
			.upper;
		
			li { 
				height: 46px;
				.spr-social-share(4);
				margin-top: 6px;
				&:first-child { margin-top: 0px;}
				
				div.title { 
					width: 125px; 
					height: 34px;
					display: inline-block;
					padding: 7px 0px 5px 10px;
					span {.opacity(.5);}
				}
				
				&.facebook div.title {
					.spr-social-share(0);
				}
				
				&.google div.title {
					.spr-social-share(1);
				}
				
				&.twitter div.title {
					.spr-social-share(2);
				}
				
				&.email div.title {
					.spr-social-share(3);
				}
				
				div.share {display: inline-block; margin: 13px 0px 0px 15px; vertical-align: top; }
			}
		}
		
		div.footer-twiter { 
			
			font-size: 12px;
			color: @grey;
			font-family: @Georgia;
			
			a {color: @lightRed; text-decoration: underline;}
			
			li {
				border-top: 1px solid white;
				padding: 10px 0px;
				&.last {display: none;}
			}
			img {display: inline-block; vertical-align: top; width: 30px; margin-right: 10px; }
			p { 
				display: inline-block; 
				width: 240px; 
				line-height: 17px;
				.marpad; 
			} 
		}
	}
	
	div.bg-dark-gray {position: relative; z-index: 90; min-width: 1200px;}

	#footer-mailing {
		padding: 24px 0px;
		position: relative;
		margin-top: 0px;
		min-height: 40px;
		
		div.footer-mailing-icon {
			.fleft;
			.spr-graphics;
			background-position: -101px 0px ;
			width: 24px;
			height: 16px;
			margin-left: 23px;
			margin-right: 21px;
			margin-top: 12px;			
		}
		
		form {
			color: black;
			
			legend { 
				.fleft; 
				font-size: 14px;
				font-family: @f-TradeGothicLT;
				color: white;
				margin-right: 15px;
				.upper;
			}
			
			fieldset {
				margin: 0 2px;
			}
			
			div.input-text {
				display: inline-block;
				.spr-form;
				height: 33px;
				
				margin-right: 10px;
				width: 264px; 
				background-position: 0px -33px;
				position: relative;
					
				label {
					display: inline-block;
					margin: 9px 0px 7px 12px;
					font-size: 12px;
					font-family: 'Times New Roman';
					font-style: italic;
					
					&.error[generated='true'] {
						position: absolute;
						top: 33px;
						height: 16px;
						left: 0px;
						right: 0px;
						.marpad; 
						.border-radius(2px);
						color: @lightRed;
						background-color: #86312a;
						font-family: @Arial;
						font-size: 12px;
						padding: 8px 13px;
						font-style: normal;
					}
				}
				
				input.text {
					margin: 0px;
					height: 25px;						
					margin-left: 5px;
					background-color: transparent;
					font-family: 'Times New Roman';
					font-size: 12px;
					width: 205px;
					vertical-align: top;
					padding-top: 4px;
					padding-top: 9px\9; /*Target ie8 only */
				}
				
				&.email { 
					input {	width: 192px;}
				}
				
				&.focus { background-position: 0px 0px;}
			}
			
			input.submit {
				border: 0px;
				background-color: transparent;
				.hand;
				font-weight: normal;
				.upper;
				vertical-align: top;
				.marpad;
				.btn-footer;
			}
		}
		
		#newletter-success {
			display:none;
		}
		
		#newletter-error {
			display:none;
		}
		
		&.erreur {
			#newletter-error {
				display:block;
				color: @lightRed;
				margin-left: 76px;
			}
		}
		
		&.succes {
			#newletter-success {
				display:block;
			}
		}
	}
	
	#copyright {
		width: 1200px;
		margin: 15px auto 0px auto;
		font-size: 11px;
		font-family: @Georgia;
		overflow: auto;
		padding-bottom: 29px;
			
		div.logo {
			margin-left: 11px;
			.spr-graphics;
			background-position: -57px 0px;
			display: inline-block;
			.fleft;
			height: 54px ;
			width: 44px ;
		}
		
		div.fleft {
			margin-top: 14px;
			margin-left: 25px; 
			a {
				color: white;
				border-bottom: 1px solid @darkGrey;
				margin: 2px 0px;
				display: block;
			}
		}
		
		div.fright {
			margin-top: 14px;
		}
		
		li {
			display: inline-block; 
			border-left: 1px solid white; 
			padding: 0px 8px;
			
			&:first-child {border-left: 0px; padding-left: 0px;}
		}

		p { font-size: 10px; .opacity(.5); .marpad; margin-top: 5px; }
	}
}

/* ********************************** CSS SITE OVERAL (WIDTH) */
#site {
	position: relative;
	
	img.wm-degrad {
		.absolute(9);
		top: 0;
		left: 0; 
	}
}

/* ********************************** CSS HOME-SLIDER */

#site.pub {
	#home-slider-wrap { top: 128px;}
}

#home-slider-wrap {
	position: absolute;
	top: 0px;
	width: 100%;

	height: 656px;
	overflow:hidden; 
	
	div.slider.images {
		position: relative;
		width: 100%;
		margin: 0 auto;
		
		ul { height: 656px;  width: 100%; overflow: hidden;} 
		li { display: block; overflow:hidden; z-index: 13; width: 100%; }
	}
	
	.center-wrap {
		width: 1200px;
		margin: -505px auto 0px auto;
		position: relative;
		z-index: 60;
		overflow:hidden;
	}
	
	div.hover-big {
		margin: 0px 0px 0px 69px;
		z-index: 3;
		display: inline-block;
		width: 360px;
		vertical-align: top;
		position: relative;
		
		&.bg {
			div.content { margin: 0px; width: 300px; height: 290px }
		}
	
		&.slider {
			position: absolute;
			left: 0px;
			top: 0px;
			ul {overflow: hidden;}
		}
		
		div.cat {
			background-color: @darkRed;
			margin-top: 20px;
			height: 55px;
			 overflow: hidden;
			 
			::selection {
				background-color: white !important; /* Safari */
				color: @darkRed;
			}
			::-moz-selection {
				background-color: white !important; /* Firefox */
				color: @darkRed;
			}
			
			ul { overflow: hidden; width: 40px !important; margin: 0 10px; li { width: 60px; margin-left: -10px;} }
		}
		h2 {
			font-size: 20px;
			margin-top: 10px;
			font-weight: bold;
		}
		
		div.content {
			@width: 270px;
			@height: 260px;
			
			width: @width;
			height: @height;
			overflow: hidden;
			
			background-color: @bg-home-slider-hover;
			margin: 15px;
			
			a {color: white; &:hover {text-decoration: underline;}}
			
			p a {text-decoration: underline;}
			::selection {
				.opacity(1);
				background-color: white !important; /* Safari */
				color: @bg-home-slider-hover;
			}
			::-moz-selection {
				background-color: white !important; /* Firefox */
				color: @bg-home-slider-hover;
			}

			ul, li {
				width: @width + 20px;
				height: @height;
				
				.text-wrap {
					width: @width;
					height: @height;
				}
			}

		}
		
		a.buy {
			margin-top: 5px;
			background-position: -395px -77px;
			height: 24px;
			color: @bg-home-slider-hover !important;
		}
	}
	
	div.more-list {
		display: inline-block;
		z-index: 2;
		width: 0;
		overflow: hidden;
		
		ul {
			position: relative;
			width: 1600px; /* 10 items */ 
		}
		
		li { 
			vertical-align: top;
			background-color: #b82e23;
			width: 160px;
			height: 201px;
			display: inline-block;
			
			&.alt {background-color: #a1271c;}
			
			img {
				width: 160px;
				height: 95px;
			}
			
			a { 
				color: white;
				display: block;
				height: 100%;
			}
			p {
				margin: 10px;
				font-family: @Georgia;
				font-size: 11px;
				font-weight: normal;
			}
			
			h5.title {
				font-weight: normal; 
				font-family: @Arial; 
				letter-spacing: 0px;
				margin: 10px;
			}
		}
	}

	div.nav-wrap {
		display: inline-block;
		vertical-align: top;
		overflow: visible;
		div.btn-wrap {
			display: inline-block;
			margin-top: 44px;
			vertical-align: top;
			line-height: 11px;
			font-family: @f-TradeGothicLT;
			.upper;
			.bg-white;
			color: @lightRed;
			font-weight: normal;
			.hand;
			position: relative;
			height: 38px;
			
			div.btn {
				position: absolute;
				left: 0px;
				height: 38px;
				width: 38px;
				.spr-boutons;
				z-index: 500;
				background-color: white;
			}
				
			&.more {
				height: 38px;
				width: 38px;
				overflow: hidden;
				
				div.btn {
					background-position: -396px 0px;
				}
				
				span {	
					margin: 8px 10px 8px 20px; 
					z-index: 30;
					display: inline-block; 
					position: absolute; 
					right: 0px;
					width: 90px; /* set a width to avoid text wrapping during animation */
				}
			}
			
			&.less {
				
				div.btn.less {
					background-position: -434px 0px;
				}
				span {margin: 13px 10px 7px 38px; display: inline-block; height: 18px;}
			}
			
		}
		
		div.less-wrap {
			display: inline-block;
			display: none;
			
			div.btn {
				height: 38px;
				width: 38px;
				.bg-white;
				.hand;
				span {display: none;}
				div {.spr-boutons; height: 17px; width: 10px; }
				
			}
		}
		
		div.arrow-wrap {
			
			div.btn{
				.bg-white;
				.hand;
				div {.spr-boutons; height: 17px; width: 10px;}
				
				&.forward-wrap {
					margin-top: 1px;
					padding: 10px 10px 10px 12px;
					height: 18px;
					width: 16px;
					div { background-position: -344px -28px; }
				}
				
				&.back-wrap {
					margin-top: 1px;
					padding: 10px 10px 10px 12px;
					height: 18px;
					width: 16px;
					div { background-position: -323px -28px; }
				}
			}
		}
	}
}

/* ********************************** CSS HOME-CAL */

@home-cal-text-color : #999999;
@home-cal-day-selected-color: @lightRed;
 
#home-cal-wrap {

	height: 110px;
	ul {display: inline-block;}
	
	#cal-wrap {
		width:1150px;
		height:64px;
		display: inline-block;
	}
	
	a.arrow {
		color: white;
		font-size: 18px;
		font-family: @f-TradeGothicLT;
		vertical-align: top;
		display: inline-block;
		margin: 9px 0px;
		width: 10px;
		height: 17px;
		.spr-boutons;
		
		span {display: none;}
		&.back {background-position: -564px 0px; 
			&:hover {background-position: -564px -32px; 
				&.disabled {
					background-position: -564px 0px;
				}
			}
		}
		&.forward { background-position: -575px 0px; margin-left: 5px;
			&:hover {background-position: -575px -32px;
				&.disabled {
					background-position: -575px 0px;
				}
			}
		}
		&.disabled {
			.opacity(.2);
			.no-hand;
		}
	}
	
	li { 
		display: inline-block;
		width: 33px;
		height: 67px;
		text-align: center;
		font-size: 11px;
		font-family: @Arial; 
		margin-bottom: 5px;
		color: @home-cal-text-color;
		vertical-align: top;
		position: relative;
		
		a { display: block;}
		
		div.events-wrap {
			width: 300px;
			position: absolute;
			bottom: 66px;
			z-index: 80;
			.no-hand;
			display: none;
			
			div.events {
				position: relative;
			}
			
			a{ 
				padding: 5px;
				display: block;
			}
			
			ul {
				width: auto;
				overflow: auto;
				padding: 7px;
				margin: 0px;
				display: block;
				background-color: white;
				background-image:  url("/assets/img/arrow-red-up.gif");
				background-repeat: no-repeat;
				background-position: 11px bottom;
				li {
					text-align: left;
					display: block;
					width: 100%;
					.fleft;
					height: auto;
					.marpad;
					&:hover {
						background-color: @bg-subnav-hover;
					}
				}
			}
			
			img {
				.fleft;
				width: 64px ;
				height: 36px ;
				margin-right: 10px;
			}
			
			.fright {width: 200px; padding-bottom: 5px;}
			h4 {
				font-size: 12px;
				text-align: left;
				color:@lightRed;
				font-family: @Arial;
				border-bottom: 1px solid @lightRed;
				display: inline-block;
				.marpad;
				max-width: 200px;
				font-weight: bold;
			}
			
			p { 
				text-align: left;
				color: #141312;
				.marpad;
				margin-top: 5px;
			}
			
			&.events-16 {
				right:0px;
				
				ul {
					background-position: 277px bottom;
				}
			}
		}
		
		div.day {
			background-color: black;
			font-family: @f-TradeGothicLT;
			border-top: 1px solid #161514;
			border-right: 1px solid #161514;
			font-size: 18px;
			padding: 7px 0px;
			margin-bottom: 10px;
		}
		
		&.month {
			font-size: 18px;
			background-color: @bg-color;
			padding: 7px 5px;
			.upper;
			font-family: @f-TradeGothicLT;
			color:white;
			width:105px;
			z-index:1000;
		}
		
		&.events {
			.hand;
			div.day {
				background-color: @home-cal-day-selected-color;
				color: white;
				z-index: 10;
				position: relative;
			}
			color: @home-cal-day-selected-color;
		}
		
		&.current {
			div.day {
				margin-bottom: 9px;
				border:1px solid white !important;
			}
		}
				
	}
}

/* Page Accueil */
div.main-content.accueil {
	h3 {
		padding: 0px 13px 0px 0px;
		margin: 0px 0px 15px 0px;
		.upper;
		font-size: 14px;
		font-family: @f-TradeGothicLT;
		background-image : url("/assets/img/arrow-white-down.gif");
		background-repeat: no-repeat;
		background-position: right center;
		display: inline-block;
		font-weight: normal;
	}
}

/* HOME PAGE - lien vers la programmation compl�te  */
div.goto-programmation {
	.fright;
	padding-right: 10px;
	background-image: url("/assets/img/arrow-white-right.gif");
	background-repeat: no-repeat;
	background-position: right center;
	a {color: white; font-size: 11px; font-family: Arial; line-height: 11px; border-bottom: 1px solid white; }
}

a.buy {
	display: inline-block;
	width: 120px;
	height: 16px; 
	.spr-boutons;
	background-position: -395px -97px;
	color: @bg-home-slider-hover;
	font-size: 14px;
	/*letter-spacing: -1px;*/
	.upper;
	font-weight: normal;
	font-family: @f-TradeGothicLT;
	text-align: center;
	padding: 1px 0px 2px 0px;
	color: white;
}

/* Utilisation general dans le slider et dans la section affiche de la page d'accueil  */
div.date {
	font-style: normal;
	font-size: 27px;
	font-family: @f-FarnhamdisplayBolditalosf;
	span { 
		border-top: 1px solid white; 
		border-bottom: 1px solid white;
		font-size: 15px;
		vertical-align: middle;
		display: inline-block;
		font-family: @f-FarnhamDisplayMediumItalOSF ;
		padding-bottom: 2px;
		margin-bottom: 1px;
		line-height: 10px;
	}
}
	
div.promo {

	div.cat { 
		font-size: 11px; 
		font-family: @Arial;
		width: 60px;
		display: inline-block;
		text-align: center;
		vertical-align: top;
		padding: 10px 0px;
		img { height: 40px; width: 40px;}
	}
	
	h2, h4 {
		font-family: @Arial;
		.marpad;
	}
	
	div.content {
		display: inline-block;
		vertical-align: top;
		font-family: @Georgia;
		font-size: 14px;
		width: 220px;
	}

	/* Section specifique aux affiches de l'accueil */
	&.affiche {
		margin: 20px -10px 30px -10px;

		li {margin: 10px 10px 0 10px;
			&.last {margin-right:0px;}
		}
		
		div.img-wrap {
			overflow: hidden;
			position: relative;
		}
		
		div.img-hover {
			height: 159px;
			width: 300px;
			background-image: url(/assets/img/over-rubriques.png);
			background-repeat: no-repeat; 
			position: absolute;left: 0px; top: 0px; 			/*margin-left: -280px;*/
			display: none; 
			/* IE hack */   
			background:none\9;
			/* Targets IE only */   
			/*filter:~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/img/over-rubriques.png', sizingMethod='crop')";*/
			/*filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";*/
		}
			
		h4 {
			margin-left: 5px;
			a {
				font-weight: bold;
				font-size: 16px;
				color: @lightRed;
			}
		}
		
		div.cat {
			padding: 0px 0px;
			
			img {height: 45px; width: 45px;}
		}
		
		div.content {
			
			p {
				font-size: 13px;
				padding-left: 5px;
				a {color: white;}
			}
		}
		
		div.date {
			position: relative;
			margin-top: -20px;
			margin-left: 60px;
			font-size: 18px; 
			font-weight: normal;
			display: block;
			float: left;
			max-width: 220px;
			div {
				padding: 5px;
				display: inline-block;
				background-color: @bg-color;
			}
			
			span {
				font-size: 10px;
				padding-bottom: 2px;
				margin-bottom: 1px;
				line-height: 7px;
			}
		}
		
		a.buy {
			margin: 5px 0px 0px 5px;
		}
	}
	
	li {
		display: inline-block;
		vertical-align: top;
	}
}

/* Design selectbox  */
div.sbContainer {
	
	position:relative;
	height: 38px; /* fix menu height */
	width: 238px;
	.capital;
	font-family: @Georgia;
	text-align: left;
	

	
	&.input-room {
		div.sbHolder {
			a.sbSelector {
				font-size: 12px;
				padding: 5px !important;
			}
			
			ul.sbOptions {
				font-size: 14px;
				
				li {
					border-bottom: 1px solid #e85e53;
					&.current { 
						background-color: white; 
						a {color: @lightRed;}
					}
					&:last-child{border-bottom: 0px;}
					
					a {
						padding: 10px 10px;
						display: block;
					}
				}
			}
		}
	}

	div.sbHolder {
		
		a.sbSelector {
			margin: 10px 0px 0px 10px;
			padding: 5px;
			height:24px;
			width: 238px;
			display: block;
			line-height: 24px;
			vertical-align: middle;
			.spr-form;
			background-position: -365px -35px;			
		}
		
		a.sbToggle {
			padding: 0px !important;
			.absolute(5); 
			width: 100%;
			height: 38px;
			background-image: url('/assets/img/arrow-red-down.gif');
			background-repeat: no-repeat; 
			background-position: 220px center;
		}

		ul.sbOptions {
			.absolute(10000);
			background-color:#fff;
			width:233px;
			margin: 10px 10px 0px 10px;
			border: 1px solid #d8d8d8;
			border-top: 0px;
			overflow-y: auto;
			
			li {
				a {	padding: 5px !important;
					&:hover {background-color: @lightRed; color: white !important;}
					
					&.sbSelected {
						font-weight: bold;
						color: @darkRed !important;
						
						&:hover {
							 color: white !important;
						}
					}
				}
				font-size: 12px;
			}
			
		}
	}
	
	a.cal-btn {
		height: 25px;
		width: 20px;
		background-color: @lightRed;
		position: absolute;
		.border-radius(3px);
		
		&.cal-prev { 
			top: 4px;
			left: 5px;
			background-image: url('/assets/img/arrow-cal-prev.gif');
			background-position: 6px center;
			background-repeat: no-repeat;
		}
		&.cal-next { top: 4px; right: -10px;
			background-image: url('/assets/img/arrow-cal-next.gif');
			background-position: 8px center;
			background-repeat: no-repeat;
		}
	}
	
	&.input-month {
		font-size: 19px; 
		text-align: center;
		float: left;
		width: 250px;
		
		div.sbHolder {
			a.sbSelector {
				margin: 0px 0px 0px 0px !important;
				background-image: none; 
				background-color: #efefef;
				width: 255px;
				.border-radius(5px);
			}
			a.sbToggle {
				width: 200px;
				left: 35px;
				background-position: 180px center;
			}
			ul.sbOptions {
				margin: 10px 0px 0px 0px;
				width: 263px;
				
				li { border-bottom: 1px solid @lightRed;
					&:last-child {border-bottom: 0px}
					a{display: block;padding: 5px;}
				}
			}
		}
		
	}
}

div.img-fiche-wrap{
	.clear;
	position: relative;
	img {width: 934px;height:522px;}
	
	div.cat {
		background-color: @lightRed;
		width: 78px;
		position: absolute;
		top: 0px; 
		left: 0px;
		color: white;
		font-family: 'Arial';
		font-size: 11px;
		text-align: center;
		padding-bottom: 10px;
		img {width: 45px; height: 45px; margin: 8px auto 1px auto; display:block;}
		
	}
	 
	div.monumentales {
		position: absolute;
		top: 0px;
		left: 78px;
		padding: 10px 5px;
		height: 58px; 
		.bg-white;
		img {width: 68px;height: 55px;}
	}
	
	div.share {
		
		position: absolute;
		bottom: 0px;
		right: 0px;
		
		.upper;
		color: @lightRed;
		font-family: @f-TradeGothicLT;
		font-size: 14px;
		
		div.img-share {margin-top: -2px;}
		
		div.bg-white {
			float: left;
			background-color: white;
			height: 31px;
			padding: 9px 10px 0px 5px;
		}
		
		a{
			.hand();
			float: left;
			display: block;
			&.share {
				
				display: inline-block;
				/*padding-right: 10px;*/
				color: @lightRed; display: block;
			}
			&.facebook {
				height: 34px;
				width: 36px;
				padding-left: 5px; 
				padding-top: 2px;
				background-color: @lightRed;
			}
		}
	}
}
/* Design Auto Complete */
.ui-autocomplete {
	background-color: #fff;
	
	li {
		border-bottom: 1px solid @lightRed;
		border-left: 1px solid #d8d8d8;
		border-right: 1px solid #d8d8d8;
		width: 228px;
		
		&:last-child {border-bottom-color: #d8d8d8;}
		a {
			color: @lightRed;
			padding: 5px 0px 5px 5px;
			font-size: 12px;
			display: block;
			.hand;
			&:hover, &.ui-state-hover {
				text-decoration: underline;
				background-color: @lightRed;
				color: #fff !important;
			}
		}
	}
} 

/* CAL PROGRAMMATION  */
#main.cols div.main-content div.cal-mode {
	float: right;
	font-size: 14px; 
	font-family: @f-TradeGothicLT; 
	.upper;
	color: @lightRed;
	margin-top: -10px;
	margin-right: -10px;
	margin-bottom: 10px;
	clear: right;
		
	&::selection {
        background-color: @lightRed; /* Safari */
		color: white;
	}
	&::-moz-selection {
		background-color: @lightRed; /* Firefox */
		color: white;
	}
	
	div.img {
		display: inline-block;
		.spr-graphics; 
		vertical-align: middle;
		height: 23px;
		width: 23px;
		margin-left: 10px;
		margin-top: -3px;
		&.calendar-mode { 
			background-position: -101px -17px;
		}

		&.liste-mode { 
			background-position: -124px -17px;
		}
	}

	a {
		color: white;
		vertical-align: middle; 
		padding-top: 12px; 
		display: block;
		.opacity(.6);
		
		&:hover { 
			.opacity(1);
			span{text-decoration: underline;}
		}
		&.current {.opacity(1); 
			&:hover {cursor: default;
				span {text-decoration: none;}
			} 
		}
	} 
	
	ul {
		.capital;
		font-size: 12px;
		vertical-align: middle;
		height: 44px;
		padding: 0px 10px 0px 43px;
		.spr-graphics;
		background-position: -184px 0px;
		background-color: @lightRed;
		display: inline-block;
		
		li {
			display: inline-block;
			padding-right: 10px;
		}
		
	}
}

@cal-bg-color: #9f9f9f;
@cal-date-bg-color: #878787;
@cal-date-text-color: #e5e5e5;
@cal-content-bg-color: #ebeced;
@cal-content-separator-color : #a8a9a9;

dl.horraire {
	font-size: 14px;
	overflow: hidden;
	span { 
		position: absolute;
		display: inline-block; 
		bottom: -4px;
		left: 0px;
		background-color: white;
		
		}
	 dt { 
		height: 22px;
		position: relative;
		float: left; 
		width: 360px; 
		font-style: italic;
		border-bottom: 1px dotted black;
		span {padding-right: 5px;}
	}
	 dd {
		font-family: 'Arial';
		font-weight: bold;
		height: 27px;
		position: relative;
		text-align: center;
		margin-top: -22px;
		float: right;
		padding-right: 20px;
		min-width: 110px;
		span {	
			padding-left: 5px; 
			min-width: 100px;
			bottom: -18px;
			height: 36px;
			
			&.empty {font-family: @Georgia; font-size: 36px; bottom: -10px;}
		}
	 }
	 
 }
 
div.star {margin-top: 30px; font-weight: bold; font-size: 36px;}
 
.h2-bg-pink {
	.marpad;
	font-family: @f-TradeGothicLT;
	font-size: 24px;
	.upper;
	float: left;
	color: @lightRed;
	background-color: #f9d8d5;
	margin-bottom: 10px;
	padding: 0px 5px;
	
	&::selection {
        background-color: @lightRed; /* Safari */
		color: white;
	}
	&::-moz-selection {
		background-color: @lightRed; /* Firefox */
		color: white;
	}
	
}

#main.cols div.main-content ul.events-list {
	.clear;
	
	li {
		padding: 10px 0px 7px 0px;
		border-bottom: 1px solid #d6d6d6;
		overflow: auto;
		&:last-child{ border-bottom: none; padding-bottom: 0px;}
	}
	
	div.img-wrap {
		float: left; 
		img {margin-right: 10px; }
	}
	
	div.date-hour { 
		color: @lightRed;
		margin-top: 10px;
		font-size: 22px;
		font-family: @f-FarnhamdisplayBolditalosf;
		
		span {font-family: 'Arial'; font-size: 12px; font-weight: bold;}
	}
	
	h3 { 
		float: none; 
		width: auto;
		text-align: left;
		color: #333333;
		.upper;
		font-family: @f-TradeGothicLT;
		font-weight: normal;
		font-size: 22px;
		.marpad;
		margin: 8px 0px;
	}
	
	h4 {margin: 0px}
	
	div.room {
		font-size: 12px; 
		font-family: 'Arial'; 
		margin: 8px 0px;
	}
	
	a.fiche { 
		margin: 8px 0px;
		font-size: 14px; 
		text-decoration: underline;
		background-image: url('/assets/img/arrow-fiche.png');
		background-repeat: no-repeat;
		background-position: right 2px;
		padding-right: 18px;
	}
	
	div.fright {
		div {
			text-align: right;
			a.buy {margin-top: 15px;}
		}
		
		ul.cats {
			
			float: right;
			margin-top: 40px;
			li {display: inline-block; vertical-align: top; border-bottom: none; margin-left: 2px;}
		}
	}
}

#no-event-msg {
	
	position: absolute;
	top: 45px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: none;
	
	::selection {
        background-color: @lightRed; /* Safari */
		color: white;
		
	}
	::-moz-selection {
		background-color: @lightRed; /* Firefox */
		color: white;
	}
	
	div.bg-white {
		width: 100%; height: 100%;
		background-color: white;
		.opacity(.7);
		}
	div.no-event-box {
		width: 40%;
		background-color: white;
		border: 5px solid @lightRed;
		position: absolute;
		top: 200px;
		left: 30%;
		text-align: center;
		color: @lightRed;
		padding: 5px 0px;
	}
}

#main.prog  {
	h2 {
		float: left; .h2-bg-pink;
	}
	
	#cal-ajax-holder {
		.clear;
	}
	
	table.cal {
		.clear;
		width: 100%;
		font-family: 'Arial';
		border-collapse: collapse;
		table-layout: fixed;
		border-spacing: 1px;
		border-bottom: 1px solid @home-cal-text-color; 
		col {
			border-left: 1px solid @home-cal-text-color; 
			border-right: 1px solid @home-cal-text-color; 
		} 
		td {
			position: relative;
			vertical-align: top;
			width: 131px; 
			border-top: 1px solid @home-cal-text-color;
			color: #666666;
			display: table-cell;
			background-image: url('/assets/img/bg-calendar.png');
			
			div.title-wrap {
				background-color: @cal-bg-color;
				div.date { 
					font-size: 24px;
					font-weight: bold;
					height: 32px; 
					width: 32px;   
					text-align: center;
					padding-top:2px; 
					color: @cal-date-text-color; 
					display: inline-block; 
					font-family: 'Arial';
					background-color: @cal-date-bg-color;
				}
				div.day-wrap { 
					padding: 0px 10px 0px 10px;
					color: #5f5f5f;
					display: inline-block;
					font-size: 9px;
					width: 79px;
					height: 24px;
					vertical-align: top;
					margin-bottom: 6px;
					.capital;
					span {
						margin-top: 2px;
						display: block;
						font-size: 11px;
						padding-bottom: 1px;
						margin-bottom: 1px;
						border-bottom: 1px solid #666666;}
				}
			}
			
			div.content { 
				position: relative;
				background-color: @cal-content-bg-color;
				font-size: 11px;
				padding: 0px 10px 0px 10px;
				img {border: 1px solid #cccccc;}
				li {
					padding-top: 10px;
					padding-bottom: 10px;
					border-bottom: 1px dotted @cal-content-separator-color;
					&:last-child{ border-bottom: 0px;}
				}
			}
			
			h2{ 
				margin-bottom: 0px;
				font-size: 11px;
				float: none;
				background-color: @cal-content-bg-color;
				padding: 0px;
				.capital;
				font-family: 'Arial';
			}
			div.hour {color: #333333; margin-bottom: 3px;}
			
			&.events {
				border-left: 1px solid @lightRed;
				border-right: 1px solid @lightRed;
				border-top: 1px solid @lightRed;
				border-bottom: 1px solid @lightRed;
				
				div.title-wrap {
					background-color: #ead6d6;
					div.date { height: 31px; background-color: @lightRed;}
					div.day-wrap {
						color: @lightRed;
						span {border-bottom: 1px solid @lightRed;}
					}
				}
				div.content {border-top: 1px solid @lightRed;/*display: block;*/}
				
				a.buy { background-position: -474px -18px; height:14px; width: 90px; font-size: 10px; padding-top: 4px;} 
			}
			
			div.empty {
				/*position: absolute;
				top: 33px; bottom: 0px; right: 0px; left:0px;*/
				position: relative; width: 100%; height: 100%;
				min-height: 110px;
				/*background-image: url('/assets/img/bg-calendar.png');*/
			}
		}
	}
}

#main.cols.prog-list {
	h2 {float: left; .h2-bg-pink;}
	
	.main-content  {min-height: 648px; }
}

#main.monument.cols {
	h1 {font-size: 36px; height: 43px; padding-top: 5px;}
	div.row-title {margin-top: -64px; }
	
	div.main-content  {
	
		/* Page Monument - Tab Contact */
		div#tab-contact {
			.clear; 
			font-family: @Georgia;
			color: #333333;
			
			h2 { 
				.clear;
				.upper;
				font-size: 24px; 
				color: @lightRed; 
				background-color: #f9d8d5; 
				.fleft;
				padding: 2px 4px;
				font-family: @f-TradeGothicLT;
				margin: 0px 0px 10px 0px;
				
				&.pad { margin-top: 20px;}
			}
		
			div.fright {
				width: 470px;
				h3 {
					float: none;
					text-align: left;
					.upper;
					color: #333333;
					font-family: @f-TradeGothicLT;
					font-size: 14px;
					font-weight: normal;
				}
				
				p {width: auto; font-size: 14px;}
				
			}	
			span.small {font-size: 11px; min-width: 30px; display: inline-block;}
			span.num {margin: 0px 0px 5px 7px; font-family: 'Time new roman'; font-size: 22px;}
			hr {
				height: 1px; 
				.clear;
				border: none;
				background-color: #c3c3c3;
			}
		
			a {
				border-bottom: 1px solid @lightRed;
				font-size: 14px;
				
				&.black {color: #333333 !important; border-bottom-color: #333333; font-size: 18px; margin-top: 10px; display: inline-block;}
			}
		
			div.adresse {
				font-size: 24px;
				p {float: none;width: auto;}
			}
		 
			ul.team {
				font-size: 14px;
				margin-bottom: 30px;
				li {width: 222px; display: inline-block; margin-bottom: 25px; vertical-align: top; margin-right: 10px; }
				
				div.red { font-size: 16px; color: @lightRed;}
				div.title {font-size: 16px; margin-bottom: 10px;}
				a { font-size: 14px; border: none; text-decoration: underline; margin: 0px; display: inline;}
			} 
		}
	
		div#tab-partenaires, #mon-ajax-holder {
			overflow:auto;
		}
		
		div#tab-salle-presse {
		
			overflow: auto;
		
			.salle-presse-cat {
				width: 220px;
				margin-right: 10px;
				.fleft;
			}
			
			.salle-presse-cat-img {
				width:220px;
				height:123px;
				display:block;
			}
			
			ul {overflow: hidden; border-bottom: 1px solid #c3c3c3;}
			li {
				display: inline-block; 
				width: 223px;
				padding: 10px 10px 10px 0px; 
				vertical-align: top;
				
				p {
					width:auto;
					margin:0;
				}
				
				ul {border-bottom: 0px; li {padding: 0px;}}
			} 
			
			h2 {
				font-size: 18px;
				color: @lightRed;
				margin-bottom:5px;
			}
			
			p {
				font-family: 'Times new roman';
				float:none;
				text-align: left;
				font-size: 14px;
			}
			div.img-download-small{margin-right: 10px;}
			a {
				font-size: 12px; 
				span {text-decoration: underline;}
			}
		}
	}
}

/* Page louer nos salles */
#main.rent-room.cols {
	h1 {font-size: 27px;}
	
	div.side ul.nav  li {border-bottom: 1px solid #E85E53;}
	
	#room-ajax-holder {
		overflow: auto;
		display: block;
	}
	
	.main-content .slidder ul li {width: 934px;}
}

/* Page billeterie */
#main.tickets {
	

	h1 {font-size: 38px;padding: 2px 10px 13px 10px;}
	
	div.side {
		dl.horraire { 
			margin-left: 10px;
			dt{width: 150px; border-bottom: 1px dotted white;}
			span {background-color: @lightRed;}
		}
		
		div.star {text-align: center; margin: 10px 0px -10px 0px;font-family: @Georgia}
		
		p {
			font-family: @Georgia;
			text-align: center; 
			font-size: 14px; 
			margin: 10px 10px;
		}
	}

	div.main-content {min-height: 546px;  /* Force hauteur minimal pour égaler la colonne de gauche */}
	h2 {
		.h2-bg-pink;
	}
	
	hr {.clear; border: none; background-color: #c3c3c3; margin-bottom: 15px;}
	
	div.siege-help {
		margin: 7px 0px 0px 15px;
		.fleft;
		color: #333333;
		font-size: 12px;
		
		p { .marpad;
		vertical-align: middle;}
	}
	ul.buy {
		.clear;
		margin: 70px 0px 80px 10px;
		li {
			vertical-align: top;
			display: inline-block;
			width: 33%;
			
			div.fright {
				width: 215px;
				padding-right: 5px;
			}
			
			div.contact,
			div.contact p {color: #cc3333; font-family: 'Times New Roman';}
			
			h3 {
				vertical-align: top;
				.marpad;
				float: none; 
				width: auto; 
				text-align: left;
				font-size: 20px;
				color: #333333;
				.upper;
				font-family: @f-TradeGothicLT;
			}
			
			a.buy {vertical-align: top; margin-top: 10px; }
			div.p-wrap {
				p {width: 166px; .fright;}
			}
			p {display: inline-block; float:none; text-align: left; width: auto; color: #999999; font-size: 14px; margin-right: 10px;}
		}
	}
	
	div.img-download {
		margin: 0 10px 0 0;
	}
	
	ul.rooms {
		margin: 0px -10px 40px -10px;
		li {
			background-color: #dfdfdf;
			border-bottom: 1px solid #c3c3c3;
			font-size: 14px;
			font-family: @f-TradeGothicLT;
			.upper;
			
			a {
				color: #333333;
				display: block;
				padding: 7px 15px;
			}
			
			a.ui-accordion-header  {
				background-image: url('/assets/img/arrow-black-right.gif');
				background-repeat: no-repeat;
				background-position: 935px 15px;
				
				&:hover {text-decoration: underline;}
			}
			
			img {
				padding: 10px;
				min-height: 503px;
			}	
		}
	}
}

/* Page programmation-fiche */
#main.fiche { 
	h2 {
		.fleft; 	
		display:inline-block; 
		.marpad;
		.upper;
		color: @lightRed;
		font-size: 30px;
		font-family: @f-TradeGothicLT;
		margin: -5px 0px 15px 0px;
	}
	
	h3 {max-width: 110px;}
	h4.retour {
		font-size: 15px !important;.upper;margin-top:30px !important;
		a {display:inline-block;padding:10px;background-color:@lightRed;color:#fff;}
	}
	
	div.date-range {
		.fright; 
		display: inline-block;
		.upper;
		margin-top: 8px;
		div.date, span {
			font-family: @f-TradeGothicLT;
			font-size: 15px;
			font-style: normal;
			line-height: normal;
		}
	}
	div.main-content {
		padding-bottom: 30px;
		h3 {width: 330px;}
		p {margin-right: 10px; width: 570px;}
		h2 span {font-family: @f-TradeGothicLT; .upper; font-size: 18px;}
		div.fright {width: 700px;
			h4 {
				.fright;
				font-family: 'Arial';
				font-size: 12px;
				font-weight: bold;
				display: block;
				width: 580px;
				.marpad;
				margin: 12px 0px -12px 0px;
			}
			
			div.txt-d  p{font-size: 14.5px;}
		}
		 
		ul.download.inline li {
			width: 50%;
		}
		div.credits {
			font-size: 14px; 
			display: inline-block; 
			width: 290px;
			text-align: left;
			.marpad;
			margin-top: 10px;
			float: right;
			p {width: auto; text-align: left; .marpad; float: none;}
			&.right{ p {padding-right: 10px;}}
		}
		div.detail {
			float: left;
			width: 230px;
			
			a.buy {margin-bottom: 15px; }
			
			h4 {
				.marpad; 
				font-family: 'Arial'; 
				font-size: 12px; 
				font-weight: bold;
				color: @lightRed; 
				margin: 3px 0px;
			}
			
			p {
				width: 100%;
				margin: 0px 0px 10px 0px;
				color: #333333;
				font-family: @f-TradeGothicLT;
				.upper;
				text-align:  left; 
				float: none;
			}		
			ul.dates {
				width: 180px;
				font-family: 'Arial';
				font-size: 11px;
				li {
					 margin-top: 5px; 
					 border: 1px solid #333333;
					 height:38px;
				}
				span {display: block; font-size: 18px; margin-bottom: -1px;}
				div.jour {
					overflow: hidden;
					.fleft; 
					background-color: #333333; 
					width: 65px;
					color: white;
					padding:  2px 5px 3px 5px;
					height: 33px;
					font-weight: bold;
					.capital;
					font-style: normal;
					font-size: 11px;
					font-family: @Arial;
					
					span {
						font-style: normal;
						font-size: 16px;
						font-family: @Arial;
					}
				}
				div.day {
					margin-left: 80px;
					margin-right: 5px;
					margin-top: 3px;
					padding-bottom: 2px;
					border-bottom: 1px solid #333333;
				}
				div.hour { margin: 2px 0px 2px 80px;}
			}
		}
	}
	div.video { margin: 10px 0px 20px 0px;}
}

#main.monumentals {
	h2 {.clear; .h2-bg-pink; margin: 30px 0px 5px 0px; }
	div.summary {margin-top: 15px;}
	div.main-content {
		ul.download.inline li {
			width: 50%;
			span {width: 240px;}
		}
	}
	p.room {color: @lightRed;}
}

#main.expo {
	div.main-content {
		padding-bottom: 20px;
		div.title {
			position: relative;
			z-index: 15;
			margin-top: -25px;
			h3 {font-weight: normal; font-family: @Georgia; width: auto; .marpad; float: none; font-size: 18px; color: #333333;}
		} 
		div.row-title.empty div.title {margin-top: -29px;}
	}
	.expo-title {
		width: 355px;
		height: 90px;
		text-align: right;
	}
}

.t-simple-template {

	h1 {
		background-color: @lightRed;  
		margin: 0px; 
		padding: 5px 20px;
		color: white;
	}
	background-color: white;
	color: black;
	div.main-content {padding: 0px; margin-bottom: 30px;}
	a {color: @lightRed;}
	
	
	

}

#cse {
		color: black;
		
		.gsc-control-cse {
			width: auto !important;
		}
	}

#main.recherche {
	.t-simple-template();
} 

#main.partenaires {
	.t-simple-template();
	
	div.main-content {padding: 0px 20px;}
	
	.fleft {margin-left: 20px; vertical-align: top;}
}

#main.p404 {
.t-simple-template();
	font-size: 18px;
	font-family: @Georgia;
	div.main-content {padding: 10px 10px 10px 20px; }
}