/* Start of CMSMS style sheet 'defaut' */
/* accessibility */
/* menu links accesskeys */
span.accesskey {
	text-decoration: none;
}
/* accessibility divs are hidden by default, text, screenreaders and such will show these */
.accessibility, hr {
/* position set so the rest can be set out side of visual browser viewport */
	position: absolute;
/* takes it out top side */
	top: -999em;
/* takes it out left side */
	left: -999em;
}
/* definition tags are also hidden, these are also used for accessibility menu links */
dfn {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0;
	height: 0;
	overflow: hidden;
	display: inline;
}
/* end accessibility */
/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
	position: absolute;
	left: -5000px;
	width: 4000px;
}
a.external {
/* make some room for the image, css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
	padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
	color: #18507C;
/* background image for the link to show wiki style arrow */
	background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:visited {
	color: #18507C;
/* a different color can be used for visited external links */
/* Set the last 0 to -100px to use that part of the external.gif image for different color for active links external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.*/
	background: url(images/cms/external.gif) no-repeat 100% -100px;
}
a.external:hover {
	color: #18507C;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
	background: url(images/cms/external.gif) no-repeat 100% 0;
	background-color: inherit;
}
/* end wiki style external links */
/* clearing */
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clear {
	height: 0;
	clear: both;
	width: 90%;
	visibility: hidden;
}
#main .clear {
	height: 0;
	clear: right;
	width: 90%;
	visibility: hidden;
}
* html>body .clearfix {
	display: inline-block;
	width: 100%;
}
* html .clear {
/* Hides from IE-mac \*/
	height: 1%;
	clear: right;
	width: 90%;
/* End hide from IE-mac */
}
/* end clearing */

/* 
* Easy front-end framework
* Copyright (c) 2009 Alen Grakalic
* http://easyframework.com/license.php
*/

/* HTML elements  */		

	h1, h2, h3, h4, h5, h6{
		font-weight:normal;
		margin:0;
		line-height:1em;
		}	
	h1{font-size:2em;margin-bottom:.5em;}	
	h2{font-size:1.75em;margin-bottom:.5em;padding-top:.2em;}	
		h2 span{display:none;}
	h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
	h4{color:#f2a811;font-size:1.25em;margin-bottom:.6em;}
	h5,h6{color:#f00;font-size:1em;margin-bottom:.5em;font-weight:bold;}
	
	p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
	ul, ol, dl{padding:0;}
	ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
	li{margin:0 0 0 2em;display:list-item;list-style-position:outside;}	
	blockquote, dd{padding:0 0 0 2em;}
	pre, code, samp, kbd, var{font:100% mono-space,monospace;}
	pre{overflow:auto;}
	abbr, acronym{
		text-transform:uppercase;
		border-bottom:1px dotted #000;
		letter-spacing:1px;
		}
	abbr[title], acronym[title]{cursor:help;}
	small{font-size:.9em;}
	sup, sub{font-size:.8em;}
	em, cite, q{font-style:italic;}
	img{border:none;}			
	hr{display:none;}	
	table{width:100%;border-collapse:collapse;}
	th,caption{text-align:left;}
/* //  HTML elements */	

/* common */		
	
	.left{float:left;margin-right:1em;}
	.right{float:right;margin-left:1em;}
	.center{text-align:center;}
	.hidden, .print{display:none;}

/* base */
	
	body, table, input, textarea, select, li, button{
		font:1em Arial, Sans-Serif;
		line-height:1.5em;
		color:#333;
		}		
	body{
		font-size:90%;
		background:#14a0f0 url(images/design/bg_bleu.jpg) repeat-x left top;
		margin:0;
		padding:0;
		text-align:center;
		}	
	a, a:visited{
		text-decoration:none;
		color:#06C;
		outline:none;
		}
	a:hover{color:#999;}
	a img{border:none;}
	ins{text-decoration:none;color:#900;font-style:italic;}
	code{color:#555;}
	pre{
		margin-left:2em;
		padding-left:2em;
		border-left:1px solid #ccc;
		}
	blockquote{
		margin-left:2em;
		border-left:1px solid #ccc;
		font-style:italic;
		}	
	dt{font-weight:bold;}
	th, td{padding:.25em .5em;line-height:1.5em;}		
	caption{font-style:italic;color:#777;margin:.5em 0;}	
	fieldset{
		border:1px solid #ccc;
		padding:1em 2em;
		margin:0 0 1.5em 0;
		}
	legend{padding:2px 5px;}	
	form div.col{clear:none;}form div.first{clear:both;}
	form div{overflow:hidden;}
	
	input[type="text"], input[type="password"], textarea, .field, .area, select{
		border:1px solid #aaa;
		padding:3px;
		background:#fff;		
		}
	select{width:312px;}
	textarea, .area{overflow:auto;height:50px; width:180px;}
	input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus, .focus{background:#f5f5f5;outline:none;}
	.submit{}
	button{
		border:none;
		background:#560001;
		color:#fff;
		padding:0 2.5em;
		height:2em;
		line-height:2em;
		cursor:pointer;
		}
		
	.note, .success, .error{display:block;}
	.error{color:#900;}
	.success{color:#060;}
	.note{font-weight:bold;}

/* base */

a .desc_video{
	color:#555;
	display:block;
	font-size:.8em;
	font-weight:600;
	text-align:center;
	width:120px;
}

/* layout */

#container { 
	background-color: rgb(255, 255, 255); /* alternative solide */ 
	background:rgba(255, 255, 255, 0.5); /*#a1d9f9 transparent url(images/design/bg_content.png) repeat-x left top*/
	width: 960px;  
	margin: 0 auto; 
	text-align: left; 
} 
.message{
	color:#f00;
	font-weight:bold;
	background:#fff;
	display:block;
	padding:5px 10px;
	margin:.5em;
} 

#header { 
	display:block;
	padding:92px 0 0;
	position:relative;
	overflow:visible;
} 
	#header h1 {
		background:url(images/design/logo_7vague.png) no-repeat left top;
		height:119px;
		margin: 0;
		padding:0; 
		left:-8px;
		position:absolute;
		top:0;
		width:294px;
	}
		#header h1 a{
			display:block;
			height:92px;
			margin: 0 0 0 8px;
			width:960px;
		}

		#header h1 span{display:none}
		
#sidebar1 {
	float: right; 
	width: 185px; 
}
 #mainContent { 
	margin: 0 185px 0 0; 
	padding: 0; 
} 

#infos{
	margin:.5em auto 0;
	width:180px;
	text-align:center;
	}
	
#player{
	background:url(images/design/bg_player.png) no-repeat left;
	height:248px;
	margin:5px auto 0;
	padding:6px 5px 0 2px;
	width:162px;
}

a#benevolat{
	background:url(images/design/bg_benevolat.png) no-repeat left top;
	color:#333;
	display:block;
	height:30px;
	font-size:.75em;
	line-height:1em;
	margin:5px auto;
	padding:35px 40px 5px 10px;
	width:129px;
}

	a#benevolat:hover,a#benevolat:active{
		color:#f00;
	}

