/* Feuille de styles CSS - leclownalexio.com - Design Moise Marcoux-Chabot - 2009 */

body {
	background-color:#000000;
	color:#FFFFFF;
	margin:0;
	padding:0;
	}

#page {
	margin: 0 auto;
	width: 955px;
	}
	
ul, li {
	list-style-type:none;
	margin:0;
	padding:0;
	}
	
#menu li {
	display:inline;
}
	
#menu li a {
	text-indent:-900%;
	overflow:hidden;
	height:75px;
	float:left;
	text-align:center;
	margin:0;
	padding:0;
	}
	
#menu {
	margin:0;
	padding:0;
	height:75px;
	}
	
#menu li a#menu_accueil {
	background:url(/img/menu/menu_accueil.jpg) no-repeat;
	width: 120px;
	}
#menu li a#menu_clowns {
	background:url(/img/menu/menu_clowns.jpg) no-repeat;
	width: 160px;	
	}
#menu li a#menu_spectacles {
	background:url(/img/menu/menu_spectacles.jpg) no-repeat;
	width: 150px;	
	}
#menu li a#menu_animations {
	background:url(/img/menu/menu_animations.jpg) no-repeat;
	width: 160px;
	}	
#menu li a#menu_videos {
	background:url(/img/menu/menu_videos.jpg) no-repeat;
	width: 110px;
	}
#menu li a#menu_photos {
	background:url(/img/menu/menu_photos.jpg) no-repeat;
	width: 120px;	
	}		
#menu li a#menu_contact {
	background:url(/img/menu/menu_contact.jpg) no-repeat;
	width: 135px;	
	}
	
#menu li a#menu_accueil:hover, #accueil #menu li a#menu_accueil  {
	background-position: left bottom;
	}
#menu li a#menu_clowns:hover, #clowns #menu li a#menu_clowns {
	background-position: left bottom;
	}
#menu li a#menu_spectacles:hover, #spectacles #menu li a#menu_spectacles {
	background-position: left bottom;
	}
#menu li a#menu_animations:hover, #animations #menu li a#menu_animations {
	background-position: left bottom;
	}	
#menu li a#menu_videos:hover, #videos #menu li a#menu_videos {
	background-position: left bottom;
	}
#menu li a#menu_photos:hover, #photos #menu li a#menu_photos {
	background-position: left bottom;
	}	
#menu li a#menu_contact:hover, #contact #menu li a#menu_contact {
	background-position: left bottom;
	}

#content {
	width:900px;
	margin:0 auto;
	}
	
#colonne_droite {
	width:400px;
	margin: 75px 75px 0 0;
	float:right;
	}
	
p {
	font-family: 'Trebuchet MS', Arial, Helvetica;
	font-size:16px;
	text-align:justify;
	}
	
h1 {
	font-family: 'Trebuchet MS', Arial, Helvetica;
	font-size:30px;
	text-align:center;
	}
	
h2 {
	font-family: 'Trebuchet MS', Arial, Helvetica;
	font-size:20px;
	text-align:left;
	}

.hidden {
	display:none;
	}

#accueil a, #accueil a:hover, #accueil a:visited, #accueil h1, #accueil h2 {
	color:#FFF;
}
#clowns a, #clowns a:hover, #clowns a:visited, #clowns h1, #clowns h2 {
	color:#F00;
}
#spectacles a, #spectacles a:hover, #spectacles a:visited, #spectacles h1, #spectacles h2 {
	color:#0F0;
}
#animations a, #animations a:hover, #animations a:visited, #animations h1, #animations h2 {
	color:#FF0;
}
#videos a, #videos a:hover, #videos a:visited, #videos h1, #videos h2 {
	color:#F60;
}
#photos a, #photos a:hover, #photos a:visited, #photos h1, #photos h2 {
	color:#0FF;
}
#contact a, #contact a:hover, #contact a:visited, #contact h1, #contact h2 {
	color:#00F;
}



a img {
	border:none;
}
.gauche {
	float:left;
	margin-right: 20px;
	margin-bottom: 10px;
	clear:both;
}
.droite {
	float:right;
	margin-left: 20px;
	margin-bottom: 10px;
	clear:both;
}
.titre {
	clear:both;
	border:none;
}
.embed {
float:none;
margin:0 auto;
}