*
{
padding: 0;
margin: 0;
}

html {
color:#463b2e;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
overflow-x: hidden;
}

body {
font-size: 70%;

}

a {
color:#463b2e;
}

a:hover{
color:#ED1E26;
text-decoration: none;
}

#static img{
	padding:10px;
}

.clear { clear: both; }

#mainContainer {
min-height: 300px;
background: #4D1B12;
}

* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

/**************************
HEADER
**************************/
#header {
background: #e8bf91;
}

#logo{
	background-color: #4D1B12;
	width: 100%;          /* LC width */
	height:158px;
}

#topborderpadding{
	background:#4D1B12 url('../../images/roundboxtopborderpadding.jpg');
	background-repeat:repeat-x;
	float:right;
	width:100%;
}

#topRightSidebar{
	background: url('../../images/top_right.jpg') top left no-repeat;
	width: 316px;          /* RC width */
	margin-right: -316px;  /* RC width */
	height:158px;
}

#headContainer {
	padding-right: 316px;  /* RC width */
	background:#FFF;
}

#headContainer .column {
	position: relative;
	float: left;
}

#photo{
	background:#888;
	width:215px;
	height:131px;
	margin:27px 0 0 65px ;
}

/**************************
CONTENT AND COLUMNS
**************************/
.outer {
border-left: 198px solid #4D1B12; /*** This is the width and the color for our left column ***/
border-right: 316px solid #4D1B12; /*** This is the width and the color for our right column ***/
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 100%; 
}
* html .inner {
/*** No need for hacking IE on this layout ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/

.float-wrap {
float: left;
width: 100%;
margin-left: -198px; /*** Same length as .outer border-left but with negative value ***/
}

* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}

#content {
float: right;
background: #9FDAE0;
margin-right: -198px;  /*** Same length as .outer border-left but with negative value ***/
width: 100%;
}

* html #content {
position: relative;
}
.contentWrap{
padding: 15px;
min-height:649px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}

/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
background:#4D1B12 url('../../images/FG_gauche.jpg') top left no-repeat;
float: left;
width: 198px;
min-height: 679px;
}
* html #left {
position: relative;  /*** IE needs this  ***/
height: 679px;
width:158px;
}

#menu{
	padding:0 0 0 5px;
}

#menu li{
	color:#FFF;
	font-family:arial, sans-serif;
	font-size:12px;
	font-weight:bold;
	margin:8px 0 0 0;
}

#menu a{
	color:#FFFAE6;
	font-family:arial, sans-serif;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
}
#menu ul ul li{
	margin:0;
}

#menu ul ul li a{
	font-size:11px;
	font-weight:normal;
}

#menu a:hover{
	color:#ED1E26;
}

#menu ul ul li a:hover{
	text-decoration:underline;
}

#menu ul{
	padding:2px 10px;
	list-style-type:none;
	list-style-image:none;
	list-style-position:outside;
	margin:0;
}

/*************************
RIGHT COLUMN
**************************/

#right {
background:url('../../images/mid_right.jpg') top right no-repeat;
float: right; 
width: 316px;
/*padding: 5px;*/
min-height: 642px;
margin-right: -316px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/
}

* html #right {
height: 679px;
position: relative;  /*** IE needs this  ***/
}

#player{
	background:#888;
	width:248px;
	height:165px;
	margin:15px 42px 10px;
}

#sidebarEvents{
	border:#82694c 1px solid;
	width:238px;
	height:106px;
	margin:132px 42px 10px;
	padding:5px;
	color:#463b2e;
}

#sidebarEvents a,#links a{
	color:#463b2e;
	text-decoration:none;
}

#sidebarEvents a:hover,#links a:hover{
	color:#ED1E26;
}

#mailingList{
	border:#82694c 1px solid;
	width:238px;
	height:55px;
	margin:15px 42px 10px;
	padding:5px;
	color:#463b2e;
}

