/* ---------------------------------------------------
* CSS screen pour onct.mairie-toulouse.fr
* Auteur : Erwann Ser <webmestre%40studiopastre%2Ecom>
------------------------------------------------------
*/

/*Reset 
--------------------------------*/

body,ul,ol,form {margin:0; padding:0}

/* Titres */ 
h1, h2, h3, h4, h5, h6 { 
  margin:1em 0 .4em; 
  line-height:1.2
	}
h5, h6 {font-size:1em} 

/*Images */ 
a img {border:none} 
h2 img {display:block}

/* Liens */ 
a:hover, a:focus, a:active {text-decoration:none;} 

/* Formulaires */ 
fieldset { 
  margin:0; 
  padding:0; 
  border:none
	} 
label {cursor:pointer; cursor:hand; /*IE*/}
#sidecol input[type="checkbox"] + label {margin-left: 3px}

input, select {vertical-align:middle; font-size:1em}
textarea, input {
	border: 1px solid #cfe0f5;
	border-radius:.3em;
	-moz-border-radius:.3em;
	-webkit-border-radius:.3em
	}
textarea {padding:.5em}

/* Citations */ 
blockquote {margin:.75em 0 .75em 20px} 
 q:before, q:after {content:""}
 
/* Tableaux */ 
table { 
  border-collapse:collapse;
  border-spacing:0
	} 
td, th {vertical-align:middle}

/* Divers */ 
li {list-style:none}
p {margin:.8em 0} 
.hide {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden
	}
a[class="external"]:after {content:url(/images/icon-external.png)} 
abbr {letter-spacing: .1em}

.bloc {display:block}
.left {float:left}
.right {float:right}
.clear {clear:both}
.format_context {overflow:hidden}
.uppercase {text-transform:uppercase}
.nobrd {border:none !important}
.small {font-size: .9em}


/*------------------------------------------------------------------------------------------------------------*/

html, body {height: 100%}
#wrapper {
	position:relative;
	min-height:100%;
	background: #666;	
}
body {
	background: #666;
	font: 77%/1.5 Tahoma, Arial, Lucida, sans-serif;
	color:#2b2e2f
}

/*MAIN BLOCS*/
#content, #footer, #header {
	overflow:hidden;
	width: 100%;
}
#content {
	background:#FFF;
	padding: 26px 0 100px;
}
#main {
	position:relative;
	float:left;
	margin-right: 26px;
	width: 468px;
}
#sidecol {margin-left: 741px; }

.ctr, #menu ul, #content {
	position:relative;
	width: 962px;
	margin: 0 auto
}
.exergue {
	display:inline-block;
	background: #ffeb4d;
	color:#111;
	margin-bottom: 4px;
	padding: 2px 8px
}

/*-------------------------------------------------- H E A D E R ----------------------------------------------------------*/

#header {
	height: 175px;
	background: #666 
}
#header .ctr {background:#000; height: 100%}
#header img {color:#FFF; font-size: 1.2em}
#header p {margin:0}

#topbar {
	position: absolute;
	top:-2px;
	left:0;
	height: 29px;
	line-height: 29px;
	color:#111
}
#topbar p {
	padding: 0 15px 0 7px;
	height: 100%;
	display:inline-block;
	vertical-align: top;
	background: #d1d1d1;
	border-right: 1px solid #999; 
}
#topbar p {color:#555;}
#topbar p a {color:#555; margin: 0 3px; cursor:default}
#topbar p a:hover {text-decoration:none}
#topbar p a:focus, #topbar p a:active {color:#FFF;}
#newsletter a {background:url(../images/newsletter.png) no-repeat 0 0.5em; padding-left: 22px}
		
#topbar ul {
	padding: 0 10px 0 15px;
	vertical-align: top;
	height: 100%;
	display:inline-block;
	background: #e1e5e3;
}
#topbar #lft, #topbar #rgt {
	position:absolute;
	top:0;
	height: 100%;
	width: 5px
}
#topbar #lft {left: -5px; background:url(../images/topbar_lft.png)}
#topbar #rgt {right: -5px; background:url(../images/topbar_rgt.png)}

#topbar li {float:left
}
#topbar a {
	display:inline-block;
	text-decoration:none;
	color:#111;
	font-size: .9em;
	margin: 0 7px
}
#topbar p a:last-child, #topbar ul li:last-child  a {margin-right:0}


#topbar a:hover, #topbar a:focus {text-decoration:underline}

#logo {
	display:inline-block;
	vertical-align: middle;
	margin: 0 0 124px 75px;
}
#saison {position:absolute; right:0; top:0}

/*MENU
--------------------------------------=*/
	
