/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Les Embuscades 2009
Version:	1.0
Creation: 	JLGraphisme
Last change:	01/07/11
-------------------------------------------------------------------*/

body {
	color: black;
	/*background: #ebe9e1;*//**/
	font: normal 80% "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	height:100%;
	background: #339999 url(../img/bg_body2011.jpg) repeat center top ;
}



/* *************************
 *  MISE EN FORME		   *
 ************************* */
 
html, body, ol, ul, form, fieldset {
  margin: 0;
  padding: 0;
  height:100%;
}

a img {
  border: 0;
}

fieldset {
  border: 0;
}

form {
	border: 0;
	margin: 0;
	padding: 10px;;
	list-style:none;
}
form label span { font-size:70%;}
form label {display:block;}
form input {width:300px;}
form textarea {width:300px;}
form#guestbook p {margin:0; padding:0;}
form#contactForm { background:#EBEBEB; padding-left:20px;}
textarea {font: inherit;}

#print { display:none; }
.breaker { clear:both; height:1px; overflow:hidden; }
.hr{border:1px solid #333;}


.imgSmall{ width:60px; float:left; padding:2px 10px 2px 2px; display:block; position:relative; }
.imgMedium{ width:150px; float:left; margin:0 20px 0 0; display:block; position:relative;  }

.imgJP {height:200px;display:block; padding:10px;}
.imgArtiste {
	color:#333;
	background-color:#FFF;
	display:block;
	font-size:14px;
	padding:10px;
	text-decoration:none;
	width:150px !important;
	left:180px;
	float:left;
}
.imgArchAff {float:left; width:30%; margin:0 20px 0 0; border:none;}




/* *************************
 *  Typographie            *
 ************************* */
 
h1 {
border-bottom:1px solid #000;
font-size:140%;
}
h1 span{
color:#0066CC;
}

h2 {
  color: #3b81be;
  margin: 10px 0 15px 0;
  padding: 0px 0 0 0;
  line-height: 1.2;
  font-size: 1.6em;
  font-weight:bold;
}

h3 {
  /*color : #666;
  color: #3b81be;*/
  color: #F44365;
  font-size: 1em;
  font-weight: normal;
  margin: 10px 0 5px 0;
  padding: 10px 0 0 0;
}

h4 {
	font-size: 1.1em;
	margin: 1.5em 0 0.8em 0;
}

h5 {
	font-size: 1em;
	margin: 1.5em 0 1em 0;
}

h6 {
	font-size: 0.8em;
	margin: 0;
}


a {
  color: #3B81BE;
  text-decoration: none;
  position:relative; 
  z-index:1001;
}

a:visited {
  color: #688291;
}

a:hover, a:focus, a:active {
  text-decoration: underline;
}

h2 a {
  color: #FF7800;
}

h2 a:hover, h2 a:focus, h2 a:active {
  text-decoration: none;
  color: #eb5800;
}

span {
  color: #A0A0A0;
  font-size: 0.9em;
  /*text-transform: capitalize;*/
}

.error { color:#990000;}

.br10 {margin-bottom:10px;}/* special cufon */

 



/* ----------------------------- */
/*            Header             */
/* ----------------------------- */

#header {
   background:#000 url(../img/header-bg2011.jpg) 50% 35px no-repeat;
   height:240px;
   display:block;
}

#header h1 a span{
	position:relative;
	margin-top: -80px;
	display:block;
	width:100%;
	height:200px;
	text-indent:-5000px;
	text-align:center;background:url(../img/logo-lesembuscades.png) no-repeat center top;
}

#header h2 {
	margin: 0 0 20px 0; 
	padding: 10px 0 0 0;
	text-align:center;
	color: #FFCC00;
	font-size:180%;
}

#header h3 {
	background:url(../img/num_fest.png) no-repeat center top;
	width:100%;
	height:115px;
	position: absolute;	
	text-align:center;
	left:-390px;
	top:0px;
}

#header h3 span{
	display:none;
	color:#000;
	font-size:110%;
	font-weight:bold;
	line-height:12px;
}



