html {
  background-color: black;
}

body {
	background-color: black;
	font: bold 12px/17px Helvetica, Arial, sans-serif;
	color: white;
}

em {
  font-style: italic;
}

a {
  color: #69777a;
  text-decoration: none;
}

a:hover {
  color: #829296;
  border-bottom: 1px solid #3c4344;  
}

:focus { /* Fix for the ugly dotted outline in Mozilla */
  -moz-outline-style: none;
}

div.clear {
	clear: both;
	overflow: hidden;
	height: 0;
}

/*
 * Home
 * ---------------------------------------------------------------------------
 */

div.container {
	width: 1168px;
	margin: 25px auto;
}

body.home div.container {
  width: 740px;
  margin-top: 100px;
}

div.bonjour {
  width: 549px;
  height: 293px;
  margin-bottom: 87px;
  background: url("../images/bonjour.png") no-repeat top left;
  text-indent: -9999px;
  position: relative;
  left: -3px;
}

div.bonjour a {
  position: absolute;
  display: block;
  width: 212px;
  height: 93px;
  top: 200px;
  left: 216px;
  background: url("../images/video_hover.png") no-repeat -9999px 0;
}

div.bonjour a:hover {
  background-position: top left;
}

body.home div.infos {
  width: 250px;
  float: left;
}

body.home p.apropos {
  margin-bottom: 17px;
}

div.coordonnees {
  color: #69777a;
}

div.coordonnees div.address span {
  font-size: 11px;
}

div.coordonnees ul.reseauxsociaux {
  margin-top: 4px;
}

ul.reseauxsociaux li {
  float: left;
}

div.coordonnees ul.reseauxsociaux a {
  float: left;
  text-indent: -9999px;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  background: url("../images/twitter.png") no-repeat top left;
}

div.coordonnees ul.reseauxsociaux a.facebook {
  background-image: url("../images/facebook.png");
}

div.coordonnees ul.reseauxsociaux a.vimeo {
  background-image: url("../images/vimeo.png");
}

div.coordonnees ul.reseauxsociaux a:hover {
  background-position: bottom left;
  border: 0;
}

body.home div.nouvelle {
  float: left;
  width: 490px;
}

body.home div.nouvelle div.date, dl.nouvelles dt {
  float: left;
  position: relative;
  top: -9px;
  width: 143px;
  text-align: right;
  background: url("../images/separateur.png") repeat-y top right;
  padding-right: 13px;
  color: #69777a;
  line-height: 35px;
}

body.home div.nouvelle div.texte, dl.nouvelles dd {
  margin-left: 168px;
}

body.home div.nouvelle div.texte, dl.nouvelles dd p,
div.detailsBlock div.description p {
  margin-bottom: 8px;
}

body.home div.nouvelle div.texte a, dl.nouvelles dd a {
  color: white;
  border-bottom: 1px solid #7d898d;
}

body.home div.nouvelle div.texte a:hover, dl.nouvelles dd a:hover {
  color: #a3b2b6;
}

body.home div.nouvelle div.texte div.plus {
  margin-top: 17px;
  padding-right: 15px;
  float: left;
  background: url("../images/fleche_droite.png") no-repeat 100% 50%;
}

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

div.footer {
  clear: both;
  margin: 63px 0 0 71px;
}

div.footer div.menu ul {
  position: relative;
  top: -7px;
  float: left;
  line-height: 31px;
  background: url("../images/separateur.png") repeat-y top left;
}

div.footer div.menu ul li {
  float: left;
}

div.footer div.menu ul a {
  float: left;
  padding: 0 14px;
  background: url("../images/separateur.png") repeat-y top right;
}

div.footer div.menu ul a:hover {
  border: 0;
  color: #829296;
  background-color: #1d2122;
}

div.footer div.menu ul a:active {
  background-color: #262a2c;
}

div.footer div.address {
  font-style: none;
  float: left;
  margin-left: 13px;
}

/*
 * Nouvelles
 * ---------------------------------------------------------------------------
 */

body.news div.container {
  margin-top: 60px;
  padding-top: 130px;
  background: url("../images/nouvelles.png") no-repeat 214px 10px;
}

body.news div.footer {
  margin-left: 0;
}

body.news div.footer div.menu {
  float: left;
  width: 201px;
}

body.news div.footer div.menu ul {
  float: right;
}

body.news dl.nouvelles dt {
  clear: left;
  width: 188px;
}