#menu {
	position:relative;
	z-index:2;
	height: 36px;
	background: #666; 
}
#menu > ul {
	background: #f8da00 url(../images/menu_bg.png) repeat-x;
	height:100%
}
#menu li {
	float:left;
	background: url(../images/menu_separ.png) no-repeat right; 
	padding-right: 2px
}
#menu a {
	float:left;
	height:36px;
	padding:0 16px;
	background: url(../images/menu_bg.png) repeat-x; 
	line-height:38px;
	text-shadow: 0 1px 0 #fff898;
	text-decoration:none;
	color:#3a3400;
	letter-spacing:0.004em;
}
#menu li li {
	float:none;
	background:none;
	padding:0
}
#menu li li a {
	float:none;
	height:30px;
	padding-right:0;
	line-height:30px;
	background: #fff333; 
	color:#111;
	border-bottom: 1px solid #c7b200;
}
#menu li li a:hover, #menu li li a:focus, #menu li li a:active {background: #fff783}
#menu li li:first-child a {border-top: 2px solid #e4c704;}

#menu li li:last-child a {
	padding-bottom: 3px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border: none;
}
#menu a#gui span {
	background:#fff452;
	text-shadow:none;
	color:#111;
	border: 1px solid #e4cc00;
	padding: 0 10px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft:  4px;
	width: 230px !important;
	line-height: 2.5em
	}
#menu a#gui:hover span, #menu a#gui:focus span {
	top: 36px;
	z-index: 5;  
	left:0;
	width:  auto;
	height: auto;
	}
#orc a, #med a { padding-right: 24px
}
#menu #bil {
	position:absolute;
	right:0;
	background: #c0030b;
	padding:0
}
#menu #bil:before {
	position:absolute;
	left:-2px;
	z-index:3;
	content: url("../images/menu_separ_bil.png");
}


#menu #bil a {
	color:#FFF;
	background: url(../images/menu_red_bg.png) repeat-x;
	padding: 0 13px 0 14px;
	text-shadow: 0 1px 0 #7d0002;
}
#menu #bil img {vertical-align:middle; margin: 0 0 4px 2px}
#menu li ul {position:absolute; width:160px}
#menu a:hover, #menu a:focus {background-position:0 -36px !important;}



/*RUB ACTIVES*/
#accueil #acc, #actu #act, #cont #ctc, #disc #dis, #guid #gui, #hall #hal, #jeun #jeu, 
#musi #mus, #orch li#orc > a, #part #par, #archives #arc a, #disc #dis a {
	background: #000 url(../images/menu_on.png) repeat-x;
	cursor: default;
	color:#fae100;
	text-shadow:none;
}
#accueil #acc:hover, #actu #act:hover, #cont #ctc:hover, #disc #dis:hover, #guid #gui:hover, #hall #hal:hover, #jeun #jeu:hover, 
#musi #mus:hover, #orch li#orc > a:hover, #part #par:hover, #archives #arc a:hover, #media li#med > a:hover {
		background-position: 0 0 !important
}

/*= MENU PROGRAMMATION 
----------------------------------------------------------- */
#prog {
	float:left;
	width:221px;
	margin-right: 26px
}
#prog div  > img:last-child {margin-top:26px}

#prog h2 {margin:0}
#prog h3 {
	position:relative;
	height: 31px; 
	overflow:hidden;
	margin:0
}
#prog h3 a:hover img:first-child, #prog h3 a:focus img:first-child {
	position:relative;
	top: -31px
}
#prog h3 .plus {
	position:absolute;
	right: 8px;
	top: 10px
}

#prog h4 {
	background:#269;
	color:#FFF;
	font-size:1.2em;
	line-height: 2em;
	font-weight:normal;
	padding-left: 12px;
	margin:1px 0 0;
}

#prog h5 {
		font-size: 1.4em; 
		line-height: 1.5em; 
		padding-left: 5px;
		text-align:center;
		margin: 1px 0;
		}
#prog h5 a {
		display:block;
		color:#FFF; 
		text-decoration: none;
		}
#prog h5 a:hover {
		background:#FFF
		}