/* Menu principal */
#nav {
  width: 960px;
  height: 40px;
  margin: 0 auto;
  background: #333;
  margin-top:-10px;
  background:url(../img/bg-nav.jpg) no-repeat left top;
}

ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(../img/topnav_bg.gif) repeat-x;
	  
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base--*/
	z-index:2000;
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(../img/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(../img/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px solid #111;
	z-index:2000;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
	z-index:2000;
	position:relative;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(../img/dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(../img/dropdown_linkbg.gif) no-repeat 10px center; 
}

/* ====================================================================
CONTENEURS PRINCIPAUX
-------------------------------------------------------------------- */

#content {
  width: 990px;
  height:100%;
  margin: 0 auto;
  background:  url(../img/bg_main.png) center top repeat-y;
}

#main_content { /* Contenu principal */
  float: left;
  margin-left: 44px;
  margin-bottom: 30px;
  width: 540px;
  padding-top: 1em;
  height:100%;
}

#main_content ul {
  line-height:130%;
  margin-bottom:1.3em;
  margin: 1em 0;
  /*list-style: none;*/
}

#main_content ol {
  margin: 1em 0 1em 24px;
}

#main_content ul li {
  padding-left: 10px;
  background: url(img/ico-puce.png) left 4px no-repeat;
  list-style-position:inside;
}

#main_content li ul, #main_content li ol {
	margin-top: .25em;
	margin-bottom: .5em;
}

#main_content ul ol > li {
	padding-left: 0;
	background: none;
}


#right_content { /* colonne droite tableau */
  margin-right: 16px;
  /*padding-top: 20px;*/
  padding-right:16px;
  width: 359px;
  height:100%;
  background: url(img/bg_newsletter.png) no-repeat left top;
}

#right_content ul {
  list-style-type: none;	
  line-height: 1.4;
  margin-left: 0px;
  margin-right: 0px;
}

#right_content li {
  padding: 0;
  margin: 0;
  color: #333;
  line-height: 1.2;
  list-style-type:none;
  padding-left: 16px;
}

#right_content li span {
  padding: 0;
  margin: 0;
  color: #999;
  line-height: 1.2;
  display:block;
}

#right_content p {
  padding: 0;
  margin: 10px 0 0 0;
}

#right_content #newsletter {
  padding: 0 5px 15px 15px; margin-bottom:40px;
}

#right_content #affiche {
  padding: 0 5px 15px 15px;
}

#right_content #affiche img.affiche {
  width: 200px;
  padding-top: 1em;
}


/* ----------------------------- */
/*            Footer             */
/* ----------------------------- */

#footer {
  clear: both;
  background:#000 url(../img/header-bg2011.jpg) 50% 0px no-repeat;
  min-height: 100px;
  padding: 0 0 20px 0;
  font-size: 0.9em;
  color: #ADADAD;
  padding-top: 25px;
}


#footer a {
  color: #3B81BE;
  text-decoration: none;
}

#footer a:hover, #footer a:focus, #footer a:active {
  text-decoration: underline;
}

#footer-menu {
  height: 53px;
  padding: 0;
  background: #333;
}

#footer-menu p, #footer-mentions p {
  margin: 0;
  padding: 0;
}

#footer-menu ul {
  text-align: right;
  padding: 7px 30px 0 0;
}

#footer-menu ul li {
  display: inline;
  margin-left: 20px;
}

#footer-menu ul a {
  text-decoration: none;
  color: #a5c1d7;
  font-size: 1.4em;
  font-weight: bold;
  font-variant: small-caps;
}

#footer-menu ul a:hover, #footer-menu ul a:focus, #footer-menu ul a:active {
  color: black;
}

#footer-partenaires {
  float: right;
  list-style: none;
  line-height: 1.5;
  text-align: right;
  margin-right: 30px;
  margin-top: 10px;
  width: 580px;
}

#footer-partenaires img {height:30px;}

#footer-mentions { padding-left:10px;}


/* ====================================================================
SPECIFICS
-------------------------------------------------------------------- */

/* icones */
#ico_1{ background:url(../img/icone1.png) no-repeat left top;width:78px; height:55px; text-indent:-3000px; float:right;}/*création*/
#ico_2{ background:url(../img/icone2.png) no-repeat left top;width:78px; height:55px; text-indent:-3000px; float:right;}/*nouveau spectacle*/
#ico_3{ background:url(../img/icone3.png) no-repeat left top;width:78px; height:55px; text-indent:-3000px; float:right;}/*coup de pouce*/
#ico_4{ background:url(../img/icone4.png) no-repeat left top;width:154px; height:18px; text-indent:-3000px; float:right;}/*réservé aux parrains*/

