@CHARSET "ISO-8859-1";

/* -- General style -- */

body {

	width: 960px;

	font: 14px Helvetica Neue;

	text-rendering: optimizeLegibility;

	overflow-y: scroll;

	z-index: 1;

	position: relative;

}

h1 {

  font-size: 36px;

  font-weight: 300;

  margin-bottom: .3em;

}

/* -- Streamgraph Style -- */

#streamgraph {

  font: 10px sans-serif;

  margin: 10px 0;

}

#streamgraphTimeline {

  font: 10px sans-serif;

  margin: 10px 0;

}

svg path {

	position: relative;

}

/* -- Style for the selectors -- */

div.selecteur {

	width: 5px;

	height: 50px;

	z-index: 2;

	position: absolute;

	background-color: #FFFFFF;

	opacity: 0.5;

	border-style: solid;

	border-color: #000000;

	border-width: 2px 0px;

}

div.selecteur.gauche {

	border-left-width: 2px;

}

div.selecteur.droite {

	border-right-width: 2px;

}

div.selection {

	background: black;

	height: 3px;

	z-index: 2;

	position: absolute;

	opacity: 1;

}

div.cache {

	background-color:#000000;

	opacity:0.3;

	z-index: 2;

	position: absolute;

}

div.cache.droite {

}

div.cache.gauche {

	width: 0px;

}

/* -- special design for each streamgraph -- */

#streamgraph div.selecteur {

	height: 300px; 

}

#streamgraph div.cache {

	height: 300px; 

}

#streamgraphTimeline .curseur {

	height: 50px;

	width: 1px;

	background: black;

	z-index: 5;

	position: absolute;

}

#streamgraphTimeline div.selecteur {

	height: 50px; 

}

#streamgraphTimeline div.selection {

	height: 5px; 

}

#streamgraphTimeline div.cache {

	height: 50px; 

}

.time-unit {

	border-width: 0 1px 1px;

	border-style: solid;

	border-color: black;

	display: inline-block;

	margin-right:	1px;

	padding: 1px;

	text-align: center;

	width: 85px;

}