h5.a a:hover {color: #EE7F00 !important}
h5.b a:hover {color: #0089c2 !important}
h5.c a:hover {color: #BA9E00 !important}
h5.d a:hover {color: #D20035 !important}
h5.dim a:hover  {color: #8A0003 !important}

#prog h6 {
	color:#269; 
	margin-left: 13px; 
	font-size:1.1em;
	}
#prog ol li a, #prog > ul > li > a, #main .toggle ol a {
	display:block;
	padding: .5em 10px .5em 12px; 
	border-top: 1px solid #edecf4;
	border-bottom: 1px solid #c5c4d3;
	color:#2f2f33;
	line-height: 1.3;
	text-shadow: 0 1px 1px #fff;
	text-decoration:none;
	background:#DDD; 
	background-image: -moz-linear-gradient(top, #dfdeeb, #d9d8e6);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #dfdeeb),color-stop(1, #d9d8e6));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdeeb', endColorstr='#d9d8e6'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdeeb', endColorstr='#d9d8e6')"; /* IE8 */
	}
#prog > ul > li > a, #prog ol li a:hover, #prog ol li a:focus, #main .toggle ol a:hover, #main .toggle ol a:focus {
	color: #3a3400;
	border-top-color: #fffa77;
	border-bottom-color: #eed600;
	text-shadow: 0 1px 0 #fffed5;
	background:	#fff61e;
	background-image: -moz-linear-gradient(top, #fff732, #ffe712);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ffe712),color-stop(1, #fff732));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff732', endColorstr='#ffe712'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff732', endColorstr='#ffe712')"; /* IE8 */
	}

#prog li a:hover, #prog li a:focus {background:#fff966}
#prog ol p {
	text-transform: uppercase; 
	margin:0;
	}
#prog ol  p span{
	text-transform: none; 
	color:#006393;
	}
#dates th, #dates td {
	border-bottom: 1px solid #fff; 
	border-left: 1px solid #FFF
}

/*CALENDRIER DATES*/

#dates {
		width: 100%; 
		border-top: 1px solid #FFF;
		}
     #dates a, #dates a:visited {
	 	display: block; 
		padding:2px;
		text-decoration: none; 
		color:#fff;
		width: 21px;
		line-height: 21px;
	}
	 #dates th {
		padding-left: 5px; 
		text-align: left; 
		font-size: .9em;
		font-weight:normal;
		text-align: right;
		padding-right: 7px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		background: #FFF;
		color:#222;
		border-bottom: 1px solid #DDD;
		border-right: 1px solid #CCC;
}

	 #dates td {
		 	text-align: center; 
			background: #d5d5d5;  
			padding:0;
			font-size: .9em
			}
	#dates  a:hover, #dates  a:focus {background:#FFF !important}
	#dates .a:hover, #dates .a:focus {color: #EE7F00}
	#dates .b:hover, #dates .b:focus {color: #0089c2}
	#dates .c:hover, #dates .c:focus {color: #BA9E00}
	#dates .d:hover, #dates .d:focus {color: #D20035}
	#dates .dim:hover, #dates .dim:focus  {color: #8A0003;}
	#dates .ha:hover, #dates .ha:focus  {color: #666}