#links{
	border:#82694c 1px solid;
	width:238px;
	height:70px;
	margin:15px 42px 10px;
	padding:5px;
	color:#463b2e;
}

.rSideBar{
	font-family:arial, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin:5px;
}

.title{
	font-family:arial, sans-serif;
	font-size:15px;
	font-weight:bold;
	margin:5px 0;
	color:#463b2e;
}

.readMore{
	font-size:10px;
}

hr{
	margin:2px 0 5px 0;
}

p{
	font-family:arial, sans-serif;
	font-size:13px;
	margin:5px 0 15px 0;
}

.breadcrumbs{
	font-family:arial, sans-serif;
	font-size:11px;
	margin:0 0 10px 0;
}

.date{
	font-family:arial, sans-serif;
	font-size:10px;
	margin:0 0 15px 0;
}

#whatIsFesti{
	padding:6px;
	border:#666 1px solid;
	margin:0 0 30px 0;
}

/*********************
Events 
**********************/

#events{
	border-left:transparent 200px solid;
	border-right:transparent 10px solid;
	padding-right:27px;
	margin:10px 0;
}

#affiche_events{
	float:left;
	margin-right:-10px;
	margin-left:-198px;
}

#info_events{
	border:#82694c 1px solid;

	float:left;
	padding:10px;
	width:100%;
	margin-right:-10px;
	margin-left:15px;
}

#old_festi{
	clear:both;
	border:#82694c 1px solid;
	padding:10px;
	margin:10px 0;
	text-align:center;
}

#old_festi a{
	text-decoration:none;	
}

#old_festi a:hover{
	color:#ED1E26;
}

#old_festi ul{
	margin:0 auto;
	list-style-type:none;
	list-style-image:none;
	list-style-position:outside;
	text-align:left;
	width:360px;
}

#old_festi li{

}

#futur_festi{
	clear:both;
	border:#82694c 1px solid;
	padding:10px;
	margin:10px 0;
	text-align:center;
}

#futur_festi a{
	text-decoration:none;	
}

#futur_festi table{
	width:100%;
	border:#82694C 1px solid;
	border-collapse:collapse;
}

#futur_festi th, #futur_festi td{
	border:#82694C 1px solid;
	text-align:left;
	padding:5px;
}

/*********************
Jquery Fade
**********************/

.pics {  
	height:131px;  
	width:215px;  
	padding:0;  
	margin:0;  
} 
 
.pics img {  
	border:1px solid #ccc;  
	background-color:#eee;  
	width:215px; 
	height:165px; 
	top:0; 
	left:0; 
}

#slideshow img{
	width:215px;
	height:165px;
}

/**************************
FOOTER
**************************/
#footer {
text-align: center;
background-color: #4D1B12;
height:40px;
color:#FFFAE6;
}

#footer p{
	padding:12px;
	font-size:12px;
	font-weight:bold;
}

/***********************
CONTACT FORM
************************/

#contact{
	background:#FFF;
	height:420px;
	width:380px;
	margin:20px auto 20px;
	border:#CCC solid 2px;
	padding:25px;
}

#contact label{
	float:left;
	width:110px;
	margin:0 12px 0 0;
	padding:7px 0 0 0;
}

#contact input, #contact textarea{
	width:370px;
	border:#CCC solid 2px;
	padding:5px;
	margin:0 0 10px;
}

#contact .submit-button{
	float:right;
	width:100px;
	cursor:pointer;
}

/*#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}*/

#contact .contactTitle{
	font-size:160%;
	margin:0 0 10px 0;
}

/***********************
GALLERY PHOTO/VIDEO
************************/

#gallery td{
	text-align:center;
	padding:6px;
}

/***********************
ARTISTES
************************/

#artistes{
	border-left:transparent 200px solid;
	border-right:transparent 10px solid;
	padding-right:27px;
	margin:10px 0;
}

#artistesImg{
	float:left;
	margin-left:-198px;
	width:200px;
}

#info_artistes{
	padding:0 0 10px 10px ; 
}

#groupeList{
	clear:left;
}