/* http://www.la-brante.ch   © Sˇbastien STEVAN & La Brante 2009 */

@media all {
	/* MISE EN PAGE*/
	#cadre{
		width: 1000px;
	}
	div#wrapper{
		width: 1000px;
		margin-left: 10px;	
		margin-right: 0;
		padding: 0;
	}
	html>body div#wrapper{
		margin-left: auto;
		margin-right: auto;
	}
	div#outer{
		width: 1000px;
		margin:0;
		padding: 0;
	}
	div#inner{
		width: 955px;
		margin-left: 15px;
	
	}
	html>body div#inner {
		width: 970px;
	} 
	#title{
		width: 770px;
		margin-left:100px;
		padding-left:60px;
		padding-top: 5px;
		background: url(pictures/brante.gif) no-repeat;
		background-position: left bottom;
	}
	#bernex{
		width: 870px;
		background: url(pictures/bernex.gif) no-repeat;
		background-position: right bottom;
	
	}
	#menu {
		width: 970px;
		background-color: #006600;
		height: 22px;
		padding-left: 100px;
		padding-right: 99px;
	}
	html>body div#menu {
		width: 771px;
	} 
	#body {
		width: 970px;
		padding-left: 100px;
		padding-right: 100px;
		font-family:  Baskerville,serif;
		color: #333333;
		font-size: 18px;
		text-align: justify;
		margin: 0;
	}
	html>body #body {
		width: 770px;
	} 
	
	/* AFFICHAGE SUR DEUX COLONNES*/
	#margin {
		float: left;
		width: 200px;
		padding-right: 50px;
		text-align: right;
		margin: 0;
		padding-left: 0;
	}
	#main {
		float: left;
		width: 510px;
		padding-left: 10px;
		margin: 0;
		padding-right: 0;
	}
	#separator{
		width: 770px;
		clear: left;
	}
	
	/* BOUTONS */
	#buttons{
		float:left;
		width: 770px;
		border-left: solid 1px #FFFFFF;
		border-right: solid 1px #FFFFFF;
	}
	html>body #buttons {
		width: 768px;
	} 
	a.button {
		margin: 0px;
		padding: 0px;
		font-family: Baskerville,serif;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		text-align: center;
		border-left: solid 1px #FFFFFF;
		border-right: solid 1px #FFFFFF;
		background-color: #006600;
		color: #FFFFFF;
		text-decoration: none;
		width: 192px;
		height:22px;
		float: left
	}
	html>body a.button {
		width: 190px;
	} 
	
	a.button:hover {
		color: #FFFFFF;
		background-color: #CCCC00;
	}
	/*POLICES DE BASE */
	p {
	 	font-family:  Baskerville,serif;
	 	font-size: 18px;
	 	color: #333333;
		text-align: justify;
		margin-top: 0px;
	}
	
	td {
		margin: 0px;
		padding: 4px;
		font-family:  Baskerville,serif;
		font-size: 15px;
		color: #333333;
		text-align: left;
	}
	/* LIENS */
	a{
		color: #333333;
		text-decoration: underline;
	}
	a:hover {
		color: #333333;
		text-decoration: none;
	}
	a.top, a.top#hover {
		color:#006600;
		text-decoration: none;
	}
	
	/* TITRES */
	h1 {
		font-family: Baskerville,serif;
		font-weight: bold;
		text-align: left;
		border: none;
		color: #CCCC00;
		padding-top: 0px;
		padding-bottom: 13px;
		margin-top: 2px;
		margin-bottom: 0px;
		padding-left: 100px;
		font-size: 60px;
		font-variant: small-caps;
	}
	h2 {
		font-family: Baskerville,serif;
		font-weight: bold;
		text-align: left;
		border: none;
		color: #CCCC00;
		padding-top: 0px;
		padding-bottom: 15px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 100px;
		font-size: 38px;
	}
	h3 {
		font-family: Baskerville,serif;
		font-weight: bold;
		font-size: 20px;
		color: #006600;
		text-align: right;
		margin-bottom: 5px;
	}
	
	/* LISTE AVEC CLE DE SOL */
	ul#list {
		list-style-type: none;
		padding-left: 0px;
		margin-top: 0px;
		padding-bottom:0px;
		margin: 0px;
	}
	ul#list li{
		padding-top: 0px;
		padding-bottom: 15px;
		padding-left: 30px;
		font-family:  Baskerville,serif;
		font-size: 18px;
		color: #333333;
		background: url(pictures/puce.gif) no-repeat;
		margin: 0px;
	}
	
	/* FENETRES D'INFORMATION */
	div.description {
		visibility:hidden
	}
	div.description {
		position:absolute;
		background-color: white;
		width:300px;
		padding: 5px;
		border: 1px solid #006600;
	
	}
	div.description td {
		color: #006600;
		font-family: Verdana, Arial, sans-serif;
		font-size: 12px;
		margin: 0px;
		padding: 0px;
	}
	
	/* LECTEUR AUDIO/VIDEO */
	div.media{
		display: none;
	}
	div.media{
		position: absolute;
		background-color: white;
		padding: 0;
		width: 400px;
		z-index: 100;
		border-bottom: 1px solid #CCCC00;
		border-left: 1px solid #CCCC00;
		border-right: 1px solid #CCCC00;
	}
	div.mediaTitle{
		width:400px;
		height: 24px;
		background: url(pictures/close.png);
		color: white;
		font-weight: bold;
		padding-top: 4px;
	}
	html>body div.mediaTitle{
		height: 20px;
	}
	div.mediaBody{
		padding: 10px;
		width: 400px;
	}
	
	/* COUCHE SOMBRE */
	div#overlay{
		display: none;
	}
	div#overlay{
		z-index: 90;
		background: url(pictures/overlay.png);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		opacity: 0.8;
		filter: alpha(opacity='56');
	}
}

@media screen {
	#cadre{
		background: url(pictures/border.png) repeat-y;	
	}
	div#outer{
		background: url(pictures/middle.png) repeat-y;	
	}
}

@media print{
	img.background{
		display: none;
	}
	html>body #buttons {
	 	width: 773px;
	} 
}