/*= GLOBAL
------------------------------------------*/
.A, .B, .C, .D {
	display: inline-block;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	width: 1.3em;
	line-height:1.3;
	font-size:1em;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
.A, .a {background: #EE7F00}
.B, .b {background: #0089c2}
.C, .c {background: #BA9E00}
.D, .d {background: #D20035}
.dim  {background: #8A0003;}
.ha  {background: #666}

#main .dim, #main .ha  {
	font-weight:bold; 
	padding: .3em .6em;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	}
.a, .b, .c, .d, .dim, .ha {color:#FFF}

.puce_fleche li {
	padding-left: 18px; 
	background: url(../images/puce.gif) no-repeat 0 .5em;
	}

h1 {
	clear:both;
	color:#151515; 
	text-transform: uppercase; 
	font: 1.55em Frutiger, Helvetica, Arial, sans-serif;
	border-bottom: 2px solid #ffe000;
	padding-bottom: .2em;
	margin-top:0;
	}
#main h2 {
	clear:both;
	color:#111;
	text-transform: uppercase;
	font: bold 1.1em Frutiger, Helvetica, Tahoma, Arial, sans-serif;
	border-top: 1px dotted;
	border-bottom: 1px dotted;
	padding: .5em 0 .4em 2px;
	letter-spacing: 0.05em;
	margin: 1.5em 0 1em;
	background: #FFF
	}
#main h3 {
	color:#111;
	clear:both;
	margin: 1.3em 0 .5em;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0.03em;
}

.btn {
	position:relative;
	display:inline-block;
	line-height: 27px;
	background: #f9dd00;
	color:#111 !important;
	font-weight: bold;
	text-decoration: none;
	font-size: .9em;
	padding: 0 10px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	}
.btn:hover {background: #fff077;}

a {color:#736c00}
a:visited {
	color:#8c8b7e;
}

h1:first-child {margin-top:6px;	}
#concerts_list h1:first-child { border:none; padding-bottom:0}
#concerts_list #main h2 {	
	border:none; 
	background:none; 
	color: #222; 
	text-transform:none; 
	margin: 1.5em 0 0; 
	padding:0; 
	letter-spacing:normal;
	border-top-left-radius: 4px;
	border-top-right-radius:4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	}
span.dim {font-size: .9em; margin-top: -24px !important}

/*#concerts_list h2 + span {font-size: 1.1em}*/
.interp {
	background:#EEE;
	color:#555; 
	padding: .4em 8px;
	margin: 0 0 .4em;
	}
.interp  span:first-child {margin-right: 12px}
#concerts_list #main .prog  {margin-bottom: 1.5em;}
#concerts_list #main .prog p b {
		text-transform:uppercase; 
		color:#2b2e2f; 
		margin-right: 5px; 
		font-weight:normal; 
		font-size: 1.1em
		}
#concerts_list #main .prog p {
		color:#666; 
		margin: .2em 0 .2em 8px;
		}
.A, .B, .C, .D {
	display: inline-block;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	width: 1.3em;
	line-height:1.3;
	font-size:1em;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

.pdf {
	background: url(../images/icone_pdf.gif) no-repeat; 
	padding-left: 21px
}
.doc {
	background: url(../images/icone_doc.png) no-repeat 0 .2em; 
	padding: 2px 0 2px 21px;
}
.puce1, .puces1 li {
	background: url(../images/puce.gif) no-repeat 0 .2em;
	padding-left: 18px
}
.puce2 {
	background: url(../images/puce_date.gif) no-repeat 0 .3em;
	padding-left: 18px
}
p.lettrine:first-letter {
    float : left;
    margin-top : -0.05em;
    font-size: 4em;
    font-weight : bold;
	border: 1px solid:
}

.top {border:0 !important; position:absolute; right: -70px
}
abbr {border:none}
.infos {
	float:left;
	margin: 1em 0;
	border: 1px solid #A4B3B9;
	padding: .8em 1.1em;
	background: #FFF;
	font-style:normal;
}
.numeros {font-weight:bold; font-size: .95em}


#newsletter_btn {
		display:block;
		height: 35px;
		margin-top:15px;
		overflow:hidden;
		}
#newsletter_btn:hover img {position:relative; top: -35px}


/*= C O N T E N T 
------------------------------------------------------------------------------------------------------ */

#abonnement h1 .nb {
		text-transform:none; 
		font-size: 1em; 
		margin-left: 5px; 
		background:none;
		}
#abonnement .btn {float:right; margin-top: -43px}

#abonnement h1 .nb.a {color:#EE7F00}
#abonnement h1 .nb.b {color:#0089C2}
#abonnement h1 .nb.c {color:#BA9E00}
#abonnement h1 .nb.d {color:#D20035}
#abonnement h1 .nb.dim {color:#8A0003}


.concerts_date p {
		overflow:hidden; 
		font-size: 1.05em; 
		letter-spacing:0.1em;
		background: #e9e9e9;
		margin:1px;
		} 
.concerts_date p + p {
		font-size: 1em; 
		letter-spacing: normal;
		background: #f5f4f4;
		padding: 7px 10px 12px;
		} 
.concerts_date p span {float:right; color:#111}
.concerts_date p b { float:left}
.concerts_date p a {
	display:block;
	color: #333; 
	line-height: 2.2em;
	text-decoration:none;
	background:#FFF;
	padding:0 8px;
	}
.concerts_date p span {
	float:right; 
	letter-spacing: 0.04em;
	color: #555;
	}
		

#sidecol .box  {margin-bottom: 13px;}

.box div {
	overflow:hidden;
	padding: 13px; 
	border: 1px solid #C9D1D4;  
	border-top: none;
	background: #FFF;
}

#sidecol h3  {
	color:#151515; 
	font-size: 1.1em;
	border-bottom: 1px dotted;
	padding-bottom: .4em;
	margin-top:0
	}
#sidecol p + h3  {margin-top: 1em}
#sidecol h2 {margin:0}
#sidecol p {margin: 0}
#sidecol .comp {text-transform: uppercase; letter-spacing: -0.01em}
#sidecol .dir {
	color:#707476;
}
#pres #sidecol {display:none}
#pres #main {
		width:auto; 
		margin-right:0; 
		float:none; 
		overflow:hidden;
		}
#pres #dates {display:none}

.conc_head a {color:#111}
.conc_head h2 {background: #DDD !important; padding: 6px !important}
.conc_head h2 a {text-decoration:none  !important}


#videos {
		display:block; 
		margin: 0 0 1em -5px; 
		width: 198px; 
		height: 43px; 
		padding: 18px 20px; 
		font-size: .9em;  
		color:#333000; 
		text-decoration:none; 
		background:url(/images/video_bg2.png) no-repeat;
		}
#videos:hover {background-position: 0 -79px;}


/*FOOTER 
------------------------------------------------------------------------------------------------------ */
#footer {
	position:absolute;
	bottom:0;
	width:100%;
	background: #666; 
	color: #DDD;
	}
#footer .ctr {background: #111; overflow:hidden; padding:0 12px; width:938px}
#footer ul {float:left; margin: .8em 0}
#footer p {float:right}


#footer li {display: inline}
#footer a {color:#DDD; text-decoration:none}
#footer a:hover {text-decoration: underline}
#footer p a {text-decoration: underline}