/* tableau tarifs */
#tableau-tarif{ width:548px; background: #000 url(img/tableau-tarifs.png) no-repeat left top; padding:10px; color:#FFF;}
#tableau-tarif .tr1{ background:#333; text-align:center; font-size:90%;}
#tableau-tarif .tr2 td{ border-bottom:1px solid #333; text-align:center; font-size:90%;}

/* Menu droit */
div#menu-droit { position: relative; }
ul.link	 {list-style:none; }
div#menu-droit ul, ul:link	 { background:#333; padding:4px 0 4px 10px; margin-bottom:4px;}
div#menu-droit ul:hover { background:#CCC; border-left:5px solid #666; color:#FFF;}
div#menu-droit ul:hover li { color:#FFF;}
div#menu-droit-bottom { background:url(img/bg_nav_droit_bas.png) no-repeat center top; height:20px; width:100%; text-align:center;}

/* Last news */
div#actualites ul, ul:link{ display:block; margin-bottom:4px; background:#CCC; padding:4px 0 4px 10px; border-left:5px solid #e1031c;}
div#actualites ul:hover { background:#333; border-left:5px solid #666; }
div#actualites ul:hover li {color:#FFF; }
h3.actu{ margin-bottom:-12px; padding:0; font-size:90%; margin-top:20px;}

/* Last comments guestbook */
div#lastguestbook ul, ul:link{ display:block; margin-bottom:4px; background:#CCC; padding:4px 0 4px 10px; border-left:5px solid #e1031c;}
div#lastguestbook ul:hover { background:#333; border-left:5px solid #666; }
div#lastguestbook ul:hover li {color:#FFF; }
h3.lastguestbook{ margin-bottom:-12px; padding:0; font-size:90%; margin-top:20px;}

/* index */
#rss { float:right;}
div#affiche { float:left;}
div#affiche img{ width:200px;}

#intro-index {padding: 10px 0px 15px 0px;}
div#edito{ width:99%;height:300px;border-bottom:1px solid #CCC; margin-bottom:10px; overflow: auto;}

#screenshot{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	z-index:2000;width:150px; 
	}
#screenshot img{width:150px; }

#intro-accueil {padding: 10px 10px 15px 10px;background:#CCC url(../img/bg_intro-accueil.jpg) no-repeat center bottom ;}
#intro-accueil li{background: url(img/ico-puce2.png) left 5px no-repeat;margin-top: .25em;margin-bottom: .5em; }
#inauguration {margin-top:20px; margin-bottom:20px; padding:10px;}
#inauguration h2, h3, h4{margin:0; padding:0;}
#inauguration h3{ color: #CC0000;}
#index_artistes-g{ width:300px; float:left;}
#index_artistes-d{ width:220px; float:right;}

/* index - Spectacles du jour */
#spectacle-du-jour .imgMedium-index{ width:auto; height:100px; margin-bottom:10px;  }
#spectacle-du-jour .bloc{ float:left; margin-right:10px;  }
#spectacle-du-jour .calendrier-bloc { margin-bottom:10px; border-bottom:1px solid #CCC; padding:6px; display:block; float:left; width:100%;}
#spectacle-du-jour .calendrier-bloc:hover{ background: #EEE;}
#spectacle-du-jour .calendrier-bloc h2{ font-size:120%; margin:0; color:#000; }
#spectacle-du-jour .calendrier-bloc h3{ color: #f44365; }

#arts{ background: url(../img/body_bg.jpg) repeat center center; padding:26px;}

/* index - Pub */
ul#pubs  { margin-top:10px; padding:0; width:100%;}
ul#pubs li { display:block; margin-bottom:4px; background:#CCC; padding:0px;}