body.news dl.nouvelles dd {
  margin: 0 0 30px 214px;
  width: 520px;
}

body.news div.plus {
  margin: 0 0 52px 214px;
  padding-right: 15px;
  float: left;
  background: url("../images/fleche_bas.png") no-repeat 100% 50%;
}

body.news div.plus a {
  color: white;
  border-bottom: 1px solid #7d898d;
}

body.news div.plus a:hover {
  color: #a3b2b6;
}

/*
 * Navigation
 * ---------------------------------------------------------------------------
 */

ul.arrows {
	float: left;
	background: url("../images/separateur.png") repeat-y top right;
}

ul.arrows li {
  float: left;
	background: url("../images/separateur.png") repeat-y top left;
}

ul.arrows a {
	float: left;
	width: 36px;
	height: 35px;
	text-indent: -6666px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

ul.arrows a#navPrev {
	background-image: url("../images/fleche_gauche.png");
}

ul.arrows a#navNext {
	background-image: url("../images/fleche_droite.png");
}

ul.arrows a:hover {
  border: 0;
  background-color: #1d2122;
}

ul.arrows a:active {
  background-color: #262a2c;
}

div#currentItem {
	float: left;
	width: 252px;
	height: 17px;
	padding: 10px 13px 8px;
	background: url("../images/separateur.png") repeat-y top right;
	cursor: pointer;
}

div#currentItem div.counter {
  float: left;
  color: #69777a;
}

div#currentItem:hover div.counter, div#currentItem.on div.counter {
  color: #829296;
}

div#currentItem h1 {
  float: right;
  padding-right: 21px;
  background: url("../images/fleche_bas.png") no-repeat 100% 50%;
}

div#currentItem:hover {
  background-color: #1d2122;
}

div#currentItem.on {
  background-color: #262a2c;
}

/*
 * Details block
 * ---------------------------------------------------------------------------
 */

div.detailsBlock {
	float: left;
  color: #69777a;
  width: 500px;
}

div.detailsBlock div.description {
  padding: 10px 0 0 13px;
}

div.detailsBlock div.description a {
  border-bottom: 1px solid #3c4344;  
}

div.detailsBlock div.description a:hover {
  
}

ul.thumbnails {
  position: relative;
  left: -1px;
  margin-top: 15px;
	height: 27px;
	width: 500px;
	background: url("../images/separateur.png") repeat-y top left;
}

ul.thumbnails li {
	float: left;
	background: url("../images/separateur.png") repeat-y top right;
}

ul.thumbnails a {
	float: left;
	padding: 0 14px;
	line-height: 27px;
}

ul.thumbnails a:hover {
  border: 0;
  color: #829296;
  background-color: #1d2122;
}

ul.thumbnails li.video a {
	background: url("../images/video_icon.png") no-repeat 100% 45%;
	padding-right: 32px;
}

ul.thumbnails li.video a:hover {
  background-color: #1d2122;
}

ul.thumbnails a.active {
	color: white;
}

/*
 * Popup
 * ---------------------------------------------------------------------------
 */

div.navigation {
  z-index: 500;
}

ul#menu {
	display: none;
	position: absolute;
	width: 278px;
	padding: 0;
	margin: 35px 0 0 72px;
	border-bottom: none;
  background-color: #1d2122;
  background-color: rgba(29,33,34,0.9);
	z-index: 100;
}

ul#menu.visible {
	display: block;
}

ul#menu li {
	display: block;
	line-height: 24px;
  padding-bottom: 8px;
  margin: 0;
	background: url("../images/separateur_horiz.png") repeat-x bottom left;
}

ul#menu > li + li + li {
  background-image: none;
}

ul#menu li li {
  background: none;
  margin: 0;
  padding: 0;
}

ul#menu li div.category {
  text-align: right;
  margin-top: 6px;
  padding-right: 34px;
  color: #475051;
}

ul#menu li a {
	display: block;
	line-height: 24px;
	padding-right: 34px;
	color: white;
	border: 0;
	text-align: right;
}

ul#menu ul li.current a {
	background: url("../images/current.png") no-repeat 100% 50%;
}

ul#menu li a.hover, ul#menu ul li.current a.hover {
  background-color: #363d3e;
}

/*
 * Content
 * ---------------------------------------------------------------------------
 */

div.content {
  clear: both;
  padding: 25px 0 0 72px;
}