#goodies a{
	background:url(images/design/bg_goodies.png) no-repeat left top;
	color:#333;
	display:block;
	height:30px;
	font-size:.75em;
	line-height:1em;
	margin:5px auto;
	padding:35px 10px 5px 70px;
	width:98px;
}

#goodies a:hover,#goodies a:active{
	color:#fff;
}

/*mainContent */

#mainContent h3{
	margin:4px 0 5px;
	padding:.5em 0 0;
}
#mainContent p{font-size:.9em;}
#mainContent p a{color:#f00;}
#mainContent dt{
	display:inline;
	float:left;
	width:100px;
}
#mainContent dd{
	color:#777;
	font-size:1.3em;
	font-weight:bold;
}

#mainContent ul{
	list-style-type:square;
	margin:0 .5em .5em .5em;
	padding:0;
	font-size:.9em;
}
#mainContent ul li{
	margin:0 0 3px;
	padding:0;
}

/* TITRES */

#h2contact{
	background:url(images/design/contact.png) no-repeat left top;
height:20px;
	margin:.5em 0 0 .6em;
}

#h2benevoles{
	background:url(images/design/benevolat.png) no-repeat left top;
	margin:.5em 0 0 .6em;
	padding:14px 0;
}

#h2partenaires{
background:url(images/design/partenaires.png) no-repeat left top;
margin:.5em 0 .5em .6em;
padding:12px 0;
position:absolute;
width:150px;
}


h2#infospratique{
background:url(images/design/infos_pratiques.png) no-repeat left top;
margin:.5em 0 .5em .3em;
padding:12px 0;
position:absolute;
width:200px;
}

#h2billeterie{
background:url(images/design/billetterie.png) no-repeat left top;
margin:0;
padding:12px 0;
position:absolute;
top:-5px;
width:110px;
}

#h2plan{
background:url(images/design/plan_acces.png) no-repeat left top;
margin:0;
padding:12px 0;
position:absolute;
top:-5px;
width:125px;
}

#h2hebergement{
background:url(images/design/hebergement.png) no-repeat left top;
margin:0;
padding:12px 0;
position:absolute;
top:-5px;
width:127px;
}