/* index - col droite */
div.bloc { display:block; margin-bottom:4px; background:#CCC; padding:4px 0 4px 10px; border-left:5px solid #e1031c;}
div.bloc:hover { background:#333; border-left:5px solid #666; }
h3.bloc{ margin-bottom:-12px; padding:0; font-size:90%; margin-top:20px;}

/* index - bonus */
div.bonus { display:block; margin-bottom:4px; padding:20px;
background: #333333; color:#FFF;}

/* index - jeune public */
#jp{ height:270px; overflow:auto; }

/*  Boîte */ 
.boxgrid{
position:relative;
border:solid 3px #363636;
width:300px;
height:200px;
overflow: hidden; 
float:left;
background:#161613; 
margin:20px;
}

.boxgrid img{ 
position: absolute; 
top: 0; 
left: 0; 
border: 0; 
width:300px;
}


/*  Légende cachée */ 
.boxcaption {
position:absolute;
top:240px;
left:0px;/*important pour IE6 et 7*/
height:120px;
width:100%;
background-color: #000000;
padding:5px;
opacity:0.8;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  /*  IE 5-7 */  
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*  IE 8 */  
}

/* Légende Semi-apparente */ 
.caption .boxcaption {
position:absolute;
top:210px;
}

/*livre d'or*/
div#guestbook { margin-bottom:10px; background: url(img/bg_gris.jpg) repeat-x 0 0; border-bottom:1px solid #CCC; padding:6px; display:block;}

/* Programme */
#calendrier{}
#calendrier-bloc {display:block; width:100%; border-bottom:1px solid #CCC; padding:6px;  }
#calendrier-bloc:hover{ background: #EEE;}
#calendrier-bloc h2{ font-size:180%; margin:0; color:#000; }
#calendrier-bloc h3{ color: #f44365; }
#spectacleDesc {float:right; width:90%; padding-top:20px;}
#spectacleDesc h3 span{font-size:70%;}
#autreDates {background-color:#FFF; margin:20px 0 0 0; padding:4px;}
#supArtiste{ color:#999;}
h2.bg_noir  { display:block; background:#333; margin:10px 0 20px 0; padding:10px; color:#00CCFF;}

p.post-date{
  font-weight:bold;  
  width: 38px;
  height: 38px;
  display: block;
  margin: 0 10px 0 0;
  padding: 0;
  position: relative;
  text-align: center;
  float: left;
  line-height: 100%;
  background: #fff url(../img/date-bg.png) no-repeat left bottom;
  border: 1px solid #fff;
}

.post-date span.month{
  background: #f44365;
  border-bottom: 1px solid #fff;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 85%;
  padding: 2px 0;
  text-transform: uppercase;
}

.post-date span.day{
  bottom: 1px;
  padding: 3px 0;
  left: 0;
  width: 100%;
  position: absolute;
  color:#000;
}

/* newsletter */
#newsletter {display:block; width:94%; border-bottom:1px solid #CCC; padding:6px; background:#333; }
#newsletter:hover{ background: #EEE;}
form#newsletter{ margin:0px; padding:0px;}
form#newsletter input{ width:150px;}
#newsletter_btn{ margin-top:0px; display:block; float:left; margin-left:0px; width:20px;}

/* nuit de l'humour */
h2.nuit-humour  { display:block; background:#333; margin:50px 0 20px 0; padding-left:10px;}

/* archives */
#auteurAfficheArchives{float:left; display: block; position:absolute; margin-top:0px; color:#FFF; padding-left:2px; background-color:#000;width:160px;}
#spectacleDescArchives {float:left; width:65%;}
.archFest {float:left; width:160px; height:200px; margin-right:10px; margin-bottom:5px; text-align:center; display:block;}
p.navArch{ float: left; margin-bottom:20px;}
#navArch_prec span{width: 130px; float:left; display:block; background:#333; text-align: center;}
#navArch_index span{width: 130px; float:left; display:block; background:#333; margin-right:10px; text-align: center;}
#navArch_prec span:hover, #navArch_index span:hover{ background: #666; color:#000;}

/* partenaires */
div#partenaires a{ padding:4px; margin:4px; display:block; float:left;}
div#partenaires a:hover{ background:#CCC;}

/* compteur de visites */
#compt-visites{padding-left:10px; font-size:150%;}

/* reseaux sociaux */
div#reseaux-sociaux{ float:left; padding-left:20px;display:block; width:100%; margin-bottom:10px;}
div#reseaux-sociaux ul{list-style:none; float:left;}
div#reseaux-sociaux ul li{text-indent:-5000px; display:block; width:50px; height:50px; float:left;}
div#reseaux-sociaux ul li#myspace{background:url(../img/myspace-50x50.png) no-repeat left top;}
div#reseaux-sociaux ul li#twitter{background:url(../img/twitter-50x50.png) no-repeat left top;}
div#reseaux-sociaux ul li#RSS{background:url(../img/rss-50x50.png) no-repeat left top;}