#h2ecolo{
background:url(images/design/demarche-environnementale.png) no-repeat left top;
margin:0;
padding:12px 0;
position:absolute;
top:-5px;
width:267px;
}

#h2transport{
background:url(images/design/transport.png) no-repeat left top;
margin:0;
padding:12px 0;
position:absolute;
top:-5px;
width:105px;
}

/* programmation */
#h2programmation{
	background:url(images/design/programmation.png) no-repeat left top;
	margin:.5em 0 1em .6em;
	height:20px;
width:185px;
}

#h2souvenirs{
	background:url(images/design/souvenirs.png) no-repeat left top;
	height:25px;
	margin:.5em 0 0 .6em;
	text-indent:-60000px;
width:125px;
}

#h2autresmanifs{
	background:url(images/design/autres_manifs.png) no-repeat left top;
	height:30px;
	margin:.5em 0 0 .6em;
	text-indent:-60000px;
}

/* background extensible */

#top_extensible{
	background:transparent url(images/design/bg_contenu_extensible_big_01.png) no-repeat left top;
	display:block;
	margin:10px 0 0 10px;
	height:8px;
	padding:0;
}
#mid_extensible{
	background:url(images/design/bg_contenu_extensible_big_02.png) repeat-y;
	margin:0 0 0 10px;
	padding:0 10px 1px;
}
#bottom_extensible{
	background:url(images/design/bg_contenu_extensible_big_05.png) no-repeat left top;
	margin:0 0 0 10px;
	padding:10px 0 0;
}

#top_extensible_moyen{
	background:transparent url(images/design/bg_contenu_extensible_01.png) no-repeat left top;
	display:block;
	margin:0 0 0 0;
	padding:12px 0 0;
}
#mid_extensible_moyen{
	background:url(images/design/bg_contenu_extensible_03.png) repeat-y;
	margin:-4px 0 0;
	padding:0 10px 1px;
}
#bottom_extensible_moyen{
	background:url(images/design/bg_contenu_extensible_05.png) no-repeat left top;
	margin:0;
	padding:10px 0 0;
}
/* boite modale */
.modal { 
    background-color:#fff; 
    display:none; 
    width:350px; 
    padding:15px; 
    text-align:left; 
    border:2px solid #333; 
    opacity:0.8; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    -moz-box-shadow: 0 0 50px #ccc; 
    -webkit-box-shadow: 0 0 50px #ccc; 
} 
 
	.modal h2 { 
		background:url(images/info.png) 0 50% no-repeat; 
		margin:0; 
		padding:10px 0 10px 45px; 
		border-bottom:1px solid #333; 
		font-size:20px; 
	}

	.modal p{
		font-size:.8em;
		padding:5px 10px;
	}
	
	.modal form{
		margin:0 auto;
		text-align:center;
		width:250px;
	}

/*formulaire */
	.modal form input[type="text"]{
		display:block;
		margin:0 0 5px;
		width:150px;
	}
	.modal form label{
		float:left;
		font-size:.8em;
		margin:0 .5em 0 0;
		width:70px;
	}
	.modal button{
		border:none;
		background:#fff;
		color:#333;
		padding:0;
	}
 

#footer { 
	background:#f2a811 url(images/design/silhouettes.gif) no-repeat 15px center; 
	color:#fff;
	padding: 10px; 
	text-align:right;
} 
	#footer a,#footer a:visited {
		cursor:help;
		color:#fff;
		font-size:.7em;
		margin: 0;  
	}
	#footer a:hover,#footer a:active{
		border-bottom:2px dotted #666;
		color:#666;		
	}
	#footer #social{
		background:url(images/design/rejoignez-nous.gif) no-repeat right center;
		float:left;
		margin-left:110px;
		width:295px;
	}
		#footer #social a{
			background:url(images/design/social.gif) no-repeat;
			cursor:pointer;
			display:block;
			float:left;
			height:29px;
			margin:0 2px;
			width:27px;
		}
		#footer #social a:hover{border:none;outline:none;}
		#footer #social a span{display:none;}
		#social a#myspace{background-position:-58px -29px;}
		#social a#myspace:hover{background-position:-58px 0;}
		#social a#flickr{background-position:-29px -29px;}
		#social a#flickr:hover{background-position:-29px 0;}
		#social a#twitter{background-position:-88px -29px;}
		#social a#twitter:hover{background-position:-88px 0;}
		#social a#facebook{background-position:1px -29px;}
		#social a#facebook:hover{background-position:1px 0;}
/* End of 'defaut' */